Follow Button Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
    <div class="relative h-32 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 flex items-end p-4">
      <img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/300/200?random=1" alt="Background image">
      <div class="relative z-10 w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 shadow-lg content-center flex-shrink-0">
        <img class="w-full h-full rounded-full object-cover" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Agent Avatar">
      </div>
    </div>
    
    <div class="p-4 text-center">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-1">Sarah Johnson</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Real Estate Agent</p>
      
      <div class="flex justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-4">
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          <span>New York, USA</span>
        </div>
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Years Exp.</span>
        </div>
      </div>
      
      <button class="w-full px-6 py-3 rounded-full font-medium text-white shadow-md
        bg-gradient-to-r from-gray-500 to-gray-600
        dark:from-gray-600 dark:to-gray-700
        hover:from-gray-600 hover:to-gray-700
        dark:hover:from-gray-700 dark:hover:to-gray-800
        transition-all duration-300 ease-in-out
        transform hover:-translate-y-0.5 hover:shadow-lg
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75
      ">
        Follow Agent
      </button>
    </div>
  </div>
</div>