UI/UX Polishing: CBT dashboard, sidebar tiers, landing pricing, and exam disclaimer
This commit is contained in:
@@ -422,12 +422,12 @@ export default function MarketingPage() {
|
||||
<p className="text-muted-foreground mb-8 text-lg">Perfect to get started.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10">₹0<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
|
||||
<ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> 1 Daily Practice Sheet</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Basic Performance Analytics</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Community Access</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> 1 Daily Practice Sheet</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> Basic Performance Analytics</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-white" /> Community Access</li>
|
||||
</ul>
|
||||
<Link href="/signup">
|
||||
<Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Get Started Free</Button>
|
||||
<Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white">Get Started Free</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
</motion.div>
|
||||
@@ -442,47 +442,44 @@ export default function MarketingPage() {
|
||||
<Card className="bg-background/80 backdrop-blur-md border-border p-8 rounded-[2.5rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
|
||||
<h3 className="text-3xl font-bold mb-2">Pro</h3>
|
||||
<p className="text-muted-foreground mb-8 text-lg">Perfect for self-paced practice.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10">₹2,499<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10">₹12,499<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
|
||||
<ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Unlimited Daily Practice Sheets</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Weekly Test Series & Mock Tests</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Detailed Performance Analytics</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Parent Dashboard Access</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Unlimited Daily Practice Sheets</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Weekly Test Series & Mock Tests</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Detailed Performance Analytics</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-yellow-500" /> Parent Dashboard Access</li>
|
||||
</ul>
|
||||
<Link href="/signup">
|
||||
<Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Choose Pro</Button>
|
||||
<Button size="lg" className="w-full rounded-2xl h-16 bg-yellow-500 text-black font-bold text-lg hover:bg-yellow-400">Choose Pro</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* AI Coach Plan */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
|
||||
className="relative mt-8 lg:mt-0"
|
||||
>
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 z-20">
|
||||
<Badge className="bg-primary text-primary-foreground font-extrabold px-6 py-2 text-sm rounded-full shadow-[0_0_20px_-2px_var(--color-primary)]">MOST POPULAR</Badge>
|
||||
</div>
|
||||
<Card className="bg-secondary/30 backdrop-blur-xl border-primary p-8 rounded-[2.5rem] flex flex-col shadow-[0_0_60px_-15px_var(--color-primary)] hover:shadow-[0_0_80px_-15px_var(--color-primary)] transition-all h-full relative">
|
||||
<div className="absolute inset-0 rounded-[2.5rem] overflow-hidden">
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
|
||||
className="relative mt-8 lg:mt-0"
|
||||
>
|
||||
<Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-8 rounded-[2.5rem] flex flex-col transition-all h-full relative">
|
||||
<div className="absolute inset-0 rounded-[2.5rem] overflow-hidden">
|
||||
<div className="absolute inset-0 -translate-x-full animate-shine bg-gradient-to-r from-transparent via-white/10 to-transparent z-0 pointer-events-none"></div>
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col h-full mt-4">
|
||||
<h3 className="text-3xl font-bold mb-2">AI Coach</h3>
|
||||
<p className="text-muted-foreground mb-8 text-lg">The complete AI-driven system.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10 text-primary drop-shadow-[0_0_10px_var(--color-primary)]">₹4,999<span className="text-xl text-foreground font-medium">/yr</span></div>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10 text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]">₹4,999<span className="text-xl text-foreground font-medium">/yr</span></div>
|
||||
<ul className="space-y-5 mb-10 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>
|
||||
</ul>
|
||||
<Link href="/signup">
|
||||
<Button size="lg" className="w-full rounded-2xl h-16 font-bold text-lg bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_0_20px_-5px_var(--color-primary)] transition-all">Get AI Coach</Button>
|
||||
</Link>
|
||||
<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>
|
||||
</ul>
|
||||
<Link href="/signup">
|
||||
<Button size="lg" className="w-full rounded-2xl h-16 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all">Get AI Coach</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
@@ -496,14 +493,14 @@ export default function MarketingPage() {
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">See exactly what you get with each PragatiVeer plan.</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm shadow-xl">
|
||||
<div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm">
|
||||
<table className="w-full text-left border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr className="border-b border-border/50 bg-background/50">
|
||||
<th className="p-4 md:p-6 font-bold text-lg w-2/5">Feature</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5">Free</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-primary drop-shadow-[0_0_5px_var(--color-primary)]">Pro</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] drop-shadow-[0_0_5px_rgba(0,240,255,0.5)]">AI Coach</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-white">Free</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-yellow-500 border-x border-yellow-500">Pro</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] border-x border-[#00F0FF]">AI Coach</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/30 text-sm md:text-base">
|
||||
@@ -532,15 +529,15 @@ export default function MarketingPage() {
|
||||
{ name: "Study Time Optimization", free: false, pro: false, ai: true },
|
||||
].map((feature, idx) => (
|
||||
<tr key={idx} className="hover:bg-background/40 transition-colors">
|
||||
<td className="p-4 md:p-6 font-medium">{feature.name}</td>
|
||||
<td className="p-4 md:p-6 text-center text-muted-foreground">
|
||||
{typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-muted-foreground" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold">{feature.free}</span>}
|
||||
<td className="p-4 md:p-6 font-medium border-y border-border/30">{feature.name}</td>
|
||||
<td className="p-4 md:p-6 text-center text-muted-foreground border border-white">
|
||||
{typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-white" size={20} /> : <Minus className="mx-auto text-white/30" size={20} />) : <span className="font-semibold text-white">{feature.free}</span>}
|
||||
</td>
|
||||
<td className="p-4 md:p-6 text-center">
|
||||
{typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-primary" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-primary">{feature.pro}</span>}
|
||||
<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">
|
||||
{typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
|
||||
<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>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user