kyle
806b67954e
- Dark gradient background (slate-950/blue-950) with ambient blur effects - Circular logo centered with dual-ring frosted glass design - Heartbeat breathing animation (3s cycle) with glow pulse on outer ring - Gradient sign-in button with hover shadow effects - Removed "first user" warning, replaced with subtle "authorized personnel" note - Closes #5 and #6 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
67 lines
2.9 KiB
TypeScript
67 lines
2.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { Plane, LogIn, Shield } from 'lucide-react';
|
|
|
|
export function Login() {
|
|
const { isAuthenticated, loginWithRedirect } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
navigate('/dashboard');
|
|
}
|
|
}, [isAuthenticated, navigate]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950">
|
|
{/* Background ambient effects */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-radial from-blue-500/10 to-transparent rounded-full blur-3xl" />
|
|
<div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-radial from-indigo-500/8 to-transparent rounded-full blur-3xl" />
|
|
<div className="absolute top-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 flex flex-col items-center gap-10 px-4 w-full max-w-sm">
|
|
{/* Breathing logo circle */}
|
|
<div className="animate-heartbeat">
|
|
<div className="relative w-36 h-36 rounded-full bg-gradient-to-br from-blue-500/20 to-indigo-600/20 backdrop-blur-sm border border-white/10 flex items-center justify-center animate-glow-pulse">
|
|
{/* Inner circle */}
|
|
<div className="w-28 h-28 rounded-full bg-gradient-to-br from-blue-500/30 to-indigo-600/30 border border-white/10 flex items-center justify-center shadow-2xl">
|
|
<Plane className="h-14 w-14 text-blue-400 drop-shadow-lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold text-white tracking-tight mb-2">
|
|
VIP Coordinator
|
|
</h1>
|
|
<p className="text-blue-200/60 text-sm tracking-wide">
|
|
Transportation logistics & event coordination
|
|
</p>
|
|
</div>
|
|
|
|
{/* Sign in card */}
|
|
<div className="w-full">
|
|
<button
|
|
onClick={() => loginWithRedirect()}
|
|
className="w-full group relative flex items-center justify-center gap-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold text-lg shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98] transition-all duration-200"
|
|
>
|
|
<LogIn className="h-5 w-5 transition-transform group-hover:-translate-x-0.5" />
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
|
|
{/* Footer note */}
|
|
<div className="flex items-center gap-2 text-blue-300/40 text-xs">
|
|
<Shield className="h-3.5 w-3.5" />
|
|
<span>Authorized personnel only</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|