594 lines
38 KiB
TypeScript
594 lines
38 KiB
TypeScript
"use client"
|
|
|
|
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, X, Minus, Target, Calendar } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { motion, useScroll, useTransform, Variants } from "framer-motion"
|
|
import { useRef, useEffect } from "react"
|
|
import { ThemeToggle } from "@/components/ThemeToggle"
|
|
|
|
export default function MarketingPage() {
|
|
|
|
|
|
const containerRef = useRef(null)
|
|
const { scrollYProgress } = useScroll({
|
|
target: containerRef,
|
|
offset: ["start start", "end start"]
|
|
})
|
|
|
|
// Slower background parallax
|
|
const yBg = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])
|
|
|
|
// Stagger variants for the features
|
|
const containerVariants: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2
|
|
}
|
|
}
|
|
}
|
|
|
|
const itemVariants: Variants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { type: "spring", stiffness: 100, damping: 12 }
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div ref={containerRef} className="min-h-screen bg-background text-foreground overflow-x-hidden selection:bg-primary/20 relative">
|
|
|
|
{/* 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>
|
|
|
|
{/* Floating Orbs (Using Framer Motion) */}
|
|
<motion.div
|
|
className="fixed top-1/4 left-1/4 size-[400px] rounded-full bg-primary/20 blur-[120px] pointer-events-none mix-blend-screen -z-10"
|
|
animate={{ x: [0, 50, -20, 0], y: [0, -30, 40, 0] }}
|
|
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"
|
|
animate={{ x: [0, -60, 30, 0], y: [0, 40, -50, 0] }}
|
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 bg-background/50 backdrop-blur-xl border-b border-border/50">
|
|
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<Link href="/" className="relative h-14 w-60 hover:opacity-90 transition-opacity block">
|
|
<Image
|
|
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
|
|
alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden" priority
|
|
/>
|
|
<Image
|
|
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
|
|
alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block" priority
|
|
/>
|
|
</Link>
|
|
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-muted-foreground">
|
|
<Link href="#features" className="hover:text-foreground transition-colors">Features</Link>
|
|
<Link href="#pricing" className="hover:text-foreground transition-colors">Pricing</Link>
|
|
<Link href="/about" className="hover:text-foreground transition-colors">About Us</Link>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<ThemeToggle />
|
|
<Link href="/login" className="text-sm font-bold hover:text-primary transition-colors hidden sm:block">Log in</Link>
|
|
<Link href="/signup">
|
|
<Button className="rounded-full font-bold px-6 shadow-[0_0_15px_-5px_var(--color-primary)] hover:shadow-[0_0_25px_-5px_var(--color-primary)] transition-all">Get Started</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="relative z-10 pt-32 pb-24">
|
|
{/* Hero Section */}
|
|
<section className="px-6 max-w-7xl mx-auto text-center space-y-8 pt-12 pb-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Badge variant="outline" className="border-primary/50 text-primary bg-primary/10 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase shadow-[0_0_15px_-5px_var(--color-primary)] mb-6">
|
|
The Next Evolution of Prep
|
|
</Badge>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, type: "spring" }}
|
|
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>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed font-medium"
|
|
>
|
|
Experience the most accurate CBT Exam Engine combined with adaptive DPPs generated specifically for your weak areas in real-time.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8"
|
|
>
|
|
<Link href="/signup">
|
|
<Button size="lg" className="group rounded-full h-14 px-8 text-base font-bold shadow-[0_0_40px_-10px_var(--color-primary)] hover:shadow-[0_0_60px_-10px_var(--color-primary)] transition-all w-full sm:w-auto relative overflow-hidden">
|
|
<span className="relative z-10 flex items-center">Start Free Trial <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={18} /></span>
|
|
<div className="absolute inset-0 -translate-x-full animate-shine bg-gradient-to-r from-transparent via-white/20 to-transparent z-0"></div>
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
{/* Dashboard Preview Mockup */}
|
|
<motion.div
|
|
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"
|
|
>
|
|
{/* Top Window Chrome Bar */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-background/50">
|
|
<div className="flex items-center gap-2">
|
|
<div className="size-3 rounded-full bg-red-500/80"></div>
|
|
<div className="size-3 rounded-full bg-yellow-500/80"></div>
|
|
<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>
|
|
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">
|
|
AI Active
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dashboard Inner Screen */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 min-h-[480px]">
|
|
{/* Mock Sidebar */}
|
|
<div className="md:col-span-1 border-r border-border/50 p-6 space-y-6 hidden md:block bg-background/20">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-primary/10 text-primary border border-primary/20 text-sm font-semibold">
|
|
<Activity size={18} />
|
|
Overview
|
|
</div>
|
|
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
|
|
<Play size={18} className="text-muted-foreground" />
|
|
Exams (CBT)
|
|
</div>
|
|
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
|
|
<BrainCircuit size={18} />
|
|
Daily Practice
|
|
</div>
|
|
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
|
|
<BookOpen size={18} />
|
|
Study Materials
|
|
</div>
|
|
</div>
|
|
<div className="pt-6 border-t border-border/50">
|
|
<p className="px-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-3">AI Intelligence</p>
|
|
<div className="space-y-1.5">
|
|
<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">
|
|
<Zap size={17} className="text-yellow-500 shrink-0" />
|
|
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" />
|
|
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">
|
|
<Calendar size={17} className="text-primary shrink-0" />
|
|
AI Study Plan
|
|
</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">
|
|
<LineChart size={17} className="shrink-0" />
|
|
Analytics
|
|
</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">
|
|
<Trophy size={17} className="shrink-0" />
|
|
Rank Predictor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mock Main Content Area */}
|
|
<div className="md:col-span-3 p-6 md:p-8 space-y-6 text-left">
|
|
{/* Greeting & Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold tracking-tight">Welcome, Neha Verma</h3>
|
|
<p className="text-xs text-muted-foreground font-medium mt-1">Your adaptive NEET path is optimized. Next review in 2 hours.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-secondary/30 border border-border/50 px-3 py-1.5 rounded-xl text-xs font-semibold">
|
|
<span className="size-2 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></span>
|
|
Subscription: <span className="text-primary font-bold ml-1">AI Coach Plan</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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="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>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm font-bold">
|
|
<span>Rotational Dynamics</span>
|
|
<span className="text-primary">42% Mastery</span>
|
|
</div>
|
|
<div className="h-2 bg-secondary rounded-full overflow-hidden">
|
|
<div className="h-full bg-primary rounded-full w-[42%] shadow-[0_0_10px_var(--color-primary)]"></div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground leading-relaxed">
|
|
<strong className="text-foreground font-semibold">AI recommendation:</strong> Solve 5 intermediate DPP questions on Moment of Inertia to unlock the next level and boost your expected score.
|
|
</p>
|
|
</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="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>
|
|
</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>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-[10px] font-bold text-muted-foreground uppercase">Expected Score</p>
|
|
<p className="text-xl font-bold tracking-tight text-foreground">685 <span className="text-xs font-medium text-muted-foreground">/ 720</span></p>
|
|
</div>
|
|
</div>
|
|
{/* Mini Sparkline Chart representation */}
|
|
<div className="flex items-center gap-1 h-8 pt-2">
|
|
{[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"
|
|
style={{ height: `${val}%` }}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Tutor Consultation Interface */}
|
|
<div className="bg-secondary/20 border border-border/40 rounded-2xl p-5 flex gap-4 items-start relative overflow-hidden">
|
|
<div className="size-10 rounded-xl bg-primary text-primary-foreground flex items-center justify-center font-bold text-sm shadow-[0_0_15px_-3px_var(--color-primary)] shrink-0 mt-1">
|
|
<Sparkles size={20} className="animate-pulse" />
|
|
</div>
|
|
<div className="space-y-3 text-left w-full">
|
|
<div className="flex items-center justify-between w-full">
|
|
<h4 className="text-sm font-bold text-foreground">AI Tutor Agent</h4>
|
|
<span className="text-[10px] font-mono text-muted-foreground">Response generated instantly</span>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground leading-relaxed max-w-xl">
|
|
"I have analyzed your last CBT physics test. You excelled in Mechanics but hesitated on electromagnetic induction questions, spending an average of 42 seconds longer per problem. I have generated a custom 10-question DPP focusing exclusively on induction. Let's tackle it now."
|
|
</div>
|
|
<div className="flex items-center gap-2 pt-1">
|
|
<Link href="/dashboard/dpp">
|
|
<Button size="sm" className="h-8 rounded-lg px-4 text-xs font-bold">
|
|
Start Custom DPP
|
|
</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
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Infinite Trust Bar (commented out)
|
|
<section className="mt-32 border-y border-border/50 bg-secondary/10 backdrop-blur-sm overflow-hidden py-8 relative">
|
|
<div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10"></div>
|
|
<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"><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"><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"><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"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
*/}
|
|
|
|
{/* Elegant Section Divider */}
|
|
<div className="w-full max-w-5xl mx-auto h-px bg-gradient-to-r from-transparent via-border/60 to-transparent mt-20 relative">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-2 bg-primary/10 blur-md rounded-full pointer-events-none"></div>
|
|
</div>
|
|
|
|
{/* Animated DPP Engine Section */}
|
|
<section id="features" className="py-32 px-6 max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl md:text-6xl font-bold tracking-tighter mb-6">Adaptive Engine</h2>
|
|
<p className="text-muted-foreground text-xl max-w-2xl mx-auto">Our AI analyzes every keystroke and hesitation to generate the exact problems you need to solve next.</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
>
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="bg-secondary/10 backdrop-blur-xl border-border/50 hover:border-primary/50 transition-all duration-300 rounded-[2rem] h-full shadow-lg 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">
|
|
<Activity size={120} />
|
|
</div>
|
|
<div className="size-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--color-primary)]">
|
|
<Activity size={28} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 tracking-tight">Real-time Analysis</h3>
|
|
<p className="text-muted-foreground leading-relaxed text-lg">
|
|
Every test attempt updates your knowledge graph instantly, identifying micro-concepts where you struggle.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</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">
|
|
<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]">
|
|
<BrainCircuit size={28} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 tracking-tight">Dynamic Generation</h3>
|
|
<p className="text-muted-foreground leading-relaxed text-lg">
|
|
Custom problems are generated on the fly, matching the exact difficulty and NTA pattern required for growth.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
<motion.div variants={itemVariants}>
|
|
<Card className="bg-secondary/10 backdrop-blur-xl border-border/50 hover:border-primary/50 transition-all duration-300 rounded-[2rem] h-full shadow-lg 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">
|
|
<Zap size={120} />
|
|
</div>
|
|
<div className="size-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--color-primary)]">
|
|
<Zap size={28} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 tracking-tight">Instant Resolution</h3>
|
|
<p className="text-muted-foreground leading-relaxed text-lg">
|
|
Get interactive, step-by-step AI breakdowns for every wrong answer. Ask follow-up questions until you master it.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Animated Pricing */}
|
|
<section id="pricing" className="py-24 px-6 max-w-7xl mx-auto relative">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[600px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10"></div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl md:text-6xl font-bold tracking-tighter mb-6">Simple, Transparent Pricing</h2>
|
|
<p className="text-muted-foreground text-xl max-w-2xl mx-auto">Unlock the ultimate unfair advantage for your NEET/JEE preparation.</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-4xl mx-auto items-stretch">
|
|
{/* Free Plan
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, type: "spring" }}
|
|
>
|
|
<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">Free</h3>
|
|
<p className="text-muted-foreground mb-6 text-base">Perfect to get started.</p>
|
|
<div className="text-6xl font-bold tracking-tighter mb-6">₹0<span className="text-xl text-white/60 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-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-12 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white">Get Started Free</Button>
|
|
</Link>
|
|
</Card>
|
|
</motion.div>
|
|
*/}
|
|
|
|
{/* Pro Plan */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, type: "spring", delay: 0.1 }}
|
|
>
|
|
<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-yellow-500">Pro</h3>
|
|
<p className="text-muted-foreground mb-6 text-base">Perfect for self-paced practice.</p>
|
|
<div className="text-6xl font-bold tracking-tighter mb-6 text-yellow-500">₹3,499<span className="text-xl text-yellow-500/60 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-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 size="lg" className="w-full rounded-2xl h-12 bg-yellow-500 text-black font-bold text-lg hover:bg-yellow-400">Get 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"
|
|
>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</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>
|
|
</Link>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
<p className="text-center mt-8 text-sm text-muted-foreground font-medium w-full">
|
|
* All above prices are inclusive of GST.
|
|
</p>
|
|
</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 p-3 md:p-6">
|
|
<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-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>
|
|
</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 border-y border-l 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 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>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{/* Global Footer (Static) */}
|
|
<footer className="relative z-10 bg-background/90 backdrop-blur-md border-t border-border pt-16 pb-8">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="flex flex-col items-center max-w-2xl mx-auto mb-16 space-y-6">
|
|
<div className="relative h-24 w-[28rem] mb-2">
|
|
<Image
|
|
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
|
|
alt="PragatiVeer" fill className="object-contain dark:hidden"
|
|
/>
|
|
<Image
|
|
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
|
|
alt="PragatiVeer" fill className="object-contain hidden dark:block"
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground font-medium leading-relaxed text-center w-full">
|
|
PragatiVeer is India's AI-powered daily practice platform for JEE and NEET aspirants. It is a product of Gyannetra Pvt Ltd.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<p className="text-sm text-muted-foreground font-medium">© {new Date().getFullYear()} PragatiVeer. All rights reserved.</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground font-medium">
|
|
<Link href="/terms" className="hover:text-primary transition-colors">Terms & Conditions</Link>
|
|
<Link href="/privacy" className="hover:text-primary transition-colors">Privacy Policy</Link>
|
|
<Link href="/refund" className="hover:text-primary transition-colors">Refund Policy</Link>
|
|
<Link href="/cancellation" className="hover:text-primary transition-colors">Cancellation Policy</Link>
|
|
<Link href="/disclaimer" className="hover:text-primary transition-colors">Disclaimer</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|