ユーザープロファイルコンポーネント - Dark Forest テーマ

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden max-w-sm sm:max-w-md md:max-w-lg w-full transform transition duration-500 hover:scale-105">
    <div class="relative h-32 sm:h-48 md:h-56 bg-gradient-to-br from-green-700 to-green-900 dark:from-green-800 dark:to-green-950">
      <img class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://picsum.photos/600/350?random=1" alt="Background foliage">
      <div class="absolute inset-0 flex items-center justify-center">
        <img class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover transform translate-y-8 sm:translate-y-12 md:translate-y-16" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture">
      </div>
    </div>
    <div class="pt-12 pb-6 px-6 sm:pt-16 sm:pb-8 sm:px-8 text-center">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-400 font-semibold mb-4">Real Estate Agent</p>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
        Dedicated real estate professional specializing in sustainable properties and luxury homes in the Green Valley area. Passionate about helping clients find their perfect home.
      </p>
      <div class="flex justify-center space-x-4 mb-6">
        <a href="#" class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
          View Listings
        </a>
        <a href="#" class="bg-transparent border border-green-600 dark:border-green-500 text-green-600 dark:text-green-500 hover:bg-green-50 dark:hover:bg-gray-700 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
          Contact
        </a>
      </div>
      <div class="grid grid-cols-2 gap-4 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">150+</span> Properties Sold
        </div>
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">12</span> Years Exp.
        </div>
      </div>
    </div>
  </div>
</div>