73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import { Card } from '@/components/ui/card';
|
|
|
|
interface AuthLayoutProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
children: React.ReactNode;
|
|
footerLinks?: Array<{ label: string; to: string }>;
|
|
className?: string;
|
|
}
|
|
|
|
export function AuthLayout({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
footerLinks,
|
|
className,
|
|
}: AuthLayoutProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden',
|
|
className,
|
|
)}
|
|
role="main"
|
|
aria-label="Page d'authentification"
|
|
>
|
|
{/* Background gradient */}
|
|
<div className="fixed inset-0 bg-background">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/5" />
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-pulse" />
|
|
<div
|
|
className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl animate-pulse"
|
|
style={{ animationDelay: '2s' }}
|
|
/>
|
|
{/* Subtle secondary accent blob */}
|
|
<div
|
|
className="absolute top-2/3 left-1/2 w-72 h-72 bg-secondary/5 rounded-full blur-3xl animate-pulse"
|
|
style={{ animationDelay: '4s' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-w-md w-full mx-auto space-y-8 relative z-10 animate-auth-enter">
|
|
{/* Logo and Title */}
|
|
<header className="text-center">
|
|
<div className="flex items-center justify-center mb-6">
|
|
<div
|
|
className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center shadow-sm"
|
|
aria-hidden="true"
|
|
>
|
|
<span className="text-primary-foreground font-bold text-2xl">V</span>
|
|
</div>
|
|
<span className="ml-3 font-bold text-3xl text-foreground">Veza</span>
|
|
</div>
|
|
<h1
|
|
id="auth-form-title"
|
|
className="text-3xl font-bold text-foreground mb-2"
|
|
>
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="text-sm text-muted-foreground" role="doc-subtitle">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</header>
|
|
|
|
{/* Content Card — glass effect */}
|
|
<Card
|
|
variant="surface"
|
|
padding="lg"
|
|
className="w-full bg-card/80 backdrop-blur-md border-border/50 shadow-2xl"
|
|
aria-labelledby="auth-form-title"
|
|
>
|
|
{children}
|
|
</Card>
|
|
|
|
{/* Footer Links */}
|
|
{footerLinks && footerLinks.length > 0 && (
|
|
<nav
|
|
className="text-center space-x-4"
|
|
aria-label="Navigation d'authentification"
|
|
>
|
|
{footerLinks.map((link) => (
|
|
<Link
|
|
key={link.to}
|
|
to={link.to}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-fast)] focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background rounded"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|