keyhan
a58142cc4a
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>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
'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';
|
|
import { Logo } from '@/components/landing/Logo';
|
|
import { AuthSky } from './AuthSky';
|
|
|
|
// Auth shell that carries the Abrban brand straight from the landing: the same
|
|
// bright, cloud-filled sky (see AuthSky) sits behind the form, which lives in the
|
|
// same frosted dark-glass panel — so login/register read as one world with the
|
|
// public landing. Direction is inherited from the root layout.
|
|
export function AuthShell({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
altPrompt,
|
|
altHref,
|
|
altLabel,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
children: ReactNode;
|
|
altPrompt?: string;
|
|
altHref?: string;
|
|
altLabel?: string;
|
|
}) {
|
|
const t = useT();
|
|
return (
|
|
<div className="relative min-h-screen w-full overflow-hidden bg-[#9fb4d4] text-white">
|
|
{/* Bright cloud-filled sky backdrop, shared with the landing */}
|
|
<AuthSky />
|
|
|
|
{/* Header */}
|
|
<header className="relative z-10 mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
|
|
{/* Brand returns to the auth entry; only the explicit "back to home"
|
|
link leaves for the public landing page. */}
|
|
<Link href="/login" aria-label={t.common.appName} className="transition hover:opacity-90">
|
|
<Logo className="abrban-ink" />
|
|
</Link>
|
|
<div className="flex items-center gap-1">
|
|
<LanguageSwitcher className="text-white/85 hover:text-white" />
|
|
<Link
|
|
href="/"
|
|
className="rounded-lg px-3 py-2 text-sm font-medium text-white/85 transition hover:text-white"
|
|
>
|
|
{t.auth.backHome}
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Form card */}
|
|
<main className="relative z-10 flex min-h-[calc(100vh-80px)] items-center justify-center px-4 pb-16">
|
|
<div className="w-full max-w-md">
|
|
<div className="mb-7 text-center">
|
|
<h1 className="abrban-ink text-3xl font-black tracking-tight sm:text-4xl">{title}</h1>
|
|
<p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
|
|
</div>
|
|
|
|
<div className="auth-glass rounded-[1.75rem] p-6 sm:p-8">{children}</div>
|
|
|
|
{altPrompt && altHref && altLabel && (
|
|
<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>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|