Neura UI

{{--
    Blog featured — one large featured post with two side posts.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div class="max-w-xl">
                <neura::badge variant="soft" pill class="w-fit">{{ __('Blog') }}</neura::badge>
                <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Notes from the product floor') }}
                </neura::heading>
            </div>
            <neura::button href="#blog" variant="soft" icon="arrow-right">{{ __('View all posts') }}</neura::button>
        </div>

        <div class="mt-12 grid gap-4 lg:grid-cols-12">
            <article
                class="group flex flex-col rounded-2xl border border-dashed border-edge p-6 sm:p-8 transition-colors hover:bg-hover/30 lg:col-span-7">
                <div
                    class="mb-6 flex aspect-[16/9] items-center justify-center rounded-xl border border-dashed border-edge bg-surface-inset/50">
                    <neura::icon name="photo" class="size-8 text-fg-muted" />
                </div>
                <div class="flex items-center justify-between gap-3">
                    <neura::badge variant="soft" color="primary" pill>{{ __('Featured') }}</neura::badge>
                    <span class="font-mono text-[11px] text-fg-muted">Mar 18</span>
                </div>
                <neura::heading level="h3" size="2xl" class="mt-4 tracking-tight group-hover:text-fg-secondary">
                    {{ __('How we ship blocks without locking your theme') }}
                </neura::heading>
                <neura::text size="sm" class="mt-3 flex-1 text-fg-secondary text-pretty">
                    {{ __('A look at token layers, dashed borders and why every section stays editable after you paste it.') }}
                </neura::text>
                <span class="mt-6 inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                    {{ __('Read') }}
                    <neura::icon name="arrow-right" class="size-3.5" />
                </span>
            </article>

            <div class="flex flex-col gap-4 lg:col-span-5">
                @foreach ([
                    ['tag' => __('Release'), 'title' => __('Native editor ships pagination'), 'excerpt' => __('Real A4 sheets, headers and Paperdoc export.'), 'date' => 'Mar 12'],
                    ['tag' => __('Guide'), 'title' => __('Design tokens that survive dark mode'), 'excerpt' => __('Surface, inset and separator across themes.'), 'date' => 'Mar 4'],
                ] as $post)
                    <article
                        class="group flex flex-1 flex-col rounded-2xl border border-dashed border-edge p-6 transition-colors hover:bg-hover/30">
                        <div class="flex items-center justify-between gap-3">
                            <neura::badge variant="soft" pill>{{ $post['tag'] }}</neura::badge>
                            <span class="font-mono text-[11px] text-fg-muted">{{ $post['date'] }}</span>
                        </div>
                        <neura::heading level="h3" size="lg" class="mt-4 tracking-tight group-hover:text-fg-secondary">
                            {{ $post['title'] }}
                        </neura::heading>
                        <neura::text size="sm" class="mt-2 flex-1 text-fg-secondary text-pretty">
                            {{ $post['excerpt'] }}
                        </neura::text>
                        <span class="mt-5 inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                            {{ __('Read') }}
                            <neura::icon name="arrow-right" class="size-3.5" />
                        </span>
                    </article>
                @endforeach
            </div>
        </div>
    </neura::container>
</section>

{{--
    Blog grid — editorial card listing for marketing / content hubs.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div class="max-w-xl">
                <neura::badge variant="soft" pill class="w-fit">{{ __('Blog') }}</neura::badge>
                <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Notes from the product floor') }}
                </neura::heading>
            </div>
            <neura::button href="#blog" variant="soft" icon="arrow-right">{{ __('View all posts') }}</neura::button>
        </div>

        <div class="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['tag' => __('Release'), 'title' => __('Native editor ships pagination'), 'excerpt' => __('Real A4 sheets, headers and Paperdoc export — without a third-party bundle.'), 'date' => 'Mar 12'],
                ['tag' => __('Guide'), 'title' => __('Design tokens that survive dark mode'), 'excerpt' => __('How surface, inset and separator stay coherent across themes.'), 'date' => 'Mar 4'],
                ['tag' => __('Workflow'), 'title' => __('From Figma to Blade in one afternoon'), 'excerpt' => __('Paste blocks, wire Livewire, keep every layer editable.'), 'date' => 'Feb 21'],
            ] as $post)
                <article class="group flex flex-col rounded-2xl border border-dashed border-edge p-6 transition-colors hover:bg-hover/30">
                    <div class="flex items-center justify-between gap-3">
                        <neura::badge variant="soft" pill>{{ $post['tag'] }}</neura::badge>
                        <span class="font-mono text-[11px] text-fg-muted">{{ $post['date'] }}</span>
                    </div>
                    <neura::heading level="h3" size="lg" class="mt-4 tracking-tight group-hover:text-fg-secondary">
                        {{ $post['title'] }}
                    </neura::heading>
                    <neura::text size="sm" class="mt-2 flex-1 text-fg-secondary text-pretty">
                        {{ $post['excerpt'] }}
                    </neura::text>
                    <span class="mt-5 inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                        {{ __('Read') }}
                        <neura::icon name="arrow-right" class="size-3.5" />
                    </span>
                </article>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Comparison table — plan feature matrix for marketing pages.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Compare') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Choose the plan that fits the team') }}
            </neura::heading>
        </div>

        <div class="mt-12 overflow-x-auto rounded-2xl border border-dashed border-edge">
            <table class="w-full min-w-[40rem] text-left text-sm">
                <thead>
                    <tr class="border-b border-dashed border-edge bg-surface-inset/50">
                        <th class="px-5 py-4 font-medium text-fg-muted">{{ __('Feature') }}</th>
                        <th class="px-5 py-4 font-medium text-fg">{{ __('Starter') }}</th>
                        <th class="px-5 py-4 font-medium text-fg">{{ __('Studio') }}</th>
                        <th class="px-5 py-4 font-medium text-fg">{{ __('Enterprise') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-dashed divide-edge">
                    @foreach ([
                        [__('Projects'), '3', __('Unlimited'), __('Unlimited')],
                        [__('Team seats'), '1', '10', __('Custom')],
                        [__('Premium blocks'), '—', __('Yes'), __('Yes')],
                        [__('SSO'), '—', '—', __('Yes')],
                        [__('Priority support'), '—', __('Yes'), __('Dedicated')],
                        [__('Audit logs'), '—', '—', __('Yes')],
                    ] as $row)
                        <tr>
                            <td class="px-5 py-3.5 font-medium text-fg">{{ $row[0] }}</td>
                            <td class="px-5 py-3.5 text-fg-secondary">{{ $row[1] }}</td>
                            <td class="px-5 py-3.5 text-fg-secondary">{{ $row[2] }}</td>
                            <td class="px-5 py-3.5 text-fg-secondary">{{ $row[3] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </neura::container>
</section>

{{--
    Contact cards — three contact method cards for sales, support and press.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Contact') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('How can we help?') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Pick the channel that matches your request. We reply within one business day.') }}
            </neura::text>
        </div>

        <div class="mt-12 grid gap-4 md:grid-cols-3">
            @foreach ([
                [
                    'icon' => 'building-office-2',
                    'title' => __('General'),
                    'desc' => __('Partnerships, sponsorships and custom support.'),
                    'cta' => __('Talk to us'),
                    'meta' => 'hello@neuraui.dev',
                ],
                [
                    'icon' => 'lifebuoy',
                    'title' => __('Support'),
                    'desc' => __('Product help, bugs and documentation questions.'),
                    'cta' => __('Open a ticket'),
                    'meta' => 'support@neuraui.dev',
                ],
                [
                    'icon' => 'megaphone',
                    'title' => __('Press'),
                    'desc' => __('Brand assets, interviews and press kits.'),
                    'cta' => __('Contact press'),
                    'meta' => 'press@neuraui.dev',
                ],
            ] as $card)
                <div class="flex flex-col rounded-2xl border border-dashed border-edge p-6 sm:p-8">
                    <div
                        class="flex size-10 items-center justify-center rounded-xl border border-dashed border-edge bg-surface-inset/40">
                        <neura::icon :name="$card['icon']" class="size-5 text-fg" />
                    </div>
                    <neura::heading level="h3" size="lg" class="mt-5 tracking-tight">
                        {{ $card['title'] }}
                    </neura::heading>
                    <neura::text size="sm" class="mt-2 flex-1 text-fg-secondary text-pretty">
                        {{ $card['desc'] }}
                    </neura::text>
                    <neura::text size="xs" class="mt-4 font-mono text-fg-muted">{{ $card['meta'] }}</neura::text>
                    <neura::button href="#contact" variant="outline" class="mt-5 w-full" icon="arrow-right">
                        {{ $card['cta'] }}
                    </neura::button>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    CTA banner — full-width slim call-to-action with button.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <div
            class="flex flex-col items-start justify-between gap-4 rounded-2xl border border-dashed border-edge bg-surface-inset/40 px-6 py-5 sm:flex-row sm:items-center sm:px-8">
            <div class="min-w-0">
                <neura::heading level="h2" size="lg" class="tracking-tight">
                    {{ __('Ready to replace your UI patchwork?') }}
                </neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">
                    {{ __('Install the kit and paste your first block in under ten minutes.') }}
                </neura::text>
            </div>
            <neura::button href="#install" variant="primary" size="lg" icon="arrow-right" class="shrink-0">
                {{ __('Install Neura Kit') }}
            </neura::button>
        </div>
    </neura::container>
</section>

{{--
    Bordered call to action — closing section for marketing pages.
--}}
<section class="border-y border-dashed border-edge">
    <neura::container size="5xl" class="py-16 lg:py-20">
        <div
            class="relative overflow-hidden rounded-2xl border border-dashed border-edge px-6 py-14 text-center sm:px-10 lg:px-16">
            <div aria-hidden="true"
                class="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_70%)]">
                <div class="neura-dots !opacity-40 dark:!opacity-25"></div>
            </div>

            <neura::badge variant="soft" pill class="relative mx-auto w-fit">
                {{ __('Ready when you are') }}
            </neura::badge>

            <neura::heading level="h2" size="3xl" align="center"
                class="relative mx-auto mt-5 max-w-2xl tracking-tight text-balance">
                {{ __('Start with a section. Ship the whole product.') }}
            </neura::heading>

            <neura::text size="lg" align="center"
                class="relative mx-auto mt-4 max-w-xl text-fg-secondary text-pretty">
                {{ __('Paste this block into your Blade view, wire the CTAs, and keep building with Neura components.') }}
            </neura::text>

            <div class="relative mt-8 flex flex-wrap items-center justify-center gap-3">
                <neura::button href="#install" variant="primary" size="lg" icon="arrow-right">
                    {{ __('Install Neura Kit') }}
                </neura::button>
                <neura::button href="#docs" variant="soft" size="lg">
                    {{ __('Read the docs') }}
                </neura::button>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Split CTA — statement on the left, action panel on the right.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-20">
        <div class="grid overflow-hidden rounded-2xl border border-dashed border-edge lg:grid-cols-2">
            <div class="relative p-8 sm:p-10 lg:p-12">
                <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
                    <div class="neura-dots !opacity-30 dark:!opacity-20"></div>
                </div>
                <neura::badge variant="soft" pill class="w-fit">{{ __('Next step') }}</neura::badge>
                <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Ready to replace your UI patchwork?') }}
                </neura::heading>
                <neura::text size="sm" class="mt-4 max-w-md text-fg-secondary text-pretty">
                    {{ __('Install the kit, paste a block, and keep shipping with the same tokens your docs already use.') }}
                </neura::text>
            </div>

            <div class="flex flex-col justify-center gap-4 border-t border-dashed border-edge bg-surface-inset/40 p-8 sm:p-10 lg:border-t-0 lg:border-l lg:p-12">
                <neura::button href="#install" variant="primary" size="lg" icon="arrow-right" class="w-full sm:w-auto">
                    {{ __('Install Neura Kit') }}
                </neura::button>
                <neura::button href="#docs" variant="outline" size="lg" class="w-full sm:w-auto">
                    {{ __('Browse documentation') }}
                </neura::button>
                <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                    {{ __('MIT · Composer · npm') }}
                </neura::text>
            </div>
        </div>
    </neura::container>
</section>

{{--
    FAQ accordion — common questions for marketing / docs footers.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('FAQ') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Answers before you install') }}
            </neura::heading>
        </div>

        <neura::accordion class="mx-auto mt-12 max-w-2xl">
            @foreach ([
                [
                    'q' => __('Is Neura Kit free to use commercially?'),
                    'a' => __('Yes. The kit is MIT-licensed. Use it in client work and commercial products without attribution requirements beyond the licence notice.'),
                ],
                [
                    'q' => __('Do I need React or Vue?'),
                    'a' => __('No. Blocks and atoms are Blade + Alpine + Livewire. Bring your own stack only where you already use it.'),
                ],
                [
                    'q' => __('Can I restyle everything?'),
                    'a' => __('Tokens and packs are meant to be overridden. Paste a block, then change variants, colors and density without forking components.'),
                ],
                [
                    'q' => __('How do blocks differ from components?'),
                    'a' => __('Components are atoms and molecules. Blocks are full page sections composed from those components — ready to paste into a route.'),
                ],
            ] as $faq)
                <neura::accordion.item>
                    <neura::accordion.trigger>
                        {{ $faq['q'] }}
                    </neura::accordion.trigger>
                    <neura::accordion.content>
                        <neura::text size="sm" class="text-fg-secondary text-pretty">
                            {{ $faq['a'] }}
                        </neura::text>
                    </neura::accordion.content>
                </neura::accordion.item>
            @endforeach
        </neura::accordion>
    </neura::container>
</section>

{{--
    FAQ two-column — static Q&A pairs without accordion.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('FAQ') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Answers before you install') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Common questions from teams evaluating Neura Kit.') }}
            </neura::text>
        </div>

        <div class="mt-12 grid gap-x-10 gap-y-8 md:grid-cols-2">
            @foreach ([
                [
                    'q' => __('Is Neura Kit free to use commercially?'),
                    'a' => __('Yes. The kit is MIT-licensed. Use it in client work and commercial products without attribution requirements beyond the licence notice.'),
                ],
                [
                    'q' => __('Do I need React or Vue?'),
                    'a' => __('No. Blocks and atoms are Blade + Alpine + Livewire. Bring your own stack only where you already use it.'),
                ],
                [
                    'q' => __('Can I restyle everything?'),
                    'a' => __('Tokens and packs are meant to be overridden. Paste a block, then change variants, colors and density without forking components.'),
                ],
                [
                    'q' => __('How do blocks differ from components?'),
                    'a' => __('Components are atoms and molecules. Blocks are full page sections composed from those components — ready to paste into a route.'),
                ],
                [
                    'q' => __('Is dark mode supported?'),
                    'a' => __('Yes. Surface, inset and separator tokens stay coherent across themes without per-block overrides.'),
                ],
                [
                    'q' => __('Can I use this with Livewire?'),
                    'a' => __('Blocks are form-ready. Swap static actions for Livewire wire:submit and keep the same markup.'),
                ],
            ] as $faq)
                <div class="border-t border-dashed border-edge pt-6">
                    <neura::heading level="h3" size="md" class="tracking-tight">
                        {{ $faq['q'] }}
                    </neura::heading>
                    <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                        {{ $faq['a'] }}
                    </neura::text>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Features bento — asymmetric highlight layout for product storytelling.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="max-w-2xl">
            <neura::badge variant="soft" pill class="w-fit">{{ __('Workflow') }}</neura::badge>
            <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                {{ __('Built for the way teams actually ship UI') }}
            </neura::heading>
        </div>

        <div class="mt-12 grid gap-4 lg:grid-cols-12 lg:grid-rows-2">
            <div class="relative overflow-hidden rounded-2xl border border-dashed border-edge p-8 lg:col-span-7 lg:row-span-2">
                <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
                    <div class="neura-dots !opacity-30 dark:!opacity-20"></div>
                </div>
                <neura::heading level="h3" size="xl" class="tracking-tight">
                    {{ __('One kit. Marketing to back office.') }}
                </neura::heading>
                <neura::text size="sm" class="mt-3 max-w-md text-fg-secondary text-pretty">
                    {{ __('Keep public pages and signed-in surfaces on the same component language so handoffs stop looking like two products.') }}
                </neura::text>
                <div class="mt-8 grid gap-3 sm:grid-cols-2">
                    @foreach ([__('Tokenized chrome'), __('Livewire hooks'), __('Copy-ready Blade'), __('MIT licence')] as $item)
                        <div class="flex items-center gap-2 text-sm text-fg">
                            <neura::icon name="check" class="size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
                            {{ $item }}
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="rounded-2xl border border-dashed border-edge p-6 lg:col-span-5">
                <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                    {{ __('Docs') }}
                </neura::text>
                <neura::heading level="h3" size="lg" class="mt-2 tracking-tight">
                    {{ __('Examples that match production') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Every atom ships with live previews and props tables — no invented APIs.') }}
                </neura::text>
            </div>

            <div class="rounded-2xl border border-dashed border-edge p-6 lg:col-span-5">
                <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                    {{ __('Blocks') }}
                </neura::text>
                <neura::heading level="h3" size="lg" class="mt-2 tracking-tight">
                    {{ __('Sections you can own') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Copy the markup, keep the tokens, extend without fighting a theme layer.') }}
                </neura::text>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Features grid — three-column capability cards for marketing pages.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Platform') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Everything you need after the first install') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Composable primitives that stay consistent from marketing site to admin console.') }}
            </neura::text>
        </div>

        <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['icon' => 'cube', 'title' => __('Design tokens'), 'body' => __('Semantic surfaces, edges and type that switch cleanly with light and dark modes.')],
                ['icon' => 'puzzle-piece', 'title' => __('Atomic components'), 'body' => __('Buttons, fields, dialogs and tables share one packing system — override what you need.')],
                ['icon' => 'bolt', 'title' => __('Livewire ready'), 'body' => __('Wire models, toasts and modals without rebuilding the interaction layer.')],
                ['icon' => 'document-text', 'title' => __('Pasteable blocks'), 'body' => __('Full page sections you can drop into Blade and own forever.')],
                ['icon' => 'shield-check', 'title' => __('Accessible defaults'), 'body' => __('Focus rings, labels and keyboard paths baked into every control.')],
                ['icon' => 'swatch', 'title' => __('Theme packs'), 'body' => __('Rounded, shadow and density packs so product families stay coherent.')],
            ] as $feature)
                <div class="rounded-2xl border border-dashed border-edge p-6 transition-colors hover:bg-hover/40">
                    <neura::icon-stack :icon="$feature['icon']" size="sm" color="foreground" />
                    <neura::heading level="h3" size="md" class="mt-4 tracking-tight">
                        {{ $feature['title'] }}
                    </neura::heading>
                    <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                        {{ $feature['body'] }}
                    </neura::text>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Simple footer — brand, link columns and legal line.
--}}
<footer class="border-t border-dashed border-edge">
    <neura::container size="7xl" class="py-14 lg:py-16">
        <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-5">
            <div class="lg:col-span-2">
                <neura::brand href="#" name="Neura" align="left" />
                <neura::text size="sm" class="mt-4 max-w-xs text-fg-secondary text-pretty">
                    {{ __('Laravel UI that feels finished — components, blocks and docs on one token system.') }}
                </neura::text>
            </div>

            @foreach ([
                __('Product') => [__('Components'), __('Blocks'), __('Changelog')],
                __('Resources') => [__('Documentation'), __('Guides'), __('Support')],
                __('Company') => [__('About'), __('Careers'), __('Contact')],
            ] as $title => $links)
                <div>
                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ $title }}</neura::text>
                    <ul class="mt-4 space-y-2.5">
                        @foreach ($links as $link)
                            <li>
                                <a href="#" class="text-sm text-fg-secondary transition-colors hover:text-fg">{{ $link }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        <neura::separator class="my-10" />

        <div class="flex flex-wrap items-center justify-between gap-3">
            <neura::text size="xs" class="font-mono text-fg-muted">© {{ date('Y') }} Neura UI</neura::text>
            <div class="flex gap-4">
                <a href="#" class="text-xs text-fg-muted hover:text-fg">{{ __('Privacy') }}</a>
                <a href="#" class="text-xs text-fg-muted hover:text-fg">{{ __('Terms') }}</a>
            </div>
        </div>
    </neura::container>
</footer>

{{--
    Hero announcement — thin top bar plus centered hero statement.
--}}
<section class="relative overflow-hidden border-b border-dashed border-edge">
    <div class="border-b border-dashed border-edge bg-surface-inset/50">
        <neura::container size="7xl" class="py-2.5">
            <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center">
                <neura::badge variant="soft" color="primary" pill>{{ __('New') }}</neura::badge>
                <neura::text size="sm" class="text-fg-secondary">
                    {{ __('Native editor v2 is live — pagination, headers and Paperdoc export.') }}
                </neura::text>
                <a href="#changelog"
                    class="inline-flex items-center gap-1 text-sm font-medium text-fg underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded">
                    {{ __('Read the notes') }}
                    <neura::icon name="arrow-right" class="size-3.5" />
                </a>
            </div>
        </neura::container>
    </div>

    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
        <div class="neura-dots !opacity-40 dark:!opacity-25"></div>
    </div>

    <neura::container size="5xl" class="py-20 lg:py-28">
        <div class="mx-auto max-w-3xl text-center">
            <neura::heading level="h1" size="4xl" align="center" class="tracking-tight text-balance">
                {{ __('Ship interfaces your team can still own') }}
            </neura::heading>

            <neura::text size="lg" align="center" class="mx-auto mt-5 max-w-2xl text-fg-secondary text-pretty">
                {{ __('Paste production-ready Blade sections. Same tokens, same components, no locked-in themes.') }}
            </neura::text>

            <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
                <neura::button href="#docs" variant="primary" size="lg" icon="arrow-right">
                    {{ __('Get started') }}
                </neura::button>
                <neura::button href="#blocks" variant="outline" size="lg">
                    {{ __('Browse blocks') }}
                </neura::button>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Centered hero — full-bleed statement with dual CTAs.
--}}
<section class="relative overflow-hidden border-b border-dashed border-edge">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
        <div class="neura-dots !opacity-40 dark:!opacity-25"></div>
    </div>

    <neura::container size="5xl" class="py-20 lg:py-28">
        <div class="mx-auto max-w-3xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">
                {{ __('Laravel · Blade · Livewire') }}
            </neura::badge>

            <neura::heading level="h1" size="4xl" align="center" class="mt-6 tracking-tight text-balance">
                {{ __('Interface kits that respect your codebase') }}
            </neura::heading>

            <neura::text size="lg" align="center" class="mx-auto mt-5 max-w-2xl text-fg-secondary text-pretty">
                {{ __('Paste production-ready sections into your app. Same tokens, same components, zero locked-in themes.') }}
            </neura::text>

            <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
                <neura::button href="#docs" variant="primary" size="lg" icon="arrow-right">
                    {{ __('Browse documentation') }}
                </neura::button>
                <neura::button href="#blocks" variant="outline" size="lg">
                    {{ __('Explore blocks') }}
                </neura::button>
            </div>

            <neura::text size="xs" align="center" class="mt-8 font-mono uppercase tracking-[0.14em] text-fg-muted">
                {{ __('Trusted by product teams shipping weekly') }}
            </neura::text>
        </div>
    </neura::container>
</section>

{{--
    Hero with media — centered copy above a bordered product frame (ReUI-style).
--}}
<section class="relative overflow-hidden border-b border-dashed border-edge">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
        <div class="neura-dots !opacity-40 dark:!opacity-25"></div>
    </div>

    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-3xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Product') }}</neura::badge>
            <neura::heading level="h1" size="4xl" align="center" class="mt-5 tracking-tight text-balance">
                {{ __('See the product before you commit') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mx-auto mt-4 max-w-2xl text-fg-secondary text-pretty">
                {{ __('A clean opener that leads with the promise, then proves it with a framed interface preview.') }}
            </neura::text>
            <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
                <neura::button href="#start" variant="primary" size="lg" icon="arrow-right">{{ __('Start free') }}</neura::button>
                <neura::button href="#demo" variant="outline" size="lg">{{ __('Book a demo') }}</neura::button>
            </div>
        </div>

        <div class="mx-auto mt-14 max-w-5xl overflow-hidden rounded-2xl border border-dashed border-edge bg-surface shadow-sm">
            <div class="flex items-center gap-1.5 border-b border-dashed border-edge px-4 py-3">
                <span class="size-2.5 rounded-full bg-red-400/80"></span>
                <span class="size-2.5 rounded-full bg-yellow-400/80"></span>
                <span class="size-2.5 rounded-full bg-green-400/80"></span>
                <span class="ml-2 font-mono text-[11px] text-fg-muted">app.neuraui.dev</span>
            </div>
            <div class="grid gap-4 p-5 sm:grid-cols-3">
                @foreach ([
                    ['label' => __('Pipeline'), 'value' => '€186k'],
                    ['label' => __('Win rate'), 'value' => '34%'],
                    ['label' => __('Cycle'), 'value' => '18d'],
                ] as $stat)
                    <div class="rounded-xl border border-dashed border-edge p-4">
                        <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">{{ $stat['label'] }}</neura::text>
                        <neura::heading level="h2" size="xl" class="mt-2 tabular-nums tracking-tight">{{ $stat['value'] }}</neura::heading>
                    </div>
                @endforeach
            </div>
            <div class="border-t border-dashed border-edge bg-surface-inset/50 px-5 py-8">
                <div class="mx-auto flex h-28 max-w-3xl items-end gap-1.5">
                    @foreach ([35, 48, 42, 60, 55, 72, 68, 80, 74, 88, 82, 94] as $bar)
                        <span class="flex-1 rounded-sm bg-fg/20 dark:bg-fg/30" style="height: {{ $bar }}%"></span>
                    @endforeach
                </div>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Split hero — paste into any marketing page.
    Left: statement + CTAs. Right: bordered product panel.
--}}
<section class="relative overflow-hidden border-b border-dashed border-edge">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
        <div class="neura-dots !opacity-40 dark:!opacity-25"></div>
    </div>

    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="grid items-center gap-10 lg:grid-cols-12 lg:gap-14">
            <div class="lg:col-span-6">
                <neura::badge variant="soft" pill class="w-fit">
                    {{ __('New in v2') }}
                </neura::badge>

                <neura::heading level="h1" size="4xl" class="mt-5 max-w-xl tracking-tight text-balance">
                    {{ __('Ship Laravel UI that feels finished') }}
                </neura::heading>

                <neura::text size="lg" class="mt-4 max-w-lg text-fg-secondary text-pretty">
                    {{ __('Composable Blade sections built on Neura Kit — copy the markup, keep the tokens, own every layer.') }}
                </neura::text>

                <div class="mt-8 flex flex-wrap items-center gap-3">
                    <neura::button href="#get-started" variant="primary" size="lg" icon="arrow-right">
                        {{ __('Get started') }}
                    </neura::button>
                    <neura::button href="#preview" variant="soft" size="lg">
                        {{ __('See it live') }}
                    </neura::button>
                </div>
            </div>

            <div class="lg:col-span-6">
                <div
                    class="overflow-hidden rounded-2xl border border-dashed border-edge bg-surface shadow-sm dark:bg-surface-raised">
                    <div class="flex items-center gap-1.5 border-b border-dashed border-edge px-4 py-3">
                        <span class="size-2.5 rounded-full bg-red-400/80"></span>
                        <span class="size-2.5 rounded-full bg-yellow-400/80"></span>
                        <span class="size-2.5 rounded-full bg-green-400/80"></span>
                        <span class="ml-2 font-mono text-[11px] text-fg-muted">dashboard.blade.php</span>
                    </div>

                    <div class="space-y-4 p-5">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                                    {{ __('Revenue') }}
                                </neura::text>
                                <neura::heading level="h2" size="2xl" class="mt-1 tabular-nums tracking-tight">
                                    €48,290
                                </neura::heading>
                            </div>
                            <neura::badge variant="soft" color="success" pill>+12.4%</neura::badge>
                        </div>

                        <div class="grid grid-cols-3 gap-3">
                            @foreach ([
                                ['label' => __('Active'), 'value' => '1,284'],
                                ['label' => __('Trials'), 'value' => '326'],
                                ['label' => __('Churn'), 'value' => '2.1%'],
                            ] as $stat)
                                <div class="rounded-xl border border-dashed border-edge p-3">
                                    <neura::text size="xs" class="text-fg-muted">{{ $stat['label'] }}</neura::text>
                                    <neura::text size="sm" class="mt-1 font-semibold tabular-nums text-fg">
                                        {{ $stat['value'] }}
                                    </neura::text>
                                </div>
                            @endforeach
                        </div>

                        <div class="h-24 rounded-xl border border-dashed border-edge bg-surface-inset/60 p-3">
                            <div class="flex h-full items-end gap-1.5">
                                @foreach ([40, 55, 48, 70, 62, 78, 66, 88, 74, 92, 80, 96] as $bar)
                                    <span class="flex-1 rounded-sm bg-primary-500/70"
                                        style="height: {{ $bar }}%"></span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Integrations grid — eight partner / tool logos and names.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Integrations') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Works with the tools you already ship') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Connect auth, billing, analytics and docs without rewriting your stack.') }}
            </neura::text>
        </div>

        <ul class="mt-12 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
            @foreach ([
                ['name' => 'Stripe', 'desc' => __('Billing')],
                ['name' => 'GitHub', 'desc' => __('Source')],
                ['name' => 'Slack', 'desc' => __('Alerts')],
                ['name' => 'Linear', 'desc' => __('Issues')],
                ['name' => 'Vercel', 'desc' => __('Deploy')],
                ['name' => 'Sentry', 'desc' => __('Errors')],
                ['name' => 'Posthog', 'desc' => __('Analytics')],
                ['name' => 'Notion', 'desc' => __('Docs')],
            ] as $item)
                <li
                    class="flex items-center gap-3 rounded-2xl border border-dashed border-edge px-4 py-4 transition-colors hover:bg-hover/30">
                    <div
                        class="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dashed border-edge bg-surface-inset/40 font-mono text-xs font-semibold text-fg">
                        {{ strtoupper(substr($item['name'], 0, 2)) }}
                    </div>
                    <div class="min-w-0">
                        <neura::text size="sm" class="font-medium text-fg">{{ $item['name'] }}</neura::text>
                        <neura::text size="xs" class="text-fg-muted">{{ $item['desc'] }}</neura::text>
                    </div>
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>

{{--
    Logo cloud — partner / customer wordmark strip.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <neura::text size="xs" align="center" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
            {{ __('Used across product, growth and platform teams') }}
        </neura::text>

        <ul class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
            @foreach (['Northline', 'Orbit', 'Haven', 'Copper', 'Relay', 'Lumen'] as $brand)
                <li
                    class="flex h-16 items-center justify-center rounded-xl border border-dashed border-edge px-4 font-mono text-sm tracking-tight text-fg-secondary">
                    {{ $brand }}
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>

{{--
    Newsletter bar — compact email capture for footers and blog indexes.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div
            class="flex flex-col gap-6 rounded-2xl border border-dashed border-edge px-6 py-8 sm:px-8 lg:flex-row lg:items-center lg:justify-between lg:px-10">
            <div class="max-w-lg">
                <neura::heading level="h2" size="xl" class="tracking-tight">
                    {{ __('Product notes, once a month') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                    {{ __('Release notes, block drops and migration tips — no growth hacks.') }}
                </neura::text>
            </div>

            <form class="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-start" action="#" method="POST"
                onsubmit="return false;">
                <neura::field class="flex-1">
                    <neura::label for="newsletter-email" class="sr-only">{{ __('Email') }}</neura::label>
                    <neura::input id="newsletter-email" type="email" name="email" autocomplete="email"
                        placeholder="you@company.com" />
                </neura::field>
                <neura::button type="submit" variant="primary" size="lg" class="sm:shrink-0">
                    {{ __('Subscribe') }}
                </neura::button>
            </form>
        </div>
    </neura::container>
</section>

{{--
    Pricing three — simple plan comparison for SaaS landing pages.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Pricing') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Straightforward plans for growing teams') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Start free, upgrade when the product is earning its keep.') }}
            </neura::text>
        </div>

        <div class="mt-12 grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'name' => __('Starter'),
                    'price' => '€0',
                    'period' => __('forever'),
                    'desc' => __('For side projects and prototypes.'),
                    'cta' => __('Start free'),
                    'variant' => 'outline',
                    'featured' => false,
                    'features' => [__('Unlimited projects'), __('Community support'), __('Core components')],
                ],
                [
                    'name' => __('Studio'),
                    'price' => '€49',
                    'period' => __('per month'),
                    'desc' => __('For product teams shipping weekly.'),
                    'cta' => __('Start trial'),
                    'variant' => 'primary',
                    'featured' => true,
                    'features' => [__('Everything in Starter'), __('Premium blocks'), __('Priority support'), __('Team seats')],
                ],
                [
                    'name' => __('Enterprise'),
                    'price' => __('Custom'),
                    'period' => __('annual'),
                    'desc' => __('For orgs with procurement and SSO.'),
                    'cta' => __('Talk to sales'),
                    'variant' => 'soft',
                    'featured' => false,
                    'features' => [__('SSO & audit logs'), __('Dedicated success'), __('Custom SLAs')],
                ],
            ] as $plan)
                <div @class([
                    'relative flex flex-col rounded-2xl border border-dashed p-6 sm:p-8',
                    'border-edge' => ! $plan['featured'],
                    'border-fg bg-surface-raised shadow-sm' => $plan['featured'],
                ])>
                    @if ($plan['featured'])
                        <neura::badge variant="soft" color="primary" pill class="absolute -top-3 left-6 w-fit">
                            {{ __('Most popular') }}
                        </neura::badge>
                    @endif

                    <neura::text size="sm" class="font-medium text-fg">{{ $plan['name'] }}</neura::text>
                    <div class="mt-4 flex items-baseline gap-2">
                        <span class="text-4xl font-semibold tracking-tight tabular-nums text-fg">{{ $plan['price'] }}</span>
                        <span class="text-sm text-fg-muted">{{ $plan['period'] }}</span>
                    </div>
                    <neura::text size="sm" class="mt-3 text-fg-secondary">{{ $plan['desc'] }}</neura::text>

                    <ul class="mt-6 flex-1 space-y-2.5">
                        @foreach ($plan['features'] as $feature)
                            <li class="flex items-start gap-2 text-sm text-fg-secondary">
                                <neura::icon name="check" class="mt-0.5 size-4 shrink-0 text-fg" />
                                {{ $feature }}
                            </li>
                        @endforeach
                    </ul>

                    <neura::button href="#pricing" :variant="$plan['variant']" class="mt-8 w-full" size="lg">
                        {{ $plan['cta'] }}
                    </neura::button>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Pricing toggle — monthly / yearly switch (yearly selected) with three plans.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Pricing') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Plans that scale with your product') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('Save two months when you bill yearly.') }}
            </neura::text>

            <div class="mx-auto mt-8 inline-flex items-center gap-1 rounded-full border border-dashed border-edge p-1">
                <button type="button"
                    class="rounded-full px-4 py-1.5 text-sm text-fg-secondary transition-colors hover:text-fg">
                    {{ __('Monthly') }}
                </button>
                <button type="button"
                    class="rounded-full bg-fg px-4 py-1.5 text-sm font-medium text-bg shadow-sm">
                    {{ __('Yearly') }}
                    <span class="ml-1.5 font-mono text-[10px] uppercase tracking-wider text-bg/70">−17%</span>
                </button>
            </div>
        </div>

        <div class="mt-12 grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'name' => __('Starter'),
                    'price' => '€0',
                    'period' => __('forever'),
                    'desc' => __('For side projects and prototypes.'),
                    'cta' => __('Start free'),
                    'variant' => 'outline',
                    'featured' => false,
                    'features' => [__('Unlimited projects'), __('Community support'), __('Core components')],
                ],
                [
                    'name' => __('Studio'),
                    'price' => '€490',
                    'period' => __('per year'),
                    'desc' => __('For product teams shipping weekly.'),
                    'cta' => __('Start trial'),
                    'variant' => 'primary',
                    'featured' => true,
                    'features' => [__('Everything in Starter'), __('Premium blocks'), __('Priority support'), __('Team seats')],
                ],
                [
                    'name' => __('Enterprise'),
                    'price' => __('Custom'),
                    'period' => __('annual'),
                    'desc' => __('For orgs with procurement and SSO.'),
                    'cta' => __('Talk to sales'),
                    'variant' => 'soft',
                    'featured' => false,
                    'features' => [__('SSO & audit logs'), __('Dedicated success'), __('Custom SLAs')],
                ],
            ] as $plan)
                <div @class([
                    'relative flex flex-col rounded-2xl border border-dashed p-6 sm:p-8',
                    'border-edge' => ! $plan['featured'],
                    'border-fg bg-surface-raised shadow-sm' => $plan['featured'],
                ])>
                    @if ($plan['featured'])
                        <neura::badge variant="soft" color="primary" pill class="absolute -top-3 left-6 w-fit">
                            {{ __('Most popular') }}
                        </neura::badge>
                    @endif

                    <neura::text size="sm" class="font-medium text-fg">{{ $plan['name'] }}</neura::text>
                    <div class="mt-4 flex items-baseline gap-2">
                        <span class="text-4xl font-semibold tracking-tight tabular-nums text-fg">{{ $plan['price'] }}</span>
                        <span class="text-sm text-fg-muted">{{ $plan['period'] }}</span>
                    </div>
                    <neura::text size="sm" class="mt-3 text-fg-secondary">{{ $plan['desc'] }}</neura::text>

                    <ul class="mt-6 flex-1 space-y-2.5">
                        @foreach ($plan['features'] as $feature)
                            <li class="flex items-start gap-2 text-sm text-fg-secondary">
                                <neura::icon name="check" class="mt-0.5 size-4 shrink-0 text-fg" />
                                {{ $feature }}
                            </li>
                        @endforeach
                    </ul>

                    <neura::button href="#pricing" :variant="$plan['variant']" class="mt-8 w-full" size="lg">
                        {{ $plan['cta'] }}
                    </neura::button>
                </div>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Social proof bar — rating, count and avatar stack.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-12">
        <div class="flex flex-col items-center justify-between gap-6 rounded-2xl border border-dashed border-edge px-6 py-6 sm:flex-row sm:px-8">
            <div class="flex items-center gap-4">
                <div class="flex -space-x-2">
                    @foreach (['Amira B', 'Jonas K', 'Sofia R', 'Chris L', 'Lina O'] as $name)
                        <neura::avatar :name="$name" color="auto" size="sm" class="ring-2 ring-surface" />
                    @endforeach
                </div>
                <div>
                    <neura::text size="sm" class="font-medium text-fg">{{ __('Loved by 2,400+ builders') }}</neura::text>
                    <neura::text size="xs" class="text-fg-muted">{{ __('Across product, design and engineering') }}</neura::text>
                </div>
            </div>

            <div class="flex items-center gap-6">
                <div class="text-center sm:text-left">
                    <div class="flex items-center justify-center gap-1 sm:justify-start">
                        @for ($i = 0; $i < 5; $i++)
                            <neura::icon name="star" class="size-4 text-amber-500" />
                        @endfor
                    </div>
                    <neura::text size="xs" class="mt-1 font-mono text-fg-muted">4.9 / 5 · {{ __('G2') }}</neura::text>
                </div>
                <neura::separator vertical class="hidden h-10 sm:block" />
                <div class="text-center sm:text-left">
                    <neura::text size="lg" class="font-semibold tabular-nums text-fg">98%</neura::text>
                    <neura::text size="xs" class="font-mono text-fg-muted">{{ __('Would recommend') }}</neura::text>
                </div>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Team section — four-person grid with avatar, name and role.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Team') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('People behind the kit') }}
            </neura::heading>
            <neura::text size="lg" align="center" class="mt-4 text-fg-secondary text-pretty">
                {{ __('A small product team shipping blocks, tokens and docs every week.') }}
            </neura::text>
        </div>

        <ul class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['name' => 'Amira Benali', 'role' => __('Product design')],
                ['name' => 'Jonas Keller', 'role' => __('Engineering')],
                ['name' => 'Sofia Reyes', 'role' => __('Developer experience')],
                ['name' => 'Chris Lee', 'role' => __('Documentation')],
            ] as $person)
                <li class="flex flex-col items-center rounded-2xl border border-dashed border-edge px-6 py-8 text-center">
                    <neura::avatar :name="$person['name']" color="auto" size="xl" />
                    <neura::text size="sm" class="mt-4 font-medium text-fg">{{ $person['name'] }}</neura::text>
                    <neura::text size="xs" class="mt-1 font-mono uppercase tracking-[0.14em] text-fg-muted">
                        {{ $person['role'] }}
                    </neura::text>
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>

{{--
    Testimonials row — three social-proof quotes with avatars.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="max-w-2xl">
            <neura::badge variant="soft" pill class="w-fit">{{ __('Customers') }}</neura::badge>
            <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                {{ __('Teams that stopped reinventing their UI') }}
            </neura::heading>
        </div>

        <div class="mt-12 grid gap-4 lg:grid-cols-3">
            @foreach ([
                [
                    'quote' => __('We replaced three inconsistent design systems with one Blade kit. Reviews got quieter overnight.'),
                    'name' => 'Amira Benali',
                    'role' => __('Head of Product · Northline'),
                ],
                [
                    'quote' => __('The blocks are honest. You paste them, wire Livewire, and they still look like your product.'),
                    'name' => 'Jonas Keller',
                    'role' => __('Staff Engineer · Orbit'),
                ],
                [
                    'quote' => __('Docs and components finally speak the same language. Onboarding new frontend folks is half the time.'),
                    'name' => 'Sofia Reyes',
                    'role' => __('Design Systems · Haven'),
                ],
            ] as $item)
                <figure class="flex flex-col rounded-2xl border border-dashed border-edge p-6">
                    <blockquote class="flex-1 text-sm leading-relaxed text-fg text-pretty">
                        “{{ $item['quote'] }}”
                    </blockquote>
                    <figcaption class="mt-6 flex items-center gap-3 border-t border-dashed border-edge pt-5">
                        <neura::avatar :name="$item['name']" color="auto" size="sm" />
                        <div>
                            <neura::text size="sm" class="font-medium text-fg">{{ $item['name'] }}</neura::text>
                            <neura::text size="xs" class="text-fg-muted">{{ $item['role'] }}</neura::text>
                        </div>
                    </figcaption>
                </figure>
            @endforeach
        </div>
    </neura::container>
</section>