All Components

                <div class="font-sans bg-slate-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <!-- Header Section -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-sky-500 dark:from-blue-900 dark:to-sky-700 text-white border-b-4 border-sky-400 dark:border-sky-500">
      <h2 class="text-3xl sm:text-4xl font-extrabold mb-2 leading-tight">Production Line Heat Map</h2>
      <p class="text-lg opacity-90">Real-time operational insights for manufacturing efficiency.</p>
    </div>

    <!-- Controls/Filters Section -->
    <div class="p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
      <div class="flex items-center space-x-2">
        <label for="period-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Period:</label>
        <select id="period-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
          <option>Last Hour</option>
          <option selected>Last 24 Hours</option>
          <option>Last 7 Days</option>
          <option>Last 30 Days</option>
        </select>
      </div>

      <div class="flex items-center space-x-2">
        <label for="metric-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Metric:</label>
        <select id="metric-select" class="py-2 px-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">
          <option selected>Temperature (°C)</option>
          <option>Vibration (Hz)</option>
          <option>Pressure (bar)</option>
          <option>Downtime (min)</option>
        </select>
      </div>

      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold rounded-md shadow-md transition duration-200 ease-in-out text-sm w-full sm:w-auto">
        Refresh Data
      </button>
    </div>

    <!-- Heat Map Grid Area -->
    <div class="p-6 sm:p-8">
      <h3 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Sensor Performance Overview</h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
        <!-- Example Heat Map Cells -->
        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 1</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Conveyor Belt 1</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <!-- Heat map indicator - Example: Red for high, Blue for low -->
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-red-400 via-orange-400 to-yellow-300 dark:from-red-600 dark:via-orange-600 dark:to-yellow-500 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">92°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-up text-red-500"></i> +5% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 95°C (10:15 AM)</li>
                      <li>Avg. 24h: 87°C</li>
                      <li>Status: <span class="text-yellow-200">Warning</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector A - Machine 2</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Robotic Arm Extruder</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-green-400 via-blue-400 to-cyan-300 dark:from-green-600 dark:via-blue-600 dark:to-cyan-500 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">78°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-arrow-alt-circle-down text-green-500"></i> -2% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 79°C (08:30 AM)</li>
                      <li>Avg. 24h: 80°C</li>
                      <li>Status: <span class="text-green-200">Optimal</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
          <div class="p-4 flex flex-col justify-between h-full">
            <div>
              <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 3</p>
              <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Curing Oven C-14</h4>
            </div>
            <div class="relative flex-grow flex items-center justify-center">
              <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-yellow-400 via-orange-500 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-700 opacity-70"></div>
              <span class="relative text-5xl font-extrabold text-white text-shadow-lg">185°C</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-exclamation-triangle text-orange-500"></i> +10% from avg.</p>
          </div>
          <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
              <div>
                  <p class="font-semibold mb-2">Details:</p>
                  <ul class="text-sm text-left list-disc list-inside space-y-1">
                      <li>Last Spike: 188°C (09:00 AM)</li>
                      <li>Avg. 24h: 170°C</li>
                      <li>Status: <span class="text-orange-200">Critical</span></li>
                  </ul>
              </div>
          </div>
        </div>

        <div class="aspect-w-16 aspect-h-9 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 relative group">
            <div class="p-4 flex flex-col justify-between h-full">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400 font-medium"><i class="fas fa-microchip mr-1"></i> Sector B - Machine 4</p>
                <h4 class="text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">Assembly Line 3</h4>
              </div>
              <div class="relative flex-grow flex items-center justify-center">
                <div class="w-full h-full absolute inset-0 bg-gradient-to-tr from-blue-400 via-cyan-400 to-teal-300 dark:from-blue-600 dark:via-cyan-600 dark:to-teal-500 opacity-70"></div>
                <span class="relative text-5xl font-extrabold text-white text-shadow-lg">65°C</span>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-300 text-right mt-2"><i class="fas fa-check-circle text-green-500"></i> Stable</p>
            </div>
            <div class="absolute inset-0 bg-blue-600 dark:bg-blue-700 text-white p-4 sm:p-6 opacity-0 group-hover:opacity-95 transition-opacity duration-300 flex items-center justify-center text-center rounded-lg">
                <div>
                    <p class="font-semibold mb-2">Details:</p>
                    <ul class="text-sm text-left list-disc list-inside space-y-1">
                        <li>Last Spike: 66°C (07:00 AM)</li>
                        <li>Avg. 24h: 65°C</li>
                        <li>Status: <span class="text-green-200">Optimal</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Add more heat map cells as needed -->

      </div>

      <!-- Example Legend for the Heat Map -->
      <div class="mt-8 flex flex-wrap justify-center gap-4 text-sm">
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600"></span>
          <span class="text-gray-700 dark:text-gray-300">Optimal (< 80°C)</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-400 dark:from-yellow-600 dark:to-orange-600"></span>
          <span class="text-gray-700 dark:text-gray-300">Warning (80-95°C)</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 mr-2 rounded-full bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700"></span>
          <span class="text-gray-700 dark:text-gray-300">Critical (> 95°C)</span>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="p-4 sm:p-6 text-center text-gray-500 dark:text-gray-400 text-xs bg-gray-50 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700">
      <p>&copy; 2023 Industrial Insights. All rights reserved. Data updated as of <time datetime="2023-10-27T14:30:00Z">Oct 27, 2023, 2:30 PM UTC</time></p>
       <p class="mt-1">Powered by Advanced Sensor Analytics.</p>
    </div>

  </div>

</div>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in transition-shadow duration-300 dark:shadow-2xl dark:shadow-orange-900/20">
    <div class="bg-gradient-to-r from-orange-400 to-red-500 p-4 sm:p-5 flex items-center justify-between shadow-md">
      <h2 class="text-white text-lg sm:text-xl font-semibold">Community Buzz</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>

    <div class="p-4 sm:p-5 space-y-4">
      <!-- Forum Post 1 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Sarah_Loves_Sunsets</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Anyone else feel like this community has the best vibes? So much positivity! ✨"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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" />
              </svg>
              54
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              12
            </button>
          </div>
        </div>
      </div>

      <hr class="border-gray-200 dark:border-gray-700">

      <!-- Forum Post 2 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Traveler_Mike</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Just joined! Looking forward to connecting with amazing people here. Where's everyone from?"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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" />
              </svg>
              31
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              8
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Your Avatar">
        <input type="text" placeholder="Write a new post..." class="flex-1 p-2 sm:p-2.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 dark:border-none border border-gray-300">
        <button class="p-2 rounded-full bg-orange-500 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
              

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          <span class="sr-only">Previous</span>
          <!-- Heroicon name: solid/chevron-left -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 bg-gradient-to-br from-indigo-500 to-purple-600 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-all duration-300 ease-in-out transform hover:scale-105">
          1
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          2
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden lg:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          9
        </a>
        <a href="#" class="bg-white border-gray-300 text-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
          <span class="sr-only">Next</span>
          <!-- Heroicon name: solid/chevron-right -->
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>
              

                <nav class="bg-gray-900 text-gray-200 p-4 dark:bg-gray-950 dark:text-gray-100 relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-xl font-bold text-blue-400 hover:text-blue-300 transition-colors duration-300">FinSecure Bank</a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Personal</a>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Business</a>
      <div class="group relative">
        <button class="flex items-center hover:text-blue-400 transition-colors duration-300 focus:outline-none">Services <svg class="w-4 h-4 ml-1 transform group-hover:rotate-180 transition-transform 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></button>
        <div class="absolute hidden group-hover:block w-full left-1/2 -ml-[calc(50vw-50%)] xl:left-0 xl:ml-0 xl:w-screen xl:max-w-7xl pt-4 z-50">
          <div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 grid grid-cols-1 md:grid-cols-3 gap-8 ring-1 ring-gray-700 dark:ring-gray-800">
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Popular Links</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Online Banking Login</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Mortgage Rates</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Credit Card Offers</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Investment Portfolios</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">ATM Locator</a></li>
              </ul>
            </div>
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Account Services</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Open New Account</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Apply for Loan</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Bill Pay & Transfers</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Statements & Documents</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Fraud Protection</a></li>
              </ul>
            </div>
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Quick Access</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Banking illustration" class="rounded-lg mb-4 shadow-md" loading="lazy">
              <p class="text-sm text-gray-400 dark:text-gray-400 mb-2">Need assistance or have a question? Contact our 24/7 support team.</p>
              <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200 text-sm font-medium">
                Get Support
                <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="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">About Us</a>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-200 hover:text-blue-400 focus:outline-none">
        <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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</nav>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-950 font-sans">
  <div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8 border border-gray-200 dark:border-gray-800 rounded-lg text-center shadow-sm">
    <h2 class="text-xl sm:text-2xl font-bold mb-6 text-gray-900 dark:text-white leading-tight">Sign in to your account</h2>

    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google logo"/>
        Sign in with Google
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/448227/github.svg" alt="GitHub logo"/>
        Sign in with GitHub
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook logo"/>
        Sign in with Facebook
      </button>
    </div>

    <div class="relative py-4">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white dark:bg-gray-950 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>
    </div>

    <input type="email" placeholder="[email protected]" aria-label="Email address" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md text-base text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200">

    <button class="mt-4 w-full px-4 py-3 rounded-md shadow-sm text-base font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500 transition-colors duration-200">
      Sign In
    </button>

    <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="font-medium text-blue-500 hover:text-blue-600 focus:outline-none focus:underline">Sign up</a>
    </p>
  </div>
</div>
              

                <nav class="relative bg-gradient-to-br from-purple-100 to-indigo-200 text-purple-900 shadow-xl dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 lg:px-8 px-4 py-3 font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-tight text-purple-800 dark:text-purple-300">VibrantShop</a>
    
    <!-- Desktop/Tablet Menu - Hidden on Mobile -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Home</a>
      
      <div class="group relative">
        <button class="flex items-center px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700 focus:outline-none">
          Categories
          <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform 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>
        </button>
        
        <div class="absolute left-1/2 -translate-x-1/2 mt-5 w-screen max-w-5xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top z-50 rounded-3xl p-6 shadow-neumorphic-xl bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-purple-200 dark:border-gray-700">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Column 1 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Apparel</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Men's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Women's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kids & Baby</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Shoes & Footwear</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Accessories</a></li>
              </ul>
            </div>

            <!-- Column 2 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Electronics</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smartphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Laptops & PCs</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Cameras & Drones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Audio & Headphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Wearable Tech</a></li>
              </ul>
            </div>
            
            <!-- Column 3 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Home & Living</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kitchen Appliances</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Furniture</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Decor & Art</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Bedding & Bath</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smart Home Devices</a></li>
              </ul>
            </div>

            <!-- Column 4 Images/Promo -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Featured Deals</p>
              <div class="space-y-4">
                <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
                  <img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
                  <div class="p-3">
                    <p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
                    <p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off selected items!</p>
                  </div>
                </a>
                <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
                  <img src="https://picsum.photos/id/20/300/180" alt="New Arrivals" class="w-full h-auto object-cover">
                  <div class="p-3">
                    <p class="font-medium text-purple-800 dark:text-gray-100">New Tech Arrivals</p>
                    <p class="text-sm text-purple-600 dark:text-gray-300">Explore the latest gadgets!</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">About Us</a>
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Contact</a>
    </div>

    <!-- User Actions & Cart for Desktop/Tablet -->
    <div class="hidden lg:flex items-center space-x-4">
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </button>
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
      </button>
      <!-- Dark Mode Toggle -->
      <button id="theme-toggle" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <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 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 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>
    </div>

    <!-- Mobile Menu Button - Hidden on Desktop/Tablet -->
    <div class="lg:hidden flex items-center space-x-4">
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </button>
      <button id="mobile-menu-button" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
        <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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

  </div>

  <!-- Mobile Menu Content (Hidden by default) -->
  <div id="mobile-menu" class="lg:hidden hidden fixed inset-0 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-800 dark:to-gray-900 z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out -translate-x-full">
    <div class="flex justify-between items-center px-4 py-3 border-b border-purple-200 dark:border-gray-700 sticky top-0 bg-inherit">
      <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300">Menu</h2>
      <button id="close-mobile-menu" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
        <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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
    <div class="p-6 space-y-6">
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Home</a>
      
      <div class="rounded-xl shadow-neumorphic-sm bg-purple-50 dark:bg-gray-700 p-4">
        <input type="checkbox" id="category-toggle-mobile" class="peer hidden" />
        <label for="category-toggle-mobile" class="flex justify-between items-center text-lg font-medium text-purple-800 dark:text-gray-100 cursor-pointer py-2">
          Categories
          <svg class="w-5 h-5 transition-transform duration-300 peer-checked:rotate-180" 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>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-screen">
          <div class="pt-4 space-y-4">
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Apparel</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Men's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Women's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kids & Baby</a></li>
              </ul>
            </div>
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Electronics</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Smartphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Laptops & PCs</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Cameras & Drones</a></li>
              </ul>
            </div>
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Home & Living</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kitchen Appliances</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Furniture</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Decor & Art</a></li>
              </ul>
            </div>
            <div class="mt-4">
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Featured Deals</p>
              <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md bg-purple-100 dark:bg-gray-800">
                <img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
                <div class="p-3">
                  <p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
                  <p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off!</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Deals</a>
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">About Us</a>
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Contact</a>
      
      <!-- Mobile specific user actions -->
      <div class="pt-4 border-t border-purple-200 dark:border-gray-700 mt-6 flex justify-around">
          <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
            <img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
          </button>
          <!-- Dark Mode Toggle for Mobile -->
          <button id="theme-toggle-mobile" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
            <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 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 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>
      </div>
    </div>
  </div>
</nav>

<!-- Custom Styles for Neumorphic Shadows (add to your CSS or use a style tag for demonstration) -->
<style>
  /* Base Neumorphic Shadow */
  .shadow-neumorphic-sm {
    box-shadow: 4px 4px 8px rgba(162, 126, 250, 0.4), -4px -4px 8px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-sm {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6), -4px -4px 8px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-md {
    box-shadow: 8px 8px 16px rgba(162, 126, 250, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-md {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6), -8px -8px 16px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-lg {
    box-shadow: 12px 12px 24px rgba(162, 126, 250, 0.4), -12px -12px 24px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-lg {
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.6), -12px -12px 24px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-xl {
    box-shadow: 20px 20px 40px rgba(162, 126, 250, 0.4), -20px -20px 40px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-xl {
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), -20px -20px 40px rgba(100, 100, 100, 0.3);
  }
  
  /* Inner Neumorphic Shadow */
  .shadow-inner-neumorphic-sm {
    box-shadow: inset 2px 2px 5px rgba(162, 126, 250, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-inner-neumorphic-sm {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
  }

  /* For the mobile menu to work without JS, we'd traditionally use JS. 
     However, for a pure HTML/CSS demo of toggleable content, 
     a hidden checkbox and label + peer selector could be used for the outer menu.
     For a true off-canvas menu, this implies JS. We'll simulate with an always-present 'fixed' element.
     The provided solution uses 'hidden' on mobile-menu and relies on external JS 
     (common for such complex interactions) for a realistic simulation.
     For a pure CSS *toggle*, a checkbox with label is used inside the mobile categories.
  */
</style>

<script>
  // Dark mode toggle functionality
  const setupDarkModeToggle = (toggleId) => {
    const themeToggle = document.getElementById(toggleId);
    if (themeToggle) {
      // Check local storage for theme preference or default to system preference
      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }

      themeToggle.addEventListener('click', () => {
        if (document.documentElement.classList.contains('dark')) {
          document.documentElement.classList.remove('dark');
          localStorage.theme = 'light';
        } else {
          document.documentElement.classList.add('dark');
          localStorage.theme = 'dark';
        }
      });
    }
  };

  setupDarkModeToggle('theme-toggle'); // Desktop toggle
  setupDarkModeToggle('theme-toggle-mobile'); // Mobile toggle

  // Mobile menu toggle functionality
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  const closeMobileMenuButton = document.getElementById('close-mobile-menu');

  if (mobileMenuButton && mobileMenu && closeMobileMenuButton) {
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      setTimeout(() => {
        mobileMenu.classList.remove('-translate-x-full');
        mobileMenu.classList.add('translate-x-0');
      }, 10);
    });

    closeMobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); // Match transition duration
    });

    // Close menu if clicked outside (optional, more complex)
    // document.addEventListener('click', (event) => {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && mobileMenu.classList.contains('translate-x-0')) {
    //     mobileMenu.classList.remove('translate-x-0');
    //     mobileMenu.classList.add('-translate-x-full');
    //     setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300);
    //   }
    // });
  }
</script>
              

                <div class="p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans transition-colors duration-300">
  <div class="flex flex-wrap gap-6 p-8 bg-gray-100 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-4xl">

    <!-- Active Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-blue-600 dark:text-blue-400 
                   shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                   hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="w-2.5 h-2.5 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse"></span>
      <span class="text-sm font-semibold whitespace-nowrap">Active</span>
    </button>

    <!-- Pending Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-yellow-600 dark:text-yellow-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Pending Review</span>
    </button>

    <!-- Success Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-green-600 dark:text-green-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Completed</span>
    </button>

    <!-- Error Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-red-600 dark:text-red-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Failed</span>
    </button>

    <!-- Info Badge -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-gray-700 dark:text-gray-300 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
      <svg class="w-4 h-4" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span class="text-sm font-semibold whitespace-nowrap">Informational</span>
    </button>

    <!-- New Feature Badge with avatar -->
    <button class="flex items-center gap-2 px-5 py-2 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-purple-600 dark:text-purple-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-6 h-6 rounded-full object-cover shadow-md">
      <span class="text-sm font-semibold whitespace-nowrap">New Update</span>
      <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-200 text-purple-800 
                   dark:bg-purple-800 dark:text-purple-200 
                   shadow-inner">PRO</span>
    </button>

     <!-- Tag with image/icon -->
     <button class="flex items-center gap-2 px-5 py-2 pr-3 rounded-full 
                   bg-gray-100 dark:bg-gray-800 
                   text-indigo-600 dark:text-indigo-400 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   transition-all duration-300 
                   focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
      <img src="https://picsum.photos/id/237/20/20" alt="Tag Icon" class="w-5 h-5 rounded-full object-cover shadow-sm">
      <span class="text-sm font-semibold whitespace-nowrap">Website</span>
    </button>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #6d6d6d, -6px -6px 12px #939393;
  }

  /* Inset styles for pushed/active state */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #6d6d6d, inset -5px -5px 10px #939393;
  }

  /* Add a subtle animation for the active dot */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Ensure all transitions are smooth */
  .transition-colors {
    transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
</style>
              

                <section class="py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 lg:mb-16">
      <h2 class="text-4xl font-extrabold text-pink-600 sm:text-5xl lg:text-6xl dark:text-purple-400 leading-tight">
        <span class="block">Our Impact in the Community</span>
        <span class="block text-2xl sm:text-3xl lg:text-4xl text-purple-500 mt-2 dark:text-pink-300">Making a difference, together.</span>
      </h2>
      <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">
        Explore the key areas where our initiatives are creating positive change and fostering a healthier, safer, and more vibrant community for everyone.
      </p>
    </div>

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

      <!-- Infographic Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-500 dark:text-pink-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-pink-200 dark:group-hover:bg-pink-600">
            <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.944 12c0 4.908 3.012 9.072 7.215 10.602a11.996 11.996 0 002.41 0c4.203-1.53 7.215-5.694 7.215-10.602a12.01 12.01 0 00-1.464-6.016z">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-pink-600 dark:group-hover:text-purple-400">Public Health Initiatives</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Dedicated programs improving community well-being.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-blue-500 dark:text-blue-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-blue-600 dark:group-hover:text-blue-200">
              +25%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Increase in health screenings</p>
          </div>
        </div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-700 text-purple-500 dark:text-purple-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-purple-200 dark:group-hover:bg-purple-600">
            <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="M13 10V3L4 14h7v7l9-11h-7z">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-purple-600 dark:group-hover:text-pink-400">Community Safety Programs</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Working to ensure a safer environment for all residents.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-green-500 dark:text-green-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-green-600 dark:group-hover:text-green-200">
              -15%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Reduction in reported incidents</p>
          </div>
        </div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden group transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="p-6 sm:p-8">
          <div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 text-green-500 dark:text-green-200 mx-auto mb-6 transition-all duration-300 group-hover:scale-110 group-hover:bg-green-200 dark:group-hover:bg-green-600">
            <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
              </path>
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center mb-4 transition-colors duration-300 group-hover:text-green-600 dark:group-hover:text-mint-400">Educational Development</h3>
          <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-6">
            Investing in learning to foster future growth.
          </p>
          <div class="text-center">
            <div class="text-5xl font-extrabold text-teal-500 dark:text-teal-300 drop-shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:text-teal-600 dark:group-hover:text-teal-200">
              +20%
            </div>
            <p class="mt-2 text-md text-gray-500 dark:text-gray-400">Enrollment in skill workshops</p>
          </div>
        </div>
      </div>

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

                <div class="font-['Cinzel_Decorative'] bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 max-w-full mx-auto">
  <h2 class="text-2xl sm:text-3xl font-bold text-center mb-6 uppercase tracking-wider text-rose-800 dark:text-rose-400">Game Filters</h2>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Platform Filter -->
    <div class="flex flex-col">
      <label for="platform-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Platform</label>
      <select id="platform-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Platforms</option>
        <option value="pc">PC</option>
        <option value="playstation">PlayStation</option>
        <option value="xbox">Xbox</option>
        <option value="nintendo">Nintendo</option>
      </select>
    </div>

    <!-- Genre Filter -->
    <div class="flex flex-col">
      <label for="genre-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Genre</label>
      <select id="genre-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Genres</option>
        <option value="rpg">RPG</option>
        <option value="action">Action</option>
        <option value="strategy">Strategy</option>
        <option value="adventure">Adventure</option>
        <option value="sports">Sports</option>
      </select>
    </div>

    <!-- Year Filter -->
    <div class="flex flex-col">
      <label for="year-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Year</label>
      <select id="year-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Years</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="older">Older</option>
      </select>
    </div>

    <!-- Price Filter (conceptual, could be 'free', 'paid' or specific range) -->
    <div class="flex flex-col">
      <label for="price-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Price</label>
      <select id="price-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">Any Price</option>
        <option value="free">Free</option>
        <option value="paid">Paid</option>
        <option value="under-20">Under $20</option>
      </select>
    </div>

  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-rose-700 text-rose-100 dark:bg-rose-600 dark:text-rose-100 rounded-md font-bold uppercase tracking-wider shadow-lg hover:bg-rose-800 dark:hover:bg-rose-700 transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      Apply Filters
    </button>
  </div>
</div>

<!-- To use the Cinzel Decorative font, you'd typically include it via Google Fonts in your HTML head: -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet"> -->
              

                <div class="font-sans bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">
      Our Consulting Process
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Step 1 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-yellow-600 shadow-lg">
          1
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden lg:hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Initial Consultation</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Understanding your needs and goals to tailor our approach.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-yellow-500 dark:bg-yellow-400"></div>
      </div>

      <!-- Step 2 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-orange-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-orange-600 shadow-lg">
          2
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Strategy & Planning</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Developing a custom strategy roadmap and detailed action plans.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-orange-500 dark:bg-orange-400"></div>
      </div>

      <!-- Step 3 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-red-600 shadow-lg">
          3
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-red-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Execution & Review</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Implementing solutions and continuously reviewing progress.</p>
        </div>
      </div>
    </div>
  </div>
</div>