Upload 2 files

Landing.jsx

@@ -0,0 +1,553 @@
+import Navbar from '../components/Navbar'
+import AnimatedBackground from '../components/AnimatedBackground'
+import { motion } from 'framer-motion'
+import { useMemo, useRef } from 'react'
+import { Link } from 'react-router-dom'
+import { 
+  AcademicCapIcon,
+  BriefcaseIcon,
+  CommandLineIcon,
+  DocumentTextIcon,
+  SparklesIcon,
+  ChatBubbleLeftRightIcon,
+  ArrowRightIcon,
+  GlobeAltIcon,
+  PresentationChartBarIcon,
+} from '@heroicons/react/24/outline'
+import Footer from '../components/Footer'
+import TestimonialsCarousel from '../components/TestimonialsCarousel'
+import { useTheme } from '../theme/ThemeContext'
+
+const fadeUp = (d=0) => ({ initial:{opacity:0,y:24}, whileInView:{opacity:1,y:0}, viewport:{once:true, amount:.3}, transition:{duration:.6, delay:d} })
+const containerStagger = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: { staggerChildren: 0.08 } }
+}
+const itemMotion = {
+  hidden: { opacity: 0, y: 18, scale: .98 },
+  show: { opacity: 1, y: 0, scale: 1, transition: { duration: .5 } }
+}
+
+export default function Landing(){
+  const { theme } = useTheme() || { theme: { imagery: 'abstract', anim: 'medium', parallax: 'medium' } }
+  const animScale = theme.anim === 'strong' ? 1.06 : theme.anim === 'medium' ? 1.02 : 1.005
+  const isTouch = typeof window !== 'undefined' && matchMedia('(pointer:coarse)').matches
+  const baseParallax = theme.parallax === 'strong' ? 8 : theme.parallax === 'medium' ? 6 : 3
+  const parallaxFactor = isTouch ? Math.max(2, baseParallax - 4) : baseParallax
+
+  const images = useMemo(() => {
+    const sets = {
+      abstract: {
+        hero: 'https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1600&auto=format&fit=crop',
+        jobs: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=1600&auto=format&fit=crop',
+        roadmaps: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1600&auto=format&fit=crop',
+        resume: 'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=1600&auto=format&fit=crop',
+        mock: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1600&auto=format&fit=crop',
+        insights: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1600&auto=format&fit=crop',
+      },
+      illustrations: {
+        hero: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=1600&auto=format&fit=crop',
+        jobs: 'https://images.unsplash.com/photo-1611162618479-7d7a39e9be50?q=80&w=1600&auto=format&fit=crop',
+        roadmaps: 'https://images.unsplash.com/photo-1545239351-1141bd82e8a6?q=80&w=1600&auto=format&fit=crop',
+        resume: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=1600&auto=format&fit=crop',
+        mock: 'https://images.unsplash.com/photo-1516557070061-c3d1653fa646?q=80&w=1600&auto=format&fit=crop',
+        insights: 'https://images.unsplash.com/photo-1520975922203-b5a9cb27689a?q=80&w=1600&auto=format&fit=crop',
+      },
+      photos: {
+        hero: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1600&auto=format&fit=crop',
+        jobs: 'https://images.unsplash.com/photo-1497493292307-31c376b6e479?q=80&w=1600&auto=format&fit=crop',
+        roadmaps: 'https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?q=80&w=1600&auto=format&fit=crop',
+        resume: 'https://images.unsplash.com/photo-1529101091764-c3526daf38fe?q=80&w=1600&auto=format&fit=crop',
+        mock: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop',
+        insights: 'https://images.unsplash.com/photo-1534759846116-5791a4b5528c?q=80&w=1600&auto=format&fit=crop',
+      }
+    }
+    return sets[theme.imagery] || sets.abstract
+  }, [theme.imagery])
+  const heroTiltRef = useRef(null)
+  const onHeroMouseMove = (e) => {
+    const el = heroTiltRef.current
+    if(!el) return
+    const rect = el.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    const rx = ((y / rect.height) - 0.5) * (-parallaxFactor) // tilt X
+    const ry = ((x / rect.width) - 0.5) * parallaxFactor  // tilt Y
+    el.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`
+  }
+  const onHeroMouseLeave = () => {
+    const el = heroTiltRef.current
+    if(!el) return
+    el.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0)'
+  }
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+      <AnimatedBackground />
+      {/* Subtle background image for hero depth */}
+      <img
+        src="https://images.unsplash.com/photo-1543286386-2e659306cd6c?q=80&w=1920&auto=format&fit=crop"
+        alt="bg"
+        className="pointer-events-none select-none absolute inset-0 -z-20 h-full w-full object-cover opacity-[0.06]"
+        loading="lazy"
+      />
+      <Navbar />
+
+      {/* Hero */}
+      <section className="relative mx-auto max-w-7xl px-6 pt-20 pb-16">
+        <div className="relative grid lg:grid-cols-2 gap-10 items-center">
+          <motion.div {...fadeUp(0)}>
+            <h1 className="text-4xl md:text-6xl font-semibold tracking-tight leading-tight">
+              Your Career. <span className="text-brand-400">Supercharged.</span>
+            </h1>
+            <p className="mt-4 text-slate-300 max-w-xl">
+              One place to discover jobs & internships, follow curated roadmaps, build resumes & cover letters,
+              practice mock interviews, and ace placements — all in one powerful platform.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                <Link to="/auth/signup" className="px-5 py-3 rounded bg-brand-600 hover:bg-brand-500 text-white shadow-glow inline-flex items-center gap-2">
+                  Get Started <ArrowRightIcon className="w-5 h-5"/>
+                </Link>
+              </motion.div>
+              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                <a href="#features" className="px-5 py-3 rounded bg-slate-800 hover:bg-slate-700 inline-flex items-center gap-2">
+                  Explore Features
+                </a>
+              </motion.div>
+            </div>
+            {/* Removed small utility line per request */}
+          </motion.div>
+          <motion.div {...fadeUp(.1)} className="relative" onMouseMove={onHeroMouseMove} onMouseLeave={onHeroMouseLeave}>
+          <div ref={heroTiltRef} className="relative rounded-2xl overflow-hidden border border-slate-800 bg-slate-900/40 shadow-xl transition-transform will-change-transform">
+                {/* Professional career guidance hero image */}
+                <img
+                  src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop"
+                  alt="Career guidance and professional development"
+                  className="w-full h-80 object-cover"
+                  referrerPolicy="no-referrer"
+                  loading="eager"
+                />
+                {/* Lighten overlay so the image reads strongly */}
+                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/40 to-transparent" />
+                <div className="absolute bottom-0 p-6">
+                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
+                    <SparklesIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> Professional Career Platform
+                  </div>
+                </div>
+              </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Decorative gradient blobs */}
+      <div className="pointer-events-none absolute -left-24 top-40 h-80 w-80 rounded-full bg-brand-500/10 blur-3xl"/>
+      <div className="pointer-events-none absolute -right-24 top-[600px] h-80 w-80 rounded-full bg-indigo-500/10 blur-3xl"/>
+
+      {/* Features grid */}
+      <section id="features" className="mx-auto max-w-7xl px-6 py-10">
+        <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Everything you need for your career journey</motion.h2>
+        <motion.p {...fadeUp(.05)} className="mt-2 text-slate-400 max-w-3xl">Beautiful, fast, and built to help you succeed: search jobs, learn with roadmaps, practice interviews, and generate polished resumes & letters.</motion.p>
+        <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          <Feature icon={BriefcaseIcon} title="Jobs & Internships" desc="Find roles that fit you, track applications, and uncover salary trends — all in one place." animScale={animScale}/>
+          <Feature icon={AcademicCapIcon} title="Learning Roadmaps" desc="Follow step‑by‑step paths with curated resources, milestones, and checkpoints to stay consistent." animScale={animScale}/>
+          <Feature icon={DocumentTextIcon} title="Resume & Cover Letters" desc="Build ATS‑friendly documents with proven sections and export crisp PDFs in seconds." animScale={animScale}/>
+          <Feature icon={CommandLineIcon} title="Placement Prep" desc="Practice MCQs, coding and interviews — build confidence before you apply." animScale={animScale}/>
+          <Feature icon={ChatBubbleLeftRightIcon} title="Mock Interviews" desc="Rehearse realistic interviews, reflect on transcripts, and fix gaps before the real one." animScale={animScale}/>
+          <Feature icon={GlobeAltIcon} title="Higher Studies" desc="Compare programs, shortlist universities, and plan requirements without the overwhelm." animScale={animScale}/>
+          <Feature icon={PresentationChartBarIcon} title="Industry Insights" desc="See in‑demand roles, compare salary bands, and know which skills to learn next." animScale={animScale}/>
+        </motion.div>
+      </section>
+
+      {/* Industry Insights */}
+      <section className="mx-auto max-w-7xl px-6 py-10">
+        <motion.div {...fadeUp(0)} className="grid lg:grid-cols-2 gap-8 items-center">
+          <div>
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
+              <PresentationChartBarIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> Industry Insights
+            </div>
+            <h2 className="mt-3 text-2xl md:text-3xl font-semibold">Know what's trending — and what to learn next</h2>
+            <p className="mt-3 text-slate-300 max-w-xl">
+              Explore in-demand roles by your interests, compare salary bands (min/median/max), and reveal your personal skill gaps so you can upskill with confidence.
+            </p>
+            <ul className="mt-5 space-y-2 text-slate-300">
+              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-brand-400"/> Trending roles by interest</li>
+              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-emerald-400"/> Min/Median/Max salary bands</li>
+              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-fuchsia-400"/> Personalized skill gaps and next steps</li>
+            </ul>
+            <div className="mt-6">
+              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                <Link to="/insights" className="px-4 py-2 rounded bg-slate-800 hover:bg-slate-700 inline-flex items-center gap-2">
+                  Explore Insights <ArrowRightIcon className="w-4 h-4"/>
+                </Link>
+              </motion.div>
+            </div>
+          </div>
+          <motion.div {...fadeUp(.05)} className="relative overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/40 p-6">
+            <img src={images.insights} alt="Insights preview" className="w-full h-64 object-cover opacity-80" loading="lazy"/>
+            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"/>
+            <div className="absolute bottom-0 p-4 text-slate-300 text-sm">Live analytics • Personalized by interests</div>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* Visual showcase rows */}
+      <section className="mx-auto max-w-7xl px-6 py-6">
+        <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="grid lg:grid-cols-2 gap-6">
+          <Showcase
+            image={images.jobs}
+            badge="Jobs & Salaries"
+            title="Discover roles that match your skills"
+            desc="Search globally, filter smartly, and bookmark your best matches."
+            cta={{ href:'/jobs', label:'Explore Jobs' }}
+          />
+          <Showcase
+            image={images.roadmaps}
+            badge="Roadmaps"
+            title="Structured learning without the guesswork"
+            desc="Step-by-step guidance and resources to master in-demand skills."
+            cta={{ href:'/roadmaps', label:'View Roadmaps' }}
+          />
+          <Showcase
+            image={images.resume}
+            badge="Resume Builder"
+            title="Craft polished resumes in minutes"
+            desc="Drag-and-drop sections, preview live, and export crisp PDFs."
+            cta={{ href:'/resume-builder', label:'Build Resume' }}
+          />
+          <Showcase
+            image={images.mock}
+            badge="Mock Interviews"
+            title="Practice confidently with realistic flows"
+            desc="Practice common questions, review transcripts, and iterate fast."
+            cta={{ href:'/mock-interview', label:'Start a Mock' }}
+          />
+        </motion.div>
+      </section>
+
+      {/* How it helps */}
+      {HowItHelps()}
+
+      {/* Popular Paths */}
+      {PopularPaths()}
+
+      {/* Why choose us */}
+      {WhyChooseUs()}
+
+      {/* Stats band */}
+      <section className="mx-auto max-w-7xl px-6 py-12">
+        <motion.div {...fadeUp(0)} className="grid sm:grid-cols-3 gap-4">
+          <Stat number="50k+" label="Jobs Indexed"/>
+          <Stat number="200+" label="Roadmap Steps"/>
+          <Stat number="100%" label="Free to Use"/>
+        </motion.div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="mx-auto max-w-7xl px-6 py-12">
+        <motion.h3 {...fadeUp(0)} className="text-xl font-semibold">What learners say</motion.h3>
+        <div className="mt-6">
+          <TestimonialsCarousel />
+        </div>
+      </section>
+
+      {/* FAQ */}
+      {FaqSection()}
+
+      {/* CTA */}
+      <section className="mx-auto max-w-7xl px-6 py-16">
+        <div className="relative overflow-hidden rounded-2xl border border-slate-800 bg-gradient-to-r from-slate-900 to-slate-800 p-8">
+          <motion.div {...fadeUp(0)} className="relative">
+            <h3 className="text-2xl md:text-3xl font-semibold">Your next step starts here</h3>
+            <p className="mt-2 text-slate-300">Sign in with Google and start exploring jobs, roadmaps, and more — it’s free.</p>
+            <div className="mt-6 flex gap-3">
+              <motion.div whileHover={{ y: -2, scale: 1.04 }} whileTap={{ scale: 0.98 }}>
+                <Link to="/auth/signup" className="inline-flex items-center gap-2 px-5 py-3 rounded text-white" style={{ backgroundColor: 'var(--brand)' }}>
+                  Get Started <ArrowRightIcon className="w-5 h-5"/>
+                </Link>
+              </motion.div>
+              <motion.div whileHover={{ y: -2, scale: 1.04 }} whileTap={{ scale: 0.98 }}>
+                <Link to="/dashboard" className="inline-flex items-center gap-2 px-5 py-3 rounded bg-slate-800 hover:bg-slate-700">Go to Dashboard</Link>
+              </motion.div>
+            </div>
+          </motion.div>
+          <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full" style={{ background: 'var(--brand-glow)' }} />
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  )
+}
+
+function Feature({ icon:Icon, title, desc, animScale = 1.02 }){
+  return (
+    <motion.div
+      variants={itemMotion}
+      whileHover={{ y: -3, scale: animScale, boxShadow: '0 0 30px var(--brand-glow)' }}
+      transition={{ type: 'spring', stiffness: 220, damping: 18 }}
+      className="group p-5 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900 transition shadow-sm"
+    >
+      <div className="flex items-start gap-3">
+        <div className="p-2 rounded-lg bg-slate-800 border border-slate-700 group-hover:border-brand-500">
+          <Icon className="w-6 h-6" style={{ color: 'var(--brand)' }}/>
+        </div>
+        <div>
+          <div className="font-semibold">{title}</div>
+          <div className="text-slate-400 text-sm mt-1">{desc}</div>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+// "How It Helps" section
+function HowItHelps(){
+  return (
+    <section className="mx-auto max-w-7xl px-6 py-12">
+      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">How our platform helps you succeed</motion.h2>
+      <div className="mt-6 grid md:grid-cols-3 gap-4">
+        <HelpCard title="Clarity → Action" desc="Turn confusion into a clear plan: from choosing a path to executing daily steps."/>
+        <HelpCard title="Save Time" desc="Skip the research rabbit hole — curated roadmaps and resources in one place."/>
+        <HelpCard title="Stand Out" desc="Create polished resumes/letters and track progress to showcase real growth."/>
+        <HelpCard title="Be Job-Ready" desc="Practice MCQs, coding and interviews — build confidence before you apply."/>
+        <HelpCard title="Stay Informed" desc="Industry Insights highlight trending roles and skills you're missing."/>
+        <HelpCard title="All-In-One" desc="From jobs to higher studies, it's the hub for your career journey."/>
+      </div>
+    </section>
+  )
+}
+
+function HelpCard({ title, desc }){
+  return (
+    <motion.div
+      initial={{ opacity:0, y: 22, scale: .97 }}
+      whileInView={{ opacity:1, y:0, scale:1 }}
+      viewport={{ once: true, amount: .3 }}
+      whileHover={{ y: -6, scale: 1.03 }}
+      animate={{ boxShadow: [
+        '0 0 0 var(--brand-glow)',
+        '0 0 26px var(--brand-glow)',
+        '0 0 10px var(--brand-glow)'
+      ] }}
+      transition={{ duration: .6 }}
+      className="relative p-5 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900 overflow-hidden"
+    >
+      <div className="absolute -right-20 -top-20 h-40 w-40 rounded-full bg-brand-500/10 blur-3xl" />
+      <div className="font-semibold text-slate-100">{title}</div>
+      <div className="text-slate-400 text-sm mt-1">{desc}</div>
+    </motion.div>
+  )
+}
+
+function Showcase({ image, badge, title, desc, cta }){
+  return (
+    <motion.div variants={itemMotion} whileHover={{ y: -3, scale: 1.02, boxShadow: '0 0 38px var(--brand-glow)' }} className="relative overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/40 transition">
+      <img src={image} alt={title} className="w-full h-64 object-cover opacity-80" loading="lazy" onError={(e)=>{e.currentTarget.src='https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=1600&auto=format&fit=crop'}}/>
+      <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"/>
+      <div className="absolute bottom-0 p-5">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
+          <SparklesIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> {badge}
+        </div>
+        <div className="mt-3 text-xl font-semibold">{title}</div>
+        <div className="text-slate-300 text-sm mt-1 max-w-md">{desc}</div>
+        {cta && (
+          <a href={cta.href} className="mt-3 inline-flex items-center gap-2 px-4 py-2 rounded bg-slate-800 hover:bg-slate-700">
+            {cta.label} <ArrowRightIcon className="w-4 h-4"/>
+          </a>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+// Popular Paths section
+function PopularPaths(){
+  const items = [
+    { title: 'Frontend Developer', steps: 'HTML • CSS • JS • React • TS', link: '/roadmaps#frontend' },
+    { title: 'Backend Developer', steps: 'Node.js • APIs • DB • Auth • DevOps', link: '/roadmaps#backend' },
+    { title: 'Data Analyst', steps: 'Excel • SQL • BI • Python • Viz', link: '/roadmaps#data-analyst' },
+    { title: 'AI/ML Engineer', steps: 'Python • ML • MLOps • Deploy', link: '/roadmaps#ml' },
+    { title: 'Cloud Engineer', steps: 'AWS • Docker • CI/CD • Terraform', link: '/roadmaps#cloud' },
+    { title: 'Mobile Developer', steps: 'Kotlin • Swift • Flutter • React Native', link: '/roadmaps#mobile' },
+  ]
+  const gradients = [
+    'from-cyan-500/20 to-fuchsia-500/10',
+    'from-emerald-500/20 to-cyan-500/10',
+    'from-orange-500/20 to-rose-500/10',
+    'from-indigo-500/20 to-purple-500/10',
+    'from-pink-500/20 to-yellow-500/10',
+    'from-sky-500/20 to-emerald-500/10',
+  ]
+  return (
+    <section className="mx-auto max-w-7xl px-6 py-12">
+      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Popular paths to get started</motion.h2>
+      <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+        {items.map((it, i) => (
+          <motion.a
+            key={it.title}
+            href={it.link}
+            variants={itemMotion}
+            className={`relative p-5 rounded-2xl border border-slate-800 bg-gradient-to-br ${gradients[i % gradients.length]} hover:brightness-110 transition block overflow-hidden`}
+            whileHover={{ y: -6, scale: 1.05, boxShadow: '0 0 42px var(--brand-glow)' }}
+          >
+            <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full" style={{ background: 'var(--brand-glow)' }} />
+            <div className="flex items-start gap-3">
+              <div className="flex-none h-9 w-9 rounded-lg bg-slate-900/60 border border-slate-700 flex items-center justify-center text-slate-200 font-semibold">
+                {String(i+1).padStart(2,'0')}
+              </div>
+              <div>
+                <div className="font-semibold">{it.title}</div>
+                <div className="text-slate-300 text-sm mt-1">{it.steps}</div>
+              </div>
+            </div>
+          </motion.a>
+        ))}
+      </motion.div>
+    </section>
+  )
+}
+
+function WhyChooseUs(){
+  const features = [
+    { 
+      icon: '🎯', 
+      title: 'All-in-One Career Platform', 
+      desc: 'Single workspace for jobs, learning, resumes, and interviews — no more switching between tools.',
+      highlight: 'Unified Experience'
+    },
+    { 
+      icon: '📊', 
+      title: 'Data-Driven Insights', 
+      desc: 'Real-time market trends, salary data, and skill gaps help you make informed career decisions.',
+      highlight: 'Smart Analytics'
+    },
+    { 
+      icon: '🛤️', 
+      title: 'Personalized Learning Paths', 
+      desc: 'Adaptive roadmaps that evolve with your progress and keep you on track to your goals.',
+      highlight: 'Tailored Learning'
+    },
+    { 
+      icon: '📄', 
+      title: 'ATS-Optimized Documents', 
+      desc: 'Professional resume and cover letter templates that pass applicant tracking systems.',
+      highlight: 'Professional Quality'
+    },
+    { 
+      icon: '🎤', 
+      title: 'Interview Practice Lab', 
+      desc: 'Realistic mock interviews with AI feedback to build confidence before the real thing.',
+      highlight: 'Confidence Building'
+    },
+    { 
+      icon: '🔒', 
+      title: 'Privacy & Security First', 
+      desc: 'Your data stays yours with secure Google authentication and easy export options.',
+      highlight: 'Your Data, Your Control'
+    },
+  ]
+  
+  return (
+    <section className="mx-auto max-w-7xl px-6 py-16">
+      <motion.div {...fadeUp(0)} className="text-center mb-12">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose CareerGuide</h2>
+        <p className="text-slate-400 text-lg max-w-2xl mx-auto">
+          We've built the most comprehensive career platform to help you succeed at every step of your professional journey.
+        </p>
+      </motion.div>
+      
+      <motion.div 
+        variants={containerStagger} 
+        initial="hidden" 
+        whileInView="show" 
+        viewport={{ once: true, amount: .2 }} 
+        className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
+      >
+        {features.map((feature, index) => (
+          <motion.div
+            key={feature.title}
+            variants={itemMotion}
+            whileHover={{ y: -8, scale: 1.02, boxShadow: '0 20px 40px var(--brand-glow)' }}
+            className="group relative p-6 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900/60 transition-all duration-300 overflow-hidden"
+          >
+            {/* Background gradient */}
+            <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            
+            {/* Icon */}
+            <div className="text-3xl mb-4">{feature.icon}</div>
+            
+            {/* Content */}
+            <div className="relative z-10">
+              <div className="inline-block px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 text-brand-400 text-xs font-medium mb-3">
+                {feature.highlight}
+              </div>
+              <h3 className="text-xl font-semibold mb-3 text-slate-100">{feature.title}</h3>
+              <p className="text-slate-400 text-sm leading-relaxed">{feature.desc}</p>
+            </div>
+            
+            {/* Hover effect line */}
+            <div className="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-brand-500 to-brand-400 group-hover:w-full transition-all duration-500" />
+          </motion.div>
+        ))}
+      </motion.div>
+      
+      {/* Bottom CTA */}
+      <motion.div {...fadeUp(.1)} className="text-center mt-12">
+        <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300">
+          <span className="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
+          <span className="text-sm">Join thousands of professionals who've accelerated their careers</span>
+        </div>
+      </motion.div>
+    </section>
+  )
+}
+
+function NodeCard({ title, desc }){
+  return (
+    <motion.div whileHover={{ y: -3, scale: 1.02, boxShadow: '0 0 28px var(--brand-glow)' }} className="w-[200px] lg:w-[220px] max-w-xs p-3 lg:p-4 rounded-xl border border-slate-800 bg-slate-900/70">
+      <div className="font-medium text-slate-100 text-sm lg:text-base">{title}</div>
+      <div className="text-slate-400 text-xs mt-1 leading-relaxed">{desc}</div>
+    </motion.div>
+  )
+}
+
+// FAQ section
+function FaqSection(){
+  const faqs = [
+    { q: 'Is it free to start?', a: 'Yes. You can sign in and use core features like Jobs, Roadmaps, and Resume Builder for free.' },
+    { q: 'Do I need coding experience?', a: 'No. Choose a path that matches your goal — we guide you step by step.' },
+    { q: 'Will you add personalized insights?', a: 'Yes. The Insights page already showcases trends and will soon personalize by your interests and profile.' },
+  ]
+  return (
+    <section className="mx-auto max-w-7xl px-6 py-12">
+      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Frequently asked questions</motion.h2>
+      <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-6 grid md:grid-cols-3 gap-4">
+        {faqs.map(f => (
+          <motion.div key={f.q} variants={itemMotion} className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40">
+            <div className="font-medium">{f.q}</div>
+            <div className="text-slate-400 text-sm mt-1">{f.a}</div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  )
+}
+
+function Stat({ number, label }){
+  return (
+    <div className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40 text-center">
+      <div className="text-3xl font-semibold text-brand-400">{number}</div>
+      <div className="text-slate-400 text-sm mt-1">{label}</div>
+    </div>
+  )
+}
+
+function Testimonial({ quote, author }){
+  return (
+    <motion.div {...fadeUp(.05)} className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40">
+      <div className="text-slate-300">"{quote}"</div>
+      <div className="text-slate-500 text-sm mt-2">— {author}</div>
+    </motion.div>
+  )
+}
+

index.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: dark;
+  --brand: #22d3ee; /* default teal */
+  --brand-glow: rgba(34, 211, 238, 0.35);
+}
+
+/* Fancy gradient grid background helper */
+.bg-grid {
+  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
+  background-size: 22px 22px;
+}
+
+/* Theme brand variants (applied on <body> via ThemeProvider) */
+.brand-teal {
+  --brand: #22d3ee;
+  --brand-glow: rgba(34, 211, 238, 0.35);
+}
+.brand-indigo {
+  --brand: #8b5cf6; /* indigo-500 */
+  --brand-glow: rgba(139, 92, 246, 0.35);
+}
+.brand-emerald {
+  --brand: #10b981; /* emerald-500 */
+  --brand-glow: rgba(16, 185, 129, 0.35);
+}
+.brand-sunset {
+  --brand: #f97316; /* orange-500 */
+  --brand-glow: rgba(249, 115, 22, 0.35);
+}