Merge remote-tracking branch 'origin/feature/frontend-premium-ui' into feature/notes-pyqs

src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Menu, X, GraduationCap, Bell } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { NAV_LINKS } from '@/constants';
 
 export default function Navbar() {
@@ -25,54 +25,38 @@ export default function Navbar() {
         initial={{ y: -100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.6, ease: 'easeOut' }}
-        className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 ${
-          isScrolled
-            ? 'shadow-[0_8px_32px_rgba(0,0,0,0.12)] bg-white/90'
-            : 'bg-white/80'
-        }`}
+        className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
         style={{
+          background: 'linear-gradient(to right, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(15, 23, 42, 0.45) 100%)',
           backdropFilter: 'blur(16px)',
           WebkitBackdropFilter: 'blur(16px)',
           borderRadius: '20px',
-          border: '1px solid rgba(229,231,235,0.8)',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
         }}
       >
         <div className="flex items-center justify-between px-5 py-2.5">
           {/* Logo - RIT Event Hub Style */}
-          <Link to="/" className="flex items-center gap-2 group">
-            {/* Blue Circular Tree Icon */}
-            <motion.div
+          <a href="/" className="flex items-center gap-2 group">
+            {/* Logo Image */}
+            <motion.img
               whileHover={{ scale: 1.05 }}
-              className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
-              style={{ background: 'linear-gradient(135deg, #1E40AF, #3B82F6)' }}
-            >
-              <svg viewBox="0 0 100 100" className="w-6.5 h-6.5 text-white" fill="none" stroke="currentColor" strokeWidth="6" strokeLinecap="round">
-                {/* Minimalist Tree Branch Representation */}
-                <path d="M50 85 V40" />
-                <path d="M50 65 Q65 55 75 60" />
-                <path d="M50 55 Q35 45 25 50" />
-                <path d="M50 45 Q70 30 65 15" />
-                <path d="M50 45 Q30 30 35 15" />
-                <circle cx="50" cy="38" r="8" fill="white" stroke="none" />
-                <circle cx="65" cy="15" r="5" fill="white" stroke="none" />
-                <circle cx="35" cy="15" r="5" fill="white" stroke="none" />
-                <circle cx="75" cy="60" r="5" fill="white" stroke="none" />
-                <circle cx="25" cy="50" r="5" fill="white" stroke="none" />
-              </svg>
-            </motion.div>
+              src="/logo.png"
+              alt="RIT Logo"
+              className="w-10 h-10 object-contain rounded-full shrink-0"
+            />
             
             <div className="flex items-center">
-              <span className="font-extrabold text-[#1E293B] text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
+              <span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}>
                 rit
               </span>
-              <div className="h-7 w-[1px] bg-gray-300 mx-2" />
-              <div className="flex flex-col text-[8.5px] font-bold text-[#475569] leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <div className="h-7 w-[1px] bg-white/20 mx-2" />
+              <div className="flex flex-col text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
                 <span>RAJALAKSHMI</span>
                 <span>INSTITUTE OF</span>
                 <span>TECHNOLOGY</span>
               </div>
             </div>
-          </Link>
+          </a>
 
           {/* Desktop Nav */}
           <div className="hidden md:flex items-center gap-1">
@@ -85,14 +69,14 @@ export default function Navbar() {
                   className="relative px-4 py-2 rounded-xl text-xs font-semibold uppercase tracking-wider transition-all duration-200"
                   style={{
                     fontFamily: 'Poppins, sans-serif',
-                    color: isActive ? '#F97316' : '#475569',
+                    color: isActive ? '#FFFFFF' : '#CBD5E1',
                   }}
                 >
                   {isActive && (
                     <motion.div
                       layoutId="nav-active"
                       className="absolute inset-0 rounded-xl"
-                      style={{ backgroundColor: '#FFF7ED' }}
+                      style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
                       transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
                     />
                   )}
@@ -104,35 +88,11 @@ export default function Navbar() {
 
           {/* Right Side */}
           <div className="flex items-center gap-3">
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              className="hidden md:flex w-9 h-9 rounded-xl items-center justify-center text-[#94A3B8] hover:text-[#F97316] hover:bg-[#FFF7ED] transition-all"
-              aria-label="Notifications"
-            >
-              <Bell className="w-4.5 h-4.5" />
-            </motion.button>
-
-            {/* Profile styled as an orange LOG OUT pill button from Reference Image */}
-            <Link to="/profile" className="hidden md:block">
-              <motion.button
-                whileHover={{ scale: 1.03, boxShadow: '0 4px 15px rgba(249,115,22,0.3)' }}
-                whileTap={{ scale: 0.97 }}
-                className="px-5 py-2 rounded-full text-white font-bold text-[10.5px] tracking-wider uppercase transition-all"
-                style={{
-                  fontFamily: 'Poppins, sans-serif',
-                  background: 'linear-gradient(135deg, #F97316, #FB923C)',
-                }}
-              >
-                Profile
-              </motion.button>
-            </Link>
-
             {/* Mobile Toggle */}
             <motion.button
               whileTap={{ scale: 0.9 }}
               onClick={() => setIsMobileOpen(!isMobileOpen)}
-              className="md:hidden w-9 h-9 rounded-xl flex items-center justify-center text-[#475569] hover:bg-gray-100 transition-all"
+              className="md:hidden w-9 h-9 rounded-xl flex items-center justify-center text-slate-300 hover:text-white hover:bg-white/10 transition-all"
               aria-label="Toggle menu"
             >
               {isMobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -150,7 +110,7 @@ export default function Navbar() {
               transition={{ duration: 0.25 }}
               className="overflow-hidden md:hidden"
             >
-              <div className="px-4 pb-4 pt-2 flex flex-col gap-1 border-t border-gray-100">
+              <div className="px-4 pb-4 pt-2 flex flex-col gap-1 border-t border-white/10">
                 {NAV_LINKS.map((link) => {
                   const isActive = location.pathname === link.path;
                   return (
@@ -160,8 +120,8 @@ export default function Navbar() {
                       className="px-4 py-3 rounded-xl text-sm font-medium transition-all"
                       style={{
                         fontFamily: 'Inter, sans-serif',
-                        color: isActive ? '#F97316' : '#475569',
-                        backgroundColor: isActive ? '#FFF7ED' : 'transparent',
+                        color: isActive ? '#FFFFFF' : '#CBD5E1',
+                        backgroundColor: isActive ? '#F97316' : 'transparent',
                       }}
                     >
                       {link.label}

src/pages/Home/Home.tsx

@@ -1,184 +1,215 @@
-import { motion } from 'framer-motion';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import {
   ArrowRight, Sparkles, BookOpen, Bot, GraduationCap,
-  CheckCircle, Zap, Shield, Brain
+  CheckCircle, Zap, Shield, Brain, Trophy, Award, Cpu, Users
 } from 'lucide-react';
 import SectionTitle from '@/components/SectionTitle/SectionTitle';
-import StatsCard from '@/components/StatsCard/StatsCard';
 import FeatureCard from '@/components/FeatureCard/FeatureCard';
 import FloatingCard from '@/components/FloatingCard/FloatingCard';
 import ChatPreview from '@/components/ChatPreview/ChatPreview';
 import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
 import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
-import { STATS, FEATURES, CAMPUS_LOCATIONS } from '@/constants';
+import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
 import * as LucideIcons from 'lucide-react';
 
 export default function Home() {
+  const { scrollY } = useScroll();
+  const heroOpacity = useTransform(scrollY, [0, 450], [1, 0]);
+  const heroY = useTransform(scrollY, [0, 450], [0, -80]);
+
   return (
-    <div>
+    <div className="relative">
+      {/* Sticky Background Video */}
+      <div className="fixed inset-0 w-full h-full z-0 pointer-events-none">
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          preload="auto"
+          className="w-full h-full object-cover"
+          style={{ 
+            filter: 'contrast(1.12) brightness(0.88) saturate(1.08)',
+            transform: 'translate3d(0, 0, 0)',
+            willChange: 'transform',
+            imageRendering: 'high-quality'
+          }}
+        >
+          <source src="/video/RIT Video.mp4" type="video/mp4" />
+        </video>
+        {/* Dark Overlay (40-50%) */}
+        <div 
+          className="absolute inset-0" 
+          style={{ background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.65))' }}
+        />
+      </div>
+
       {/* ─── Hero Section ─────────────────────────────────────────────────────── */}
-      <section className="relative overflow-hidden pt-12 pb-24" style={{ backgroundColor: '#FAFAFA' }}>
-        {/* Background Decoration */}
-        <div
-          className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full opacity-[0.04] -translate-y-1/2 translate-x-1/3 pointer-events-none"
-          style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
-        />
-        <div
-          className="absolute bottom-0 left-0 w-[350px] h-[350px] rounded-full opacity-[0.03] translate-y-1/2 -translate-x-1/3 pointer-events-none"
-          style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
-        />
+      <section className="relative overflow-hidden min-h-screen flex flex-col justify-center pt-24 pb-32 z-10 bg-transparent">
+        {/* Center Content */}
+        <motion.div 
+          className="container-custom relative z-20 flex flex-col items-center justify-center text-center px-4"
+          style={{ opacity: heroOpacity, y: heroY }}
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="mb-3"
+          >
+            <span className="text-[#F97316] text-xs font-bold uppercase tracking-widest" style={{ fontFamily: 'Poppins, sans-serif' }}>
+              OUR LEGACY & FUTURE
+            </span>
+          </motion.div>
 
-        <div className="container-custom">
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
-            {/* Left – Visual Section (RIT Events Hub Style) */}
-            <div className="lg:col-span-6 relative flex justify-center">
-              <motion.div
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.7 }}
-                className="relative w-full max-w-lg"
+          <motion.h1
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            className="text-white text-3xl md:text-4xl font-light mb-2"
+            style={{ fontFamily: 'Playfair Display, serif', color: '#FFFFFF', textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)' }}
+          >
+            Welcome to
+          </motion.h1>
+
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.2 }}
+            className="text-5xl md:text-7xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-[#F97316] via-[#FB923C] to-[#F97316] bg-clip-text text-transparent"
+            style={{ fontFamily: 'Playfair Display, serif', color: 'transparent', WebkitTextFillColor: 'transparent', filter: 'drop-shadow(0 4px 12px rgba(249, 115, 22, 0.45))' }}
+          >
+            RIT Freshers Hub
+          </motion.h2>
+
+          <motion.p
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.3 }}
+            className="max-w-2xl text-slate-200 text-sm md:text-base leading-relaxed mb-8"
+            style={{ fontFamily: 'Inter, sans-serif' }}
+          >
+            The RIT Freshers Hub is your centralized gateway to campus life, academic resources, AI assistance, clubs, events, bus routes, notes, and student services.
+          </motion.p>
+
+          {/* Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.4 }}
+            className="flex flex-wrap justify-center gap-4 mb-8"
+          >
+            <a href="#built-for-freshers">
+              <motion.button
+                whileHover={{ scale: 1.05, boxShadow: '0 8px 25px rgba(249,115,22,0.4)' }}
+                whileTap={{ scale: 0.95 }}
+                className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-semibold text-sm cursor-pointer"
+                style={{
+                  fontFamily: 'Poppins, sans-serif',
+                  background: 'linear-gradient(135deg, #F97316, #FB923C)',
+                }}
               >
-                {/* Main campus image/graphic card with soft blurry drop shadow */}
-                <div
-                  className="rounded-[24px] overflow-hidden bg-white border border-[#E5E7EB]/50 relative aspect-[4/3] w-full"
-                  style={{ boxShadow: '0 30px 70px -15px rgba(0, 0, 0, 0.12), 0 15px 35px -20px rgba(0, 0, 0, 0.08)' }}
-                >
-                  <img 
-                    src="/images.jpg" 
-                    alt="Rajalakshmi Institute of Technology Campus" 
-                    className="w-full h-full object-cover select-none"
-                  />
+                <BookOpen className="w-4 h-4" />
+                Explore Hub
+                <ArrowRight className="w-3.5 h-3.5" />
+              </motion.button>
+            </a>
 
-                  {/* Subtle dark gradient overlay to ensure text contrast */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/10 pointer-events-none" />
-                    
-                    {/* Text on top of the image (RIT Events Hub Style) */}
-                    <div className="absolute bottom-6 left-6 z-10 text-left pointer-events-none">
-                      <h2 className="text-white font-extrabold text-2xl tracking-wide leading-tight" style={{ fontFamily: 'Playfair Display, serif', color: '#FFFFFF' }}>
-                        Rajalakshmi Institute
-                      </h2>
-                      <p className="text-orange-400 font-bold text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
-                        of Technology, Chennai
-                      </p>
-                      <div className="inline-flex items-center gap-1.5 mt-3.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20">
-                        <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-                        <span className="text-[10px] text-slate-300 font-bold uppercase tracking-wider">Est. 2008 • NBA & NAAC A+</span>
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-            </div>
-
-            {/* Right – Text Content */}
-            <div className="lg:col-span-6 flex flex-col justify-center">
-              <motion.div
-                initial={{ opacity: 0, y: 15 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5 }}
-                className="mb-3"
+            <Link to="/ai-assistant">
+              <motion.button
+                whileHover={{ scale: 1.05, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.15)' }}
+                whileTap={{ scale: 0.95 }}
+                className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm border-2 border-white/20 text-white bg-white/10 backdrop-blur-md transition-all cursor-pointer"
+                style={{ fontFamily: 'Poppins, sans-serif' }}
               >
-                <span className="text-[#F97316] text-xs font-bold uppercase tracking-widest" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  OUR LEGACY & FUTURE
-                </span>
-              </motion.div>
+                <Bot className="w-4 h-4" />
+                Ask AI Assistant
+              </motion.button>
+            </Link>
+          </motion.div>
 
-              <motion.h1
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.1 }}
-                className="text-4xl md:text-5xl xl:text-6xl font-bold leading-[1.1] mb-6"
-                style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}
-              >
-                Welcome to <br />
-                <span className="font-serif italic text-[#F97316] font-medium block mt-1">
-                  RIT Freshers Hub
-                </span>
-              </motion.h1>
-
-              <motion.p
-                initial={{ opacity: 0, y: 15 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="text-base text-[#475569] leading-relaxed mb-8"
-                style={{ fontFamily: 'Inter, sans-serif' }}
-              >
-                The RIT Freshers Hub is your centralized gateway to campus life, designed to simplify how you discover and participate in academic and extracurricular activities. With seamless access to notes, PYQs, AI assistant, and bus routes, we ensure you have everything needed to succeed.
-              </motion.p>
-
-              <motion.div
-                initial={{ opacity: 0, y: 15 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.3 }}
-                className="flex flex-wrap gap-4 mb-8"
-              >
-                <a href="#built-for-freshers">
-                  <motion.button
-                    whileHover={{ scale: 1.03, boxShadow: '0 8px 25px rgba(249,115,22,0.3)' }}
-                    whileTap={{ scale: 0.97 }}
-                    className="flex items-center gap-2 px-6 py-3 rounded-xl text-white font-semibold text-sm cursor-pointer"
-                    style={{
-                      fontFamily: 'Poppins, sans-serif',
-                      background: 'linear-gradient(135deg, #F97316, #FB923C)',
-                    }}
-                  >
-                    <BookOpen className="w-4 h-4" />
-                    Explore Hub
-                    <ArrowRight className="w-3.5 h-3.5" />
-                  </motion.button>
-                </a>
-
-                <Link to="/ai-assistant">
-                  <motion.button
-                    whileHover={{ scale: 1.03, borderColor: '#F97316', color: '#F97316', backgroundColor: '#FFF7ED' }}
-                    whileTap={{ scale: 0.97 }}
-                    className="flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-sm border-2 border-[#E5E7EB] text-[#1E293B] bg-white transition-all cursor-pointer"
-                    style={{ fontFamily: 'Poppins, sans-serif' }}
-                  >
-                    <Bot className="w-4 h-4" />
-                    Ask AI Assistant
-                  </motion.button>
-                </Link>
-              </motion.div>
-
-              {/* Badges positioned cleanly below buttons with more breathing room */}
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.6, delay: 0.4 }}
-                className="flex flex-wrap gap-6 text-[#94A3B8] border-t border-[#E5E7EB] pt-6"
-              >
-                {[
-                  { icon: CheckCircle, text: 'Official Portal' },
-                  { icon: Zap, text: 'Instant AI Support' },
-                  { icon: Shield, text: 'Student Verified' },
-                ].map((badge, i) => (
-                  <div key={i} className="flex items-center gap-2 text-xs font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
-                    <badge.icon className="w-4 h-4 text-[#F97316]/70" />
-                    <span>{badge.text}</span>
-                  </div>
-                ))}
-              </motion.div>
-            </div>
-          </div>
-        </div>
+          {/* Badges */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+            className="flex flex-wrap justify-center gap-6 text-slate-300 border-t border-white/10 pt-6 max-w-lg w-full"
+          >
+            {[
+              { icon: CheckCircle, text: 'Official Portal' },
+              { icon: Zap, text: 'Instant AI Support' },
+              { icon: Shield, text: 'Student Verified' },
+            ].map((badge, i) => (
+              <div key={i} className="flex items-center gap-1.5 text-xs font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
+                <badge.icon className="w-4 h-4 text-[#F97316]" />
+                <span>{badge.text}</span>
+              </div>
+            ))}
+          </motion.div>
+        </motion.div>
       </section>
 
-      {/* ─── Stats Section ────────────────────────────────────────────────────── */}
-      <section className="py-16 bg-white">
-        <div className="container-custom">
-          <StaggerContainer className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-            {STATS.map((stat, i) => (
-              <StaggerItem key={i}>
-                <StatsCard stat={stat} delay={i * 0.05} />
-              </StaggerItem>
-            ))}
-          </StaggerContainer>
+      {/* Floating Glassmorphic Stats Section */}
+      <section className="relative z-30 -mt-16 px-4">
+        <div className="container-custom max-w-5xl">
+          <style>{`
+            @keyframes float {
+              0%, 100% { transform: translateY(0px); }
+              50% { transform: translateY(-8px); }
+            }
+            .animate-float {
+              animation: float 6s ease-in-out infinite;
+            }
+          `}</style>
+          
+          <motion.div 
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="animate-float rounded-[24px] border border-white/10 p-6 md:p-8 shadow-[0_25px_60px_-15px_rgba(0,0,0,0.4)]"
+            style={{
+              background: 'linear-gradient(135deg, rgba(11, 19, 43, 0.9) 0%, rgba(15, 23, 42, 0.8) 100%)',
+              backdropFilter: 'blur(20px)',
+              WebkitBackdropFilter: 'blur(20px)',
+            }}
+          >
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 text-center">
+              {[
+                { value: '20+', label: 'SPORTS', icon: Trophy },
+                { value: '100+', label: 'FACULTY', icon: GraduationCap },
+                { value: '18', label: 'CLUBS', icon: Award },
+                { value: '24/7', label: 'AI ASSISTANT', icon: Cpu },
+                { value: '5000+', label: 'STUDENTS', icon: Users },
+              ].map((stat, i) => (
+                <div key={i} className="flex flex-col items-center justify-center p-4">
+                  {/* Icon */}
+                  <div className="w-10 h-10 rounded-xl bg-[#F97316]/10 flex items-center justify-center mb-3">
+                    <stat.icon className="w-5 h-5 text-[#F97316]" />
+                  </div>
+                  {/* Value */}
+                  <div 
+                    className="text-2xl md:text-3xl font-extrabold text-white mb-1"
+                    style={{ fontFamily: 'Poppins, sans-serif' }}
+                  >
+                    {stat.value}
+                  </div>
+                  {/* Label */}
+                  <div 
+                    className="text-[10px] md:text-xs font-semibold tracking-wider text-slate-300 uppercase whitespace-nowrap"
+                    style={{ fontFamily: 'Inter, sans-serif' }}
+                  >
+                    {stat.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
         </div>
       </section>
 
       {/* ─── Features Section ─────────────────────────────────────────────────── */}
-      <section id="built-for-freshers" className="section-padding" style={{ backgroundColor: '#FAFAFA' }}>
+      <section id="built-for-freshers" className="section-padding relative z-20" style={{ backgroundColor: '#FAFAFA' }}>
         <div className="container-custom">
           <SectionTitle
             tag="Everything You Need"
@@ -198,7 +229,7 @@ export default function Home() {
       </section>
 
       {/* ─── AI Section ───────────────────────────────────────────────────────── */}
-      <section className="section-padding bg-white">
+      <section className="section-padding bg-white relative z-20">
         <div className="container-custom">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             {/* Left – Text */}
@@ -269,7 +300,7 @@ export default function Home() {
       </section>
 
       {/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
-      <section className="section-padding" style={{ backgroundColor: '#FAFAFA' }}>
+      <section className="section-padding relative z-20" style={{ backgroundColor: '#FAFAFA' }}>
         <div className="container-custom">
           <SectionTitle
             tag="Navigate Campus"
@@ -355,7 +386,7 @@ export default function Home() {
       </section>
 
       {/* ─── Community Teaser ─────────────────────────────────────────────────── */}
-      <section className="section-padding bg-white">
+      <section className="section-padding bg-white relative z-20">
         <div className="container-custom">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {/* Q&A teaser */}