a3b3d7d029
Extract the shield mark into reusable brand-icon/brand-mark components and use them in the app shell, auth layout, and marketing nav/footer. Align the palette on emerald (badges, selection, dark zinc-950 body), and add a subtle grid/glow backdrop to the app layout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
114 lines
6.7 KiB
PHP
114 lines
6.7 KiB
PHP
<header
|
|
x-data="{ open: false, scrolled: false }"
|
|
@scroll.window.passive="scrolled = window.scrollY > 8"
|
|
class="fixed inset-x-0 top-0 z-50"
|
|
>
|
|
<nav
|
|
class="border-b backdrop-blur-xl transition-all duration-300"
|
|
:class="scrolled
|
|
? 'border-slate-200/80 bg-white/80 shadow-sm shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-950/80'
|
|
: 'border-transparent bg-white/40 dark:bg-slate-950/40'"
|
|
aria-label="Hoofdnavigatie"
|
|
>
|
|
<div class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8">
|
|
|
|
{{-- Logo --}}
|
|
<a href="{{ route('home') }}" class="group flex items-center gap-2.5" aria-label="Certified — home">
|
|
<x-brand-mark class="transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3" />
|
|
<span class="text-lg font-semibold tracking-tight text-slate-900 dark:text-white">Certified</span>
|
|
</a>
|
|
|
|
{{-- Desktop links --}}
|
|
<div class="hidden items-center gap-1 md:flex">
|
|
@foreach ([
|
|
['label' => 'Features', 'href' => route('home').'#features'],
|
|
['label' => 'Security', 'href' => route('marketing.security')],
|
|
['label' => 'Pricing', 'href' => route('marketing.pricing')],
|
|
] as $link)
|
|
<a
|
|
href="{{ $link['href'] }}"
|
|
class="rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white"
|
|
>{{ $link['label'] }}</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 sm:gap-3">
|
|
{{-- Theme toggle --}}
|
|
<button
|
|
type="button"
|
|
@click="
|
|
const dark = document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('flux.appearance', dark ? 'dark' : 'light');
|
|
"
|
|
class="flex size-9 items-center justify-center rounded-lg text-slate-500 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white"
|
|
aria-label="Wissel tussen licht en donker thema"
|
|
>
|
|
<svg class="size-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
|
</svg>
|
|
<svg class="hidden size-5 dark:block" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<a
|
|
href="{{ route('login') }}"
|
|
class="hidden rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 sm:block dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white"
|
|
>Login</a>
|
|
|
|
<a
|
|
href="{{ route('register') }}"
|
|
class="hidden rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-emerald-600/25 transition-all duration-200 hover:-translate-y-px hover:bg-emerald-500 hover:shadow-lg hover:shadow-emerald-500/30 active:translate-y-0 sm:block"
|
|
>Vraag toegang aan</a>
|
|
|
|
{{-- Mobile hamburger --}}
|
|
<button
|
|
type="button"
|
|
@click="open = !open"
|
|
class="flex size-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 md:hidden dark:text-slate-400 dark:hover:bg-slate-800/60"
|
|
:aria-expanded="open"
|
|
aria-label="Menu openen"
|
|
>
|
|
<svg x-show="!open" class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
<svg x-show="open" x-cloak class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mobile menu --}}
|
|
<div
|
|
x-show="open"
|
|
x-cloak
|
|
x-transition:enter="transition duration-200 ease-out"
|
|
x-transition:enter-start="-translate-y-2 opacity-0"
|
|
x-transition:enter-end="translate-y-0 opacity-100"
|
|
x-transition:leave="transition duration-150 ease-in"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click.outside="open = false"
|
|
class="border-t border-slate-200/80 bg-white/95 px-4 pt-2 pb-4 backdrop-blur-xl md:hidden dark:border-slate-800 dark:bg-slate-950/95"
|
|
>
|
|
@foreach ([
|
|
['label' => 'Features', 'href' => route('home').'#features'],
|
|
['label' => 'Security', 'href' => route('marketing.security')],
|
|
['label' => 'Pricing', 'href' => route('marketing.pricing')],
|
|
['label' => 'Login', 'href' => route('login')],
|
|
] as $link)
|
|
<a
|
|
href="{{ $link['href'] }}"
|
|
@click="open = false"
|
|
class="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/60"
|
|
>{{ $link['label'] }}</a>
|
|
@endforeach
|
|
|
|
<a
|
|
href="{{ route('register') }}"
|
|
class="mt-3 block rounded-lg bg-emerald-600 px-4 py-2.5 text-center text-base font-semibold text-white shadow-md shadow-emerald-600/25 transition-colors hover:bg-emerald-500"
|
|
>Vraag toegang aan</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|