Social_Connection_Chart_Component

<div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-50 flex items-center justify-center dark:bg-gray-900 overflow-hidden">
  <div class="max-w-6xl w-full mx-auto p-6 md:p-8 rounded-3xl bg-white shadow-xl dark:bg-gray-800 transition-colors duration-300">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white transition-colors duration-300 tracking-tight leading-tight">
        Your Connection Ecosystem
      </h2>
      <button class="px-4 py-2 rounded-full text-sm font-semibold bg-pink-500 text-white shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
        Expand View
      </button>
    </div>

    <p class="text-md md:text-lg mb-8 text-gray-600 dark:text-gray-300 transition-colors duration-300 leading-snug">
      Visualize the organic flow of your social connections and discover new possibilities within your network.
    </p>

    <div class="relative w-full h-80 sm:h-96 md:h-[500px] lg:h-[600px] flex items-center justify-center p-4 border border-gray-200 rounded-2xl dark:border-gray-700 overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-850 dark:to-gray-800">
      <!-- Main Node -->
      <div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="You" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-pink-500 shadow-lg ring ring-pink-500 ring-opacity-50 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:ring-8" />
        <span class="mt-2 text-sm md:text-base font-semibold text-gray-800 dark:text-white transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-2 whitespace-nowrap">You</span>
      </div>

      <!-- Connection Nodes (Organic Placement) -->
      <div class="absolute z-10 w-full h-full">
        <!-- Path 1 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 48 50 C 30 20, 10 30, 25 15" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] left-[18%] md:top-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Alice" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Alice</span>
        </div>

        <!-- Path 2 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 52 50 C 70 80, 85 70, 75 85" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] right-[18%] md:bottom-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Bob" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Bob</span>
        </div>

        <!-- Path 3 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 48 C 20 70, 30 90, 15 75" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] left-[18%] md:bottom-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Carol" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Carol</span>
        </div>

        <!-- Path 4 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 52 C 80 30, 70 10, 85 25" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] right-[18%] md:top-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="David" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">David</span>
        </div>

        <!-- Path 5 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 25 5, 20 50, 40 10" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute top-[5%] left-[30%] md:top-[2%] md:left-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Eve" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Eve</span>
        </div>

        <!-- Path 6 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 75 95, 80 50, 60 90" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute bottom-[5%] right-[30%] md:bottom-[2%] md:right-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Frank" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Frank</span>
        </div>

      </div>
    </div>

    <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Connections</h4>
        <p class="text-3xl font-extrabold text-pink-500">236</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12 since last week</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Mutual Interests</h4>
        <p class="text-3xl font-extrabold text-pink-500">78%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Avg. across your network</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">New Connections this Month</h4>
        <p class="text-3xl font-extrabold text-pink-500">18</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Ready to mingle</p>
      </div>
    </div>

    <div class="mt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-gray-900 text-white dark:bg-pink-500 dark:text-white shadow-lg hover:bg-gray-700 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:scale-105">
        Explore New Matches
        <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
          </path>
        </svg>
      </a>
    </div>
  </div>
</div>