Skip to content

Commit 1b3295e

Browse files
DevanshuNEUDevanshuNEU
committed
polish(auth): premium email verification screen with animations
- Animated Send icon with spring physics - Glow effect on icon container - Staggered fade-in animations for content - Email displayed in monospace badge - Better visual hierarchy and spacing
1 parent a0a1c2f commit 1b3295e

1 file changed

Lines changed: 97 additions & 30 deletions

File tree

‎frontend/src/components/auth/SignupForm.tsx‎

Lines changed: 97 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useState } from 'react'
22
import { useAuth } from '@/contexts/AuthContext'
33
import { useNavigate, Link } from 'react-router-dom'
4+
import { motion } from 'framer-motion'
45
import { Button } from '@/components/ui/button'
56
import { Input } from '@/components/ui/input'
67
import { Label } from '@/components/ui/label'
78
import { Alert, AlertDescription } from '@/components/ui/alert'
89
import { Navbar } from '@/components/landing'
9-
import { Github, Loader2, Mail, Lock, CheckCircle2 } from 'lucide-react'
10+
import { Github, Loader2, Mail, Lock, CheckCircle2, Send, ArrowLeft } from 'lucide-react'
1011

1112
export function SignupForm() {
1213
const [email, setEmail] = useState('')
@@ -76,38 +77,104 @@ export function SignupForm() {
7677
<div className="w-full max-w-sm">
7778
{/* Email Verification Sent */}
7879
{emailSent ? (
79-
<div className="text-center">
80-
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center">
81-
<CheckCircle2 className="w-8 h-8 text-green-500" />
82-
</div>
83-
<h1 className="text-2xl font-semibold text-foreground mb-2">
84-
Check your email
85-
</h1>
86-
<p className="text-sm text-muted-foreground mb-6">
87-
We sent a verification link to<br />
88-
<span className="font-medium text-foreground">{email}</span>
89-
</p>
90-
<div className="bg-card rounded-lg border border-border p-4 text-sm text-muted-foreground">
91-
<p className="mb-2">
92-
Click the link in the email to verify your account and get started.
93-
</p>
94-
<p>
95-
Didn't receive it? Check your spam folder or{' '}
96-
<button
97-
onClick={() => setEmailSent(false)}
98-
className="text-primary hover:underline"
80+
<motion.div
81+
initial={{ opacity: 0, y: 20 }}
82+
animate={{ opacity: 1, y: 0 }}
83+
className="text-center"
84+
>
85+
{/* Animated Icon */}
86+
<div className="relative w-24 h-24 mx-auto mb-8">
87+
{/* Outer glow ring */}
88+
<motion.div
89+
initial={{ scale: 0.8, opacity: 0 }}
90+
animate={{ scale: 1, opacity: 1 }}
91+
transition={{ delay: 0.2, duration: 0.5 }}
92+
className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/20 to-purple-500/20 blur-xl"
93+
/>
94+
{/* Icon container */}
95+
<motion.div
96+
initial={{ scale: 0 }}
97+
animate={{ scale: 1 }}
98+
transition={{ type: "spring", stiffness: 200, damping: 15, delay: 0.1 }}
99+
className="relative w-24 h-24 rounded-full bg-gradient-to-br from-primary/10 to-purple-500/10 border border-primary/30 flex items-center justify-center"
100+
>
101+
<motion.div
102+
initial={{ scale: 0, rotate: -180 }}
103+
animate={{ scale: 1, rotate: 0 }}
104+
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.3 }}
99105
>
100-
try again
101-
</button>
102-
</p>
106+
<Send className="w-10 h-10 text-primary" />
107+
</motion.div>
108+
</motion.div>
103109
</div>
104-
<Link
105-
to="/login"
106-
className="inline-block mt-6 text-sm text-muted-foreground hover:text-foreground"
110+
111+
{/* Title */}
112+
<motion.h1
113+
initial={{ opacity: 0, y: 10 }}
114+
animate={{ opacity: 1, y: 0 }}
115+
transition={{ delay: 0.4 }}
116+
className="text-3xl font-bold text-foreground mb-3"
107117
>
108-
← Back to login
109-
</Link>
110-
</div>
118+
Check your inbox
119+
</motion.h1>
120+
121+
{/* Email display */}
122+
<motion.div
123+
initial={{ opacity: 0, y: 10 }}
124+
animate={{ opacity: 1, y: 0 }}
125+
transition={{ delay: 0.5 }}
126+
className="mb-8"
127+
>
128+
<p className="text-muted-foreground mb-2">We sent a verification link to</p>
129+
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/5 border border-primary/20">
130+
<Mail className="w-4 h-4 text-primary" />
131+
<span className="font-mono text-sm text-foreground">{email}</span>
132+
</div>
133+
</motion.div>
134+
135+
{/* Instructions card */}
136+
<motion.div
137+
initial={{ opacity: 0, y: 10 }}
138+
animate={{ opacity: 1, y: 0 }}
139+
transition={{ delay: 0.6 }}
140+
className="bg-card/50 backdrop-blur-sm rounded-xl border border-border p-6 mb-6"
141+
>
142+
<div className="flex items-start gap-4 text-left">
143+
<div className="w-8 h-8 rounded-lg bg-green-500/10 border border-green-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
144+
<CheckCircle2 className="w-4 h-4 text-green-500" />
145+
</div>
146+
<div>
147+
<p className="text-sm text-foreground font-medium mb-1">
148+
Click the link in the email to verify your account
149+
</p>
150+
<p className="text-sm text-muted-foreground">
151+
Didn't receive it? Check your spam folder or{' '}
152+
<button
153+
onClick={() => setEmailSent(false)}
154+
className="text-primary hover:underline font-medium"
155+
>
156+
try again
157+
</button>
158+
</p>
159+
</div>
160+
</div>
161+
</motion.div>
162+
163+
{/* Back link */}
164+
<motion.div
165+
initial={{ opacity: 0 }}
166+
animate={{ opacity: 1 }}
167+
transition={{ delay: 0.7 }}
168+
>
169+
<Link
170+
to="/login"
171+
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
172+
>
173+
<ArrowLeft className="w-4 h-4" />
174+
Back to login
175+
</Link>
176+
</motion.div>
177+
</motion.div>
111178
) : (
112179
<>
113180
<div className="text-center mb-8">

0 commit comments

Comments
 (0)