사용자 프로필 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl border border-blue-200 dark:border-blue-700 relative">
    <!-- Organic Top Curve -->
    <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded-b-full transform scale-x-150 -translate-y-1/2 opacity-75"></div>

    <div class="relative pt-12 pb-6 px-6 text-center">
      <img class="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-white dark:border-gray-800 shadow-md transform transition-transform duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Profile Avatar">
      
      <h3 class="text-xl font-semibold text-blue-900 dark:text-gray-100 mb-1">Jane Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-300 mb-4">Verified Vendor</p>
      
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
        Providing high-quality handcrafted goods to homes worldwide. Passionate about unique designs and customer satisfaction.
      </p>
      
      <div class="flex justify-center space-x-3 mb-6">
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
          <span>120 Sales</span>
        </div>
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.517c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" />
          </svg>
          <span>4.9 (88 Reviews)</span>
        </div>
      </div>

      <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md shadow-blue-300 dark:shadow-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        View Shop
      </a>
    </div>
  </div>
</div>