<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">Start Free Today</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="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>
<div class="sm:p-16 sm:card-muted sm:rounded-lg">
<div class="card md:border-none md:shadow-none">
<div class="card-content md:card-content-lg grid gap-6">
<div>
<h3 class="text-lg font-semibold tracking-tight">Sign Up</h3>
<p class="text-sm/6 text-muted-foreground mt-2">Free trial. No credit card required.</p>
</div>
<div class="grid gap-6">
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="name">Name</label></div>
<input id="name" class="input" type="text" placeholder="Enter your name" />
</div>
<div class="grid gap-3">
<div class="flex items-center justify-between"><label class="label" for="email">Email</label></div>
<input id="email" class="input" type="email" placeholder="Enter your email" />
</div>
<div class="grid gap-4">
<button class="btn" type="submit">Get Started</button>
<button class="btn btn-outline" type="button">
<svg viewBox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
</svg>
Sign up with Google
</button>
</div>
</div>
<p class="text-center text-sm text-muted-foreground">
Already have an account?
<a href="#" class="text-foreground font-medium underline underline-offset-4">Login</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</header>