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

Fix StreakCounter animation, PeriodicTable image, and add Feature Comparison matrix

Browse Source
This commit is contained in:
ectasy663
2026-07-08 14:52:24 +05:30
parent 66e6fc8d3f
commit ffcd7081e2
6 changed files with 1450 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app/page.tsx
View File

@@ -3,7 +3,7 @@
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { BrainCircuit, Activity, Zap, CheckCircle2, Shield, ArrowRight, Play, BookOpen, LineChart, Trophy, Sparkles, MessageSquare } from "lucide-react"
import { BrainCircuit, Activity, Zap, CheckCircle2, Shield, ArrowRight, Play, BookOpen, LineChart, Trophy, Sparkles, MessageSquare, X, Minus } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion, useScroll, useTransform, Variants } from "framer-motion"
@@ -488,6 +488,66 @@ export default function MarketingPage() {
</motion.div>
</div>
</section>
{/* Tier Comparison Matrix */}
<section className="py-24 px-6 max-w-5xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-bold tracking-tighter mb-4">Compare Features</h2>
<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">
<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>
</tr>
</thead>
<tbody className="divide-y divide-border/30 text-sm md:text-base">
{[
{ name: "Daily Practice Sheets", free: "1/day", pro: "Unlimited", ai: "Unlimited" },
{ name: "Answer Keys", free: true, pro: true, ai: true },
{ name: "Basic Progress Dashboard", free: true, pro: true, ai: true },
{ name: "Streak Tracking", free: true, pro: true, ai: true },
{ name: "Leaderboard (City/School)", free: true, pro: true, ai: true },
{ name: "Topic-wise Micro-tests", free: "5/day", pro: "Unlimited", ai: "Unlimited" },
{ name: "Weekly Test Series", free: false, pro: true, ai: true },
{ name: "Full-Length Mock Tests", free: false, pro: "4/month", ai: "Unlimited" },
{ name: "Previous Year Papers", free: false, pro: true, ai: true },
{ name: "Detailed Performance Analytics", free: false, pro: true, ai: true },
{ name: "Chapter-wise Progress", free: false, pro: true, ai: true },
{ name: "Doubt Resolution (Community)", free: false, pro: true, ai: true },
{ name: "Parent Dashboard", free: false, pro: true, ai: true },
{ name: "Offline Mode (Download DPS)", free: false, pro: true, ai: true },
{ name: "AI Mistake Tracking", free: false, pro: false, ai: true },
{ name: "Spaced Repetition", free: false, pro: false, ai: true },
{ name: "Personalized Daily Study Plan", free: false, pro: false, ai: true },
{ name: "AI Tutor Chat", free: false, pro: false, ai: true },
{ name: "Exam Readiness Score", free: false, pro: false, ai: true },
{ name: "Exam Day Strategy", free: false, pro: false, ai: true },
{ name: "College Predictor", free: false, pro: false, ai: true },
{ 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>
<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>
<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>
</tr>
))}
</tbody>
</table>
</div>
</section>
</main>
{/* Global Footer (Static) */}