feat(auth): glassmorphism card + clearer register CTA
Give the login/register card a proper glassmorphism look (new .auth-glass: more transparent so the clouds blur through, bright glassy edge, soft layered shadow) while keeping a slate tint so the white form text stays legible. Make the "no account? register" CTA stand out over the bright sky: a dark frosted glass pill with an arrow, and dark slate prompt text with a soft white halo instead of the washed-out white. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { Link } from '@/i18n/Link';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
|
||||
@@ -58,15 +59,24 @@ export function AuthShell({
|
||||
<p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="abrban-panel rounded-[1.75rem] p-6 sm:p-8">{children}</div>
|
||||
<div className="auth-glass rounded-[1.75rem] p-6 sm:p-8">{children}</div>
|
||||
|
||||
{altPrompt && altHref && altLabel && (
|
||||
<p className="abrban-ink mt-6 text-center text-sm text-white/90">
|
||||
{altPrompt}{' '}
|
||||
<Link href={altHref} className="font-bold text-primary-200 underline-offset-4 hover:text-white hover:underline">
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-x-2 gap-y-2">
|
||||
<span
|
||||
className="text-base font-semibold text-slate-900"
|
||||
style={{ textShadow: '0 1px 3px rgba(255,255,255,0.7)' }}
|
||||
>
|
||||
{altPrompt}
|
||||
</span>
|
||||
<Link
|
||||
href={altHref}
|
||||
className="inline-flex items-center gap-1.5 rounded-xl border border-white/45 bg-slate-900/45 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-black/25 backdrop-blur-md transition hover:border-white/70 hover:bg-slate-900/65"
|
||||
>
|
||||
{altLabel}
|
||||
<ArrowLeft className="h-4 w-4 ltr:rotate-180" />
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user