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"
export default function AgentsPage() {
@@ -23,7 +23,7 @@ export default function AgentsPage() {
</CardHeader>
<CardContent>
<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>
</CardContent>
</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`}>
<CardHeader className="flex flex-row items-center justify-between pb-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>
<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}
</div>
</CardHeader>
@@ -74,7 +74,7 @@ export default function AgentsPage() {
</div>
<div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden">
<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 }}
></div>
</div>

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { ReactNode } from "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()
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 */}
<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">
<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>
<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"} />
@@ -52,7 +52,7 @@ function NavItem({ href, icon, label, active }: { href: string, icon: React.Reac
href={href}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 ${
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"
}`}
>

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 { 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>
<p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p>
</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
</Button>
</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>
</CardContent>
</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">
<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>
<CardContent>
<div className="text-2xl font-bold text-[#00F0FF]">96.4%</div>
<p className="text-xs text-[#00F0FF]/70 mt-1 font-medium">Based on 1.2M interactions</p>
<div className="text-2xl font-bold text-[var(--cyan-ai)]">96.4%</div>
<p className="text-xs text-[var(--cyan-ai-80)] mt-1 font-medium">Based on 1.2M interactions</p>
</CardContent>
</Card>
<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 }}>
<defs>
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#00F0FF" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#00F0FF" stopOpacity={0}/>
<stop offset="5%" stopColor="var(--cyan-ai)" stopOpacity={0.3}/>
<stop offset="95%" stopColor="var(--cyan-ai)" stopOpacity={0}/>
</linearGradient>
</defs>
<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`} />
<Tooltip
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>
</ResponsiveContainer>
</CardContent>
@@ -157,7 +157,7 @@ export default function AdminDashboard() {
<div>
<CardTitle>Recent Question Uploads</CardTitle>
</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>
<CardContent>
<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 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td>
<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>
</tr>
<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 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">
<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>
</tr>
</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 { Search, Plus, Filter, MoreHorizontal, Edit, Trash } from "lucide-react"
@@ -20,7 +20,7 @@ export default function QuestionsPage() {
</div>
<div className="flex gap-4">
<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>
@@ -31,7 +31,7 @@ export default function QuestionsPage() {
<input
type="text"
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>
@@ -70,7 +70,7 @@ export default function QuestionsPage() {
</td>
<td className="px-6 py-4">
<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" :
"bg-muted/50 text-muted-foreground border-border"
} variant="outline">
@@ -79,7 +79,7 @@ export default function QuestionsPage() {
</td>
<td className="px-6 py-4 text-right">
<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-foreground hover:bg-secondary rounded"><MoreHorizontal size={16} /></button>
</div>

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

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button"
@@ -72,13 +72,13 @@ export default function SettingsPage() {
<CardContent className="space-y-4">
<div className="space-y-2">
<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 className="space-y-2">
<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>
<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>
</Card>
@@ -106,7 +106,7 @@ export default function SettingsPage() {
type="number"
value={settings.trial_duration_days}
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 className="space-y-2">
@@ -114,13 +114,13 @@ export default function SettingsPage() {
<select
value={settings.trial_tier}
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="Al_Coach">AI Coach (All Features)</option>
</select>
</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>
</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 { useParams, useRouter } from "next/navigation"
@@ -12,7 +12,7 @@ import {
} from "lucide-react"
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",
"Free": "bg-secondary text-foreground border-border",
}
@@ -114,7 +114,7 @@ export default function StudentKundliPage() {
<Button variant="ghost" onClick={() => setEditing(false)} className="gap-2">
<X size={14} /> Cancel
</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} />}
Save Changes
</Button>
@@ -131,7 +131,7 @@ export default function StudentKundliPage() {
{data.profile_image_url ? (
<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)}
</div>
)}
@@ -203,7 +203,7 @@ export default function StudentKundliPage() {
{/* Stats Grid */}
<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: "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">
<CardHeader>
<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>
</CardHeader>
<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>
<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>
</div>
@@ -293,7 +293,7 @@ export default function StudentKundliPage() {
<Card className="border-border shadow-sm">
<CardHeader>
<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>
</CardHeader>
<CardContent>

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { Badge } from "@/components/ui/badge"
@@ -7,7 +7,7 @@ import { Search, Download, Flame, RefreshCw } from "lucide-react"
import { useRouter } from "next/navigation"
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",
"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() {
return (
@@ -31,7 +31,7 @@ export default function CancellationPolicyPage() {
<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>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>
<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>
<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">
<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>We are required to do so by law</li>
</ul>
<p>In such cases, fees paid are non-refundable.</p>
<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>
<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 { 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="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={() => 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={() => 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={() => 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-[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-[var(--cyan-ai)] hover:text-black transition-colors"><Edit3 size={14}/> Scratchpad</Button>
</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'}`}>

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
@@ -18,7 +18,7 @@ import { Suspense } from "react"
export default function CheckoutPage() {
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 />
</Suspense>
)
@@ -137,7 +137,7 @@ function CheckoutContent() {
address: address
},
theme: {
color: "#00F0FF"
color: "var(--cyan-ai)"
}
}
@@ -171,7 +171,7 @@ function CheckoutContent() {
if (userLoading || !userId) {
return (
<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>
)
}
@@ -179,12 +179,12 @@ function CheckoutContent() {
if (success) {
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">
<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">
<CheckCircle2 size={80} className="text-[#00F0FF] mx-auto mb-6" />
<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-[var(--cyan-ai)] mx-auto mb-6" />
<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>
<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>
</div>
</Card>
@@ -217,7 +217,7 @@ function CheckoutContent() {
onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))}
maxLength={10}
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 className="space-y-2">
@@ -227,7 +227,7 @@ function CheckoutContent() {
onChange={(e) => setAddress(e.target.value)}
placeholder="Complete address (House No, Street, City, State, PIN)"
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>
</CardContent>
@@ -239,7 +239,7 @@ function CheckoutContent() {
<div className="hidden md:block">
<h2 className="text-3xl font-black tracking-tight text-transparent select-none">Summary</h2>
</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">
<CardTitle>Order Summary</CardTitle>
</CardHeader>
@@ -255,7 +255,7 @@ function CheckoutContent() {
<div className="h-px w-full bg-border/50 my-4" />
<div className="flex justify-between items-center text-xl font-black">
<span>Total Amount</span>
<span className="text-[#00F0FF]">₹{amount.toLocaleString()}</span>
<span className="text-[var(--cyan-ai)]">₹{amount.toLocaleString()}</span>
</div>
{error && (
@@ -266,7 +266,7 @@ function CheckoutContent() {
</CardContent>
<CardFooter className="flex-col gap-4 bg-background/50 pt-4">
<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}
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 { Card, CardContent } from "@/components/ui/card"
@@ -114,7 +114,7 @@ export default function AIComCBTDPPPage() {
</Link>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-black uppercase tracking-widest text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-0.5 rounded-full border border-[#00F0FF]/30">
<span className="text-xs font-black uppercase tracking-widest text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2.5 py-0.5 rounded-full border border-[var(--cyan-ai-30)]">
PrepPilot AI
</span>
<span className="text-xs font-bold text-muted-foreground">• {user?.target_exam?.replace("_", " ") || "JEE/NEET"}</span>
@@ -124,14 +124,14 @@ export default function AIComCBTDPPPage() {
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[#00F0FF] shadow-inner">
<Clock size={18} className="text-[#00F0FF] animate-pulse" />
<div className="flex items-center gap-2 px-4 py-2 bg-background border border-border rounded-2xl font-mono text-lg font-bold text-[var(--cyan-ai)] shadow-inner">
<Clock size={18} className="text-[var(--cyan-ai)] animate-pulse" />
{formatTime(timeLeft)}
</div>
{!submitted ? (
<Button
onClick={() => setSubmitted(true)}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.2)]"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold px-6 rounded-xl shadow-[0_0_15px_rgba(12,96,96,0.2)]"
>
Submit Test <Send size={16} className="ml-2" />
</Button>
@@ -171,7 +171,7 @@ export default function AIComCBTDPPPage() {
<div className="lg:col-span-3">
<Card className="border-border bg-background/80 backdrop-blur-xl p-6 rounded-3xl shadow-xl space-y-6">
<div className="flex justify-between items-center border-b border-border pb-4">
<span className="text-sm font-bold text-[#00F0FF] uppercase tracking-wider">
<span className="text-sm font-bold text-[var(--cyan-ai)] uppercase tracking-wider">
Question {activeQuestion + 1} of {sampleQuestions.length}
</span>
<span className="text-xs font-bold bg-secondary px-3 py-1 rounded-full text-muted-foreground">
@@ -192,7 +192,7 @@ export default function AIComCBTDPPPage() {
let btnStyle = "border-border bg-secondary/20 hover:border-primary/50 text-foreground"
if (isSelected) {
btnStyle = "border-[#00F0FF] bg-[#00F0FF]/15 text-[#00F0FF] font-bold shadow-[0_0_12px_rgba(0,240,255,0.15)]"
btnStyle = "border-[var(--cyan-ai)] bg-[var(--cyan-ai)]/15 text-[var(--cyan-ai)] font-bold shadow-[0_0_12px_rgba(12,96,96,0.15)]"
}
if (submitted) {
if (isCorrect) btnStyle = "border-emerald-500 bg-emerald-500/20 text-emerald-400 font-bold"
@@ -216,7 +216,7 @@ export default function AIComCBTDPPPage() {
</div>
{submitted && (
<div className="mt-6 p-4 rounded-2xl bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-sm text-[#00F0FF] space-y-1 animate-in fade-in">
<div className="mt-6 p-4 rounded-2xl bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-sm text-[var(--cyan-ai)] space-y-1 animate-in fade-in">
<span className="font-extrabold uppercase text-xs tracking-wider block">AI Solution & Explanation:</span>
<p>{sampleQuestions[activeQuestion].explanation}</p>
</div>
@@ -236,7 +236,7 @@ export default function AIComCBTDPPPage() {
<Button
disabled={activeQuestion === sampleQuestions.length - 1}
onClick={() => setActiveQuestion(prev => Math.min(sampleQuestions.length - 1, prev + 1))}
className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl"
className="bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] font-bold rounded-xl"
>
Next Question <ArrowRight size={16} className="ml-2" />
</Button>
@@ -258,9 +258,9 @@ export default function AIComCBTDPPPage() {
onClick={() => setActiveQuestion(idx)}
className={`h-10 rounded-xl text-xs font-extrabold transition-all border ${
isCurr
? "border-[#00F0FF] bg-[#00F0FF] text-black ring-2 ring-[#00F0FF]/50"
? "border-[var(--cyan-ai)] bg-[var(--cyan-ai)] text-black ring-2 ring-[var(--cyan-ai-10)]"
: isAns
? "bg-[#00F0FF]/20 border-[#00F0FF]/40 text-[#00F0FF]"
? "bg-[var(--cyan-ai-20)] border-[var(--cyan-ai-40)] text-[var(--cyan-ai)]"
: "bg-secondary/40 border-border text-muted-foreground hover:border-primary"
}`}
>
@@ -272,10 +272,10 @@ export default function AIComCBTDPPPage() {
<div className="pt-4 border-t border-border space-y-2 text-xs font-semibold text-muted-foreground">
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]" /> Current Question
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai)]" /> Current Question
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-[#00F0FF]/20 border border-[#00F0FF]/40" /> Answered
<span className="w-3 h-3 rounded-md bg-[var(--cyan-ai-20)] border border-[var(--cyan-ai-40)]" /> Answered
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-md bg-secondary/40 border border-border" /> Unattempted

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -41,7 +41,7 @@ export default function ForgotPasswordPage() {
}
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">
<ArrowLeft size={16} /> Back to Login
</Link>
@@ -52,22 +52,22 @@ export default function ForgotPasswordPage() {
</div>
{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">
<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>
<p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed">
We've sent password reset instructions to <strong>{email}</strong>.
</p>
<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
</Button>
</Link>
</CardContent>
</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">
<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>
@@ -84,7 +84,7 @@ export default function ForgotPasswordPage() {
placeholder="student@example.com"
required
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>
@@ -95,7 +95,7 @@ export default function ForgotPasswordPage() {
</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"}
</Button>
</form>

18
src/app/globals.css
View File

@@ -44,6 +44,15 @@
--accent-foreground: #171717;
--muted: #f5f5f5;
--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 {
@@ -61,6 +70,15 @@
--accent-foreground: #0a0a0a;
--muted: #171717;
--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 {

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -66,7 +66,7 @@ export default function LoginPage() {
}
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">
<ArrowLeft size={16} /> Back to Home
</Link>
@@ -76,7 +76,7 @@ export default function LoginPage() {
<Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
</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">
<CardTitle className="text-2xl font-bold tracking-tight">Welcome back</CardTitle>
<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)}
placeholder="student@example.com"
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 className="space-y-2">
@@ -100,7 +100,7 @@ export default function LoginPage() {
<label className="text-sm font-bold text-foreground">
Password
</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 className="relative">
<input
@@ -109,7 +109,7 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
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
type="button"
@@ -128,7 +128,7 @@ export default function LoginPage() {
</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
</Button>
</form>

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

@@ -1,4 +1,4 @@
"use client";
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
@@ -51,7 +51,7 @@ export default function OnboardingPage() {
{/* Background glows */}
<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 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 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"
style={{
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")}
>
{/* 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
</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">
{/* Header */}
<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
</div>
<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>
</div>
<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">
{AI_COACH_FEATURES.map(({ icon: Icon, text }) => (
<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>
</li>
))}
@@ -204,7 +204,7 @@ export default function OnboardingPage() {
if (!selecting) handleSelect("Al_Coach");
}}
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" ? (
<>

62
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
@@ -48,7 +48,7 @@ export default function MarketingPage() {
{/* 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" 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) */}
<motion.div
@@ -57,7 +57,7 @@ export default function MarketingPage() {
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
/>
<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] }}
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]"
>
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.p
@@ -141,7 +141,7 @@ export default function MarketingPage() {
initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
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 */}
<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>
<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
</div>
<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
</Badge>
</div>
@@ -191,7 +191,7 @@ export default function MarketingPage() {
Prep Pilot AI
</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">
<Target size={17} className="text-[#00F0FF] shrink-0" />
<Target size={17} className="text-[var(--cyan-ai)] shrink-0" />
Exam Strategy
</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">
@@ -227,7 +227,7 @@ export default function MarketingPage() {
{/* Dashboard Grid Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
{/* 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">
<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>
@@ -247,15 +247,15 @@ export default function MarketingPage() {
</div>
{/* 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">
<h4 className="text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Rank Simulator</h4>
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] font-bold">NEET Target</Badge>
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--cyan-ai)]">Rank Simulator</h4>
<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 className="flex items-end justify-between">
<div>
<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 className="text-right">
<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) => (
<div
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}%` }}
></div>
))}
@@ -295,7 +295,7 @@ export default function MarketingPage() {
</Button>
</Link>
<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>
</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="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 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"><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>
<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"><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>
</div>
@@ -370,12 +370,12 @@ export default function MarketingPage() {
</motion.div>
<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">
<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} />
</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} />
</div>
<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"
>
<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>
<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">
<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-[#00F0FF]" /> 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-[#00F0FF]" /> Predictive Rank & College Predictor</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-[var(--cyan-ai)]" /> AI Spaced Repetition (Mistakes)</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-[var(--cyan-ai)]" /> Predictive Rank & College Predictor</li>
</ul>
<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>
</Card>
</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 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-[#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>
</thead>
<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">
{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 className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]">
{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>}
<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-[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>
</tr>
))}

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

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
@@ -73,20 +73,20 @@ export default function UpgradePage() {
{/* 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">
<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>
<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 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 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-[#00F0FF] 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-[#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}/> Everything in Pro</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-[var(--cyan-ai)] 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}/> Predictive Rank & College Predictor</li>
</ul>
</div>
<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")}
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 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-[#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>
</thead>
<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">
{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 className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]">
{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>}
<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-[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>
</tr>
))}