Alle Komponenten

                <header class="w-full bg-gradient-to-br from-purple-900 via-pink-800 to-indigo-900 bg-[length:200%_200%] animate-gradient-xy shadow-xl dark:from-gray-950 dark:via-gray-800 dark:to-black transition-colors duration-500">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
    <!-- Logo/Brand Name -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-lime-400 drop-shadow-[0_0_8px_rgba(163,230,53,0.7)] transform transition-transform duration-300 hover:scale-110" 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.75 17L9 20l-1 1h8l-1-1-1.75-3M3 13l3-3m0 0l3-3m-3 3h12m0 0l3 3m0-3l-3-3m-8.5 6h.5a2 2 0 012 2v2a2 2 0 01-2 2h-.5a2 2 0 01-2-2v-2a2 2 0 012-2zM9 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
      </svg>
      <span class="text-3xl md:text-4xl font-extrabold text-white tracking-wider drop-shadow-md text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-cyan-400 dark:from-yellow-300 dark:to-purple-300 transition-colors duration-500">QuantumLedger</span>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden lg:flex space-x-8 xl:space-x-12 items-center">
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Dashboard</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Transactions</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Portfolio</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <div class="relative group">
        <button class="text-lg font-semibold text-white px-3 py-2 rounded-lg flex items-center space-x-1 relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
          <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Tools</span>
          <svg class="w-4 h-4 ml-1 text-white group-hover:text-cyan-300 transition-colors duration-300" 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="M19 9l-7 7-7-7"></path></svg>
          <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </button>
        <div class="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 mt-3 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 min-w-[160px]">
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
        </div>
      </div>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Support</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </nav>

    <!-- User Controls & Mobile Toggle -->
    <div class="flex items-center space-x-4 md:space-x-6">
      <button aria-label="search" class="text-white hover:text-cyan-400 transition-colors duration-200 hidden md:block">
        <svg class="w-6 h-6" 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>
      </button>

      <button aria-label="Toggle Dark Mode" class="focus:outline-none text-white hover:text-cyan-400 dark:hover:text-yellow-300 transition-colors duration-300" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6 hidden dark:block" 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 3v1m0 16v1m9-9h1M3 12H2m8.006-7.39l.71-.71m-1.42 1.42l-.71-.71M19.004 4.39l.71.71m-1.42-1.42l-.71.71M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
        <svg class="w-6 h-6 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
      </button>

      <button aria-label="user profile" class="hidden sm:inline-flex items-center space-x-2 bg-gradient-to-r from-lime-500 to-pink-500 hover:from-lime-400 hover:to-pink-400 dark:from-yellow-400 dark:to-purple-500 dark:hover:from-yellow-300 dark:hover:to-purple-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-white/50 shadow-md">
        <span class="hidden md:block">John Doe</span>
      </button>

      <!-- Mobile Toggle Button -->
      <button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white hover:text-cyan-400 dark:hover:text-fuchsia-300 transition-colors duration-300 z-20" aria-label="Open mobile menu">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="menu-icon-open" class="block" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          <path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Overlay -->
  <div id="mobile-menu" class="hidden lg:hidden fixed inset-0 bg-gradient-to-br from-purple-900/95 via-pink-800/95 to-indigo-900/95 dark:from-gray-950/95 dark:via-gray-800/95 dark:to-black/95 z-40 flex flex-col items-center justify-center space-y-8 animate-fade-in-down transition-opacity duration-300 pointer-events-none opacity-0">
    <nav class="flex flex-col space-y-6 text-center">
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Dashboard</a>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Transactions</a>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Portfolio</a>
      <div class="relative group">
        <button class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105 flex items-center justify-center">
          Tools
          <svg class="w-6 h-6 ml-2 text-white" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="mt-4 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 w-48 mx-auto hidden group-hover:block transition-all duration-300">
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
        </div>
      </div>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Support</a>
    </nav>
    <button aria-label="search" class="mt-8 text-white hover:text-cyan-400 transition-colors duration-200">
      <svg class="w-10 h-10" 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>
    </button>
  </div>
</header>

<!-- Just for demonstration of responsiveness and dark mode -->
<main class="min-h-screen bg-gray-100 dark:bg-gray-800 p-8 transition-colors duration-500 flex flex-col justify-center items-center text-center">
  <h1 class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-lime-400 dark:to-cyan-400 mb-6">Welcome to QuantumLedger</h1>
  <p class="text-xl text-gray-700 dark:text-gray-300 max-w-xl">Explore the future of decentralized finance with our intuitive and secure platform.</p>
</main>

<style>
  /* This is for the custom gradient animation */
  @keyframes gradient-xy {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  /* This is for potential mobile menu animation */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-gradient-xy {
    animation: gradient-xy 15s ease infinite;
  }

  .text-shadow-neon {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px var(--tw-neon-color, rgba(0, 255, 255, 0.5)), 0 0 15px var(--tw-neon-color, rgba(0, 255, 255, 0.3));
    --tw-neon-color: theme('colors.cyan.400'); /* Default neon color */
  }

  .dark .text-shadow-neon {
    --tw-neon-color: theme('colors.fuchsia.300'); /* Dark mode neon color */
  }
    
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

<script>
  // Basic JavaScript to toggle mobile menu visibility
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    const mobileMenu = document.getElementById('mobile-menu');
    const openIcon = document.getElementById('menu-icon-open');
    const closeIcon = document.getElementById('menu-icon-close');

    if (mobileMenu.classList.contains('hidden')) {
      mobileMenu.classList.remove('hidden');
      mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
      mobileMenu.classList.add('opacity-100', 'pointer-events-auto');
      openIcon.classList.add('hidden');
      closeIcon.classList.remove('hidden');
    } else {
      mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
      mobileMenu.classList.add('opacity-0', 'pointer-events-none');
      // Add a small delay before hiding to allow fade-out animation
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); 
      openIcon.classList.remove('hidden');
      closeIcon.classList.add('hidden');
    }
  });

  // Close mobile menu when a link is clicked
  document.querySelectorAll('#mobile-menu a').forEach(item => {
    item.addEventListener('click', () => {
      const mobileMenu = document.getElementById('mobile-menu');
      const openIcon = document.getElementById('menu-icon-open');
      const closeIcon = document.getElementById('menu-icon-close');

      mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
      mobileMenu.classList.add('opacity-0', 'pointer-events-none');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); 
      openIcon.classList.remove('hidden');
      closeIcon.classList.add('hidden');
    });
  });
</script>
              

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-8 sm:p-12 md:p-16 lg:p-20">

  <div class="max-w-5xl mx-auto py-8 lg:py-12 bg-purple-50 dark:bg-purple-950 shadow-xl rounded-xl border border-purple-200 dark:border-purple-800">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 text-purple-800 dark:text-purple-300 tracking-wider uppercase font-serif-display leading-tight">
      Event Schedule
    </h2>

    <div class="relative px-4 sm:px-8 lg:px-12">
      <!-- Vertical Line -->
      <div class="absolute left-1/2 -ml-0.5 w-1 bg-purple-300 dark:bg-purple-700 h-full rounded-full transform -translate-x-1/2"></div>

      <!-- Timeline Item 1 -->
      <div class="mb-16 flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Grand Opening & Keynote</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Welcome address by CEO and a profound keynote speech on the future of design.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">09:00 AM - 10:30 AM</span>
          <img src="https://picsum.photos/300/200?random=1" alt="Grand Opening" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Breakout Sessions: Track A & B</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Concurrent sessions covering advanced UI/UX principles and backend integration techniques.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">10:45 AM - 12:15 PM</span>
          <div class="flex space-x-2 mt-2">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="mb-16 flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Networking Lunch</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Opportunity to connect with peers and industry leaders over a catered lunch.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">12:30 PM - 01:30 PM</span>
          <img src="https://picsum.photos/300/200?random=2" alt="Networking Lunch" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">4</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Interactive Workshops</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Hands-on sessions focusing on new development tools and agile methodologies.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">01:45 PM - 03:15 PM</span>
          <div class="flex -space-x-4 mt-4">
              <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Participant 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Participant 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Participant 3" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <div class="w-10 h-10 rounded-full bg-purple-600 dark:bg-purple-400 flex items-center justify-center text-white text-xs font-bold ring-2 ring-purple-600 dark:ring-purple-400 shadow-md">+15</div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">5</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Closing Remarks & Farewell</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Summary of the event and thanks to all participants and sponsors.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">03:30 PM - 04:00 PM</span>
          <img src="https://picsum.photos/300/200?random=3" alt="Closing Remarks" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

    </div>
  </div>

  <!-- Custom Styles for responsiveness and Art Deco feel -->
  <style>
    @layer base {
      /* Basic font for content */
      body {
        font-family: 'Open Sans', sans-serif;
      }
      /* A more decorative font for headings, simulating Art Deco */
      .font-serif-display {
        font-family: 'Playfair Display', serif; /* A common choice for classic/elegant feel */
      }
    }

    /* Tailwind's default breakpoints for reference:
    sm: 640px
    md: 768px
    lg: 1024px
    xl: 1280px
    2xl: 1536px
    */

    /* Mobile styles (default) */
    .timeline-item > div:first-child {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }

    .left-aligned .order-1:first-child {
        order: 1; /* text content */
    }

    .left-aligned .order-1:nth-child(2) {
        order: 2; /* circle */
    }

    .left-aligned .order-1:nth-child(3) {
        order: 3; /* empty div */
    }

    .right-aligned .order-1:first-child {
        order: 3; /* empty div */
    }

    .right-aligned .order-1:nth-child(2) {
        order: 2; /* circle */
    }

    .right-aligned .order-1:nth-child(3) {
        order: 1; /* text content */
    }

    /* Small screens and up (sm) */
    @media (min-width: 640px) {
      .left-aligned .order-1:first-child {
        order: 3;
      }
      .left-aligned .order-1:nth-child(2) {
        order: 2;
      }
      .left-aligned .order-1:nth-child(3) {
        order: 1;
      }

      .right-aligned .order-1:first-child {
        order: 1;
      }
      .right-aligned .order-1:nth-child(2) {
        order: 2;
      }
      .right-aligned .order-1:nth-child(3) {
        order: 3;
      }

      .left-aligned div:nth-child(3) {
        text-align: right; /* Align text right for left-aligned card */
      }

      /* Adjust margins for two-column layout */
      .left-aligned div:nth-child(3) {
        margin-right: -4px; /* compensate for line */
        transform: translateX(4px);
      }

      .right-aligned div:nth-child(3) {
        margin-left: -4px; /* compensate for line */
        transform: translateX(-4px);
      }

      .timeline-item > div:nth-child(3) {
        width: 45%; /* Shrink content width for two columns */
      }

      .timeline-item > div:first-child {
        width: 45%; /* Shrink content width for two columns */
      }

      /* Specific adjustment for mobile: make the line less prominent */
      .absolute.left-1\/2 {
        left: 50%; /* Center the line */
      }

    }

    /* Keyframe for fade-in animations */
    @keyframes fade-in-right {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fade-in-left {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .animate-fade-in-right {
      animation: fade-in-right 0.6s ease-out forwards; /* Longer for visual effect */
    }

    .animate-fade-in-left {
      animation: fade-in-left 0.6s ease-out forwards;
    }

    /* To ensure animations trigger correctly, using a simple .in-view approach or JS for more complex scenarios is needed.
    For this pure HTML example, they will run on load. */
  </style>

  <!-- Adding Google Fonts for Art Deco feel (optional, but good for demo) -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</div>
              

                <div class="bg-gray-950 min-h-screen text-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-zinc-950">
  <div class="container mx-auto max-w-7xl">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 sm:mb-12 text-center">
      Our Featured Foodies
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      
      <!-- User Profile Card 1 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-purple-700 to-indigo-700 dark:from-purple-900 dark:to-indigo-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Sarah L.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Food Blogger & Recipe Creator</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Vegan Enthusiast</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Dessert Lover</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Home Cook</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"Passionate about plant-based cuisine, I love experimenting with fresh ingredients to create delicious and healthy meals from scratch. My kitchen is my happy place!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            View Recipes
          </a>
        </div>
      </div>

      <!-- User Profile Card 2 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-900 dark:to-orange-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">David M.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Restaurant Critic & Foodie</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Fine Dining</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Street Food</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Traveler</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"I travel the world seeking unique culinary experiences, from Michelin-starred restaurants to hidden street food gems. Food is my passion and my adventure!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Read Reviews
          </a>
        </div>
      </div>

      <!-- User Profile Card 3 -->
      <div class="bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl dark:bg-zinc-900">
        <div class="relative h-48 sm:h-56 bg-gradient-to-r from-emerald-700 to-teal-700 dark:from-emerald-900 dark:to-teal-900">
          <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=3" alt="User food background">
          <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
            <img class="w-28 h-28 sm:w-32 sm:h-32 rounded-full border-4 border-yellow-400 object-cover shadow-lg" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile Picture">
          </div>
        </div>
        <div class="p-6 sm:p-8 text-center">
          <h3 class="text-3xl font-bold text-yellow-400 mt-4 mb-2">Jessica P.</h3>
          <p class="text-gray-300 text-lg sm:text-xl mb-4">Baking Expert & Instructor</p>
          <div class="flex justify-center flex-wrap gap-2 sm:gap-3 mb-6">
            <span class="bg-purple-800 text-purple-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-purple-700">Pastries</span>
            <span class="bg-blue-800 text-blue-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-blue-700">Bread Making</span>
            <span class="bg-emerald-800 text-emerald-100 text-xs sm:text-sm px-3 py-1 rounded-full font-semibold dark:bg-emerald-700">Gluten-Free</span>
          </div>
          <p class="text-gray-400 leading-relaxed mb-6 line-clamp-3">"There's nothing more satisfying than the smell of freshly baked goods. I love teaching others the joy of baking and sharing my sweetest creations!"</p>
          <a href="#" class="inline-block bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-yellow-400 hover:scale-105 shadow-lg text-lg">
            Explore Courses
          </a>
        </div>
      </div>

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

                <div class="flex items-center justify-center min-h-screen bg-amber-50 dark:bg-stone-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-xl overflow-hidden animate-fade-in">
    <div class="absolute inset-0 bg-gradient-to-br from-amber-200 via-yellow-200 to-green-200 dark:from-stone-700 dark:via-stone-600 dark:to-gray-700 opacity-50 dark:opacity-30 blur-2xl pointer-events-none transform -rotate-6 scale-110"></div>
    <div class="relative z-10 flex flex-col items-center space-y-8">
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-amber-800 dark:text-stone-300 tracking-tight text-center">
        <span class="block">Foraging for Content...</span>
      </h1>

      <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center">
        <div class="absolute w-full h-full rounded-full border-4 border-t-4 border-amber-400 dark:border-stone-500 border-opacity-50 dark:border-opacity-50 animate-spin-slow origin-center ease-in-out"></div>
        <div class="absolute w-4/5 h-4/5 rounded-full border-4 border-b-4 border-amber-600 dark:border-stone-400 border-opacity-70 dark:border-opacity-70 animate-spin origin-center ease-in-out delay-100"></div>
        <div class="absolute w-3/5 h-3/5 rounded-full border-4 border-r-4 border-amber-700 dark:border-stone-300 animate-spin-reverse origin-center ease-in-out delay-200"></div>
        <svg class="w-10 h-10 sm:w-12 sm:h-12 text-amber-700 dark:text-stone-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
        </svg>
      </div>

      <p class="text-lg sm:text-xl text-amber-700 dark:text-stone-400 text-center max-w-sm leading-relaxed">
        Connecting to nature's network to gather insights...
      </p>

      <div class="w-full flex flex-col md:flex-row items-center justify-between gap-4 pt-4">
        <div class="flex flex-col items-center md:items-start text-center md:text-left">
          <p class="text-sm text-amber-600 dark:text-stone-500">Expected load time:</p>
          <p class="text-base font-medium text-amber-700 dark:text-stone-400">15-30 seconds</p>
        </div>
        <button class="px-6 py-3 bg-amber-500 hover:bg-amber-600 dark:bg-stone-500 dark:hover:bg-stone-600 text-white font-semibold rounded-full shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-stone-400 focus:ring-opacity-75">
          Refresh Feed
        </button>
      </div>
    </div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes fade-in {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-spin-slow {
      animation: spin-slow 2s linear infinite;
    }
    .animate-spin-reverse {
      animation: spin-reverse 1.5s linear infinite;
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards;
    }
  </style>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 dark:bg-black/90">
  <div class="w-full max-w-md border-4 border-black dark:border-white bg-lime-400 dark:bg-fuchsia-700 shadow-[8px_8px_0px_black] dark:shadow-[8px_8px_0px_white] transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-[16px_16px_0px_black] dark:hover:shadow-[16px_16px_0px_white]">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-yellow-300 dark:bg-cyan-500 opacity-20 -z-10 rotate-3 scale-110"></div>
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-red-600 dark:bg-purple-800 opacity-20 -z-10 -rotate-3 scale-110"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-black dark:text-white mb-4 uppercase leading-tight tracking-tighter border-b-4 border-black dark:border-white pb-2">
        SESSION ALERT!<br>Time's Up!
      </h2>

      <p class="text-lg sm:text-xl text-black dark:text-white mb-6 font-bold">
        Your session is about to expire. Please extend your session to continue browsing cool stuff!
      </p>

      <div class="flex flex-col sm:flex-row gap-4">
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-white dark:text-black bg-purple-700 dark:bg-lime-300 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Extend Session
        </button>
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-black dark:text-white bg-orange-500 dark:bg-red-700 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Log Out Now
        </button>
      </div>

      <div class="mt-8 flex items-center justify-between border-t-4 border-black dark:border-white pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-none border-4 border-black dark:border-white object-cover">
          <div>
            <p class="text-base sm:text-lg font-bold text-black dark:text-white uppercase">Admin Hot-Line</p>
            <p class="text-sm sm:text-base text-gray-800 dark:text-gray-200 font-mono">Ping us for help!</p>
          </div>
        </div>
        <a href="#" class="text-sm sm:text-base font-bold text-blue-700 dark:text-blue-300 uppercase underline decoration-4 underline-offset-4 decoration-black dark:decoration-white hover:text-blue-900 dark:hover:text-blue-100 transition-colors duration-200">Contact Support</a>
      </div>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="flex flex-col lg:flex-row max-w-7xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] border border-gray-100 dark:border-gray-700">

    <!-- Image Viewer Section -->
    <div class="lg:w-3/5 p-4 sm:p-6 relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 dark:from-gray-700 to-white dark:to-gray-800 group">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/white-prism.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] opacity-10 rounded-3xl"></div>

      <div class="relative w-full aspect-video md:aspect-[16/10] lg:aspect-[16/9] max-w-xl group-hover:scale-[1.02] transform transition-transform duration-500 ease-out">
        <img src="https://picsum.photos/id/401/800/600" alt="Product 360 View" class="w-full h-full object-contain rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 animate-fade-in" loading="lazy">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="flex items-center justify-center p-3 rounded-full bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm text-gray-800 dark:text-gray-200 shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-accent-400/50 dark:focus:ring-accent-600/50" aria-label="Rotate 360 degrees">
            <svg class="w-8 h-8 md:w-10 md:h-10 text-rose-500 dark:text-rose-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="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13V4m7 14.054V21.5M10 19.5h2M12 2.5v16.054m-2 0H14m1.966-2.502L18 16.5m-3-12l3-2.5m-5.466 2.502L6 16.5m3-12L6 4.5m10 8l-2 2h-4c-1.105 0-2 .895-2 2v-.5c0-1.657 1.343-3 3-3h3a2 2 0 110 4h-3a2 2 0 100 4h3a2 2 0 100 4h-3a2 2 0 100 4H10c-1.105 0-2 .895-2 2z"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="flex justify-center mt-4 space-x-1 sm:mt-6">
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-rose-500 dark:border-rose-400 rounded-lg overflow-hidden shadow-md transform scale-110 ring-2 ring-rose-300 dark:ring-rose-600 relative after:content-[''] after:absolute after:inset-0 after:opacity-20 after:bg-rose-500 dark:after:bg-rose-400" aria-label="View 1">
          <img src="https://picsum.photos/id/401/100/75" alt="Thumbnail 1" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 2">
          <img src="https://picsum.photos/id/402/100/75" alt="Thumbnail 2" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 3">
          <img src="https://picsum.photos/id/403/100/75" alt="Thumbnail 3" class="w-full h-full object-cover" loading="lazy">
        </button>
        <button class="hidden sm:inline-block w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 4">
          <img src="https://picsum.photos/id/404/100/75" alt="Thumbnail 4" class="w-full h-full object-cover" loading="lazy">
        </button>
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="lg:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between relative bg-white dark:bg-gray-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grunge-wall.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-geometric-pattern.png')] opacity-5 rounded-3xl"></div>
      <div class="relative z-10">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight text-gray-900 dark:text-gray-50 animate-fade-down">
          Artisanal Ceramic Vase
        </h1>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 font-medium animate-fade-down animation-delay-200">
          Hand-painted masterpiece for your home.
        </p>

        <div class="flex items-baseline mb-6 space-x-3">
          <span class="text-4xl sm:text-5xl font-bold text-rose-600 dark:text-rose-400 animate-fade-in animation-delay-400">$89.99</span>
          <span class="text-xl sm:text-2xl text-gray-400 dark:text-gray-500 line-through animate-fade-in animation-delay-500">$120.00</span>
          <span class="text-base text-green-600 dark:text-green-400 font-semibold animate-fade-in animation-delay-600">(25% OFF)</span>
        </div>

        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-200 mb-6 leading-relaxed">
          Each vase is uniquely crafted by local artisans, featuring intricate watercolor-inspired patterns and a smooth, matte finish. Perfect for adding a touch of elegance to any room. Limited edition. Measures 10" high, 6" diameter.
        </p>

        <div class="mb-6 flex flex-wrap gap-3">
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Handmade</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Unique Piece</span>
          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Home Decor</span>
        </div>

        <div class="mb-6 flex flex-col sm:flex-row gap-4">
          <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-rose-600 dark:bg-rose-500 text-white font-semibold rounded-xl shadow-lg hover:bg-rose-700 dark:hover:bg-rose-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 animate-fade-up animation-delay-700">
            Add to Cart
          </button>
          <button class="flex-1 w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 font-semibold rounded-xl shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 animate-fade-up animation-delay-800">
            <svg class="w-5 h-5 inline-block mr-2 -mt-0.5" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
            </svg>
            Wishlist
          </button>
        </div>

        <div class="mt-8 flex items-center justify-between text-gray-600 dark:text-gray-300 text-sm">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Vendor Avatar" class="w-10 h-10 rounded-full border-2 border-rose-300 dark:border-rose-600 shadow-md" loading="lazy">
            <div>
              <p class="font-medium text-gray-800 dark:text-gray-100">Sold by <a href="#" class="text-rose-600 dark:text-rose-400 hover:underline">Artisan Crafts Co.</a></p>
              <p class="text-xs">Est. 2018 | 4.9 <span class="text-yellow-500">★</span></p>
            </div>
          </div>
          <div>
            <a href="#" class="flex items-center text-rose-600 dark:text-rose-400 hover:underline text-sm">
              View Store 
              <svg class="w-4 h-4 ml-1" 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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Custom animations for a smoother feel */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-down {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
    .animate-fade-down { animation: fade-down 0.6s ease-out forwards; }
    .animate-fade-up { animation: fade-up 0.6s ease-out forwards; }

    /* Staggered animations */
    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-600 { animation-delay: 0.6s; }
    .animation-delay-700 { animation-delay: 0.7s; }
    .animation-delay-800 { animation-delay: 0.8s; }

    /* This is a placeholder for actual 360 viewer functionality */
    /* In a real application, this would be handled by JavaScript */
    /* For this HTML/CSS only component, clicking the 360 button
       or thumbnails wouldn't change the image, but the hover effects
       and visual cues are in place to suggest interactivity. */
  </style>
</div>
              

                <div class="bg-gradient-to-br from-orange-300 to-red-400 dark:from-gray-800 dark:to-gray-950 p-6 sm:p-8 md:p-10 lg:p-12 font-sans overflow-hidden relative rounded-lg shadow-xl">

  <!-- Memphis background elements (for visual flair) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
    <div class="absolute w-40 h-40 bg-yellow-400 dark:bg-yellow-600 rounded-full opacity-50 -top-10 -left-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-60 h-60 bg-red-500 dark:bg-red-700 rounded-lg transform rotate-45 opacity-40 top-1/3 left-1/4 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-32 h-32 bg-orange-600 dark:bg-orange-800 rounded-full opacity-60 bottom-10 right-10 mix-blend-multiply blur-xl"></div>
    <div class="absolute w-52 h-52 bg-pink-400 dark:bg-pink-600 rounded-full opacity-50 -bottom-20 -right-20 mix-blend-multiply blur-xl"></div>
  </div>

  <div class="relative z-10 space-y-8">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white dark:text-orange-300 drop-shadow-lg leading-tight relative">
        Player Progress
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-2 bg-yellow-300 dark:bg-yellow-500 rounded-full"></span>
      </h2>
      <p class="mt-3 text-sm sm:text-base text-orange-100 dark:text-gray-400 font-medium">Track your epic journey through the gaming world!</p>
    </div>

    <!-- Level Indicator & Player Info -->
    <div class="flex flex-col md:flex-row items-center justify-between bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-4 sm:p-6 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
      <div class="flex items-center space-x-4 mb-4 md:mb-0">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg">
        <div>
          <p class="text-xl sm:text-2xl font-bold text-white dark:text-orange-300 drop-shadow-md">TurboGamerX</p>
          <p class="text-sm text-orange-100 dark:text-gray-400">Rank: Grand Master</p>
        </div>
      </div>
      <div class="text-center sm:text-right">
        <div class="bg-yellow-400 dark:bg-yellow-600 px-6 py-2 rounded-full shadow-lg transform rotate-2 hover:rotate-0 transition-transform duration-300">
          <p class="text-2xl sm:text-3xl font-extrabold text-red-700 dark:text-red-900 drop-shadow">Level 42</p>
        </div>
      </div>
    </div>

    <!-- Progress Bars Section -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- XP Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Experience Points (XP)</p>
        <div class="w-full bg-red-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-yellow-300 to-orange-500 dark:from-yellow-400 dark:to-orange-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 75%;">
            <div class="absolute top-0 right-0 h-full w-2 bg-yellow-200 dark:bg-yellow-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">75% (8500 / 11333 XP)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Next Level: 2833 XP</p>
      </div>

      <!-- Quest Completion Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Quests Completed</p>
        <div class="w-full bg-green-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-teal-300 to-blue-500 dark:from-teal-400 dark:to-blue-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 90%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-teal-200 dark:bg-teal-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">90% (81 / 90 Quests)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Keep going, champion!</p>
      </div>

      <!-- Event Score Progress Bar -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Event Score: "Dragon's Ascent"</p>
        <div class="w-full bg-purple-600 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden shadow-inner relative">
          <div class="bg-gradient-to-r from-pink-300 to-purple-500 dark:from-pink-400 dark:to-purple-600 h-full rounded-full transition-all duration-700 ease-out" style="width: 60%;">
             <div class="absolute top-0 right-0 h-full w-2 bg-pink-200 dark:bg-pink-300 rounded-full blur-sm"></div>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-800 dark:text-gray-100">60% (12000 / 20000 Pts)</span>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-2">Earn 8000 more points for exclusive rewards!</p>
      </div>

      <!-- Achievements Progress -->
      <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm p-5 rounded-xl shadow-lg border border-white/30 dark:border-gray-700/50 transform rotate-1 hover:rotate-0 transition-transform duration-300">
        <p class="text-lg font-semibold text-white dark:text-gray-200 mb-3">Achievements Unlocked</p>
        <div class="flex items-center space-x-3">
          <div class="relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-red-500 dark:bg-red-700 text-white flex items-center justify-center text-4xl sm:text-5xl font-bold border-4 border-yellow-300 dark:border-yellow-500 shadow-md">
            <span class="animate-pulse">🎉</span>
          </div>
          <div>
            <p class="text-2xl sm:text-3xl font-extrabold text-white dark:text-orange-300">15 / 20</p>
            <p class="text-sm text-orange-100 dark:text-gray-400">Total Achievements</p>
          </div>
        </div>
        <p class="text-sm text-yellow-100 dark:text-gray-400 mt-3">Almost there! Unlock unique titles and badges.</p>
      </div>

    </div>

    <!-- Call to Action / Footer -->
    <div class="text-center pt-8">
      <button class="bg-yellow-400 dark:bg-orange-600 hover:bg-yellow-500 dark:hover:bg-orange-700 text-red-800 dark:text-white font-bold py-3 px-8 rounded-full shadow-lg transform scale-105 hover:scale-110 transition-all duration-300 relative overflow-hidden group">
        <span class="relative z-10">Explore All Stats</span>
        <span class="absolute top-0 left-0 w-full h-full bg-white/20 dark:bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse"></span>
      </button>
      <p class="mt-4 text-xs text-orange-200 dark:text-gray-500 font-medium">Continue your adventure and set new records!</p>
    </div>

  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-950 font-mono transition-colors duration-300">
  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-0 relative border-4 border-red-900 dark:border-red-600 shadow-brutalist overflow-hidden">

    <!-- Image Side (Left on Desktop, Top on Mobile) -->
    <div class="relative min-h-[200px] md:min-h-[600px] flex items-end p-4 md:p-8 bg-red-800 dark:bg-red-950">
      <img src="https://picsum.photos/1200/900?grayscale&blur=2" alt="Agricultural landscape" class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-color-burn">
      <div class="relative z-10 w-full text-yellow-300 dark:text-orange-200">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight uppercase mb-2 drop-shadow-lg">
          Cultivate Your Future
        </h2>
        <p class="text-lg sm:text-xl font-medium mb-4 italic leading-snug">
          Join the harvest. Grow connections. Yield success.
        </p>
        <p class="text-sm sm:text-base font-light border-l-4 border-yellow-500 pl-3 md:pl-4 text-orange-100 dark:text-orange-300">
          "The farmer is the only man in our economy who buys retail, sells wholesale, and pays the freight both ways." <br>— John F. Kennedy
        </p>
      </div>
      <!-- Brutalist Overlay Element -->
      <div class="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-yellow-500 to-red-600 dark:from-yellow-700 dark:to-red-800 transform rotate-45 translate-x-8 -translate-y-8 md:w-24 md:h-24"></div>
    </div>

    <!-- Form Side (Right on Desktop, Bottom on Mobile) -->
    <div class="p-6 sm:p-8 md:p-10 bg-orange-200 dark:bg-orange-900 text-red-900 dark:text-yellow-100 relative">
      <h3 class="text-2xl sm:text-3xl font-extrabold uppercase mb-6 text-center border-b-4 border-red-700 dark:border-yellow-300 pb-2">
        Access Your Farm Hub
      </h3>

      <!-- Tabs for Login/Signup -->
      <div class="flex mb-6 space-x-2">
        <button class="flex-1 py-3 bg-red-700 dark:bg-red-800 text-yellow-100 dark:text-yellow-200 border-2 border-red-900 dark:border-yellow-400 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-red-900 dark:hover:bg-red-950 shadow-md active:bg-red-500 active:shadow-none">
          Login
        </button>
        <button class="flex-1 py-3 bg-orange-300 dark:bg-orange-700 text-red-900 dark:text-yellow-300 border-2 border-red-600 dark:border-yellow-500 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-orange-400 dark:hover:bg-orange-800 shadow-md active:bg-orange-200 active:shadow-none">
          Signup
        </button>
      </div>

      <form class="space-y-5">
        <div>
          <label for="email" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Email Address</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Email Address">
        </div>
        <div>
          <label for="password" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Password">
        </div>

        <div class="flex items-center justify-between text-sm sm:text-base">
          <label class="flex items-center text-red-800 dark:text-yellow-200">
            <input type="checkbox" class="h-5 w-5 bg-yellow-200 dark:bg-orange-800 text-red-700 dark:text-yellow-500 border-2 border-red-700 dark:border-yellow-400 focus:ring-red-500 dark:focus:ring-yellow-300 checked:bg-red-700 dark:checked:bg-yellow-500 transition-colors duration-200">
            <span class="ml-2 font-medium">Remember me</span>
          </label>
          <a href="#" class="text-red-700 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2 transition-colors duration-200 hover:text-red-900 dark:hover:text-yellow-100">Forgot Password?</a>
        </div>

        <button type="submit" class="w-full py-4 bg-red-900 dark:bg-yellow-500 text-yellow-100 dark:text-red-900 font-extrabold uppercase tracking-widest text-lg sm:text-xl border-4 border-red-700 dark:border-yellow-400 transition-all duration-200 hover:bg-red-700 dark:hover:bg-yellow-400 active:bg-orange-400 active:shadow-none shadow-brutalist-button focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-yellow-300">
          Login to Dashboard
          <span class="ml-2">&#x27A4;</span>
        </button>

        <div class="pt-4 text-center text-sm sm:text-base text-red-700 dark:text-yellow-200">
          Don't have an account? <a href="#" class="text-red-900 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2">Sign up now!</a>
        </div>
      </form>

      <!-- Brutalist Corner Accent -->
      <div class="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-red-600 to-yellow-500 dark:from-red-800 dark:to-yellow-700 transform -translate-x-6 translate-y-6 md:w-16 md:h-16"></div>
    </div>

  </div>
</div>

<!-- Custom Brutalist Shadow Style -->
<style>
  .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #B91C1C), 12px 12px 0px 0px var(--tw-border-color, #7D260D);
    /* Border-color from border-red-900 */
  }
  .dark .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #FACC15), 12px 12px 0px 0px var(--tw-border-color, #CA8A04);
    /* Border-color from dark:border-red-600 -> dark:border-yellow-600 (modified for stronger contrast) */
  }

  .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #B91C1C);
  }
  .dark .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #FACC15);
  }
</style>
              

                <nav class="flex justify-center px-4 py-3 bg-white dark:bg-gray-900 shadow-md sm:py-4 md:py-5" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 sm:space-x-4 md:space-x-6 overflow-x-auto whitespace-nowrap text-sm sm:text-base lg:text-lg">
    <li class="flex items-center group">
      <a href="#home" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5" aria-label="Home">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 mr-1.5 align-middle" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        <span class="text-ruby-700 dark:text-ruby-400 font-semibold group-hover:underline hidden sm:inline">Home</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </li>

    <li class="flex items-center group">
      <a href="#services" class="text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5">
        <span class="text-sapphire-700 dark:text-sapphire-400 font-medium group-hover:underline">Services</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </li>

    <li class="flex items-center group">
      <a href="#consulting" class="text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5">
        <span class="text-amethyst-700 dark:text-amethyst-400 font-medium group-hover:underline">Strategic Consulting</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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"></path>
      </svg>
    </li>

    <li class="flex items-center group" aria-current="page">
      <span class="text-emerald-700 dark:text-emerald-400 font-semibold px-2 py-1 rounded-md bg-emerald-100 dark:bg-emerald-900 border border-emerald-300 dark:border-emerald-700 shadow-sm transition-colors duration-200">
        Digital Transformation
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Custom colors for Jewel Tones - Add to your Tailwind config or use direct classes */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-400 { color: #34d399; }
  .bg-emerald-100 { background-color: #d1fae5; }
  .dark .bg-emerald-900 { background-color: #064e3b; }
  .border-emerald-300 { border-color: #6ee7b7; }
  .dark .border-emerald-700 { border-color: #047857; }

  .text-ruby-700 { color: #B91C1C; }
  .dark .text-ruby-400 { color: #F87171; }
  
  .text-sapphire-700 { color: #1E40AF; }
  .dark .text-sapphire-400 { color: #60A5FA; }

  .text-amethyst-700 { color: #6B21A8; }
  .dark .text-amethyst-400 { color: #A78BFA; }
</style>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative flex flex-col items-center justify-center p-8 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-[1.01]">
    <!-- Background organic shapes - Desktop/Tablet -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-green-300 to-blue-400 dark:from-green-600 dark:to-blue-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob hidden md:block"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-tl from-purple-300 to-pink-400 dark:from-purple-600 dark:to-pink-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob animation-delay-2000 hidden md:block"></div>
    <div class="absolute top-1/4 -right-1/6 w-1/3 h-1/3 bg-gradient-to-tr from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 rounded-full mix-blend-multiply opacity-20 blur-xl animate-blob animation-delay-4000 hidden md:block"></div>

    <!-- Main content -->
    <div class="relative z-10 flex flex-col items-center space-y-6 md:space-y-8">
      <!-- Loader Animation -->
      <div class="relative w-24 h-24 md:w-32 md:h-32">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-transparent border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Inner flowing path -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-b-4 border-transparent border-t-green-500 border-b-purple-500 dark:border-t-green-400 dark:border-b-purple-400 animate-spin-fast animation-delay-500" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Central logo/icon placeholder -->
        <div class="absolute inset-4 md:inset-6 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-full shadow-inner">
          <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 animate-pulse" 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="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v8"></path>
          </svg>
        </div>
      </div>

      <div class="text-center">
        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden">
          Loading Content
        </p>
        <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 max-w-xs md:max-w-md">
          Please wait while we prepare your natural and flowing experience...
        </p>
      </div>

      <!-- Progress Bar (Optional, but adds complexity) -->
      <div class="w-full max-w-xs md:max-w-sm h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 dark:from-blue-400 dark:to-green-400 rounded-full animate-progress-flow" style="width: 0%;"></div>
      </div>

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

<style>
  /* Tailwind CSS @layer utilities for custom keyframes */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
  }
  @keyframes progress-flow {
    0% { width: 0%; }
    25% { width: 40%; }
    50% { width: 70%; }
    75% { width: 90%; }
    100% { width: 100%; }
  }
  @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-spin-slow {
    animation: spin-slow 2.5s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 1.5s linear infinite;
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-progress-flow {
    animation: progress-flow 3s ease-out forwards;
  }
  .animate-blob {
    animation: blob 7s ease-in-out infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .animation-delay-500 {
    animation-delay: 0.5s;
  }
</style>