naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

Browse Source 
- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark)
  + opacity variants --cyan-ai-10/20/30/40/50/80
- Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with
  var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files
- Shadow glow colours also updated (suppressed by box-shadow:none in light mode)
- TypeScript: 0 errors
This commit is contained in:
ectasy663
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -114,7 +114,7 @@ export default function AIComCBTDPPPage() {
</Link>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-black uppercase tracking-widest text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-0.5 rounded-full border border-[#00F0FF]/30">
<span className="text-xs font-black uppercase tracking-widest text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2.5 py-0.5 rounded-full border border-[var(--cyan-ai-30)]">
PrepPilot AI
</span>
<span className="text-xs font-bold text-muted-foreground">• {user?.target_exam?.replace("_", " ") || "JEE/NEET"}</span>
@@ -124,14 +124,14 @@ export default function AIComCBTDPPPage() {
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[#00F0FF] shadow-inner">
<Clock size={18} className="text-[#00F0FF] animate-pulse" />
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[var(--cyan-ai)] shadow-inner">
<Clock size={18} className="text-[var(--cyan-ai)] animate-pulse" />
{formatTime(timeLeft)}
</div>
{!submitted ? (
<Button
onClick={() => setSubmitted(true)}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)]"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)]"
>
Submit Test <Send size={16} className="ml-2" />
</Button>
@@ -171,7 +171,7 @@ export default function AIComCBTDPPPage() {
<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">
<div className="flex justify-between items-center border-b border-border pb-4">
<span className="text-sm font-bold text-[#00F0FF] uppercase tracking-wider">
<span className="text-sm font-bold text-[var(--cyan-ai)] uppercase tracking-wider">
Question {activeQuestion + 1} of {sampleQuestions.length}
</span>
<span className="text-xs font-bold bg-secondary px-3 py-1 rounded-full text-muted-foreground">
@@ -192,7 +192,7 @@ export default function AIComCBTDPPPage() {
let btnStyle = "border-border bg-secondary/20 hover:border-primary/50 text-foreground"
if (isSelected) {
btnStyle = "border-[#00F0FF] bg-[#00F0FF]/15 text-[#00F0FF] font-bold shadow-[0_0_12px_rgba(0,240,255,0.15)]"
btnStyle = "border-[var(--cyan-ai)] bg-[var(--cyan-ai)]/15 text-[var(--cyan-ai)] font-bold shadow-[0_0_12px_rgba(12,96,96,0.15)]"
}
if (submitted) {
if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold"
@@ -216,7 +216,7 @@ export default function AIComCBTDPPPage() {
</div>
{submitted && (
<div className="mt-6 p-4 rounded-2xl bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-sm text-[#00F0FF] space-y-1 animate-in fade-in">
<div className="mt-6 p-4 rounded-2xl bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-sm text-[var(--cyan-ai)] space-y-1 animate-in fade-in">
<span className="font-extrabold uppercase text-xs tracking-wider block">AI Solution & Explanation:</span>
<p>{sampleQuestions[activeQuestion].explanation}</p>
</div>
@@ -236,7 +236,7 @@ export default function AIComCBTDPPPage() {
<Button
disabled={activeQuestion === sampleQuestions.length - 1}
onClick={() => setActiveQuestion(prev => Math.min(sampleQuestions.length - 1, prev + 1))}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl"
>
Next Question <ArrowRight size={16} className="ml-2" />
</Button>
@@ -258,9 +258,9 @@ export default function AIComCBTDPPPage() {
onClick={() => setActiveQuestion(idx)}
className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${
isCurr
? "border-[#00F0FF] bg-[#00F0FF] text-black ring-2 ring-[#00F0FF]/50"
? "border-[var(--cyan-ai)] bg-[var(--cyan-ai)] text-black ring-2 ring-[var(--cyan-ai-10)]"
: isAns
? "bg-[#00F0FF]/20 border-[#00F0FF]/40 text-[#00F0FF]"
? "bg-[var(--cyan-ai-20)] border-[var(--cyan-ai-40)] text-[var(--cyan-ai)]"
: "bg-secondary/40 border-border text-muted-foreground hover:border-primary"
}`}
>
@@ -272,10 +272,10 @@ export default function AIComCBTDPPPage() {
<div className="pt-4 border-t border-border space-y-2 text-xs font-semibold text-muted-foreground">
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]" /> Current Question
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai)]" /> Current Question
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]/20 border border-[#00F0FF]/40" /> Answered
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai-20)] border border-[var(--cyan-ai-40)]" /> Answered
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-secondary/40 border border-border" /> Unattempted

24
src/app/dashboard/ai-coach/cbt-dpp/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
@@ -98,8 +98,8 @@ export default function AIDailyPracticePage() {
<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">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Sparkles className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Sparkles className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
AI Daily Practice (DPP)
</h1>
@@ -108,7 +108,7 @@ export default function AIDailyPracticePage() {
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5">
<BrainCircuit size={12} /> AI Powered
</span>
</div>
@@ -121,7 +121,7 @@ export default function AIDailyPracticePage() {
type="date"
value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)}
className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none text-muted-foreground mr-2"
className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none text-muted-foreground mr-2"
/>
<span className="text-sm font-bold text-muted-foreground mr-2"><Filter size={16} className="inline mr-1"/> Difficulty:</span>
{['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
@@ -158,15 +158,15 @@ export default function AIDailyPracticePage() {
const isExpired = endTime ? now > endTime : false;
return (
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[var(--cyan-ai-10)] bg-background'}`}>
<CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[var(--cyan-ai)] transition-colors flex items-center justify-center"></div>}
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF]">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)]">
{user?.target_exam?.replace("_", " ") || "JEE/NEET"}
</span>
<span className="text-muted-foreground text-xs font-bold">•</span>
@@ -183,7 +183,7 @@ export default function AIDailyPracticePage() {
</>
) : null}
</div>
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors">
<h3 className="font-bold text-lg leading-tight group-hover:text-[var(--cyan-ai)] transition-colors">
{cleanTitle(dpp.title)}
</h3>
<div className="mt-1">
@@ -213,7 +213,7 @@ export default function AIDailyPracticePage() {
</Link>
{!isExpired && (
<Link href={`/cbt/${dpp.id}`}>
<Button variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
<Button variant="secondary" size="sm" className="font-bold bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-20)] gap-2">
<Play size={14} className="fill-current" /> Retake Test
</Button>
</Link>
@@ -221,7 +221,7 @@ export default function AIDailyPracticePage() {
</>
) : (
<Link href={`/cbt/${dpp.id}`}>
<Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
<Button variant="secondary" size="sm" className="rounded-xl bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(12,96,96,0.2)]">
<Play size={14} className="fill-black" /> Launch Practice Test
</Button>
</Link>
@@ -326,7 +326,7 @@ export default function AIDailyPracticePage() {
Close Reader
</Button>
<Link href="/upgrade">
<Button className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)] text-xs h-9">
<Button className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)] text-xs h-9">
<Sparkles size={14} className="mr-1.5" /> Upgrade to AI Coach
</Button>
</Link>

28
src/app/dashboard/ai-coach/college-predictor/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { CollegePredictorCard } from "@/components/AI/CollegePredictorCard"
import { Card, CardContent } from "@/components/ui/card"
@@ -27,8 +27,8 @@ export default function CollegePredictorPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<GraduationCap className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<GraduationCap className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
AI College &amp; Cutoff Predictor
</h1>
@@ -36,7 +36,7 @@ export default function CollegePredictorPage() {
Discover your probable target medical &amp; engineering colleges based on current mock exam scores and historical cutoffs.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<GraduationCap size={12} /> AI Powered
</span>
</div>
@@ -45,7 +45,7 @@ export default function CollegePredictorPage() {
{/* Summary KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Predicted Rank", value: isDemo ? "~4,200" : "--", icon: <TrendingUp size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
{ label: "Predicted Rank", value: isDemo ? "~4,200" : "--", icon: <TrendingUp size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
{ label: "Target Colleges", value: isDemo ? "12" : "0", icon: <Building2 size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Reach Colleges", value: isDemo ? "5" : "0", icon: <MapPin size={18} className="text-purple-400" />, color: "border-purple-400/20 bg-purple-400/5" },
{ label: "Safe Colleges", value: isDemo ? "18" : "0", icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
@@ -68,7 +68,7 @@ export default function CollegePredictorPage() {
{/* Cutoff Trend Chart */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
<div className="flex items-center gap-2 mb-6">
<BarChart2 size={20} className="text-[#00F0FF]" />
<BarChart2 size={20} className="text-[var(--cyan-ai)]" />
<h3 className="text-lg font-extrabold tracking-tight">NIT Trichy CSE — Closing Rank Trend</h3>
<span className="ml-auto text-xs font-bold text-green-400 bg-green-400/10 border border-green-400/20 px-2.5 py-1 rounded-full flex items-center gap-1">
<TrendingUp size={11} /> Improving Cutoffs
@@ -79,7 +79,7 @@ export default function CollegePredictorPage() {
<div key={d.year} className="flex flex-col items-center gap-1.5 flex-1">
<span className="text-xs font-black text-muted-foreground">{d.rank.toLocaleString()}</span>
<div
className={`w-full rounded-t-md transition-all duration-700 ${i === CUTOFF_TRENDS.length - 1 ? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]" : "bg-gradient-to-t from-white/10 to-white/25"}`}
className={`w-full rounded-t-md transition-all duration-700 ${i === CUTOFF_TRENDS.length - 1 ? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]" : "bg-gradient-to-t from-white/10 to-white/25"}`}
style={{ height: `${(d.rank / maxRank) * 80}px` }}
/>
<span className="text-xs text-muted-foreground font-semibold">{d.year}</span>
@@ -91,25 +91,25 @@ export default function CollegePredictorPage() {
</div>
<div className="space-y-6">
<Card className="p-6 bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/30 rounded-3xl space-y-4">
<h3 className="text-base font-black tracking-tight text-[#00F0FF] flex items-center gap-2">
<Card className="p-6 bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-30)] rounded-3xl space-y-4">
<h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
<Award size={18} /> Cutoff Modelling Parameters
</h3>
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span>Trained on <strong className="text-foreground">100,000+ candidate rank trends</strong> across 2021–2025 counselling rounds.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span>Supports <strong className="text-foreground">All India Quota (AIQ)</strong> &amp; State Quota seat adjustments.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span>Simulates <strong className="text-foreground">category reservation cutoffs</strong>: General, OBC, SC, ST, EWS.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span>Score updated daily as you complete more mock tests.</span>
</li>
</ul>
@@ -125,7 +125,7 @@ export default function CollegePredictorPage() {
<span>in Maths &rarr; upgrades you from NIT Trichy to <strong className="text-foreground">IIT Roorkee</strong></span>
</li>
<li className="flex items-start gap-2">
<span className="text-[#00F0FF] font-black shrink-0">Fix Optics</span>
<span className="text-[var(--cyan-ai)] font-black shrink-0">Fix Optics</span>
<span>errors to recover ~8 marks in Physics alone</span>
</li>
<li className="flex items-start gap-2">

14
src/app/dashboard/ai-coach/heatmap/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target, CheckCircle2 } from "lucide-react"
@@ -41,8 +41,8 @@ export default function HeatmapPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Flame className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Flame className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Mistake Heatmap Vault
</h1>
@@ -50,7 +50,7 @@ export default function HeatmapPage() {
Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<AlertTriangle size={12} /> Error Density Analysis
</span>
</div>
@@ -143,9 +143,9 @@ export default function HeatmapPage() {
</Card>
{/* Action card */}
<Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
<Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
<CardContent className="p-5 space-y-3">
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">What To Do Next</h3>
<h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">What To Do Next</h3>
<div className="space-y-2">
{[
{ label: "Start Mistake Review Session", href: "/dashboard/ai-coach/mistakes" },
@@ -166,7 +166,7 @@ export default function HeatmapPage() {
<Card className="bg-secondary/20 border-border/40 rounded-2xl">
<CardContent className="p-4">
<div className="flex items-start gap-2.5">
<BookOpen size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<BookOpen size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<p className="text-xs text-muted-foreground font-medium">
<span className="font-black text-foreground">Pro Tip:</span> Focus the next 3 days entirely on Rotational Dynamics — it alone is worth 8–12 marks in JEE and shows an 80% error rate across your last 5 tests.
</p>

24
src/app/dashboard/ai-coach/mistakes/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
@@ -63,8 +63,8 @@ export default function MistakeTrackingPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<BrainCircuit className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<BrainCircuit className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Mistake Review &amp; Spaced Repetition
</h1>
@@ -72,7 +72,7 @@ export default function MistakeTrackingPage() {
Review logged errors using our AI-powered spaced repetition engine. Questions resurface at optimal intervals to cement long-term retention.
</p>
</div>
<Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20 font-bold uppercase tracking-wider text-xs px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Badge variant="outline" className="bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)] font-bold uppercase tracking-wider text-xs px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Sparkles size={12} /> AI Powered
</Badge>
</div>
@@ -84,7 +84,7 @@ export default function MistakeTrackingPage() {
{[
{ label: "In Today's Queue", value: mistakes.length.toString(), icon: <Flame size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Reviewed This Session", value: completedCount.toString(), icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
{ label: "Session Progress", value: `${progressPct}%`, icon: <Target size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
{ label: "Session Progress", value: `${progressPct}%`, icon: <Target size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
{ label: "Avg Error Rate", value: avgErrorRate, icon: <TrendingDown size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
].map(kpi => (
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color}`}>
@@ -103,11 +103,11 @@ export default function MistakeTrackingPage() {
<div className="space-y-1.5">
<div className="flex justify-between text-xs font-bold text-muted-foreground">
<span>Session Progress</span>
<span className="text-[#00F0FF]">{completedCount} of {mistakes.length} reviewed</span>
<span className="text-[var(--cyan-ai)]">{completedCount} of {mistakes.length} reviewed</span>
</div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-[#00F0FF] to-teal-400 rounded-full transition-all duration-500"
className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-full transition-all duration-500"
style={{ width: `${progressPct}%` }}
/>
</div>
@@ -123,7 +123,7 @@ export default function MistakeTrackingPage() {
Active Review Queue
</h2>
{mistakes.length > 0 && (
<span className="text-sm font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-1.5 rounded-full border border-[#00F0FF]/20">
<span className="text-sm font-bold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-4 py-1.5 rounded-full border border-[var(--cyan-ai-20)]">
{currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Complete"}
</span>
)}
@@ -131,7 +131,7 @@ export default function MistakeTrackingPage() {
{loading ? (
<Card className="min-h-[480px] h-full flex flex-col items-center justify-center border-dashed p-8 gap-4">
<RefreshCw className="animate-spin text-[#00F0FF]" size={28} />
<RefreshCw className="animate-spin text-[var(--cyan-ai)]" size={28} />
<span className="text-base font-semibold text-muted-foreground">Loading your review queue...</span>
</Card>
) : mistakes.length === 0 ? (
@@ -154,15 +154,15 @@ export default function MistakeTrackingPage() {
onSubmitReview={submitReview}
/>
) : (
<Card className="min-h-[480px] h-full flex flex-col items-center justify-center text-center border-dashed bg-[#00F0FF]/5 border-[#00F0FF]/30 rounded-3xl p-8 gap-4">
<BrainCircuit size={56} className="text-[#00F0FF]" />
<Card className="min-h-[480px] h-full flex flex-col items-center justify-center text-center border-dashed bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-30)] rounded-3xl p-8 gap-4">
<BrainCircuit size={56} className="text-[var(--cyan-ai)]" />
<div>
<h3 className="text-xl font-bold mb-2">Session Complete! 🎉</h3>
<p className="text-muted-foreground text-sm max-w-md mx-auto font-medium">
All {mistakes.length} questions reviewed. The AI engine has scheduled your next review intervals.
</p>
</div>
<Button onClick={() => window.location.reload()} className="bg-[#00F0FF] text-black font-bold rounded-xl px-6 h-10 text-sm">
<Button onClick={() => window.location.reload()} className="bg-[var(--cyan-ai)] text-black font-bold rounded-xl px-6 h-10 text-sm">
Check for New Errors
</Button>
</Card>

34
src/app/dashboard/ai-coach/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useEffect, useState } from "react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
@@ -89,7 +89,7 @@ export default function AICoachDashboard() {
return (
<div className="h-screen flex items-center justify-center">
<div className="flex flex-col items-center gap-3 text-muted-foreground">
<BrainCircuit size={32} className="animate-pulse text-[#00F0FF]" />
<BrainCircuit size={32} className="animate-pulse text-[var(--cyan-ai)]" />
<span className="text-sm font-medium">Loading AI Coach...</span>
</div>
</div>
@@ -99,7 +99,7 @@ export default function AICoachDashboard() {
if (!hasAccessTo("ai-mistake-tracking")) {
return (
<div className="max-w-3xl mx-auto text-center py-20 px-8 space-y-8 animate-in fade-in duration-500">
<div className="size-20 rounded-full bg-[#00F0FF]/10 flex items-center justify-center mx-auto text-[#00F0FF] border border-[#00F0FF]/20 shadow-[0_0_20px_rgba(0,240,255,0.1)]">
<div className="size-20 rounded-full bg-[var(--cyan-ai-10)] flex items-center justify-center mx-auto text-[var(--cyan-ai)] border border-[var(--cyan-ai-20)] shadow-[0_0_20px_rgba(12,96,96,0.1)]">
<BrainCircuit size={40} />
</div>
<div className="space-y-4">
@@ -110,7 +110,7 @@ export default function AICoachDashboard() {
</div>
<div className="pt-4">
<Link href="/upgrade">
<Button size="lg" className="rounded-xl px-8 font-bold bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 shadow-[0_0_25px_-5px_#00F0FF]">
<Button size="lg" className="rounded-xl px-8 font-bold bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] shadow-[0_0_25px_-5px_var(--cyan-ai)]">
Upgrade to AI Coach Plan
</Button>
</Link>
@@ -151,7 +151,7 @@ export default function AICoachDashboard() {
{/* ── QUICK STATS ── */}
<section className="grid grid-cols-2 md:grid-cols-5 gap-4">
{[
{ label: "Questions Solved", value: questionsSolved, color: "text-[#00F0FF]", bg: "bg-[#00F0FF]/5", border: "border-[#00F0FF]/20", icon: <FileText size={32} /> },
{ 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} /> },
{ label: "Current Streak", value: currentStreakDays, color: "text-yellow-400", bg: "bg-yellow-400/5", border: "border-yellow-400/20", icon: <Flame size={32} className="fill-yellow-400" /> },
{ label: "Mistakes Mastered", value: mistakesMastered, color: "text-green-400", bg: "bg-green-400/5", border: "border-green-400/20", icon: <CheckCircle2 size={32} /> },
@@ -170,12 +170,12 @@ export default function AICoachDashboard() {
{/* ── PREDICTIVE INTELLIGENCE ROW ── */}
<section className="mt-10">
<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-[#00F0FF]">
<div className="flex items-center gap-2 text-base md:text-lg font-black uppercase tracking-widest text-[var(--cyan-ai)]">
<Zap size={20} />
Predictive Intelligence & Strategy
</div>
<div className="flex items-center gap-3">
<Link href="/dashboard/ai-coach/readiness" className="text-xs font-bold text-[#00F0FF] hover:underline flex items-center gap-1">
<Link href="/dashboard/ai-coach/readiness" className="text-xs font-bold text-[var(--cyan-ai)] hover:underline flex items-center gap-1">
Full Analytics →
</Link>
</div>
@@ -192,8 +192,8 @@ export default function AICoachDashboard() {
<section className="mt-12">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<div className="p-2.5 bg-[#00F0FF]/10 rounded-xl border border-[#00F0FF]/20">
<BrainCircuit size={24} className="text-[#00F0FF]" />
<div className="p-2.5 bg-[var(--cyan-ai-10)] rounded-xl border border-[var(--cyan-ai-20)]">
<BrainCircuit size={24} className="text-[var(--cyan-ai)]" />
</div>
<div>
<h2 className="text-2xl md:text-3xl font-black tracking-tight">Daily Mistake Review Queue</h2>
@@ -201,10 +201,10 @@ export default function AICoachDashboard() {
</div>
</div>
<div className="flex items-center gap-3">
<Link href="/dashboard/ai-coach/mistakes" className="hidden sm:inline-flex text-xs font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-2 rounded-xl border border-[#00F0FF]/30 hover:bg-[#00F0FF] hover:text-black transition-all">
<Link href="/dashboard/ai-coach/mistakes" className="hidden sm:inline-flex text-xs font-extrabold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-4 py-2 rounded-xl border border-[var(--cyan-ai-30)] hover:bg-[var(--cyan-ai)] hover:text-black transition-all">
Open Full Mistake Vault Page →
</Link>
<span className="text-sm font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-4 py-1.5 rounded-full border border-[#00F0FF]/30 shadow-[0_0_10px_rgba(0,240,255,0.15)]">
<span className="text-sm font-extrabold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-4 py-1.5 rounded-full border border-[var(--cyan-ai-30)] shadow-[0_0_10px_rgba(12,96,96,0.15)]">
{currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Finished"}
</span>
</div>
@@ -241,9 +241,9 @@ export default function AICoachDashboard() {
<div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2 text-base font-extrabold">
<BookOpen size={18} className="text-[#00F0FF]" /> Study Plan
<BookOpen size={18} className="text-[var(--cyan-ai)]" /> Study Plan
</div>
<Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[#00F0FF] hover:underline">
<Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[var(--cyan-ai)] hover:underline">
Full Schedule →
</Link>
</div>
@@ -254,7 +254,7 @@ export default function AICoachDashboard() {
<div className="flex items-center gap-2 text-base font-extrabold">
<Flame size={18} className="text-yellow-500" /> Mistake Heatmap
</div>
<Link href="/dashboard/ai-coach/mistakes" className="text-xs font-bold text-[#00F0FF] hover:underline">
<Link href="/dashboard/ai-coach/mistakes" className="text-xs font-bold text-[var(--cyan-ai)] hover:underline">
Heatmap Vault →
</Link>
</div>
@@ -265,9 +265,9 @@ export default function AICoachDashboard() {
<section className="pt-8 border-t border-border">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2 text-base font-extrabold">
<Target size={18} className="text-[#00F0FF]" /> Weekly Progress Overview
<Target size={18} className="text-[var(--cyan-ai)]" /> Weekly Progress Overview
</div>
<Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[#00F0FF] hover:underline">
<Link href="/dashboard/ai-coach/study-plan" className="text-xs font-bold text-[var(--cyan-ai)] hover:underline">
View Details →
</Link>
</div>
@@ -278,7 +278,7 @@ export default function AICoachDashboard() {
<section className="pt-8 border-t border-border">
<div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-extrabold tracking-tight">24/7 AI Tutor Chat Assistant</h2>
<Link href="/dashboard/ai-coach/tutor" className="text-xs font-extrabold text-[#00F0FF] bg-[#00F0FF]/10 px-3.5 py-1.5 rounded-xl border border-[#00F0FF]/30 hover:bg-[#00F0FF] hover:text-black transition-all">
<Link href="/dashboard/ai-coach/tutor" className="text-xs font-extrabold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-3.5 py-1.5 rounded-xl border border-[var(--cyan-ai-30)] hover:bg-[var(--cyan-ai)] hover:text-black transition-all">
Full Desk Mode →
</Link>
</div>

26
src/app/dashboard/ai-coach/readiness/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { ReadinessGauge } from "@/components/AI/ReadinessGauge"
import { Card, CardContent } from "@/components/ui/card"
@@ -38,8 +38,8 @@ export default function ReadinessPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Gauge className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Gauge className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Exam Readiness Analytics
</h1>
@@ -47,7 +47,7 @@ export default function ReadinessPage() {
Real-time algorithmic prediction of your exam readiness — based on speed, accuracy, syllabus coverage, and test history.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Gauge size={12} /> AI Powered
</span>
</div>
@@ -56,12 +56,12 @@ export default function ReadinessPage() {
{/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Overall Score", value: isDemo ? "72 / 100" : "0 / 100", trend: isDemo ? "+5 this week" : "Baseline", trendUp: true, icon: <Gauge size={20} className="text-[#00F0FF]" /> },
{ label: "Overall Score", value: isDemo ? "72 / 100" : "0 / 100", trend: isDemo ? "+5 this week" : "Baseline", trendUp: true, icon: <Gauge size={20} className="text-[var(--cyan-ai)]" /> },
{ label: "Accuracy Rate", value: isDemo ? "88%" : "0%", trend: isDemo ? "+3% vs last week" : "0 attempts", trendUp: isDemo, icon: <Target size={20} className="text-amber-400" /> },
{ label: "Avg Speed / Q", value: isDemo ? "45 sec" : "-- sec", trend: isDemo ? "↓ Needs work" : "Not tested", trendUp: false, icon: <Clock size={20} className="text-red-400" /> },
{ label: "Syllabus Covered", value: isDemo ? "64%" : "0%", trend: isDemo ? "+8% this month" : "Day 1", trendUp: true, icon: <BookOpen size={20} className="text-emerald-400" /> },
].map((kpi) => (
<Card key={kpi.label} className="border-border/60 bg-secondary/10 rounded-2xl hover:border-[#00F0FF]/30 transition-colors">
<Card key={kpi.label} className="border-border/60 bg-secondary/10 rounded-2xl hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5">
<div className="flex items-center justify-between mb-3">
{kpi.icon}
@@ -83,7 +83,7 @@ export default function ReadinessPage() {
<div className="flex items-center gap-2 mb-5">
<Award className="text-amber-400" size={22} />
<h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2>
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-2.5 py-1 rounded-full">
<span className="ml-auto text-xs font-bold text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-2.5 py-1 rounded-full">
{isDemo ? "Updated Daily" : "Day 1 Initializing"}
</span>
</div>
@@ -93,12 +93,12 @@ export default function ReadinessPage() {
{/* Subject Confidence Matrix */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-5">
<div className="flex items-center gap-2">
<BarChart2 size={20} className="text-[#00F0FF]" />
<BarChart2 size={20} className="text-[var(--cyan-ai)]" />
<h3 className="text-lg font-extrabold tracking-tight">Subject Confidence Matrix</h3>
</div>
<div className="space-y-4">
{[
{ subject: "Biology / Maths", score: isDemo ? 82 : 0, color: "bg-[#00F0FF]", status: isDemo ? "High Readiness" : "Not Started", statusColor: isDemo ? "text-[#00F0FF]" : "text-muted-foreground" },
{ subject: "Biology / Maths", score: isDemo ? 82 : 0, color: "bg-[var(--cyan-ai)]", status: isDemo ? "High Readiness" : "Not Started", statusColor: isDemo ? "text-[var(--cyan-ai)]" : "text-muted-foreground" },
{ subject: "Chemistry", score: isDemo ? 74 : 0, color: "bg-amber-400", status: isDemo ? "Moderate Readiness" : "Not Started", statusColor: isDemo ? "text-amber-400" : "text-muted-foreground" },
{ subject: "Physics", score: isDemo ? 61 : 0, color: "bg-red-400", status: isDemo ? "Needs Intensive Drill" : "Not Started", statusColor: isDemo ? "text-red-400" : "text-muted-foreground" },
].map((sub) => (
@@ -130,7 +130,7 @@ export default function ReadinessPage() {
!isDemo
? "bg-white/5 border border-white/10"
: i === scoreHistory.length - 1
? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]"
? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]"
: "bg-gradient-to-t from-white/10 to-white/25"
}`}
style={{ height: isDemo ? `${(d.score / maxScore) * 80}px` : "4px" }}
@@ -170,17 +170,17 @@ export default function ReadinessPage() {
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-4">
<h3 className="text-base font-black text-muted-foreground uppercase tracking-wider flex items-center gap-2">
<Zap size={16} className="text-[#00F0FF]" /> Quick Actions
<Zap size={16} className="text-[var(--cyan-ai)]" /> Quick Actions
</h3>
<div className="space-y-2.5">
{[
{ label: "Practice Physics DPP", href: "/dashboard/ai-coach/cbt-dpp", color: "text-[#00F0FF]" },
{ label: "Practice Physics DPP", href: "/dashboard/ai-coach/cbt-dpp", color: "text-[var(--cyan-ai)]" },
{ label: "Review Mistake Queue", href: "/dashboard/ai-coach/mistakes", color: "text-red-400" },
{ label: "View Exam Strategy", href: "/dashboard/ai-coach/strategy", color: "text-amber-400" },
{ label: "College Predictor", href: "/dashboard/ai-coach/college-predictor", color: "text-emerald-400" },
].map((a) => (
<Link key={a.href} href={a.href}
className="flex items-center justify-between p-2.5 rounded-xl border border-border/40 hover:border-[#00F0FF]/30 hover:bg-white/5 transition-all group text-sm font-bold">
className="flex items-center justify-between p-2.5 rounded-xl border border-border/40 hover:border-[var(--cyan-ai-30)] hover:bg-white/5 transition-all group text-sm font-bold">
<span className={a.color}>{a.label}</span>
<span className="text-muted-foreground group-hover:translate-x-1 transition-transform">→</span>
</Link>

16
src/app/dashboard/ai-coach/strategy/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
@@ -30,8 +30,8 @@ export default function StrategyPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Zap className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Zap className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Exam Strategy &amp; Time Optimization
</h1>
@@ -39,7 +39,7 @@ export default function StrategyPage() {
Master time allocation per question, eliminate negative marking traps, and fine-tune your subject sequence for maximum score yield.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Zap size={12} /> AI Powered
</span>
</div>
@@ -50,7 +50,7 @@ export default function StrategyPage() {
{[
{ label: "Time Per Question", value: isDemo ? "45 sec" : "-- sec", note: isDemo ? "Target: 38 sec" : "Not calibrated", icon: <Clock size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
{ label: "Negative Marks Lost", value: isDemo ? "−29" : "0", note: isDemo ? "Last mock test" : "0 negative marks", icon: <AlertTriangle size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Attempted Questions", value: isDemo ? "93 / 120" : "0 / 120", note: isDemo ? "+7 vs last test" : "0 attempted", icon: <Target size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
{ label: "Attempted Questions", value: isDemo ? "93 / 120" : "0 / 120", note: isDemo ? "+7 vs last test" : "0 attempted", icon: <Target size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
{ label: "Score Yield", value: isDemo ? "214" : "0", note: isDemo ? "Predicted score" : "Baseline", icon: <TrendingUp size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
].map((kpi) => (
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color} hover:scale-[1.02] transition-transform`}>
@@ -68,7 +68,7 @@ export default function StrategyPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-3">
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
<Target size={16} className="text-[#00F0FF]" />
<Target size={16} className="text-[var(--cyan-ai)]" />
Subject Sequence Strategy
</div>
<ExamStrategyCard />
@@ -131,7 +131,7 @@ export default function StrategyPage() {
</Card>
{/* Strategy Tips */}
<Card className="p-6 bg-gradient-to-br from-[#00F0FF]/5 via-secondary/10 to-background border border-[#00F0FF]/20 rounded-3xl">
<Card className="p-6 bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/10 to-background border border-[var(--cyan-ai-20)] rounded-3xl">
<div className="flex items-center gap-2 mb-4">
<Lightbulb size={20} className="text-yellow-400" />
<h3 className="text-base font-black tracking-tight">AI Strategy Recommendations</h3>
@@ -140,7 +140,7 @@ export default function StrategyPage() {
{[
{ tip: "Start with Chemistry (highest accuracy) to build momentum and bank easy marks in the first 40 minutes.", color: "text-green-400", label: "Opening Strategy" },
{ tip: "Attempt Physics only if you are 80%+ confident per question. Otherwise, mark and skip — recover in last 10 min buffer.", color: "text-red-400", label: "Physics Guard" },
{ tip: "Reserve 10–15 minutes at the end to revisit starred questions. Your review accuracy is historically 20% higher than first-attempt.", color: "text-[#00F0FF]", label: "Review Window" },
{ tip: "Reserve 10–15 minutes at the end to revisit starred questions. Your review accuracy is historically 20% higher than first-attempt.", color: "text-[var(--cyan-ai)]", label: "Review Window" },
].map((s) => (
<div key={s.label} className="p-4 rounded-xl bg-white/5 border border-border/30 space-y-2">
<div className={`text-xs font-black uppercase tracking-wider ${s.color}`}>{s.label}</div>

30
src/app/dashboard/ai-coach/study-plan/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
@@ -18,8 +18,8 @@ export default function StudyPlanPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Calendar className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Calendar className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Personalized Daily &amp; Weekly Study Plan
</h1>
@@ -27,7 +27,7 @@ export default function StudyPlanPage() {
AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Calendar size={12} /> AI Powered
</span>
</div>
@@ -37,7 +37,7 @@ export default function StudyPlanPage() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ 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-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/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)]" },
{ label: "Syllabus Coverage", value: isDemo ? "64%" : "0%", sub: isDemo ? "+8% this week" : "Day 1 Baseline", icon: <Target size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
{ label: "Current Streak", value: `${streakCount} Day${streakCount === 1 ? '' : 's'}`, sub: isDemo ? "Keep it up!" : "Day 1 active", icon: <Flame size={18} className="text-orange-400" />, color: "border-orange-400/20 bg-orange-400/5" },
].map((kpi) => (
@@ -58,10 +58,10 @@ export default function StudyPlanPage() {
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
<Clock size={16} className="text-[#00F0FF]" />
<Clock size={16} className="text-[var(--cyan-ai)]" />
Today&apos;s Schedule
</div>
<span className="text-xs font-bold text-[#00F0FF]">
<span className="text-xs font-bold text-[var(--cyan-ai)]">
{new Date().toLocaleDateString("en-IN", { weekday: "long", day: "numeric", month: "long" })}
</span>
</div>
@@ -80,7 +80,7 @@ export default function StudyPlanPage() {
{/* Syllabus Coverage */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
<div className="flex items-center gap-2 mb-5">
<BookOpen size={20} className="text-[#00F0FF]" />
<BookOpen size={20} className="text-[var(--cyan-ai)]" />
<h3 className="text-lg font-extrabold tracking-tight">Subject Coverage Breakdown</h3>
</div>
<div className="space-y-4">
@@ -111,25 +111,25 @@ export default function StudyPlanPage() {
{/* Sidebar */}
<div className="space-y-6">
<Card className="p-6 bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/30 rounded-3xl space-y-4">
<h3 className="text-base font-black tracking-tight text-[#00F0FF] flex items-center gap-2">
<Card className="p-6 bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-30)] rounded-3xl space-y-4">
<h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
<BookOpen size={18} /> AI Scheduler Rules
</h3>
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span><strong className="text-foreground">High-Yield Prioritization:</strong> Extra time on topics with heavy exam weightage.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span><strong className="text-foreground">Error Interleaving:</strong> Recent incorrect questions are integrated directly into study blocks.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span><strong className="text-foreground">Burnout Prevention:</strong> 10-minute micro-breaks recommended between intensive problem sets.</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 size={16} className="text-[#00F0FF] shrink-0 mt-0.5" />
<CheckCircle2 size={16} className="text-[var(--cyan-ai)] shrink-0 mt-0.5" />
<span><strong className="text-foreground">Spaced Repetition:</strong> SM-2 algorithm reschedules mistake reviews at optimal intervals.</span>
</li>
</ul>
@@ -140,7 +140,7 @@ export default function StudyPlanPage() {
<div className="space-y-2">
{[
{ day: "Tue, Aug 5", task: "Full-Length Mock — JEE Mains Pattern", type: "Test", color: "text-purple-400 bg-purple-400/10" },
{ day: "Wed, Aug 6", task: "Rotational Dynamics Intensive Drill", type: "Practice", color: "text-[#00F0FF] bg-[#00F0FF]/10" },
{ day: "Wed, Aug 6", task: "Rotational Dynamics Intensive Drill", type: "Practice", color: "text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)]" },
{ day: "Thu, Aug 7", task: "Chemistry Organic — Mistake Review", type: "Review", color: "text-red-400 bg-red-400/10" },
{ day: "Fri, Aug 8", task: "Optics + Wave Optics Revision", type: "Revision", color: "text-yellow-400 bg-yellow-400/10" },
].map((item) => (

18
src/app/dashboard/ai-coach/time-optimization/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
import { Clock, Zap, Moon, Sun, AlertCircle, ArrowRight, BarChart2 } from "lucide-react"
@@ -75,8 +75,8 @@ export default function TimeOptimizationPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Clock className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Clock className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Study Time Optimization
</h1>
@@ -84,7 +84,7 @@ export default function TimeOptimizationPage() {
Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Zap size={12} /> Chronobiology Analytics
</span>
</div>
@@ -94,7 +94,7 @@ export default function TimeOptimizationPage() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Peak Efficiency", value: isDemo ? "95%" : "--", sub: isDemo ? "2–5 PM window" : "Calibrating", color: "border-yellow-400/20 bg-yellow-400/5", icon: <Sun size={18} className="text-yellow-400" /> },
{ label: "Study Hrs Today", value: isDemo ? "3.8 h" : "0.0 h", sub: "Target: 6 h", color: "border-[#00F0FF]/20 bg-[#00F0FF]/5", icon: <Clock size={18} className="text-[#00F0FF]" /> },
{ label: "Study Hrs Today", value: isDemo ? "3.8 h" : "0.0 h", sub: "Target: 6 h", color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]", icon: <Clock size={18} className="text-[var(--cyan-ai)]" /> },
{ label: "Morning Block", value: isDemo ? "60%" : "0%", sub: "6–9 AM", color: "border-indigo-400/20 bg-indigo-400/5", icon: <Moon size={18} className="text-indigo-400" /> },
{ label: "Evening Block", value: isDemo ? "74%" : "0%", sub: "7–9 PM", color: "border-green-400/20 bg-green-400/5", icon: <BarChart2 size={18} className="text-green-400" /> },
].map(kpi => (
@@ -113,7 +113,7 @@ export default function TimeOptimizationPage() {
{/* Chart — 2/3 */}
<div className="lg:col-span-2 space-y-4">
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
<BarChart2 size={16} className="text-[#00F0FF]" />
<BarChart2 size={16} className="text-[var(--cyan-ai)]" />
Hourly Efficiency Profile
</div>
<StudyTimeOptimizationCard />
@@ -131,7 +131,7 @@ export default function TimeOptimizationPage() {
<div className="w-16 text-xs font-bold text-muted-foreground shrink-0">{slot.slot}</div>
<div className="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
<div
className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[#00F0FF]" : isDemo ? "bg-red-400" : "bg-white/10"}`}
className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[var(--cyan-ai)]" : isDemo ? "bg-red-400" : "bg-white/10"}`}
style={{ width: `${slot.pct}%` }}
/>
</div>
@@ -158,9 +158,9 @@ export default function TimeOptimizationPage() {
))}
</div>
<Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
<Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
<CardContent className="p-5 space-y-3">
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Apply Insights</h3>
<h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">Apply Insights</h3>
<div className="space-y-2">
{[
{ label: "Schedule Today's Study Plan", href: "/dashboard/ai-coach/study-plan" },

8
src/app/dashboard/ai-coach/tutor/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { TutorChat } from "@/components/AI/TutorChat"
import { BrainCircuit, Sparkles, MessageSquare, Lightbulb } from "lucide-react"
@@ -6,7 +6,7 @@ import { Card, CardContent } from "@/components/ui/card"
const CAPABILITIES = [
{ icon: <Lightbulb size={16} className="text-yellow-400" />, label: "Concept Explanations", desc: "Step-by-step breakdown of Physics, Chemistry, Maths & Biology topics" },
{ icon: <Sparkles size={16} className="text-[#00F0FF]" />, label: "Problem Solving", desc: "Full worked solutions with formulas, derivations and shortcuts" },
{ icon: <Sparkles size={16} className="text-[var(--cyan-ai)]" />, label: "Problem Solving", desc: "Full worked solutions with formulas, derivations and shortcuts" },
{ icon: <MessageSquare size={16} className="text-green-400" />, label: "Doubt Clearing", desc: "Ask follow-up questions — the AI remembers context within the session" },
]
@@ -18,8 +18,8 @@ export default function TutorChatPage() {
<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-2">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<BrainCircuit className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<BrainCircuit className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
AI Tutor — 24/7 Doubt Solver
</h1>

14
src/app/dashboard/ai-coach/weekly-progress/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react"
@@ -47,8 +47,8 @@ export default function WeeklyProgressPage() {
<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">
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Target className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
<Target className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Weekly Progress Overview
</h1>
@@ -57,7 +57,7 @@ export default function WeeklyProgressPage() {
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5">
<Zap size={12} /> Live Analytics
</span>
</div>
@@ -85,7 +85,7 @@ export default function WeeklyProgressPage() {
<div className="lg:col-span-2 space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2">
<Calendar size={20} className="text-[#00F0FF]" /> This Week at a Glance
<Calendar size={20} className="text-[var(--cyan-ai)]" /> This Week at a Glance
</h2>
</div>
<WeeklyProgressReport />
@@ -122,9 +122,9 @@ export default function WeeklyProgressPage() {
</div>
{/* Weekly Goals */}
<Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
<Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
<CardContent className="p-5 space-y-3">
<h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Weekly Goals</h3>
<h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">Weekly Goals</h3>
<div className="space-y-2">
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
{isDemo ? (

16
src/app/dashboard/analytics/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react"
@@ -59,8 +59,8 @@ export default function AnalyticsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<LineChartIcon className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<LineChartIcon className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Performance Analytics
</h1>
@@ -73,7 +73,7 @@ export default function AnalyticsPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
<CardHeader>
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[#00F0FF]" size={20} /> Projected Score Trajectory</CardTitle>
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[var(--cyan-ai)]" size={20} /> Projected Score Trajectory</CardTitle>
<CardDescription>
{isDemo ? "Your mock scores over the last 6 months projected towards the final exam." : "Your mock test trajectory will plot here as you complete tests."}
</CardDescription>
@@ -86,18 +86,18 @@ export default function AnalyticsPage() {
<YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 300]} />
<Tooltip
contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }}
itemStyle={{ color: '#00F0FF' }}
itemStyle={{ color: 'var(--cyan-ai)' }}
/>
<Line type="monotone" dataKey="score" stroke="#00F0FF" strokeWidth={3} dot={{ r: 4, fill: '#00F0FF' }} activeDot={{ r: 6 }} />
<Line type="monotone" dataKey="score" stroke="var(--cyan-ai)" strokeWidth={3} dot={{ r: 4, fill: 'var(--cyan-ai)' }} activeDot={{ r: 6 }} />
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
<div className="space-y-6">
<Card className="border-[#00F0FF]/30 bg-[#00F0FF]/5">
<Card className="border-[var(--cyan-ai-30)] bg-[var(--cyan-ai-10)]">
<CardHeader className="pb-2">
<CardTitle className="text-lg flex items-center gap-2"><BrainCircuit size={18} className="text-[#00F0FF]"/> AI Diagnosis</CardTitle>
<CardTitle className="text-lg flex items-center gap-2"><BrainCircuit size={18} className="text-[var(--cyan-ai)]"/> AI Diagnosis</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-foreground/80 leading-relaxed font-medium">

4
src/app/dashboard/cbt/history/[attemptId]/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useEffect, useState, use } from "react";
import Link from "next/link";
@@ -100,7 +100,7 @@ export default function AttemptHistoryPage({ params }: { params: Promise<{ attem
<div className="flex gap-4 w-full md:w-auto">
<Card className="bg-secondary/30 border-border flex-1 md:min-w-48">
<CardContent className="p-4 flex flex-col items-center justify-center">
<Award className="text-[#00F0FF] mb-2" size={24} />
<Award className="text-[var(--cyan-ai)] mb-2" size={24} />
<div className="text-sm text-muted-foreground font-bold uppercase">Score</div>
<div className="text-2xl font-bold flex items-center justify-center gap-1.5">
<span className={scoreCalc <= 0 ? "text-red-500 font-black" : (scoreCalc / maxScore) >= 0.6 ? "text-green-500" : "text-amber-500"}>

26
src/app/dashboard/cbt/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
@@ -118,7 +118,7 @@ export default function CBTPage() {
if (userLoading || loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin mb-4"></div>
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading exams...</p>
</div>
)
@@ -129,8 +129,8 @@ export default function CBTPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<MonitorPlay className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<MonitorPlay className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Computer Based Tests (CBT)
</h1>
@@ -145,7 +145,7 @@ export default function CBTPage() {
type="date"
value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)}
className="w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[#00F0FF] outline-none text-foreground dark:[color-scheme:dark] [color-scheme:light]"
className="w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none text-foreground dark:[color-scheme:dark] [color-scheme:light]"
/>
</div>
<div className="relative w-full sm:w-64">
@@ -155,7 +155,7 @@ export default function CBTPage() {
placeholder="Search exams..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[#00F0FF] outline-none"
className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none"
/>
</div>
</div>
@@ -178,7 +178,7 @@ export default function CBTPage() {
<div className="space-y-6">
<h2 className="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
<Clock size={20} className="text-[#00F0FF]" /> Upcoming & Active Exams
<Clock size={20} className="text-[var(--cyan-ai)]" /> Upcoming & Active Exams
</h2>
{/* BUG-08 fix: Filter out already attempted exams from Upcoming & Active list */}
@@ -218,11 +218,11 @@ export default function CBTPage() {
const isExpired = endTime ? now > endTime : false;
return (
<Card key={exam.id} className={`hover:border-[#00F0FF]/50 hover:shadow-[0_0_15px_-5px_#00F0FF] transition-all group ${isLocked || isExpired ? 'opacity-80' : ''}`}>
<Card key={exam.id} className={`hover:border-[var(--cyan-ai-10)] hover:shadow-[0_0_15px_-5px_var(--cyan-ai)] transition-all group ${isLocked || isExpired ? 'opacity-80' : ''}`}>
<CardContent className="p-6">
<div className="flex justify-between items-start mb-4">
<div className="flex gap-2 flex-wrap">
<Badge variant="outline" className="bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20">
<Badge variant="outline" className="bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]">
{exam.type} Test
</Badge>
{exam.exam_pattern && (
@@ -245,7 +245,7 @@ export default function CBTPage() {
</Badge>
) : null}
</div>
<h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[#00F0FF] transition-colors">
<h3 className="font-bold text-lg leading-tight mb-2 group-hover:text-[var(--cyan-ai)] transition-colors">
{exam.title}
</h3>
<div className="text-sm text-muted-foreground space-y-1 mb-6">
@@ -262,7 +262,7 @@ export default function CBTPage() {
) : isLocked ? (
<Button
onClick={() => setShowUpgradeModal(true)}
className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[#00F0FF]/50 hover:text-foreground font-bold"
className="w-full gap-2 rounded-xl bg-secondary text-muted-foreground border border-dashed border-border hover:border-[var(--cyan-ai-10)] hover:text-foreground font-bold"
>
<Lock size={16} /> Unlock Test
</Button>
@@ -272,7 +272,7 @@ export default function CBTPage() {
</Button>
) : (
<Link href={`/cbt/${exam.id}`}>
<Button className="w-full gap-2 rounded-xl bg-secondary text-foreground hover:bg-[#00F0FF] hover:text-background font-bold transition-colors">
<Button className="w-full gap-2 rounded-xl bg-secondary text-foreground hover:bg-[var(--cyan-ai)] hover:text-background font-bold transition-colors">
<PlayCircle size={16} /> Start Exam
</Button>
</Link>
@@ -331,7 +331,7 @@ export default function CBTPage() {
</div>
<div className="text-right">
<div className="text-xs md:text-sm text-muted-foreground font-bold uppercase tracking-wider">Accuracy</div>
<div className="font-bold text-base md:text-lg text-[#00F0FF]">{Math.round(attempt.accuracy)}%</div>
<div className="font-bold text-base md:text-lg text-[var(--cyan-ai)]">{Math.round(attempt.accuracy)}%</div>
</div>
<Link href={`/dashboard/cbt/history/${attempt.id}`}>
<Button variant="outline" className="rounded-xl border-border hover:bg-primary hover:text-primary-foreground">

38
src/app/dashboard/community/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
@@ -86,7 +86,7 @@ export default function CommunityPage() {
if (loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin mb-4"></div>
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading Doubt Forum...</p>
</div>
)
@@ -117,8 +117,8 @@ export default function CommunityPage() {
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<MessageSquare className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<MessageSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Doubt Forum
</h1>
@@ -128,7 +128,7 @@ export default function CommunityPage() {
</div>
<button
onClick={() => setIsAskModalOpen(true)}
className="px-5 py-2.5 bg-[#00F0FF] text-black font-bold rounded-xl shadow-[0_0_15px_-3px_rgba(0,240,255,0.4)] hover:bg-[#00d0dd] transition-colors"
className="px-5 py-2.5 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_15px_-3px_rgba(12,96,96,0.4)] hover:bg-[#00d0dd] transition-colors"
>
Ask a Doubt
</button>
@@ -142,7 +142,7 @@ export default function CommunityPage() {
<input
type="text"
placeholder="Search doubts by keyword..."
className="w-full pl-10 pr-4 py-2.5 bg-card border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50"
className="w-full pl-10 pr-4 py-2.5 bg-card border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)]"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
@@ -158,11 +158,11 @@ export default function CommunityPage() {
<div className="space-y-4">
{filteredDoubts.map((doubt) => (
<Card key={doubt.id} className="border-border shadow-sm hover:border-[#00F0FF]/50 transition-colors cursor-pointer">
<Card key={doubt.id} className="border-border shadow-sm hover:border-[var(--cyan-ai-10)] transition-colors cursor-pointer">
<CardContent className="p-0 flex">
{/* Upvote Sidebar */}
<div className="w-16 bg-secondary/20 border-r border-border flex flex-col items-center py-4 gap-1">
<button className="p-1.5 text-muted-foreground hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 rounded-lg transition-colors">
<button className="p-1.5 text-muted-foreground hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] rounded-lg transition-colors">
<ChevronUp size={24} />
</button>
<span className="font-bold text-foreground">{doubt.upvotes}</span>
@@ -214,7 +214,7 @@ export default function CommunityPage() {
{expandedDoubtId === doubt.id && (
<div className="mt-6 pt-4 border-t border-border space-y-4 animate-in fade-in duration-300">
<div className="flex gap-3">
<div className="h-8 w-8 shrink-0 rounded-full bg-[#00F0FF]/10 text-[#00F0FF] flex items-center justify-center text-xs font-bold border border-[#00F0FF]/30">
<div className="h-8 w-8 shrink-0 rounded-full bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] flex items-center justify-center text-xs font-bold border border-[var(--cyan-ai-30)]">
AI
</div>
<div className="bg-secondary/40 rounded-2xl rounded-tl-none p-4 text-sm flex-1">
@@ -232,9 +232,9 @@ export default function CommunityPage() {
<input
type="text"
placeholder="Add a reply..."
className="flex-1 bg-background border border-border rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50"
className="flex-1 bg-background border border-border rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)]"
/>
<button className="p-2 bg-[#00F0FF] text-black rounded-xl hover:bg-[#00d0dd] transition-colors">
<button className="p-2 bg-[var(--cyan-ai)] text-black rounded-xl hover:bg-[#00d0dd] transition-colors">
<Send size={16} />
</button>
</div>
@@ -246,7 +246,7 @@ export default function CommunityPage() {
))}
{filteredDoubts.length === 0 && (
<div className="text-center py-12 text-muted-foreground bg-secondary/10 border border-dashed border-border rounded-2xl p-6">
<MessageSquare size={48} className="mx-auto mb-3 opacity-30 text-[#00F0FF]" />
<MessageSquare size={48} className="mx-auto mb-3 opacity-30 text-[var(--cyan-ai)]" />
<p className="font-bold text-foreground mb-1">
{activeFilter === 'my-doubts' ? "No Doubts Asked Yet" : "No doubts found matching your criteria."}
</p>
@@ -264,7 +264,7 @@ export default function CommunityPage() {
<div className="bg-background border border-border w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
<div className="flex justify-between items-center p-6 border-b border-border bg-secondary/30">
<h2 className="text-2xl font-bold flex items-center gap-2">
<MessageSquare className="text-[#00F0FF]" /> Ask a Doubt
<MessageSquare className="text-[var(--cyan-ai)]" /> Ask a Doubt
</h2>
<button
onClick={() => setIsAskModalOpen(false)}
@@ -278,7 +278,7 @@ export default function CommunityPage() {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<label className="text-sm font-medium text-muted-foreground">Subject</label>
<select className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50">
<select className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)]">
<option>Physics</option>
<option>Chemistry</option>
<option>Mathematics</option>
@@ -290,7 +290,7 @@ export default function CommunityPage() {
<input
type="text"
placeholder="e.g. Rotational Mechanics"
className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50"
className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)]"
/>
</div>
</div>
@@ -300,7 +300,7 @@ export default function CommunityPage() {
<input
type="text"
placeholder="What exactly are you stuck on?"
className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50"
className="w-full bg-background border border-border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)]"
/>
</div>
@@ -309,17 +309,17 @@ export default function CommunityPage() {
<textarea
rows={4}
placeholder="Explain your approach, what you've tried, and where you're getting stuck..."
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]/50 resize-none"
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai-10)] resize-none"
/>
</div>
<div className="pt-2 border-t border-border flex justify-between items-center">
<button className="flex items-center gap-2 text-muted-foreground hover:text-[#00F0FF] transition-colors text-sm font-medium px-3 py-2 rounded-lg hover:bg-secondary">
<button className="flex items-center gap-2 text-muted-foreground hover:text-[var(--cyan-ai)] transition-colors text-sm font-medium px-3 py-2 rounded-lg hover:bg-secondary">
<ImageIcon size={18} /> Attach Image
</button>
<button
onClick={() => setIsAskModalOpen(false)}
className="flex items-center gap-2 px-6 py-2.5 bg-[#00F0FF] text-black font-bold rounded-xl shadow-[0_0_15px_-3px_rgba(0,240,255,0.4)] hover:bg-[#00d0dd] transition-colors"
className="flex items-center gap-2 px-6 py-2.5 bg-[var(--cyan-ai)] text-black font-bold rounded-xl shadow-[0_0_15px_-3px_rgba(12,96,96,0.4)] hover:bg-[#00d0dd] transition-colors"
>
Post Doubt <Send size={16} />
</button>

16
src/app/dashboard/dpp/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
@@ -108,7 +108,7 @@ export default function DPPPage() {
type="date"
value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)}
className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none text-muted-foreground mr-2"
className="px-3 py-1.5 bg-background border border-border rounded-lg text-xs font-bold focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none text-muted-foreground mr-2"
/>
<span className="text-sm font-bold text-muted-foreground mr-2"><Filter size={16} className="inline mr-1"/> Difficulty:</span>
{['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
@@ -157,15 +157,15 @@ export default function DPPPage() {
const isExpired = endTime ? now > endTime : false;
return (
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[var(--cyan-ai-10)] bg-background'}`}>
<CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[var(--cyan-ai)] transition-colors flex items-center justify-center"></div>}
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF]">
<span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)]">
{user?.target_exam?.replace("_", " ") || "JEE/NEET"}
</span>
<span className="text-muted-foreground text-xs font-bold">•</span>
@@ -182,7 +182,7 @@ export default function DPPPage() {
</>
) : null}
</div>
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors">
<h3 className="font-bold text-lg leading-tight group-hover:text-[var(--cyan-ai)] transition-colors">
{cleanTitle(dpp.title)}
<span className={`ml-2 text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
{dpp.difficulty}
@@ -209,7 +209,7 @@ export default function DPPPage() {
<Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
</Link>
{!isExpired && (
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-20)] gap-2">
<Eye size={14} /> Read PDF
</Button>
)}
@@ -319,7 +319,7 @@ export default function DPPPage() {
Close Reader
</Button>
<Link href="/upgrade">
<Button className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)] text-xs h-9">
<Button className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)] text-xs h-9">
<Sparkles size={14} className="mr-1.5" /> Upgrade to AI Coach for CBT
</Button>
</Link>

38
src/app/dashboard/layout.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { ReactNode, useState, useEffect, useRef } from "react"
import { BookOpen, LayoutDashboard, Settings, FileText, Activity, LineChart, Trophy, User, ChevronUp, Lock, ShieldAlert, Flame, Target, Gauge, Zap, Calendar, Clock, BrainCircuit, BarChart3, School, CheckSquare } from "lucide-react"
@@ -67,7 +67,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<div className="h-screen w-screen flex flex-col items-center justify-center bg-background">
<div className="animate-pulse flex flex-col items-center gap-4">
<Logo height={56} className="mb-4" />
<div className="h-6 w-6 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin"></div>
<div className="h-6 w-6 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin"></div>
</div>
</div>
);
@@ -79,7 +79,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{switching && (
<div className="fixed top-0 left-0 right-0 z-[9999] h-0.5 overflow-hidden">
<div
className="h-full bg-[#00F0FF] animate-[slideProgress_0.8s_ease-in-out_infinite]"
className="h-full bg-[var(--cyan-ai)] animate-[slideProgress_0.8s_ease-in-out_infinite]"
style={{ width: '60%', animation: 'slideProgress 0.9s ease-in-out infinite' }}
/>
<style>{`
@@ -94,7 +94,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{/* Sidebar */}
<aside className="w-64 border-r border-border/60 bg-background/95 backdrop-blur-xl flex flex-col hidden md:flex relative">
{/* Subtle gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-[#00F0FF]/[0.02] via-transparent to-purple-500/[0.02] pointer-events-none" />
<div className="absolute inset-0 bg-gradient-to-b from-[var(--cyan-ai)]/[0.02] via-transparent to-purple-500/[0.02] pointer-events-none" />
{/* Logo */}
<div className="px-5 py-4 border-b border-border/40">
@@ -163,7 +163,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
<div className="flex items-center gap-2">
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
<span className="text-[10px] font-black uppercase tracking-[0.15em] text-cyan-600 dark:text-cyan-400 flex items-center gap-1.5 shrink-0">
<span className="w-1 h-1 rounded-full bg-cyan-500 shadow-[0_0_6px_#00F0FF] dark:shadow-[0_0_8px_#00F0FF]"></span>
<span className="w-1 h-1 rounded-full bg-cyan-500 shadow-[0_0_6px_var(--cyan-ai)] dark:shadow-[0_0_8px_var(--cyan-ai)]"></span>
AI Coach
</span>
<div className="h-px flex-1 bg-gradient-to-l from-transparent via-cyan-500/50 to-transparent" />
@@ -258,7 +258,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
href="/dashboard/settings"
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 border ${
pathname.startsWith("/dashboard/settings")
? "bg-[#00F0FF]/10 text-foreground font-semibold border-[#00F0FF]/20"
? "bg-[var(--cyan-ai-10)] text-foreground font-semibold border-[var(--cyan-ai-20)]"
: "text-muted-foreground hover:bg-secondary/60 hover:text-foreground border-transparent"
}`}
>
@@ -311,7 +311,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
className="w-full flex items-center justify-between p-2.5 rounded-xl bg-secondary/40 hover:bg-secondary/70 transition-all duration-200 border border-border/50 hover:border-border group"
>
<div className="flex items-center gap-3 text-left">
<div className="h-8 w-8 rounded-full bg-cyan-500/20 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-400 flex items-center justify-center font-bold text-sm shrink-0 border border-cyan-500/20 dark:shadow-[0_0_10px_-2px_#00F0FF]">
<div className="h-8 w-8 rounded-full bg-cyan-500/20 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-400 flex items-center justify-center font-bold text-sm shrink-0 border border-cyan-500/20 dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
{userInitials}
</div>
<div className="flex-1 min-w-0">
@@ -342,7 +342,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{user ? `Welcome back, ${cleanDisplayName(user.name).split(" ")[0]}!` : "Welcome back!"}
</h2>
{user && (
<Badge variant="outline" className="bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 font-bold tracking-wide uppercase px-2.5 py-0.5 animate-pulse shadow-none dark:shadow-[0_0_10px_-2px_#00F0FF]">
<Badge variant="outline" className="bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 font-bold tracking-wide uppercase px-2.5 py-0.5 animate-pulse shadow-none dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
{targetExamLabel} Target
</Badge>
)}
@@ -367,7 +367,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{isDemoUser(userId) && (
<div className="flex items-center gap-2">
{switching && (
<span className="text-xs text-[#00F0FF] font-bold animate-pulse hidden lg:inline">Switching…</span>
<span className="text-xs text-[var(--cyan-ai)] font-bold animate-pulse hidden lg:inline">Switching…</span>
)}
{!switching && (
<span className="text-xs text-muted-foreground font-bold hidden lg:inline">Demo:</span>
@@ -376,7 +376,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
value={userId}
disabled={switching}
onChange={(e) => switchUser(e.target.value)}
className="bg-secondary border border-border text-foreground px-2.5 py-1.5 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none cursor-pointer hover:bg-secondary/80 transition-colors disabled:opacity-50 disabled:cursor-wait"
className="bg-secondary border border-border text-foreground px-2.5 py-1.5 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[var(--cyan-ai)] outline-none cursor-pointer hover:bg-secondary/80 transition-colors disabled:opacity-50 disabled:cursor-wait"
>
<option value={DEMO_USERS.NEHA.id}>Neha Verma (AI Coach)</option>
<option value={DEMO_USERS.AI_COACH.id}>Rahul (AI Coach)</option>
@@ -412,30 +412,30 @@ function NavItem({ href, icon, label, active, isLocked, section }: { href: strin
// Section-aware active color tokens (light mode only, dark mode falls back to cyan)
const activeClasses = active
? section === "pro"
? "bg-yellow-50 light:bg-yellow-50 text-yellow-700 dark:bg-[#00F0FF]/10 dark:text-[#00F0FF] font-semibold border border-yellow-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
? "bg-yellow-50 light:bg-yellow-50 text-yellow-700 dark:bg-[var(--cyan-ai-10)] dark:text-[var(--cyan-ai)] font-semibold border border-yellow-300/60 dark:border-[var(--cyan-ai-20)] shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)] dark:shadow-[0_0_12px_-4px_rgba(12,96,96,0.3)]"
: section === "ai"
? "bg-cyan-50 dark:bg-[#00F0FF]/10 text-cyan-800 dark:text-[#00F0FF] font-semibold border border-cyan-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(6,182,212,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
: "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
? "bg-cyan-50 dark:bg-[var(--cyan-ai-10)] text-cyan-800 dark:text-[var(--cyan-ai)] font-semibold border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] shadow-[0_0_12px_-4px_rgba(6,182,212,0.2)] dark:shadow-[0_0_12px_-4px_rgba(12,96,96,0.3)]"
: "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] font-semibold border border-[var(--cyan-ai-20)] shadow-[0_0_12px_-4px_rgba(12,96,96,0.3)]"
: isLocked
? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
: "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
const iconActiveClass = active
? section === "pro"
? "text-yellow-600 dark:text-[#00F0FF]"
? "text-yellow-600 dark:text-[var(--cyan-ai)]"
: section === "ai"
? "text-cyan-700 dark:text-[#00F0FF]"
: "text-[#00F0FF]"
? "text-cyan-700 dark:text-[var(--cyan-ai)]"
: "text-[var(--cyan-ai)]"
: isLocked
? "text-muted-foreground/30"
: "text-muted-foreground/60 group-hover:text-foreground/80"
const activeBarClass = active
? section === "pro"
? "w-1 h-4 rounded-full bg-yellow-500 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(234,179,8,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
? "w-1 h-4 rounded-full bg-yellow-500 dark:bg-[var(--cyan-ai)] shrink-0 shadow-[0_0_6px_rgba(234,179,8,0.6)] dark:shadow-[0_0_6px_rgba(12,96,96,0.8)]"
: section === "ai"
? "w-1 h-4 rounded-full bg-cyan-600 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(6,182,212,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
: "w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"
? "w-1 h-4 rounded-full bg-cyan-600 dark:bg-[var(--cyan-ai)] shrink-0 shadow-[0_0_6px_rgba(6,182,212,0.6)] dark:shadow-[0_0_6px_rgba(12,96,96,0.8)]"
: "w-1 h-4 rounded-full bg-[var(--cyan-ai)] shrink-0 shadow-[0_0_6px_rgba(12,96,96,0.8)]"
: ""
return (

22
src/app/dashboard/leaderboard/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -50,8 +50,8 @@ export default function LeaderboardPage() {
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Trophy className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<Trophy className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Leaderboard
</h1>
@@ -95,7 +95,7 @@ export default function LeaderboardPage() {
{loadingRankings ? (
<div className="flex flex-col items-center justify-center p-12 bg-card rounded-2xl border border-border">
<div className="size-8 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin mb-3"></div>
<div className="size-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-3"></div>
<p className="text-sm text-muted-foreground font-medium">Calculating live rankings...</p>
</div>
) : (
@@ -105,7 +105,7 @@ export default function LeaderboardPage() {
key={student.rank}
className={`flex justify-between items-center p-4 rounded-xl border transition-all ${
student.isCurrentUser
? 'border-[#00F0FF] bg-[#00F0FF]/5 shadow-[0_0_15px_-3px_rgba(0,240,255,0.2)]'
? 'border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] shadow-[0_0_15px_-3px_rgba(12,96,96,0.2)]'
: 'border-border bg-card hover:bg-secondary/20'
}`}
>
@@ -113,17 +113,17 @@ export default function LeaderboardPage() {
{student.rank === 1 ? <Medal className="text-yellow-500" size={24} /> :
student.rank === 2 ? <Medal className="text-gray-400" size={24} /> :
student.rank === 3 ? <Medal className="text-amber-700" size={24} /> :
<span className={`font-bold text-lg ${student.isCurrentUser ? 'text-[#00F0FF]' : 'text-muted-foreground'}`}>#{student.rank}</span>}
<span className={`font-bold text-lg ${student.isCurrentUser ? 'text-[var(--cyan-ai)]' : 'text-muted-foreground'}`}>#{student.rank}</span>}
</div>
<div className="flex-1 px-4 flex items-center gap-3">
<div className={`h-10 w-10 rounded-full flex items-center justify-center font-bold text-sm ${
student.isCurrentUser ? 'bg-[#00F0FF]/20 text-[#00F0FF]' : 'bg-secondary text-muted-foreground'
student.isCurrentUser ? 'bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)]' : 'bg-secondary text-muted-foreground'
}`}>
{(student.name || "U").substring(0, 2).toUpperCase()}
</div>
<div>
<p className={`font-bold ${student.isCurrentUser ? 'text-[#00F0FF]' : 'text-foreground'}`}>
<p className={`font-bold ${student.isCurrentUser ? 'text-[var(--cyan-ai)]' : 'text-foreground'}`}>
{student.isCurrentUser ? (isAnonymous ? "Anonymous User" : `${cleanDisplayName(student.name)} (You)`) : cleanDisplayName(student.name)}
</p>
<p className="text-xs text-muted-foreground flex items-center gap-1">
@@ -147,12 +147,12 @@ export default function LeaderboardPage() {
</div>
<div className="space-y-6">
<Card className="border-[#00F0FF]/30 bg-gradient-to-br from-[#00F0FF]/10 to-transparent">
<Card className="border-[var(--cyan-ai-30)] bg-gradient-to-br from-[var(--cyan-ai-10)] to-transparent">
<CardHeader className="pb-2">
<CardTitle className="text-xl flex items-center gap-2">Your Standing</CardTitle>
</CardHeader>
<CardContent>
<div className="text-4xl font-black text-[#00F0FF] mb-1">#{currentStudent.rank}</div>
<div className="text-4xl font-black text-[var(--cyan-ai)] mb-1">#{currentStudent.rank}</div>
<p className="text-sm font-medium text-foreground mb-4">
{currentStudent.score === 0 ? "Fresh Start · Day 1 of your journey" : `Rank #${currentStudent.rank} overall`}
</p>
@@ -166,7 +166,7 @@ export default function LeaderboardPage() {
<span className="text-sm font-medium text-foreground">Anonymous Mode</span>
<label className="relative inline-flex items-center cursor-pointer">
<input type="checkbox" className="sr-only peer" checked={isAnonymous} onChange={() => setIsAnonymous(!isAnonymous)} />
<div className="w-11 h-6 bg-secondary peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#00F0FF]"></div>
<div className="w-11 h-6 bg-secondary peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--cyan-ai)]"></div>
</label>
</div>
</CardContent>

8
src/app/dashboard/materials/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -36,8 +36,8 @@ export default function MaterialsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<FileText className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<FileText className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Study Materials & Notes
</h1>
@@ -207,7 +207,7 @@ export default function MaterialsPage() {
Close Reader
</Button>
<Link href="/upgrade">
<Button className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)] text-xs h-9">
<Button className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-extrabold rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)] text-xs h-9">
<Sparkles size={14} className="mr-1.5" /> Unlock All Premium Notes
</Button>
</Link>

12
src/app/dashboard/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useRef, useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -49,7 +49,7 @@ export default function DashboardPage() {
if (loading) {
return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8">
<div className="h-8 w-8 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin mb-4"></div>
<div className="h-8 w-8 border-4 border-[var(--cyan-ai)] border-t-transparent rounded-full animate-spin mb-4"></div>
<p className="text-muted-foreground font-medium animate-pulse">Loading dashboard...</p>
</div>
)
@@ -65,8 +65,8 @@ export default function DashboardPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<LayoutDashboard className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<LayoutDashboard className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Performance Overview
</h1>
@@ -110,7 +110,7 @@ export default function DashboardPage() {
{/* Qs Attempted */}
<Card>
<CardContent className="p-5 flex flex-col items-center text-center">
<div className="p-3 bg-secondary rounded-full mb-3 text-[#00F0FF]"><CheckCircle2 size={24} /></div>
<div className="p-3 bg-secondary rounded-full mb-3 text-[var(--cyan-ai)]"><CheckCircle2 size={24} /></div>
<p className="text-sm font-bold text-muted-foreground uppercase tracking-wider mb-1">Qs Attempted</p>
<h3 className="text-2xl font-bold">
{isNew ? "0" : (userStats.total_questions_attempted || 0).toLocaleString()}
@@ -136,7 +136,7 @@ export default function DashboardPage() {
<>#{userStats.city_rank || 1} <span className="text-base text-muted-foreground font-medium">/ {userStats.city_total || 50}</span></>
)}
</h3>
<p className="text-xs text-muted-foreground font-medium mt-2 text-[#00F0FF]">
<p className="text-xs text-muted-foreground font-medium mt-2 text-[var(--cyan-ai)]">
{isNew ? "Unranked · Take a test" : `Top rank in ${user?.city || "your city"}`}
</p>
</CardContent>

12
src/app/dashboard/progress/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
@@ -30,7 +30,7 @@ const getStatusIcon = (status: ChapterStatus) => {
switch (status) {
case 'Mastered': return <CheckCircle2 className="text-emerald-500" size={16} />
case 'Practiced': return <CheckCircle2 className="text-amber-500" size={16} />
case 'In Progress': return <Clock className="text-[#00F0FF]" size={16} />
case 'In Progress': return <Clock className="text-[var(--cyan-ai)]" size={16} />
case 'Not Started': return <Circle className="text-muted-foreground" size={16} />
}
}
@@ -179,8 +179,8 @@ export default function ProgressTrackerPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Target className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<Target className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Syllabus Tracker
</h1>
@@ -195,9 +195,9 @@ export default function ProgressTrackerPage() {
<Card key={i} className="border-border shadow-sm">
<CardContent className="p-6 text-center">
<h3 className="font-bold text-lg mb-2">{sub.name}</h3>
<div className="text-3xl font-black text-[#00F0FF] mb-3">{sub.completionPct}%</div>
<div className="text-3xl font-black text-[var(--cyan-ai)] mb-3">{sub.completionPct}%</div>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-[#00F0FF]" style={{ width: `${sub.completionPct}%` }}></div>
<div className="h-full bg-[var(--cyan-ai)]" style={{ width: `${sub.completionPct}%` }}></div>
</div>
</CardContent>
</Card>

28
src/app/dashboard/rank-predictor/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -60,12 +60,12 @@ export default function RankPredictorPage() {
const predictedRank = calculateRank(totalScore, maxTotal)
const colleges = exam === "NEET" ? [
{ name: "AIIMS New Delhi", category: "Top Tier Medical", minScore: 690, color: "text-[#00F0FF]", border: "border-[#00F0FF]/30", bg: "bg-[#00F0FF]/10" },
{ name: "AIIMS New Delhi", category: "Top Tier Medical", minScore: 690, color: "text-[var(--cyan-ai)]", border: "border-[var(--cyan-ai-30)]", bg: "bg-[var(--cyan-ai-10)]" },
{ name: "MAMC New Delhi", category: "Central GMC", minScore: 665, color: "text-amber-400", border: "border-amber-400/30", bg: "bg-amber-400/10" },
{ name: "KGMU Lucknow / VMMCH", category: "Premier State GMC", minScore: 635, color: "text-emerald-400", border: "border-emerald-400/30", bg: "bg-emerald-400/10" },
{ name: "Top State Govt Medical College", category: "State Quota", minScore: 590, color: "text-purple-400", border: "border-purple-400/30", bg: "bg-purple-400/10" },
] : [
{ name: "IIT Bombay / IIT Delhi (CS)", category: "Top 5 IITs", minScore: 260, color: "text-[#00F0FF]", border: "border-[#00F0FF]/30", bg: "bg-[#00F0FF]/10" },
{ name: "IIT Bombay / IIT Delhi (CS)", category: "Top 5 IITs", minScore: 260, color: "text-[var(--cyan-ai)]", border: "border-[var(--cyan-ai-30)]", bg: "bg-[var(--cyan-ai-10)]" },
{ name: "IIT Madras / Kharagpur", category: "Core Engineering", minScore: 220, color: "text-amber-400", border: "border-amber-400/30", bg: "bg-amber-400/10" },
{ name: "NIT Trichy / Surathkal", category: "Top NITs", minScore: 180, color: "text-emerald-400", border: "border-emerald-400/30", bg: "bg-emerald-400/10" },
{ name: "Top State Engineering Colleges", category: "State Govt", minScore: 140, color: "text-purple-400", border: "border-purple-400/30", bg: "bg-purple-400/10" },
@@ -76,7 +76,7 @@ export default function RankPredictorPage() {
{/* Header */}
<div className="text-center max-w-3xl mx-auto space-y-3">
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-[#00F0FF]/10 text-[#00F0FF] rounded-full border border-[#00F0FF]/30 text-xs font-black tracking-widest uppercase shadow-[0_0_15px_rgba(0,240,255,0.15)]">
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] rounded-full border border-[var(--cyan-ai-30)] text-xs font-black tracking-widest uppercase shadow-[0_0_15px_rgba(12,96,96,0.15)]">
<Sparkles size={14} /> AI Neural Prediction Engine
</div>
<h1 className="text-4xl md:text-5xl font-black tracking-tight">AI Rank & College Predictor</h1>
@@ -105,7 +105,7 @@ export default function RankPredictorPage() {
}
}}
className={`px-6 py-2 rounded-xl text-sm font-extrabold transition-all ${
exam === "NEET" ? "bg-[#00F0FF] text-black shadow-[0_0_15px_#00F0FF]" : "text-muted-foreground hover:text-foreground"
exam === "NEET" ? "bg-[var(--cyan-ai)] text-black shadow-[0_0_15px_var(--cyan-ai)]" : "text-muted-foreground hover:text-foreground"
}`}
>
NEET (UG) 720 Marks
@@ -124,7 +124,7 @@ export default function RankPredictorPage() {
}
}}
className={`px-6 py-2 rounded-xl text-sm font-extrabold transition-all ${
exam === "JEE" ? "bg-[#00F0FF] text-black shadow-[0_0_15px_#00F0FF]" : "text-muted-foreground hover:text-foreground"
exam === "JEE" ? "bg-[var(--cyan-ai)] text-black shadow-[0_0_15px_var(--cyan-ai)]" : "text-muted-foreground hover:text-foreground"
}`}
>
JEE (Main) 300 Marks
@@ -140,7 +140,7 @@ export default function RankPredictorPage() {
<Card className="border-border/60 bg-secondary/10 backdrop-blur-xl rounded-3xl p-6 space-y-6 shadow-xl">
<div className="flex items-center justify-between border-b border-border/40 pb-4">
<h2 className="text-xl font-extrabold flex items-center gap-2">
<Sliders className="text-[#00F0FF]" size={20} /> Mark Simulator
<Sliders className="text-[var(--cyan-ai)]" size={20} /> Mark Simulator
</h2>
<span className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Drag Sliders to Adjust</span>
</div>
@@ -149,7 +149,7 @@ export default function RankPredictorPage() {
<div className="space-y-2">
<div className="flex justify-between items-center text-sm font-extrabold">
<span>Physics Score</span>
<span className="text-[#00F0FF] text-base">{physics} / {maxPhysics}</span>
<span className="text-[var(--cyan-ai)] text-base">{physics} / {maxPhysics}</span>
</div>
<input
type="range"
@@ -157,7 +157,7 @@ export default function RankPredictorPage() {
max={maxPhysics}
value={physics}
onChange={(e) => setPhysics(Number(e.target.value))}
className="w-full h-2.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-[#00F0FF]"
className="w-full h-2.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-[var(--cyan-ai)]"
/>
</div>
@@ -231,15 +231,15 @@ export default function RankPredictorPage() {
<div className="space-y-6">
{/* AIR Display Card */}
<Card className="border-2 border-[#00F0FF] bg-gradient-to-br from-[#00F0FF]/15 via-secondary/30 to-background rounded-3xl p-6 text-center shadow-[0_0_30px_rgba(0,240,255,0.15)] relative overflow-hidden">
<Card className="border-2 border-[var(--cyan-ai)] bg-gradient-to-br from-[var(--cyan-ai)]/15 via-secondary/30 to-background rounded-3xl p-6 text-center shadow-[0_0_30px_rgba(12,96,96,0.15)] relative overflow-hidden">
<div className="absolute top-0 right-0 p-4 opacity-10">
<Trophy size={120} className="text-[#00F0FF]" />
<Trophy size={120} className="text-[var(--cyan-ai)]" />
</div>
<div className="text-xs font-black uppercase tracking-widest text-[#00F0FF] mb-2">Estimated All India Rank</div>
<div className="text-xs font-black uppercase tracking-widest text-[var(--cyan-ai)] mb-2">Estimated All India Rank</div>
<div className="text-5xl md:text-6xl font-black tracking-tighter text-foreground my-3 filter drop-shadow-md">
{totalScore === 0 ? "AIR --" : `AIR ~${predictedRank.toLocaleString()}`}
</div>
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#00F0FF]/20 text-[#00F0FF] text-xs font-bold border border-[#00F0FF]/40">
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] text-xs font-bold border border-[var(--cyan-ai-40)]">
<CheckCircle2 size={13} /> {totalScore === 0 ? "Calibrating · Adjust Sliders" : "High Accuracy Confidence"}
</div>
</Card>
@@ -247,7 +247,7 @@ export default function RankPredictorPage() {
{/* College Admission Probability Table */}
<Card className="border-border/60 bg-secondary/10 backdrop-blur-xl rounded-3xl p-6 space-y-4">
<h3 className="text-lg font-extrabold flex items-center gap-2">
<Building2 className="text-[#00F0FF]" size={20} /> College Admission Chances
<Building2 className="text-[var(--cyan-ai)]" size={20} /> College Admission Chances
</h3>
{totalScore === 0 ? (

22
src/app/dashboard/settings/page.tsx
View File

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -105,8 +105,8 @@ export default function SettingsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Settings className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<Settings className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Account Settings
</h1>
@@ -169,7 +169,7 @@ export default function SettingsPage() {
type="text"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
/>
</div>
<div className="space-y-2">
@@ -178,7 +178,7 @@ export default function SettingsPage() {
type="text"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
/>
</div>
</div>
@@ -189,7 +189,7 @@ export default function SettingsPage() {
value={school}
placeholder="Enter your school name"
onChange={(e) => setSchool(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
/>
</div>
<div className="space-y-2">
@@ -200,7 +200,7 @@ export default function SettingsPage() {
list="indian-states"
placeholder="Enter or select your state"
onChange={(e) => setState(e.target.value)}
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
className="w-full bg-secondary/50 border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)]"
/>
<datalist id="indian-states">
<option value="Andhra Pradesh" />
@@ -265,7 +265,7 @@ export default function SettingsPage() {
onClick={() => setTargetExam("NEET")}
className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${
targetExam === "NEET"
? "border-[#00F0FF] bg-[#00F0FF]/5"
? "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)]"
: "border-border bg-secondary/20 hover:bg-secondary/50"
}`}
>
@@ -274,7 +274,7 @@ export default function SettingsPage() {
name="target"
checked={targetExam === "NEET"}
onChange={() => {}}
className="accent-[#00F0FF] w-4 h-4"
className="accent-[var(--cyan-ai)] w-4 h-4"
/>
<span className="font-bold">NEET (UG)</span>
</button>
@@ -283,7 +283,7 @@ export default function SettingsPage() {
onClick={() => setTargetExam("JEE_Main")}
className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${
targetExam === "JEE_Main"
? "border-[#00F0FF] bg-[#00F0FF]/5"
? "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)]"
: "border-border bg-secondary/20 hover:bg-secondary/50"
}`}
>
@@ -292,7 +292,7 @@ export default function SettingsPage() {
name="target"
checked={targetExam === "JEE_Main"}
onChange={() => {}}
className="accent-[#00F0FF] w-4 h-4"
className="accent-[var(--cyan-ai)] w-4 h-4"
/>
<span className="font-bold">JEE Main & Adv</span>
</button>

10
src/app/dashboard/streaks/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -49,8 +49,8 @@ export default function StreaksPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<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-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Flame className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
<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)]">
<Flame className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span>
Your Learning Streak
</h1>
@@ -88,7 +88,7 @@ export default function StreaksPage() {
</div>
<div>
<p className="text-sm text-muted-foreground mb-1">Total Streak Points Earned</p>
<p className="text-3xl font-bold text-[#00F0FF]">{streakPoints.toLocaleString()}</p>
<p className="text-3xl font-bold text-[var(--cyan-ai)]">{streakPoints.toLocaleString()}</p>
{streakPoints === 0 && (
<p className="text-xs text-muted-foreground mt-1">Take a test to activate consistency bonus points</p>
)}
@@ -106,7 +106,7 @@ export default function StreaksPage() {
</div>
<div className="pt-8">
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2"><Gift className="text-[#00F0FF]" /> Streak Rewards</h2>
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2"><Gift className="text-[var(--cyan-ai)]" /> Streak Rewards</h2>
<div className="space-y-4">
{rewards.map((reward, i) => (
<div key={i} className={`p-5 rounded-2xl border flex items-center justify-between transition-colors ${reward.unlocked ? 'bg-primary/5 border-primary/30' : 'bg-secondary/10 border-border opacity-70'}`}>