fix: uniform subtle minimal animations across all Pro tier and dashboard pages

This commit is contained in:
2026-10-23 16:56:49 +05:30
parent 43f23a9d92
commit eb3f4e719c
26 changed files with 62 additions and 49 deletions

View File

@@ -105,7 +105,7 @@ export default function AIComCBTDPPPage() {
return (
<div className="p-6 md:p-8 space-y-6 max-w-6xl mx-auto min-h-screen">
{/* Top Header */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-secondary/20 border border-border p-6 rounded-3xl backdrop-blur-xl">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-secondary/20 border border-border p-6 rounded-3xl backdrop-blur-xl animate-section animate-section-1">
<div className="flex items-center gap-4">
<Link href="/dashboard/dpp">
<Button variant="outline" size="icon" className="rounded-xl border-border hover:bg-secondary">
@@ -166,7 +166,7 @@ export default function AIComCBTDPPPage() {
)}
{/* Main CBT Grid */}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6 animate-section animate-section-2">
{/* Question Area */}
<div className="lg:col-span-3">
<Card className="border-border bg-background/80 backdrop-blur-xl p-6 rounded-3xl shadow-xl space-y-6">

View File

@@ -132,7 +132,7 @@ export default function DPPPage() {
const cleanTitle = (title: string) => title.replace(/\s*\(ExamEnum\.[^)]+\)/, '');
return (
<div className="p-8 space-y-6 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
<div className="p-8 space-y-6 max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row md:items-center justify-between p-8 bg-gradient-to-r from-secondary/50 to-background border border-border rounded-2xl shadow-sm gap-6">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">

View File

@@ -89,7 +89,7 @@ export default function CollegePredictorPage() {
const trendData = isDemo ? DEMO_TREND_DATA : ZERO_TREND_DATA
return (
<div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">

View File

@@ -35,7 +35,7 @@ export default function HeatmapPage() {
const criticalTopics = isDemo ? DEMO_CRITICAL_TOPICS : []
return (
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">

View File

@@ -89,7 +89,7 @@ export default function AICoachDashboard() {
const currentStreakDays = `${user?.streak_count || (isDemo ? 12 : 1)} d`
return (
<div className="p-6 max-w-6xl mx-auto space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500">
<div className="p-6 max-w-6xl mx-auto space-y-8">
{/* ── METRICS BAR ── */}
<div className="flex flex-wrap items-center justify-end gap-2 pt-2 animate-section animate-section-1">

View File

@@ -32,7 +32,7 @@ export default function ReadinessPage() {
const maxScore = Math.max(1, ...scoreHistory.map(d => d.score))
return (
<div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">

View File

@@ -24,7 +24,7 @@ export default function StrategyPage() {
const negMarkingData = isDemo ? DEMO_NEG_MARKING_DATA : ZERO_NEG_MARKING_DATA
return (
<div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">

View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
@@ -12,7 +12,7 @@ export default function StudyPlanPage() {
const streakCount = user?.streak_count || (isDemo ? 12 : 1)
return (
<div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">
@@ -34,7 +34,7 @@ export default function StudyPlanPage() {
</div>
{/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-1">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-2">
{[
{ label: "Tasks Today", value: isDemo ? "5" : "3", sub: isDemo ? "2 completed" : "0 completed", icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
{ label: "Study Hours Today", value: isDemo ? "3.8 hrs" : "0.0 hrs", sub: "Target: 5 hrs", icon: <Clock size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
@@ -52,7 +52,7 @@ export default function StudyPlanPage() {
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-section animate-section-2">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-section animate-section-3">
<div className="lg:col-span-2 space-y-8">
{/* Today's Schedule */}
<div className="space-y-3">

View File

@@ -69,7 +69,7 @@ export default function TimeOptimizationPage() {
]
return (
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">

View File

@@ -1,12 +1,12 @@
"use client"
"use client"
import { TutorChat } from "@/components/AI/TutorChat"
import { BrainCircuit, Sparkles } from "lucide-react"
export default function TutorChatPage() {
return (
<div className="h-[calc(100vh-100px)] w-full flex flex-col pt-4 max-w-7xl mx-auto px-4 gap-4 animate-in fade-in zoom-in-95 origin-top duration-500">
<div className="border-b border-border/50 pb-4">
<div className="h-[calc(100vh-100px)] w-full flex flex-col pt-4 max-w-7xl mx-auto px-4 gap-4">
<div className="border-b border-border/50 pb-4 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
@@ -26,7 +26,7 @@ export default function TutorChatPage() {
</div>
</div>
</div>
<div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background flex flex-col h-full">
<div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background flex flex-col h-full animate-section animate-section-2">
<TutorChat />
</div>
</div>

View File

@@ -41,7 +41,7 @@ export default function WeeklyProgressPage() {
const syllabusProgress = isDemo ? DEMO_SYLLABUS_PROGRESS : ZERO_SYLLABUS_PROGRESS
return (
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
{/* Page Header */}
<div className="border-b border-border/50 pb-6 animate-section animate-section-1">
<div className="flex items-start justify-between gap-4 flex-wrap">