Simple Header code

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Basic landing header. The plainest option: a centred, single-column hero
    | on a solid surface with no decoration. A dependable default for product
    | pages that want the copy to carry the section.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-basic-field relative flex min-h-[80vh] items-center bg-white text-gray-900 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="mx-auto w-full max-w-3xl px-6 py-24 text-center sm:px-8">
        @if ($eyebrow)
            <p class="text-sm font-semibold uppercase tracking-[0.18em] text-brand-600 dark:text-brand-400">{{ $eyebrow }}</p>
        @endif

        @if ($title)
            <{{ $as }} class="mt-5 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
        @endif

        @if ($description)
            <p class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600 text-pretty dark:text-gray-400">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">{{ $actions }}</div>
        @endisset
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Bold landing header. High-impact: a deep brand field, oversized tight
    | display type and a solid colour block accent. Built for launch pages that
    | want the headline to dominate the viewport.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-bold-field relative isolate flex min-h-[92vh] items-center overflow-hidden bg-brand-950 text-white']) }}
>
    <div class="pointer-events-none absolute -left-24 top-0 -z-10 h-full w-[60vw] -skew-x-12 bg-brand-900/60" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -right-32 bottom-[-6rem] -z-10 h-[32rem] w-[32rem] rounded-full bg-accent-500/25 blur-3xl" aria-hidden="true"></div>

    <div class="mx-auto w-full max-w-6xl px-6 py-24 sm:px-8 lg:px-10">
        @if ($eyebrow)
            <p class="flex items-center gap-3 text-sm font-bold uppercase tracking-[0.2em] text-accent-300">
                <span class="h-3 w-3 bg-accent-400" aria-hidden="true"></span>
                {{ $eyebrow }}
            </p>
        @endif

        @if ($title)
            <{{ $as }} class="mt-6 max-w-4xl text-5xl font-bold leading-[0.95] tracking-tighter text-balance sm:text-7xl lg:text-8xl">{{ $title }}</{{ $as }}>
        @endif

        @if ($description)
            <p class="mt-7 max-w-2xl text-lg leading-8 text-brand-100/80 text-pretty sm:text-xl">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-10 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
        @endisset
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Clean landing header. Airy and editorial: a narrow centred column framed
    | by hairline rules, a dotted eyebrow and a muted palette with plenty of
    | whitespace. Restrained typography does the work.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-clean-field relative flex min-h-[84vh] items-center bg-white text-gray-900 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="mx-auto w-full max-w-3xl px-6 py-28 text-center sm:px-8">
        <div class="border-y border-gray-200 py-14 dark:border-gray-800">
            @if ($eyebrow)
                <p class="flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-[0.28em] text-gray-500 dark:text-gray-400">
                    <span class="h-1.5 w-1.5 rounded-full bg-brand-500" aria-hidden="true"></span>
                    {{ $eyebrow }}
                </p>
            @endif

            @if ($title)
                <{{ $as }} class="mt-6 text-4xl font-medium leading-tight tracking-tight text-balance sm:text-5xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-500 text-pretty dark:text-gray-400">{{ $description }}</p>
            @endif

            @isset($actions)
                <div class="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset
        </div>
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Marginalia landing header. Set like the opening page of an annotated
    | manuscript: a ruled margin column carries small numbered notes while the
    | main text block opens with an oversized drop cap. The description carries
    | superscript markers that correspond to the notes. Entirely typographic —
    | rules, counters and one initial letter, no imagery or decoration blur.
    */
    $notes = [
        ['1', 'Set close to the fold so the opening line is never missed.'],
        ['2', 'Margin notes carry secondary detail without crowding the measure.'],
        ['3', 'The rule under the folio doubles as a reading anchor.'],
    ];

    $initial = $description ? mb_substr($description, 0, 1) : null;
    $rest = $description ? mb_substr($description, 1) : null;
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-marginalia-field relative flex min-h-[86vh] items-center bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="mx-auto w-full max-w-6xl px-6 py-24 sm:px-8 lg:px-10">
        {{-- Folio line: running head and page mark, ruled off like a book page. --}}
        <div class="flex items-baseline justify-between border-b-2 border-gray-900 pb-3 dark:border-white">
            <p class="text-xs font-semibold uppercase tracking-[0.3em]">{{ $eyebrow ?? 'folio' }}</p>
            <p class="font-mono text-xs tabular-nums text-gray-500 dark:text-gray-400">fol. 01 r</p>
        </div>

        <div class="mt-12 grid gap-10 lg:grid-cols-[11rem_1fr] lg:gap-16">
            {{-- Margin column: numbered notes hanging in the gutter. --}}
            <aside class="order-last space-y-6 border-t border-gray-300 pt-6 dark:border-gray-700 lg:order-first lg:border-r lg:border-t-0 lg:pr-6 lg:pt-1" aria-label="Margin notes">
                @foreach ($notes as [$number, $note])
                    <p class="text-xs leading-5 text-gray-500 dark:text-gray-400">
                        <sup class="mr-1 font-mono font-semibold text-brand-600 dark:text-brand-400">{{ $number }}</sup>{{ $note }}
                    </p>
                @endforeach
            </aside>

            <div class="max-w-2xl">
                @if ($title)
                    <{{ $as }} class="text-4xl font-semibold leading-[1.08] tracking-tight text-balance sm:text-5xl">{{ $title }}<sup class="ml-2 align-super font-mono text-base font-semibold text-brand-600 dark:text-brand-400" aria-hidden="true">1</sup></{{ $as }}>
                @endif

                @if ($description)
                    <p class="mt-8 text-lg leading-8 text-gray-600 text-pretty dark:text-gray-300">
                        <span class="float-left mr-3 mt-1 border-2 border-gray-900 px-3 py-1 text-5xl font-bold leading-none text-gray-900 dark:border-white dark:text-white" aria-hidden="true">{{ $initial }}</span><span class="sr-only">{{ $initial }}</span>{{ $rest }}<sup class="ml-1 font-mono text-xs font-semibold text-brand-600 dark:text-brand-400" aria-hidden="true">2</sup>
                    </p>
                @endif

                @isset($actions)
                    <div class="mt-10 flex flex-col gap-3 clear-left sm:flex-row">{{ $actions }}</div>
                @endisset

                <p class="mt-12 border-t border-gray-300 pt-3 font-mono text-xs text-gray-400 dark:border-gray-700 dark:text-gray-500">
                    <sup class="mr-1 font-semibold text-brand-600 dark:text-brand-400" aria-hidden="true">3</sup>set in a single measure &mdash; no imagery, no ornament
                </p>
            </div>
        </div>
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Modern landing header. A split two-column hero: copy on the left, a soft
    | brand-gradient panel on the right, lifted by a single radial glow.
    | Contemporary without leaning on imagery.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-modern-field relative isolate flex min-h-[88vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="pointer-events-none absolute -top-32 right-0 -z-10 h-[28rem] w-[28rem] rounded-full bg-brand-500/20 blur-3xl dark:bg-brand-500/15" aria-hidden="true"></div>

    <div class="mx-auto grid w-full max-w-7xl items-center gap-12 px-6 py-24 sm:px-8 lg:grid-cols-2 lg:gap-16 lg:px-10">
        <div>
            @if ($eyebrow)
                <span class="inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-brand-700 dark:border-brand-800 dark:bg-brand-950/50 dark:text-brand-300">{{ $eyebrow }}</span>
            @endif

            @if ($title)
                <{{ $as }} class="mt-6 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mt-6 max-w-xl text-lg leading-8 text-gray-600 text-pretty dark:text-gray-400">{{ $description }}</p>
            @endif

            @isset($actions)
                <div class="mt-9 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset
        </div>

        <div class="relative">
            <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-500 via-brand-600 to-accent-600 p-px shadow-2xl shadow-brand-600/20">
                <div class="rounded-[calc(1.5rem-1px)] bg-white/85 p-8 backdrop-blur dark:bg-gray-950/85">
                    <div class="flex items-center gap-2" aria-hidden="true">
                        <span class="h-2.5 w-2.5 rounded-full bg-red-400"></span>
                        <span class="h-2.5 w-2.5 rounded-full bg-amber-400"></span>
                        <span class="h-2.5 w-2.5 rounded-full bg-green-400"></span>
                    </div>
                    <div class="mt-6 space-y-3" aria-hidden="true">
                        <div class="h-3 w-3/4 rounded-full bg-gray-200 dark:bg-gray-800"></div>
                        <div class="h-3 w-full rounded-full bg-gray-200 dark:bg-gray-800"></div>
                        <div class="h-3 w-5/6 rounded-full bg-gray-200 dark:bg-gray-800"></div>
                    </div>
                    <div class="mt-6 grid grid-cols-3 gap-3" aria-hidden="true">
                        <div class="h-16 rounded-xl bg-brand-100 dark:bg-brand-950/60"></div>
                        <div class="h-16 rounded-xl bg-accent-100 dark:bg-accent-950/60"></div>
                        <div class="h-16 rounded-xl bg-gray-100 dark:bg-gray-800"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Plain depth landing header. An image-free take on the layered pointer
    | treatment: a matte field, measured planes and floating panels that move
    | at separate speeds to keep the section feeling dimensional.
    */
    $panels = [
        [
            'class' => 'left-6 top-20',
            'title' => 'Foreground layer',
            'copy' => 'Moves ahead of the field',
            'x' => 76,
            'y' => 46,
            'rotate' => 5,
            'surface' => 'bg-white/85 dark:bg-white/[0.09]',
        ],
        [
            'class' => 'right-8 top-28',
            'title' => 'Far plane',
            'copy' => 'Slides with a softer offset',
            'x' => -38,
            'y' => -24,
            'rotate' => -4,
            'surface' => 'bg-gray-50/85 dark:bg-gray-900/70',
        ],
        [
            'class' => 'left-16 bottom-28',
            'title' => 'Near plane',
            'copy' => 'Pulls wide for depth',
            'x' => 104,
            'y' => -62,
            'rotate' => -8,
            'surface' => 'bg-brand-50/90 dark:bg-brand-950/45',
        ],
        [
            'class' => 'right-12 bottom-24',
            'title' => 'Depth panel',
            'copy' => 'Opposite drift adds separation',
            'x' => -112,
            'y' => -72,
            'rotate' => 8,
            'surface' => 'bg-white/80 dark:bg-gray-900/80',
        ],
        [
            'class' => 'left-1/2 top-1/2 -translate-x-1/2',
            'title' => 'Mid layer',
            'copy' => 'Keeps the center subtly active',
            'x' => 50,
            'y' => -44,
            'rotate' => 4,
            'surface' => 'bg-accent-50/85 dark:bg-white/[0.08]',
        ],
    ];
@endphp

<section
    x-data="{
        px: 0,
        py: 0,
        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
        move($event) {
            if (this.reduced) {
                return;
            }

            const rect = $el.getBoundingClientRect();
            this.px = (($event.clientX - rect.left) / rect.width) - 0.5;
            this.py = (($event.clientY - rect.top) / rect.height) - 0.5;
        },
        reset() {
            this.px = 0;
            this.py = 0;
        },
    }"
    @mousemove="move($event)"
    @mouseleave="reset()"
    {{ $attributes->merge(['class' => 'simple-plain-depth-field relative isolate flex min-h-[92vh] items-center overflow-hidden bg-gray-100 text-gray-950 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="absolute inset-0 -z-20 bg-gray-100 dark:bg-gray-950" aria-hidden="true"></div>
    @foreach ($panels as $panel)
        <div
            class="pointer-events-none absolute {{ $panel['class'] }} hidden min-w-44 rounded-xl border border-gray-950/10 {{ $panel['surface'] }} px-5 py-4 text-sm text-gray-950 shadow-sm backdrop-blur will-change-transform dark:border-white/15 dark:text-white md:block"
            :style="reduced ? '' : 'transform: translate3d(' + (px * {{ $panel['x'] }}) + 'px, ' + (py * {{ $panel['y'] }}) + 'px, 0) rotate(' + (px * {{ $panel['rotate'] }}) + 'deg);'"
            aria-hidden="true"
        >
            <p class="font-semibold">{{ $panel['title'] }}</p>
            <p class="mt-1 text-gray-600 dark:text-white/65">{{ $panel['copy'] }}</p>
        </div>
    @endforeach

    <div class="mx-auto flex w-full max-w-7xl items-center px-6 py-24 sm:px-8 lg:px-10">
        <div
            class="max-w-3xl will-change-transform motion-reduce:transform-none"
            :style="reduced ? '' : `transform: perspective(900px) rotateX(${py * -8}deg) rotateY(${px * 10}deg) translate3d(${px * 24}px, ${py * 18}px, 0);`"
        >
            @if ($eyebrow)
                <x-ui.badge variant="outline" icon="stack" class="bg-white/70 text-gray-800 ring-1 ring-gray-950/5 backdrop-blur dark:bg-white/[0.08] dark:text-white dark:ring-white/10">
                    {{ $eyebrow }}
                </x-ui.badge>
            @endif

            @if ($title)
                <{{ $as }} class="mt-5 text-4xl font-semibold text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mt-5 max-w-2xl text-base leading-7 text-gray-600 text-pretty dark:text-gray-300 sm:text-lg">{{ $description }}</p>
            @endif

            @isset($actions)
                <div class="mt-8 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset

            <div class="mt-10 grid gap-3 sm:grid-cols-2 md:hidden" aria-hidden="true">
                @foreach (array_slice($panels, 0, 4) as $panel)
                    <div class="rounded-xl border border-gray-950/10 {{ $panel['surface'] }} p-4 shadow-sm backdrop-blur dark:border-white/15">
                        <p class="text-sm font-semibold">{{ $panel['title'] }}</p>
                        <p class="mt-1 text-sm text-gray-600 dark:text-white/65">{{ $panel['copy'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Poster landing header. A hard vertical split: one solid field carries the
    | headline, the other holds the supporting copy. Classic poster composition
    | without pins, paper tones, rotated credits or uppercase shouting — just
    | two colours, one seam and measured type.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-poster-field relative isolate grid min-h-[92vh] overflow-hidden bg-white text-gray-950 lg:grid-cols-2 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="flex flex-col justify-end bg-gray-950 px-8 py-16 text-white sm:px-12 lg:px-14 lg:py-20 dark:bg-white dark:text-gray-950">
        @if ($eyebrow)
            <p class="font-mono text-xs uppercase tracking-[0.24em] text-white/60 dark:text-gray-950/55">{{ $eyebrow }}</p>
        @endif

        @if ($title)
            <{{ $as }} class="mt-6 max-w-lg text-4xl font-semibold leading-[1.02] tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
        @endif
    </div>

    <div class="flex flex-col justify-end border-t border-gray-950 px-8 py-16 sm:px-12 lg:border-t-0 lg:border-s lg:px-14 lg:py-20 dark:border-gray-700">
        @if ($description)
            <p class="max-w-md text-lg leading-8 text-gray-600 text-pretty dark:text-gray-400">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-10 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
        @endisset
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Simple landing header. Left-aligned, single column on a soft neutral
    | surface, with a short accent rule above the eyebrow. A touch more
    | structured than the basic variant while staying calm and unadorned.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-simple-field relative flex min-h-[80vh] items-center bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-white']) }}
>
    <div class="mx-auto w-full max-w-5xl px-6 py-24 sm:px-8">
        <span class="block h-1 w-12 rounded-full bg-brand-600 dark:bg-brand-400" aria-hidden="true"></span>

        @if ($eyebrow)
            <p class="mt-6 text-sm font-semibold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">{{ $eyebrow }}</p>
        @endif

        @if ($title)
            <{{ $as }} class="mt-4 max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
        @endif

        @if ($description)
            <p class="mt-6 max-w-2xl text-lg leading-8 text-gray-600 text-pretty dark:text-gray-400">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-9 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
        @endisset
    </div>
</section>

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Split landing header. The viewport divides into two solid fields at an
    | exact vertical seam and the headline runs straight across it, swapping
    | ink colour mid-stroke. The swap is two clipped copies of the same text —
    | no images, no blend modes, no JavaScript. Below the headline a single
    | bridge panel spans the seam so the actions sit on one honest surface.
    | On small screens the seam collapses to a single dark field.
    |
    | Deliberately monochrome (gray/white only): the runtime theme switcher
    | overrides brand/accent background utilities with high-specificity rules,
    | which would defeat the responsive colour swap this section depends on.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'simple-split-field relative isolate flex min-h-[88vh] items-center overflow-hidden bg-gray-950 text-white md:bg-white md:text-gray-950 dark:md:bg-gray-950 dark:md:text-white']) }}
>
    {{-- Right half: the opposing field. Inverts in dark mode so the seam keeps its contrast. --}}
    <div class="absolute inset-y-0 right-0 -z-10 hidden w-1/2 bg-gray-950 dark:bg-white md:block" aria-hidden="true"></div>

    {{-- Seam ticks: short fold marks where the two fields meet. --}}
    <div class="absolute left-1/2 top-10 hidden h-8 w-px -translate-x-1/2 bg-gray-950/25 dark:bg-white/30 md:block" aria-hidden="true"></div>
    <div class="absolute bottom-10 left-1/2 hidden h-8 w-px -translate-x-1/2 bg-white/35 dark:bg-gray-950/30 md:block" aria-hidden="true"></div>

    <div class="mx-auto w-full max-w-5xl px-6 py-24 text-center sm:px-8">
        <div class="relative">
            {{-- Left ink: clipped to the light half from md up, full-width on small screens. --}}
            <div class="md:[clip-path:inset(0_50%_0_0)]">
                @if ($eyebrow)
                    <p class="text-xs font-semibold uppercase tracking-[0.3em]">{{ $eyebrow }}</p>
                @endif

                @if ($title)
                    <{{ $as }} class="mt-6 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</{{ $as }}>
                @endif
            </div>

            {{-- Right ink: the same text clipped to the dark half. Presentational duplicate. --}}
            <div class="absolute inset-0 hidden text-white dark:text-gray-950 md:block md:[clip-path:inset(0_0_0_50%)]" aria-hidden="true">
                @if ($eyebrow)
                    <p class="text-xs font-semibold uppercase tracking-[0.3em]">{{ $eyebrow }}</p>
                @endif

                @if ($title)
                    <p class="mt-6 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">{{ $title }}</p>
                @endif
            </div>
        </div>

        @if ($description || isset($actions))
            {{-- Bridge panel: one solid surface deliberately laid across the seam. --}}
            <div class="mx-auto mt-12 max-w-xl rounded-2xl bg-white/95 p-6 text-left shadow-xl shadow-gray-950/10 ring-1 ring-gray-950/10 backdrop-blur dark:bg-gray-900/95 dark:shadow-black/30 dark:ring-white/10 sm:p-8">
                @if ($description)
                    <p class="text-base leading-7 text-gray-600 text-pretty dark:text-gray-300">{{ $description }}</p>
                @endif

                @isset($actions)
                    <div class="mt-6 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
                @endisset
            </div>
        @endif
    </div>
</section>