From c1ef614ed3ff2ecd97c3be200ba48c582f1db389 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 20:06:33 +0100
Subject: [PATCH] Register animations

---
 src/components/auth/ContinueWith.tsx |  4 ++--
 src/components/auth/RegisterPage.tsx | 21 +++++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/auth/ContinueWith.tsx b/src/components/auth/ContinueWith.tsx
index 030349c..9e94783 100644
--- a/src/components/auth/ContinueWith.tsx
+++ b/src/components/auth/ContinueWith.tsx
@@ -15,12 +15,12 @@ export default function ContinueWith() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-3 animate-fade-in stagger-4">
         <Button variant="outline">
           <Github className="h-4 w-4" />
           GitHub
         </Button>
-        <Button variant="outline">
+        <Button variant="outline" className="animate-fade-in stagger-5">
           <Mail className="h-4 w-4" />
           Google
         </Button>
diff --git a/src/components/auth/RegisterPage.tsx b/src/components/auth/RegisterPage.tsx
index 541d8f8..2b1158c 100644
--- a/src/components/auth/RegisterPage.tsx
+++ b/src/components/auth/RegisterPage.tsx
@@ -28,36 +28,41 @@ export function RegisterPage() {
 
       <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">
             <UserPlus className="h-6 w-6 text-primary" />
           </div>
-          <CardTitle className="text-2xl">Create your account</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-2xl animate-fade-in stagger-1">
+            Create your account
+          </CardTitle>
+          <CardDescription className="animate-fade-in stagger-2">
             Join the grind. Track runs, set records, compete globally.
           </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="username">Username</Label>
               <Input id="username" placeholder="speedrunner67" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-1">
               <Label htmlFor="email">Email</Label>
               <Input id="email" type="email" placeholder="you@example.com" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-2">
               <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-3"
+            variant="secondary"
+          >
             Create Account
           </Button>
 
-          <ContinueWith  />
+          <ContinueWith />
 
           <p className="text-center text-sm text-muted-foreground">
             Already have an account?{" "}