Luxury_Dating_Columns_Component

<section class="py-12 md:py-20 lg:py-28 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-serif overflow-hidden">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
    <div class="text-center mb-12 md:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-4 dark:text-gray-50">
        Find Your Perfect Match
      </h2>
      <p class="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Discover meaningful connections in a refined and exclusive environment.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Column 1: Discover -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=1" alt="Discover Profiles" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Explore Profiles
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Browse through a curated selection of sophisticated individuals looking for genuine connections.
        </p>
      </div>

      <!-- Column 2: Connect -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Connect Seamlessly" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Connect Seamlessly
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Initiate conversations with ease using our intuitive messaging system and elegant interface.
        </p>
      </div>

      <!-- Column 3: Thrive -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=2" alt="Build Relationships" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Build Lasting Bonds
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Foster meaningful relationships that enrich your life and lead to a brighter future.
        </p>
      </div>

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