Skip to content

Commit d16d9d9

Browse files
codeXsiddcodeXsidd
committed
Update RegisterPage UI
1 parent 8334614 commit d16d9d9

2 files changed

Lines changed: 64 additions & 24 deletions

File tree

‎frontend/google360399e413d23017.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎frontend/src/pages/RegisterPage.jsx‎

Lines changed: 64 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ import { Link, useNavigate } from 'react-router-dom';
33
import { register as registerApi } from '../services/api';
44
import { useAuth } from '../context/AuthContext';
55
import toast from 'react-hot-toast';
6-
import { BookOpen, Mail, Lock, User, Sparkles, Rocket, Star } from 'lucide-react';
7-
8-
const STEPS = [
9-
{ emoji: '📚', title: 'Track Attendance', desc: 'Never miss the 75% mark again' },
10-
{ emoji: '🎯', title: 'Manage Deadlines', desc: 'Stay ahead of every assignment' },
11-
{ emoji: '📊', title: 'Calculate CGPA', desc: 'Semester-wise & year-wise GPA' },
12-
{ emoji: '🔥', title: 'Build Streaks', desc: 'Gamify your study sessions' },
6+
import {
7+
BookOpen, Mail, Lock, User, Sparkles, Rocket, Star,
8+
CheckCircle2, Flame, GraduationCap, Clock, ListTodo, TrendingUp
9+
} from 'lucide-react';
10+
11+
const FEATURES = [
12+
{ icon: <GraduationCap size={16} />, color: '#818cf8', text: 'GPA & CGPA tracker across all semesters' },
13+
{ icon: <Clock size={16} />, color: '#10b981', text: 'Smart timetable with today\'s class view' },
14+
{ icon: <CheckCircle2 size={16} />, color: '#f59e0b', text: 'Assignment deadlines & to-do lists' },
15+
{ icon: <Flame size={16} />, color: '#ef4444', text: 'Study journal with activity heatmap' },
16+
{ icon: <ListTodo size={16} />, color: '#a78bfa', text: 'Notes wall, portfolio & skill tracker' },
17+
{ icon: <TrendingUp size={16} />, color: '#22d3ee', text: 'Attendance tracker with warnings' },
1318
];
1419

1520
const RegisterPage = () => {
@@ -55,15 +60,22 @@ const RegisterPage = () => {
5560
{/* Left panel */}
5661
<div style={{
5762
flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
58-
padding: '3rem', maxWidth: 480,
63+
padding: '3rem', maxWidth: 520,
5964
background: 'linear-gradient(160deg, rgba(139,92,246,0.08) 0%, rgba(8,8,18,0) 70%)',
6065
borderRight: '1px solid rgba(99,102,241,0.08)'
6166
}} className="hide-mobile">
62-
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '3rem' }}>
63-
<div style={{ width: 44, height: 44, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 24px rgba(99,102,241,0.4)' }}>
64-
<BookOpen size={22} color="white" />
67+
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: '3rem' }}>
68+
<div style={{
69+
width: 48, height: 48, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
70+
borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
71+
boxShadow: '0 8px 28px rgba(99,102,241,0.4)'
72+
}}>
73+
<BookOpen size={24} color="white" />
74+
</div>
75+
<div>
76+
<h1 className="gradient-text" style={{ fontSize: '1.5rem', fontWeight: 900, letterSpacing: '-0.03em' }}>StudyTrack</h1>
77+
<p style={{ fontSize: '0.72rem', color: '#475569', fontWeight: 500 }}>Your personal study companion</p>
6578
</div>
66-
<h1 className="gradient-text" style={{ fontSize: '1.4rem', fontWeight: 900, letterSpacing: '-0.03em' }}>StudyTrack</h1>
6779
</div>
6880

6981
<div style={{ marginBottom: '2.5rem' }}>
@@ -79,20 +91,42 @@ const RegisterPage = () => {
7991
</p>
8092
</div>
8193

82-
{/* What you get */}
83-
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.65rem' }}>
84-
{STEPS.map((s, i) => (
85-
<div key={i} className="fade-up" style={{
86-
padding: '0.85rem', background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.1)',
87-
borderRadius: 12, animationDelay: `${i * 0.08}s`
88-
}}>
89-
<p style={{ fontSize: '1.3rem', marginBottom: 4 }}>{s.emoji}</p>
90-
<p style={{ fontSize: '0.8rem', fontWeight: 700, color: '#e2e8f0', marginBottom: 2 }}>{s.title}</p>
91-
<p style={{ fontSize: '0.7rem', color: '#64748b' }}>{s.desc}</p>
94+
{/* Feature list */}
95+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
96+
{FEATURES.map((f, i) => (
97+
<div key={i} className="fade-up" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', animationDelay: `${i * 0.06}s` }}>
98+
<div style={{
99+
width: 30, height: 30, borderRadius: 8, background: `${f.color}18`,
100+
border: `1px solid ${f.color}33`, display: 'flex', alignItems: 'center',
101+
justifyContent: 'center', flexShrink: 0, color: f.color
102+
}}>{f.icon}</div>
103+
<span style={{ fontSize: '0.82rem', color: '#94a3b8', fontWeight: 500 }}>{f.text}</span>
92104
</div>
93105
))}
94106
</div>
95107

108+
{/* Creator's Note */}
109+
<div style={{ marginTop: '2.5rem', padding: '1rem 1.25rem', background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.12)', borderRadius: 12, position: 'relative' }}>
110+
<div style={{ position: 'absolute', top: -10, left: 16, background: '#0a0a14', padding: '0 8px', color: '#8b5cf6', fontSize: '0.65rem', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
111+
Creator's Note
112+
</div>
113+
<p style={{ fontSize: '0.78rem', color: '#94a3b8', fontStyle: 'italic', lineHeight: 1.6, marginTop: 4 }}>
114+
"I built StudyTrack because I needed a smarter way to manage my GPA, timetable, and study habits in one place. Built for students, by a student."
115+
</p>
116+
<a href="https://linkedin.com/in/siddharth2006" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', marginTop: 12, textDecoration: 'none', width: 'fit-content' }}>
117+
<div style={{ width: 28, height: 28, borderRadius: '50%', background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '0.75rem', fontWeight: 800 }}>S</div>
118+
<div>
119+
<p style={{ fontSize: '0.75rem', color: '#e2e8f0', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
120+
Siddharth
121+
<span style={{ opacity: 0.5 }}>
122+
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
123+
</span>
124+
</p>
125+
<p style={{ fontSize: '0.6rem', color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 2 }}>Full Stack Developer</p>
126+
</div>
127+
</a>
128+
</div>
129+
96130
<div style={{ marginTop: '2rem', display: 'flex', alignItems: 'center', gap: 8 }}>
97131
{[1, 2, 3, 4, 5].map(s => <Star key={s} size={13} fill="#f59e0b" color="#f59e0b" />)}
98132
<span style={{ fontSize: '0.75rem', color: '#475569', marginLeft: 4 }}>Loved by students across campuses</span>
@@ -174,7 +208,14 @@ const RegisterPage = () => {
174208
<Link to="/login" style={{ color: '#818cf8', fontWeight: 700, textDecoration: 'none' }}>Sign in →</Link>
175209
</p>
176210

177-
<p style={{ textAlign: 'center', marginTop: '1rem', fontSize: '0.65rem', color: '#334155', lineHeight: 1.5 }}>
211+
{/* Trust badges */}
212+
<div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'center', marginTop: '1.25rem', flexWrap: 'wrap' }}>
213+
{['🔒 Secure', '☁️ Cloud Sync', '📱 Mobile Ready'].map(b => (
214+
<span key={b} style={{ fontSize: '0.65rem', color: '#334155', fontWeight: 500, padding: '0.2rem 0.55rem', background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.1)', borderRadius: 20 }}>{b}</span>
215+
))}
216+
</div>
217+
218+
<p style={{ textAlign: 'center', marginTop: '1.25rem', fontSize: '0.65rem', color: '#334155', lineHeight: 1.5 }}>
178219
By creating an account, you agree to store your data securely in our cloud.
179220
</p>
180221
</div>

0 commit comments

Comments
 (0)