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

@@ -262,7 +262,7 @@ export default function ProgressTrackerPage() {
return (
<PremiumGate featureKey="chapter-wise-progress-tracking">
<div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
@@ -276,7 +276,7 @@ export default function ProgressTrackerPage() {
</div>
</div>
<div className={`grid grid-cols-1 sm:grid-cols-2 ${subjects.length >= 4 ? 'lg:grid-cols-4' : 'md:grid-cols-3'} gap-6 mb-8`}>
<div className={`grid grid-cols-1 sm:grid-cols-2 ${subjects.length >= 4 ? 'lg:grid-cols-4' : 'md:grid-cols-3'} gap-6 mb-8 animate-section animate-section-2`}>
{subjects.map((sub, i) => (
<Card key={i} className="border-border shadow-sm">
<CardContent className="p-6 text-center">
@@ -290,7 +290,7 @@ export default function ProgressTrackerPage() {
))}
</div>
<div className="space-y-6">
<div className="space-y-6 animate-section animate-section-3">
{subjects.map((subject, subIndex) => (
<Card key={subIndex} className="border-border shadow-sm overflow-hidden">
<CardHeader className="bg-secondary/30 pb-4 border-b border-border">