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

UI/UX Polishing: CBT dashboard, sidebar tiers, landing pricing, and exam disclaimer

Browse Source
This commit is contained in:
ectasy663
2026-07-09 17:05:40 +05:30
parent b80d73ec26
commit 22b167b985
15 changed files with 481 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,43 +105,42 @@ export default function UpgradePage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
{/* Free Tier */}
<Card className="border-border">
<Card className="bg-background/80 backdrop-blur-md border-white p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
<CardHeader>
<CardTitle className="text-2xl">Free</CardTitle>
<CardDescription>Basic access for everyone.</CardDescription>
<div className="mt-4 font-black text-4xl">₹0<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹10<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Subject-wise diagnostics</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Basic progress tracking</div>
<div className="flex items-center gap-3"><Check className="text-white" size={18}/> Subject-wise diagnostics</div>
<div className="flex items-center gap-3"><Check className="text-white" size={18}/> Basic progress tracking</div>
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Tests</div>
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> AI Spaced Repetition</div>
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Parent Analytics</div>
</CardContent>
<CardFooter>
<Button variant="outline" className="w-full" disabled>Current Plan</Button>
<Button variant="outline" className="w-full rounded-2xl h-16 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white" disabled>Current Plan</Button>
</CardFooter>
</Card>
{/* Pro Tier */}
<Card className="border-border border-primary shadow-lg shadow-primary/10 relative">
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-primary text-primary-foreground px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase">Most Popular</div>
<Card className="bg-background/80 backdrop-blur-md border-yellow-500 p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
<CardHeader>
<CardTitle className="text-2xl text-primary">Pro</CardTitle>
<CardTitle className="text-2xl text-yellow-500">Pro</CardTitle>
<CardDescription>For serious aspirants.</CardDescription>
<div className="mt-4 font-black text-4xl">₹299<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹1299<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Everything in Free</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Unlimited Sectional Tests</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Performance Analytics</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Parent Dashboard</div>
<div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Everything in Free</div>
<div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Unlimited Sectional Tests</div>
<div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Performance Analytics</div>
<div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Parent Dashboard</div>
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> AI Mistake Heatmap</div>
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Spaced Repetition (SM-2)</div>
</CardContent>
<CardFooter>
<Button
className="w-full"
className="w-full bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-lg rounded-2xl h-16"
onClick={() => handleUpgrade("Pro")}
disabled={!!loadingTier}
>
@@ -151,23 +150,22 @@ export default function UpgradePage() {
</Card>
{/* AI Coach Tier */}
<Card className="border-border bg-gradient-to-b from-primary/10 to-background border-primary">
<Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-8 rounded-[2.5rem] flex flex-col transition-all h-full relative">
<CardHeader>
<CardTitle className="text-2xl flex items-center gap-2">AI Coach <ShieldCheck size={24} className="text-primary"/></CardTitle>
<CardTitle className="text-2xl flex items-center gap-2 text-[#00F0FF]">AI Coach <ShieldCheck size={24} className="text-[#00F0FF]"/></CardTitle>
<CardDescription>Personalized mastery loop.</CardDescription>
<div className="mt-4 font-black text-4xl">₹599<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹1599<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Everything in Pro</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Daily AI Error Review Queue</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> SM-2 Spaced Repetition</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> Mistake Heatmap Tracking</div>
<div className="flex items-center gap-3"><Check className="text-green-500" size={18}/> AI Chat Tutor Support</div>
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Everything in Pro</div>
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Daily AI Error Review Queue</div>
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> SM-2 Spaced Repetition</div>
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Mistake Heatmap Tracking</div>
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> AI Chat Tutor Support</div>
</CardContent>
<CardFooter>
<Button
className="w-full font-bold"
size="lg"
className="w-full font-bold text-lg rounded-2xl h-16 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all"
onClick={() => handleUpgrade("Al_Coach")}
disabled={!!loadingTier}
>