Certified/resources/views/marketing/partials/nav.blade.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">
                <span class="flex size-9 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg shadow-emerald-500/25 transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3">
                    <svg class="size-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
                    </svg>
                </span>
                <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>