chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -3,39 +3,133 @@
|
||||
import { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
|
||||
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Zap, ArrowLeft, Clock, Target, Lightbulb, CheckCircle2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { Zap, Clock, Target, Lightbulb, CheckCircle2, AlertTriangle, TrendingUp } from "lucide-react"
|
||||
|
||||
const NEG_MARKING_DATA = [
|
||||
{ subject: "Physics", attempts: 30, negMarks: 12, accuracy: 60 },
|
||||
{ subject: "Chemistry", attempts: 35, negMarks: 7, accuracy: 80 },
|
||||
{ subject: "Maths", attempts: 28, negMarks: 10, accuracy: 64 },
|
||||
]
|
||||
|
||||
export default function StrategyPage() {
|
||||
return (
|
||||
<div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500 min-h-screen">
|
||||
{/* Navigation Header */}
|
||||
<div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto animate-in fade-in duration-500 min-h-screen">
|
||||
{/* Page Header */}
|
||||
<div className="border-b border-border/50 pb-6">
|
||||
<h1 className="text-3xl md:text-5xl font-black tracking-tight flex items-center gap-3">
|
||||
<Zap className="text-[#00F0FF]" size={36} />
|
||||
Exam Strategy & Time Optimization
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base md:text-lg mt-1 font-medium max-w-3xl">
|
||||
Master time allocation per question, eliminate negative marking traps, and fine-tune your subject sequence for maximum score yield.
|
||||
</p>
|
||||
<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-[#00F0FF]/10 border border-[#00F0FF]/20">
|
||||
<Zap className="text-[#00F0FF]" size={28} />
|
||||
</span>
|
||||
Exam Strategy & Time Optimization
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
|
||||
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-[#00F0FF]/10 border border-[#00F0FF]/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>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
|
||||
<Target className="text-[#00F0FF]" size={24} /> Exam Day Time Strategy
|
||||
</h2>
|
||||
{/* KPI Strip */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: "Time Per Question", value: "45 sec", note: "Target: 38 sec", icon: <Clock size={18} className="text-red-400" />, color: "border-red-400/20 bg-red-400/5" },
|
||||
{ label: "Negative Marks Lost", value: "−29", note: "Last mock test", icon: <AlertTriangle size={18} className="text-amber-400" />, color: "border-amber-400/20 bg-amber-400/5" },
|
||||
{ label: "Attempted Questions", value: "93 / 120", note: "+7 vs last test", icon: <Target size={18} className="text-[#00F0FF]" />, color: "border-[#00F0FF]/20 bg-[#00F0FF]/5" },
|
||||
{ label: "Score Yield", value: "214", note: "Predicted score", 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`}>
|
||||
<CardContent className="p-5 flex flex-col gap-2">
|
||||
{kpi.icon}
|
||||
<div className="text-2xl font-black">{kpi.value}</div>
|
||||
<div className="text-xs font-semibold text-muted-foreground">{kpi.label}</div>
|
||||
<div className="text-[11px] font-bold text-muted-foreground/60">{kpi.note}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Cards Row */}
|
||||
<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]" />
|
||||
Subject Sequence Strategy
|
||||
</div>
|
||||
<ExamStrategyCard />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<h2 className="text-2xl font-extrabold tracking-tight mb-4 flex items-center gap-2">
|
||||
<Clock className="text-amber-400" size={24} /> Study Time Optimization
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
|
||||
<Clock size={16} className="text-amber-400" />
|
||||
Daily Peak Hours Analysis
|
||||
</div>
|
||||
<StudyTimeOptimizationCard />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Negative Marking Analysis */}
|
||||
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<AlertTriangle size={20} className="text-amber-400" />
|
||||
<h3 className="text-lg font-extrabold tracking-tight">Negative Marking Analysis</h3>
|
||||
<span className="ml-auto text-xs text-muted-foreground font-semibold">Last Mock Test · Aug 1</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{NEG_MARKING_DATA.map((row) => (
|
||||
<div key={row.subject} className="grid grid-cols-4 gap-4 items-center p-3 rounded-xl bg-white/5 border border-border/40">
|
||||
<div className="font-black text-sm">{row.subject}</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-black text-foreground">{row.attempts}</div>
|
||||
<div className="text-[11px] text-muted-foreground font-semibold">Attempted</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-black text-red-400">−{row.negMarks}</div>
|
||||
<div className="text-[11px] text-muted-foreground font-semibold">Neg. Marks</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1">
|
||||
<span className="text-muted-foreground">Accuracy</span>
|
||||
<span className={row.accuracy >= 75 ? "text-green-400" : row.accuracy >= 60 ? "text-amber-400" : "text-red-400"}>{row.accuracy}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${row.accuracy >= 75 ? "bg-green-400" : row.accuracy >= 60 ? "bg-amber-400" : "bg-red-400"}`}
|
||||
style={{ width: `${row.accuracy}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-4 font-medium pl-1">
|
||||
<span className="font-black text-amber-400">Insight:</span> You're losing ~29 marks to wrong answers. Switching to "skip and revisit" for uncertain Physics questions could recover 15–20 marks.
|
||||
</p>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ 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" },
|
||||
].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>
|
||||
<p className="text-sm text-muted-foreground font-medium leading-relaxed">{s.tip}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user