<section class="relative py-16 lg:py-32">
<div class="container">
<div class="grid gap-12 items-center">
<div>
<div class="max-w-3xl mx-auto text-center">
<div>
<h2 class="text-3xl/tight font-bold tracking-tight md:text-4xl/tight">Choose your plan</h2>
<p class="mt-4 text-lg/8 text-muted-foreground">
Sed eu quam id quam tristique pharetra a at tortor veil dolarto.
<br class="max-md:hidden" />
Suspendisse lorem odio sit amet libero facilisis.
</p>
</div>
<div class="flex items-center justify-center gap-4 mt-6">
<span class="text-sm font-medium">Bill monthly</span>
<input class="switch h-6 w-12 [&::before]:size-5 [&::before]:mt-px [&:checked::before]:translate-x-6" type="checkbox" role="switch" checked="" />
<span class="text-sm font-medium">Bill annually</span>
</div>
</div>
</div>
<div>
<div class="grid lg:grid-cols-2 gap-8 mx-auto lg:max-w-4xl">
<div class="card">
<div class="card-content md:card-content-lg grid gap-6">
<h3 class="text-lg/snug font-semibold tracking-tight">Starter</h3>
<div>
<span class="text-4xl font-bold sm:text-5xl">$24</span>
<span class="text-muted-foreground ml-1">/ month</span>
</div>
<p class="text-sm/6 text-muted-foreground">Perfect for individual developers who want to build beautiful interfaces faster.</p>
<div class="separator"></div>
<ul class="grid gap-4 text-sm">
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Lifetime access</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>All current + future components</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Free updates</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Use in unlimited projects</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Email support</span>
</li>
</ul>
<a href="#" class="btn btn-lg w-full mt-2">Purchase Starter</a>
</div>
</div>
<div class="card">
<div class="card-content md:card-content-lg grid gap-6">
<h3 class="text-lg/snug font-semibold tracking-tight">Pro</h3>
<div>
<span class="text-4xl font-bold sm:text-5xl">$129</span>
<span class="text-muted-foreground ml-1">/ month</span>
</div>
<p class="text-sm/6 text-muted-foreground">Ideal for small teams who need to collaborate and maintain consistency across projects.</p>
<div class="separator"></div>
<ul class="grid gap-4 text-sm">
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Everything in Starter plan</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>5 team members included</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Priority support</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>Team management dashboard</span>
</li>
<li class="text-muted-foreground flex items-center">
<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-check mr-4 size-4 text-green-600" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>
<span>One invoice for all users</span>
</li>
</ul>
<a href="#" class="btn btn-lg w-full mt-2">Purchase Pro</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>