모든 구성 요소

                <section class="relative py-12 sm:py-16 md:py-20 lg:py-24 bg-gray-950 dark:bg-black overflow-hidden">
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow"></div>
    <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-reverse"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10 sm:mb-12 md:mb-16">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight animate-fade-in">
        <span class="block pb-2 lg:inline-block relative text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600">
          Explore Our Arena
          <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1 bg-blue-500 rounded-full shadow-lg shadow-blue-500/50 animate-glow-line"></span>
        </span>
      </h2>
      <p class="mt-4 text-base sm:text-lg text-gray-400 max-w-3xl mx-auto animate-fade-in-delay-1">
        Navigate through our powerful features and dedicated sections for athletes and fans.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-blue-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-blue-500/20 animate-fade-in-delay-2">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-blue-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(59,130,246,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-blue-200 transition-colors duration-300">Team Stats</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">In-depth performance analytics.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-purple-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-purple-500/20 animate-fade-in-delay-3">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-purple-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-2A4 4 0 0111 16V8a4 4 0 014-4h2a4 4 0 014 4v8a4 4 0 01-4 4z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-purple-200 transition-colors duration-300">Player Profiles</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Detailed athlete information.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-pink-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-pink-500/20 animate-fade-in-delay-4">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-pink-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-pink-200 transition-colors duration-300">Upcoming Games</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Never miss a match.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-green-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-green-500/20 animate-fade-in-delay-5">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-green-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(34,197,94,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18S13.168 18.477 12 19.253"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-green-200 transition-colors duration-300">Fan Zone</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Connect with fellow enthusiasts.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-indigo-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-indigo-500/20 animate-fade-in-delay-6">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-indigo-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(99,102,241,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-indigo-200 transition-colors duration-300">Training Logs</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Track your progress.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-red-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-red-500/20 animate-fade-in-delay-7">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-red-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(239,68,68,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-red-200 transition-colors duration-300">Club Store</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Gear up for glory.</p>
        </div>
      </div>

      <div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-yellow-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-yellow-500/20 animate-fade-in-delay-8">
        <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <svg class="w-10 h-10 mb-4 text-yellow-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(251,191,36,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4M6 16.5V20a2 2 0 002 2h8a2 2 0 002-2v-3.5M4 7V4a2 2 0 012-2h12a2 2 0 012 2v3M3 10h18"></path>
          </svg>
          <h3 class="text-xl font-semibold text-white mb-2">
            <a href="#" class="group-hover:text-yellow-200 transition-colors duration-300">Contact Us</a>
          </h3>
          <p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Get in touch with the team.</p>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-slow {
      0% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.05); opacity: 0.4; }
      100% { transform: scale(1); opacity: 0.3; }
    }
    @keyframes pulse-slow-reverse {
      0% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(0.95); opacity: 0.4; }
      100% { transform: scale(1); opacity: 0.3; }
    }
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Delay animations using different keyframes or utility classes */
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }
    .animate-fade-in-delay-1 { animation: fade-in 0.8s ease-out 0.2s forwards; opacity: 0; }
    .animate-fade-in-delay-2 { animation: fade-in 0.8s ease-out 0.4s forwards; opacity: 0; }
    .animate-fade-in-delay-3 { animation: fade-in 0.8s ease-out 0.6s forwards; opacity: 0; }
    .animate-fade-in-delay-4 { animation: fade-in 0.8s ease-out 0.8s forwards; opacity: 0; }
    .animate-fade-in-delay-5 { animation: fade-in 0.8s ease-out 1.0s forwards; opacity: 0; }
    .animate-fade-in-delay-6 { animation: fade-in 0.8s ease-out 1.2s forwards; opacity: 0; }
    .animate-fade-in-delay-7 { animation: fade-in 0.8s ease-out 1.4s forwards; opacity: 0; }
    .animate-fade-in-delay-8 { animation: fade-in 0.8s ease-out 1.6s forwards; opacity: 0; }

    @keyframes glow-line {
      0% { width: 0; opacity: 0; }
      50% { width: 100%; opacity: 1; }
      100% { width: 0; opacity: 0; }
    }

    /* Apply animations */
    .animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
    .animate-pulse-slow-reverse { animation: pulse-slow-reverse 6s infinite ease-in-out; }
    .animate-glow-line { animation: glow-line 3s infinite ease-in-out; }

    /* Dark mode adjustments for glow */
    .dark .group-hover\:opacity-100 {
        background: linear-gradient(to br, var(--tw-gradient-stops));
    }
    .dark .group-hover\:shadow-blue-500\/20 {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
    }
    .dark .group-hover\:shadow-purple-500\/20 {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4) !important;
    }
    .dark .group-hover\:shadow-pink-500\/20 {
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.4) !important;
    }
    .dark .group-hover\:shadow-green-500\/20 {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
    }
    .dark .group-hover\:shadow-indigo-500\/20 {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
    }
    .dark .group-hover\:shadow-red-500\/20 {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
    }
    .dark .group-hover\:shadow-yellow-500\/20 {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
    }
  </style>
</section>
              

                <div class="relative bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">

  <!-- Background Grids/Patterns for Industrial Feel -->
  <div class="absolute inset-0 z-0 overflow-hidden opacity-5 dark:opacity-10">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob dark:from-sky-700 dark:to-blue-900"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000 dark:from-fuchsia-700 dark:to-pink-900"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/4 h-1/4 bg-gradient-to-br from-orange-400 to-red-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000 dark:from-amber-600 dark:to-red-800"></div>
  </div>
  <div class="absolute inset-0 z-0 pointer-events-none opacity-5 dark:opacity-10">
    <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 L 0 40" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-pattern)" />
    </svg>
  </div>
  <!-- End Background -->

  <div class="relative z-10 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">

    <!-- Component Header -->
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tight drop-shadow-lg">
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-cyan-400 dark:to-fuchsia-500">Marketplace Insights</span>
      <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 mt-2 sm:mt-4">Manage your vendor activities and product listings.</span>
    </h2>

    <!-- Tabs Navigation -->
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mb-6 sm:mb-8 border-b-2 border-dashed border-gray-300 dark:border-gray-700 pb-4 overflow-x-auto scrollbar-hidden">

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-bold transition-all duration-300 ease-in-out
                     bg-blue-600 text-white shadow-lg shadow-blue-500/50 dark:bg-sky-500 dark:shadow-sky-500/50
                     hover:bg-blue-700 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-300
                     border-2 border-blue-700 dark:border-sky-600 whitespace-nowrap">
        <i class="fas fa-boxes mr-2"></i> Product Catalog
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-shipping-fast mr-2"></i> Order Management
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-chart-line mr-2"></i> Sales Analytics
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-user-friends mr-2"></i> Vendor Network
      </button>

    </div>

    <!-- Tabs Content (Active Tab: Product Catalog) -->
    <div>
      <!-- Product Catalog Tab Content -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-red-500 dark:border-t-rose-600 rounded-lg shadow-md p-5 pb- lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-red-500 dark:bg-rose-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">HOT</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/1018/80/80" alt="Product 1" class="w-20 h-20 object-cover rounded-md border-2 border-red-400 dark:border-rose-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Heavy Duty Wrench Set</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HDWS-V001</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-blue-600 dark:text-sky-400 font-semibold">ToolCrafters Inc.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$129.99</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4.5/5)</span></p>
            </div>
            <button class="w-full bg-red-600 dark:bg-rose-700 text-white py-2 rounded-lg font-semibold hover:bg-red-700 dark:hover:bg-rose-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-rose-500 border-b-4 border-red-800 dark:border-rose-900 shadow-md">
              <i class="fas fa-eye mr-2"></i> View Details
            </button>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-blue-500 dark:border-t-sky-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-blue-500 dark:bg-sky-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">SALE</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/201/80/80" alt="Product 2" class="w-20 h-20 object-cover rounded-md border-2 border-blue-400 dark:border-sky-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Automated Robotic Arm</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: ARA-ELT005</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-purple-600 dark:text-fuchsia-400 font-semibold">MechWorks Global</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$2,499.00</span> <span class="text-gray-500 line-through ml-2">$2,999.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4/5)</span></p>
            </div>
            <button class="w-full bg-blue-600 dark:bg-sky-700 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-sky-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-500 border-b-4 border-blue-800 dark:border-sky-900 shadow-md">
              <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
            </button>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-green-500 dark:border-t-emerald-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-green-500 dark:bg-emerald-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">NEW</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/237/80/80" alt="Product 3" class="w-20 h-20 object-cover rounded-md border-2 border-green-400 dark:border-emerald-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">High-Precision Lathe Machine</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HPLM-XYZ007</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-orange-600 dark:text-amber-400 font-semibold">Precision Tools Co.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$8,750.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(5/5)</span></p>
            </div>
            <button class="w-full bg-green-600 dark:bg-emerald-700 text-white py-2 rounded-lg font-semibold hover:bg-green-700 dark:hover:bg-emerald-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-green-400 dark:focus:ring-emerald-500 border-b-4 border-green-800 dark:border-emerald-900 shadow-md">
              <i class="fas fa-arrow-alt-circle-right mr-2"></i> Learn More
            </button>
        </div>

      </div>

      <!-- Call to Action below cards -->
      <div class="text-center mt-8 sm:mt-12">
        <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-full shadow-lg shadow-purple-500/50 dark:from-fuchsia-600 dark:to-rose-700 dark:shadow-fuchsia-500/50
                       hover:from-purple-700 hover:to-pink-700 dark:hover:from-fuchsia-700 dark:hover:to-rose-800 transition-all duration-300 ease-in-out
                       focus:outline-none focus:ring-4 focus:ring-purple-400 dark:focus:ring-fuchsia-300 border-2 border-purple-800 dark:border-fuchsia-900 animate-pulse">
          <i class="fas fa-plus-circle mr-2"></i> Explore All 10,000+ Products
        </button>
      </div>


    </div>

  </div>

  <!-- Add Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0V4LLanw2qksTZI9xQpQAcSNasj+pXVjrSPmGz0Y15e7p/f0+asX5RFA5Bw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Tailwind JIT classes for animations and dark mode (if not configured globally) -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.3, 0.9);
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
    .scrollbar-hidden::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hidden {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  </style>


</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-100 via-lime-100 to-sky-100 dark:from-slate-800 dark:via-gray-900 dark:to-teal-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden border border-emerald-200 dark:border-teal-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-emerald-200 dark:border-teal-700 bg-gradient-to-r from-emerald-500 to-sky-500 dark:from-emerald-700 dark:to-blue-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-white mb-2">Recent Activity Flow</h2>
      <p class="text-sm sm:text-base text-emerald-100 dark:text-teal-200">Insights from your latest natural data streams.</p>
      <div class="mt-4 flex flex-wrap gap-3 sm:gap-4">
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">Today</button>
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Week</button>
        <button class="px-4 py-2 rounded-full text-sm font-medium bg-white text-emerald-600 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-emerald-300 dark:hover:bg-gray-600 dark:focus:ring-teal-500 dark:focus:ring-offset-gray-800">This Month</button>
      </div>
    </div>

    <div class="overflow-x-auto p-4 sm:p-6">
      <table class="min-w-full divide-y divide-emerald-200 dark:divide-teal-700">
        <thead class="bg-emerald-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200 sm:pl-6">Source</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Event Type</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Value</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Status</th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-emerald-700 dark:text-teal-200">Timeline</th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
              <span class="sr-only">View</span>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-emerald-100 dark:divide-teal-800 bg-white dark:bg-gray-800">
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile picture">
                    <span>LeafyGreen Insights</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Harvest Update</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-lime-600 dark:text-lime-400">+ 12.5%</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-700 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">Completed</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">2 hours ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, LeafyGreen Insights</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile picture">
                    <span>Oceanic Data Stream</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Temperature Alert</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-red-600 dark:text-red-400">- 0.8°C</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-yellow-100 dark:bg-yellow-700 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:text-yellow-200">Pending</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">5 hours ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, Oceanic Data Stream</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Profile picture">
                    <span>MountainPeak Analytics</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Soil Composition</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-blue-600 dark:text-blue-400">+ 3.1% N</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-700 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-200">Processing</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">1 day ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, MountainPeak Analytics</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture">
                    <span>ForestPath Systems</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Ecosystem Health</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-purple-600 dark:text-purple-400">Score 8.9</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-violet-100 dark:bg-purple-700 px-2.5 py-0.5 text-xs font-medium text-violet-800 dark:text-purple-200">Validated</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">3 days ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, ForestPath Systems</span></a>
            </td>
          </tr>
          <tr class="hover:bg-emerald-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                <div class="flex items-center gap-3">
                    <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile picture">
                    <span>RiverFlow Tech</span>
                </div>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">Water Quality Report</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-cyan-600 dark:text-cyan-400">pH 7.1</td>
            <td class="whitespace-nowrap px-3 py-4 text-sm">
              <span class="inline-flex items-center rounded-full bg-indigo-100 dark:bg-indigo-700 px-2.5 py-0.5 text-xs font-medium text-indigo-800 dark:text-indigo-200">Approved</span>
            </td>
            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">4 days ago</td>
            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
              <a href="#" class="text-emerald-600 dark:text-teal-400 hover:text-emerald-900 dark:hover:text-teal-300">View<span class="sr-only">, RiverFlow Tech</span></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 border-t border-emerald-200 dark:border-teal-700 bg-emerald-50 dark:bg-gray-800">
      <nav class="flex items-center justify-between text-sm sm:text-base">
        <div class="flex-1 flex justify-between sm:hidden">
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
            Previous
          </a>
          <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 text-sm font-medium rounded-md text-emerald-700 dark:text-teal-200 bg-white dark:bg-gray-700 hover:bg-emerald-100 dark:hover:bg-gray-600">
            Next
          </a>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700 dark:text-gray-300">
              Showing
              <span class="font-medium">1</span>
              to
              <span class="font-medium">5</span>
              of
              <span class="font-medium">12</span>
              results
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                <span class="sr-only">Previous</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
              <a href="#" aria-current="page" class="z-10 bg-emerald-600 border-emerald-600 text-white relative inline-flex items-center px-4 py-2 text-sm font-medium">
                1
              </a>
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                2
              </a>
              <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                3
              </a>
              <span class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
                ...
              </span>
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                12
              </a>
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-emerald-300 dark:border-teal-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-emerald-50 dark:hover:bg-gray-600">
                <span class="sr-only">Next</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
            </nav>
          </div>
        </div>
      </nav>
    </div>

  </div>
</div>
              

                <div class="bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-pink-900 dark:to-yellow-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 md:p-10 lg:p-12 w-full max-w-6xl transition-all duration-300 ease-in-out">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-center mb-10 text-purple-600 dark:text-purple-300 drop-shadow-lg leading-tight">
      <span class="block">Explore Our World</span> <span class="text-pink-500 dark:text-pink-400">Find Your Match</span>
    </h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10">

      <!-- Section 1: About Us -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-purple-300 dark:border-purple-600">
        <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-200">About Us</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Our Story</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Mission & Values</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Team</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Discover -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-pink-300 dark:border-pink-600">
        <h2 class="text-2xl font-bold mb-4 text-pink-700 dark:text-pink-200">Discover</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Browse Profiles</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Local Matches</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Zodiac Compatibility</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
        </ul>
        <div class="mt-4">
          <img src="https://picsum.photos/id/1025/150/100" alt="Love in the Air" class="rounded-md shadow-sm w-full h-24 object-cover">
        </div>
      </div>

      <!-- Section 3: Features -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-yellow-300 dark:border-yellow-600">
        <h2 class="text-2xl font-bold mb-4 text-yellow-700 dark:text-yellow-200">Features</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Messaging & Chat</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Video Dates</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Icebreakers</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Boosts</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Moderation</a></li>
        </ul>
      </div>

      <!-- Section 4: Support & Legal -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-blue-300 dark:border-blue-600">
        <h2 class="text-2xl font-bold mb-4 text-blue-700 dark:text-blue-200">Help & Legal</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">FAQ</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Contact Us</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Terms of Service</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Safety Tips</a></li>
        </ul>
      </div>

      <!-- Section 5: Community & Blog (Spans 2 columns on larger screens) -->
      <div class="lg:col-span-2 bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-green-300 dark:border-green-600 relative overflow-hidden group">
        <h2 class="text-2xl font-bold mb-4 text-green-700 dark:text-green-200">Community & Blog</h2>
        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6 text-md text-gray-700 dark:text-gray-300 relative z-10">
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">User Forums</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Dating Advice</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Events & Meetups</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Love Stories (Blog)</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Podcast</a></li>
        </ul>
        <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-green-200 dark:bg-green-800 rounded-full opacity-30 group-hover:opacity-60 transition-opacity duration-300 blur-md"></div>
        <div class="absolute -top-2 -left-2 w-16 h-16 bg-green-200 dark:bg-green-800 rounded-full opacity-20 group-hover:opacity-50 transition-opacity duration-300 blur-md"></div>
      </div>

      <!-- Section 6: User Settings (Includes an avatar) -->
      <div class="bg-indigo-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-indigo-300 dark:border-indigo-600 flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-20 h-20 rounded-full object-cover mb-4 border-4 border-indigo-400 dark:border-indigo-500 shadow-md">
        <h2 class="text-2xl font-bold mb-4 text-indigo-700 dark:text-indigo-200">Your Account</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Settings</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Preferences</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Notifications</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Subscription</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Logout</a></li>
        </ul>
      </div>

      <!-- Section 7: Mobile Apps -->
      <div class="bg-red-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-red-300 dark:border-red-600">
        <h2 class="text-2xl font-bold mb-4 text-red-700 dark:text-red-200">Mobile Apps</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">iOS App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">Android App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">App Features</a></li>
        </ul>
        <div class="mt-4 flex justify-around">
          <img src="https://picsum.photos/id/83/60/60" alt="App Store" class="rounded-lg shadow-sm">
          <img src="https://picsum.photos/id/95/60/60" alt="Google Play" class="rounded-lg shadow-sm">
        </div>
      </div>

    </div>

    <div class="mt-12 text-center text-md text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 LoveConnect. All rights reserved. <span class="hidden sm:inline">Designed with ❤️ for finding your perfect match.</span></p>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">

  <!-- Main Card Container -->
  <div class="bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">

    <!-- Header Section -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-6 sm:p-8 border-b-2 border-zinc-300 dark:border-zinc-600 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/800/400?grayscale')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
      <div class="relative z-10 flex items-center mb-4">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-orange-600 dark:text-orange-400 mr-3 transform -rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.335 5.965 3.129 8.243a12.003 12.003 0 0017.95-8.243c0-3.072-1.335-5.965-3.129-8.243z"></path>
        </svg>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Two-Factor Authentication</h2>
      </div>
      <p class="text-sm sm:text-base text-zinc-700 dark:text-zinc-300 max-w-md">
        For enhanced security, please enter the 6-digit code sent to your registered device.
      </p>
    </div>

    <!-- Body Section - OTP Input -->
    <div class="p-6 sm:p-8">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 object-cover">
        <div>
          <p class="text-sm text-zinc-700 dark:text-zinc-300">Verifying access for:</p>
          <p class="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Olivia Davis</p>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="otp-code" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Enter your 6-digit code</label>
          <div class="flex justify-center space-x-2 md:space-x-3">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" autocomplete="one-time-code" pattern="\d*">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <span class="flex items-center text-zinc-400 dark:text-zinc-500 text-3xl font-light mx-1 md:mx-2">-</span>
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
          </div>
        </div>

        <p class="text-sm text-center text-red-600 dark:text-red-400 mt-4" role="alert" aria-live="polite" id="error-message" style="display:none;">Invalid code. Please try again.</p>

        <div class="flex flex-col sm:flex-row sm:justify-between sm:space-x-4 space-y-4 sm:space-y-0">
          <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Verify Code
          </button>
          <button type="button" class="w-full sm:w-auto px-6 py-3 bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-600 dark:hover:bg-zinc-500 text-zinc-800 dark:text-zinc-200 font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Resend Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-zinc-600 dark:text-zinc-400">
          Need help? <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Contact Support</a> or <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Change Method</a>.
        </p>
      </div>
    </div>

    <!-- Footer Section (optional, for additional info) -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-4 sm:p-5 border-t-2 border-zinc-300 dark:border-zinc-600 text-center">
      <p class="text-xs text-zinc-500 dark:text-zinc-400">Your security is our priority. © 2023 Acme Events.</p>
    </div>

  </div>
</div>

<!-- Script for automatic focus and potential error display (purely illustrative, would need JS in a real app) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][type="text"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.data && e.data.match(/\d/)) { // Allow only digits
          if (index < inputs.length - 1) {
            inputs[index + 1].focus();
          }
        } else if (e.inputType === 'deleteContentBackward') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        } else {
          input.value = ''; // Clear non-digit input
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && input.value === '') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        }
      });
    });

    // Example of showing an error message (would be triggered by backend validation)
    // const errorMessage = document.getElementById('error-message');
    // document.querySelector('form').addEventListener('submit', (e) => {
    //   e.preventDefault();
    //   errorMessage.style.display = 'block'; // Or 'none' on success
    //   setTimeout(() => errorMessage.style.display = 'none', 3000); // Hide after a few seconds
    // });
  });
<\/script>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <!-- Success Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-green-50 dark:bg-green-900 border-l-4 border-green-400 dark:border-green-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-green-500 dark:text-green-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-green-800 dark:text-green-100">
          Successfully updated your profile.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-green-900 focus:ring-green-600 dark:focus:ring-green-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,0 100,20 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-green-400 dark:stroke-green-600"></path>
      </svg>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-400 dark:border-orange-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-orange-500 dark:text-orange-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-orange-800 dark:text-orange-100">
          Your session will expire in 5 minutes.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-orange-500 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-orange-900 focus:ring-orange-600 dark:focus:ring-orange-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
     <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,80 100,60 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-orange-400 dark:stroke-orange-600"></path>
      </svg>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-red-50 dark:bg-red-900 border-l-4 border-red-400 dark:border-red-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-red-500 dark:text-red-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-red-800 dark:text-red-100">
          There was an error processing your request.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-red-500 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 dark:focus:ring-offset-red-900 focus:ring-red-600 dark:focus:ring-red-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,20 100,40 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-red-400 dark:stroke-red-600"></path>
      </svg>
    </div>
  </div>

  <!-- Information Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 dark:border-blue-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-blue-500 dark:text-blue-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-blue-800 dark:text-blue-100">
          New service updates are available.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-blue-500 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-900 focus:ring-blue-600 dark:focus:ring-blue-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,70 100,50 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-blue-400 dark:stroke-blue-600"></path>
      </svg>
    </div>
  </div>

</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <!-- Share Component Container -->
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl hover:scale-105">
    
    <!-- Header -->
    <div class="text-center space-y-2">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-purple-600 dark:text-purple-300 tracking-tight leading-tight">
        Booked! Share the Joy!
      </h2>
      <p class="text-gray-500 dark:text-gray-300 text-lg sm:text-xl">
        Your appointment is confirmed. Let friends know!
      </p>
    </div>

    <!-- Share Link Section -->
    <div class="bg-purple-100 dark:bg-gray-600 rounded-2xl p-4 sm:p-5 flex flex-col items-center space-y-3">
      <p class="text-purple-700 dark:text-purple-200 font-semibold text-center text-sm sm:text-base">Your unique booking link:</p>
      <div class="relative w-full">
        <input type="text" readonly value="https://booking.example.com/your-booking-id" class="w-full pl-4 pr-12 py-3 rounded-xl bg-purple-50 dark:bg-gray-500 text-purple-800 dark:text-purple-50 font-mono text-sm sm:text-base border-2 border-purple-200 dark:border-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 transition-all duration-200" aria-label="Booking link">
        <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-purple-400 hover:bg-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 text-white p-2 rounded-lg transition-colors duration-200 group" aria-label="Copy link button">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 0012.586 3H12V2a1 1 0 10-2 0v1H8z"></path>
          </svg>
          <span class="sr-only group-hover:not-sr-only group-hover:flex absolute right-full top-1/2 -translate-y-1/2 mr-2 bg-gray-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Copied!</span>
        </button>
      </div>
    </div>
    
    <!-- Social Share Buttons Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
      
      <!-- Facebook -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-100 dark:bg-blue-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on Facebook">
        <div class="w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="mt-2 text-blue-800 dark:text-blue-100 font-semibold text-sm sm:text-base">Facebook</span>
      </a>

      <!-- Twitter/X -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-sky-100 dark:bg-sky-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on X/Twitter">
        <div class="w-12 h-12 bg-sky-400 dark:bg-sky-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.797 11.24h-6.768L9.58 13.298 2.25 22H.921l8.326-9.59L.75 2.25H8.08L12 8.314 18.244 2.25zM17.29 20l-1.153-1.32h-1.92L16.29 20H17.29zM4.25 4l-1.153 1.32h1.92L4.25 4zm13.398 1.168L15.3 18.84h2.098L19.348 4.678h-2.098z" />
          </svg>
        </div>
        <span class="mt-2 text-sky-800 dark:text-sky-100 font-semibold text-sm sm:text-base">X/Twitter</span>
      </a>

      <!-- WhatsApp -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-green-100 dark:bg-green-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on WhatsApp">
        <div class="w-12 h-12 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.7.46 3.32 1.36 4.77L2.05 22l5.02-1.32c1.3-.76 2.76-1.17 4.29-1.17h.03c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.24c-.2.33-.8.63-1.16.8-.31.13-.69.2-.95.27-.26.08-.5.14-.73.17-.49.07-1.1-.06-1.63-.33-.5-.26-1.13-.67-1.74-1.25-.61-.57-1.12-1.28-1.5-2-.32-.6-.27-.92-.18-1.1S8.57 11.84 8.2 11.4c-.4-.44-.82-1-.07-1.46.64-.42 1.13.06 1.48.51.34.45.6.93.83 1.43.23.5.38.8.62 1.05.24.25.47.37.76.5.3.12.57.1.8-.02.2-.1.6-1.07.89-1.37.29-.3.5-1.04.2-1.42-.26-.37-.77-.66-1.06-.92-.29-.26-.6-.61-.5-.8C9.65 8.9 12.08 7.37 12.4 7.22c.32-.15.65-.24.98-.21.32.02.66.07.95.14.29.08.57.2.82.35.26.16.48.37.66.58.2.22.39.49.52.79.14.3.29.62.3 1.08.01.55-.38 1.54-.74 2.05-.36.5-1.29 1.77-1.7 2.11z" />
          </svg>
        </div>
        <span class="mt-2 text-green-800 dark:text-green-100 font-semibold text-sm sm:text-base">WhatsApp</span>
      </a>

      <!-- Email -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-red-100 dark:bg-red-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share via Email">
        <div class="w-12 h-12 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.58 6.44a3 3 0 01-3.44 0L1.5 8.67z" />
            <path d="M22.5 6.55L14.73 0 12 2.29 9.27 0 1.5 6.55v.62a3 3 0 00.86 1.83L12 17.06l9.64-8.06a3 3 0 00.86-1.83V6.55z" />
          </svg>
        </div>
        <span class="mt-2 text-red-800 dark:text-red-100 font-semibold text-sm sm:text-base">Email</span>
      </a>

      <!-- LinkedIn -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-50 dark:bg-blue-900 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on LinkedIn">
        <div class="w-12 h-12 bg-blue-300 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
          </svg>
        </div>
        <span class="mt-2 text-blue-700 dark:text-blue-100 font-semibold text-sm sm:text-base">LinkedIn</span>
      </a>

      <!-- More Options -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="More sharing options">
        <div class="w-12 h-12 bg-gray-400 dark:bg-gray-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7 6H5v12h2V6zm8.659 3l-1.394 6H13.62L15 9h-2.341l-1.394 6h-1.63L11 9H8V8h4l1.341 6h1.63L15 8h-2.341l1.394-6H16l1.341 6h-2.341l-1.394-6h-1.63L13 2H8L7.029 6H5v12h2V6h1.62l1.394-6H13.727l1.394 6h1.63L17 22h-1.63z" clip-rule="evenodd" />
            <circle cx="19" cy="12" r="2" />
          </svg>
        </div>
        <span class="mt-2 text-gray-800 dark:text-gray-100 font-semibold text-sm sm:text-base">More...</span>
      </a>

    </div>

  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <!-- Component Container with 3D Card Effect -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl border-t border-r border-orange-200 dark:border-gray-600
              transform perspective-1000 rotate-x-3 rotate-y-2 translate-z-10
              transition-all duration-500 hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0
              p-6 sm:p-8 lg:p-10 relative overflow-hidden">

    <!-- Background Grain/Texture Overlay -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>

    <div class="relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-brown-800 dark:text-orange-300 mb-6 sm:mb-8 text-center
                 drop-shadow-lg [text-shadow:_2px_2px_4px_rgb(0_0_0_/_0.2)] dark:[text-shadow:_2px_2px_4px_rgb(255_165_0_/_0.2)]">
        Forum Discussions
      </h2>

      <!-- Search Bar -->
      <div class="mb-6 sm:mb-8 relative">
        <input type="text" placeholder="Search discussions..." class="w-full p-3 sm:p-4 pr-12 rounded-xl bg-orange-50 dark:bg-gray-600 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                      focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 focus:border-transparent
                      shadow-inner transition-all duration-300 transform translate-z-5 hover:scale-100.5">
        <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">

        <!-- Category Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="category" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Category</label>
          <select id="category" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Categories</option>
            <option value="general">General Discussion</option>
            <option value="announcements">Announcements</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
            <option value="suggestions">Suggestions</option>
          </select>
        </div>

        <!-- Sort By Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="sort-by" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Sort By</label>
          <select id="sort-by" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="latest">Latest Activity</option>
            <option value="popular">Most Popular</option>
            <option value="newest">Newest Posts</option>
            <option value="oldest">Oldest Posts</option>
          </select>
        </div>

        <!-- Status Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="status" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Status</label>
          <select id="status" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Statuses</option>
            <option value="open">Open</option>
            <option value="resolved">Resolved</option>
            <option value="locked">Locked</option>
          </select>
        </div>

        <!-- Tags Filter (Multi-select style) -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Tags</label>
          <div class="flex flex-wrap gap-2">
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">CSS</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">HTML</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">JavaScript</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">Tailwind</button>
             <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">UI/UX</button>
          </div>
        </div>

      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex justify-end gap-4">
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-red-800 dark:from-red-700 dark:to-red-900 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
          <span class="relative z-10">Reset Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-red-700 dark:bg-red-800 transition-opacity duration-300"></span>
        </button>
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-600 dark:to-orange-800 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          <span class="relative z-10">Apply Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-orange-600 dark:bg-orange-700 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Styles for 3D Perspective -->
  <style>
    .perspective-1000 {
      perspective: 1000px;
    }

    .rotate-x-3 {
      transform: rotateX(3deg);
    }

    .rotate-y-2 {
      transform: rotateY(2deg);
    }

    .translate-z-10 {
      transform: translateZ(10px);
    }

    .translate-z-8 {
      transform: translateZ(8px);
    }

    .translate-z-5 {
      transform: translateZ(5px);
    }

    .translate-z-4 {
      transform: translateZ(4px);
    }

    .translate-z-3 {
      transform: translateZ(3px);
    }

    .translate-z-2 {
      transform: translateZ(2px);
    }

    .translate-z-12 {
        transform: translateZ(12px);
    }

     /* Ensure children maintain 3D context */
    .perspective-1000 > * {
      transform-style: preserve-3d;
    }

    .shadow-lg[class*="transform"]:hover, .shadow-md[class*="transform"]:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c; /* Ensure dark mode body background is set */
        }
    }
  </style>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 font-serif">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-102 hover:shadow-2xl relative
              before:content-[''] before:absolute before:inset-0 before:bg-[url('https://www.transparenttextures.com/patterns/clean-paper-light.png')] dark:before:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] before:opacity-20 before:pointer-events-none">

    <!-- Page Curl / Fold Accent -->
    <div class="absolute top-0 right-0 w-0 h-0 border-l-[30px] border-b-[30px] border-solid border-white dark:border-gray-800 border-t-accent-500 border-r-accent-500 rounded-bl-lg dark:border-opacity-30" style="border-bottom-color: transparent; border-left-color: transparent;"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-white leading-tight break-words">
        Two-Factor Authentication
      </h2>
      <p class="text-gray-600 dark:text-gray-300 mb-6 text-base sm:text-lg leading-relaxed break-words">
        Enter the 6-digit code from your authenticator app to complete your login.
      </p>

      <form>
        <div class="mb-6">
          <label for="auth_code" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 invisible h-0 w-0 absolute">Verification Code</label>
          <div class="flex space-x-2 sm:space-x-4 justify-center">
            <input type="text" id="code_digit_1" name="code_digit_1" maxlength="1" inputmode="numeric" pattern="[0-9]" autofocus
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_2" name="code_digit_2" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_3" name="code_digit_3" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <span class="flex items-center text-gray-400 dark:text-gray-500 text-3xl font-semibold print:text-gray-700 rotate-180 print:rotate-0">-</span>
            <input type="text" id="code_digit_4" name="code_digit_4" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_5" name="code_digit_5" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_6" name="code_digit_6" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
          </div>
        </div>

        <button type="submit"
                class="w-full py-3 px-4 rounded-lg bg-accent-500 text-white font-semibold text-lg
                       hover:bg-accent-600 focus:outline-none focus:ring-4 focus:ring-accent-300 focus:ring-opacity-75
                       transition duration-200 ease-in-out shadow-md dark:shadow-lg dark:hover:bg-accent-400
                       print:bg-gray-800 print:text-white print:hover:bg-gray-900 print:shadow-none">
          Verify Code
        </button>
      </form>

      <div class="mt-6 text-center text-sm sm:text-base">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-accent-500 dark:hover:text-accent-400 transition duration-150 print:text-gray-800 print:underline print:hover:text-gray-900">
          Can't access your authenticator? 
          <span class="font-medium underline">Reset 2FA</span>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is to define the accent color from the instructions */
  :root {
    --color-accent-500: #FF4500; /* Example: OrangeRed */
    --color-accent-600: #E03E00;
    --color-accent-300: #FF7B33;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-accent-400: #FF6600; /* Slightly lighter for better contrast in dark mode */
    }
  }

  .bg-accent-500 { background-color: var(--color-accent-500); }
  .hover\:bg-accent-600:hover { background-color: var(--color-accent-600); }
  .focus\:ring-accent-300:focus { --tw-ring-color: var(--color-accent-300); }
  .text-accent-500 { color: var(--color-accent-500); }
  .hover\:text-accent-500:hover { color: var(--color-accent-500); }
  .focus\:border-accent-500:focus { border-color: var(--color-accent-500); }
  .focus\:ring-accent-500:focus { --tw-ring-color: var(--color-accent-500); }

  .dark .hover\:bg-accent-400:hover { background-color: var(--color-accent-400); }
  .dark .hover\:text-accent-400:hover { color: var(--color-accent-400); }

  /* Custom styling for the top-right corner fold to use accent color */
  .border-t-accent-500 { border-top-color: var(--color-accent-500); }
  .border-r-accent-500 { border-right-color: var(--color-accent-500); }

  /* For digit inputs, ensure they stay centered and are easily tabbable */
  input[type="text"][maxlength="1"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
</style>

<!-- Script for auto-focusing and handling digit input -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][inputmode="numeric"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.target.value.length === 1 && index < inputs.length - 1) {
          inputs[index + 1].focus();
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && e.target.value.length === 0 && index > 0) {
          inputs[index - 1].focus();
        }
      });

      // Simple number validation for non-numeric input
      input.addEventListener('beforeinput', (e) => {
        if (e.data && !/^[0-9]$/.test(e.data)) {
          e.preventDefault();
        }
      });
    });
  });
</script>
              

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 text-center mb-12 sm:mb-16 leading-tight">
      <span class="block">Harvesting Joy, Growing Futures</span>
      <span class="block text-2xl font-semibold mt-2 opacity-80">Explore Our Farm Life</span>
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/1084/300/300" alt="Farm Animals" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Happy Livestock</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Our animals live their best lives, nurtured with care and kindness.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Learn More
        </a>
      </div>

      <!-- Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/106/300/300" alt="Fresh Produce" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Bountiful Harvests</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">From our fields to your table, experience the freshest produce.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          See Products
        </a>
      </div>

      <!-- Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/111/300/300" alt="Sustainable Farming" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Sustainable Practices</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Committed to eco-friendly methods for a healthier planet.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Our Mission
        </a>
      </div>

      <!-- Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/93.jpg" alt="Farmer John" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Meet Our Farmers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Passionate individuals dedicated to bringing you the best.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          The Team
        </a>
      </div>

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