Content & marketing
Landing Section code
Copy the implementation or inspect every file that belongs to this component unit.
resources/views/components/ui/landing-section/calendar-mockup.blade.php
@props([
'compact' => false,
'url' => 'app.harbour.dev/calendar',
])
@php
/*
| Lightweight calendar product mockup used as the default media for
| spotlight-hero and workflow-panel. Theme-aware surfaces with dark mode.
*/
$days = ['Mon 8', 'Tue 9', 'Wed 10', 'Thu 11', 'Fri 12'];
$events = [
['day' => 0, 'row' => 1, 'span' => 1, 'label' => 'Standup', 'tone' => 'bg-accent-100 text-accent-800 dark:bg-accent-950/70 dark:text-accent-200'],
['day' => 1, 'row' => 2, 'span' => 2, 'label' => 'Design review', 'tone' => 'bg-brand-100 text-brand-800 dark:bg-brand-950/70 dark:text-brand-200'],
['day' => 2, 'row' => 1, 'span' => 1, 'label' => 'Ship checklist', 'tone' => 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-200'],
['day' => 3, 'row' => 3, 'span' => 1, 'label' => '1:1 Maya', 'tone' => 'bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-200'],
['day' => 4, 'row' => 2, 'span' => 1, 'label' => 'Sprint planning', 'tone' => 'bg-accent-50 text-accent-900 ring-1 ring-accent-200 dark:bg-accent-950/50 dark:text-accent-100 dark:ring-accent-800'],
];
@endphp
<div {{ $attributes->merge(['class' => 'overflow-hidden rounded-2xl border border-white/40 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/40']) }}>
<div class="flex items-center gap-3 border-b border-gray-200 bg-gray-50 px-3 py-3 sm:px-4 dark:border-gray-800 dark:bg-gray-950/70">
<div class="flex items-center gap-1.5" aria-hidden="true">
<span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
<span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
<span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
</div>
<div class="mx-auto flex w-full max-w-xs items-center gap-2 rounded-md bg-white px-3 py-1 text-[11px] text-gray-400 ring-1 ring-gray-200 dark:bg-gray-900 dark:text-gray-500 dark:ring-gray-800">
<x-ui.icon name="lock-simple" weight="fill" size="xs" />
<span class="truncate">{{ $url }}</span>
</div>
</div>
<div @class([
'grid bg-white dark:bg-gray-900',
'grid-cols-1 sm:grid-cols-[10rem_1fr]' => ! $compact,
'grid-cols-1' => $compact,
])>
@unless ($compact)
<aside class="hidden border-b border-gray-200 bg-gray-50/70 p-4 sm:block sm:border-b-0 sm:border-e dark:border-gray-800 dark:bg-gray-950/50">
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-gray-400">Workspace</p>
<div class="mt-4 space-y-1">
@foreach (['Calendar' => true, 'Tasks' => false, 'Team' => false, 'Settings' => false] as $label => $active)
<div @class([
'flex items-center gap-2 rounded-lg px-2.5 py-2 text-sm',
'bg-white font-medium text-gray-950 shadow-sm ring-1 ring-gray-200 dark:bg-gray-900 dark:text-white dark:ring-gray-700' => $active,
'text-gray-500 dark:text-gray-400' => ! $active,
])>
<span @class(['h-1.5 w-1.5 rounded-full', 'bg-accent-600' => $active, 'bg-gray-300 dark:bg-gray-600' => ! $active])></span>
{{ $label }}
</div>
@endforeach
</div>
</aside>
@endunless
<div class="min-w-0 p-3 sm:p-5">
<div class="flex items-center justify-between gap-3">
<div>
<p class="text-xs font-medium text-gray-400">December 2026</p>
<p class="text-base font-semibold tracking-tight text-gray-950 sm:text-lg dark:text-white">This week</p>
</div>
<div class="hidden items-center gap-1 rounded-full bg-gray-100 p-1 text-xs font-medium text-gray-600 sm:inline-flex dark:bg-gray-800 dark:text-gray-300">
<span class="rounded-full bg-white px-2.5 py-1 shadow-sm dark:bg-gray-900 dark:text-white">Week</span>
<span class="px-2.5 py-1">Month</span>
</div>
</div>
<div class="mt-4 grid grid-cols-5 gap-1.5 sm:gap-2">
@foreach ($days as $day)
<div class="rounded-lg bg-gray-50 px-1 py-2 text-center sm:px-2 dark:bg-gray-800/70">
<p class="text-[10px] font-medium uppercase tracking-[0.12em] text-gray-400">{{ Str::before($day, ' ') }}</p>
<p class="mt-0.5 text-sm font-semibold text-gray-800 dark:text-gray-100">{{ Str::after($day, ' ') }}</p>
</div>
@endforeach
</div>
<div class="relative mt-3 grid min-h-[10rem] grid-cols-5 gap-1.5 sm:min-h-[13rem] sm:gap-2">
@foreach (range(0, 4) as $col)
<div class="rounded-lg bg-gray-50/80 ring-1 ring-inset ring-gray-100 dark:bg-gray-800/40 dark:ring-gray-800"></div>
@endforeach
@foreach ($events as $event)
<div
class="absolute rounded-lg px-1.5 py-1.5 text-[10px] font-semibold shadow-sm sm:px-2 sm:text-[11px] {{ $event['tone'] }}"
style="left: calc({{ $event['day'] }} * 20% + 0.2rem); width: calc({{ $event['span'] }} * 20% - 0.4rem); top: {{ 0.35 + (($event['row'] - 1) * 2.2) }}rem;"
>
{{ $event['label'] }}
</div>
@endforeach
</div>
</div>
</div>
</div>
resources/views/components/ui/landing-section/compat-cloud.blade.php
@props([
'title' => 'Compatible with your AI agent',
'items' => [],
])
@php
/*
| Compact logo / compatibility cloud. Pass `items` as
| [['name' => 'Claude', 'icon' => 'claude'], ...] — icons can be Phosphor
| or CustomIcons names. Omit icon for text-only marks.
|
| Usage:
| <x-ui.landing-section.compat-cloud title="Compatible with your AI agent" />
*/
$items = $items ?: [
['name' => 'Claude', 'icon' => 'claude'],
['name' => 'Codex', 'icon' => 'openai'],
['name' => 'Cursor', 'icon' => 'cursor'],
['name' => 'Windsurf', 'icon' => 'wind'],
['name' => 'VS Code', 'icon' => 'code'],
];
@endphp
<section
{{ $attributes->merge(['class' => 'landing-compat-cloud border-y border-gray-200 bg-white py-12 dark:border-gray-800 dark:bg-gray-950']) }}
>
<div class="mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
@if ($title)
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $title }}</p>
@endif
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
@foreach ($items as $item)
@php
$name = is_array($item) ? ($item['name'] ?? '') : (string) $item;
$icon = is_array($item) ? ($item['icon'] ?? null) : null;
@endphp
<div class="inline-flex items-center gap-2.5 text-gray-500 grayscale transition hover:text-gray-800 hover:grayscale-0 dark:text-gray-400 dark:hover:text-gray-100">
@if ($icon)
<x-ui.icon :name="$icon" size="xl" class="opacity-80" />
@endif
<span class="text-sm font-semibold tracking-tight">{{ $name }}</span>
</div>
@endforeach
</div>
</div>
</section>
resources/views/components/ui/landing-section/pill-nav.blade.php
@props([
'links' => [],
'cta' => 'Create Your Workspace',
'ctaHref' => '#',
])
@php
/*
| Centered product marketing nav with a pill CTA. Pass `links` as
| [label => href] or [label => [child => href]] for dropdowns. Use the
| `brand` slot for a mark and `actions` to replace the default CTA.
|
| Usage:
| <x-ui.landing-section.pill-nav :links="['Product' => '#']" cta="Create Your Workspace" />
*/
$links = $links ?: [
'Product' => [
'Overview' => '#overview',
'Calendar' => '#calendar',
'Tasks' => '#tasks',
],
'Solutions' => '#solutions',
'Resources' => [
'Guides' => '#guides',
'Blog' => '#blog',
],
'Pricing' => '#pricing',
'About' => '#about',
];
@endphp
<nav
x-data="{ open: false }"
{{ $attributes->merge(['class' => 'landing-pill-nav relative z-40 border-b border-gray-200/80 bg-white/90 backdrop-blur-lg dark:border-gray-800/80 dark:bg-gray-950/90']) }}
>
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
<div class="flex min-w-0 items-center gap-3">
@isset($brand)
{{ $brand }}
@else
<a href="{{ url('/') }}" class="inline-flex items-center gap-2" aria-label="{{ config('app.name') }}">
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-950 text-white dark:bg-white dark:text-gray-950">
<x-ui.icon name="hexagon" weight="fill" size="base" />
</span>
</a>
@endisset
</div>
<div class="hidden items-center gap-1 lg:flex">
@foreach ($links as $label => $link)
@php $isDropdown = is_array($link); @endphp
@if ($isDropdown)
<x-ui.dropdown align="left" width="48" variant="nav">
<x-slot:trigger>
<button type="button" class="inline-flex items-center gap-1 rounded-full px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-50 hover:text-gray-950 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white">
{{ $label }}
<x-ui.icon name="caret-down" size="sm" />
</button>
</x-slot:trigger>
@foreach ($link as $childLabel => $childHref)
<x-ui.dropdown.item :href="$childHref">{{ $childLabel }}</x-ui.dropdown.item>
@endforeach
</x-ui.dropdown>
@else
<a href="{{ $link }}" class="rounded-full px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-50 hover:text-gray-950 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white">{{ $label }}</a>
@endif
@endforeach
</div>
<div class="flex items-center gap-2">
@isset($actions)
{{ $actions }}
@else
<a
href="{{ $ctaHref }}"
class="hidden rounded-full bg-accent-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-accent-500 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 sm:inline-flex dark:focus:ring-offset-gray-950"
>
{{ $cta }}
</a>
@endisset
<button
type="button"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-700 transition hover:bg-gray-50 lg:hidden dark:border-gray-800 dark:text-gray-200 dark:hover:bg-gray-900"
@click="open = ! open"
:aria-expanded="open.toString()"
aria-controls="landing-pill-nav-mobile"
aria-label="Toggle navigation"
>
<x-ui.icon name="list" size="lg" x-show="! open" />
<x-ui.icon name="x" size="lg" x-show="open" x-cloak />
</button>
</div>
</div>
<div
id="landing-pill-nav-mobile"
x-show="open"
x-cloak
class="border-t border-gray-200 bg-white px-4 py-4 lg:hidden dark:border-gray-800 dark:bg-gray-950"
>
<div class="space-y-1">
@foreach ($links as $label => $link)
@if (is_array($link))
<p class="px-3 pt-2 text-xs font-semibold uppercase tracking-[0.14em] text-gray-400">{{ $label }}</p>
@foreach ($link as $childLabel => $childHref)
<a href="{{ $childHref }}" class="block rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-900">{{ $childLabel }}</a>
@endforeach
@else
<a href="{{ $link }}" class="block rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-900">{{ $label }}</a>
@endif
@endforeach
</div>
<a href="{{ $ctaHref }}" class="mt-4 inline-flex w-full items-center justify-center rounded-full bg-accent-600 px-4 py-2.5 text-sm font-semibold text-white">{{ $cta }}</a>
</div>
</nav>
resources/views/components/ui/landing-section/scenic-footer.blade.php
@props([
'brand' => null,
'brandIcon' => 'sun',
'tagline' => 'Helping teams collaborate, communicate, and achieve more together.',
'groups' => [],
'title' => 'Stay in the loop',
'description' => 'Get the latest updates, tips, and news delivered to your inbox.',
'action' => '#',
'method' => 'get',
'emailName' => 'email',
'image' => '/images/parallax-village-overlook.jpg',
'copyright' => null,
'legal' => [],
'as' => 'h2',
])
@php
/*
| Scenic marketing footer. A single subdued landscape gives the footer
| atmosphere while a disciplined grid keeps navigation and the newsletter
| easy to scan.
|
| Usage:
| <x-ui.landing-section.scenic-footer title="Stay in the loop" :groups="$groups" />
*/
$brand ??= config('app.name', 'Harbour');
$copyright ??= '© '.date('Y').' '.$brand.'. All rights reserved.';
$groups = $groups ?: [
'Product' => [
'Overview' => '#',
'Features' => '#',
'Pricing' => '#',
'Integrations' => '#',
"What's New" => '#',
],
'Company' => [
'About Us' => '#',
'Careers' => '#',
'Customers' => '#',
'Blog' => '#',
'Contact' => '#',
],
'Resources' => [
'Help Center' => '#',
'Guides' => '#',
'Templates' => '#',
'API Docs' => '#',
'Community' => '#',
],
'Legal' => [
'Privacy Policy' => '#',
'Terms of Service' => '#',
'Cookie Policy' => '#',
'Security' => '#',
],
];
$legal = $legal ?: [
'Privacy Policy' => '#',
'Terms of Service' => '#',
'Cookie Policy' => '#',
];
$svgId = 'scenic-'.Str::lower(Str::random(8));
@endphp
<footer
{{ $attributes->merge(['class' => 'landing-scenic-footer relative isolate overflow-hidden text-white']) }}
>
<div class="absolute inset-0 -z-20" aria-hidden="true">
<img
src="{{ $image }}"
alt=""
class="h-full w-full object-cover object-center brightness-[0.38] saturate-[0.55] dark:brightness-[0.28]"
>
<div class="absolute inset-0 bg-gray-950/78 dark:bg-gray-950/88"></div>
<div class="absolute inset-x-0 top-0 h-px bg-white/20"></div>
</div>
<div class="relative mx-auto max-w-7xl px-5 py-14 sm:px-8 sm:py-16 lg:px-10 lg:py-20">
<div class="grid gap-14 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.7fr)] lg:gap-20">
<div class="max-w-md">
<a href="{{ url('/') }}" class="inline-flex items-center gap-2.5" aria-label="{{ $brand }}">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-white text-gray-950 shadow-sm">
<x-ui.icon :name="$brandIcon" weight="fill" size="lg" />
</span>
<span class="text-2xl font-semibold tracking-tight [font-family:Newsreader,Georgia,ui-serif,serif]">{{ $brand }}</span>
</a>
<p class="mt-5 max-w-sm text-sm leading-7 text-white/70">{{ $tagline }}</p>
<div class="mt-6 inline-flex items-center gap-1">
@isset($social)
{{ $social }}
@else
<a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full text-white/70 transition hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/60" aria-label="X">
<x-ui.icon name="x-logo" size="base" />
</a>
<a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full text-white/70 transition hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/60" aria-label="LinkedIn">
<x-ui.icon name="linkedin-logo" size="base" />
</a>
<a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-full text-white/70 transition hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/60" aria-label="GitHub">
<x-ui.icon name="github-logo" size="base" />
</a>
@endisset
</div>
<div class="mt-12 border-t border-white/15 pt-7 sm:mt-14">
<{{ $as }} class="text-3xl font-semibold tracking-tight text-white text-balance [font-family:Newsreader,Georgia,ui-serif,serif]">
{{ $title }}
</{{ $as }}>
@if ($description)
<p class="mt-3 max-w-sm text-sm leading-7 text-white/65">{{ $description }}</p>
@endif
<form action="{{ $action }}" method="{{ $method }}" class="mt-6 flex max-w-md items-center border-b border-white/35 pb-2 transition focus-within:border-white">
@csrf
<label class="sr-only" for="{{ $svgId }}-email">Email</label>
<input
id="{{ $svgId }}-email"
type="email"
name="{{ $emailName }}"
required
autocomplete="email"
placeholder="Email address"
class="min-w-0 flex-1 border-0 bg-transparent py-2 text-sm text-white placeholder:text-white/45 focus:outline-none focus:ring-0"
>
<button
type="submit"
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-gray-950 transition hover:scale-105 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/60"
aria-label="Subscribe"
>
<x-ui.icon name="arrow-up-right" weight="bold" size="base" />
</button>
</form>
</div>
</div>
<nav class="grid grid-cols-2 content-start gap-x-8 gap-y-10 sm:grid-cols-4 sm:gap-x-10" aria-label="Footer navigation">
@foreach ($groups as $heading => $items)
<div>
<h3 class="text-sm font-semibold tracking-tight text-white [font-family:Newsreader,Georgia,ui-serif,serif]">{{ $heading }}</h3>
<ul class="mt-4 space-y-3">
@foreach ($items as $label => $href)
<li>
<a href="{{ $href }}" class="text-sm text-white/60 transition hover:text-white focus:outline-none focus:ring-2 focus:ring-white/60">{{ $label }}</a>
</li>
@endforeach
</ul>
</div>
@endforeach
</nav>
</div>
<div class="mt-14 flex flex-col gap-3 border-t border-white/15 pt-5 text-sm text-white/55 sm:flex-row sm:items-center sm:justify-between">
<p>{{ $copyright }}</p>
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
@foreach ($legal as $label => $href)
@if (! $loop->first)
<span class="text-white/25" aria-hidden="true">|</span>
@endif
<a href="{{ $href }}" class="transition hover:text-white focus:outline-none focus:ring-2 focus:ring-white/60">{{ $label }}</a>
@endforeach
</div>
</div>
</div>
</footer>
resources/views/components/ui/landing-section/split-login.blade.php
@props([
'title' => 'Welcome back',
'prompt' => "Don't have an account?",
'registerHref' => null,
'registerLabel' => 'Sign Up',
'action' => null,
'method' => 'post',
'emailName' => 'email',
'passwordName' => 'password',
'button' => 'Login',
'image' => '/images/parallax-moon-woods.jpg',
'as' => 'h1',
])
@php
/*
| Split-screen login. Serif welcome form + grainy photography. Uses gray
| tokens throughout; on smaller screens the photo becomes a top banner.
|
| Usage:
| <x-ui.landing-section.split-login :action="route('login')" :register-href="route('register')" />
*/
$registerHref ??= Route::has('register') ? route('register') : '#';
$action ??= Route::has('login') ? route('login') : '#';
@endphp
<section
{{ $attributes->merge(['class' => 'landing-split-login relative isolate grid min-h-screen overflow-hidden bg-white text-gray-950 lg:grid-cols-2 dark:bg-gray-950 dark:text-white']) }}
>
<div class="relative order-2 flex items-center justify-center px-5 py-12 sm:px-10 sm:py-16 lg:order-1 lg:px-16">
<div class="w-full max-w-md">
<div class="text-center">
<span class="mx-auto inline-flex h-8 w-8 items-center justify-center text-gray-950 dark:text-white" aria-hidden="true">
<x-ui.icon name="asterisk" weight="bold" size="xl" />
</span>
<{{ $as }} class="mt-4 text-4xl tracking-tight sm:text-5xl [font-family:Newsreader,Georgia,ui-serif,serif]">
{{ $title }}
</{{ $as }}>
<p class="mt-3 text-sm text-gray-950/60 dark:text-white/60">
{{ $prompt }}
<a href="{{ $registerHref }}" class="font-semibold text-gray-950 transition hover:underline dark:text-white">{{ $registerLabel }}</a>
</p>
</div>
<form action="{{ $action }}" method="{{ $method }}" class="mt-10 space-y-5">
@csrf
<div class="space-y-1.5">
<label for="split-login-email" class="block text-sm font-medium text-gray-950 dark:text-white">Email Address</label>
<input
id="split-login-email"
type="email"
name="{{ $emailName }}"
required
autocomplete="username"
placeholder="you@example.com"
class="block h-12 w-full rounded-md border border-transparent bg-gray-100 px-3.5 text-sm text-gray-950 placeholder:text-gray-950/40 focus:border-gray-950/20 focus:outline-none focus:ring-1 focus:ring-gray-950/20 dark:bg-gray-900 dark:text-white dark:placeholder:text-white/40 dark:focus:border-white/20 dark:focus:ring-white/20"
>
</div>
<div
class="space-y-1.5"
x-data="{ show: false }"
>
<label for="split-login-password" class="block text-sm font-medium text-gray-950 dark:text-white">Password</label>
<div class="relative">
<input
id="split-login-password"
:type="show ? 'text' : 'password'"
name="{{ $passwordName }}"
required
autocomplete="current-password"
placeholder="Enter your password"
class="block h-12 w-full rounded-md border border-transparent bg-gray-100 pe-11 ps-3.5 text-sm text-gray-950 placeholder:text-gray-950/40 focus:border-gray-950/20 focus:outline-none focus:ring-1 focus:ring-gray-950/20 dark:bg-gray-900 dark:text-white dark:placeholder:text-white/40 dark:focus:border-white/20 dark:focus:ring-white/20"
>
<button
type="button"
@click="show = ! show"
:aria-label="show ? 'Hide password' : 'Show password'"
:aria-pressed="show.toString()"
class="absolute inset-y-0 end-0 flex items-center pe-3.5 text-gray-950/40 transition hover:text-gray-950 dark:text-white/40 dark:hover:text-white"
>
<x-ui.icon name="eye" size="base" x-show="! show" />
<x-ui.icon name="eye-slash" size="base" x-show="show" x-cloak />
</button>
</div>
</div>
@isset($actions)
{{ $actions }}
@else
<button
type="submit"
class="inline-flex h-12 w-full items-center justify-center rounded-md bg-gray-950 text-sm font-semibold text-white transition hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:bg-white dark:text-gray-950 dark:hover:bg-gray-100 dark:focus:ring-white dark:focus:ring-offset-gray-950"
>
{{ $button }}
</button>
@endisset
</form>
<div class="my-7 flex items-center gap-4" aria-hidden="true">
<span class="h-px flex-1 bg-gray-950/10 dark:bg-white/15"></span>
<span class="text-xs font-medium uppercase tracking-[0.18em] text-gray-950/40 dark:text-white/40">Or</span>
<span class="h-px flex-1 bg-gray-950/10 dark:bg-white/15"></span>
</div>
<div class="grid grid-cols-2 gap-3">
@isset($social)
{{ $social }}
@else
<a
href="#"
class="inline-flex h-12 items-center justify-center gap-2 rounded-md bg-gray-100 text-sm font-medium text-gray-950 transition hover:bg-gray-200 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
aria-label="Continue with Google"
>
<x-ui.icon name="google-logo" size="lg" />
</a>
<a
href="#"
class="inline-flex h-12 items-center justify-center gap-2 rounded-md bg-gray-100 text-sm font-medium text-gray-950 transition hover:bg-gray-200 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
aria-label="Continue with X"
>
<x-ui.icon name="x-logo" size="lg" />
</a>
@endisset
</div>
</div>
</div>
<div class="relative order-1 min-h-44 sm:min-h-56 lg:order-2 lg:min-h-full">
@isset($media)
<div class="absolute inset-0">{{ $media }}</div>
@else
<div class="absolute inset-0 overflow-hidden" aria-hidden="true">
<img
src="{{ $image }}"
alt=""
class="landing-split-login-photo h-full w-full object-cover grayscale contrast-[1.15] brightness-[0.92] dark:brightness-[0.78]"
>
<div class="landing-scenic-grain absolute inset-0 opacity-45 mix-blend-overlay dark:opacity-35"></div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-950/30 via-transparent to-gray-950/10 lg:bg-gradient-to-t"></div>
</div>
@endisset
</div>
</section>
resources/views/components/ui/landing-section/spotlight-hero.blade.php
@props([
'badge' => null,
'badgeIcon' => 'calendar-blank',
'title' => 'One place to plan every meeting,',
'accent' => 'task, and deadline.',
'description' => 'Replace scattered calendars and endless to-do lists with a shared workspace that keeps your entire week organized.',
'as' => 'h1',
])
@php
/*
| Product spotlight hero. Centered badge + accent-highlighted title, pill
| CTAs, and a blue pedestal for the product mockup (`media` slot).
|
| Usage:
| <x-ui.landing-section.spotlight-hero badge="Work Calendar for Modern Teams" accent="task, and deadline.">
| <x-slot:actions>…</x-slot:actions>
| <x-slot:media>…</x-slot:media>
| </x-ui.landing-section.spotlight-hero>
*/
@endphp
<section
{{ $attributes->merge(['class' => 'landing-spotlight-hero relative isolate overflow-hidden bg-white text-gray-950 dark:bg-gray-950 dark:text-white']) }}
>
<div class="pointer-events-none absolute inset-y-0 start-0 w-24 bg-[repeating-linear-gradient(-45deg,transparent,transparent_10px,rgba(15,23,42,0.035)_10px,rgba(15,23,42,0.035)_11px)] dark:bg-[repeating-linear-gradient(-45deg,transparent,transparent_10px,rgba(255,255,255,0.04)_10px,rgba(255,255,255,0.04)_11px)] sm:w-36" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-y-0 end-0 w-24 bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(15,23,42,0.035)_10px,rgba(15,23,42,0.035)_11px)] dark:bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(255,255,255,0.04)_10px,rgba(255,255,255,0.04)_11px)] sm:w-36" aria-hidden="true"></div>
<div class="relative mx-auto max-w-5xl px-4 pb-10 pt-16 text-center sm:px-6 sm:pt-20 lg:px-8">
@if ($badge)
<div class="landing-spotlight-copy inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-accent-600 text-white">
<x-ui.icon :name="$badgeIcon" weight="fill" size="xs" />
</span>
{{ $badge }}
</div>
@endif
<{{ $as }} class="landing-spotlight-copy mx-auto mt-6 max-w-4xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
{{ $title }}
@if ($accent)
<span class="text-accent-600 dark:text-accent-400"> {{ $accent }}</span>
@endif
</{{ $as }}>
@if ($description)
<p class="landing-spotlight-copy mx-auto mt-5 max-w-2xl text-base leading-7 text-gray-600 text-pretty sm:text-lg dark:text-gray-400">{{ $description }}</p>
@endif
@isset($actions)
<div class="landing-spotlight-copy mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">{{ $actions }}</div>
@endisset
</div>
<div class="relative mx-auto max-w-6xl px-4 pb-16 sm:px-6 lg:px-8">
<div class="landing-spotlight-pedestal relative overflow-hidden rounded-[1.75rem] bg-accent-600 p-3 shadow-2xl shadow-accent-600/25 sm:p-5 lg:p-6">
<div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-size-[28px_28px] opacity-40" aria-hidden="true"></div>
<div class="relative">
@isset($media)
{{ $media }}
@else
<x-ui.landing-section.calendar-mockup />
@endisset
</div>
</div>
</div>
</section>
resources/views/components/ui/landing-section/spotlight-intro.blade.php
@props([
'badge' => null,
'badgeIcon' => 'lightning',
'badgeTone' => 'brand',
'title' => 'From scattered plans to',
'accent' => 'an organized workweek.',
'description' => null,
'as' => 'h2',
])
@php
/*
| Centered section intro with a pill badge and accent-highlighted title.
| Use ahead of feature / workflow blocks.
|
| badgeTone: brand, accent, amber, rose
|
| Usage:
| <x-ui.landing-section.spotlight-intro badge="How it works" accent="an organized workweek." />
*/
$tone = [
'brand' => 'bg-brand-600',
'accent' => 'bg-accent-600',
'amber' => 'bg-amber-500',
'rose' => 'bg-red-500',
][$badgeTone] ?? 'bg-brand-600';
@endphp
<section
{{ $attributes->merge(['class' => 'landing-spotlight-intro bg-white px-4 py-16 text-center sm:px-6 sm:py-20 lg:px-8 dark:bg-gray-950']) }}
>
<div class="mx-auto max-w-3xl">
@if ($badge)
<div class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200">
<span @class(['inline-flex h-5 w-5 items-center justify-center rounded-full text-white', $tone])>
<x-ui.icon :name="$badgeIcon" weight="fill" size="xs" />
</span>
{{ $badge }}
</div>
@endif
<{{ $as }} class="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl lg:text-5xl">
{{ $title }}
@if ($accent)
<span class="text-accent-600 dark:text-accent-400"> {{ $accent }}</span>
@endif
</{{ $as }}>
@if ($description)
<p class="mx-auto mt-5 max-w-2xl text-base leading-7 text-gray-600 text-pretty sm:text-lg dark:text-gray-400">{{ $description }}</p>
@endif
@isset($actions)
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">{{ $actions }}</div>
@endisset
</div>
</section>
resources/views/components/ui/landing-section/waitlist-bloom.blade.php
@props([
'brand' => null,
'brandIcon' => 'plant',
'eyebrow' => 'Private preview',
'title' => 'Good things are on the way.',
'description' => "We're finishing a quiet collection for rooms that want more light. Join the list and we'll write when the first pieces are ready.",
'action' => '#',
'method' => 'get',
'emailName' => 'email',
'button' => 'Join Waitlist',
'proof' => 'Join 1,247 others',
'note' => 'One note when we open. Nothing else.',
'success' => "You're on the list.",
'avatars' => [],
'image' => '/images/parallax-trail-canopy.jpg',
'caption' => 'Larch trail, late light',
'as' => 'h2',
])
@php
/*
| Atelier waitlist hero. Copy sits in a cream field; a forest canopy
| photograph takes the wider column and soft-fades into the type. Colours
| read from brand / gray tokens. Demo action "#" swaps the form for a
| success line without leaving the page.
|
| Usage:
| <x-ui.landing-section.waitlist-bloom title="Good things are on the way." />
*/
$brand ??= config('app.name', 'Harbour');
$avatars = $avatars ?: [
['name' => 'Ada Lovelace', 'background' => 'radial-gradient(circle at 28% 22%, var(--color-brand-200), var(--color-brand-700))'],
['name' => 'Grace Hopper', 'background' => 'radial-gradient(circle at 72% 30%, var(--color-brand-300), var(--color-brand-800))'],
['name' => 'Alan Turing', 'background' => 'radial-gradient(circle at 40% 68%, var(--color-brand-100), var(--color-brand-600))'],
['name' => 'Katherine Johnson', 'background' => 'radial-gradient(circle at 62% 24%, var(--color-green-200), var(--color-brand-800))'],
['name' => 'Margaret Hamilton', 'background' => 'radial-gradient(circle at 34% 42%, var(--color-brand-400), var(--color-gray-800))'],
];
$fieldId = 'bloom-'.Str::lower(Str::random(8));
$demoJoin = in_array($action, ['#', ''], true);
@endphp
<section
x-data="{ joined: false }"
{{ $attributes->merge(['class' => 'landing-bloom-field relative isolate overflow-hidden bg-brand-50 text-brand-950 dark:bg-brand-950 dark:text-brand-50']) }}
>
<div class="landing-bloom-glow pointer-events-none absolute -start-24 top-24 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl dark:bg-brand-800/30" aria-hidden="true"></div>
<div class="landing-bloom-glow pointer-events-none absolute bottom-0 start-1/4 hidden h-56 w-56 rounded-full bg-brand-100/70 blur-3xl delay-1000 lg:block dark:bg-brand-800/20" aria-hidden="true"></div>
<div class="relative mx-auto grid max-w-[90rem] lg:min-h-[min(92dvh,56rem)] lg:grid-cols-[minmax(22rem,0.78fr)_minmax(0,1.22fr)]">
<div class="relative z-10 order-2 flex flex-col justify-between gap-10 px-5 py-8 sm:px-10 sm:py-10 lg:order-1 lg:px-14 lg:py-12">
<a href="{{ url('/') }}" class="inline-flex w-fit items-center gap-2.5" aria-label="{{ $brand }}">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-600 text-white shadow-sm ring-1 ring-brand-700/20 transition hover:bg-brand-500">
<x-ui.icon :name="$brandIcon" weight="fill" size="lg" />
</span>
<span class="text-lg tracking-tight text-brand-950 dark:text-brand-50 [font-family:Newsreader,Georgia,ui-serif,serif]">{{ $brand }}</span>
</a>
<div class="landing-bloom-copy max-w-xl">
@if ($eyebrow)
<p class="inline-flex items-center gap-2 text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-brand-700 dark:text-brand-300">
<span class="h-1.5 w-1.5 rounded-full bg-brand-600 dark:bg-brand-400" aria-hidden="true"></span>
{{ $eyebrow }}
</p>
@endif
<{{ $as }} class="mt-4 text-4xl font-medium leading-[1.08] tracking-tight text-balance italic text-brand-950 sm:text-5xl lg:text-[3.35rem] dark:text-white [font-family:Newsreader,Georgia,ui-serif,serif]">
{{ $title }}
</{{ $as }}>
@if ($description)
<p class="mt-5 max-w-md text-base leading-7 text-brand-800/75 text-pretty dark:text-brand-100/70">{{ $description }}</p>
@endif
<form
action="{{ $action }}"
method="{{ $method }}"
class="mt-8 max-w-lg"
@if ($demoJoin)
@submit.prevent="joined = true"
@endif
>
@csrf
<div x-show="! joined">
<label for="{{ $fieldId }}-email" class="block text-xs font-semibold uppercase tracking-[0.16em] text-brand-800/70 dark:text-brand-200/70">Email</label>
<div class="mt-2 flex flex-col gap-2 rounded-xl bg-white p-1.5 shadow-lg shadow-brand-900/10 ring-1 ring-brand-900/10 transition focus-within:ring-brand-600/30 dark:bg-gray-900 dark:shadow-black/40 dark:ring-white/10 dark:focus-within:ring-brand-400/35 sm:flex-row sm:items-center">
<input
id="{{ $fieldId }}-email"
type="email"
name="{{ $emailName }}"
required
autocomplete="email"
placeholder="you@studio.com"
class="block h-12 min-w-0 flex-1 border-0 bg-transparent px-3.5 text-sm text-brand-950 placeholder:text-brand-700/40 focus:outline-none focus:ring-0 dark:text-white dark:placeholder:text-gray-500"
>
<button
type="submit"
class="inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-lg bg-brand-600 px-5 text-sm font-semibold text-white transition hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 active:scale-[0.98] dark:focus:ring-offset-brand-950 sm:h-11"
>
{{ $button }}
<x-ui.icon name="arrow-right" weight="bold" size="sm" />
</button>
</div>
@if ($note)
<p class="mt-2.5 text-xs leading-5 text-brand-800/55 dark:text-brand-200/45">{{ $note }}</p>
@endif
</div>
<p
x-cloak
x-show="joined"
class="flex items-center gap-2.5 rounded-xl bg-white px-4 py-3.5 text-sm font-medium text-brand-950 ring-1 ring-brand-900/10 dark:bg-gray-900 dark:text-brand-50 dark:ring-white/10"
role="status"
>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-brand-600 text-white">
<x-ui.icon name="check" weight="bold" size="sm" />
</span>
{{ $success }}
</p>
</form>
<div class="mt-7 flex flex-wrap items-center gap-3">
<div class="flex items-center -space-x-2">
@foreach ($avatars as $avatar)
<x-ui.avatar
:name="$avatar['name'] ?? null"
:src="$avatar['src'] ?? null"
:background="$avatar['background'] ?? null"
:color="$avatar['color'] ?? '#ffffff'"
size="sm"
/>
@endforeach
</div>
@if ($proof)
<p class="text-sm text-brand-800/70 dark:text-brand-100/65">{{ $proof }}</p>
@endif
</div>
</div>
<p class="text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-brand-800/40 dark:text-brand-200/35">{{ $brand }} atelier</p>
</div>
<div class="relative order-1 min-h-[18rem] sm:min-h-[22rem] lg:order-2 lg:min-h-full lg:-ms-10">
<div class="pointer-events-none absolute inset-y-0 start-0 z-10 hidden w-44 bg-gradient-to-r from-brand-50 from-15% via-brand-50/70 to-transparent dark:from-brand-950 dark:via-brand-950/80 lg:block" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-20 bg-gradient-to-t from-brand-50 to-transparent dark:from-brand-950 lg:hidden" aria-hidden="true"></div>
@isset($media)
<div class="absolute inset-0">{{ $media }}</div>
@else
<div class="landing-bloom-art absolute inset-0 overflow-hidden" aria-hidden="true">
<img
src="{{ $image }}"
alt=""
class="h-full w-full object-cover object-[center_42%]"
>
<div class="landing-scenic-grain absolute inset-0 opacity-25 mix-blend-multiply dark:opacity-35 dark:mix-blend-soft-light"></div>
<div class="absolute inset-0 bg-gradient-to-tr from-brand-950/20 via-transparent to-transparent dark:from-gray-950/50"></div>
</div>
@endisset
@if ($caption)
<p class="absolute bottom-5 end-5 z-10 hidden max-w-[12rem] text-right text-[0.7rem] font-medium uppercase tracking-[0.18em] text-white/80 lg:block">{{ $caption }}</p>
@endif
</div>
</div>
</section>
resources/views/components/ui/landing-section/waitlist-monument.blade.php
@props([
'brand' => null,
'brandIcon' => 'castle-turret',
'title' => 'The waitlist is now open',
'description' => 'Be the first to know when we launch',
'action' => '#',
'method' => 'get',
'emailName' => 'email',
'button' => 'Join Waitlist',
'image' => '/images/parallax-radio-ridge.jpg',
'as' => 'h2',
])
@php
/*
| Monument waitlist hero. Editorial serif headline beside a high-contrast
| monochrome photograph. Uses gray-scale tokens so light/dark and theme gray
| ramps stay consistent.
|
| Usage:
| <x-ui.landing-section.waitlist-monument title="The waitlist is now open" />
*/
$brand ??= config('app.name', 'Harbour');
$fieldId = 'monument-'.Str::lower(Str::random(8));
@endphp
<section
{{ $attributes->merge(['class' => 'landing-monument-field relative isolate overflow-hidden bg-white text-gray-950 dark:bg-gray-950 dark:text-white']) }}
>
<div class="mx-auto grid min-h-[min(92vh,56rem)] max-w-[90rem] lg:grid-cols-2">
<div class="flex flex-col justify-between px-5 py-10 sm:px-10 lg:px-16 lg:py-14">
<a href="{{ url('/') }}" class="inline-flex w-fit items-center gap-2.5" aria-label="{{ $brand }}">
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-gray-950 text-white dark:bg-white dark:text-gray-950">
<x-ui.icon :name="$brandIcon" weight="fill" size="base" />
</span>
<span class="text-lg tracking-tight [font-family:Newsreader,Georgia,ui-serif,serif]">{{ $brand }}</span>
</a>
<div class="landing-monument-copy max-w-xl py-14 sm:py-20">
<{{ $as }} class="text-4xl leading-[1.02] tracking-tight text-balance sm:text-6xl lg:text-7xl [font-family:Newsreader,Georgia,ui-serif,serif]">
{{ $title }}
</{{ $as }}>
@if ($description)
<p class="mt-5 text-base leading-8 text-gray-950/65 sm:text-lg dark:text-white/65 [font-family:Newsreader,Georgia,ui-serif,serif]">{{ $description }}</p>
@endif
<form action="{{ $action }}" method="{{ $method }}" class="mt-10 flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-stretch">
@csrf
<label class="sr-only" for="{{ $fieldId }}-email">Email</label>
<input
id="{{ $fieldId }}-email"
type="email"
name="{{ $emailName }}"
required
autocomplete="email"
placeholder="Enter your email"
class="block h-12 min-w-0 flex-1 rounded-none border border-gray-950/20 bg-white px-4 text-sm text-gray-950 placeholder:text-gray-950/40 focus:border-gray-950 focus:outline-none focus:ring-1 focus:ring-gray-950 dark:border-white/25 dark:bg-gray-950 dark:text-white dark:placeholder:text-white/40 dark:focus:border-white dark:focus:ring-white"
>
<button
type="submit"
class="inline-flex h-12 shrink-0 items-center justify-center bg-gray-950 px-5 text-sm font-semibold text-white transition hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:bg-white dark:text-gray-950 dark:hover:bg-gray-100 dark:focus:ring-white dark:focus:ring-offset-gray-950"
>
{{ $button }}
</button>
</form>
</div>
<div class="hidden lg:block" aria-hidden="true"></div>
</div>
<div class="relative min-h-[16rem] border-t border-gray-950/10 bg-gray-100 sm:min-h-[22rem] dark:border-white/10 dark:bg-gray-900 lg:min-h-full lg:border-t-0 lg:border-s">
@isset($media)
<div class="absolute inset-0">{{ $media }}</div>
@else
<div class="landing-monument-art absolute inset-0 overflow-hidden" aria-hidden="true">
<img
src="{{ $image }}"
alt=""
class="h-full w-full object-cover object-center grayscale contrast-[1.2] brightness-[0.95] dark:brightness-[0.8]"
>
<div class="landing-scenic-grain absolute inset-0 opacity-40 mix-blend-multiply dark:opacity-30 dark:mix-blend-soft-light"></div>
<div class="absolute inset-0 bg-gradient-to-t from-gray-950/20 via-transparent to-transparent dark:from-black/35"></div>
</div>
@endisset
</div>
</div>
</section>
resources/views/components/ui/landing-section/workflow-panel.blade.php
@props([
'eyebrow' => 'Workflows Made Simple',
'title' => 'Plan Once.',
'accent' => 'Stay Organized Every Day.',
'steps' => [],
'cta' => 'Try it now',
'ctaHref' => '#',
'as' => 'h2',
])
@php
/*
| Interactive workflow split: expandable step list on the left, product
| media on a blue pedestal on the right. Pass `steps` as
| [['title' => '…', 'description' => '…'], ...].
|
| Usage:
| <x-ui.landing-section.workflow-panel title="Plan Once." accent="Stay Organized Every Day.">
| <x-slot:media>…</x-slot:media>
| </x-ui.landing-section.workflow-panel>
*/
$steps = array_values($steps ?: [
[
'title' => 'Create Your Workspace',
'description' => 'Set up your team, invite members, and organize projects in minutes.',
],
[
'title' => 'Add Meetings & Tasks',
'description' => 'Drop events onto the shared calendar and keep deadlines visible.',
],
[
'title' => 'Invite Your Team',
'description' => 'Bring collaborators in so everyone sees the same week ahead.',
],
[
'title' => 'Stay On Schedule',
'description' => 'Get gentle reminders and a clear view of what comes next.',
],
]);
@endphp
<section
{{ $attributes->merge(['class' => 'landing-workflow-panel bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 dark:bg-gray-950']) }}
x-data="{ active: 0 }"
>
<div class="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
<div>
@if ($eyebrow)
<p class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
<span class="h-4 w-0.5 rounded-full bg-brand-500" aria-hidden="true"></span>
{{ $eyebrow }}
</p>
@endif
<{{ $as }} class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl lg:text-5xl">
{{ $title }}
@if ($accent)
<span class="text-accent-600 dark:text-accent-400"> {{ $accent }}</span>
@endif
</{{ $as }}>
<div class="mt-8 divide-y divide-dashed divide-gray-200 border-y border-dashed border-gray-200 dark:divide-gray-800 dark:border-gray-800" role="list">
@foreach ($steps as $index => $step)
@php
$stepTitle = $step['title'] ?? '';
$stepDescription = $step['description'] ?? null;
@endphp
<button
type="button"
role="listitem"
class="group flex w-full items-start gap-3 py-4 text-left transition"
@click="active = {{ $index }}"
:aria-expanded="(active === {{ $index }}).toString()"
>
<span
class="mt-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border border-gray-300 text-gray-500 transition dark:border-gray-700"
:class="active === {{ $index }} ? 'border-gray-950 bg-gray-950 text-white dark:border-white dark:bg-white dark:text-gray-950' : ''"
aria-hidden="true"
>
<x-ui.icon name="check" weight="bold" size="xs" x-show="active === {{ $index }}" x-cloak />
</span>
<span class="min-w-0 flex-1">
<span
class="block text-base font-semibold transition"
:class="active === {{ $index }} ? 'text-gray-950 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
>{{ $stepTitle }}</span>
@if ($stepDescription)
<span
class="mt-1 block text-sm leading-6 text-gray-600 dark:text-gray-400"
x-show="active === {{ $index }}"
x-cloak
x-collapse
>{{ $stepDescription }}</span>
@endif
</span>
</button>
@endforeach
</div>
<div class="mt-8">
@isset($actions)
{{ $actions }}
@else
<a
href="{{ $ctaHref }}"
class="inline-flex items-center gap-2 rounded-full bg-accent-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-accent-500 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 dark:focus:ring-offset-gray-950"
>
{{ $cta }}
<x-ui.icon name="arrow-right" weight="bold" size="sm" />
</a>
@endisset
</div>
</div>
<div class="landing-workflow-media relative overflow-hidden rounded-[1.75rem] bg-accent-600 p-3 shadow-2xl shadow-accent-600/20 sm:p-5">
<div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-size-[24px_24px] opacity-35" aria-hidden="true"></div>
<div class="relative">
@isset($media)
{{ $media }}
@else
<x-ui.landing-section.calendar-mockup compact />
@endisset
</div>
</div>
</div>
</section>