feat: complete premium NEET/JEE platform with admin, student dashboards, and upgraded branding
This commit is contained in:
582
src/app/page.tsx
582
src/app/page.tsx
@@ -1,65 +1,531 @@
|
||||
import Image from "next/image";
|
||||
"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 } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { motion, useScroll, useTransform, Variants } from "framer-motion"
|
||||
import { useRef } from "react"
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
<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
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<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</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<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 simulator 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>
|
||||
<Link href="/signup">
|
||||
<Button size="lg" variant="outline" className="rounded-full h-14 px-8 text-base border-border bg-background/50 backdrop-blur-sm w-full sm:w-auto hover:bg-secondary/50 transition-colors group">
|
||||
<Play className="mr-2 group-hover:scale-110 transition-transform text-[#00F0FF]" size={18} fill="currentColor" /> Watch Demo
|
||||
</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.ai/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-2">
|
||||
<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">
|
||||
<LineChart size={18} />
|
||||
Analytics
|
||||
</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">
|
||||
<Trophy size={18} />
|
||||
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, Demo Student</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 Pro 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 */}
|
||||
<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">
|
||||
{/* First Set */}
|
||||
<div className="flex-1 flex justify-around items-center px-4">
|
||||
<div className="flex items-center gap-3 font-bold text-xl tracking-tight"><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"><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"><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"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
|
||||
</div>
|
||||
{/* Duplicate Set for seamless scroll */}
|
||||
<div className="flex-1 flex justify-around items-center px-4">
|
||||
<div className="flex items-center gap-3 font-bold text-xl tracking-tight"><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"><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"><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"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
<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-10 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">Basic</h3>
|
||||
<p className="text-muted-foreground mb-8 text-lg">Perfect for self-paced revision.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10">₹999<span className="text-xl text-muted-foreground font-medium">/mo</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" /> 10 Full Syllabus CBTs</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Standard Question Bank</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Basic Analytics</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/50">Choose Basic</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, type: "spring", delay: 0.1 }}
|
||||
className="relative"
|
||||
>
|
||||
<Card className="bg-secondary/30 backdrop-blur-xl border-primary p-10 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 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 className="absolute top-0 right-10 transform -translate-y-1/2 z-20">
|
||||
<Badge className="bg-primary text-primary-foreground font-bold px-5 py-2 text-sm rounded-full shadow-[0_0_15px_-2px_var(--color-primary)]">MOST POPULAR</Badge>
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col h-full">
|
||||
<h3 className="text-3xl font-bold mb-2">AI Pro</h3>
|
||||
<p className="text-muted-foreground mb-8 text-lg">The complete AI-driven preparation system.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-10 text-primary drop-shadow-[0_0_10px_var(--color-primary)]">₹2499<span className="text-xl text-foreground font-medium">/mo</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]" /> Unlimited Dynamic CBTs</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Adaptive AI DPPs</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Interactive AI Tutor (24/7)</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank Analytics</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 Pro</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</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="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||||
<div className="md:col-span-1 space-y-4">
|
||||
<div className="relative h-16 w-64 mb-6">
|
||||
<Image
|
||||
src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
|
||||
alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground font-medium leading-relaxed">
|
||||
Re-engineering NEET & JEE preparation with adaptive AI models. Learn faster, rank higher.
|
||||
</p>
|
||||
<div className="flex items-center gap-4 pt-2">
|
||||
<Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-6 tracking-tight text-foreground">Product</h4>
|
||||
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
|
||||
<li><Link href="#features" className="hover:text-primary transition-colors">Features</Link></li>
|
||||
<li><Link href="#pricing" className="hover:text-primary transition-colors">Pricing</Link></li>
|
||||
<li><Link href="/dashboard" className="hover:text-primary transition-colors">Student Dashboard</Link></li>
|
||||
<li><Link href="/admin" className="hover:text-[#00F0FF] transition-colors">Admin Panel</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-6 tracking-tight text-foreground">Company</h4>
|
||||
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
|
||||
<li><Link href="/about" className="hover:text-primary transition-colors">About Us</Link></li>
|
||||
<li><Link href="/contact" className="hover:text-primary transition-colors">Contact</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Careers</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold mb-6 tracking-tight text-foreground">Legal</h4>
|
||||
<ul className="space-y-3 text-sm font-medium text-muted-foreground">
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Privacy Policy</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Terms of Service</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-muted-foreground font-medium">© {new Date().getFullYear()} PragatiVeer. All rights reserved.</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground font-medium">
|
||||
Made with <div className="size-2 rounded-full bg-primary animate-pulse"></div> by AI Agents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user