社交组件组件

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black min-h-screen font-serif text-gray-900 dark:text-gray-100 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border border-gray-200 dark:border-gray-700">

    <!-- Background Motif (Optional, for luxury feel) -->
    <div class="absolute inset-0 bg-repeat opacity-5 dark:opacity-[0.02]" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 0h3v3H0V0zm3 3h3v3H3V3z\'/%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative p-6 sm:p-8 md:p-10 z-10">

      <!-- Profile Header -->
      <div class="flex flex-col items-center mb-8">
        <div class="w-28 h-28 rounded-full overflow-hidden mb-4 border-4 border-gray-300 dark:border-gray-600 shadow-lg transform transition-transform duration-300 hover:scale-105">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <h2 class="text-3xl font-semibold tracking-wide text-center leading-tight mb-1 text-gray-900 dark:text-gray-100">
          Amelia Lux
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-400 font-light text-center">
          @amelialuxofficial
        </p>
      </div>

      <!-- Engagement Metrics -->
      <div class="flex justify-around items-center mb-8 gap-4">
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">2.1M</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">124</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">9.8K</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Likes</p>
        </div>
      </div>

      <!-- Bio/Description (Simple) -->
      <div class="text-center mb-8">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          Music producer and DJ crafting emotive soundscapes and rhythmic journeys. 
          <span class="block text-sm text-gray-500 dark:text-gray-400 mt-1">Dreaming in melodies.</span>
        </p>
      </div>

      <!-- Call to Action / Interact Buttons -->
      <div class="flex flex-col space-y-4">
        <button class="w-full py-3 px-6 bg-indigo-700 text-white rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-800 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 
                       shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Follow
        </button>
        <button class="w-full py-3 px-6 border-2 border-indigo-700 text-indigo-700 rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-50 dark:hover:bg-gray-700 dark:text-indigo-400 dark:border-indigo-500 
                       transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Message
        </button>
      </div>

    </div>
  </div>
</div>