Marketing blocks.

<section class="relative overflow-hidden bg-background px-6 py-16 text-center md:px-10 md:py-24">
    <div class="mx-auto max-w-2xl">
        <april:badge variant="secondary">The calmer way to ship</april:badge>
        <h2 class="mt-5 text-3xl font-bold tracking-tight md:text-5xl">Build your next idea with a clear starting point.</h2>
        <p class="mx-auto mt-5 max-w-xl text-base leading-7 text-muted-foreground md:text-lg">
            Compose a focused product experience from accessible primitives and a theme that belongs to your brand.
        </p>
        <div class="mt-8 flex flex-wrap justify-center gap-3">
            <april:button type="button">Start building <x-lucide-arrow-right class="ml-2 h-4 w-4" /></april:button>
            <april:button type="button" variant="outline">View documentation</april:button>
        </div>
        <div class="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
            <span class="inline-flex items-center gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Blade-first</span>
            <span class="inline-flex items-center gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Accessible</span>
            <span class="inline-flex items-center gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Themeable</span>
        </div>
    </div>
</section>