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

10
src/app/admin/agents/page.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, BrainCircuit, Zap, Server, ShieldCheck } from "lucide-react" import { Activity, BrainCircuit, Zap, Server, ShieldCheck } from "lucide-react"
export default function AgentsPage() { export default function AgentsPage() {
@@ -23,7 +23,7 @@ export default function AgentsPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-3xl font-bold flex items-center gap-3"> <div className="text-3xl font-bold flex items-center gap-3">
<div className="size-3 rounded-full bg-[#00F0FF] animate-pulse"></div> Operational <div className="size-3 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div> Operational
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -51,9 +51,9 @@ export default function AgentsPage() {
<Card key={i} className={`border ${agent.status === 'Healthy' ? 'border-border' : 'border-yellow-500/50 shadow-[0_0_15px_-5px_rgba(234,179,8,0.3)]'} bg-background`}> <Card key={i} className={`border ${agent.status === 'Healthy' ? 'border-border' : 'border-yellow-500/50 shadow-[0_0_15px_-5px_rgba(234,179,8,0.3)]'} bg-background`}>
<CardHeader className="flex flex-row items-center justify-between pb-2"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-lg font-bold flex items-center gap-2"> <CardTitle className="text-lg font-bold flex items-center gap-2">
<BrainCircuit className="text-[#00F0FF]" size={20} /> {agent.name} <BrainCircuit className="text-[var(--cyan-ai)]" size={20} /> {agent.name}
</CardTitle> </CardTitle>
<div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[#00F0FF]/10 text-[#00F0FF]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}> <div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}>
{agent.status} {agent.status}
</div> </div>
</CardHeader> </CardHeader>
@@ -74,7 +74,7 @@ export default function AgentsPage() {
</div> </div>
<div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden"> <div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden">
<div <div
className={`h-full ${agent.status === 'Healthy' ? 'bg-[#00F0FF]' : 'bg-yellow-500'}`} className={`h-full ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai)]' : 'bg-yellow-500'}`}
style={{ width: agent.successRate }} style={{ width: agent.successRate }}
></div> ></div>
</div> </div>

8
src/app/admin/layout.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { ReactNode } from "react" import { ReactNode } from "react"
import { LayoutDashboard, Users, Database, Terminal, Settings, FileText, Tag } from "lucide-react" import { LayoutDashboard, Users, Database, Terminal, Settings, FileText, Tag } from "lucide-react"
@@ -11,12 +11,12 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
const pathname = usePathname() const pathname = usePathname()
return ( return (
<div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-[#00F0FF]/20"> <div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-[var(--cyan-ai-20)]">
{/* Sidebar */} {/* Sidebar */}
<aside className="w-64 border-r border-border bg-secondary/10 flex flex-col hidden md:flex"> <aside className="w-64 border-r border-border bg-secondary/10 flex flex-col hidden md:flex">
<div className="p-6 border-b border-border"> <div className="p-6 border-b border-border">
<Logo href="/admin" className="w-full" imageClassName="object-contain object-left" height={56} /> <Logo href="/admin" className="w-full" imageClassName="object-contain object-left" height={56} />
<div className="mt-3 text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Admin Panel</div> <div className="mt-3 text-xs font-bold uppercase tracking-widest text-[var(--cyan-ai)]">Admin Panel</div>
</div> </div>
<nav className="flex-1 px-4 space-y-1.5 mt-6"> <nav className="flex-1 px-4 space-y-1.5 mt-6">
<NavItem href="/admin" icon={<LayoutDashboard size={18} />} label="Command Center" active={pathname === "/admin"} /> <NavItem href="/admin" icon={<LayoutDashboard size={18} />} label="Command Center" active={pathname === "/admin"} />
@@ -52,7 +52,7 @@ function NavItem({ href, icon, label, active }: { href: string, icon: React.Reac
href={href} href={href}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 ${ className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 ${
active active
? "bg-[#00F0FF]/10 text-[#00F0FF] font-medium border border-[#00F0FF]/20" ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] font-medium border border-[var(--cyan-ai-20)]"
: "text-muted-foreground hover:bg-secondary hover:text-foreground font-medium" : "text-muted-foreground hover:bg-secondary hover:text-foreground font-medium"
}`} }`}
> >

26
src/app/admin/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -24,7 +24,7 @@ export default function AdminDashboard() {
<h1 className="text-3xl font-bold tracking-tighter text-foreground">Command Center</h1> <h1 className="text-3xl font-bold tracking-tighter text-foreground">Command Center</h1>
<p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p> <p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p>
</div> </div>
<Button variant="outline" className="gap-2 border-[#00F0FF]/50 text-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] rounded-xl font-medium shadow-[0_0_15px_-5px_#00F0FF]"> <Button variant="outline" className="gap-2 border-[var(--cyan-ai-10)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] hover:bg-[var(--cyan-ai-10)] hover:text-[var(--cyan-ai)] rounded-xl font-medium shadow-[0_0_15px_-5px_var(--cyan-ai)]">
<RefreshCw size={16} /> Refresh Data <RefreshCw size={16} /> Refresh Data
</Button> </Button>
</header> </header>
@@ -51,14 +51,14 @@ export default function AdminDashboard() {
<p className="text-xs text-muted-foreground mt-1 font-medium">+2,401 this week</p> <p className="text-xs text-muted-foreground mt-1 font-medium">+2,401 this week</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-[#00F0FF]/5 border-[#00F0FF]/30 shadow-[0_0_20px_-10px_#00F0FF] rounded-2xl"> <Card className="bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-30)] shadow-[0_0_20px_-10px_var(--cyan-ai)] rounded-2xl">
<CardHeader className="pb-2 flex flex-row items-center justify-between"> <CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium text-muted-foreground">AI Agent Accuracy</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">AI Agent Accuracy</CardTitle>
<div className="p-2 bg-[#00F0FF]/20 text-[#00F0FF] rounded-lg"><Terminal size={16}/></div> <div className="p-2 bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] rounded-lg"><Terminal size={16}/></div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold text-[#00F0FF]">96.4%</div> <div className="text-2xl font-bold text-[var(--cyan-ai)]">96.4%</div>
<p className="text-xs text-[#00F0FF]/70 mt-1 font-medium">Based on 1.2M interactions</p> <p className="text-xs text-[var(--cyan-ai-80)] mt-1 font-medium">Based on 1.2M interactions</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-secondary/10 border-border/50 rounded-2xl"> <Card className="bg-secondary/10 border-border/50 rounded-2xl">
@@ -84,8 +84,8 @@ export default function AdminDashboard() {
<AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<defs> <defs>
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#00F0FF" stopOpacity={0.3}/> <stop offset="5%" stopColor="var(--cyan-ai)" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#00F0FF" stopOpacity={0}/> <stop offset="95%" stopColor="var(--cyan-ai)" stopOpacity={0}/>
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#262626" vertical={false} /> <CartesianGrid strokeDasharray="3 3" stroke="#262626" vertical={false} />
@@ -93,9 +93,9 @@ export default function AdminDashboard() {
<YAxis stroke="#737373" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}M`} /> <YAxis stroke="#737373" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}M`} />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#0a0a0a', borderColor: '#262626', borderRadius: '12px' }} contentStyle={{ backgroundColor: '#0a0a0a', borderColor: '#262626', borderRadius: '12px' }}
itemStyle={{ color: '#00F0FF', fontWeight: 'bold' }} itemStyle={{ color: 'var(--cyan-ai)', fontWeight: 'bold' }}
/> />
<Area type="monotone" dataKey="tokens" stroke="#00F0FF" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" /> <Area type="monotone" dataKey="tokens" stroke="var(--cyan-ai)" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" />
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </CardContent>
@@ -157,7 +157,7 @@ export default function AdminDashboard() {
<div> <div>
<CardTitle>Recent Question Uploads</CardTitle> <CardTitle>Recent Question Uploads</CardTitle>
</div> </div>
<Button size="sm" className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl h-10 px-4">Add Question</Button> <Button size="sm" className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl h-10 px-4">Add Question</Button>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="rounded-2xl border border-border overflow-hidden"> <div className="rounded-2xl border border-border overflow-hidden">
@@ -178,7 +178,7 @@ export default function AdminDashboard() {
<td className="px-5 py-4 font-medium">Thermodynamics</td> <td className="px-5 py-4 font-medium">Thermodynamics</td>
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td> <td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td>
<td className="px-5 py-4 text-right"> <td className="px-5 py-4 text-right">
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button> <Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
</td> </td>
</tr> </tr>
<tr className="hover:bg-secondary/20 transition-colors"> <tr className="hover:bg-secondary/20 transition-colors">
@@ -187,7 +187,7 @@ export default function AdminDashboard() {
<td className="px-5 py-4 font-medium">Calculus</td> <td className="px-5 py-4 font-medium">Calculus</td>
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">Evaluate the integral of e^x sin(x) dx...</td> <td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">Evaluate the integral of e^x sin(x) dx...</td>
<td className="px-5 py-4 text-right"> <td className="px-5 py-4 text-right">
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button> <Button variant="ghost" size="sm" className="text-[var(--cyan-ai)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] font-bold rounded-lg">Edit</Button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

10
src/app/admin/questions/page.tsx
View File

@@ -1,4 +1,4 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Search, Plus, Filter, MoreHorizontal, Edit, Trash } from "lucide-react" import { Search, Plus, Filter, MoreHorizontal, Edit, Trash } from "lucide-react"
@@ -20,7 +20,7 @@ export default function QuestionsPage() {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<Button variant="outline" className="border-border hover:bg-secondary"><Filter size={16} className="mr-2"/> Filter</Button> <Button variant="outline" className="border-border hover:bg-secondary"><Filter size={16} className="mr-2"/> Filter</Button>
<Button className="bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold"><Plus size={16} className="mr-2"/> Add Question</Button> <Button className="bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] font-bold"><Plus size={16} className="mr-2"/> Add Question</Button>
</div> </div>
</div> </div>
@@ -31,7 +31,7 @@ export default function QuestionsPage() {
<input <input
type="text" type="text"
placeholder="Search by ID, concept, or chapter..." placeholder="Search by ID, concept, or chapter..."
className="w-full bg-background border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]" className="w-full bg-background border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--cyan-ai)]"
/> />
</div> </div>
</div> </div>
@@ -70,7 +70,7 @@ export default function QuestionsPage() {
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<Badge className={ <Badge className={
q.status === "Active" ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" : q.status === "Active" ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]" :
q.status === "Review" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" : q.status === "Review" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" :
"bg-muted/50 text-muted-foreground border-border" "bg-muted/50 text-muted-foreground border-border"
} variant="outline"> } variant="outline">
@@ -79,7 +79,7 @@ export default function QuestionsPage() {
</td> </td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="flex justify-end gap-2 text-muted-foreground"> <div className="flex justify-end gap-2 text-muted-foreground">
<button className="p-1.5 hover:text-[#00F0FF] hover:bg-secondary rounded"><Edit size={16} /></button> <button className="p-1.5 hover:text-[var(--cyan-ai)] hover:bg-secondary rounded"><Edit size={16} /></button>
<button className="p-1.5 hover:text-red-500 hover:bg-secondary rounded"><Trash size={16} /></button> <button className="p-1.5 hover:text-red-500 hover:bg-secondary rounded"><Trash size={16} /></button>
<button className="p-1.5 hover:text-foreground hover:bg-secondary rounded"><MoreHorizontal size={16} /></button> <button className="p-1.5 hover:text-foreground hover:bg-secondary rounded"><MoreHorizontal size={16} /></button>
</div> </div>

14
src/app/admin/settings/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -72,13 +72,13 @@ export default function SettingsPage() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold">Primary Model Name</label> <label className="text-sm font-bold">Primary Model Name</label>
<input type="text" defaultValue="gemini-1.5-pro-experimental" className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]" /> <input type="text" defaultValue="gemini-1.5-pro-experimental" className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--cyan-ai)]" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold">OpenAI API Key (Fallback)</label> <label className="text-sm font-bold">OpenAI API Key (Fallback)</label>
<input type="password" defaultValue="sk-........................" className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]" /> <input type="password" defaultValue="sk-........................" className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--cyan-ai)]" />
</div> </div>
<Button onClick={() => alert("Configuration Saved via Admin Panel")} className="bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold">Save Configuration</Button> <Button onClick={() => alert("Configuration Saved via Admin Panel")} className="bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] font-bold">Save Configuration</Button>
</CardContent> </CardContent>
</Card> </Card>
@@ -106,7 +106,7 @@ export default function SettingsPage() {
type="number" type="number"
value={settings.trial_duration_days} value={settings.trial_duration_days}
onChange={(e) => setSettings(prev => ({ ...prev, trial_duration_days: parseInt(e.target.value) || 0 }))} onChange={(e) => setSettings(prev => ({ ...prev, trial_duration_days: parseInt(e.target.value) || 0 }))}
className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]" className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--cyan-ai)]"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -114,13 +114,13 @@ export default function SettingsPage() {
<select <select
value={settings.trial_tier} value={settings.trial_tier}
onChange={(e) => setSettings(prev => ({ ...prev, trial_tier: e.target.value }))} onChange={(e) => setSettings(prev => ({ ...prev, trial_tier: e.target.value }))}
className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]"> className="w-full bg-background border border-border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--cyan-ai)]">
<option value="Pro">Pro Tier</option> <option value="Pro">Pro Tier</option>
<option value="Al_Coach">AI Coach (All Features)</option> <option value="Al_Coach">AI Coach (All Features)</option>
</select> </select>
</div> </div>
</div> </div>
<Button onClick={() => saveSettings("Trial Settings")} className="bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold">Update Trial Settings</Button> <Button onClick={() => saveSettings("Trial Settings")} className="bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] font-bold">Update Trial Settings</Button>
</CardContent> </CardContent>
</Card> </Card>

16
src/app/admin/students/[studentId]/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation" import { useParams, useRouter } from "next/navigation"
@@ -12,7 +12,7 @@ import {
} from "lucide-react" } from "lucide-react"
const TIER_STYLE: Record<string, string> = { const TIER_STYLE: Record<string, string> = {
"Al_Coach": "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20", "Al_Coach": "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]",
"Pro": "bg-yellow-500/10 text-yellow-500 border-yellow-500/20", "Pro": "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
"Free": "bg-secondary text-foreground border-border", "Free": "bg-secondary text-foreground border-border",
} }
@@ -114,7 +114,7 @@ export default function StudentKundliPage() {
<Button variant="ghost" onClick={() => setEditing(false)} className="gap-2"> <Button variant="ghost" onClick={() => setEditing(false)} className="gap-2">
<X size={14} /> Cancel <X size={14} /> Cancel
</Button> </Button>
<Button onClick={handleSave} disabled={saving} className="gap-2 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90"> <Button onClick={handleSave} disabled={saving} className="gap-2 bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)]">
{saving ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />} {saving ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
Save Changes Save Changes
</Button> </Button>
@@ -131,7 +131,7 @@ export default function StudentKundliPage() {
{data.profile_image_url ? ( {data.profile_image_url ? (
<img src={data.profile_image_url} alt={data.name} className="w-20 h-20 rounded-2xl object-cover" /> <img src={data.profile_image_url} alt={data.name} className="w-20 h-20 rounded-2xl object-cover" />
) : ( ) : (
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-[#00F0FF]/20 to-[#00F0FF]/5 border border-[#00F0FF]/20 flex items-center justify-center text-3xl font-black text-[#00F0FF]"> <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-[var(--cyan-ai-20)] to-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] flex items-center justify-center text-3xl font-black text-[var(--cyan-ai)]">
{data.name.charAt(0)} {data.name.charAt(0)}
</div> </div>
)} )}
@@ -203,7 +203,7 @@ export default function StudentKundliPage() {
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[ {[
{ label: "Tests Attempted", value: data.stats.total_tests, color: "text-[#00F0FF]", icon: <Activity size={16}/> }, { label: "Tests Attempted", value: data.stats.total_tests, color: "text-[var(--cyan-ai)]", icon: <Activity size={16}/> },
{ label: "Avg Accuracy", value: data.stats.avg_accuracy ? `${data.stats.avg_accuracy}%` : "—", color: "text-green-500", icon: <TrendingUp size={16}/> }, { label: "Avg Accuracy", value: data.stats.avg_accuracy ? `${data.stats.avg_accuracy}%` : "—", color: "text-green-500", icon: <TrendingUp size={16}/> },
{ label: "AI Sessions", value: data.stats.mastered_mistakes, color: "text-purple-400", icon: <Award size={16}/> }, { label: "AI Sessions", value: data.stats.mastered_mistakes, color: "text-purple-400", icon: <Award size={16}/> },
{ {
@@ -240,7 +240,7 @@ export default function StudentKundliPage() {
<Card className="lg:col-span-2 border-border shadow-sm"> <Card className="lg:col-span-2 border-border shadow-sm">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-base"> <CardTitle className="flex items-center gap-2 text-base">
<Activity size={16} className="text-[#00F0FF]" /> Recent Activity <Activity size={16} className="text-[var(--cyan-ai)]" /> Recent Activity
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@@ -255,7 +255,7 @@ export default function StudentKundliPage() {
<div className="text-xs text-muted-foreground mt-0.5">{formatDate(a.submitted_at)}</div> <div className="text-xs text-muted-foreground mt-0.5">{formatDate(a.submitted_at)}</div>
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="font-mono font-bold text-[#00F0FF] text-sm">{a.score}/{a.total_questions}</div> <div className="font-mono font-bold text-[var(--cyan-ai)] text-sm">{a.score}/{a.total_questions}</div>
<div className="text-xs text-muted-foreground">{a.accuracy.toFixed(1)}% acc</div> <div className="text-xs text-muted-foreground">{a.accuracy.toFixed(1)}% acc</div>
</div> </div>
</div> </div>
@@ -293,7 +293,7 @@ export default function StudentKundliPage() {
<Card className="border-border shadow-sm"> <Card className="border-border shadow-sm">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2 text-base"> <CardTitle className="flex items-center gap-2 text-base">
<Award size={16} className="text-[#00F0FF]" /> Subscription History <Award size={16} className="text-[var(--cyan-ai)]" /> Subscription History
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>

4
src/app/admin/students/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -7,7 +7,7 @@ import { Search, Download, Flame, RefreshCw } from "lucide-react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
const TIER_STYLE: Record<string, string> = { const TIER_STYLE: Record<string, string> = {
"Al_Coach": "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20 font-bold", "Al_Coach": "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)] font-bold",
"Pro": "bg-yellow-500/10 text-yellow-500 border-yellow-500/20 font-bold", "Pro": "bg-yellow-500/10 text-yellow-500 border-yellow-500/20 font-bold",
"Free": "bg-secondary text-foreground border-border", "Free": "bg-secondary text-foreground border-border",
} }

8
src/app/cancellation-policy/page.tsx
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'; import Link from 'next/link';
export default function CancellationPolicyPage() { export default function CancellationPolicyPage() {
return ( return (
@@ -31,7 +31,7 @@ export default function CancellationPolicyPage() {
<ul className="list-disc pl-6 mb-4 space-y-2"> <ul className="list-disc pl-6 mb-4 space-y-2">
<li>Your subscription will <strong>not</strong> auto-renew at the end of the current billing period</li> <li>Your subscription will <strong>not</strong> auto-renew at the end of the current billing period</li>
<li>You will continue to have full access to your paid features until the end of the current billing period</li> <li>You will continue to have full access to your paid features until the end of the current billing period</li>
<li>No refund will be issued for the remaining days of the current billing period, except as provided in our <a href="/refund-policy" className="text-[#00F0FF] hover:underline font-semibold">Refund Policy</a></li> <li>No refund will be issued for the remaining days of the current billing period, except as provided in our <a href="/refund-policy" className="text-[var(--cyan-ai)] hover:underline font-semibold">Refund Policy</a></li>
</ul> </ul>
<h3 className="text-xl font-bold mt-6 mb-3">2.3 Timing</h3> <h3 className="text-xl font-bold mt-6 mb-3">2.3 Timing</h3>
@@ -44,14 +44,14 @@ export default function CancellationPolicyPage() {
<h2 className="text-2xl font-bold mt-8 mb-4">4. Cancellation by PragatiVeer</h2> <h2 className="text-2xl font-bold mt-8 mb-4">4. Cancellation by PragatiVeer</h2>
<p>We reserve the right to cancel or suspend your subscription immediately if:</p> <p>We reserve the right to cancel or suspend your subscription immediately if:</p>
<ul className="list-disc pl-6 mb-4 space-y-2"> <ul className="list-disc pl-6 mb-4 space-y-2">
<li>You violate our <a href="/terms-and-conditions" className="text-[#00F0FF] hover:underline font-semibold">Terms & Conditions</a></li> <li>You violate our <a href="/terms-and-conditions" className="text-[var(--cyan-ai)] hover:underline font-semibold">Terms & Conditions</a></li>
<li>You engage in fraudulent, abusive, or illegal activity</li> <li>You engage in fraudulent, abusive, or illegal activity</li>
<li>We are required to do so by law</li> <li>We are required to do so by law</li>
</ul> </ul>
<p>In such cases, fees paid are non-refundable.</p> <p>In such cases, fees paid are non-refundable.</p>
<h2 className="text-2xl font-bold mt-8 mb-4">5. Account Deletion</h2> <h2 className="text-2xl font-bold mt-8 mb-4">5. Account Deletion</h2>
<p>Cancelling your subscription does <strong>not</strong> delete your account. To delete your account and all associated data, please follow the process outlined in our <a href="/privacy-policy" className="text-[#00F0FF] hover:underline font-semibold">Privacy Policy</a>.</p> <p>Cancelling your subscription does <strong>not</strong> delete your account. To delete your account and all associated data, please follow the process outlined in our <a href="/privacy-policy" className="text-[var(--cyan-ai)] hover:underline font-semibold">Privacy Policy</a>.</p>
<h2 className="text-2xl font-bold mt-8 mb-4">6. Contact</h2> <h2 className="text-2xl font-bold mt-8 mb-4">6. Contact</h2>
<p>For any questions regarding this Cancellation Policy, contact us at <strong>contact@pragativeer.com</strong> or reach out to our Grievance Officer:</p> <p>For any questions regarding this Cancellation Policy, contact us at <strong>contact@pragativeer.com</strong> or reach out to our Grievance Officer:</p>

8
src/app/cbt/[examId]/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState, use, useRef } from "react" import { useEffect, useState, use, useRef } from "react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -422,9 +422,9 @@ export default function CBTExamPage({ params }: { params: Promise<{ examId: stri
<div className="flex items-center gap-3 md:gap-6"> <div className="flex items-center gap-3 md:gap-6">
<div className="hidden lg:flex items-center gap-2 mr-4"> <div className="hidden lg:flex items-center gap-2 mr-4">
<Button variant="ghost" size="sm" onClick={() => setShowCalc(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><CalculatorIcon size={14}/> Calculator</Button> <Button variant="ghost" size="sm" onClick={() => setShowCalc(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[var(--cyan-ai)] hover:text-black transition-colors"><CalculatorIcon size={14}/> Calculator</Button>
<Button variant="ghost" size="sm" onClick={() => setShowPeriodicTable(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><FlaskConical size={14}/> Periodic Table</Button> <Button variant="ghost" size="sm" onClick={() => setShowPeriodicTable(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[var(--cyan-ai)] hover:text-black transition-colors"><FlaskConical size={14}/> Periodic Table</Button>
<Button variant="ghost" size="sm" onClick={() => setShowScratchpad(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[#00F0FF] hover:text-black transition-colors"><Edit3 size={14}/> Scratchpad</Button> <Button variant="ghost" size="sm" onClick={() => setShowScratchpad(true)} className="gap-2 text-xs font-semibold text-muted-foreground hover:bg-[var(--cyan-ai)] hover:text-black transition-colors"><Edit3 size={14}/> Scratchpad</Button>
</div> </div>
<div className={`flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-xl font-mono text-base md:text-lg tracking-wider font-medium border border-border ${isTimedOut ? 'bg-red-500/10 text-red-500' : 'bg-secondary/50 text-foreground'}`}> <div className={`flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-xl font-mono text-base md:text-lg tracking-wider font-medium border border-border ${isTimedOut ? 'bg-red-500/10 text-red-500' : 'bg-secondary/50 text-foreground'}`}>

24
src/app/checkout/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
@@ -18,7 +18,7 @@ import { Suspense } from "react"
export default function CheckoutPage() { export default function CheckoutPage() {
return ( return (
<Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[#00F0FF]" size={48} /></div>}> <Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} /></div>}>
<CheckoutContent /> <CheckoutContent />
</Suspense> </Suspense>
) )
@@ -137,7 +137,7 @@ function CheckoutContent() {
address: address address: address
}, },
theme: { theme: {
color: "#00F0FF" color: "var(--cyan-ai)"
} }
} }
@@ -171,7 +171,7 @@ function CheckoutContent() {
if (userLoading || !userId) { if (userLoading || !userId) {
return ( return (
<div className="min-h-screen bg-background flex items-center justify-center"> <div className="min-h-screen bg-background flex items-center justify-center">
<Loader2 className="animate-spin text-[#00F0FF]" size={48} /> <Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} />
</div> </div>
) )
} }
@@ -179,12 +179,12 @@ function CheckoutContent() {
if (success) { if (success) {
return ( return (
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 animate-in fade-in zoom-in duration-500"> <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 animate-in fade-in zoom-in duration-500">
<Card className="max-w-md w-full border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/20 rounded-[2rem] text-center p-8"> <Card className="max-w-md w-full border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-20)] rounded-[2rem] text-center p-8">
<CheckCircle2 size={80} className="text-[#00F0FF] mx-auto mb-6" /> <CheckCircle2 size={80} className="text-[var(--cyan-ai)] mx-auto mb-6" />
<h2 className="text-3xl font-black mb-2">Payment Successful!</h2> <h2 className="text-3xl font-black mb-2">Payment Successful!</h2>
<p className="text-muted-foreground mb-8">Your account has been upgraded to the <strong>{tier}</strong> tier.</p> <p className="text-muted-foreground mb-8">Your account has been upgraded to the <strong>{tier}</strong> tier.</p>
<div className="flex justify-center"> <div className="flex justify-center">
<Loader2 className="animate-spin text-[#00F0FF]" size={24} /> <Loader2 className="animate-spin text-[var(--cyan-ai)]" size={24} />
<span className="ml-3 font-medium">Redirecting to dashboard...</span> <span className="ml-3 font-medium">Redirecting to dashboard...</span>
</div> </div>
</Card> </Card>
@@ -217,7 +217,7 @@ function CheckoutContent() {
onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))} onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))}
maxLength={10} maxLength={10}
placeholder="9876543210" placeholder="9876543210"
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] focus:border-transparent transition-all" 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)] focus:border-transparent transition-all"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -227,7 +227,7 @@ function CheckoutContent() {
onChange={(e) => setAddress(e.target.value)} onChange={(e) => setAddress(e.target.value)}
placeholder="Complete address (House No, Street, City, State, PIN)" placeholder="Complete address (House No, Street, City, State, PIN)"
rows={3} rows={3}
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] focus:border-transparent transition-all 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)] focus:border-transparent transition-all resize-none"
/> />
</div> </div>
</CardContent> </CardContent>
@@ -239,7 +239,7 @@ function CheckoutContent() {
<div className="hidden md:block"> <div className="hidden md:block">
<h2 className="text-3xl font-black tracking-tight text-transparent select-none">Summary</h2> <h2 className="text-3xl font-black tracking-tight text-transparent select-none">Summary</h2>
</div> </div>
<Card className="border-border bg-gradient-to-b from-secondary/30 to-background backdrop-blur-md rounded-[2rem] overflow-hidden relative shadow-xl shadow-[#00F0FF]/5"> <Card className="border-border bg-gradient-to-b from-secondary/30 to-background backdrop-blur-md rounded-[2rem] overflow-hidden relative shadow-xl shadow-[var(--cyan-ai-10)]">
<CardHeader className="border-b border-border/50 bg-background/50"> <CardHeader className="border-b border-border/50 bg-background/50">
<CardTitle>Order Summary</CardTitle> <CardTitle>Order Summary</CardTitle>
</CardHeader> </CardHeader>
@@ -255,7 +255,7 @@ function CheckoutContent() {
<div className="h-px w-full bg-border/50 my-4" /> <div className="h-px w-full bg-border/50 my-4" />
<div className="flex justify-between items-center text-xl font-black"> <div className="flex justify-between items-center text-xl font-black">
<span>Total Amount</span> <span>Total Amount</span>
<span className="text-[#00F0FF]">₹{amount.toLocaleString()}</span> <span className="text-[var(--cyan-ai)]">₹{amount.toLocaleString()}</span>
</div> </div>
{error && ( {error && (
@@ -266,7 +266,7 @@ function CheckoutContent() {
</CardContent> </CardContent>
<CardFooter className="flex-col gap-4 bg-background/50 pt-4"> <CardFooter className="flex-col gap-4 bg-background/50 pt-4">
<Button <Button
className="w-full rounded-xl h-14 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all shadow-[0_0_20px_-5px_#00F0FF]" className="w-full rounded-xl h-14 font-bold text-lg bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all shadow-[0_0_20px_-5px_var(--cyan-ai)]"
onClick={handlePayment} onClick={handlePayment}
disabled={processing} disabled={processing}
> >

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 { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -114,7 +114,7 @@ export default function AIComCBTDPPPage() {
</Link> </Link>
<div> <div>
<div className="flex items-center gap-2 mb-1"> <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 PrepPilot AI
</span> </span>
<span className="text-xs font-bold text-muted-foreground">• {user?.target_exam?.replace("_", " ") || "JEE/NEET"}</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>
<div className="flex items-center gap-4"> <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"> <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-[#00F0FF] animate-pulse" /> <Clock size={18} className="text-[var(--cyan-ai)] animate-pulse" />
{formatTime(timeLeft)} {formatTime(timeLeft)}
</div> </div>
{!submitted ? ( {!submitted ? (
<Button <Button
onClick={() => setSubmitted(true)} 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" /> Submit Test <Send size={16} className="ml-2" />
</Button> </Button>
@@ -171,7 +171,7 @@ export default function AIComCBTDPPPage() {
<div className="lg:col-span-3"> <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"> <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"> <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} Question {activeQuestion + 1} of {sampleQuestions.length}
</span> </span>
<span className="text-xs font-bold bg-secondary px-3 py-1 rounded-full text-muted-foreground"> <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" let btnStyle = "border-border bg-secondary/20 hover:border-primary/50 text-foreground"
if (isSelected) { 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 (submitted) {
if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold" if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold"
@@ -216,7 +216,7 @@ export default function AIComCBTDPPPage() {
</div> </div>
{submitted && ( {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> <span className="font-extrabold uppercase text-xs tracking-wider block">AI Solution & Explanation:</span>
<p>{sampleQuestions[activeQuestion].explanation}</p> <p>{sampleQuestions[activeQuestion].explanation}</p>
</div> </div>
@@ -236,7 +236,7 @@ export default function AIComCBTDPPPage() {
<Button <Button
disabled={activeQuestion === sampleQuestions.length - 1} disabled={activeQuestion === sampleQuestions.length - 1}
onClick={() => setActiveQuestion(prev => Math.min(sampleQuestions.length - 1, prev + 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" /> Next Question <ArrowRight size={16} className="ml-2" />
</Button> </Button>
@@ -258,9 +258,9 @@ export default function AIComCBTDPPPage() {
onClick={() => setActiveQuestion(idx)} onClick={() => setActiveQuestion(idx)}
className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${ className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${
isCurr 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 : 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" : "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="pt-4 border-t border-border space-y-2 text-xs font-semibold text-muted-foreground">
<div className="flex items-center gap-2"> <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>
<div className="flex items-center gap-2"> <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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-secondary/40 border border-border" /> Unattempted <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 { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Sparkles className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
AI Daily Practice (DPP) AI Daily Practice (DPP)
</h1> </h1>
@@ -108,7 +108,7 @@ export default function AIDailyPracticePage() {
</p> </p>
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <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 <BrainCircuit size={12} /> AI Powered
</span> </span>
</div> </div>
@@ -121,7 +121,7 @@ export default function AIDailyPracticePage() {
type="date" type="date"
value={dateFilter} value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)} 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> <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) => ( {['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
@@ -158,15 +158,15 @@ export default function AIDailyPracticePage() {
const isExpired = endTime ? now > endTime : false; const isExpired = endTime ? now > endTime : false;
return ( 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"> <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="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}> <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> <div>
<div className="flex items-center gap-2 mb-1"> <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"} {user?.target_exam?.replace("_", " ") || "JEE/NEET"}
</span> </span>
<span className="text-muted-foreground text-xs font-bold">•</span> <span className="text-muted-foreground text-xs font-bold">•</span>
@@ -183,7 +183,7 @@ export default function AIDailyPracticePage() {
</> </>
) : null} ) : null}
</div> </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)} {cleanTitle(dpp.title)}
</h3> </h3>
<div className="mt-1"> <div className="mt-1">
@@ -213,7 +213,7 @@ export default function AIDailyPracticePage() {
</Link> </Link>
{!isExpired && ( {!isExpired && (
<Link href={`/cbt/${dpp.id}`}> <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 <Play size={14} className="fill-current" /> Retake Test
</Button> </Button>
</Link> </Link>
@@ -221,7 +221,7 @@ export default function AIDailyPracticePage() {
</> </>
) : ( ) : (
<Link href={`/cbt/${dpp.id}`}> <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 <Play size={14} className="fill-black" /> Launch Practice Test
</Button> </Button>
</Link> </Link>
@@ -326,7 +326,7 @@ export default function AIDailyPracticePage() {
Close Reader Close Reader
</Button> </Button>
<Link href="/upgrade"> <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 <Sparkles size={14} className="mr-1.5" /> Upgrade to AI Coach
</Button> </Button>
</Link> </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 { CollegePredictorCard } from "@/components/AI/CollegePredictorCard"
import { Card, CardContent } from "@/components/ui/card" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <GraduationCap className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
AI College &amp; Cutoff Predictor AI College &amp; Cutoff Predictor
</h1> </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. Discover your probable target medical &amp; engineering colleges based on current mock exam scores and historical cutoffs.
</p> </p>
</div> </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 <GraduationCap size={12} /> AI Powered
</span> </span>
</div> </div>
@@ -45,7 +45,7 @@ export default function CollegePredictorPage() {
{/* Summary KPI Strip */} {/* Summary KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <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: "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: "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" }, { 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 */} {/* Cutoff Trend Chart */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl"> <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
<div className="flex items-center gap-2 mb-6"> <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> <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"> <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 <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"> <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> <span className="text-xs font-black text-muted-foreground">{d.rank.toLocaleString()}</span>
<div <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` }} style={{ height: `${(d.rank / maxRank) * 80}px` }}
/> />
<span className="text-xs text-muted-foreground font-semibold">{d.year}</span> <span className="text-xs text-muted-foreground font-semibold">{d.year}</span>
@@ -91,25 +91,25 @@ export default function CollegePredictorPage() {
</div> </div>
<div className="space-y-6"> <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"> <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-[#00F0FF] flex items-center gap-2"> <h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
<Award size={18} /> Cutoff Modelling Parameters <Award size={18} /> Cutoff Modelling Parameters
</h3> </h3>
<ul className="space-y-3 text-sm font-medium text-muted-foreground"> <ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li className="flex items-start gap-2"> <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> <span>Trained on <strong className="text-foreground">100,000+ candidate rank trends</strong> across 2021–2025 counselling rounds.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span>Supports <strong className="text-foreground">All India Quota (AIQ)</strong> &amp; State Quota seat adjustments.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span>Simulates <strong className="text-foreground">category reservation cutoffs</strong>: General, OBC, SC, ST, EWS.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span>Score updated daily as you complete more mock tests.</span>
</li> </li>
</ul> </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> <span>in Maths &rarr; upgrades you from NIT Trichy to <strong className="text-foreground">IIT Roorkee</strong></span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span>errors to recover ~8 marks in Physics alone</span>
</li> </li>
<li className="flex items-start gap-2"> <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 { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
import { Flame, AlertTriangle, TrendingDown, BookOpen, ArrowRight, BarChart2, Target, CheckCircle2 } from "lucide-react" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <Flame className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Mistake Heatmap Vault Mistake Heatmap Vault
</h1> </h1>
@@ -50,7 +50,7 @@ export default function HeatmapPage() {
Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly. Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly.
</p> </p>
</div> </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 <AlertTriangle size={12} /> Error Density Analysis
</span> </span>
</div> </div>
@@ -143,9 +143,9 @@ export default function HeatmapPage() {
</Card> </Card>
{/* Action 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"> <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"> <div className="space-y-2">
{[ {[
{ label: "Start Mistake Review Session", href: "/dashboard/ai-coach/mistakes" }, { 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"> <Card className="bg-secondary/20 border-border/40 rounded-2xl">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-start gap-2.5"> <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"> <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. <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> </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 { useEffect, useState } from "react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <BrainCircuit className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Mistake Review &amp; Spaced Repetition Mistake Review &amp; Spaced Repetition
</h1> </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. Review logged errors using our AI-powered spaced repetition engine. Questions resurface at optimal intervals to cement long-term retention.
</p> </p>
</div> </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 <Sparkles size={12} /> AI Powered
</Badge> </Badge>
</div> </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: "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: "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" }, { 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 => ( ].map(kpi => (
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color}`}> <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="space-y-1.5">
<div className="flex justify-between text-xs font-bold text-muted-foreground"> <div className="flex justify-between text-xs font-bold text-muted-foreground">
<span>Session Progress</span> <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>
<div className="h-2 w-full bg-secondary rounded-full overflow-hidden"> <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
<div <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}%` }} style={{ width: `${progressPct}%` }}
/> />
</div> </div>
@@ -123,7 +123,7 @@ export default function MistakeTrackingPage() {
Active Review Queue Active Review Queue
</h2> </h2>
{mistakes.length > 0 && ( {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"} {currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Complete"}
</span> </span>
)} )}
@@ -131,7 +131,7 @@ export default function MistakeTrackingPage() {
{loading ? ( {loading ? (
<Card className="min-h-[480px] h-full flex flex-col items-center justify-center border-dashed p-8 gap-4"> <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> <span className="text-base font-semibold text-muted-foreground">Loading your review queue...</span>
</Card> </Card>
) : mistakes.length === 0 ? ( ) : mistakes.length === 0 ? (
@@ -154,15 +154,15 @@ export default function MistakeTrackingPage() {
onSubmitReview={submitReview} 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"> <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-[#00F0FF]" /> <BrainCircuit size={56} className="text-[var(--cyan-ai)]" />
<div> <div>
<h3 className="text-xl font-bold mb-2">Session Complete! 🎉</h3> <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"> <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. All {mistakes.length} questions reviewed. The AI engine has scheduled your next review intervals.
</p> </p>
</div> </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 Check for New Errors
</Button> </Button>
</Card> </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 { useEffect, useState } from "react"
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap" import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
@@ -89,7 +89,7 @@ export default function AICoachDashboard() {
return ( return (
<div className="h-screen flex items-center justify-center"> <div className="h-screen flex items-center justify-center">
<div className="flex flex-col items-center gap-3 text-muted-foreground"> <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> <span className="text-sm font-medium">Loading AI Coach...</span>
</div> </div>
</div> </div>
@@ -99,7 +99,7 @@ export default function AICoachDashboard() {
if (!hasAccessTo("ai-mistake-tracking")) { if (!hasAccessTo("ai-mistake-tracking")) {
return ( 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="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} /> <BrainCircuit size={40} />
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
@@ -110,7 +110,7 @@ export default function AICoachDashboard() {
</div> </div>
<div className="pt-4"> <div className="pt-4">
<Link href="/upgrade"> <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 Upgrade to AI Coach Plan
</Button> </Button>
</Link> </Link>
@@ -151,7 +151,7 @@ export default function AICoachDashboard() {
{/* ── QUICK STATS ── */} {/* ── QUICK STATS ── */}
<section className="grid grid-cols-2 md:grid-cols-5 gap-4"> <section className="grid grid-cols-2 md:grid-cols-5 gap-4">
{[ {[
{ 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: "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: "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} /> }, { 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 ── */} {/* ── PREDICTIVE INTELLIGENCE ROW ── */}
<section className="mt-10"> <section className="mt-10">
<div className="flex items-center justify-between gap-3 mb-6"> <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} /> <Zap size={20} />
Predictive Intelligence & Strategy Predictive Intelligence & Strategy
</div> </div>
<div className="flex items-center gap-3"> <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 → Full Analytics →
</Link> </Link>
</div> </div>
@@ -192,8 +192,8 @@ export default function AICoachDashboard() {
<section className="mt-12"> <section className="mt-12">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2.5 bg-[#00F0FF]/10 rounded-xl border border-[#00F0FF]/20"> <div className="p-2.5 bg-[var(--cyan-ai-10)] rounded-xl border border-[var(--cyan-ai-20)]">
<BrainCircuit size={24} className="text-[#00F0FF]" /> <BrainCircuit size={24} className="text-[var(--cyan-ai)]" />
</div> </div>
<div> <div>
<h2 className="text-2xl md:text-3xl font-black tracking-tight">Daily Mistake Review Queue</h2> <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> </div>
<div className="flex items-center gap-3"> <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 → Open Full Mistake Vault Page →
</Link> </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"} {currentIndex < mistakes.length ? `${currentIndex + 1} / ${mistakes.length}` : "Finished"}
</span> </span>
</div> </div>
@@ -241,9 +241,9 @@ export default function AICoachDashboard() {
<div> <div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2 text-base font-extrabold"> <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> </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 → Full Schedule →
</Link> </Link>
</div> </div>
@@ -254,7 +254,7 @@ export default function AICoachDashboard() {
<div className="flex items-center gap-2 text-base font-extrabold"> <div className="flex items-center gap-2 text-base font-extrabold">
<Flame size={18} className="text-yellow-500" /> Mistake Heatmap <Flame size={18} className="text-yellow-500" /> Mistake Heatmap
</div> </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 → Heatmap Vault →
</Link> </Link>
</div> </div>
@@ -265,9 +265,9 @@ export default function AICoachDashboard() {
<section className="pt-8 border-t border-border"> <section className="pt-8 border-t border-border">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2 text-base font-extrabold"> <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> </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 → View Details →
</Link> </Link>
</div> </div>
@@ -278,7 +278,7 @@ export default function AICoachDashboard() {
<section className="pt-8 border-t border-border"> <section className="pt-8 border-t border-border">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-extrabold tracking-tight">24/7 AI Tutor Chat Assistant</h2> <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 → Full Desk Mode →
</Link> </Link>
</div> </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 { ReadinessGauge } from "@/components/AI/ReadinessGauge"
import { Card, CardContent } from "@/components/ui/card" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <Gauge className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Exam Readiness Analytics Exam Readiness Analytics
</h1> </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. Real-time algorithmic prediction of your exam readiness — based on speed, accuracy, syllabus coverage, and test history.
</p> </p>
</div> </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 <Gauge size={12} /> AI Powered
</span> </span>
</div> </div>
@@ -56,12 +56,12 @@ export default function ReadinessPage() {
{/* KPI Strip */} {/* KPI Strip */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <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: "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: "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" /> }, { 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) => ( ].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"> <CardContent className="p-5">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
{kpi.icon} {kpi.icon}
@@ -83,7 +83,7 @@ export default function ReadinessPage() {
<div className="flex items-center gap-2 mb-5"> <div className="flex items-center gap-2 mb-5">
<Award className="text-amber-400" size={22} /> <Award className="text-amber-400" size={22} />
<h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2> <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"} {isDemo ? "Updated Daily" : "Day 1 Initializing"}
</span> </span>
</div> </div>
@@ -93,12 +93,12 @@ export default function ReadinessPage() {
{/* Subject Confidence Matrix */} {/* Subject Confidence Matrix */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-5"> <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl space-y-5">
<div className="flex items-center gap-2"> <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> <h3 className="text-lg font-extrabold tracking-tight">Subject Confidence Matrix</h3>
</div> </div>
<div className="space-y-4"> <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: "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" }, { 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) => ( ].map((sub) => (
@@ -130,7 +130,7 @@ export default function ReadinessPage() {
!isDemo !isDemo
? "bg-white/5 border border-white/10" ? "bg-white/5 border border-white/10"
: i === scoreHistory.length - 1 : 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" : "bg-gradient-to-t from-white/10 to-white/25"
}`} }`}
style={{ height: isDemo ? `${(d.score / maxScore) * 80}px` : "4px" }} 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"> <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"> <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> </h3>
<div className="space-y-2.5"> <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: "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: "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" }, { label: "College Predictor", href: "/dashboard/ai-coach/college-predictor", color: "text-emerald-400" },
].map((a) => ( ].map((a) => (
<Link key={a.href} href={a.href} <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={a.color}>{a.label}</span>
<span className="text-muted-foreground group-hover:translate-x-1 transition-transform">→</span> <span className="text-muted-foreground group-hover:translate-x-1 transition-transform">→</span>
</Link> </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 { ExamStrategyCard } from "@/components/AI/ExamStrategyCard"
import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <Zap className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Exam Strategy &amp; Time Optimization Exam Strategy &amp; Time Optimization
</h1> </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. Master time allocation per question, eliminate negative marking traps, and fine-tune your subject sequence for maximum score yield.
</p> </p>
</div> </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 <Zap size={12} /> AI Powered
</span> </span>
</div> </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: "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: "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" }, { 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) => ( ].map((kpi) => (
<Card key={kpi.label} className={`rounded-2xl border ${kpi.color} hover:scale-[1.02] transition-transform`}> <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="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground"> <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 Subject Sequence Strategy
</div> </div>
<ExamStrategyCard /> <ExamStrategyCard />
@@ -131,7 +131,7 @@ export default function StrategyPage() {
</Card> </Card>
{/* Strategy Tips */} {/* 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"> <div className="flex items-center gap-2 mb-4">
<Lightbulb size={20} className="text-yellow-400" /> <Lightbulb size={20} className="text-yellow-400" />
<h3 className="text-base font-black tracking-tight">AI Strategy Recommendations</h3> <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: "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: "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) => ( ].map((s) => (
<div key={s.label} className="p-4 rounded-xl bg-white/5 border border-border/30 space-y-2"> <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> <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 { StudyPlanCard } from "@/components/AI/StudyPlanCard"
import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <Calendar className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Personalized Daily &amp; Weekly Study Plan Personalized Daily &amp; Weekly Study Plan
</h1> </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. AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
</p> </p>
</div> </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 <Calendar size={12} /> AI Powered
</span> </span>
</div> </div>
@@ -37,7 +37,7 @@ export default function StudyPlanPage() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <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: "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: "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" }, { 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) => ( ].map((kpi) => (
@@ -58,10 +58,10 @@ export default function StudyPlanPage() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground"> <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 Today&apos;s Schedule
</div> </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" })} {new Date().toLocaleDateString("en-IN", { weekday: "long", day: "numeric", month: "long" })}
</span> </span>
</div> </div>
@@ -80,7 +80,7 @@ export default function StudyPlanPage() {
{/* Syllabus Coverage */} {/* Syllabus Coverage */}
<Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl"> <Card className="p-6 bg-secondary/10 border-border/60 rounded-3xl">
<div className="flex items-center gap-2 mb-5"> <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> <h3 className="text-lg font-extrabold tracking-tight">Subject Coverage Breakdown</h3>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
@@ -111,25 +111,25 @@ export default function StudyPlanPage() {
{/* Sidebar */} {/* Sidebar */}
<div className="space-y-6"> <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"> <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-[#00F0FF] flex items-center gap-2"> <h3 className="text-base font-black tracking-tight text-[var(--cyan-ai)] flex items-center gap-2">
<BookOpen size={18} /> AI Scheduler Rules <BookOpen size={18} /> AI Scheduler Rules
</h3> </h3>
<ul className="space-y-3 text-sm font-medium text-muted-foreground"> <ul className="space-y-3 text-sm font-medium text-muted-foreground">
<li className="flex items-start gap-2"> <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> <span><strong className="text-foreground">High-Yield Prioritization:</strong> Extra time on topics with heavy exam weightage.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span><strong className="text-foreground">Error Interleaving:</strong> Recent incorrect questions are integrated directly into study blocks.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span><strong className="text-foreground">Burnout Prevention:</strong> 10-minute micro-breaks recommended between intensive problem sets.</span>
</li> </li>
<li className="flex items-start gap-2"> <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> <span><strong className="text-foreground">Spaced Repetition:</strong> SM-2 algorithm reschedules mistake reviews at optimal intervals.</span>
</li> </li>
</ul> </ul>
@@ -140,7 +140,7 @@ export default function StudyPlanPage() {
<div className="space-y-2"> <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: "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: "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" }, { day: "Fri, Aug 8", task: "Optics + Wave Optics Revision", type: "Revision", color: "text-yellow-400 bg-yellow-400/10" },
].map((item) => ( ].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 { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
import { Clock, Zap, Moon, Sun, AlertCircle, ArrowRight, BarChart2 } from "lucide-react" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <Clock className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Study Time Optimization Study Time Optimization
</h1> </h1>
@@ -84,7 +84,7 @@ export default function TimeOptimizationPage() {
Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows. Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows.
</p> </p>
</div> </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 <Zap size={12} /> Chronobiology Analytics
</span> </span>
</div> </div>
@@ -94,7 +94,7 @@ export default function TimeOptimizationPage() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <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: "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: "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" /> }, { 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 => ( ].map(kpi => (
@@ -113,7 +113,7 @@ export default function TimeOptimizationPage() {
{/* Chart — 2/3 */} {/* Chart — 2/3 */}
<div className="lg:col-span-2 space-y-4"> <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"> <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 Hourly Efficiency Profile
</div> </div>
<StudyTimeOptimizationCard /> <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="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="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
<div <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}%` }} style={{ width: `${slot.pct}%` }}
/> />
</div> </div>
@@ -158,9 +158,9 @@ export default function TimeOptimizationPage() {
))} ))}
</div> </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"> <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"> <div className="space-y-2">
{[ {[
{ label: "Schedule Today's Study Plan", href: "/dashboard/ai-coach/study-plan" }, { 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 { TutorChat } from "@/components/AI/TutorChat"
import { BrainCircuit, Sparkles, MessageSquare, Lightbulb } from "lucide-react" import { BrainCircuit, Sparkles, MessageSquare, Lightbulb } from "lucide-react"
@@ -6,7 +6,7 @@ import { Card, CardContent } from "@/components/ui/card"
const CAPABILITIES = [ 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: <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" }, { 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2"> <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"> <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-[#00F0FF]" size={28} /> <BrainCircuit className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
AI Tutor — 24/7 Doubt Solver AI Tutor — 24/7 Doubt Solver
</h1> </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 { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
import { Target, TrendingUp, Calendar, Zap, ArrowRight, BookOpen, CheckCircle2 } from "lucide-react" 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 className="flex items-start justify-between gap-4 flex-wrap">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Target className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Weekly Progress Overview Weekly Progress Overview
</h1> </h1>
@@ -57,7 +57,7 @@ export default function WeeklyProgressPage() {
</p> </p>
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <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 <Zap size={12} /> Live Analytics
</span> </span>
</div> </div>
@@ -85,7 +85,7 @@ export default function WeeklyProgressPage() {
<div className="lg:col-span-2 space-y-4"> <div className="lg:col-span-2 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-extrabold tracking-tight flex items-center gap-2"> <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> </h2>
</div> </div>
<WeeklyProgressReport /> <WeeklyProgressReport />
@@ -122,9 +122,9 @@ export default function WeeklyProgressPage() {
</div> </div>
{/* Weekly Goals */} {/* 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"> <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="space-y-2">
<div className="flex items-start gap-2 p-2 rounded-lg bg-white/5"> <div className="flex items-start gap-2 p-2 rounded-lg bg-white/5">
{isDemo ? ( {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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react" 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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <LineChartIcon className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Performance Analytics Performance Analytics
</h1> </h1>
@@ -73,7 +73,7 @@ export default function AnalyticsPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <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"> <Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
<CardHeader> <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> <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."} {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> </CardDescription>
@@ -86,18 +86,18 @@ export default function AnalyticsPage() {
<YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 300]} /> <YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 300]} />
<Tooltip <Tooltip
contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }} 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> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </CardContent>
</Card> </Card>
<div className="space-y-6"> <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"> <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> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-foreground/80 leading-relaxed font-medium"> <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 { useEffect, useState, use } from "react";
import Link from "next/link"; 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"> <div className="flex gap-4 w-full md:w-auto">
<Card className="bg-secondary/30 border-border flex-1 md:min-w-48"> <Card className="bg-secondary/30 border-border flex-1 md:min-w-48">
<CardContent className="p-4 flex flex-col items-center justify-center"> <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-sm text-muted-foreground font-bold uppercase">Score</div>
<div className="text-2xl font-bold flex items-center justify-center gap-1.5"> <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"}> <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 { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
@@ -118,7 +118,7 @@ export default function CBTPage() {
if (userLoading || loading) { if (userLoading || loading) {
return ( return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8"> <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> <p className="text-muted-foreground font-medium animate-pulse">Loading exams...</p>
</div> </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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <MonitorPlay className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Computer Based Tests (CBT) Computer Based Tests (CBT)
</h1> </h1>
@@ -145,7 +145,7 @@ export default function CBTPage() {
type="date" type="date"
value={dateFilter} value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)} 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>
<div className="relative w-full sm:w-64"> <div className="relative w-full sm:w-64">
@@ -155,7 +155,7 @@ export default function CBTPage() {
placeholder="Search exams..." placeholder="Search exams..."
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} 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>
</div> </div>
@@ -178,7 +178,7 @@ export default function CBTPage() {
<div className="space-y-6"> <div className="space-y-6">
<h2 className="text-xl font-bold border-b border-border pb-2 flex items-center gap-2"> <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> </h2>
{/* BUG-08 fix: Filter out already attempted exams from Upcoming & Active list */} {/* 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; const isExpired = endTime ? now > endTime : false;
return ( 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"> <CardContent className="p-6">
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-4">
<div className="flex gap-2 flex-wrap"> <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 {exam.type} Test
</Badge> </Badge>
{exam.exam_pattern && ( {exam.exam_pattern && (
@@ -245,7 +245,7 @@ export default function CBTPage() {
</Badge> </Badge>
) : null} ) : null}
</div> </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} {exam.title}
</h3> </h3>
<div className="text-sm text-muted-foreground space-y-1 mb-6"> <div className="text-sm text-muted-foreground space-y-1 mb-6">
@@ -262,7 +262,7 @@ export default function CBTPage() {
) : isLocked ? ( ) : isLocked ? (
<Button <Button
onClick={() => setShowUpgradeModal(true)} 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 <Lock size={16} /> Unlock Test
</Button> </Button>
@@ -272,7 +272,7 @@ export default function CBTPage() {
</Button> </Button>
) : ( ) : (
<Link href={`/cbt/${exam.id}`}> <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 <PlayCircle size={16} /> Start Exam
</Button> </Button>
</Link> </Link>
@@ -331,7 +331,7 @@ export default function CBTPage() {
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="text-xs md:text-sm text-muted-foreground font-bold uppercase tracking-wider">Accuracy</div> <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> </div>
<Link href={`/dashboard/cbt/history/${attempt.id}`}> <Link href={`/dashboard/cbt/history/${attempt.id}`}>
<Button variant="outline" className="rounded-xl border-border hover:bg-primary hover:text-primary-foreground"> <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 { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
@@ -86,7 +86,7 @@ export default function CommunityPage() {
if (loading) { if (loading) {
return ( return (
<div className="h-[70vh] flex flex-col items-center justify-center p-8"> <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> <p className="text-muted-foreground font-medium animate-pulse">Loading Doubt Forum...</p>
</div> </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 className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <MessageSquare className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Doubt Forum Doubt Forum
</h1> </h1>
@@ -128,7 +128,7 @@ export default function CommunityPage() {
</div> </div>
<button <button
onClick={() => setIsAskModalOpen(true)} 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 Ask a Doubt
</button> </button>
@@ -142,7 +142,7 @@ export default function CommunityPage() {
<input <input
type="text" type="text"
placeholder="Search doubts by keyword..." 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} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
@@ -158,11 +158,11 @@ export default function CommunityPage() {
<div className="space-y-4"> <div className="space-y-4">
{filteredDoubts.map((doubt) => ( {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"> <CardContent className="p-0 flex">
{/* Upvote Sidebar */} {/* Upvote Sidebar */}
<div className="w-16 bg-secondary/20 border-r border-border flex flex-col items-center py-4 gap-1"> <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} /> <ChevronUp size={24} />
</button> </button>
<span className="font-bold text-foreground">{doubt.upvotes}</span> <span className="font-bold text-foreground">{doubt.upvotes}</span>
@@ -214,7 +214,7 @@ export default function CommunityPage() {
{expandedDoubtId === doubt.id && ( {expandedDoubtId === doubt.id && (
<div className="mt-6 pt-4 border-t border-border space-y-4 animate-in fade-in duration-300"> <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="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 AI
</div> </div>
<div className="bg-secondary/40 rounded-2xl rounded-tl-none p-4 text-sm flex-1"> <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 <input
type="text" type="text"
placeholder="Add a reply..." 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} /> <Send size={16} />
</button> </button>
</div> </div>
@@ -246,7 +246,7 @@ export default function CommunityPage() {
))} ))}
{filteredDoubts.length === 0 && ( {filteredDoubts.length === 0 && (
<div className="text-center py-12 text-muted-foreground bg-secondary/10 border border-dashed border-border rounded-2xl p-6"> <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"> <p className="font-bold text-foreground mb-1">
{activeFilter === 'my-doubts' ? "No Doubts Asked Yet" : "No doubts found matching your criteria."} {activeFilter === 'my-doubts' ? "No Doubts Asked Yet" : "No doubts found matching your criteria."}
</p> </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="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"> <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"> <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> </h2>
<button <button
onClick={() => setIsAskModalOpen(false)} onClick={() => setIsAskModalOpen(false)}
@@ -278,7 +278,7 @@ export default function CommunityPage() {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-medium text-muted-foreground">Subject</label> <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>Physics</option>
<option>Chemistry</option> <option>Chemistry</option>
<option>Mathematics</option> <option>Mathematics</option>
@@ -290,7 +290,7 @@ export default function CommunityPage() {
<input <input
type="text" type="text"
placeholder="e.g. Rotational Mechanics" 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>
</div> </div>
@@ -300,7 +300,7 @@ export default function CommunityPage() {
<input <input
type="text" type="text"
placeholder="What exactly are you stuck on?" 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> </div>
@@ -309,17 +309,17 @@ export default function CommunityPage() {
<textarea <textarea
rows={4} rows={4}
placeholder="Explain your approach, what you've tried, and where you're getting stuck..." 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>
<div className="pt-2 border-t border-border flex justify-between items-center"> <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 <ImageIcon size={18} /> Attach Image
</button> </button>
<button <button
onClick={() => setIsAskModalOpen(false)} 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} /> Post Doubt <Send size={16} />
</button> </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 { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -108,7 +108,7 @@ export default function DPPPage() {
type="date" type="date"
value={dateFilter} value={dateFilter}
onChange={(e) => setDateFilter(e.target.value)} 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> <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) => ( {['Mixed', 'Easy', 'Medium', 'Hard'].map((diff) => (
@@ -157,15 +157,15 @@ export default function DPPPage() {
const isExpired = endTime ? now > endTime : false; const isExpired = endTime ? now > endTime : false;
return ( 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"> <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="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}> <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> <div>
<div className="flex items-center gap-2 mb-1"> <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"} {user?.target_exam?.replace("_", " ") || "JEE/NEET"}
</span> </span>
<span className="text-muted-foreground text-xs font-bold">•</span> <span className="text-muted-foreground text-xs font-bold">•</span>
@@ -182,7 +182,7 @@ export default function DPPPage() {
</> </>
) : null} ) : null}
</div> </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)} {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)}`}> <span className={`ml-2 text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
{dpp.difficulty} {dpp.difficulty}
@@ -209,7 +209,7 @@ export default function DPPPage() {
<Button variant="outline" size="sm" className="font-bold border-border">Result</Button> <Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
</Link> </Link>
{!isExpired && ( {!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 <Eye size={14} /> Read PDF
</Button> </Button>
)} )}
@@ -319,7 +319,7 @@ export default function DPPPage() {
Close Reader Close Reader
</Button> </Button>
<Link href="/upgrade"> <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 <Sparkles size={14} className="mr-1.5" /> Upgrade to AI Coach for CBT
</Button> </Button>
</Link> </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 { 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" 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="h-screen w-screen flex flex-col items-center justify-center bg-background">
<div className="animate-pulse flex flex-col items-center gap-4"> <div className="animate-pulse flex flex-col items-center gap-4">
<Logo height={56} className="mb-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>
</div> </div>
); );
@@ -79,7 +79,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{switching && ( {switching && (
<div className="fixed top-0 left-0 right-0 z-[9999] h-0.5 overflow-hidden"> <div className="fixed top-0 left-0 right-0 z-[9999] h-0.5 overflow-hidden">
<div <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={{ width: '60%', animation: 'slideProgress 0.9s ease-in-out infinite' }}
/> />
<style>{` <style>{`
@@ -94,7 +94,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{/* Sidebar */} {/* Sidebar */}
<aside className="w-64 border-r border-border/60 bg-background/95 backdrop-blur-xl flex flex-col hidden md:flex relative"> <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 */} {/* 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 */} {/* Logo */}
<div className="px-5 py-4 border-b border-border/40"> <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="flex items-center gap-2">
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" /> <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="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 AI Coach
</span> </span>
<div className="h-px flex-1 bg-gradient-to-l from-transparent via-cyan-500/50 to-transparent" /> <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" href="/dashboard/settings"
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 border ${ className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 border ${
pathname.startsWith("/dashboard/settings") 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" : "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" 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="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} {userInitials}
</div> </div>
<div className="flex-1 min-w-0"> <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!"} {user ? `Welcome back, ${cleanDisplayName(user.name).split(" ")[0]}!` : "Welcome back!"}
</h2> </h2>
{user && ( {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 {targetExamLabel} Target
</Badge> </Badge>
)} )}
@@ -367,7 +367,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
{isDemoUser(userId) && ( {isDemoUser(userId) && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{switching && ( {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 && ( {!switching && (
<span className="text-xs text-muted-foreground font-bold hidden lg:inline">Demo:</span> <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} value={userId}
disabled={switching} disabled={switching}
onChange={(e) => switchUser(e.target.value)} 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.NEHA.id}>Neha Verma (AI Coach)</option>
<option value={DEMO_USERS.AI_COACH.id}>Rahul (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) // Section-aware active color tokens (light mode only, dark mode falls back to cyan)
const activeClasses = active const activeClasses = active
? section === "pro" ? 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" : 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-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-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,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 : isLocked
? "text-muted-foreground/40 cursor-not-allowed border border-transparent" ? "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" : "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
const iconActiveClass = active const iconActiveClass = active
? section === "pro" ? section === "pro"
? "text-yellow-600 dark:text-[#00F0FF]" ? "text-yellow-600 dark:text-[var(--cyan-ai)]"
: section === "ai" : section === "ai"
? "text-cyan-700 dark:text-[#00F0FF]" ? "text-cyan-700 dark:text-[var(--cyan-ai)]"
: "text-[#00F0FF]" : "text-[var(--cyan-ai)]"
: isLocked : isLocked
? "text-muted-foreground/30" ? "text-muted-foreground/30"
: "text-muted-foreground/60 group-hover:text-foreground/80" : "text-muted-foreground/60 group-hover:text-foreground/80"
const activeBarClass = active const activeBarClass = active
? section === "pro" ? 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" : 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-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-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,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 ( return (

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

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" 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 className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Trophy className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Leaderboard Leaderboard
</h1> </h1>
@@ -95,7 +95,7 @@ export default function LeaderboardPage() {
{loadingRankings ? ( {loadingRankings ? (
<div className="flex flex-col items-center justify-center p-12 bg-card rounded-2xl border border-border"> <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> <p className="text-sm text-muted-foreground font-medium">Calculating live rankings...</p>
</div> </div>
) : ( ) : (
@@ -105,7 +105,7 @@ export default function LeaderboardPage() {
key={student.rank} key={student.rank}
className={`flex justify-between items-center p-4 rounded-xl border transition-all ${ className={`flex justify-between items-center p-4 rounded-xl border transition-all ${
student.isCurrentUser 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' : '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 === 1 ? <Medal className="text-yellow-500" size={24} /> :
student.rank === 2 ? <Medal className="text-gray-400" size={24} /> : student.rank === 2 ? <Medal className="text-gray-400" size={24} /> :
student.rank === 3 ? <Medal className="text-amber-700" 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>
<div className="flex-1 px-4 flex items-center gap-3"> <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 ${ <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()} {(student.name || "U").substring(0, 2).toUpperCase()}
</div> </div>
<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)} {student.isCurrentUser ? (isAnonymous ? "Anonymous User" : `${cleanDisplayName(student.name)} (You)`) : cleanDisplayName(student.name)}
</p> </p>
<p className="text-xs text-muted-foreground flex items-center gap-1"> <p className="text-xs text-muted-foreground flex items-center gap-1">
@@ -147,12 +147,12 @@ export default function LeaderboardPage() {
</div> </div>
<div className="space-y-6"> <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"> <CardHeader className="pb-2">
<CardTitle className="text-xl flex items-center gap-2">Your Standing</CardTitle> <CardTitle className="text-xl flex items-center gap-2">Your Standing</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-sm font-medium text-foreground mb-4">
{currentStudent.score === 0 ? "Fresh Start · Day 1 of your journey" : `Rank #${currentStudent.rank} overall`} {currentStudent.score === 0 ? "Fresh Start · Day 1 of your journey" : `Rank #${currentStudent.rank} overall`}
</p> </p>
@@ -166,7 +166,7 @@ export default function LeaderboardPage() {
<span className="text-sm font-medium text-foreground">Anonymous Mode</span> <span className="text-sm font-medium text-foreground">Anonymous Mode</span>
<label className="relative inline-flex items-center cursor-pointer"> <label className="relative inline-flex items-center cursor-pointer">
<input type="checkbox" className="sr-only peer" checked={isAnonymous} onChange={() => setIsAnonymous(!isAnonymous)} /> <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> </label>
</div> </div>
</CardContent> </CardContent>

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

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState } from "react" import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card" 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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <FileText className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Study Materials & Notes Study Materials & Notes
</h1> </h1>
@@ -207,7 +207,7 @@ export default function MaterialsPage() {
Close Reader Close Reader
</Button> </Button>
<Link href="/upgrade"> <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 <Sparkles size={14} className="mr-1.5" /> Unlock All Premium Notes
</Button> </Button>
</Link> </Link>

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

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

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

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
@@ -30,7 +30,7 @@ const getStatusIcon = (status: ChapterStatus) => {
switch (status) { switch (status) {
case 'Mastered': return <CheckCircle2 className="text-emerald-500" size={16} /> case 'Mastered': return <CheckCircle2 className="text-emerald-500" size={16} />
case 'Practiced': return <CheckCircle2 className="text-amber-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} /> 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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Target className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Syllabus Tracker Syllabus Tracker
</h1> </h1>
@@ -195,9 +195,9 @@ export default function ProgressTrackerPage() {
<Card key={i} className="border-border shadow-sm"> <Card key={i} className="border-border shadow-sm">
<CardContent className="p-6 text-center"> <CardContent className="p-6 text-center">
<h3 className="font-bold text-lg mb-2">{sub.name}</h3> <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-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> </div>
</CardContent> </CardContent>
</Card> </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 { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -60,12 +60,12 @@ export default function RankPredictorPage() {
const predictedRank = calculateRank(totalScore, maxTotal) const predictedRank = calculateRank(totalScore, maxTotal)
const colleges = exam === "NEET" ? [ 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: "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: "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: "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: "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: "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" }, { 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 */} {/* Header */}
<div className="text-center max-w-3xl mx-auto space-y-3"> <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 <Sparkles size={14} /> AI Neural Prediction Engine
</div> </div>
<h1 className="text-4xl md:text-5xl font-black tracking-tight">AI Rank & College Predictor</h1> <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 ${ 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 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 ${ 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 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"> <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"> <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"> <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> </h2>
<span className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Drag Sliders to Adjust</span> <span className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Drag Sliders to Adjust</span>
</div> </div>
@@ -149,7 +149,7 @@ export default function RankPredictorPage() {
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between items-center text-sm font-extrabold"> <div className="flex justify-between items-center text-sm font-extrabold">
<span>Physics Score</span> <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> </div>
<input <input
type="range" type="range"
@@ -157,7 +157,7 @@ export default function RankPredictorPage() {
max={maxPhysics} max={maxPhysics}
value={physics} value={physics}
onChange={(e) => setPhysics(Number(e.target.value))} 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> </div>
@@ -231,15 +231,15 @@ export default function RankPredictorPage() {
<div className="space-y-6"> <div className="space-y-6">
{/* AIR Display Card */} {/* 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"> <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>
<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"> <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()}`} {totalScore === 0 ? "AIR --" : `AIR ~${predictedRank.toLocaleString()}`}
</div> </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"} <CheckCircle2 size={13} /> {totalScore === 0 ? "Calibrating · Adjust Sliders" : "High Accuracy Confidence"}
</div> </div>
</Card> </Card>
@@ -247,7 +247,7 @@ export default function RankPredictorPage() {
{/* College Admission Probability Table */} {/* College Admission Probability Table */}
<Card className="border-border/60 bg-secondary/10 backdrop-blur-xl rounded-3xl p-6 space-y-4"> <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"> <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> </h3>
{totalScore === 0 ? ( {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 { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; 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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Settings className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Account Settings Account Settings
</h1> </h1>
@@ -169,7 +169,7 @@ export default function SettingsPage() {
type="text" type="text"
value={firstName} value={firstName}
onChange={(e) => setFirstName(e.target.value)} 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>
<div className="space-y-2"> <div className="space-y-2">
@@ -178,7 +178,7 @@ export default function SettingsPage() {
type="text" type="text"
value={lastName} value={lastName}
onChange={(e) => setLastName(e.target.value)} 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>
</div> </div>
@@ -189,7 +189,7 @@ export default function SettingsPage() {
value={school} value={school}
placeholder="Enter your school name" placeholder="Enter your school name"
onChange={(e) => setSchool(e.target.value)} 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>
<div className="space-y-2"> <div className="space-y-2">
@@ -200,7 +200,7 @@ export default function SettingsPage() {
list="indian-states" list="indian-states"
placeholder="Enter or select your state" placeholder="Enter or select your state"
onChange={(e) => setState(e.target.value)} 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"> <datalist id="indian-states">
<option value="Andhra Pradesh" /> <option value="Andhra Pradesh" />
@@ -265,7 +265,7 @@ export default function SettingsPage() {
onClick={() => setTargetExam("NEET")} onClick={() => setTargetExam("NEET")}
className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${ className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${
targetExam === "NEET" 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" : "border-border bg-secondary/20 hover:bg-secondary/50"
}`} }`}
> >
@@ -274,7 +274,7 @@ export default function SettingsPage() {
name="target" name="target"
checked={targetExam === "NEET"} checked={targetExam === "NEET"}
onChange={() => {}} onChange={() => {}}
className="accent-[#00F0FF] w-4 h-4" className="accent-[var(--cyan-ai)] w-4 h-4"
/> />
<span className="font-bold">NEET (UG)</span> <span className="font-bold">NEET (UG)</span>
</button> </button>
@@ -283,7 +283,7 @@ export default function SettingsPage() {
onClick={() => setTargetExam("JEE_Main")} onClick={() => setTargetExam("JEE_Main")}
className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${ className={`flex items-center gap-2 cursor-pointer p-4 border rounded-xl flex-1 text-left transition-all ${
targetExam === "JEE_Main" 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" : "border-border bg-secondary/20 hover:bg-secondary/50"
}`} }`}
> >
@@ -292,7 +292,7 @@ export default function SettingsPage() {
name="target" name="target"
checked={targetExam === "JEE_Main"} checked={targetExam === "JEE_Main"}
onChange={() => {}} 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> <span className="font-bold">JEE Main & Adv</span>
</button> </button>

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

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card" 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 className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div> <div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1"> <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"> <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-[#00F0FF]" size={28} /> <Flame className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
</span> </span>
Your Learning Streak Your Learning Streak
</h1> </h1>
@@ -88,7 +88,7 @@ export default function StreaksPage() {
</div> </div>
<div> <div>
<p className="text-sm text-muted-foreground mb-1">Total Streak Points Earned</p> <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 && ( {streakPoints === 0 && (
<p className="text-xs text-muted-foreground mt-1">Take a test to activate consistency bonus points</p> <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>
<div className="pt-8"> <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"> <div className="space-y-4">
{rewards.map((reward, i) => ( {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'}`}> <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'}`}>

16
src/app/forgot-password/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -41,7 +41,7 @@ export default function ForgotPasswordPage() {
} }
return ( return (
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[#00F0FF]/20"> <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[var(--cyan-ai-20)]">
<Link href="/login" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium"> <Link href="/login" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium">
<ArrowLeft size={16} /> Back to Login <ArrowLeft size={16} /> Back to Login
</Link> </Link>
@@ -52,22 +52,22 @@ export default function ForgotPasswordPage() {
</div> </div>
{isSubmitted ? ( {isSubmitted ? (
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/5 rounded-[2rem] overflow-hidden text-center py-8"> <Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden text-center py-8">
<CardContent className="space-y-6 pt-4 flex flex-col items-center"> <CardContent className="space-y-6 pt-4 flex flex-col items-center">
<CheckCircle2 size={64} className="text-[#00F0FF] mb-4" /> <CheckCircle2 size={64} className="text-[var(--cyan-ai)] mb-4" />
<h2 className="text-3xl font-black tracking-tight text-foreground">Check your email</h2> <h2 className="text-3xl font-black tracking-tight text-foreground">Check your email</h2>
<p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed"> <p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed">
We've sent password reset instructions to <strong>{email}</strong>. We've sent password reset instructions to <strong>{email}</strong>.
</p> </p>
<Link href="/login" className="w-full mt-4"> <Link href="/login" className="w-full mt-4">
<Button className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_#00F0FF]"> <Button className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
Return to Login Return to Login
</Button> </Button>
</Link> </Link>
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/5 rounded-[2rem] overflow-hidden"> <Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden">
<CardHeader className="text-center pb-2"> <CardHeader className="text-center pb-2">
<CardTitle className="text-2xl font-bold tracking-tight">Reset Password</CardTitle> <CardTitle className="text-2xl font-bold tracking-tight">Reset Password</CardTitle>
<CardDescription className="text-muted-foreground">Enter your email and we'll send you instructions.</CardDescription> <CardDescription className="text-muted-foreground">Enter your email and we'll send you instructions.</CardDescription>
@@ -84,7 +84,7 @@ export default function ForgotPasswordPage() {
placeholder="student@example.com" placeholder="student@example.com"
required required
suppressHydrationWarning suppressHydrationWarning
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] focus:border-transparent transition-all" 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)] focus:border-transparent transition-all"
/> />
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@ export default function ForgotPasswordPage() {
</div> </div>
)} )}
<Button type="submit" disabled={loading || !email} className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_#00F0FF]"> <Button type="submit" disabled={loading || !email} className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
{loading ? "Sending..." : "Send Reset Link"} {loading ? "Sending..." : "Send Reset Link"}
</Button> </Button>
</form> </form>

18
src/app/globals.css
View File

@@ -44,6 +44,15 @@
--accent-foreground: #171717; --accent-foreground: #171717;
--muted: #f5f5f5; --muted: #f5f5f5;
--muted-foreground: #737373; --muted-foreground: #737373;
/* Cyan AI accent — deep teal in light mode, neon cyan in dark mode */
--cyan-ai: rgb(12, 96, 96);
--cyan-ai-10: rgba(12, 96, 96, 0.10);
--cyan-ai-20: rgba(12, 96, 96, 0.20);
--cyan-ai-30: rgba(12, 96, 96, 0.30);
--cyan-ai-40: rgba(12, 96, 96, 0.40);
--cyan-ai-50: rgba(12, 96, 96, 0.50);
--cyan-ai-80: rgba(12, 96, 96, 0.80);
} }
.dark { .dark {
@@ -61,6 +70,15 @@
--accent-foreground: #0a0a0a; --accent-foreground: #0a0a0a;
--muted: #171717; --muted: #171717;
--muted-foreground: #a3a3a3; --muted-foreground: #a3a3a3;
/* Cyan AI accent — neon cyan in dark mode */
--cyan-ai: #00F0FF;
--cyan-ai-10: rgba(0, 240, 255, 0.10);
--cyan-ai-20: rgba(0, 240, 255, 0.20);
--cyan-ai-30: rgba(0, 240, 255, 0.30);
--cyan-ai-40: rgba(0, 240, 255, 0.40);
--cyan-ai-50: rgba(0, 240, 255, 0.50);
--cyan-ai-80: rgba(0, 240, 255, 0.80);
} }
body { body {

14
src/app/login/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -66,7 +66,7 @@ export default function LoginPage() {
} }
return ( return (
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[#00F0FF]/20"> <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[var(--cyan-ai-20)]">
<Link href="/" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium"> <Link href="/" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium">
<ArrowLeft size={16} /> Back to Home <ArrowLeft size={16} /> Back to Home
</Link> </Link>
@@ -76,7 +76,7 @@ export default function LoginPage() {
<Logo href="/" className="w-72" imageClassName="object-contain" height={80} /> <Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
</div> </div>
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[#00F0FF]/5 rounded-[2rem] overflow-hidden"> <Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden">
<CardHeader className="text-center pb-2"> <CardHeader className="text-center pb-2">
<CardTitle className="text-2xl font-bold tracking-tight">Welcome back</CardTitle> <CardTitle className="text-2xl font-bold tracking-tight">Welcome back</CardTitle>
<CardDescription className="text-muted-foreground">Enter your credentials to access your dashboard.</CardDescription> <CardDescription className="text-muted-foreground">Enter your credentials to access your dashboard.</CardDescription>
@@ -92,7 +92,7 @@ export default function LoginPage() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="student@example.com" placeholder="student@example.com"
suppressHydrationWarning suppressHydrationWarning
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] focus:border-transparent transition-all" 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)] focus:border-transparent transition-all"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -100,7 +100,7 @@ export default function LoginPage() {
<label className="text-sm font-bold text-foreground"> <label className="text-sm font-bold text-foreground">
Password Password
</label> </label>
<Link href="/forgot-password" className="text-xs font-bold text-[#00F0FF] hover:text-[#00F0FF]/80 transition-colors">Forgot password?</Link> <Link href="/forgot-password" className="text-xs font-bold text-[var(--cyan-ai)] hover:text-[var(--cyan-ai-80)] transition-colors">Forgot password?</Link>
</div> </div>
<div className="relative"> <div className="relative">
<input <input
@@ -109,7 +109,7 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
suppressHydrationWarning suppressHydrationWarning
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] focus:border-transparent transition-all pr-10" 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)] focus:border-transparent transition-all pr-10"
/> />
<button <button
type="button" type="button"
@@ -128,7 +128,7 @@ export default function LoginPage() {
</div> </div>
)} )}
<Button type="submit" className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_#00F0FF]"> <Button type="submit" className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
Sign In Sign In
</Button> </Button>
</form> </form>

16
src/app/onboarding/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@@ -51,7 +51,7 @@ export default function OnboardingPage() {
{/* Background glows */} {/* Background glows */}
<div className="pointer-events-none fixed inset-0 -z-10"> <div className="pointer-events-none fixed inset-0 -z-10">
<div className="absolute top-0 left-1/4 size-[600px] bg-primary/5 blur-[140px] rounded-full" /> <div className="absolute top-0 left-1/4 size-[600px] bg-primary/5 blur-[140px] rounded-full" />
<div className="absolute bottom-0 right-1/4 size-[500px] bg-[#00F0FF]/5 blur-[120px] rounded-full" /> <div className="absolute bottom-0 right-1/4 size-[500px] bg-[var(--cyan-ai-10)] blur-[120px] rounded-full" />
</div> </div>
<div className="w-full max-w-5xl space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700"> <div className="w-full max-w-5xl space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
@@ -163,23 +163,23 @@ export default function OnboardingPage() {
className="relative rounded-[2rem] p-[1px] h-full group cursor-pointer" className="relative rounded-[2rem] p-[1px] h-full group cursor-pointer"
style={{ style={{
background: background:
"linear-gradient(135deg, rgba(0,240,255,0.5) 0%, rgba(0,240,255,0.08) 100%)", "linear-gradient(135deg, rgba(12,96,96,0.5) 0%, rgba(12,96,96,0.08) 100%)",
}} }}
onClick={() => !selecting && handleSelect("Al_Coach")} onClick={() => !selecting && handleSelect("Al_Coach")}
> >
{/* Most Popular Badge */} {/* Most Popular Badge */}
<div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10 inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-[#00F0FF] text-black text-xs font-black uppercase tracking-wider shadow-[0_0_20px_-3px_#00F0FF]"> <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10 inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-[var(--cyan-ai)] text-black text-xs font-black uppercase tracking-wider shadow-[0_0_20px_-3px_var(--cyan-ai)]">
<Sparkles size={12} /> Most Popular <Sparkles size={12} /> Most Popular
</div> </div>
<div className="bg-background rounded-[calc(2rem-1px)] p-7 flex flex-col h-full transition-all duration-300 group-hover:bg-secondary/20"> <div className="bg-background rounded-[calc(2rem-1px)] p-7 flex flex-col h-full transition-all duration-300 group-hover:bg-secondary/20">
{/* Header */} {/* Header */}
<div className="mb-6 pt-2"> <div className="mb-6 pt-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00F0FF]/10 border border-[#00F0FF]/20 text-[#00F0FF] text-xs font-bold mb-3 uppercase tracking-wider"> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] text-[var(--cyan-ai)] text-xs font-bold mb-3 uppercase tracking-wider">
<Brain size={12} /> AI Coach Plan <Brain size={12} /> AI Coach Plan
</div> </div>
<div className="flex items-end gap-2 mb-2"> <div className="flex items-end gap-2 mb-2">
<span className="text-5xl font-black tracking-tight text-[#00F0FF]">₹11,999</span> <span className="text-5xl font-black tracking-tight text-[var(--cyan-ai)]">₹11,999</span>
<span className="text-muted-foreground text-base font-medium mb-2">/year</span> <span className="text-muted-foreground text-base font-medium mb-2">/year</span>
</div> </div>
<p className="text-muted-foreground text-sm font-medium"> <p className="text-muted-foreground text-sm font-medium">
@@ -191,7 +191,7 @@ export default function OnboardingPage() {
<ul className="space-y-3 mb-8 flex-1"> <ul className="space-y-3 mb-8 flex-1">
{AI_COACH_FEATURES.map(({ icon: Icon, text }) => ( {AI_COACH_FEATURES.map(({ icon: Icon, text }) => (
<li key={text} className="flex items-center gap-3 text-sm font-medium"> <li key={text} className="flex items-center gap-3 text-sm font-medium">
<CheckCircle2 size={18} className="text-[#00F0FF] shrink-0" /> <CheckCircle2 size={18} className="text-[var(--cyan-ai)] shrink-0" />
<span>{text}</span> <span>{text}</span>
</li> </li>
))} ))}
@@ -204,7 +204,7 @@ export default function OnboardingPage() {
if (!selecting) handleSelect("Al_Coach"); if (!selecting) handleSelect("Al_Coach");
}} }}
disabled={!!selecting} disabled={!!selecting}
className="w-full h-12 rounded-xl bg-[#00F0FF] text-black font-bold text-base hover:bg-[#00F0FF]/90 transition-all duration-300 shadow-[0_0_20px_-5px_rgba(0,240,255,0.5)] hover:shadow-[0_0_30px_-3px_rgba(0,240,255,0.8)] hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2" className="w-full h-12 rounded-xl bg-[var(--cyan-ai)] text-black font-bold text-base hover:bg-[var(--cyan-ai-80)] transition-all duration-300 shadow-[0_0_20px_-5px_rgba(12,96,96,0.5)] hover:shadow-[0_0_30px_-3px_rgba(12,96,96,0.8)] hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
> >
{selecting === "Al_Coach" ? ( {selecting === "Al_Coach" ? (
<> <>

62
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -48,7 +48,7 @@ export default function MarketingPage() {
{/* Animated Deep Background */} {/* Animated Deep Background */}
<div className="fixed inset-0 z-0 pointer-events-none bg-grid opacity-30"></div> <div className="fixed inset-0 z-0 pointer-events-none bg-grid opacity-30"></div>
<div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 50% 0%, rgba(209, 255, 77, 0.05) 0%, transparent 50%)' }}></div> <div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 50% 0%, rgba(209, 255, 77, 0.05) 0%, transparent 50%)' }}></div>
<div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 100% 50%, rgba(0, 240, 255, 0.03) 0%, transparent 40%)' }}></div> <div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 100% 50%, rgba(12, 96, 96, 0.03) 0%, transparent 40%)' }}></div>
{/* Floating Orbs (Using Framer Motion) */} {/* Floating Orbs (Using Framer Motion) */}
<motion.div <motion.div
@@ -57,7 +57,7 @@ export default function MarketingPage() {
transition={{ duration: 15, repeat: Infinity, ease: "linear" }} transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
/> />
<motion.div <motion.div
className="fixed bottom-1/4 right-1/4 size-[500px] rounded-full bg-[#00F0FF]/10 blur-[150px] pointer-events-none mix-blend-screen -z-10" className="fixed bottom-1/4 right-1/4 size-[500px] rounded-full bg-[var(--cyan-ai-10)] blur-[150px] pointer-events-none mix-blend-screen -z-10"
animate={{ x: [0, -60, 30, 0], y: [0, 40, -50, 0] }} animate={{ x: [0, -60, 30, 0], y: [0, 40, -50, 0] }}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
/> />
@@ -110,7 +110,7 @@ export default function MarketingPage() {
className="text-6xl md:text-8xl font-bold tracking-tighter max-w-5xl mx-auto leading-[1.1]" className="text-6xl md:text-8xl font-bold tracking-tighter max-w-5xl mx-auto leading-[1.1]"
> >
NEET/JEE Prep, <br className="hidden md:block" /> NEET/JEE Prep, <br className="hidden md:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-[#00F0FF] to-primary animate-gradient pb-2 drop-shadow-[0_0_20px_rgba(209,255,77,0.3)]">Re-engineered by AI.</span> <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-[var(--cyan-ai)] to-primary animate-gradient pb-2 drop-shadow-[0_0_20px_rgba(209,255,77,0.3)]">Re-engineered by AI.</span>
</motion.h1> </motion.h1>
<motion.p <motion.p
@@ -141,7 +141,7 @@ export default function MarketingPage() {
initial={{ opacity: 0, y: 40, scale: 0.95 }} initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 1, delay: 0.6, type: "spring" }} transition={{ duration: 1, delay: 0.6, type: "spring" }}
className="relative max-w-5xl mx-auto mt-20 rounded-[2rem] border border-border/60 bg-secondary/5 backdrop-blur-xl shadow-[0_0_50px_-15px_rgba(0,240,255,0.15)] overflow-hidden" className="relative max-w-5xl mx-auto mt-20 rounded-[2rem] border border-border/60 bg-secondary/5 backdrop-blur-xl shadow-[0_0_50px_-15px_rgba(12,96,96,0.15)] overflow-hidden"
> >
{/* Top Window Chrome Bar */} {/* Top Window Chrome Bar */}
<div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-background/50"> <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-background/50">
@@ -151,11 +151,11 @@ export default function MarketingPage() {
<div className="size-3 rounded-full bg-green-500/80"></div> <div className="size-3 rounded-full bg-green-500/80"></div>
</div> </div>
<div className="hidden sm:flex items-center bg-background/80 border border-border/50 px-6 py-1.5 rounded-full text-xs font-mono text-muted-foreground w-80 justify-center gap-2"> <div className="hidden sm:flex items-center bg-background/80 border border-border/50 px-6 py-1.5 rounded-full text-xs font-mono text-muted-foreground w-80 justify-center gap-2">
<div className="size-2 rounded-full bg-[#00F0FF] animate-pulse"></div> <div className="size-2 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div>
pragativeer.com/dashboard/student pragativeer.com/dashboard/student
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold"> <Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold">
AI Active AI Active
</Badge> </Badge>
</div> </div>
@@ -191,7 +191,7 @@ export default function MarketingPage() {
Prep Pilot AI Prep Pilot AI
</div> </div>
<div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all"> <div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
<Target size={17} className="text-[#00F0FF] shrink-0" /> <Target size={17} className="text-[var(--cyan-ai)] shrink-0" />
Exam Strategy Exam Strategy
</div> </div>
<div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all"> <div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
@@ -227,7 +227,7 @@ export default function MarketingPage() {
{/* Dashboard Grid Cards */} {/* Dashboard Grid Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
{/* Card 1: Weakness Analysis */} {/* Card 1: Weakness Analysis */}
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group"> <div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[var(--cyan-ai-30)] transition-all duration-300 relative group">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Focus Topic</h4> <h4 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Focus Topic</h4>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/5 rounded-md text-[10px] font-bold">Physics</Badge> <Badge variant="outline" className="border-primary/30 text-primary bg-primary/5 rounded-md text-[10px] font-bold">Physics</Badge>
@@ -247,15 +247,15 @@ export default function MarketingPage() {
</div> </div>
{/* Card 2: Live Score & AIR Rank Predictor */} {/* Card 2: Live Score & AIR Rank Predictor */}
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group"> <div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[var(--cyan-ai-30)] transition-all duration-300 relative group">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Rank Simulator</h4> <h4 className="text-xs font-bold uppercase tracking-widest text-[var(--cyan-ai)]">Rank Simulator</h4>
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] font-bold">NEET Target</Badge> <Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] font-bold">NEET Target</Badge>
</div> </div>
<div className="flex items-end justify-between"> <div className="flex items-end justify-between">
<div> <div>
<p className="text-[10px] font-bold text-muted-foreground uppercase">Estimated AIR</p> <p className="text-[10px] font-bold text-muted-foreground uppercase">Estimated AIR</p>
<p className="text-3xl font-bold tracking-tight text-[#00F0FF] drop-shadow-[0_0_8px_rgba(0,240,255,0.3)]">1,240</p> <p className="text-3xl font-bold tracking-tight text-[var(--cyan-ai)] drop-shadow-[0_0_8px_rgba(12,96,96,0.3)]">1,240</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="text-[10px] font-bold text-muted-foreground uppercase">Expected Score</p> <p className="text-[10px] font-bold text-muted-foreground uppercase">Expected Score</p>
@@ -267,7 +267,7 @@ export default function MarketingPage() {
{[30, 45, 35, 55, 70, 60, 85].map((val, i) => ( {[30, 45, 35, 55, 70, 60, 85].map((val, i) => (
<div <div
key={i} key={i}
className="flex-1 bg-[#00F0FF]/20 hover:bg-[#00F0FF]/60 transition-colors rounded-t" className="flex-1 bg-[var(--cyan-ai-20)] hover:bg-[var(--cyan-ai-50)] transition-colors rounded-t"
style={{ height: `${val}%` }} style={{ height: `${val}%` }}
></div> ></div>
))} ))}
@@ -295,7 +295,7 @@ export default function MarketingPage() {
</Button> </Button>
</Link> </Link>
<Button size="sm" variant="outline" className="h-8 rounded-lg px-4 text-xs border-border bg-background/50"> <Button size="sm" variant="outline" className="h-8 rounded-lg px-4 text-xs border-border bg-background/50">
<MessageSquare size={12} className="mr-1.5 text-[#00F0FF]" /> Ask AI to explain <MessageSquare size={12} className="mr-1.5 text-[var(--cyan-ai)]" /> Ask AI to explain
</Button> </Button>
</div> </div>
</div> </div>
@@ -312,15 +312,15 @@ export default function MarketingPage() {
<div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10"></div> <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10"></div>
<div className="flex w-[200%] animate-marquee opacity-70 hover:opacity-100 transition-opacity"> <div className="flex w-[200%] animate-marquee opacity-70 hover:opacity-100 transition-opacity">
<div className="flex-1 flex justify-around items-center px-4"> <div className="flex-1 flex justify-around items-center px-4">
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
</div> </div>
<div className="flex-1 flex justify-around items-center px-4"> <div className="flex-1 flex justify-around items-center px-4">
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div> <div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
</div> </div>
</div> </div>
@@ -370,12 +370,12 @@ export default function MarketingPage() {
</motion.div> </motion.div>
<motion.div variants={itemVariants}> <motion.div variants={itemVariants}>
<Card className="bg-[#00F0FF]/5 backdrop-blur-xl border-[#00F0FF]/20 hover:border-[#00F0FF]/60 transition-all duration-300 rounded-[2rem] h-full shadow-[0_0_30px_-15px_#00F0FF] group"> <Card className="bg-[var(--cyan-ai-10)] backdrop-blur-xl border-[var(--cyan-ai-20)] hover:border-[var(--cyan-ai-50)] transition-all duration-300 rounded-[2rem] h-full shadow-[0_0_30px_-15px_var(--cyan-ai)] group">
<CardContent className="p-8 relative overflow-hidden"> <CardContent className="p-8 relative overflow-hidden">
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:rotate-12 duration-500"> <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:rotate-12 duration-500">
<BrainCircuit size={120} /> <BrainCircuit size={120} />
</div> </div>
<div className="size-14 rounded-2xl bg-[#00F0FF]/20 text-[#00F0FF] flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_#00F0FF]"> <div className="size-14 rounded-2xl bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--cyan-ai)]">
<BrainCircuit size={28} /> <BrainCircuit size={28} />
</div> </div>
<h3 className="text-2xl font-bold mb-4 tracking-tight">Dynamic Generation</h3> <h3 className="text-2xl font-bold mb-4 tracking-tight">Dynamic Generation</h3>
@@ -476,17 +476,17 @@ export default function MarketingPage() {
className="relative mt-8 lg:mt-0" className="relative mt-8 lg:mt-0"
> >
<Card className="bg-background/80 backdrop-blur-md border-border p-6 rounded-[2rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl"> <Card className="bg-background/80 backdrop-blur-md border-border p-6 rounded-[2rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
<h3 className="text-3xl font-bold mb-2 text-[#00F0FF]">AI Coach</h3> <h3 className="text-3xl font-bold mb-2 text-[var(--cyan-ai)]">AI Coach</h3>
<p className="text-muted-foreground mb-6 text-base">The complete AI-driven system.</p> <p className="text-muted-foreground mb-6 text-base">The complete AI-driven system.</p>
<div className="text-6xl font-bold tracking-tighter mb-6 text-[#00F0FF]">₹11,999<span className="text-xl text-[#00F0FF]/60 font-medium tracking-normal ml-1">/year</span></div> <div className="text-6xl font-bold tracking-tighter mb-6 text-[var(--cyan-ai)]">₹11,999<span className="text-xl text-[var(--cyan-ai-50)] font-medium tracking-normal ml-1">/year</span></div>
<ul className="space-y-3 mb-6 flex-1 font-medium text-lg"> <ul className="space-y-3 mb-6 flex-1 font-medium text-lg">
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Everything in Pro</li> <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> Everything in Pro</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> AI Spaced Repetition (Mistakes)</li> <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> AI Spaced Repetition (Mistakes)</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> 24/7 Streaming AI Tutor Chat</li> <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> 24/7 Streaming AI Tutor Chat</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank & College Predictor</li> <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> Predictive Rank & College Predictor</li>
</ul> </ul>
<Link href="/signup"> <Link href="/signup">
<Button size="lg" className="w-full rounded-2xl h-12 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all">Get AI Coach</Button> <Button size="lg" className="w-full rounded-2xl h-12 font-bold text-lg bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all">Get AI Coach</Button>
</Link> </Link>
</Card> </Card>
</motion.div> </motion.div>
@@ -510,7 +510,7 @@ export default function MarketingPage() {
<th className="p-4 md:p-6 font-bold text-lg w-1/2 border-l border-t border-border/50">Feature</th> <th className="p-4 md:p-6 font-bold text-lg w-1/2 border-l border-t border-border/50">Feature</th>
{/* <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-t border-white">Free</th> */} {/* <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-t border-white">Free</th> */}
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-yellow-500 border-x border-t border-yellow-500">Pro</th> <th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-yellow-500 border-x border-t border-yellow-500">Pro</th>
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[#00F0FF] bg-[#00F0FF]/5 border-x border-t border-[#00F0FF]">AI Coach</th> <th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] border-x border-t border-[var(--cyan-ai)]">AI Coach</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border/30 text-sm md:text-base"> <tbody className="divide-y divide-border/30 text-sm md:text-base">
@@ -546,8 +546,8 @@ export default function MarketingPage() {
<td className="p-4 md:p-6 text-center border border-yellow-500"> <td className="p-4 md:p-6 text-center border border-yellow-500">
{typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>} {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>}
</td> </td>
<td className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]"> <td className="p-4 md:p-6 text-center bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai)]">
{typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto text-[#00F0FF]/30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>} {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[var(--cyan-ai)]" size={20} /> : <Minus className="mx-auto text-[var(--cyan-ai-30)]" size={20} />) : <span className="font-semibold text-[var(--cyan-ai)]">{feature.ai}</span>}
</td> </td>
</tr> </tr>
))} ))}

24
src/app/upgrade/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState } from "react" import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
@@ -73,20 +73,20 @@ export default function UpgradePage() {
{/* AI Coach Tier */} {/* AI Coach Tier */}
<Card className="bg-background/80 backdrop-blur-md border border-border p-6 rounded-[2rem] flex flex-col justify-between h-full z-10 relative shadow-xl hover:border-border/80 transition-colors"> <Card className="bg-background/80 backdrop-blur-md border border-border p-6 rounded-[2rem] flex flex-col justify-between h-full z-10 relative shadow-xl hover:border-border/80 transition-colors">
<div> <div>
<h3 className="text-3xl font-bold mb-2 text-[#00F0FF]">AI Coach</h3> <h3 className="text-3xl font-bold mb-2 text-[var(--cyan-ai)]">AI Coach</h3>
<p className="text-muted-foreground mb-6 text-base">The complete AI-driven system.</p> <p className="text-muted-foreground mb-6 text-base">The complete AI-driven system.</p>
<div className="text-6xl font-bold tracking-tighter mb-6 text-[#00F0FF]"> <div className="text-6xl font-bold tracking-tighter mb-6 text-[var(--cyan-ai)]">
₹11,999<span className="text-xl text-[#00F0FF]/60 font-medium tracking-normal ml-1">/year</span> ₹11,999<span className="text-xl text-[var(--cyan-ai-50)] font-medium tracking-normal ml-1">/year</span>
</div> </div>
<ul className="space-y-3 mb-6 font-medium text-lg"> <ul className="space-y-3 mb-6 font-medium text-lg">
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> Everything in Pro</li> <li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> Everything in Pro</li>
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> AI Spaced Repetition (Mistakes)</li> <li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> AI Spaced Repetition (Mistakes)</li>
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> 24/7 Streaming AI Tutor Chat</li> <li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> 24/7 Streaming AI Tutor Chat</li>
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> Predictive Rank & College Predictor</li> <li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> Predictive Rank & College Predictor</li>
</ul> </ul>
</div> </div>
<Button <Button
className="w-full font-bold text-lg rounded-2xl h-12 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all" className="w-full font-bold text-lg rounded-2xl h-12 bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all"
onClick={() => handleUpgrade("Al_Coach")} onClick={() => handleUpgrade("Al_Coach")}
disabled={userLoading} disabled={userLoading}
> >
@@ -115,7 +115,7 @@ export default function UpgradePage() {
<th className="p-4 md:p-6 font-bold text-lg w-1/2 border-l border-t border-border/50">Feature</th> <th className="p-4 md:p-6 font-bold text-lg w-1/2 border-l border-t border-border/50">Feature</th>
{/* <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-t border-white">Free</th> */} {/* <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-t border-white">Free</th> */}
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-yellow-500 border-x border-t border-yellow-500">Pro</th> <th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-yellow-500 border-x border-t border-yellow-500">Pro</th>
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[#00F0FF] bg-[#00F0FF]/5 border-x border-t border-[#00F0FF]">AI Coach</th> <th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] border-x border-t border-[var(--cyan-ai)]">AI Coach</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border/30 text-sm md:text-base"> <tbody className="divide-y divide-border/30 text-sm md:text-base">
@@ -151,8 +151,8 @@ export default function UpgradePage() {
<td className="p-4 md:p-6 text-center border border-yellow-500"> <td className="p-4 md:p-6 text-center border border-yellow-500">
{typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>} {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>}
</td> </td>
<td className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]"> <td className="p-4 md:p-6 text-center bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai)]">
{typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto text-[#00F0FF]/30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>} {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[var(--cyan-ai)]" size={20} /> : <Minus className="mx-auto text-[var(--cyan-ai-30)]" size={20} />) : <span className="font-semibold text-[var(--cyan-ai)]">{feature.ai}</span>}
</td> </td>
</tr> </tr>
))} ))}

4
src/components/AI/AITutorChat.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useRef, useEffect } from "react" import { useState, useRef, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
@@ -111,7 +111,7 @@ export function AITutorChat() {
return ( return (
<Button <Button
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
className="fixed bottom-6 right-6 h-14 w-14 rounded-full flex items-center justify-center z-50 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 transition-transform hover:scale-105" className="fixed bottom-6 right-6 h-14 w-14 rounded-full flex items-center justify-center z-50 bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] transition-transform hover:scale-105"
> >
<Bot size={28} /> <Bot size={28} />
</Button> </Button>

6
src/components/AI/AdaptiveStudyPlan.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -59,7 +59,7 @@ export function AdaptiveStudyPlan() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2">
<BrainCircuit className="text-primary" /> Adaptive Study Plan <BrainCircuit className="text-primary" /> Adaptive Study Plan
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge> <Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
</CardTitle> </CardTitle>
<div className="flex items-center gap-2 bg-secondary/50 px-3 py-1 rounded-full text-xs font-bold text-foreground"> <div className="flex items-center gap-2 bg-secondary/50 px-3 py-1 rounded-full text-xs font-bold text-foreground">
<Clock size={14} className="text-primary" /> Today: {totalTime} min <Clock size={14} className="text-primary" /> Today: {totalTime} min
@@ -86,7 +86,7 @@ export function AdaptiveStudyPlan() {
</div> </div>
{/* Card */} {/* Card */}
<div className="flex-1 p-4 rounded-xl border border-border bg-background shadow-sm transition-all hover:shadow-md hover:border-[#00F0FF]/30"> <div className="flex-1 p-4 rounded-xl border border-border bg-background shadow-sm transition-all hover:shadow-md hover:border-[var(--cyan-ai-30)]">
<div className={`flex items-center justify-between mb-1.5 ${isSkipped ? 'opacity-50' : ''}`}> <div className={`flex items-center justify-between mb-1.5 ${isSkipped ? 'opacity-50' : ''}`}>
<span className="text-[10px] uppercase font-bold tracking-wider text-muted-foreground bg-secondary/50 px-2 py-0.5 rounded-md"> <span className="text-[10px] uppercase font-bold tracking-wider text-muted-foreground bg-secondary/50 px-2 py-0.5 rounded-md">
{item.type} {item.type}

8
src/components/AI/CollegePredictorCard.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -67,14 +67,14 @@ export function CollegePredictorCard() {
const TAB_COLORS: Record<string, string> = { const TAB_COLORS: Record<string, string> = {
Reach: "bg-purple-500/10 border-purple-500/20 text-purple-400", Reach: "bg-purple-500/10 border-purple-500/20 text-purple-400",
Target: "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]", Target: "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]",
Safety: "bg-green-500/10 border-green-500/20 text-green-400", Safety: "bg-green-500/10 border-green-500/20 text-green-400",
} }
const INACTIVE = "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10" const INACTIVE = "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"
return ( return (
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col gap-4"> <CardContent className="p-5 flex flex-col gap-4">
{/* Tabs */} {/* Tabs */}
<div className="flex gap-1.5"> <div className="flex gap-1.5">
@@ -100,7 +100,7 @@ export function CollegePredictorCard() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{colleges.map((col) => ( {colleges.map((col) => (
<div key={col.name} className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-border hover:bg-white/10 transition-colors group/item"> <div key={col.name} className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-border hover:bg-white/10 transition-colors group/item">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[#00F0FF]/10 text-[#00F0FF]" : "bg-green-500/10 text-green-400"}`}> <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]" : "bg-green-500/10 text-green-400"}`}>
#{col.rank} #{col.rank}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">

4
src/components/AI/DailyChallengeBanner.tsx
View File

@@ -1,10 +1,10 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Flame, ArrowRight, Timer, BookOpen, TrendingUp } from "lucide-react" import { Flame, ArrowRight, Timer, BookOpen, TrendingUp } from "lucide-react"
const FOCUS_TOPICS = [ const FOCUS_TOPICS = [
{ subject: "Physics", topic: "Rotational Dynamics", color: "from-blue-600/30 to-[#00F0FF]/20", accent: "#00F0FF", icon: "⚛️", questions: 12, weightage: "8–12 marks" }, { subject: "Physics", topic: "Rotational Dynamics", color: "from-blue-600/30 to-[var(--cyan-ai-20)]", accent: "var(--cyan-ai)", icon: "⚛️", questions: 12, weightage: "8–12 marks" },
{ subject: "Chemistry", topic: "Organic Reaction Mechanisms", color: "from-amber-600/30 to-yellow-500/20", accent: "#F59E0B", icon: "🧪", questions: 10, weightage: "6–10 marks" }, { subject: "Chemistry", topic: "Organic Reaction Mechanisms", color: "from-amber-600/30 to-yellow-500/20", accent: "#F59E0B", icon: "🧪", questions: 10, weightage: "6–10 marks" },
{ subject: "Biology", topic: "Human Nervous System", color: "from-green-600/30 to-emerald-400/20", accent: "#10B981", icon: "🧬", questions: 14, weightage: "10–14 marks" }, { subject: "Biology", topic: "Human Nervous System", color: "from-green-600/30 to-emerald-400/20", accent: "#10B981", icon: "🧬", questions: 14, weightage: "10–14 marks" },
{ subject: "Maths", topic: "Integral Calculus", color: "from-purple-600/30 to-violet-400/20", accent: "#A78BFA", icon: "∫", questions: 15, weightage: "12–15 marks" }, { subject: "Maths", topic: "Integral Calculus", color: "from-purple-600/30 to-violet-400/20", accent: "#A78BFA", icon: "∫", questions: 15, weightage: "12–15 marks" },

8
src/components/AI/ExamStrategyCard.tsx
View File

@@ -1,11 +1,11 @@
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import { Printer } from "lucide-react" import { Printer } from "lucide-react"
import Link from "next/link" import Link from "next/link"
export function ExamStrategyCard() { export function ExamStrategyCard() {
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 min-h-[440px] overflow-hidden group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 min-h-[440px] overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col h-full justify-between"> <CardContent className="p-5 flex flex-col h-full justify-between">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="p-3.5 rounded-lg bg-white/5 border border-border text-center flex flex-col justify-center"> <div className="p-3.5 rounded-lg bg-white/5 border border-border text-center flex flex-col justify-center">
@@ -30,8 +30,8 @@ export function ExamStrategyCard() {
</div> </div>
</div> </div>
<div className="mt-4 flex items-center justify-center gap-2 p-3 rounded-lg bg-[#00F0FF]/10 border border-dashed border-[#00F0FF]/20 text-xs md:text-sm text-[#00F0FF] font-bold cursor-pointer hover:bg-[#00F0FF]/20 transition-colors"> <div className="mt-4 flex items-center justify-center gap-2 p-3 rounded-lg bg-[var(--cyan-ai-10)] border border-dashed border-[var(--cyan-ai-20)] text-xs md:text-sm text-[var(--cyan-ai)] font-bold cursor-pointer hover:bg-[var(--cyan-ai-20)] transition-colors">
<Printer size={18} className="stroke-[#00F0FF]" /> <Printer size={18} className="stroke-[var(--cyan-ai)]" />
Print Exam Day Blueprint Print Exam Day Blueprint
</div> </div>
</CardContent> </CardContent>

6
src/components/AI/FeatureIndex.tsx
View File

@@ -1,4 +1,4 @@
import Link from "next/link" import Link from "next/link"
const features = [ const features = [
{ name: "Mistake Tracking", href: "/dashboard/ai-coach/mistakes" }, { name: "Mistake Tracking", href: "/dashboard/ai-coach/mistakes" },
@@ -19,9 +19,9 @@ export function FeatureIndex() {
<Link <Link
key={f.name} key={f.name}
href={f.href} href={f.href}
className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-extrabold bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-[#00F0FF] hover:bg-[#00F0FF] hover:text-black transition-all shadow-[0_0_12px_rgba(0,240,255,0.1)] group" className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-extrabold bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai)] hover:text-black transition-all shadow-[0_0_12px_rgba(12,96,96,0.1)] group"
> >
<span className="size-2 rounded-full bg-[#00F0FF] group-hover:bg-black transition-colors" /> <span className="size-2 rounded-full bg-[var(--cyan-ai)] group-hover:bg-black transition-colors" />
<span>{f.name}</span> <span>{f.name}</span>
<span className="text-[10px] opacity-75">→</span> <span className="text-[10px] opacity-75">→</span>
</Link> </Link>

4
src/components/AI/MistakeHeatmap.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@@ -39,7 +39,7 @@ export function MistakeHeatmap() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-xl flex items-center gap-2"> <CardTitle className="text-xl flex items-center gap-2">
<Flame className="text-orange-500" /> Mistake Heatmap <Flame className="text-orange-500" /> Mistake Heatmap
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge> <Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
</CardTitle> </CardTitle>
<Info size={16} className="text-muted-foreground" /> <Info size={16} className="text-muted-foreground" />
</div> </div>

22
src/components/AI/MistakeReviewCard.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState } from "react" import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -89,7 +89,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div className="flex justify-between items-center relative py-4 px-2"> <div className="flex justify-between items-center relative py-4 px-2">
<div className="absolute top-1/2 left-0 right-0 h-0.5 bg-secondary -translate-y-1/2 z-0" /> <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-secondary -translate-y-1/2 z-0" />
<div <div
className="absolute top-1/2 left-0 h-0.5 bg-[#00F0FF] -translate-y-1/2 z-0 transition-all" className="absolute top-1/2 left-0 h-0.5 bg-[var(--cyan-ai)] -translate-y-1/2 z-0 transition-all"
style={{ width: mistake.review_count >= 1 ? (mistake.review_count >= 2 ? "67%" : "33%") : "0%" }} style={{ width: mistake.review_count >= 1 ? (mistake.review_count >= 2 ? "67%" : "33%") : "0%" }}
/> />
@@ -102,10 +102,10 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div key={i} className={`relative z-10 flex flex-col items-center gap-1.5 ${step.active ? "scale-110" : step.done ? "opacity-70" : "opacity-40"}`}> <div key={i} className={`relative z-10 flex flex-col items-center gap-1.5 ${step.active ? "scale-110" : step.done ? "opacity-70" : "opacity-40"}`}>
<div className={`rounded-full border-2 border-background ${ <div className={`rounded-full border-2 border-background ${
step.done ? "w-3.5 h-3.5 bg-green-500" : step.done ? "w-3.5 h-3.5 bg-green-500" :
step.active ? "w-4 h-4 border-[3px] border-[#00F0FF] bg-background shadow-[0_0_10px_rgba(0,240,255,0.5)]" : step.active ? "w-4 h-4 border-[3px] border-[var(--cyan-ai)] bg-background shadow-[0_0_10px_rgba(12,96,96,0.5)]" :
"w-3.5 h-3.5 bg-secondary" "w-3.5 h-3.5 bg-secondary"
}`} /> }`} />
<span className={`text-xs font-bold ${step.active ? "text-[#00F0FF]" : step.done ? "text-green-400" : "text-muted-foreground"}`}> <span className={`text-xs font-bold ${step.active ? "text-[var(--cyan-ai)]" : step.done ? "text-green-400" : "text-muted-foreground"}`}>
{step.label} {step.label}
</span> </span>
<span className="text-[11px] text-muted-foreground font-semibold">{step.date}</span> <span className="text-[11px] text-muted-foreground font-semibold">{step.date}</span>
@@ -114,7 +114,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
</div> </div>
{/* Question Card */} {/* Question Card */}
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[540px] h-full relative overflow-hidden flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[540px] h-full relative overflow-hidden flex flex-col justify-between group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-6 flex-1 flex flex-col justify-between"> <CardContent className="p-6 flex-1 flex flex-col justify-between">
{/* Meta Tags */} {/* Meta Tags */}
<div className="flex items-center gap-2 mb-4 flex-wrap"> <div className="flex items-center gap-2 mb-4 flex-wrap">
@@ -151,7 +151,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
btnClass = "border-red-500 bg-red-500/10 text-red-500" btnClass = "border-red-500 bg-red-500/10 text-red-500"
} }
} else if (isSelected) { } else if (isSelected) {
btnClass = "border-[#00F0FF] bg-[#00F0FF]/10 text-[#00F0FF] shadow-[0_0_15px_rgba(0,240,255,0.15)]" btnClass = "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] shadow-[0_0_15px_rgba(12,96,96,0.15)]"
} }
return ( return (
@@ -177,16 +177,16 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<button <button
onClick={handleCheck} onClick={handleCheck}
disabled={!selected || isSubmitting} disabled={!selected || isSubmitting}
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity disabled:opacity-50" className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 text-background hover:opacity-90 transition-opacity disabled:opacity-50"
> >
{isSubmitting ? "Checking..." : "Submit Answer"} {isSubmitting ? "Checking..." : "Submit Answer"}
</button> </button>
</div> </div>
) : ( ) : (
<> <>
<div className="mt-5 p-4 rounded-xl border border-[#00F0FF]/20 bg-[#00F0FF]/5"> <div className="mt-5 p-4 rounded-xl border border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]">
<h4 className="text-[13px] font-bold text-[#00F0FF] mb-2 flex items-center gap-2"> <h4 className="text-[13px] font-bold text-[var(--cyan-ai)] mb-2 flex items-center gap-2">
<Flame size={16} className="fill-[#00F0FF]/20" /> <Flame size={16} className="fill-[var(--cyan-ai-20)]" />
AI Explanation AI Explanation
</h4> </h4>
<div className="prose prose-sm dark:prose-invert max-w-none text-[13px] text-muted-foreground leading-relaxed [&>p]:m-0"> <div className="prose prose-sm dark:prose-invert max-w-none text-[13px] text-muted-foreground leading-relaxed [&>p]:m-0">
@@ -198,7 +198,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div className="mt-5 flex justify-end"> <div className="mt-5 flex justify-end">
<button <button
onClick={handleNext} onClick={handleNext}
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity" className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 text-background hover:opacity-90 transition-opacity"
> >
Next Question → Next Question →
</button> </button>

12
src/components/AI/ProgressShare.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -43,7 +43,7 @@ export function ProgressShare() {
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-xl flex items-center justify-between"> <CardTitle className="text-xl flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ImageIcon className="text-[#00F0FF]" size={24} /> <ImageIcon className="text-[var(--cyan-ai)]" size={24} />
Share Your Wins Share Your Wins
</div> </div>
</CardTitle> </CardTitle>
@@ -53,17 +53,17 @@ export function ProgressShare() {
<CardContent className="flex-1 flex flex-col justify-between gap-6 pt-2"> <CardContent className="flex-1 flex flex-col justify-between gap-6 pt-2">
{/* Mock Preview of the OG Image */} {/* Mock Preview of the OG Image */}
<div className="w-full rounded-xl overflow-hidden border border-border/50 shadow-md bg-gradient-to-br from-indigo-900/40 to-black relative aspect-[1200/630] flex flex-col items-center justify-center p-4 transition-transform group-hover:scale-[1.02]"> <div className="w-full rounded-xl overflow-hidden border border-border/50 shadow-md bg-gradient-to-br from-indigo-900/40 to-black relative aspect-[1200/630] flex flex-col items-center justify-center p-4 transition-transform group-hover:scale-[1.02]">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-[#00F0FF]/20 via-transparent to-transparent opacity-50" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-[var(--cyan-ai-20)] via-transparent to-transparent opacity-50" />
<div className="relative z-10 w-full flex flex-col h-full"> <div className="relative z-10 w-full flex flex-col h-full">
<div className="flex justify-between items-start w-full"> <div className="flex justify-between items-start w-full">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-[#00F0FF] flex items-center justify-center"> <div className="w-8 h-8 rounded-lg bg-[var(--cyan-ai)] flex items-center justify-center">
<Sparkles size={16} className="text-black" /> <Sparkles size={16} className="text-black" />
</div> </div>
<span className="text-sm font-black text-white tracking-wider">PRAGATIVEER</span> <span className="text-sm font-black text-white tracking-wider">PRAGATIVEER</span>
</div> </div>
<div className="text-[10px] font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-2 py-1 rounded-full border border-[#00F0FF]/20"> <div className="text-[10px] font-bold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2 py-1 rounded-full border border-[var(--cyan-ai-20)]">
Weekly Report Weekly Report
</div> </div>
</div> </div>
@@ -91,7 +91,7 @@ export function ProgressShare() {
</div> </div>
</div> </div>
<Button onClick={handleDownload} variant="outline" className="w-full h-11 font-bold text-sm hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] hover:border-[#00F0FF]/30 transition-colors" disabled={downloading}> <Button onClick={handleDownload} variant="outline" className="w-full h-11 font-bold text-sm hover:bg-[var(--cyan-ai-10)] hover:text-[var(--cyan-ai)] hover:border-[var(--cyan-ai-30)] transition-colors" disabled={downloading}>
{downloading ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />} {downloading ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
Download Scorecard PNG Download Scorecard PNG
</Button> </Button>

14
src/components/AI/ReadinessGauge.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -69,7 +69,7 @@ export function ReadinessGauge() {
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[var(--cyan-ai-30)] transition-colors">
{/* Background glow decoration */} {/* Background glow decoration */}
<div className="absolute -top-1/2 -right-1/4 w-48 h-48 bg-[radial-gradient(circle,rgba(94,196,184,0.06)_0%,transparent_70%)] rounded-full pointer-events-none" /> <div className="absolute -top-1/2 -right-1/4 w-48 h-48 bg-[radial-gradient(circle,rgba(94,196,184,0.06)_0%,transparent_70%)] rounded-full pointer-events-none" />
@@ -89,11 +89,11 @@ export function ReadinessGauge() {
<svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100"> <svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<defs> <defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#00F0FF" /> <stop offset="0%" stopColor="var(--cyan-ai)" />
<stop offset="100%" stopColor="#3B82F6" /> <stop offset="100%" stopColor="#3B82F6" />
</linearGradient> </linearGradient>
</defs> </defs>
<circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[#00F0FF]/10" /> <circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[var(--cyan-ai-10)]" />
<circle <circle
cx="50" cy="50" r="45" cx="50" cy="50" r="45"
stroke="url(#scoreGradient)" stroke="url(#scoreGradient)"
@@ -147,7 +147,7 @@ export function ReadinessGauge() {
{/* Subject Bars */} {/* Subject Bars */}
<div className="space-y-2 mb-4 relative z-10"> <div className="space-y-2 mb-4 relative z-10">
{[ {[
{ name: "Physics", val: isZero ? 0 : 68, color: "#00F0FF" }, { name: "Physics", val: isZero ? 0 : 68, color: "var(--cyan-ai)" },
{ name: "Chemistry", val: isZero ? 0 : 74, color: "#F59E0B" }, { name: "Chemistry", val: isZero ? 0 : 74, color: "#F59E0B" },
{ name: "Biology / Maths", val: isZero ? 0 : 82, color: "#10B981" }, { name: "Biology / Maths", val: isZero ? 0 : 82, color: "#10B981" },
].map(sub => ( ].map(sub => (
@@ -173,8 +173,8 @@ export function ReadinessGauge() {
</span> </span>
</div> </div>
<div className="mt-auto px-3.5 py-3 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-lg text-xs md:text-sm text-[#00F0FF] font-bold flex items-center gap-2 relative z-10"> <div className="mt-auto px-3.5 py-3 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-lg text-xs md:text-sm text-[var(--cyan-ai)] font-bold flex items-center gap-2 relative z-10">
<Flame size={18} className="fill-[#00F0FF]/20 shrink-0" /> <Flame size={18} className="fill-[var(--cyan-ai-20)] shrink-0" />
{isZero {isZero
? "Complete your first diagnostic test to establish your personalized readiness score." ? "Complete your first diagnostic test to establish your personalized readiness score."
: "Your speed has dropped slightly. Focus on time-bound practice today."} : "Your speed has dropped slightly. Focus on time-bound practice today."}

20
src/components/AI/StudyPlanCard.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -69,7 +69,7 @@ export function StudyPlanCard() {
switch(type) { switch(type) {
case "Revision": return "bg-yellow-500/10 text-yellow-500" case "Revision": return "bg-yellow-500/10 text-yellow-500"
case "Mistake_Review": return "bg-red-500/10 text-red-500" case "Mistake_Review": return "bg-red-500/10 text-red-500"
case "DPS": return "bg-[#00F0FF]/10 text-[#00F0FF]" case "DPS": return "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]"
case "Micro_test": return "bg-green-500/10 text-green-500" case "Micro_test": return "bg-green-500/10 text-green-500"
case "Test": return "bg-purple-500/10 text-purple-500" case "Test": return "bg-purple-500/10 text-purple-500"
default: return "bg-secondary text-muted-foreground" default: return "bg-secondary text-muted-foreground"
@@ -90,18 +90,18 @@ export function StudyPlanCard() {
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<div className="px-5 py-4 flex justify-between items-center border-b border-border"> <div className="px-5 py-4 flex justify-between items-center border-b border-border">
<div className="text-sm font-bold text-muted-foreground"> <div className="text-sm font-bold text-muted-foreground">
{new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })} {new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
</div> </div>
<div className="text-xs text-[#00F0FF] font-bold">{progressPercent}% Completed</div> <div className="text-xs text-[var(--cyan-ai)] font-bold">{progressPercent}% Completed</div>
</div> </div>
{/* Progress bar */} {/* Progress bar */}
<div className="h-[3px] bg-[#00F0FF]/10 w-full"> <div className="h-[3px] bg-[var(--cyan-ai-10)] w-full">
<div <div
className="h-full bg-gradient-to-r from-[#00F0FF] to-teal-400 rounded-r-[2px] transition-all duration-500" className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px] transition-all duration-500"
style={{ width: `${progressPercent}%` }} style={{ width: `${progressPercent}%` }}
/> />
</div> </div>
@@ -123,14 +123,14 @@ export function StudyPlanCard() {
onClick={() => toggleTask(idx, isDone ? "Pending" : "Done")} onClick={() => toggleTask(idx, isDone ? "Pending" : "Done")}
className={`flex items-center gap-3 px-4 py-2.5 transition-colors cursor-pointer border-l-[3px] ${ className={`flex items-center gap-3 px-4 py-2.5 transition-colors cursor-pointer border-l-[3px] ${
isDone ? "opacity-60 border-green-500 hover:bg-white/5" : isDone ? "opacity-60 border-green-500 hover:bg-white/5" :
isCurrent ? "border-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10" : isCurrent ? "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] hover:bg-[var(--cyan-ai-10)]" :
"border-transparent hover:bg-white/5" "border-transparent hover:bg-white/5"
}`} }`}
> >
{/* Custom Checkbox */} {/* Custom Checkbox */}
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${ <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
isDone ? "bg-green-500 border-green-500" : isDone ? "bg-green-500 border-green-500" :
isCurrent ? "border-[#00F0FF] shadow-[0_0_0_0_rgba(0,240,255,0.3)] animate-[pulse-border_2s_infinite]" : isCurrent ? "border-[var(--cyan-ai)] shadow-[0_0_0_0_rgba(12,96,96,0.3)] animate-[pulse-border_2s_infinite]" :
"border-muted-foreground" "border-muted-foreground"
}`}> }`}>
{isDone && <Check size={12} className="stroke-white stroke-[3px]" />} {isDone && <Check size={12} className="stroke-white stroke-[3px]" />}
@@ -157,8 +157,8 @@ export function StudyPlanCard() {
</Card> </Card>
<style dangerouslySetInnerHTML={{__html: ` <style dangerouslySetInnerHTML={{__html: `
@keyframes pulse-border { @keyframes pulse-border {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.3); } 0%, 100% { box-shadow: 0 0 0 0 rgba(12, 96, 96, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(12, 96, 96, 0); }
} }
`}} /> `}} />
</div> </div>

12
src/components/AI/StudyTimeOptimizationCard.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import { Flame, Star, Clock, TrendingUp, Sparkles } from "lucide-react" import { Flame, Star, Clock, TrendingUp, Sparkles } from "lucide-react"
import { useState } from "react" import { useState } from "react"
@@ -38,7 +38,7 @@ export function StudyTimeOptimizationCard() {
return ( return (
<div> <div>
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[440px] flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[440px] flex flex-col justify-between group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex-1 flex flex-col gap-4"> <CardContent className="p-5 flex-1 flex flex-col gap-4">
{/* Header stats */} {/* Header stats */}
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
@@ -86,7 +86,7 @@ export function StudyTimeOptimizationCard() {
{hovered === i && ( {hovered === i && (
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none"> <div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
<div className="text-foreground">{slot.label}</div> <div className="text-foreground">{slot.label}</div>
<div className={slot.peak ? "text-yellow-400" : "text-[#00F0FF]"}> <div className={slot.peak ? "text-yellow-400" : "text-[var(--cyan-ai)]"}>
Score: {slot.score}% Score: {slot.score}%
</div> </div>
</div> </div>
@@ -96,9 +96,9 @@ export function StudyTimeOptimizationCard() {
slot.peak slot.peak
? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]" ? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]"
: hovered === i : hovered === i
? "bg-gradient-to-t from-[#00F0FF]/70 to-[#00F0FF]" ? "bg-gradient-to-t from-[var(--cyan-ai-80)] to-[var(--cyan-ai)]"
: isDemo : isDemo
? "bg-gradient-to-t from-[#00F0FF]/20 to-[#00F0FF]/50" ? "bg-gradient-to-t from-[var(--cyan-ai-20)] to-[var(--cyan-ai-10)]"
: "bg-white/5 border border-white/10" : "bg-white/5 border border-white/10"
}`} }`}
style={{ height: isDemo ? `${(slot.h / maxH) * 100}%` : "4px" }} style={{ height: isDemo ? `${(slot.h / maxH) * 100}%` : "4px" }}
@@ -123,7 +123,7 @@ export function StudyTimeOptimizationCard() {
{[ {[
{ label: "Morning", time: "6–9 AM", eff: isDemo ? 60 : 0, color: "text-muted-foreground" }, { label: "Morning", time: "6–9 AM", eff: isDemo ? 60 : 0, color: "text-muted-foreground" },
{ label: "Peak", time: "2–5 PM", eff: isDemo ? 95 : 0, color: isDemo ? "text-yellow-400" : "text-muted-foreground" }, { label: "Peak", time: "2–5 PM", eff: isDemo ? 95 : 0, color: isDemo ? "text-yellow-400" : "text-muted-foreground" },
{ label: "Evening", time: "7–9 PM", eff: isDemo ? 73 : 0, color: isDemo ? "text-[#00F0FF]" : "text-muted-foreground" }, { label: "Evening", time: "7–9 PM", eff: isDemo ? 73 : 0, color: isDemo ? "text-[var(--cyan-ai)]" : "text-muted-foreground" },
].map(slot => ( ].map(slot => (
<div key={slot.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30"> <div key={slot.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30">
<div className={`text-base font-black ${slot.color}`}>{slot.eff}%</div> <div className={`text-base font-black ${slot.color}`}>{slot.eff}%</div>

20
src/components/AI/TutorChat.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { useState, useRef, useEffect } from "react" import { useState, useRef, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -94,10 +94,10 @@ export function TutorChat() {
return ( return (
<div className="flex flex-col h-full min-h-[500px]"> <div className="flex flex-col h-full min-h-[500px]">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden flex flex-col group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden flex flex-col group hover:border-[var(--cyan-ai-30)] transition-colors">
{/* Chat Header */} {/* Chat Header */}
<div className="px-4 py-3 bg-[#00F0FF]/5 border-b border-border flex items-center gap-3"> <div className="px-4 py-3 bg-[var(--cyan-ai-10)] border-b border-border flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#00F0FF] to-blue-500 flex items-center justify-center shrink-0"> <div className="w-9 h-9 rounded-full bg-gradient-to-br from-[var(--cyan-ai)] to-blue-500 flex items-center justify-center shrink-0">
<BrainCircuit size={18} className="text-background" /> <BrainCircuit size={18} className="text-background" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -106,7 +106,7 @@ export function TutorChat() {
<span className="w-1.5 h-1.5 rounded-full bg-green-500" /> Online · JEE &amp; NEET specialist <span className="w-1.5 h-1.5 rounded-full bg-green-500" /> Online · JEE &amp; NEET specialist
</div> </div>
</div> </div>
<div className="flex items-center gap-1.5 text-[11px] font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-1 rounded-full border border-[#00F0FF]/20"> <div className="flex items-center gap-1.5 text-[11px] font-bold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2.5 py-1 rounded-full border border-[var(--cyan-ai-20)]">
<Sparkles size={10} /> AI Powered <Sparkles size={10} /> AI Powered
</div> </div>
</div> </div>
@@ -118,8 +118,8 @@ export function TutorChat() {
<div className="max-w-[85%] flex flex-col gap-1"> <div className="max-w-[85%] flex flex-col gap-1">
<div className={`p-3.5 text-sm leading-relaxed ${ <div className={`p-3.5 text-sm leading-relaxed ${
msg.role === "user" msg.role === "user"
? "bg-[#00F0FF] text-background rounded-[12px] rounded-br-[4px] font-bold" ? "bg-[var(--cyan-ai)] text-background rounded-[12px] rounded-br-[4px] font-bold"
: "bg-[#00F0FF]/10 border border-[#00F0FF]/20 text-primary rounded-[12px] rounded-bl-[4px] font-medium" : "bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] text-primary rounded-[12px] rounded-bl-[4px] font-medium"
}`}> }`}>
<div className="prose prose-sm dark:prose-invert max-w-none [&>p]:m-0"> <div className="prose prose-sm dark:prose-invert max-w-none [&>p]:m-0">
{msg.role === "assistant" ? ( {msg.role === "assistant" ? (
@@ -144,7 +144,7 @@ export function TutorChat() {
<button <button
key={p} key={p}
onClick={() => sendMessage(p)} onClick={() => sendMessage(p)}
className="text-xs font-bold px-3 py-1.5 rounded-full border border-border/50 bg-white/5 text-muted-foreground hover:border-[#00F0FF]/40 hover:text-[#00F0FF] hover:bg-[#00F0FF]/5 transition-all" className="text-xs font-bold px-3 py-1.5 rounded-full border border-border/50 bg-white/5 text-muted-foreground hover:border-[var(--cyan-ai-40)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] transition-all"
> >
{p} {p}
</button> </button>
@@ -160,13 +160,13 @@ export function TutorChat() {
onChange={e => setInput(e.target.value)} onChange={e => setInput(e.target.value)}
onKeyDown={e => { if (e.key === "Enter") handleSend() }} onKeyDown={e => { if (e.key === "Enter") handleSend() }}
placeholder="Ask about any JEE or NEET concept..." placeholder="Ask about any JEE or NEET concept..."
className="flex-1 bg-white/5 border border-border rounded-full px-4 py-2.5 text-sm text-primary font-medium focus:outline-none focus:border-[#00F0FF] focus:bg-[#00F0FF]/5 transition-colors" className="flex-1 bg-white/5 border border-border rounded-full px-4 py-2.5 text-sm text-primary font-medium focus:outline-none focus:border-[var(--cyan-ai)] focus:bg-[var(--cyan-ai-10)] transition-colors"
disabled={streaming} disabled={streaming}
/> />
<button <button
onClick={handleSend} onClick={handleSend}
disabled={!input.trim() || streaming} disabled={!input.trim() || streaming}
className="w-9 h-9 rounded-full bg-[#00F0FF] flex items-center justify-center shrink-0 hover:bg-[#00F0FF]/90 transition-transform hover:scale-105 disabled:opacity-50 disabled:hover:scale-100" className="w-9 h-9 rounded-full bg-[var(--cyan-ai)] flex items-center justify-center shrink-0 hover:bg-[var(--cyan-ai-80)] transition-transform hover:scale-105 disabled:opacity-50 disabled:hover:scale-100"
> >
{streaming ? <Loader2 className="animate-spin text-background" size={16} /> : <Send size={16} className="text-background" />} {streaming ? <Loader2 className="animate-spin text-background" size={16} /> : <Send size={16} className="text-background" />}
</button> </button>

20
src/components/AI/WeeklyProgressReport.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client"
import { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react" import { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
@@ -33,7 +33,7 @@ export function WeeklyProgressReport() {
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[#00F0FF]/30 transition-colors"> <Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col gap-4 h-full"> <CardContent className="p-5 flex flex-col gap-4 h-full">
{/* Summary chips */} {/* Summary chips */}
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
@@ -41,7 +41,7 @@ export function WeeklyProgressReport() {
<TrendingUp size={12} /> <TrendingUp size={12} />
{avgAccuracy}% avg accuracy {avgAccuracy}% avg accuracy
</div> </div>
<div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" : "bg-red-500/10 text-red-500 border-red-500/20"}`}> <div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
{trendUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />} {trendUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
{trendUp ? "+" : ""}{trend}{UNIT} vs Mon {trendUp ? "+" : ""}{trend}{UNIT} vs Mon
</div> </div>
@@ -57,7 +57,7 @@ export function WeeklyProgressReport() {
<button <button
key={m} key={m}
onClick={() => setMetric(m)} onClick={() => setMetric(m)}
className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`} className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`}
> >
{m === "accuracy" ? "Accuracy" : m === "questions" ? "Questions" : "Study Hrs"} {m === "accuracy" ? "Accuracy" : m === "questions" ? "Questions" : "Study Hrs"}
</button> </button>
@@ -93,7 +93,7 @@ export function WeeklyProgressReport() {
{hovered === i && ( {hovered === i && (
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none"> <div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
<div>{day}</div> <div>{day}</div>
<div className="text-[#00F0FF]">{DATA[i]}{UNIT}</div> <div className="text-[var(--cyan-ai)]">{DATA[i]}{UNIT}</div>
</div> </div>
)} )}
<div <div
@@ -101,9 +101,9 @@ export function WeeklyProgressReport() {
!isDemo !isDemo
? "bg-white/5 border border-white/10" ? "bg-white/5 border border-white/10"
: i === 6 : i === 6
? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]" ? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]"
: hovered === i : hovered === i
? "bg-gradient-to-t from-[#00F0FF]/40 to-[#00F0FF]/80" ? "bg-gradient-to-t from-[var(--cyan-ai-40)] to-[var(--cyan-ai-80)]"
: "bg-gradient-to-t from-white/10 to-white/25" : "bg-gradient-to-t from-white/10 to-white/25"
}`} }`}
style={{ height: isDemo ? `${(DATA[i] / maxVal) * 100}%` : "4px" }} style={{ height: isDemo ? `${(DATA[i] / maxVal) * 100}%` : "4px" }}
@@ -127,7 +127,7 @@ export function WeeklyProgressReport() {
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{[ {[
{ label: "Avg Accuracy", value: `${avgAccuracy}%`, icon: <Target size={12} className="text-green-400" /> }, { label: "Avg Accuracy", value: `${avgAccuracy}%`, icon: <Target size={12} className="text-green-400" /> },
{ label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[#00F0FF]" /> }, { label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[var(--cyan-ai)]" /> },
{ label: "Study Hrs / Day", value: isDemo ? `${(HOURS.reduce((a, b) => a + b, 0) / 7).toFixed(1)}h` : "0.0h", icon: <Clock size={12} className="text-amber-400" /> }, { label: "Study Hrs / Day", value: isDemo ? `${(HOURS.reduce((a, b) => a + b, 0) / 7).toFixed(1)}h` : "0.0h", icon: <Clock size={12} className="text-amber-400" /> },
].map(stat => ( ].map(stat => (
<div key={stat.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30 text-center"> <div key={stat.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30 text-center">
@@ -139,13 +139,13 @@ export function WeeklyProgressReport() {
</div> </div>
{/* AI insight */} {/* AI insight */}
<div className="px-3 py-2.5 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-xl text-xs text-[#00F0FF] font-medium flex items-start gap-2.5"> <div className="px-3 py-2.5 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-xl text-xs text-[var(--cyan-ai)] font-medium flex items-start gap-2.5">
<Brain size={15} className="shrink-0 mt-0.5" /> <Brain size={15} className="shrink-0 mt-0.5" />
<div> <div>
{isDemo ? ( {isDemo ? (
<> <>
<span className="font-black text-white">Sign errors in Thermodynamics</span> — detected in your last 3 attempts (W = −PΔV misapplied). We&apos;ve queued 3 targeted practice questions for tomorrow.{" "} <span className="font-black text-white">Sign errors in Thermodynamics</span> — detected in your last 3 attempts (W = −PΔV misapplied). We&apos;ve queued 3 targeted practice questions for tomorrow.{" "}
<span className="text-[#00F0FF]/80"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span> <span className="text-[var(--cyan-ai-80)]"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span>
</> </>
) : ( ) : (
<> <>

8
src/components/Dashboard/StreakOnboardingModal.tsx
View File

@@ -1,4 +1,4 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -64,7 +64,7 @@ export function StreakOnboardingModal() {
> >
{/* Centered Modal Card — stop propagation so inner clicks don't close */} {/* Centered Modal Card — stop propagation so inner clicks don't close */}
<div <div
className="bg-background border border-border shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[90vw] max-w-5xl h-[85vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start" className="bg-background border border-border shadow-[0_0_60px_-10px_rgba(12,96,96,0.25)] rounded-3xl w-[90vw] max-w-5xl h-[85vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* BUG-01 fix: X close button */} {/* BUG-01 fix: X close button */}
@@ -77,7 +77,7 @@ export function StreakOnboardingModal() {
</button> </button>
{/* Subtle background glow */} {/* Subtle background glow */}
<div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" /> <div className="absolute -right-20 -top-20 size-48 bg-[var(--cyan-ai-10)] rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" /> <div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
{/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */} {/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */}
@@ -127,7 +127,7 @@ export function StreakOnboardingModal() {
<div className="pt-2 max-w-sm w-full mx-auto"> <div className="pt-2 max-w-sm w-full mx-auto">
<Button <Button
onClick={handleDismiss} onClick={handleDismiss}
className="w-full h-12 rounded-xl text-base font-black bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 shadow-[0_0_15px_-3px_#00F0FF] hover:shadow-[0_0_25px_#00F0FF] hover:-translate-y-0.5 transition-all duration-300" className="w-full h-12 rounded-xl text-base font-black bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] shadow-[0_0_15px_-3px_var(--cyan-ai)] hover:shadow-[0_0_25px_var(--cyan-ai)] hover:-translate-y-0.5 transition-all duration-300"
> >
Enter Workspace Enter Workspace
</Button> </Button>

4
src/components/TierBadge.tsx
View File

@@ -1,4 +1,4 @@
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
interface TierBadgeProps { interface TierBadgeProps {
tier: "Free" | "Pro" | "AI Coach" tier: "Free" | "Pro" | "AI Coach"
@@ -14,7 +14,7 @@ export function TierBadge({ tier }: TierBadgeProps) {
} }
return ( return (
<Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_#00F0FF]"> <Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
AI Coach AI Coach
</Badge> </Badge>
) )