<header class="relative">
  <div class="container">
    <nav class="flex items-center justify-between h-18">
      <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-32">
    <div class="container">
      <div class="grid gap-12 lg:gap-8 lg:grid-cols-2 [&>*:first-child]:lg:order-2 items-center">
        <div>
          <div class="max-w-lg lg:ml-auto">
            <span class="text-accent font-medium tracking-tight text-sm">Deploy Faster</span>
            <h1 class="font-bold tracking-tight text-4xl/tight md:text-5xl/tight mt-2">
              Create Beautiful
              <br />
              Websites in Minutes
            </h1>
            <p class="text-base/7 text-muted-foreground mt-4">Transform your workflow with our intuitive platform designed for high-performing teams. Ship faster, collaborate better, and scale with confidence of a professional.</p>
            <div class="mt-8 grid gap-3 xs:flex xs:justify-start">
              <button class="btn">Get Started</button>
              <button class="btn btn-outline">Watch Demo</button>
            </div>
          </div>
        </div>
        <div><img class="rounded-lg shadow-xs object-cover object-center aspect-[16/9] lg:aspect-[5/4]" alt="placeholder" src="https://images.pexels.com/photos/7550312/pexels-photo-7550312.jpeg" /></div>
      </div>
    </div>
  </section>
</header>