Skip to content

Update RegisterPage UI #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codeXsidd merged 1 commit into from
Mar 22, 2026
Merged

Update RegisterPage UI #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/google360399e413d23017.html
View file
Open in desktop

This file was deleted.

87 changes: 64 additions & 23 deletions frontend/src/pages/RegisterPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import { Link, useNavigate } from 'react-router-dom';
import { register as registerApi } from '../services/api';
import { useAuth } from '../context/AuthContext';
import toast from 'react-hot-toast';
import { BookOpen, Mail, Lock, User, Sparkles, Rocket, Star } from 'lucide-react';

const STEPS = [
{ emoji: '📚', title: 'Track Attendance', desc: 'Never miss the 75% mark again' },
{ emoji: '🎯', title: 'Manage Deadlines', desc: 'Stay ahead of every assignment' },
{ emoji: '📊', title: 'Calculate CGPA', desc: 'Semester-wise & year-wise GPA' },
{ emoji: '🔥', title: 'Build Streaks', desc: 'Gamify your study sessions' },
import {
BookOpen, Mail, Lock, User, Sparkles, Rocket, Star,
CheckCircle2, Flame, GraduationCap, Clock, ListTodo, TrendingUp
} from 'lucide-react';

const FEATURES = [
{ icon: <GraduationCap size={16} />, color: '#818cf8', text: 'GPA & CGPA tracker across all semesters' },
{ icon: <Clock size={16} />, color: '#10b981', text: 'Smart timetable with today\'s class view' },
{ icon: <CheckCircle2 size={16} />, color: '#f59e0b', text: 'Assignment deadlines & to-do lists' },
{ icon: <Flame size={16} />, color: '#ef4444', text: 'Study journal with activity heatmap' },
{ icon: <ListTodo size={16} />, color: '#a78bfa', text: 'Notes wall, portfolio & skill tracker' },
{ icon: <TrendingUp size={16} />, color: '#22d3ee', text: 'Attendance tracker with warnings' },
];

const RegisterPage = () => {
Expand Down Expand Up @@ -55,15 +60,22 @@ const RegisterPage = () => {
{/* Left panel */}
<div style={{
flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
padding: '3rem', maxWidth: 480,
padding: '3rem', maxWidth: 520,
background: 'linear-gradient(160deg, rgba(139,92,246,0.08) 0%, rgba(8,8,18,0) 70%)',
borderRight: '1px solid rgba(99,102,241,0.08)'
}} className="hide-mobile">
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '3rem' }}>
<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)' }}>
<BookOpen size={22} color="white" />
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: '3rem' }}>
<div style={{
width: 48, height: 48, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
boxShadow: '0 8px 28px rgba(99,102,241,0.4)'
}}>
<BookOpen size={24} color="white" />
</div>
<div>
<h1 className="gradient-text" style={{ fontSize: '1.5rem', fontWeight: 900, letterSpacing: '-0.03em' }}>StudyTrack</h1>
<p style={{ fontSize: '0.72rem', color: '#475569', fontWeight: 500 }}>Your personal study companion</p>
</div>
<h1 className="gradient-text" style={{ fontSize: '1.4rem', fontWeight: 900, letterSpacing: '-0.03em' }}>StudyTrack</h1>
</div>

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

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

{/* Creator's Note */}
<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' }}>
<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' }}>
Creator's Note
</div>
<p style={{ fontSize: '0.78rem', color: '#94a3b8', fontStyle: 'italic', lineHeight: 1.6, marginTop: 4 }}>
"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."
</p>
<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' }}>
<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>
<div>
<p style={{ fontSize: '0.75rem', color: '#e2e8f0', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
Siddharth
<span style={{ opacity: 0.5 }}>
<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>
</span>
</p>
<p style={{ fontSize: '0.6rem', color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: 2 }}>Full Stack Developer</p>
</div>
</a>
</div>

<div style={{ marginTop: '2rem', display: 'flex', alignItems: 'center', gap: 8 }}>
{[1, 2, 3, 4, 5].map(s => <Star key={s} size={13} fill="#f59e0b" color="#f59e0b" />)}
<span style={{ fontSize: '0.75rem', color: '#475569', marginLeft: 4 }}>Loved by students across campuses</span>
Expand Down Expand Up @@ -174,7 +208,14 @@ const RegisterPage = () => {
<Link to="/login" style={{ color: '#818cf8', fontWeight: 700, textDecoration: 'none' }}>Sign in →</Link>
</p>

<p style={{ textAlign: 'center', marginTop: '1rem', fontSize: '0.65rem', color: '#334155', lineHeight: 1.5 }}>
{/* Trust badges */}
<div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'center', marginTop: '1.25rem', flexWrap: 'wrap' }}>
{['🔒 Secure', '☁️ Cloud Sync', '📱 Mobile Ready'].map(b => (
<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>
))}
</div>

<p style={{ textAlign: 'center', marginTop: '1.25rem', fontSize: '0.65rem', color: '#334155', lineHeight: 1.5 }}>
By creating an account, you agree to store your data securely in our cloud.
</p>
</div>
Expand Down