Header Components

Navigation bars, hero headers, and page headers built with TailwindCSS. HTML, Vue and React code match the preview exactly.

1. Simple Navigation Header

Clean, minimal navigation bar with logo and menu items.

<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
      </div>
    </div>
  </div>
</nav>
<template>
  <nav class="bg-white border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
          </div>
          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
          </div>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center">
          <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
</script>
import React from 'react'

export default function SimpleNavigationHeader() {
  return (
    <nav className="bg-white border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <img className="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo" />
            </div>
            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
            </div>
          </div>
          <div className="hidden sm:ml-6 sm:flex sm:items-center">
            <button className="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
          </div>
        </div>
      </div>
    </nav>
  )
}

2. Responsive Header with Hamburger Menu

Mobile-first responsive navigation with hamburger menu toggle, using Heroicons for clean iconography.

<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
        </div>
        <div class="hidden md:ml-6 md:flex md:space-x-8">
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg 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>
        </button>
      </div>
    </div>
  </div>

  <div x-show="mobileMenuOpen" class="md:hidden" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 bg-white">
      <div class="px-2">
        <button class="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
      </div>
    </div>
  </div>
</nav>
<template>
  <nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
          </div>
          <div class="hidden md:ml-6 md:flex md:space-x-8">
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
          </div>
        </div>
        <div class="hidden md:ml-6 md:flex md:items-center">
          <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
        </div>
        <div class="-mr-2 flex items-center md:hidden">
          <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg 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>
          </button>
        </div>
      </div>
    </div>

    <div x-show="mobileMenuOpen" class="md:hidden" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200 bg-white">
        <div class="px-2">
          <button class="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue'

const mobileMenuOpen = ref(false)
</script>
import React, { useState } from 'react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

export default function ResponsiveHeader() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
    <nav className="bg-white shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <img className="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo" />
            </div>
            <div className="hidden md:ml-6 md:flex md:space-x-8">
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
              <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
            </div>
          </div>
          <div className="hidden md:ml-6 md:flex md:items-center">
            <button className="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
          </div>
          <div className="-mr-2 flex items-center md:hidden">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              type="button"
              className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet"
              aria-controls="mobile-menu"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              {mobileMenuOpen ? (
                <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
              ) : (
                <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
              )}
            </button>
          </div>
        </div>
      </div>

      {mobileMenuOpen && (
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
            <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
          </div>
          <div className="pt-4 pb-3 border-t border-gray-200 bg-white">
            <div className="px-2">
              <button className="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
            </div>
          </div>
        </div>
      )}
    </nav>
  )
}

3. Hero Header with Navbar

Complete landing page header featuring responsive navigation bar with hamburger menu and large hero section with gradient background and call-to-action buttons.

Build Something Amazing

Create stunning websites and applications with our premium TailwindCSS components and templates. 

<!-- Navigation Bar -->
<nav class="bg-white shadow-lg relative z-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
        </div>
        <div class="hidden md:ml-6 md:flex md:space-x-8">
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
          <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg 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>
        </button>
      </div>
    </div>
  </div>

  <div x-show="mobileMenuOpen" class="md:hidden" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 bg-white">
      <div class="px-2">
        <button class="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
      </div>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<header class="relative bg-gradient-to-r from-violet via-purple-600 to-pink-500 overflow-hidden">
  <div class="absolute inset-0 bg-black/20"></div>
  <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
    <div class="text-center">
      <h1 class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl lg:text-7xl">
        Build Something
        <span class="block text-yellow-300">Amazing</span>
      </h1>
      <p class="mt-6 max-w-3xl mx-auto text-xl text-purple-100 sm:text-2xl">
        Create stunning websites and applications with our premium TailwindCSS components and templates.
      </p>
      <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
        <button class="px-8 py-4 bg-white text-violet font-bold text-lg border-2 border-white shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.3)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all">
          Get Started Free
        </button>
        <button class="px-8 py-4 bg-transparent text-white font-bold text-lg border-2 border-white hover:bg-white hover:text-violet transition-all">
          View Templates
        </button>
      </div>
    </div>
  </div>
  <!-- Decorative elements -->
  <div class="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
  <div class="absolute bottom-10 right-10 w-32 h-32 bg-yellow-300/20 rounded-full blur-2xl"></div>
</header>
<template>
  <!-- Navigation Bar -->
  <nav class="bg-white shadow-lg relative z-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
          </div>
          <div class="hidden md:ml-6 md:flex md:space-x-8">
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
            <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
          </div>
        </div>
        <div class="hidden md:ml-6 md:flex md:items-center">
          <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
        </div>
        <div class="-mr-2 flex items-center md:hidden">
          <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg 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>
          </button>
        </div>
      </div>
    </div>

    <div x-show="mobileMenuOpen" class="md:hidden" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
        <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200 bg-white">
        <div class="px-2">
          <button class="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
        </div>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <header class="relative bg-gradient-to-r from-violet via-purple-600 to-pink-500 overflow-hidden">
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
      <div class="text-center">
        <h1 class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl lg:text-7xl">
          Build Something
          <span class="block text-yellow-300">Amazing</span>
        </h1>
        <p class="mt-6 max-w-3xl mx-auto text-xl text-purple-100 sm:text-2xl">
          Create stunning websites and applications with our premium TailwindCSS components and templates.
        </p>
        <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
          <button class="px-8 py-4 bg-white text-violet font-bold text-lg border-2 border-white shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.3)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all">
            Get Started Free
          </button>
          <button class="px-8 py-4 bg-transparent text-white font-bold text-lg border-2 border-white hover:bg-white hover:text-violet transition-all">
            View Templates
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative elements -->
    <div class="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
    <div class="absolute bottom-10 right-10 w-32 h-32 bg-yellow-300/20 rounded-full blur-2xl"></div>
  </header>
</template>

<script setup>
import { ref } from 'vue'

const mobileMenuOpen = ref(false)
</script>
import React, { useState } from 'react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

export default function HeroHeaderWithNavbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
    <>
      <!-- Navigation Bar -->
      <nav className="bg-white shadow-lg relative z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex">
              <div className="flex-shrink-0 flex items-center">
                <img className="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo" />
              </div>
              <div className="hidden md:ml-6 md:flex md:space-x-8">
                <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
                <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
                <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
                <a href="#" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
              </div>
            </div>
            <div className="hidden md:ml-6 md:flex md:items-center">
              <button className="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
            </div>
            <div className="-mr-2 flex items-center md:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                type="button"
                className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>
                {mobileMenuOpen ? (
                  <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                ) : (
                  <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                )}
              </button>
            </div>
          </div>
        </div>

        {mobileMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
              <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
              <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">About</a>
              <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Services</a>
              <a href="#" className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
            </div>
            <div className="pt-4 pb-3 border-t border-gray-200 bg-white">
              <div className="px-2">
                <button className="w-full bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90">Sign In</button>
              </div>
            </div>
          </div>
        )}
      </nav>

      <!-- Hero Section -->
      <header className="relative bg-gradient-to-r from-violet via-purple-600 to-pink-500 overflow-hidden">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl lg:text-7xl">
              Build Something
              <span className="block text-yellow-300">Amazing</span>
            </h1>
            <p className="mt-6 max-w-3xl mx-auto text-xl text-purple-100 sm:text-2xl">
              Create stunning websites and applications with our premium TailwindCSS components and templates.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
              <button className="px-8 py-4 bg-white text-violet font-bold text-lg border-2 border-white shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.3)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all">
                Get Started Free
              </button>
              <button className="px-8 py-4 bg-transparent text-white font-bold text-lg border-2 border-white hover:bg-white hover:text-violet transition-all">
                View Templates
              </button>
            </div>
          </div>
        </div>
        <!-- Decorative elements -->
        <div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
        <div className="absolute bottom-10 right-10 w-32 h-32 bg-yellow-300/20 rounded-full blur-2xl"></div>
      </header>
    <>
  )
}

5. Dark Mode Header with Toggle

Responsive navigation header with dark mode toggle, signup/signin buttons, hamburger menu, and smooth animations.

<nav class="bg-white shadow-lg dark:bg-gray-900 dark:text-white transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
        </div>
        <div class="hidden md:ml-6 md:flex md:space-x-8">
          <a href="#" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors">Home</a>
          <a href="#" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors">About</a>
          <a href="#" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors">Services</a>
          <a href="#" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors">Contact</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
        <button @click="darkMode = !darkMode" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        <button class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-4 py-2 text-sm font-medium transition-colors">Sign In</button>
        <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <button @click="darkMode = !darkMode" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md mr-2 transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet">
          <span class="sr-only">Open main menu</span>
          <svg 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>
        </button>
      </div>
    </div>
  </div>

  <div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="md:hidden bg-white border-t border-gray-200 dark:bg-gray-900 dark:border-gray-700">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium transition-colors">Home</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium transition-colors">About</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium transition-colors">Services</a>
      <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 block px-3 py-2 rounded-md text-base font-medium transition-colors">Contact</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200">
      <div class="px-2 space-y-2">
        <button class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white w-full px-3 py-2 text-left text-base font-medium transition-colors">Sign In</button>
        <button class="w-full bg-violet text-white px-3 py-2 rounded-md text-base font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
      </div>
    </div>
  </div>
</nav>
<template>
  <nav class="bg-white text-gray-900 shadow-lg transition-colors duration-300 dark:bg-gray-900 dark:text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <img class="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo">
          </div>
          <div class="hidden md:ml-6 md:flex md:space-x-8">
            <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Home</a>
            <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">About</a>
            <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Services</a>
            <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Contact</a>
          </div>
        </div>
        <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
          <button @click="toggleDarkMode" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
          <button class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-4 py-2 text-sm font-medium transition-colors">Sign In</button>
          <button class="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
        </div>
        <div class="-mr-2 flex items-center md:hidden">
          <button @click="toggleDarkMode" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md mr-2 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
          <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet">
            <span class="sr-only">Open main menu</span>
            <svg 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>
          </button>
        </div>
      </div>
    </div>

    <div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="md:hidden bg-white border-t border-gray-200 dark:bg-gray-900 dark:border-gray-700">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Home</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">About</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Services</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Contact</a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200">
        <div class="px-2 space-y-2">
          <button class="w-full px-3 py-2 text-left text-base font-medium transition-colors text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Sign In</button>
          <button class="w-full bg-violet text-white px-3 py-2 rounded-md text-base font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref } from 'vue'

const mobileMenuOpen = ref(false)

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark')
}
</script>
import React, { useState } from 'react'

export default function DarkModeHeader() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const toggleDarkMode = () => {
    document.documentElement.classList.toggle('dark')
  }

  return (
    <nav className="bg-white text-gray-900 shadow-lg transition-colors duration-300 dark:bg-gray-900 dark:text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <img className="h-8 w-auto" src="https://via.placeholder.com/150x50" alt="Logo" />
            </div>
            <div className="hidden md:ml-6 md:flex md:space-x-8">
              <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Home</a>
              <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">About</a>
              <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Services</a>
              <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white">Contact</a>
            </div>
          </div>
          <div className="hidden md:ml-6 md:flex md:items-center md:space-x-4">
            <button onClick={toggleDarkMode} className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md transition-colors">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
              </svg>
            </button>
            <button className="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-4 py-2 text-sm font-medium transition-colors">Sign In</button>
            <button className="bg-violet text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
          </div>
          <div className="-mr-2 flex items-center md:hidden">
            <button onClick={toggleDarkMode} className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white p-2 rounded-md mr-2 transition-colors">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
              </svg>
            </button>
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              type="button"
              className="text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-inset focus:ring-violet"
              aria-controls="mobile-menu"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              <svg className="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 strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {mobileMenuOpen && (
        <div className="md:hidden bg-white border-t border-gray-200 dark:bg-gray-900 dark:border-gray-700">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" className="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Home</a>
            <a href="#" className="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">About</a>
            <a href="#" className="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Services</a>
            <a href="#" className="block px-3 py-2 rounded-md text-base font-medium transition-colors text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-800">Contact</a>
          </div>
          <div className="pt-4 pb-3 border-t border-gray-200">
            <div className="px-2 space-y-2">
              <button className="w-full px-3 py-2 text-left text-base font-medium transition-colors text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Sign In</button>
              <button className="w-full bg-violet text-white px-3 py-2 rounded-md text-base font-medium hover:bg-violet/90 transition-colors">Sign Up</button>
            </div>
          </div>
        </div>
      )}
    </nav>
  )
}

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More