feat: uniform staggered page-load animations across all dashboard pages

This commit is contained in:
2026-10-23 14:35:20 +05:30
parent 19edf83684
commit 42813ef9e0
20 changed files with 101 additions and 76 deletions

View File

@@ -92,7 +92,7 @@ export default function AICoachDashboard() {
<div className="p-6 max-w-6xl mx-auto space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500">
{/* ── METRICS BAR ── */}
<div className="flex flex-wrap items-center justify-end gap-2 pt-2">
<div className="flex flex-wrap items-center justify-end gap-2 pt-2 animate-section animate-section-1">
<div className="inline-flex items-center gap-1.5 bg-yellow-500/10 text-yellow-500 px-3 py-1.5 rounded-xl text-xs font-bold border border-yellow-500/20">
<Flame size={14} className="fill-yellow-500" />
{user?.streak_count || 1}-Day Streak
@@ -108,10 +108,10 @@ export default function AICoachDashboard() {
</div>
{/* ── DAILY CHALLENGE BANNER ── */}
<DailyChallengeBanner />
<div className="animate-section animate-section-2"><DailyChallengeBanner /></div>
{/* ── QUICK STATS ── */}
<section className="grid grid-cols-2 md:grid-cols-5 gap-4">
<section className="grid grid-cols-2 md:grid-cols-5 gap-4 animate-section animate-section-3">
{[
{ label: "Questions Solved", value: questionsSolved, color: "text-[var(--cyan-ai)]", bg: "bg-[var(--cyan-ai-10)]", border: "border-[var(--cyan-ai-20)]", icon: <FileText size={32} /> },
{ label: "Overall Accuracy", value: overallAccuracy, color: "text-amber-500", bg: "bg-amber-500/5", border: "border-amber-500/20", icon: <Target size={32} /> },
@@ -130,7 +130,7 @@ export default function AICoachDashboard() {
</section>
{/* ── PREDICTIVE INTELLIGENCE ROW ── */}
<section className="mt-10">
<section className="mt-10 animate-section animate-section-4">
<div className="flex items-center justify-between gap-3 mb-6">
<div className="flex items-center gap-2 text-base md:text-lg font-black uppercase tracking-widest text-[var(--cyan-ai)]">
<Zap size={20} />
@@ -152,7 +152,7 @@ export default function AICoachDashboard() {
{/* ── HEATMAP / STUDY PLAN / WEEKLY REPORT ── */}
<section className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-10 border-t border-border">
<section className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-10 border-t border-border animate-section animate-section-5">
<div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2 text-base font-extrabold">