Building blocks for Laravel.

<div class="flex min-h-[420px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-sm overflow-hidden">
        <div class="flex h-44 items-center justify-center bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-700">
            <div class="h-28 w-40 rounded-lg border border-black/10 bg-white/70 shadow-xl rotate-[-8deg] dark:bg-zinc-700/70"></div>
        </div>
        <slot:content class="space-y-4">
            <div class="flex items-start justify-between gap-3">
                <div><april:badge variant="secondary">In stock</april:badge><h2 class="mt-2 text-lg font-semibold">Classic desk lamp</h2></div>
                <p class="text-lg font-semibold">$84</p>
            </div>
            <p class="text-sm leading-6 text-muted-foreground">A warm, focused light for desks, shelves, and late-night work.</p>
            <div class="flex items-center justify-between text-sm"><span class="text-amber-500">★★★★★</span><span class="text-muted-foreground">4.8 · 96 reviews</span></div>
            <april:button type="button" class="w-full">Add to cart</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[420px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-lg">
        <slot:title>Share project brief</slot:title>
        <slot:description>Anyone with the link can view this document.</slot:description>
        <slot:content class="space-y-5">
            <div class="flex gap-2"><april:input value="april.dev/brief-9f2k" readonly class="min-w-0 flex-1" /><april:button type="button" variant="outline">Copy</april:button></div>
            <div class="space-y-4">
                <p class="text-sm font-medium">People with access</p>
                @foreach ([['SC', 'Sofia Carter', 'sofia@example.com', 'Owner'], ['JD', 'Jackson Doe', 'jackson@example.com', 'Can edit'], ['AM', 'Amelia Bell', 'amelia@example.com', 'Can view']] as [$initials, $name, $email, $role])
                    <div class="flex items-center gap-3"><april:avatar><slot:fallback>{{$initials}}</slot:fallback></april:avatar><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium">{{$name}}</p><p class="truncate text-xs text-muted-foreground">{{$email}}</p></div><april:badge variant="outline">{{$role}}</april:badge></div>
                @endforeach
            </div>
            <april:button type="button" class="w-full">Invite people</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[460px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-lg">
        <slot:title>Payment details</slot:title>
        <slot:description>Enter your card information to continue.</slot:description>
        <slot:content class="space-y-5">
            <div class="space-y-2"><april:label for="payment-name">Name on card</april:label><april:input id="payment-name" value="Sofia Carter" class="w-full" /></div>
            <div class="space-y-2"><april:label for="payment-number">Card number</april:label><april:input id="payment-number" value="1234 1234 1234 1234" class="w-full" /></div>
            <div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><april:label for="payment-expiry">Expires</april:label><april:input id="payment-expiry" placeholder="MM / YY" /></div><div class="space-y-2"><april:label for="payment-cvc">CVC</april:label><april:input id="payment-cvc" placeholder="CVC" /></div></div>
            <april:button type="button" class="w-full">Continue</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[440px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-lg">
        <slot:title>Notifications</slot:title>
        <slot:description>You have 3 unread messages.</slot:description>
        <slot:content class="space-y-5">
            <div class="flex items-center justify-between gap-4"><div><p class="text-sm font-medium">Push notifications</p><p class="text-sm text-muted-foreground">Send alerts to this device.</p></div><april:switch checked /></div>
            <april:separator />
            <div class="space-y-4">
                @foreach ([['Your call has been confirmed.', '5 minutes ago'], ['You have a new message.', '1 hour ago'], ['Your weekly report is ready.', 'Yesterday']] as [$message, $time])
                    <div class="flex items-start gap-3"><div class="mt-1 h-2 w-2 rounded-full bg-primary"></div><div class="flex-1"><p class="text-sm font-medium">{{$message}}</p><p class="text-xs text-muted-foreground">{{$time}}</p></div></div>
                @endforeach
            </div>
            <april:button type="button" variant="outline" class="w-full">Mark all as read</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[440px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-xl overflow-hidden">
        <div class="h-40 bg-gradient-to-br from-primary/80 via-primary/30 to-muted"></div>
        <slot:content class="space-y-4">
            <div class="flex items-center gap-2"><april:badge variant="secondary">Design systems</april:badge><span class="text-xs text-muted-foreground">Jun 2, 2026</span></div>
            <h2 class="text-2xl font-semibold tracking-tight">How we scaled a shared component library</h2>
            <p class="leading-7 text-muted-foreground">A practical guide to consistent product interfaces across a growing team.</p>
            <div class="flex items-center gap-3 border-t pt-4"><april:avatar><slot:fallback>SC</slot:fallback></april:avatar><div><p class="text-sm font-medium">Sofia Carter</p><p class="text-xs text-muted-foreground">Product designer · 6 min read</p></div></div>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[430px] items-center justify-center bg-muted/20 p-6">
    <april:card class="relative w-full max-w-sm border-primary shadow-md">
        <april:badge class="absolute right-5 top-5">Popular</april:badge>
        <slot:title>Premium</slot:title>
        <slot:description>For growing teams that need more power.</slot:description>
        <slot:content>
            <p class="text-3xl font-bold">$29<span class="text-sm font-normal text-muted-foreground"> / month</span></p>
            <div class="mt-6 space-y-3">
                @foreach (['Unlimited projects', 'Advanced analytics', 'Priority support', '50 GB storage'] as $feature)
                    <p class="flex items-center gap-2 text-sm"><x-lucide-check class="h-4 w-4 text-primary" />{{$feature}}</p>
                @endforeach
            </div>
            <april:button type="button" class="mt-7 w-full">Get started</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[430px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-sm text-center">
        <slot:content class="flex flex-col items-center">
            <april:avatar class="h-20 w-20 text-xl"><slot:fallback>SC</slot:fallback></april:avatar>
            <h2 class="mt-4 text-xl font-semibold">Sofia Carter</h2>
            <p class="mt-1 text-sm text-muted-foreground">Product Designer</p>
            <div class="mt-6 grid w-full grid-cols-3 divide-x border-y py-4">
                <div><p class="font-semibold">128</p><p class="text-xs text-muted-foreground">Following</p></div>
                <div><p class="font-semibold">2.3k</p><p class="text-xs text-muted-foreground">Followers</p></div>
                <div><p class="font-semibold">48</p><p class="text-xs text-muted-foreground">Projects</p></div>
            </div>
            <april:button type="button" class="mt-6 w-full">Follow</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[390px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-xl">
        <slot:content>
            <div class="text-4xl leading-none text-primary">“</div>
            <blockquote class="mt-4 text-xl font-medium leading-8 tracking-tight">April UI gave our team a calm foundation. We shipped a polished interface in days instead of weeks.</blockquote>
            <div class="mt-8 flex items-center gap-3 border-t pt-5"><april:avatar><slot:fallback>AB</slot:fallback></april:avatar><div><p class="text-sm font-medium">Amelia Bell</p><p class="text-xs text-muted-foreground">CTO, Acme Inc.</p></div></div>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[500px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-sm">
        <slot:title>Login to your account</slot:title>
        <slot:description>Enter your email below to login to your account.</slot:description>
        <slot:content class="space-y-5">
            <div class="space-y-2"><april:label for="sign-in-email">Email</april:label><april:input id="sign-in-email" type="email" placeholder="m@example.com" class="w-full" /></div>
            <div class="space-y-2"><div class="flex justify-between"><april:label for="sign-in-password">Password</april:label><a href="#" class="text-xs text-primary underline-offset-4 hover:underline">Forgot password?</a></div><april:input id="sign-in-password" type="password" class="w-full" /></div>
            <div class="flex items-center gap-2"><april:checkbox id="sign-in-remember" /><april:label for="sign-in-remember" class="text-sm font-normal">Remember me</april:label></div>
            <april:button type="button" class="w-full">Login</april:button>
            <div class="flex items-center gap-3 text-xs text-muted-foreground"><april:separator class="flex-1" /><span>or</span><april:separator class="flex-1" /></div>
            <april:button type="button" variant="outline" class="w-full"><x-lucide-github class="mr-2 h-4 w-4" />Login with GitHub</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[430px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-xl">
        <slot:title>Team members</slot:title>
        <slot:description>Invite your team to collaborate.</slot:description>
        <slot:content class="space-y-4">
            @foreach ([['SC', 'Sofia Carter', 'sofia@example.com', 'Owner'], ['JD', 'Jackson Doe', 'jackson@example.com', 'Member'], ['AB', 'Amelia Bell', 'amelia@example.com', 'Member']] as [$initials, $name, $email, $role])
                <div class="flex items-center gap-3"><april:avatar><slot:fallback>{{$initials}}</slot:fallback></april:avatar><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium">{{$name}}</p><p class="truncate text-xs text-muted-foreground">{{$email}}</p></div><april:badge variant="{{$role === 'Owner' ? 'secondary' : 'outline'}}">{{$role}}</april:badge></div>
            @endforeach
            <april:button type="button" variant="outline" class="w-full"><x-lucide-user-plus class="mr-2 h-4 w-4" />Invite member</april:button>
        </slot:content>
    </april:card>
</div>

<div class="flex min-h-[360px] items-center justify-center bg-muted/20 p-6">
    <april:dialog dismissable>
        <slot:trigger><april:button type="button" variant="outline">Give feedback</april:button></slot:trigger>
        <slot:content class="sm:max-w-[425px]">
            <april:dialog-header><slot:title>Share your feedback</slot:title><slot:description>Tell us what would make this experience better.</slot:description></april:dialog-header>
            <div class="py-4"><april:textarea id="feedback-message" class="min-h-28 w-full" placeholder="Write your feedback..." /></div>
            <april:dialog-footer><april:button type="button">Send feedback</april:button></april:dialog-footer>
        </slot:content>
    </april:dialog>
</div>

<div class="flex min-h-[360px] items-center justify-center bg-muted/20 p-6">
    <april:popover>
        <slot:trigger><april:button type="button" variant="outline">Share</april:button></slot:trigger>
        <slot:content class="w-80">
            <div class="space-y-4">
                <div><h2 class="font-medium">Share this page</h2><p class="mt-1 text-sm text-muted-foreground">Anyone with this link can view it.</p></div>
                <div class="flex gap-2"><april:input value="https://aprilui.dev/blocks" readonly class="min-w-0 flex-1" /><april:button type="button" size="sm">Copy</april:button></div>
            </div>
        </slot:content>
    </april:popover>
</div>

<div class="flex min-h-[420px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-md text-center">
        <slot:content class="flex flex-col items-center">
            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-primary">
                <x-lucide-inbox class="h-6 w-6" />
            </div>
            <h2 class="mt-5 text-xl font-semibold tracking-tight">Your inbox is empty</h2>
            <p class="mt-2 max-w-xs text-sm leading-6 text-muted-foreground">New messages will appear here when your team sends them.</p>
            <april:button type="button" class="mt-6">Invite a teammate <x-lucide-user-plus class="ml-2 h-4 w-4" /></april:button>
        </slot:content>
    </april:card>
</div>