Content & marketing
Atmosphere Header code
Copy the implementation or inspect every file that belongs to this component unit.
resources/views/components/ui/atmosphere-header/aurora.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Aurora atmosphere header. Slow vertical colour curtains that drift and
| shimmer — kinetic sky bands, distinct from sheer veil planes.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-aurora-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-950 text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950 to-brand-950/40"></div>
<div class="atmosphere-aurora-curtain-a absolute inset-y-[-15%] left-[6%] w-[22%] -skew-x-12 bg-gradient-to-b from-brand-400 via-brand-500/70 to-transparent blur-2xl"></div>
<div class="atmosphere-aurora-curtain-b absolute inset-y-[-20%] left-[28%] w-[18%] -skew-x-12 bg-gradient-to-b from-accent-400 via-brand-400/60 to-transparent blur-2xl"></div>
<div class="atmosphere-aurora-curtain-c absolute inset-y-[-12%] left-[48%] w-[24%] -skew-x-12 bg-gradient-to-b from-brand-300 via-accent-500/50 to-transparent blur-3xl"></div>
<div class="atmosphere-aurora-curtain-d absolute inset-y-[-18%] right-[8%] w-[20%] -skew-x-12 bg-gradient-to-b from-accent-300 via-brand-500/55 to-transparent blur-2xl"></div>
<div class="atmosphere-aurora-glow absolute inset-x-[15%] top-[18%] h-32 bg-gradient-to-r from-transparent via-brand-400 to-transparent blur-3xl"></div>
</div>
<div class="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-gray-950 via-gray-950/70 to-transparent"></div>
</div>
<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-300">{{ $eyebrow }}</p>
@endif
@if ($title)
<{{ $as }} class="mt-5 text-4xl font-semibold tracking-tight text-balance text-white 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-white/65 text-pretty">{{ $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>
resources/views/components/ui/atmosphere-header/beam.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Beam atmosphere header. Studio lighting as a soft conical wash from the
| upper corner — one clear light source instead of scattered fog.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-beam-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div
class="atmosphere-beam-pulse absolute -right-[18%] -top-[35%] h-[120%] w-[70%] origin-top-right blur-2xl"
style="background: conic-gradient(from 210deg at 70% 18%, transparent 0deg, color-mix(in srgb, var(--color-brand-400) calc(45% * var(--atmosphere-intensity, 1)), transparent) 38deg, color-mix(in srgb, var(--color-accent-400) calc(28% * var(--atmosphere-intensity, 1)), transparent) 72deg, transparent 118deg);"
></div>
<div class="atmosphere-beam-corner absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-brand-500"></div>
<div class="atmosphere-beam-mark-y absolute left-[8%] top-[18%] h-24 w-px bg-gradient-to-b from-brand-500 via-brand-500 to-transparent"></div>
<div class="atmosphere-beam-mark-x absolute left-[8%] top-[18%] h-px w-16 bg-gradient-to-r from-brand-500 to-transparent"></div>
</div>
</div>
<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>
resources/views/components/ui/atmosphere-header/fog.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Fog atmosphere header. Soft, heavily blurred brand orbs — the fuzzy
| clouds treatment from the landing hero. Theme tokens keep the wash
| aligned with the active palette. `intensity` (0.5–2.5, default 1)
| scales wash strength; 1 preserves the light look.
| `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1)
| tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
$clip = 'polygon(74% 44%, 100% 61%, 97% 26%, 85% 0, 80% 2%, 72% 32%, 60% 62%, 52% 68%, 47% 58%, 45% 34%, 27% 76%, 0 64%, 17% 100%, 27% 76%, 76% 97%, 74% 44%)';
@endphp
<section
{{ $attributes->class('atmosphere-fog-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="atmosphere-intensity-wash pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-fog-drift absolute -top-40 left-[8%] h-[28rem] w-[42rem] -translate-x-1/2 transform-gpu blur-3xl">
<div class="h-full w-full bg-gradient-to-tr from-brand-400 to-brand-600" style="clip-path: {{ $clip }}"></div>
</div>
<div class="atmosphere-fog-drift-alt absolute -right-16 top-8 h-[22rem] w-[34rem] transform-gpu blur-3xl">
<div class="h-full w-full rounded-full bg-gradient-to-bl from-accent-400/80 via-brand-500/50 to-transparent"></div>
</div>
<div class="atmosphere-fog-floor absolute bottom-0 left-1/2 h-48 w-[70%] -translate-x-1/2 bg-gradient-to-t from-brand-500 to-transparent blur-2xl"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/galaxy.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Galaxy atmosphere header. Deep field with nebula wash and twinkling
| stars — celestial depth instead of soft daylight fog.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
$stars = [
[8, 12, 1.5, 0], [18, 28, 1, 0.4], [26, 8, 2, 1.1], [34, 42, 1.2, 0.2],
[42, 16, 1, 1.8], [52, 34, 1.8, 0.7], [61, 22, 1.1, 1.4], [72, 11, 2.2, 0.3],
[78, 38, 1, 2.1], [88, 18, 1.4, 0.9], [14, 55, 1.2, 1.6], [22, 68, 1, 0.5],
[38, 62, 1.6, 2.4], [48, 74, 1.1, 0.1], [58, 58, 2, 1.9], [68, 70, 1, 0.8],
[82, 64, 1.3, 1.2], [92, 48, 1.5, 2.0], [6, 40, 1, 1.5], [30, 50, 1.2, 0.6],
[44, 8, 1, 2.2], [56, 44, 1.4, 0.15], [74, 52, 1.1, 1.7], [96, 72, 1.6, 0.35],
[12, 82, 1, 2.3], [28, 88, 1.3, 1.0], [64, 86, 1.1, 0.55], [86, 84, 1.8, 1.3],
];
@endphp
<section
{{ $attributes->class('atmosphere-galaxy-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-950 text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950 to-brand-950/50"></div>
<div class="atmosphere-galaxy-nebula-a absolute -left-[10%] top-[8%] h-[28rem] w-[42rem] rounded-full bg-brand-500 blur-3xl"></div>
<div class="atmosphere-galaxy-nebula-b absolute -right-[8%] top-[28%] h-[24rem] w-[36rem] rounded-full bg-accent-500 blur-3xl"></div>
<div class="atmosphere-galaxy-dust absolute inset-0"></div>
<div class="atmosphere-galaxy-stars absolute inset-0">
@foreach ($stars as [$left, $top, $size, $delay])
<span
class="atmosphere-galaxy-star absolute rounded-full bg-white"
style="left: {{ $left }}%; top: {{ $top }}%; width: {{ $size }}px; height: {{ $size }}px; --star-delay: {{ $delay }}s;"
></span>
@endforeach
</div>
</div>
<div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-950 via-gray-950/60 to-transparent"></div>
</div>
<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-300">{{ $eyebrow }}</p>
@endif
@if ($title)
<{{ $as }} class="mt-5 text-4xl font-semibold tracking-tight text-balance text-white 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-white/65 text-pretty">{{ $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>
resources/views/components/ui/atmosphere-header/grain.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Grain atmosphere header. A quiet mist wash with film grain on top —
| tactile atmosphere without colourful orbs.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-grain-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-br from-brand-100/70 via-gray-50 to-accent-100/40 dark:from-brand-950/50 dark:via-gray-950 dark:to-accent-950/30"></div>
<div class="atmosphere-grain-orb absolute left-1/2 top-[-10%] h-[28rem] w-[36rem] -translate-x-1/2 rounded-full bg-brand-400 blur-3xl"></div>
<div class="atmosphere-grain-layer absolute inset-0 mix-blend-multiply dark:mix-blend-soft-light"></div>
</div>
<div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-gray-950 dark:via-gray-950/50"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/halo.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Halo atmosphere header. A soft radial bloom centred behind the copy —
| spotlight atmosphere without corner beams or scattered fog orbs.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-halo-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-brand-50/50 via-white to-white dark:from-brand-950/30 dark:via-gray-950 dark:to-gray-950"></div>
<div
class="atmosphere-halo-pulse absolute left-1/2 top-[38%] h-[34rem] w-[34rem] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
style="background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-400) calc(38% * var(--atmosphere-intensity, 1)), transparent) 0%, color-mix(in srgb, var(--color-accent-400) calc(16% * var(--atmosphere-intensity, 1)), transparent) 42%, transparent 72%);"
></div>
<div class="atmosphere-halo-ring absolute left-1/2 top-[38%] h-[22rem] w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-brand-400"></div>
</div>
<div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-white via-white/60 to-transparent dark:from-gray-950 dark:via-gray-950/50"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/horizon.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Horizon atmosphere header. A quiet sky wash over a soft dawn band that
| sits low in the frame — atmosphere without orbs or mesh blobs.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-horizon-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-brand-50 via-white to-accent-50/40 dark:from-brand-950/40 dark:via-gray-950 dark:to-accent-950/30"></div>
<div class="atmosphere-horizon-glow absolute inset-x-0 bottom-[18%] h-40 bg-gradient-to-r from-transparent via-brand-400 to-transparent blur-2xl"></div>
<div class="atmosphere-horizon-band absolute inset-x-0 bottom-0 h-[42%] bg-gradient-to-t from-brand-600 via-accent-500 to-transparent"></div>
<div class="atmosphere-horizon-rule absolute inset-x-[12%] bottom-[28%] h-px bg-gradient-to-r from-transparent via-brand-500 to-transparent"></div>
</div>
</div>
<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>
resources/views/components/ui/atmosphere-header/perspective.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Perspective atmosphere header. A vanishing-point floor grid angled into
| depth — spatial construction instead of soft fog orbs. Bold pulsing joins
| mark each intersection so the lattice reads as a connected network.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-perspective-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-white via-gray-50 to-brand-50/50 dark:from-gray-950 dark:via-gray-950 dark:to-brand-950/40"></div>
<div class="atmosphere-perspective-glow absolute inset-x-[10%] top-[28%] h-40 bg-gradient-to-r from-transparent via-brand-400 to-transparent blur-3xl"></div>
<div class="atmosphere-perspective-stage absolute inset-x-0 bottom-0 top-[36%] overflow-hidden [perspective:720px]">
<div class="atmosphere-perspective-plane absolute left-1/2 top-0 h-[180%] w-[240%] origin-top [transform:translateX(-50%)_rotateX(62deg)]">
<div class="atmosphere-perspective-grid absolute inset-0"></div>
<div class="atmosphere-perspective-joins absolute inset-0"></div>
</div>
</div>
<div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white via-white/70 to-transparent dark:from-gray-950 dark:via-gray-950/70"></div>
<div class="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-gray-50 to-transparent dark:from-gray-950"></div>
</div>
</div>
<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>
resources/views/components/ui/atmosphere-header/ripple.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Ripple atmosphere header. Soft concentric rings radiating from the
| centre — quiet water disturbed once — geometric without hard edges.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-ripple-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-white via-gray-50 to-brand-50/40 dark:from-gray-950 dark:via-gray-950 dark:to-brand-950/25"></div>
<div class="atmosphere-ripple-core absolute left-1/2 top-[42%] h-40 w-40 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-400 blur-2xl"></div>
<div class="atmosphere-ripple-ring absolute left-1/2 top-[42%] h-[18rem] w-[18rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-brand-400"></div>
<div class="atmosphere-ripple-ring-mid absolute left-1/2 top-[42%] h-[28rem] w-[28rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-accent-400"></div>
<div class="atmosphere-ripple-ring-outer absolute left-1/2 top-[42%] h-[40rem] w-[40rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-brand-500"></div>
</div>
<div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-50 via-gray-50/50 to-transparent dark:from-gray-950 dark:via-gray-950/50"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/sheen.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Sheen atmosphere header. A single diagonal specular sweep — polished
| glass catching light — instead of fog orbs or a corner studio beam.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-sheen-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-br from-white via-brand-50/40 to-accent-50/30 dark:from-gray-950 dark:via-brand-950/30 dark:to-accent-950/20"></div>
<div
class="atmosphere-sheen-sweep absolute -left-[20%] top-[-30%] h-[160%] w-[55%] rotate-[-28deg] blur-2xl"
style="background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-brand-300) calc(35% * var(--atmosphere-intensity, 1)), transparent) 38%, color-mix(in srgb, var(--color-accent-300) calc(22% * var(--atmosphere-intensity, 1)), transparent) 52%, transparent 78%);"
></div>
<div class="atmosphere-sheen-rule absolute inset-x-[18%] top-[22%] h-px bg-gradient-to-r from-transparent via-brand-500 to-transparent"></div>
</div>
<div class="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-white via-white/50 to-transparent dark:from-gray-950 dark:via-gray-950/40"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/tide.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Tide atmosphere header. Stacked soft elliptical washes that suggest
| depth and motion — layered fields rather than a single fog cloud.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-tide-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="atmosphere-tide-a absolute -left-[20%] top-[8%] h-[26rem] w-[70%] rounded-[100%] bg-brand-400 blur-3xl"></div>
<div class="atmosphere-tide-b absolute -right-[15%] top-[32%] h-[22rem] w-[58%] rounded-[100%] bg-accent-400 blur-3xl"></div>
<div class="atmosphere-tide-c absolute inset-x-[10%] bottom-[-12%] h-[20rem] rounded-[100%] bg-brand-500 blur-3xl"></div>
</div>
<div class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-50 to-transparent dark:from-gray-900/40"></div>
</div>
<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>
resources/views/components/ui/atmosphere-header/veil.blade.php
@props([
'eyebrow' => null,
'title' => null,
'description' => null,
'as' => 'h2',
'intensity' => 1,
'animate' => true,
'speed' => 1,
])
@php
/*
| Veil atmosphere header. Soft vertical translucent planes that read like
| sheer curtains — architectural depth instead of cloudy orbs.
| `intensity` (0.5–2.5, default 1) scales wash strength. `animate` (default true) enables slow wash motion; `speed` (0.5–2.5, default 1) tunes tempo.
*/
$intensity = max(0.5, min(2.5, round((float) $intensity, 2)));
$speed = max(0.5, min(2.5, round((float) $speed, 2)));
$animate = filter_var($animate, FILTER_VALIDATE_BOOLEAN);
@endphp
<section
{{ $attributes->class('atmosphere-veil-field relative isolate flex min-h-[76vh] items-center overflow-hidden bg-white text-gray-900 dark:bg-gray-950 dark:text-white')->merge([
'style' => "--atmosphere-intensity: {$intensity}; --atmosphere-speed: {$speed}",
'data-atmosphere-animate' => $animate ? 'true' : 'false',
]) }}
>
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
<div class="atmosphere-intensity-wash absolute inset-0">
<div class="absolute inset-0 bg-gradient-to-b from-gray-50 via-white to-brand-50/30 dark:from-gray-900/50 dark:via-gray-950 dark:to-brand-950/20"></div>
<div class="atmosphere-veil-a absolute inset-y-[-10%] left-[8%] w-[18%] -skew-x-6 bg-gradient-to-b from-brand-400 via-brand-500 to-transparent blur-2xl"></div>
<div class="atmosphere-veil-b absolute inset-y-[-8%] left-[38%] w-[16%] -skew-x-6 bg-gradient-to-b from-accent-400 via-brand-400 to-transparent blur-2xl"></div>
<div class="atmosphere-veil-c absolute inset-y-[-12%] right-[12%] w-[20%] -skew-x-6 bg-gradient-to-b from-brand-500 via-accent-400 to-transparent blur-2xl"></div>
</div>
<div class="absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-white to-transparent dark:from-gray-950"></div>
<div class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-white to-transparent dark:from-gray-950"></div>
</div>
<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>