Todos los componentes

                <div class="fixed inset-x-0 bottom-0 p-4 sm:p-6 lg:p-8 z-50 pointer-events-none flex flex-col items-end space-y-4">
  <!-- Success Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Action Confirmed!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Your changes have been saved successfully. Good job!</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.766-1.85 1.9-3.35L13.737 4.1a1.5 1.5 0 00-2.674 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Error Encountered!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Unable to complete your request. Please try again later.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Information Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Heads Up!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">New features are rolling out soon. Stay tuned for updates.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>
</div>
              

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
    bg-gray-100 dark:bg-gray-800
    text-gray-700 dark:text-gray-300
    border border-gray-300 dark:border-gray-700
    shadow-sm dark:shadow-md">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center
        text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
        transition-colors duration-200
        px-2 py-1 rounded-sm
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-3 h-3 mr-1 md:mr-2" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        _HOME
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" 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>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _DOCS
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" 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>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _GETTING_STARTED
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" 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>
        <span class="
          text-blue-600 dark:text-blue-400
          font-bold
          px-2 py-1
          cursor-default">
          _INSTALLATION
        </span>
      </div>
    </li>
  </ol>
</nav>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-lime-50 to-emerald-100 dark:from-stone-900 dark:to-green-950 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-lg bg-green-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out border-4 border-green-700 dark:border-green-600">
    <div class="p-4 sm:p-6 lg:p-8 bg-green-700 dark:bg-green-800 flex items-center justify-center relative">
      <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-yellow-300 uppercase transform -skew-y-3 dark:text-lime-300 tracking-wider relative z-10">
        Find Your Game
      </h2>
      <div class="absolute inset-0 bg-gradient-to-r from-green-800 to-emerald-900 opacity-70 dark:opacity-60 z-0"></div>
    </div>
    <div class="p-6 sm:p-8 lg:p-10">
      <form action="#" method="GET" class="relative">
        <label for="search-game" class="sr-only">Search for a game</label>
        <div class="relative flex items-center bg-green-100 dark:bg-stone-700 rounded-md border-2 border-green-400 dark:border-green-600 focus-within:border-emerald-600 dark:focus-within:border-lime-500 transition-colors duration-300">
          <input
            type="search"
            id="search-game"
            name="q"
            placeholder="Search game titles..."
            aria-label="Search for a game"
            class="w-full py-3 pl-4 pr-12 text-lg text-green-900 dark:text-lime-50 placeholder-green-600 dark:placeholder-green-400 bg-transparent outline-none focus:ring-0 rounded-l-md"
            tabindex="0"
          />
          <button
            type="submit"
            aria-label="Perform search"
            class="absolute right-0 top-0 h-full w-12 flex items-center justify-center bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white rounded-r-md transition-colors duration-300 transform -skew-x-6 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-stone-800"
            tabindex="0"
          >
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </form>
    </div>
    <div class="relative bg-gradient-to-t from-green-700 to-green-600 dark:from-green-900 dark:to-green-800 p-2 sm:p-3 lg:p-4 text-center transform -skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out">
      <p class="text-sm text-yellow-200 dark:text-lime-200 uppercase font-semibold relative z-10 tracking-widest">
        Press Enter to Play
      </p>
       <div class="absolute inset-0 bg-green-800 opacity-50 dark:opacity-40 z-0"></div>
    </div>
  </div>
</div>
              

                <header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
  <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand Section -->
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
        <span class="text-orange-500">PRO</span>DUCTS
      </a>
    </div>

    <!-- Main Navigation & Search -->
    <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
      <nav class="hidden md:flex space-x-6 lg:space-x-8">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          New Arrivals
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Categories
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Sale
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          About Us
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
      </nav>

      <div class="relative w-full md:w-80 lg:w-96">
        <input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <!-- User Actions (Cart, Account, etc.) -->
    <div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        <span class="sr-only">Account</span>
      </a>
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
        <span class="sr-only">Shopping Cart</span>
      </a>
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="md:hidden flex items-center space-x-4">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
      <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
        <svg class="w-8 h-8" 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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden) -->
  <div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
    <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        Account
      </a>
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        Cart
        <span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
      </a>
    </div>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link inside is clicked (optional)
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="relative flex flex-col items-center justify-center w-56 h-56 sm:w-64 sm:h-64 md:w-80 md:h-80 rounded-full bg-gray-800 dark:bg-gray-950 shadow-lg glow-border animate-pulse-border">
    <div class="relative w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 rounded-full flex items-center justify-center bg-gray-700 dark:bg-gray-900 overflow-hidden">
      <!-- Inner Glow Effect -->
      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-slow" style="background: conic-gradient(from 0deg, transparent 0%, transparent 25%, #00FFFF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-reverse-slow" style="background: conic-gradient(from 180deg, transparent 0%, transparent 25%, #FF00FF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <!-- Main Weather Icon/Text Container -->
      <div class="relative z-10 text-white dark:text-gray-200 text-6xl md:text-7xl font-bold flex flex-col items-center justify-center leading-none animate-pulse-text">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 text-cyan-400 dark:text-fuchsia-400 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="glow">
              <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 00-.104-10L20 9l-2.071-2.071A5 5 0 0013.818 3H10a4 4 0 00-4 4v2.586M3 15V9m0 6a2 2 0 002 2h3.28m7.295-8.586A8.995 8.995 0 0018 9v2.586M21 12H9" filter="url(#glow)"></path>
        </svg>
        <span class="mt-2 text-2xl sm:text-3xl font-light text-cyan-300 dark:text-fuchsia-300 drop-shadow-md">Loading...</span>
      </div>
    </div>
    <p class="mt-6 text-gray-400 dark:text-gray-500 text-sm sm:text-base tracking-wide animate-fade-in">Fetching climate data</p>
  </div>
</div>

<style>
  @keyframes pulse-border {
    0% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
    50% {
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.8);
    }
    100% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  @keyframes pulse-text {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }

  @keyframes fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 10s linear infinite;
  }

  .animate-pulse-text {
    animation: pulse-text 2s ease-in-out infinite;
  }

  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
    animation-delay: 0.5s; /* Delay for better visual flow */
    opacity: 0; /* Start hidden */
  }

  /* Dark mode specific glow colors */
  @media (prefers-color-scheme: dark) {
    .glow-border {
      box-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(255, 0, 255, 0.5);
    }
    /* The background of the glow uses inline style for conic-gradient, so it will not directly apply to the dark mode via this class. 
       However, the accent colors for text and SVG are handled by Tailwind's dark: prefix. */
  }
</style>
              

                <nav class="flex items-center justify-between border-t-4 border-b-4 border-gray-900 bg-[#E0E0BA] dark:bg-gray-800 px-4 py-4 md:px-6 shadow-xl font-mono">
  <div class="flex-1 flex max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="flex justify-center flex-1 sm:justify-start">
    <div>
      <p class="text-sm text-gray-900 dark:text-gray-200 uppercase tracking-widest">
        Page <span class="font-bold">3</span> of <span class="font-bold">12</span>
      </p>
    </div>
  </div>
  <div class="flex-1 flex justify-end max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      Next
      <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>

  <!-- Mobile Navigation -->
  <div class="flex flex-1 justify-between md:hidden">
    <a href="#" class="relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <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.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <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.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>
              

                <div class="flex items-center justify-center p-4 bg-lime-50 dark:bg-zinc-900 min-h-[200px]">
  <button class="
    relative px-8 py-3
    text-lg font-semibold
    text-emerald-900 dark:text-emerald-100
    bg-gradient-to-br from-emerald-400 to-lime-500
    dark:from-emerald-700 dark:to-lime-800
    rounded-full
    overflow-hidden
    shadow-lg shadow-emerald-300/50 dark:shadow-emerald-900/50
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-emerald-400/50 dark:focus:ring-emerald-700/50
    active:scale-95
    group
  ">
    <!-- Organic Shape Background -->
    <span class="
      absolute inset-0
      bg-gradient-to-br from-emerald-500 to-lime-600
      dark:from-emerald-800 dark:to-lime-900
      rounded-full
      filter blur-sm
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-105
      transition-all duration-500 ease-out
      pointer-events-none
    "></span>

    <!-- Main Button Content -->
    <span class="
      relative z-10
      flex items-center justify-center
      gap-2
      transform
      group-hover:scale-105
      transition-transform duration-300 ease-out
    ">
      <svg class="w-6 h-6
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.82-.446l4-4.5a1 1 0 00.086-1.267A1 1 0 0019 4H8.145l-.422-1.689A1 1 0 007.28 1H3zM7 18a2 2 0 100-4 2 2 0 000 4zm0-6a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4zM17 14a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span class="
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      ">Enroll Now</span>
    </span>

    <!-- Subtle animated glow on hover -->
    <span class="
      absolute inset-0
      rounded-full
      bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-300/50 to-transparent
      dark:from-amber-600/50 dark:to-transparent
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-125
      transition-all duration-700 ease-out
      animate-pulse group-hover:animate-none
      pointer-events-none
    "></span>
  </button>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
  <div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
    <div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
      <h3 class="text-xl font-bold">Session Expiring Soon!</h3>
    </div>
    <div class="p-6 text-gray-200 dark:text-gray-300">
      <p class="mb-4 leading-relaxed">
        Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
      </p>
      <div class="mb-6 flex items-center justify-center space-x-3 text-sm">
        <svg class="h-6 w-6 text-yellow-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="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"></path>
        </svg>
        <span class="font-semibold text-yellow-200">Remaining time:</span>
        <span class="font-mono text-lg text-yellow-100">01:59</span>
      </div>
      <p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
        (Your data will be saved if you extend your session.)
      </p>

      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
        <button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
          Extend Session
        </button>
        <button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
          Log Out
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 shadow-xl dark:shadow-2xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="flex justify-between items-center p-4 sm:p-6 border-b border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-500 tracking-wide uppercase">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-stone-600 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 font-medium px-3 py-1 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Mark all as read
      </button>
    </div>

    <ul class="divide-y divide-stone-200 dark:divide-stone-700">
      <!-- Unread Notification 1: New Release -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-md object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1040/90/90" alt="Album Cover">
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">NEW RELEASE</p>
            <p class="font-bold text-lg leading-tight mb-1">'Neon City Beats' by <span class="text-red-700 dark:text-red-500">Synthwave Savant</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Their latest album just dropped! Dive into a symphony of retro-futuristic sounds. Available now.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Listen Now" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Listen Now
              </button>
              <button aria-label="Dismiss" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Dismiss
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">5 minutes ago</p>
      </li>

      <!-- Read Notification 1: Artist Followed -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">ARTIST UPDATE</p>
            <p class="font-semibold text-lg leading-tight mb-1"><span class="text-red-700 dark:text-red-500">Echoes of Tomorrow</span> just uploaded 3 new tracks!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Check out their latest experimental soundscapes: 'Quantum Leap,' 'Urban Decay,' and 'Spectral Bloom.'</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">View Artist Profile</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 hour ago</p>
      </li>

      <!-- Unread Notification 2: Playlist Recommendation -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-red-600 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4zm3-5H9v2h4v-2z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">RECOMMENDED FOR YOU</p>
            <p class="font-bold text-lg leading-tight mb-1">Fresh Playlist: <span class="text-red-700 dark:text-red-500">'Industrial Echoes'</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Based on your recent listening, we've curated a new playlist featuring raw, gritty electronic sounds.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Explore Playlist" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Explore Playlist
              </button>
              <button aria-label="Not Interested" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Not Interested
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 hours ago</p>
      </li>

      <!-- Read Notification 2: System Update -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-stone-600 dark:text-stone-400 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99H9S8.5 12 8 12.5s-1 1-1 1.5.5 1 .5 1.5 1 1 1.5 1 1.5.5 1.5 1 0 .5-1 .5H9c-1.1 0-2 .9-2 2s.9 2 2 2h6c1.1 0 2.2-.95 2-2 0 0 .04-.32 0-.5C16.89 16.53 16.5 16 16 16s-1-.5-1-1c0-.5-.5-1-1-1h-1v-2c0-.5-.5-1-1-1H12v-1.01z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">SYSTEM ANNOUNCEMENT</p>
            <p class="font-semibold text-lg leading-tight mb-1">Platform Update: <span class="text-red-700 dark:text-red-500">Enhanced Audio Playback</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">We've rolled out improvements to audio streaming quality and stability across all devices.</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Read More</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 day ago</p>
      </li>

      <!-- Read Notification 3: Community Event -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/400/90/90" alt="Event Banner">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">COMMUNITY NEWS</p>
            <p class="font-semibold text-lg leading-tight mb-1">Join our <span class="text-red-700 dark:text-red-500">Live DJ Set</span> this Friday!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Prepare for an electrifying industrial techno set from DJ 'Circuit Breaker'. Don't miss it!</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Set Reminder</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 days ago</p>
      </li>
    </ul>

    <div class="p-4 sm:p-6 border-t border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-center">
      <button aria-label="Load more notifications" class="text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400 text-base font-semibold focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Load More
      </button>
    </div>
  </div>
</div>
              

                <nav class="bg-zinc-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 shadow-lg dark:shadow-xl">
  <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
    <!-- Logo Section -->
    <div class="flex items-center space-x-3 mb-2 md:mb-0">
      <svg class="h-9 w-9 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10l-3-3m0 0l-3 3m3-3V4m3 10h4.876a.625.625 0 01.352 1.157l-1.587 1.587A.625.625 0 0115.124 18H10z" />
      </svg>
      <span class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-green-600">StreamVerse</span>
    </div>

    <!-- Search Bar -->
    <div class="relative flex-grow mx-4 max-w-lg w-full mb-2 md:mb-0">
      <input type="text" placeholder="Search movies, series, and more..." class="w-full py-2 pl-10 pr-4 rounded-full bg-zinc-800 dark:bg-gray-800 text-gray-200 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 ease-in-out">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Movies
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Series
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Live TV
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Profile and Notifications -->
    <div class="flex items-center space-x-6 ml-auto">
      <button class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 focus:outline-none">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-sm font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </button>
      <div class="relative group">
        <img class="h-10 w-10 rounded-full border-2 border-emerald-500 object-cover cursor-pointer" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-zinc-800 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden z-10">
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden ml-4">
      <button class="text-gray-300 hover:text-emerald-400 focus:outline-none peer">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <!-- Mobile Menu Content -->
      <div class="hidden peer-focus:block absolute top-full left-0 w-full bg-zinc-800 dark:bg-gray-800 shadow-lg py-2 mt-1 z-20 transition-all duration-300 ease-out origin-top">
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Home</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Movies</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Series</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Live TV</a>
        <div class="border-t border-gray-700 my-2"></div>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
      </div>
    </div>
  </div>
</nav>