Neura UI

{{--
    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>

{{--
    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>