<header class="relative isolate">
  <img src="https://images.pexels.com/photos/7550398/pexels-photo-7550398.jpeg" class="absolute inset-0 -z-10 h-full w-full object-cover object-center brightness-40" alt="Background" />
  <div class="container">
    <nav class="flex items-center justify-between h-18 dark">
      <a href="#" class="flex items-center gap-2">
        <div class="flex items-center justify-center size-6 rounded-sm overflow-hidden shrink-0 bg-primary text-primary-foreground text-sm font-bold">ui</div>
        <div class="text-sm font-medium truncate">Starting Point</div>
      </a>
      <div class="hidden lg:flex items-center gap-1">
        <a href="#" class="btn btn-ghost btn-sm">Product</a>
        <a href="#" class="btn btn-ghost btn-sm">Solutions</a>
        <a href="#" class="btn btn-ghost btn-sm">Resources</a>
        <a href="#" class="btn btn-ghost btn-sm">Company</a>
      </div>
      <div class="hidden lg:flex items-center gap-2">
        <button class="btn btn-ghost btn-sm">Sign In</button>
        <button class="btn btn-sm">Get Started</button>
      </div>
      <button class="btn btn-ghost btn-icon-sm lg:hidden" aria-label="Open menu" data-sp-toggle="dialog" data-sp-target="#mobile-menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu size-5" aria-hidden="true">
          <path d="M4 5h16"></path>
          <path d="M4 12h16"></path>
          <path d="M4 19h16"></path>
        </svg>
      </button>
    </nav>
  </div>
  <dialog id="mobile-menu" class="dialog">
    <div class="sheet-backdrop"></div>
    <div class="sheet-panel sheet-right w-full max-w-xs">
      <div class="sheet-content h-full flex flex-col">
        <div class="flex items-center justify-between mb-8 -mr-2">
          <a href="#" class="flex items-center gap-2">
            <div class="flex items-center justify-center size-6 rounded-sm overflow-hidden shrink-0 bg-primary text-primary-foreground text-sm font-bold">ui</div>
            <div class="text-sm font-medium truncate">Starting Point</div>
          </a>
          <button class="btn btn-ghost btn-icon-sm" aria-label="Close menu" data-sp-dismiss="dialog">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x size-5" aria-hidden="true">
              <path d="M18 6 6 18"></path>
              <path d="m6 6 12 12"></path>
            </svg>
          </button>
        </div>
        <div class="flex flex-col gap-1 -ml-3">
          <a href="#" class="btn btn-ghost justify-start">Product</a>
          <a href="#" class="btn btn-ghost justify-start">Solutions</a>
          <a href="#" class="btn btn-ghost justify-start">Resources</a>
          <a href="#" class="btn btn-ghost justify-start">Company</a>
        </div>
        <div class="flex flex-col gap-2 pt-8 border-t mt-auto">
          <button class="btn btn-outline">Sign In</button>
          <button class="btn">Get Started</button>
        </div>
      </div>
    </div>
  </dialog>
  <section class="relative py-16 lg:py-48 dark">
    <div class="container">
      <div>
        <div class="max-w-3xl mx-auto text-center">
          <span class="text-accent font-medium tracking-tight text-sm">Innovate with Confidence</span>
          <h1 class="font-bold tracking-tight text-4xl/tight md:text-5xl/tight lg:text-6xl/tight mt-4">
            Create Modern Beautiful
            <br class="max-xs:hidden" />
            Websites in Minutes
          </h1>
          <p class="text-base/7 text-foreground mt-4 max-w-xl mx-auto">Transform your workflow with our intuitive platform designed for high-performing teams. Ship faster, collaborate better, and scale.</p>
          <div class="mt-8 grid gap-3 xs:flex xs:justify-center">
            <button class="btn">Request Demo</button>
            <button class="btn btn-ghost">
              Learn More
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true">
                <path d="M5 12h14"></path>
                <path d="m12 5 7 7-7 7"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</header>