<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:grid-cols-2 items-center">
<div>
<div class="max-w-lg">
<span class="text-accent font-medium tracking-tight text-sm">Join the Waitlist</span>
<h1 class="font-bold tracking-tight text-4xl/tight md:text-5xl/tight mt-2">
Build Something
<br />
Amazing Together
</h1>
<p class="text-lg/8 text-muted-foreground mt-4">Sed eu quam id quam tristique pharetra a at tortor veil dolarto. Suspendisse lorem odio sit amet facilisis.</p>
<div class="mt-8 flex gap-2">
<input class="input input-lg max-w-84" type="email" placeholder="Enter your email" />
<button class="btn btn-lg">Get Started</button>
</div>
<p class="mt-3 text-sm text-muted-foreground">
We care about your data. Read our
<a href="#" class="underline underline-offset-4">privacy policy</a>
.
</p>
<div class="flex items-center gap-4 mt-8">
<div class="avatar-group">
<img class="avatar" src="https://storage.reimage.dev/startingpoint/ecbe22673d44/original" alt="User" />
<img class="avatar" src="https://storage.reimage.dev/startingpoint/0655e9cba9a9/original" alt="User" />
<img class="avatar" src="https://storage.reimage.dev/startingpoint/347415e562d9/original" alt="User" />
<img class="avatar" src="https://storage.reimage.dev/startingpoint/5858388377f4/original" alt="User" />
</div>
<div class="flex flex-col">
<div class="flex items-center gap-1">
<div class="flex gap-1">
<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-star size-4 text-amber-400 fill-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
<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-star size-4 text-amber-400 fill-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
<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-star size-4 text-amber-400 fill-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
<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-star size-4 text-amber-400 fill-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
<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-star size-4 text-amber-400 fill-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>
</div>
<span class="ml-1 font-medium">5.0</span>
</div>
<span class="text-sm text-muted-foreground">from 200+ reviews</span>
</div>
</div>
</div>
</div>
<div><img class="object-cover object-center aspect-square rounded-lg shadow-xs" alt="placeholder" src="https://storage.reimage.dev/startingpoint/a76dab98e29b/original" /></div>
</div>
</div>
</section>
</header>