Fix StreakCounter animation, PeriodicTable image, and add Feature Comparison matrix
This commit is contained in:
BIN
backend/pragativeer-prd.pdf
Normal file
BIN
backend/pragativeer-prd.pdf
Normal file
Binary file not shown.
BIN
prd_dump.txt
Normal file
BIN
prd_dump.txt
Normal file
Binary file not shown.
1385
prd_dump_utf8.txt
Normal file
1385
prd_dump_utf8.txt
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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) */}
|
||||
|
||||
@@ -25,13 +25,10 @@ export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
|
||||
</div>
|
||||
<div className="flex-1 bg-white p-4 flex items-center justify-center overflow-auto">
|
||||
<div className="relative min-w-[1000px] w-full h-full flex items-center justify-center">
|
||||
<Image
|
||||
src="https://sciencenotes.org/wp-content/uploads/2021/01/PeriodicTable2021-Color.png"
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Periodic_table_large.svg/1920px-Periodic_table_large.svg.png"
|
||||
alt="Periodic Table"
|
||||
width={1920}
|
||||
height={1080}
|
||||
className="object-contain w-full h-full"
|
||||
unoptimized
|
||||
className="object-contain w-full h-full max-h-[90vh]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@ export function StreakCounter({ streak }: StreakCounterProps) {
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0, y: -10 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
whileHover={{ scale: 1.1, rotate: [0, -5, 5, -5, 0] }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-500 font-bold shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)] cursor-default"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user