login animations

src/components/auth/LoginPage.tsx

@@ -36,28 +36,33 @@ export function LoginPage() {
 
       <Card className="w-full max-w-md relative">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in stagger-1">
             <LogIn className="h-6 w-6 text-primary" />
           </div>
-          <CardTitle className="text-2xl">Welcome back</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-2xl animate-fade-in stagger-1">
+            Welcome back
+          </CardTitle>
+          <CardDescription className="animate-fade-in stagger-2">
             Log in to continue chasing your personal best.
           </CardDescription>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <div className="space-y-4">
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in">
               <Label htmlFor="email">Email</Label>
               <Input id="email" type="email" placeholder="[email protected]" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-1">
               <Label htmlFor="password">Password</Label>
               <Input id="password" type="password" placeholder="••••••••" />
             </div>
           </div>
 
-          <Button className="w-full" variant="secondary">
+          <Button
+            className="w-full animate-fade-in stagger-2"
+            variant="secondary"
+          >
             Log In
           </Button>