41 lines
2.0 KiB
TypeScript
41 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { AuthForm } from '../../components/auth-form';
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<div className="min-h-[calc(100vh-80px)] pt-24 pb-16 px-4 flex items-center justify-center bg-brand-bg relative overflow-hidden">
|
|
{/* Background ambient glow */}
|
|
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-96 h-96 bg-brand-cyan/10 rounded-full blur-3xl pointer-events-none"></div>
|
|
|
|
<div className="w-full max-w-md relative z-10">
|
|
<div className="text-center mb-8 space-y-2">
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-low border border-outline-variant/40 text-[11px] font-mono tracking-wide text-primary-fixed-dim">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-secondary-fixed"></span>
|
|
Rider Cockpit
|
|
</div>
|
|
<h1 className="text-3xl font-extrabold text-white tracking-tight">
|
|
Welcome back.
|
|
</h1>
|
|
<p className="text-sm text-on-surface-variant max-w-xs mx-auto">
|
|
Sign in to access your telemetry data, garage, and cloud session replays.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="glass-card rounded-2xl border border-brand-border p-6 sm:p-8 shadow-2xl backdrop-blur-xl relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-container via-surface-tint to-transparent"></div>
|
|
<AuthForm mode="login" />
|
|
|
|
<div className="mt-6 pt-4 border-t border-outline-variant/30 flex items-center justify-between text-xs font-mono text-on-surface-variant">
|
|
<Link className="hover:text-primary-container transition-colors" href="/forgot-password">
|
|
Forgot password?
|
|
</Link>
|
|
<Link className="hover:text-primary-container transition-colors" href="/register">
|
|
Need an account? <span className="text-primary-container font-semibold">Sign up</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|