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>
34 lines
1.8 KiB
PHP
34 lines
1.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
@include('partials.head')
|
|
</head>
|
|
<body class="min-h-screen bg-slate-50 antialiased selection:bg-emerald-200 selection:text-emerald-950 dark:bg-slate-950 dark:selection:bg-emerald-900 dark:selection:text-emerald-100">
|
|
<div aria-hidden="true" class="pointer-events-none fixed inset-x-0 top-0 h-[32rem] bg-grid-slate [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black,transparent)]"></div>
|
|
<div aria-hidden="true" class="pointer-events-none fixed -top-32 left-1/2 h-80 w-[36rem] -translate-x-1/2 rounded-full bg-gradient-to-br from-emerald-400/20 via-teal-400/10 to-transparent blur-3xl"></div>
|
|
|
|
<div class="absolute top-4 right-4 z-10">
|
|
<x-language-switcher />
|
|
</div>
|
|
|
|
<div class="relative flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
|
<div class="flex w-full max-w-sm flex-col gap-6">
|
|
<a href="{{ route('home') }}" class="group flex flex-col items-center gap-3 font-medium" wire:navigate>
|
|
<x-brand-mark size="lg" 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>
|
|
<div class="flex flex-col gap-6 rounded-2xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@persist('toast')
|
|
<flux:toast.group>
|
|
<flux:toast />
|
|
</flux:toast.group>
|
|
@endpersist
|
|
|
|
@fluxScripts
|
|
</body>
|
|
</html>
|