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>
47 lines
3.6 KiB
PHP
47 lines
3.6 KiB
PHP
<footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
|
|
<div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
|
|
<div class="grid gap-10 md:grid-cols-4">
|
|
<div class="md:col-span-2">
|
|
<a href="{{ route('home') }}" class="flex items-center gap-2.5">
|
|
<x-brand-mark size="sm" />
|
|
<span class="text-base font-semibold tracking-tight text-slate-900 dark:text-white">Certified</span>
|
|
</a>
|
|
<p class="mt-4 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-slate-400">
|
|
De veilige certificaatmanager voor organisaties die met gevoelige persoonsgegevens werken. Gebouwd en gehost in Europa.
|
|
</p>
|
|
<div class="mt-5 flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 dark:border-slate-700 dark:bg-slate-900">
|
|
<span class="size-1.5 rounded-full bg-emerald-500"></span> AVG / GDPR-proof
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 dark:border-slate-700 dark:bg-slate-900">
|
|
🇪🇺 100% Europese hosting
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav aria-label="Product">
|
|
<h3 class="text-sm font-semibold text-slate-900 dark:text-white">Product</h3>
|
|
<ul class="mt-4 space-y-3 text-sm">
|
|
<li><a href="{{ route('home') }}#features" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Features</a></li>
|
|
<li><a href="{{ route('marketing.security') }}" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Security & privacy</a></li>
|
|
<li><a href="{{ route('marketing.pricing') }}" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Pricing</a></li>
|
|
<li><a href="{{ route('login') }}" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Login</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav aria-label="Juridisch">
|
|
<h3 class="text-sm font-semibold text-slate-900 dark:text-white">Juridisch</h3>
|
|
<ul class="mt-4 space-y-3 text-sm">
|
|
<li><a href="#" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Privacyverklaring</a></li>
|
|
<li><a href="#" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Verwerkersovereenkomst</a></li>
|
|
<li><a href="#" class="text-slate-500 transition-colors hover:text-emerald-600 dark:text-slate-400 dark:hover:text-emerald-400">Algemene voorwaarden</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-200 pt-8 sm:flex-row dark:border-slate-800">
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">© {{ date('Y') }} Certified. Alle rechten voorbehouden.</p>
|
|
<p class="text-sm text-slate-400 dark:text-slate-500">Gemaakt in Nederland 🇳🇱</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|