Luxury_SaaS_Navigation_Candy

<nav class="relative bg-white dark:bg-gray-900 shadow-lg font-['Quicksand',_sans-serif]" x-data="{ open: false }">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-pink-500 dark:text-pink-400 text-3xl font-extrabold tracking-tight">
            SaaS<span class="text-teal-400 dark:text-teal-300">Flow</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Features</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Pricing</a>
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Solutions</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Contact</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <span class="sr-only">Toggle dark mode</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" 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" />
          </svg>
        </button>
        <button type="button" class="ml-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
          Sign Up
        </button>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button x-on:click="open = !open" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 transition duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="sm:hidden absolute inset-x-0 top-full z-10 bg-white dark:bg-gray-900 shadow-md transform origin-top-right" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Contact</a>
      <div class="flex items-center justify-between px-3 py-2">
        <button class="flex-shrink-0 p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 flex-shrink-0 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" 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" />
          </svg>
        </button>
      </div>
      <a href="#" class="block w-full text-center px-4 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out mt-4 mx-3">Sign Up</a>
    </div>
  </div>
</nav>
<script>
  // This Alpine.js store provides dark mode functionality.
  // It's a simple example and can be extended for persistence.
  
  // Required for Alpine.js to function
  document.addEventListener('alpine:init', () => {
    Alpine.store('darkMode', {
      on: localStorage.getItem('darkMode') === 'true' || (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches),
      toggle() {
        this.on = !this.on;
        localStorage.setItem('darkMode', this.on);
        document.documentElement.classList.toggle('dark', this.on);
      }
    });

    // Initialize dark mode class on html tag based on store value
    Alpine.effect(() => {
      if (Alpine.store('darkMode').on) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    });
  });
</script>