merge: resolve merge conflicts with main branch and update student toolkit

COLLABORATION.md

@@ -15,7 +15,9 @@ Welcome to the team! This guide explains how to get set up, which Git branch you
 2. **Select your module's branch**:
    Find your assigned module below, and check out your branch:
    ```bash
-    
+
+   # Checkout your module's branch
+   git checkout feature/<your-assigned-branch-name>
    ```
 
 3. **Install frontend dependencies**:

backend/src/main/resources/application.properties

@@ -1,9 +1,7 @@
 # ─── DATABASE CONNECTION CONFIGURATION ───
 spring.datasource.url=jdbc:postgresql://localhost:5432/rit_freshers_hub?sslmode=disable
 spring.datasource.username=postgres
-
+spring.datasource.password=${DB_PASSWORD:Anbukathir@#$2006}
-spring.datasource.password=Anbukathir@#$2006
-
 
 # ─── JPA / HIBERNATE SETTINGS ───
 spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect

src/App.tsx

@@ -1,4 +1,5 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import MainLayout from '@/layouts/MainLayout';
 import Home from '@/pages/Home/Home';
@@ -18,10 +19,21 @@ const queryClient = new QueryClient({
   },
 });
 
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
+        <ScrollToTop />
         <Routes>
           <Route element={<MainLayout />}>
             <Route path="/" element={<Home />} />

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 ${
+        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)]"
-          isScrolled
-            ? 'shadow-[0_8px_32px_rgba(0,0,0,0.12)] bg-white/90'
-            : 'bg-white/80'
-        }`}
         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">
+          <a href="/" className="flex items-center gap-2 group">
-            {/* Blue Circular Tree Icon */}
+            {/* Logo Image */}
-            <motion.div
+            <motion.img
               whileHover={{ scale: 1.05 }}
-              className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
+              src="/logo.png"
-              style={{ background: 'linear-gradient(135deg, #1E40AF, #3B82F6)' }}
+              alt="RIT Logo"
-            >
+              className="w-10 h-10 object-contain rounded-full shrink-0"
-              <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>
             
             <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="h-7 w-[1px] bg-white/20 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="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',
+                        color: isActive ? '#FFFFFF' : '#CBD5E1',
-                        backgroundColor: isActive ? '#FFF7ED' : 'transparent',
+                        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' }}>
+      <section className="relative overflow-hidden min-h-screen flex flex-col justify-center pt-24 pb-32 z-10 bg-transparent">
-        {/* Background Decoration */}
+        {/* Center Content */}
-        <div
+        <motion.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"
+          className="container-custom relative z-20 flex flex-col items-center justify-center text-center px-4"
-          style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
+          style={{ opacity: heroOpacity, y: heroY }}
-        />
+        >
-        <div
+          <motion.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"
+            initial={{ opacity: 0, y: 15 }}
-          style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
+            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">
+          <motion.h1
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+            initial={{ opacity: 0, y: 15 }}
-            {/* Left – Visual Section (RIT Events Hub Style) */}
+            animate={{ opacity: 1, y: 0 }}
-            <div className="lg:col-span-6 relative flex justify-center">
+            transition={{ duration: 0.6, delay: 0.1 }}
-              <motion.div
+            className="text-white text-3xl md:text-4xl font-light mb-2"
-                initial={{ opacity: 0, scale: 0.95 }}
+            style={{ fontFamily: 'Playfair Display, serif', color: '#FFFFFF', textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)' }}
-                animate={{ opacity: 1, scale: 1 }}
+          >
-                transition={{ duration: 0.7 }}
+            Welcome to
-                className="relative w-full max-w-lg"
+          </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 */}
+                <BookOpen className="w-4 h-4" />
-                <div
+                Explore Hub
-                  className="rounded-[24px] overflow-hidden bg-white border border-[#E5E7EB]/50 relative aspect-[4/3] w-full"
+                <ArrowRight className="w-3.5 h-3.5" />
-                  style={{ boxShadow: '0 30px 70px -15px rgba(0, 0, 0, 0.12), 0 15px 35px -20px rgba(0, 0, 0, 0.08)' }}
+              </motion.button>
-                >
+            </a>
-                  <img 
-                    src="/images.jpg" 
-                    alt="Rajalakshmi Institute of Technology Campus" 
-                    className="w-full h-full object-cover select-none"
-                  />
-                  
-                  {/* 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 */}
+            <Link to="/ai-assistant">
-            <div className="lg:col-span-6 flex flex-col justify-center">
+              <motion.button
-              <motion.div
+                whileHover={{ scale: 1.05, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.15)' }}
-                initial={{ opacity: 0, y: 15 }}
+                whileTap={{ scale: 0.95 }}
-                animate={{ opacity: 1, y: 0 }}
+                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"
-                transition={{ duration: 0.5 }}
+                style={{ fontFamily: 'Poppins, sans-serif' }}
-                className="mb-3"
               >
-                <span className="text-[#F97316] text-xs font-bold uppercase tracking-widest" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                <Bot className="w-4 h-4" />
-                  OUR LEGACY & FUTURE
+                Ask AI Assistant
-                </span>
+              </motion.button>
-              </motion.div>
+            </Link>
+          </motion.div>
 
-              <motion.h1
+          {/* Badges */}
-                initial={{ opacity: 0, y: 20 }}
+          <motion.div
-                animate={{ opacity: 1, y: 0 }}
+            initial={{ opacity: 0 }}
-                transition={{ duration: 0.6, delay: 0.1 }}
+            animate={{ opacity: 1 }}
-                className="text-4xl md:text-5xl xl:text-6xl font-bold leading-[1.1] mb-6"
+            transition={{ duration: 0.8, delay: 0.5 }}
-                style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}
+            className="flex flex-wrap justify-center gap-6 text-slate-300 border-t border-white/10 pt-6 max-w-lg w-full"
-              >
+          >
-                Welcome to <br />
+            {[
-                <span className="font-serif italic text-[#F97316] font-medium block mt-1">
+              { icon: CheckCircle, text: 'Official Portal' },
-                  RIT Freshers Hub
+              { icon: Zap, text: 'Instant AI Support' },
-                </span>
+              { icon: Shield, text: 'Student Verified' },
-              </motion.h1>
+            ].map((badge, i) => (
-
+              <div key={i} className="flex items-center gap-1.5 text-xs font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
-              <motion.p
+                <badge.icon className="w-4 h-4 text-[#F97316]" />
-                initial={{ opacity: 0, y: 15 }}
+                <span>{badge.text}</span>
-                animate={{ opacity: 1, y: 0 }}
+              </div>
-                transition={{ duration: 0.6, delay: 0.2 }}
+            ))}
-                className="text-base text-[#475569] leading-relaxed mb-8"
+          </motion.div>
-                style={{ fontFamily: 'Inter, sans-serif' }}
+        </motion.div>
-              >
-                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>
       </section>
 
-      {/* ─── Stats Section ────────────────────────────────────────────────────── */}
+      {/* Floating Glassmorphic Stats Section */}
-      <section className="py-16 bg-white">
+      <section className="relative z-30 -mt-16 px-4">
-        <div className="container-custom">
+        <div className="container-custom max-w-5xl">
-          <StaggerContainer className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+          <style>{`
-            {STATS.map((stat, i) => (
+            @keyframes float {
-              <StaggerItem key={i}>
+              0%, 100% { transform: translateY(0px); }
-                <StatsCard stat={stat} delay={i * 0.05} />
+              50% { transform: translateY(-8px); }
-              </StaggerItem>
+            }
-            ))}
+            .animate-float {
-          </StaggerContainer>
+              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 */}