revert: restore UI to commit ec06c59985

src/components/Auth/GoogleAuthModal.tsx

@@ -75,7 +75,7 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
           >
             {/* Background Orbs */}
             <div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-500/20 rounded-full blur-2xl pointer-events-none" />
-            <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-orange-600/20 rounded-full blur-2xl pointer-events-none" />
+            <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-blue-500/20 rounded-full blur-2xl pointer-events-none" />
 
             {/* Close Button */}
             <button

src/components/FacultyCard/FacultyCard.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock, MapPin } from 'lucide-react';
+import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock } from 'lucide-react';
 import type { Faculty } from '@/types';
 
 interface FacultyCardProps {
@@ -32,7 +32,7 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
   const mailOptions = [
     { name: 'Default Mail App', url: `mailto:${faculty.email}`, icon: Monitor, color: 'text-gray-700', bg: 'bg-gray-100' },
     { name: 'Gmail', url: `https://mail.google.com/mail/?view=cm&fs=1&to=${faculty.email}`, icon: Mail, color: 'text-red-500', bg: 'bg-red-50' },
-    { name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-slate-800', bg: 'bg-slate-100' },
+    { name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-blue-600', bg: 'bg-blue-50' },
     { name: 'Yahoo Mail', url: `https://compose.mail.yahoo.com/?to=${faculty.email}`, icon: Mail, color: 'text-purple-600', bg: 'bg-purple-50' },
   ];
 
@@ -172,8 +172,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                           className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/80 transition-colors border group w-full"
                           style={{ backgroundColor: 'rgba(255, 255, 255, 0.6)', borderColor: `${from}15` }}
                         >
-                          <div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center group-hover:bg-[#C25E17] transition-colors shrink-0">
+                          <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center group-hover:bg-blue-500 transition-colors shrink-0">
-                            <Phone className="w-4 h-4 text-orange-400 group-hover:text-white transition-colors" />
+                            <Phone className="w-4 h-4 text-blue-500 group-hover:text-white transition-colors" />
                           </div>
                           <div className="overflow-hidden">
                             <p className="text-[11px] font-semibold text-[#94A3B8] uppercase tracking-wider mb-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>Phone Number</p>
@@ -224,14 +224,14 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                   {/* Section 2: Academic Info */}
                   <div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
                     <div className="flex items-center gap-3 mb-6">
-                      <div className="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center shrink-0">
+                      <div className="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
-                        <BookOpen className="w-5 h-5 text-orange-400" />
+                        <BookOpen className="w-5 h-5 text-indigo-500" />
                       </div>
                       <h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Academic Information</h3>
                     </div>
                     <div className="flex flex-col gap-4">
-                      <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
+                      <div className="p-5 rounded-xl bg-indigo-50/30 border border-indigo-100/50">
-                        <p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
+                        <p className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
                         <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.subjectsHandling || 'Not specified'}</p>
                       </div>
                       <div className="p-5 rounded-xl bg-teal-50/30 border border-teal-100/50">
@@ -239,8 +239,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                         <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.researchAreas || 'Not specified'}</p>
                       </div>
                       {faculty.studentsGuided && (
-                        <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
+                        <div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50">
-                          <p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
+                          <p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
                           <div className="flex gap-8">
                             <div className="flex flex-col">
                               <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.ug}</span> 
@@ -250,45 +250,17 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                               <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.pg}</span> 
                               <span className="text-xs font-semibold text-[#64748B]">PG</span>
                             </div>
-                            {faculty.studentsGuided.phd && (
                             <div className="flex flex-col">
                               <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.phd}</span> 
-                                <span className="text-xs font-semibold text-[#64748B]">PhD</span>
+                              <span className="text-xs font-semibold text-[#64748B]">Ph.D.</span>
                             </div>
-                            )}
                           </div>
                         </div>
                       )}
                     </div>
                   </div>
 
-                  {/* Section 3: Office & Availability */}
+                  {/* Section 3: Achievements (Render only if present) */}
-                  <div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
-                    <div className="flex items-center gap-3 mb-6">
-                      <div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center shrink-0">
-                        <MapPin className="w-5 h-5 text-[#FF7A00]" />
-                      </div>
-                      <h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Office & Availability</h3>
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                      <div className="p-5 rounded-xl bg-gray-50/80 border border-gray-100 flex items-start gap-4">
-                        <Clock className="w-6 h-6 text-[#FF7A00] shrink-0 mt-0.5" />
-                        <div>
-                          <p className="text-xs font-bold text-[#94A3B8] uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Hours</p>
-                          <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.officeHours || 'Not specified'}</p>
-                        </div>
-                      </div>
-                      <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50 flex items-start gap-4">
-                        <Building2 className="w-6 h-6 text-orange-500 shrink-0 mt-0.5" />
-                        <div>
-                          <p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
-                          <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office || 'Not specified'}</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Section 4: Achievements (Render only if present) */}
                   {(faculty.achievements || faculty.publications) && (
                     <div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
                       <div className="flex items-center gap-3 mb-6">
@@ -338,10 +310,10 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                           <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.officeHours || 'Not specified'}</p>
                         </div>
                       </div>
-                      <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50 flex items-start gap-4">
+                      <div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50 flex items-start gap-4">
-                        <Building2 className="w-6 h-6 text-orange-500 shrink-0 mt-0.5" />
+                        <Building2 className="w-6 h-6 text-blue-500 shrink-0 mt-0.5" />
                         <div>
-                          <p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
+                          <p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
                           <p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office || 'Not specified'}</p>
                         </div>
                       </div>

src/components/Footer/Footer.tsx

@@ -1,52 +1,121 @@
-import { GraduationCap, MapPin, Phone, Mail } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { GraduationCap, MapPin, Phone, Mail, ArrowRight } from 'lucide-react';
+
+const quickLinks = [
+  { label: 'Home', path: '/' },
+  { label: 'Notes & PYQs', path: '/notes' },
+  { label: 'RIT Chatbot', path: '/ai-assistant' },
+  { label: '3D Campus Map', path: '/campus' },
+  { label: 'Bus Routes', path: '/bus-routes' },
+  { label: 'Faculty Directory', path: '/faculty' },
+  { label: 'Events', path: '/events' },
+  { label: 'Community', path: '/community' },
+  { label: 'Dev Hub', path: '/collab' },
+];
 
 export default function Footer() {
   return (
-    <footer className="bg-[#0F172A] text-white border-t border-slate-800">
+    <footer className="bg-[#1E293B] text-white">
+      {/* CTA Banner */}
+      <div style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} className="py-12">
+        <div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6">
+          <div>
+            <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
+              Ready to explore RIT?
+            </h3>
+            <p className="text-orange-100 mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
+              Everything a fresher needs — all in one place.
+            </p>
+          </div>
+          <Link
+            to="/ai-assistant"
+            className="flex items-center gap-2 bg-white text-[#F97316] px-6 py-3 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5"
+            style={{ fontFamily: 'Poppins, sans-serif' }}
+          >
+            Ask Chatbot
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+        </div>
+      </div>
+
       {/* Main Footer */}
-      <div className="container-custom py-6 sm:py-8 px-4">
+      <div className="container-custom py-14">
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
           {/* Brand */}
-          <div className="max-w-md">
+          <div>
-            <div className="flex items-center gap-2.5 mb-2.5">
+            <div className="flex items-center gap-2.5 mb-4">
-              <div className="w-9 h-9 rounded-xl flex items-center justify-center bg-[#C25E17] border border-orange-500/40 text-white shadow-md">
+              <div
-                <GraduationCap className="w-4 h-4" />
+                className="w-10 h-10 rounded-xl flex items-center justify-center"
+                style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
+              >
+                <GraduationCap className="w-5 h-5 text-white" />
               </div>
               <div>
                 <div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div>
                 <div className="text-[10px] text-slate-400">Rajalakshmi Institute of Technology</div>
               </div>
             </div>
-            <p className="text-slate-400 text-xs sm:text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+            <p className="text-slate-400 text-sm leading-relaxed mb-5" style={{ fontFamily: 'Inter, sans-serif' }}>
               Your all-in-one guide to campus life at RIT. Notes, chatbot, bus routes, 3D campus map, and developer hub — built for students.
             </p>
           </div>
 
+          {/* Quick Links */}
+          <div>
+            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
+              Quick Navigation
+            </h4>
+            <div className="grid grid-cols-2 gap-2">
+              {quickLinks.map((link) => (
+                <Link
+                  key={link.path}
+                  to={link.path}
+                  className="text-slate-400 hover:text-[#F97316] text-sm transition-colors flex items-center gap-1.5 group py-1"
+                  style={{ fontFamily: 'Inter, sans-serif' }}
+                >
+                  <span className="w-1 h-1 rounded-full bg-[#F97316] opacity-0 group-hover:opacity-100 transition-opacity" />
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+
           {/* Contact */}
-          <div className="shrink-0">
+          <div>
-            <h4 className="text-white font-semibold mb-2.5 text-xs sm:text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            <h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
               Campus Location & Contact
             </h4>
-            <ul className="space-y-2 text-xs sm:text-sm">
+            <ul className="space-y-3">
-              <li className="flex items-start gap-2.5 text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <li className="flex items-start gap-3 text-slate-400 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
-                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-orange-400" />
+                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-[#F97316]" />
                 <span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
               </li>
-              <li className="flex items-center gap-2.5 text-slate-400">
+              <li className="flex items-center gap-3 text-slate-400 text-sm">
-                <Phone className="w-4 h-4 shrink-0 text-orange-400" />
+                <Phone className="w-4 h-4 shrink-0 text-[#F97316]" />
-                <a href="tel:+914423422890" className="hover:text-orange-400 transition-colors">+91 44 2342 2890</a>
+                <a href="tel:+914423422890" className="hover:text-[#F97316] transition-colors">+91 44 2342 2890</a>
               </li>
-              <li className="flex items-center gap-2.5 text-slate-400">
+              <li className="flex items-center gap-3 text-slate-400 text-sm">
-                <Mail className="w-4 h-4 shrink-0 text-orange-400" />
+                <Mail className="w-4 h-4 shrink-0 text-[#F97316]" />
-                <a href="mailto:info@rit.ac.in" className="hover:text-orange-400 transition-colors">info@rit.ac.in</a>
+                <a href="mailto:info@rit.ac.in" className="hover:text-[#F97316] transition-colors">info@rit.ac.in</a>
               </li>
             </ul>
           </div>
         </div>
+      </div>
 
-        <div className="mt-6 pt-4 border-t border-slate-800/80 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
+      {/* Bottom Bar */}
-          <span>© {new Date().getFullYear()} Rajalakshmi Institute of Technology. All rights reserved.</span>
+      <div className="border-t border-slate-700">
-          <span className="text-slate-400">RIT Student Portal v2.0</span>
+        <div className="container-custom py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
+          <p className="text-slate-500 text-xs" style={{ fontFamily: 'Inter, sans-serif' }}>
+            © 2025 RIT Freshers Hub. All rights reserved.
+          </p>
+          <div className="flex items-center gap-4 text-xs text-slate-500">
+            <a href="#" className="hover:text-[#F97316] transition-colors">Privacy Policy</a>
+            <span>·</span>
+            <a href="#" className="hover:text-[#F97316] transition-colors">Terms of Use</a>
+            <span>·</span>
+            <a href="#" className="hover:text-[#F97316] transition-colors">Accessibility</a>
+          </div>
         </div>
       </div>
     </footer>

src/components/Header/Header.tsx

@@ -1,668 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useNavigate, useLocation, Link } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Search,
-  Bell,
-  Menu,
-  Calendar,
-  X,
-  BookOpen,
-  Bus,
-  Users,
-  Calendar as ClubIcon,
-  Code2,
-  Trophy,
-  Bot,
-  LayoutDashboard,
-  Wrench,
-  MapPin,
-  MessageSquare,
-  Rocket,
-  GitBranch,
-  LogIn,
-  LogOut,
-  ChevronRight,
-  ChevronDown,
-  Grid,
-} from 'lucide-react';
-import { useAuth } from '@/context/AuthContext';
-import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
-
-interface HeaderProps {
-  onToggleSidebar?: () => void;
-}
-
-interface NotificationItem {
-  id: string;
-  title: string;
-  message: string;
-  time: string;
-  read: boolean;
-  type: 'academic' | 'dev' | 'campus' | 'bus';
-}
-
-interface NavItem {
-  label: string;
-  path: string;
-  icon: any;
-  desc?: string;
-  highlight?: boolean;
-}
-
-interface NavGroup {
-  title: string;
-  items: NavItem[];
-}
-
-export default function Header({}: HeaderProps) {
-  const [isNavOpen, setIsNavOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const [isNotifOpen, setIsNotifOpen] = useState(false);
-  const [currentDate, setCurrentDate] = useState('');
-  
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
-  
-  const notifRef = useRef<HTMLDivElement>(null);
-  const searchRef = useRef<HTMLDivElement>(null);
-  const navRef = useRef<HTMLDivElement>(null);
-
-  const [notifications, setNotifications] = useState<NotificationItem[]>([
-    {
-      id: '1',
-      title: 'Moodle Notes & PYQs Updated',
-      message: '1st to 8th Semester notes and previous year question papers are published on Moodle.',
-      time: '10m ago',
-      read: false,
-      type: 'academic',
-    },
-    {
-      id: '2',
-      title: 'Dev Collab Hub Open',
-      message: 'Post open-source project ideas or find co-developers across departments.',
-      time: '1h ago',
-      read: false,
-      type: 'dev',
-    },
-    {
-      id: '3',
-      title: 'LeetCode Campus Rankings Live',
-      message: 'Monthly competitive programming leaderboard has been updated.',
-      time: '3h ago',
-      read: false,
-      type: 'academic',
-    },
-    {
-      id: '4',
-      title: 'Campus Bus Schedule Confirmed',
-      message: 'All 4 campus bus routes operating on 7:00 AM morning schedule.',
-      time: '1d ago',
-      read: true,
-      type: 'bus',
-    },
-  ]);
-
-  const unreadCount = notifications.filter((n) => !n.read).length;
-
-  const navGroups: NavGroup[] = [
-    {
-      title: 'ACADEMICS & PORTAL',
-      items: [
-        { label: 'Dashboard', path: '/', icon: LayoutDashboard, desc: 'Campus Overview' },
-        { label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Semester Study Materials' },
-        { label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench, desc: 'Calculators & Converters' },
-        { label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'Instant AI Campus Q&A' },
-      ],
-    },
-    {
-      title: 'CAMPUS & UTILITIES',
-      items: [
-        { label: 'Bus Tracker', path: '/bus-routes', icon: Bus, desc: 'Routes & Timings' },
-        { label: 'Campus Map', path: '/campus', icon: MapPin, desc: '3D Campus Map' },
-        { label: 'Faculty Directory', path: '/faculty', icon: Users, desc: 'Staff Contacts & Hours' },
-        { label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Official Societies & Leads' },
-      ],
-    },
-    {
-      title: 'COMMUNITY & DEV',
-      items: [
-        { label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Answers & Advice' },
-        { label: 'Dev Collab Hub', path: '/collab', icon: Code2, desc: 'Find Project Teammates', highlight: true },
-        { label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Campus Coding Arena' },
-        { label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures & MVP' },
-      ],
-    },
-  ];
-
-  const checkIsActive = (path: string) => {
-    if (path === '/') return location.pathname === '/';
-    return location.pathname.startsWith(path.split('?')[0]);
-  };
-
-  useEffect(() => {
-    const now = new Date();
-    const formatted = now.toLocaleDateString('en-US', {
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-    setCurrentDate(formatted);
-  }, []);
-
-  // Listen for ⌘K shortcut and Escape key
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        setIsSearchOpen((prev) => !prev);
-      }
-      if (e.key === 'Escape') {
-        setIsNavOpen(false);
-        setIsSearchOpen(false);
-        setIsNotifOpen(false);
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  // Close dropdowns on outside click
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (notifRef.current && !notifRef.current.contains(e.target as Node)) {
-        setIsNotifOpen(false);
-      }
-      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
-        setIsSearchOpen(false);
-      }
-      if (navRef.current && !navRef.current.contains(e.target as Node)) {
-        setIsNavOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  // Auto close nav on location change
-  useEffect(() => {
-    setIsNavOpen(false);
-  }, [location.pathname, location.search]);
-
-  const markAllAsRead = () => {
-    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
-  };
-
-  const clearNotifications = () => {
-    setNotifications([]);
-  };
-
-  // Search indexing & results calculation
-  const searchResults = (() => {
-    if (!searchQuery.trim()) return [];
-    const q = searchQuery.toLowerCase();
-    const results: { title: string; desc: string; path: string; icon: any; category: string }[] = [];
-
-    // Check modules
-    if ('notes pyqs moodle syllabus question paper'.includes(q)) {
-      results.push({ title: 'Academic Notes & PYQs', desc: 'Semester course notes & past papers', path: '/notes', icon: BookOpen, category: 'Academics' });
-    }
-    if ('bus route timing transport travel pickup'.includes(q)) {
-      results.push({ title: 'Campus Bus Routes', desc: 'Schedules and stops for all campus buses', path: '/bus-routes', icon: Bus, category: 'Utilities' });
-    }
-    if ('chatbot assistant question help contact rules'.includes(q)) {
-      results.push({ title: 'Campus Chatbot', desc: 'Instant Q&A about campus life & rules', path: '/ai-assistant', icon: Bot, category: 'Academics' });
-    }
-    if ('collab dev project developer team coding github'.includes(q)) {
-      results.push({ title: 'Dev Collab Hub', desc: 'Find co-developers & build projects', path: '/collab', icon: Code2, category: 'Dev' });
-    }
-    if ('leetcode ranking leaderboard coding rank'.includes(q)) {
-      results.push({ title: 'LeetCode Leaderboard', desc: 'Campus competitive coding rankings', path: '/leetcode', icon: Trophy, category: 'Dev' });
-    }
-
-    // Search Bus Routes
-    BUS_ROUTES.forEach((r) => {
-      if (r.name.toLowerCase().includes(q) || r.number.toLowerCase().includes(q) || r.from.toLowerCase().includes(q)) {
-        results.push({ title: `${r.number}: ${r.name}`, desc: `Departure: ${r.departureTime} from ${r.from}`, path: '/bus-routes', icon: Bus, category: 'Bus Route' });
-      }
-    });
-
-    // Search Faculty
-    FACULTY_DATA.forEach((f) => {
-      if (f.name.toLowerCase().includes(q) || f.department.toLowerCase().includes(q) || (f.specialization && f.specialization.toLowerCase().includes(q))) {
-        results.push({ title: f.name, desc: `${f.designation} — ${f.department}`, path: '/faculty', icon: Users, category: 'Faculty' });
-      }
-    });
-
-    // Search Clubs
-    CLUBS_DATA.forEach((c) => {
-      if (c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q)) {
-        results.push({ title: c.name, desc: c.description, path: '/events', icon: ClubIcon, category: 'Club' });
-      }
-    });
-
-    return results.slice(0, 6);
-  })();
-
-  const handleSelectResult = (path: string) => {
-    setIsSearchOpen(false);
-    setSearchQuery('');
-    navigate(path);
-  };
-
-  // 5 Key Quick Links for PC header center
-  const mainDesktopLinks = [
-    { label: 'Dashboard', path: '/', icon: LayoutDashboard },
-    { label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
-    { label: 'Bus Tracker', path: '/bus-routes', icon: Bus },
-    { label: 'Dev Collab', path: '/collab', icon: Code2 },
-    { label: 'LeetCode', path: '/leetcode', icon: Trophy },
-  ];
-
-  return (
-    <header className="sticky top-0 z-40 w-full bg-[#0F172A]/95 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-6 py-2 shadow-md text-white">
-      <div className="max-w-7xl mx-auto flex items-center justify-between gap-2 sm:gap-4">
-        
-        {/* Left Side: Brand Logo & Top Navigation Toggle Button */}
-        <div className="flex items-center gap-2 sm:gap-3 shrink-0">
-          <Link to="/" className="flex items-center gap-2 group shrink-0">
-            <div className="p-1 rounded-xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
-              <img
-                src="/logo.png"
-                alt="RIT Logo"
-                className="w-7 h-7 object-contain rounded-full"
-              />
-            </div>
-            <div className="flex flex-col min-w-0">
-              <span className="font-bold text-white text-base tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                RIT Portal
-              </span>
-              <span className="text-[9px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
-                Freshers Hub
-              </span>
-            </div>
-          </Link>
-
-          {/* Navigation Dropdown Toggle Button */}
-          <div className="relative" ref={navRef}>
-            <button
-              onClick={() => setIsNavOpen((prev) => !prev)}
-              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border text-xs font-bold transition-all cursor-pointer shadow-sm ${
-                isNavOpen
-                  ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white border-orange-400/50'
-                  : 'bg-slate-900/90 hover:bg-slate-800 text-slate-200 border-slate-800 hover:border-slate-700'
-              }`}
-              style={{ fontFamily: 'Poppins, sans-serif' }}
-              title="Toggle Navigation Menu"
-            >
-              <Grid className="w-3.5 h-3.5 text-orange-400" />
-              <span className="hidden xs:inline text-[11.5px]">Navigation</span>
-              <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${isNavOpen ? 'rotate-180' : ''}`} />
-            </button>
-          </div>
-        </div>
-
-        {/* Center: Desktop Top Quick Links Strip (Clean 5 Links, No Truncation) */}
-        <nav className="hidden lg:flex items-center gap-1 xl:gap-2 shrink-0">
-          {mainDesktopLinks.map((item) => {
-            const isActive = checkIsActive(item.path);
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.path}
-                to={item.path}
-                className={`flex items-center gap-1.5 px-2.5 xl:px-3 py-1.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
-                  isActive
-                    ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-xs border border-orange-400/40'
-                    : 'text-slate-300 hover:text-white hover:bg-slate-800/60 border border-transparent'
-                }`}
-                style={{ fontFamily: 'Poppins, sans-serif' }}
-              >
-                <Icon className={`w-3.5 h-3.5 shrink-0 ${isActive ? 'text-white' : 'text-orange-400'}`} />
-                <span>{item.label}</span>
-              </Link>
-            );
-          })}
-        </nav>
-
-        {/* Right Controls */}
-        <div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
-          
-          {/* Global Search Input */}
-          <div className="relative min-w-0 w-24 xs:w-32 sm:w-40 md:w-48" ref={searchRef}>
-            <div
-              onClick={() => setIsSearchOpen(true)}
-              className="relative w-full cursor-text"
-            >
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setIsSearchOpen(true);
-                }}
-                onFocus={() => setIsSearchOpen(true)}
-                placeholder="Search..."
-                className="w-full pl-8 pr-6 sm:pr-8 py-1.5 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-orange-500/60 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
-                style={{ fontFamily: 'Inter, sans-serif' }}
-              />
-              <span className="hidden sm:inline-flex absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1 py-0.5 rounded shadow-2xs">
-                ⌘K
-              </span>
-            </div>
-
-            {/* Search Live Results Overlay */}
-            {isSearchOpen && (
-              <div className="absolute top-full right-0 mt-2 w-72 sm:w-[380px] bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-2 text-left">
-                <div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
-                  <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
-                    {searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
-                  </span>
-                  <button
-                    onClick={() => setIsSearchOpen(false)}
-                    className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-slate-800"
-                  >
-                    <X className="w-3.5 h-3.5" />
-                  </button>
-                </div>
-
-                <div className="max-h-72 overflow-y-auto custom-scrollbar p-1 space-y-1">
-                  {searchResults.length > 0 ? (
-                    searchResults.map((res, i) => {
-                      const Icon = res.icon;
-                      return (
-                        <div
-                          key={i}
-                          onClick={() => handleSelectResult(res.path)}
-                          className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group"
-                        >
-                          <div className="flex items-center gap-3 min-w-0">
-                            <div className="w-8 h-8 rounded-lg bg-orange-500/10 text-orange-400 flex items-center justify-center shrink-0 border border-orange-500/30">
-                              <Icon className="w-4 h-4" />
-                            </div>
-                            <div className="flex flex-col min-w-0">
-                              <span className="text-xs font-bold text-white group-hover:text-orange-400 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                {res.title}
-                              </span>
-                              <span className="text-[11px] text-slate-400 truncate">{res.desc}</span>
-                            </div>
-                          </div>
-                          <span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0 border border-slate-700">
-                            {res.category}
-                          </span>
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <div className="p-4 text-center space-y-2">
-                      <span className="text-xs text-slate-400 block">
-                        {searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'}
-                      </span>
-                      <div className="flex flex-wrap justify-center gap-1.5 pt-1">
-                        <button
-                          onClick={() => handleSelectResult('/notes')}
-                          className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
-                        >
-                          Notes
-                        </button>
-                        <button
-                          onClick={() => handleSelectResult('/bus-routes')}
-                          className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
-                        >
-                          Bus Routes
-                        </button>
-                        <button
-                          onClick={() => handleSelectResult('/faculty')}
-                          className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
-                        >
-                          Faculty
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Date Display Badge */}
-          <div className="hidden xl:flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800 whitespace-nowrap">
-            <Calendar className="w-3.5 h-3.5 text-orange-400" />
-            <span>{currentDate}</span>
-          </div>
-
-          {/* Notifications Dropdown */}
-          <div className="relative" ref={notifRef}>
-            <button
-              onClick={() => setIsNotifOpen((prev) => !prev)}
-              className="relative p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors cursor-pointer border border-slate-800"
-              title="Notifications"
-            >
-              <Bell className="w-4 h-4" />
-              {unreadCount > 0 && (
-                <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-orange-500 ring-2 ring-[#0F172A]" />
-              )}
-            </button>
-
-            {/* Notifications Dropdown Panel */}
-            {isNotifOpen && (
-              <div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-3 text-left">
-                <div className="flex items-center justify-between pb-2 border-b border-slate-800">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-bold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                      Notifications
-                    </span>
-                    {unreadCount > 0 && (
-                      <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-orange-600 text-white">
-                        {unreadCount} new
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    {unreadCount > 0 && (
-                      <button
-                        onClick={markAllAsRead}
-                        className="text-[11px] font-semibold text-orange-400 hover:text-orange-300"
-                      >
-                        Mark all read
-                      </button>
-                    )}
-                    {notifications.length > 0 && (
-                      <button
-                        onClick={clearNotifications}
-                        className="text-[11px] font-semibold text-slate-400 hover:text-slate-300"
-                      >
-                        Clear
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="max-h-72 overflow-y-auto custom-scrollbar pt-2 space-y-2">
-                  {notifications.length > 0 ? (
-                    notifications.map((n) => (
-                      <div
-                        key={n.id}
-                        className={`p-2.5 rounded-xl border transition-colors ${
-                          n.read ? 'bg-slate-900/40 border-slate-800' : 'bg-slate-900/90 border-slate-700'
-                        }`}
-                      >
-                        <div className="flex items-center justify-between mb-1">
-                          <span className="text-xs font-bold text-white leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                            {n.title}
-                          </span>
-                          <span className="text-[10px] text-slate-400 font-medium">{n.time}</span>
-                        </div>
-                        <p className="text-[11px] text-slate-300 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
-                          {n.message}
-                        </p>
-                      </div>
-                    ))
-                  ) : (
-                    <div className="p-6 text-center text-xs text-slate-400">
-                      No new notifications
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* User Auth Profile / Sign In */}
-          {isAuthenticated && user ? (
-            <div className="flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800 shrink-0">
-              {user.pictureUrl ? (
-                <img
-                  src={user.pictureUrl}
-                  alt={user.name}
-                  className="w-7 h-7 sm:w-8 sm:h-8 rounded-full border border-slate-700 object-cover shrink-0"
-                  referrerPolicy="no-referrer"
-                />
-              ) : (
-                <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-orange-500/40">
-                  {user.name.charAt(0)}
-                </div>
-              )}
-              <button
-                onClick={logout}
-                title="Sign Out"
-                className="p-1 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
-              >
-                <LogOut className="w-4 h-4" />
-              </button>
-            </div>
-          ) : (
-            <button
-              onClick={loginWithGoogle}
-              className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md shrink-0 whitespace-nowrap"
-              style={{ fontFamily: 'Poppins, sans-serif' }}
-            >
-              <LogIn className="w-3.5 h-3.5 shrink-0" />
-              <span>Sign In</span>
-            </button>
-          )}
-
-        </div>
-      </div>
-
-      {/* ─── FULL TOP NAVIGATION DROPDOWN DRAWER (DESKTOP & MOBILE) ─── */}
-      <AnimatePresence>
-        {isNavOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -10, scaleY: 0.97 }}
-            animate={{ opacity: 1, y: 0, scaleY: 1 }}
-            exit={{ opacity: 0, y: -10, scaleY: 0.97 }}
-            transition={{ duration: 0.18, ease: 'easeOut' }}
-            className="absolute top-full inset-x-0 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl z-50 p-3 sm:p-5 md:p-6 max-h-[80vh] overflow-y-auto custom-scrollbar"
-          >
-            <div className="max-w-7xl mx-auto space-y-4">
-              
-              {/* Header Bar inside Drawer */}
-              <div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
-                <span className="text-[11px] font-extrabold text-orange-400 uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  All Campus Modules & Services
-                </span>
-                <button
-                  onClick={() => setIsNavOpen(false)}
-                  className="text-xs font-semibold px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-colors cursor-pointer"
-                >
-                  Close Menu ✕
-                </button>
-              </div>
-
-              {/* Navigation Grid (1 Column Mobile, 3 Columns Desktop) */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-5">
-                {navGroups.map((group) => (
-                  <div key={group.title} className="flex flex-col gap-1.5 bg-slate-900/70 p-3 rounded-2xl border border-slate-800/80">
-                    <span
-                      className="px-2 text-[10px] sm:text-[11px] font-bold text-orange-400 tracking-wider uppercase mb-0.5 flex items-center justify-between"
-                      style={{ fontFamily: 'Poppins, sans-serif' }}
-                    >
-                      <span>{group.title}</span>
-                    </span>
-
-                    <div className="space-y-1">
-                      {group.items.map((item) => {
-                        const isActive = checkIsActive(item.path);
-                        const Icon = item.icon;
-
-                        return (
-                          <Link
-                            key={item.path}
-                            to={item.path}
-                            onClick={() => setIsNavOpen(false)}
-                            className={`flex items-center justify-between p-2.5 rounded-xl transition-all duration-200 group ${
-                              isActive
-                                ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-md border border-orange-500/50'
-                                : 'hover:bg-slate-800/80 text-slate-200'
-                            }`}
-                          >
-                            <div className="flex items-center gap-3 min-w-0">
-                              <div className={`p-1.5 rounded-lg shrink-0 ${
-                                isActive ? 'bg-white/20 text-white' : 'bg-slate-800 text-orange-400 group-hover:bg-slate-700'
-                              }`}>
-                                <Icon className="w-4 h-4" />
-                              </div>
-                              <div className="flex flex-col min-w-0">
-                                <div className="flex items-center gap-2">
-                                  <span className="text-xs font-bold truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                                    {item.label}
-                                  </span>
-                                  {item.highlight && !isActive && (
-                                    <span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse shrink-0" />
-                                  )}
-                                </div>
-                                {item.desc && (
-                                  <span className={`text-[10px] sm:text-[10.5px] truncate ${isActive ? 'text-orange-100' : 'text-slate-400'}`}>
-                                    {item.desc}
-                                  </span>
-                                )}
-                              </div>
-                            </div>
-                            <span className={`text-xs ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
-                              →
-                            </span>
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Dev Collab Hub CTA Banner */}
-              <div className="pt-2 border-t border-slate-800/80">
-                <Link
-                  to="/collab"
-                  onClick={() => setIsNavOpen(false)}
-                  className="w-full flex items-center justify-between p-3 sm:p-3.5 rounded-2xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white group transition-all duration-200 shadow-lg shadow-orange-500/10"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
-                      <GitBranch className="w-4.5 h-4.5" />
-                    </div>
-                    <div className="flex flex-col text-left min-w-0">
-                      <span className="text-xs font-bold leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                        Developer Collaboration Hub
-                      </span>
-                      <span className="text-[10.5px] sm:text-[11px] text-orange-100/90 truncate">Find co-developers & build open-source projects</span>
-                    </div>
-                  </div>
-                  <span className="text-[11px] sm:text-xs font-bold px-3 py-1 rounded-xl bg-white/20 hover:bg-white/30 transition-colors shrink-0 ml-2">
-                    Launch Hub →
-                  </span>
-                </Link>
-              </div>
-
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </header>
-  );
-}

src/components/Sidebar/Sidebar.tsx

@@ -1,294 +0,0 @@
-import { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  LayoutDashboard,
-  BookOpen,
-  Wrench,
-  Bot,
-  MapPin,
-  Bus,
-  Users,
-  Calendar,
-  MessageSquare,
-  Code2,
-  Trophy,
-  Rocket,
-  LogOut,
-  LogIn,
-  ShieldCheck,
-  ChevronLeft,
-  ChevronRight,
-  GitBranch,
-  X
-} from 'lucide-react';
-import { useAuth } from '@/context/AuthContext';
-
-interface SidebarProps {
-  isOpen: boolean;
-  onToggle: () => void;
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-}
-
-interface NavItem {
-  label: string;
-  path: string;
-  icon: any;
-  highlight?: boolean;
-}
-
-interface NavGroup {
-  title: string;
-  items: NavItem[];
-}
-
-export default function Sidebar({
-  isOpen,
-  onToggle,
-  isCollapsed,
-  onToggleCollapse,
-}: SidebarProps) {
-  const location = useLocation();
-  const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
-
-  const checkIsActive = (linkPath: string) => {
-    const [pathName, searchString] = linkPath.split('?');
-    if (location.pathname !== pathName) return false;
-
-    if (pathName === '/notes') {
-      const params = new URLSearchParams(location.search);
-      const hasToolkit = params.has('toolkit') || params.get('section') === 'toolkit';
-      if (searchString) {
-        return hasToolkit;
-      } else {
-        return !hasToolkit;
-      }
-    }
-
-    return true;
-  };
-
-  const navGroups: NavGroup[] = [
-    {
-      title: 'ACADEMICS & PORTAL',
-      items: [
-        { label: 'Dashboard', path: '/', icon: LayoutDashboard },
-        { label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
-        { label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench },
-        { label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot },
-      ],
-    },
-    {
-      title: 'CAMPUS & UTILITIES',
-      items: [
-        { label: 'Bus Tracker', path: '/bus-routes', icon: Bus },
-        { label: 'Campus Map', path: '/campus', icon: MapPin },
-        { label: 'Faculty Directory', path: '/faculty', icon: Users },
-        { label: 'Student Clubs', path: '/events', icon: Calendar },
-      ],
-    },
-    {
-      title: 'COMMUNITY & DEV',
-      items: [
-        { label: 'Freshers Q&A', path: '/community', icon: MessageSquare },
-        { label: 'Dev Collab Hub', path: '/collab', icon: Code2, highlight: true },
-        { label: 'LeetCode Board', path: '/leetcode', icon: Trophy },
-        { label: 'RAISE Incubator', path: '/raise', icon: Rocket },
-      ],
-    },
-  ];
-
-  return (
-    <>
-      {/* Mobile Backdrop Overlay */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={onToggle}
-            className="fixed inset-0 bg-black/60 backdrop-blur-xs z-40 lg:hidden"
-          />
-        )}
-      </AnimatePresence>
-
-      {/* Main Sidebar Container - Sleek Professional Deep Indigo */}
-      <aside
-        className={`fixed top-0 left-0 z-50 h-screen bg-[#0F172A] text-white transition-all duration-300 ease-in-out lg:translate-x-0 ${
-          isOpen ? 'translate-x-0' : '-translate-x-full'
-        } ${
-          isCollapsed ? 'w-20' : 'w-64 xl:w-72'
-        } flex flex-col justify-between border-r border-slate-800 shadow-[8px_0_30px_rgba(0,0,0,0.3)]`}
-      >
-        {/* Top Branding & Collapse Button */}
-        <div className="p-4 sm:p-5 flex flex-col gap-5">
-          <div className="flex items-center justify-between">
-            <Link to="/" className="flex items-center gap-3 group min-w-0">
-              <div className="p-2 rounded-2xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
-                <img
-                  src="/logo.png"
-                  alt="RIT Logo"
-                  className="w-7 h-7 object-contain rounded-full"
-                />
-              </div>
-              {!isCollapsed && (
-                <div className="flex flex-col min-w-0">
-                  <span className="font-bold text-white text-lg tracking-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                    RIT Portal
-                  </span>
-                  <span className="text-[10px] text-slate-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
-                    Freshers Hub
-                  </span>
-                </div>
-              )}
-            </Link>
-
-            {/* Mobile Close Button */}
-            <button
-              onClick={onToggle}
-              className="lg:hidden p-1.5 rounded-xl bg-slate-800 text-slate-200 hover:bg-slate-700"
-            >
-              <X className="w-5 h-5" />
-            </button>
-
-            {/* Desktop Collapse Toggle Button */}
-            <button
-              onClick={onToggleCollapse}
-              className="hidden lg:flex p-1.5 rounded-xl bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700/60 transition-colors"
-              title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
-            >
-              {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
-            </button>
-          </div>
-
-          {/* Quick Dev Collab Launch CTA inside Sidebar (Expanded only) */}
-          {!isCollapsed && (
-            <Link
-              to="/collab"
-              className="w-full flex items-center justify-between p-3 rounded-2xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white group transition-all duration-200 shadow-md shadow-slate-950/50"
-            >
-              <div className="flex items-center gap-2.5 min-w-0">
-                <div className="w-7 h-7 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
-                  <GitBranch className="w-4 h-4" />
-                </div>
-                <div className="flex flex-col text-left min-w-0">
-                  <span className="text-xs font-bold leading-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                    Dev Collab Hub
-                  </span>
-                  <span className="text-[10px] text-orange-100/90 truncate">Co-Developer Projects</span>
-                </div>
-              </div>
-              <ChevronRight className="w-4 h-4 text-orange-100 group-hover:translate-x-0.5 transition-transform" />
-            </Link>
-          )}
-
-          {/* Navigation Groups */}
-          <nav className="flex flex-col gap-5 overflow-y-auto max-h-[calc(100vh-320px)] custom-scrollbar pr-0.5">
-            {navGroups.map((group) => (
-              <div key={group.title} className="flex flex-col gap-1">
-                {!isCollapsed && (
-                  <span
-                    className="px-3 text-[10px] font-bold text-slate-400/70 tracking-widest uppercase mb-1"
-                    style={{ fontFamily: 'Inter, sans-serif' }}
-                  >
-                    {group.title}
-                  </span>
-                )}
-
-                {group.items.map((item) => {
-                  const isActive = checkIsActive(item.path);
-                  const Icon = item.icon;
-
-                  return (
-                    <Link
-                      key={item.path}
-                      to={item.path}
-                      title={isCollapsed ? item.label : undefined}
-                      className={`relative flex items-center ${
-                        isCollapsed ? 'justify-center px-0 py-3' : 'justify-between px-3 py-2.5'
-                      } rounded-xl text-xs font-semibold transition-all duration-200 group ${
-                        isActive
-                          ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-sm border border-orange-500/50'
-                          : 'text-slate-300 hover:text-white hover:bg-slate-800/60'
-                      }`}
-                      style={{ fontFamily: 'Poppins, sans-serif' }}
-                    >
-                      <div className="flex items-center gap-3">
-                        <Icon
-                          className={`w-4 h-4 shrink-0 ${
-                            isActive ? 'text-white' : 'text-slate-400 group-hover:text-slate-200'
-                          }`}
-                        />
-                        {!isCollapsed && <span>{item.label}</span>}
-                      </div>
-
-                      {!isCollapsed && item.highlight && !isActive && (
-                        <span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse" />
-                      )}
-                    </Link>
-                  );
-                })}
-              </div>
-            ))}
-          </nav>
-        </div>
-
-        {/* Footer User Profile & Auth Section */}
-        <div className="p-3 border-t border-slate-800 bg-slate-950/60">
-          {isAuthenticated && user ? (
-            <div className={`flex items-center ${isCollapsed ? 'justify-center p-2' : 'justify-between p-2.5'} rounded-2xl bg-white/5 border border-white/10`}>
-              <div className="flex items-center gap-2.5 min-w-0">
-                {user.pictureUrl ? (
-                  <img
-                    src={user.pictureUrl}
-                    alt={user.name}
-                    className="w-8 h-8 rounded-xl border border-orange-500/40 object-cover shrink-0"
-                    referrerPolicy="no-referrer"
-                  />
-                ) : (
-                  <div className="w-8 h-8 rounded-xl bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-orange-500/40">
-                    {user.name.charAt(0).toUpperCase()}
-                  </div>
-                )}
-                {!isCollapsed && (
-                  <div className="flex flex-col min-w-0 text-left">
-                    <span className="text-xs font-bold text-white truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                      {user.name}
-                    </span>
-                    <span className="text-[10px] text-slate-400 truncate">
-                      {isVerifiedStudent ? 'Verified Student' : 'RIT Account'}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-              {!isCollapsed && (
-                <button
-                  onClick={logout}
-                  title="Sign Out"
-                  className="p-1.5 rounded-xl hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
-                >
-                  <LogOut className="w-4 h-4" />
-                </button>
-              )}
-            </div>
-          ) : (
-            <button
-              onClick={loginWithGoogle}
-              title={isCollapsed ? 'Student Sign In' : undefined}
-              className={`w-full flex items-center justify-center gap-2 ${
-                isCollapsed ? 'p-2.5' : 'p-2.5'
-              } rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md`}
-              style={{ fontFamily: 'Poppins, sans-serif' }}
-            >
-              <LogIn className="w-4 h-4 shrink-0" />
-              {!isCollapsed && <span>Student Sign In</span>}
-            </button>
-          )}
-        </div>
-      </aside>
-    </>
-  );
-}

src/index.css

@@ -5,18 +5,18 @@
 @theme {
   --color-primary: #F97316;
   --color-primary-light: #FB923C;
-  --color-primary-dark: #C25E17;
+  --color-primary-dark: #EA580C;
   --color-primary-50: #FFF7ED;
   --color-primary-100: #FFEDD5;
   --color-primary-200: #FED7AA;
-  --color-secondary: #EA580C;
+  --color-secondary: #FB923C;
   --color-background: #FAFAFA;
   --color-surface: #FFFFFF;
   --color-border: #E5E7EB;
   --color-heading: #1E293B;
   --color-body: #475569;
   --color-muted: #94A3B8;
-  --color-accent: #C25E17;
+  --color-accent: #FFF7ED;
 
   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body: 'Inter', system-ui, sans-serif;
@@ -33,24 +33,19 @@
   --shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
   --shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07);
   --shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1);
+  --shadow-orange: 0 8px 30px -4px rgba(249,115,22,0.3);
 
+  --color-brand-orange: #ff5722;
+  --color-brand-pink: #e91e63;
+  --color-brand-purple: #9c27b0;
   --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Tailwind Preflight handles resets natively. Custom modifications go here: */
 
-html, body {
+html {
   scroll-behavior: smooth;
   font-size: 16px;
-  width: 100%;
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-#root {
-  width: 100%;
-  max-width: 100vw;
-  overflow-x: hidden;
 }
 
 body {
@@ -79,13 +74,14 @@ body {
 
 /* Selection */
 ::selection {
-  background-color: rgba(249, 115, 22, 0.35);
+  background-color: rgba(249, 115, 22, 0.2);
-  color: #FFFFFF;
+  color: #1E293B;
 }
 
 /* Typography base */
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-heading);
+  color: #1E293B;
   line-height: 1.2;
 }
 
@@ -160,7 +156,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .glass-dark {
-  background: rgba(15, 23, 42, 0.85);
+  background: rgba(30, 41, 59, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -182,25 +178,25 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, #C25E17, #EA580C, #F97316);
+  background: linear-gradient(135deg, #F97316, #FB923C, #FBBF24);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-/* Primary button */
+/* Orange button */
 .btn-primary {
   font-family: var(--font-button);
-  background: linear-gradient(135deg, #C25E17, #EA580C);
+  background: linear-gradient(135deg, #F97316, #FB923C);
   color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: none;
   border-radius: 12px;
   padding: 12px 28px;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(194, 94, 23, 0.4);
+  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -209,7 +205,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(234, 88, 12, 0.5);
+  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
   background: linear-gradient(135deg, #EA580C, #F97316);
 }
 
@@ -237,7 +233,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .btn-ghost:hover {
   border-color: #F97316;
-  color: #EA580C;
+  color: #F97316;
   transform: translateY(-2px);
 }
 

src/layouts/MainLayout.tsx

@@ -1,6 +1,6 @@
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useSearchParams, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import Header from '@/components/Header/Header';
+import Navbar from '@/components/Navbar/Navbar';
 import Footer from '@/components/Footer/Footer';
 
 const pageVariants = {
@@ -11,16 +11,12 @@ const pageVariants = {
 
 export default function MainLayout() {
   const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const hideFooter = location.pathname === '/notes' && searchParams.has('toolkit');
 
   return (
-    <div className="min-h-screen w-full max-w-full bg-[#F8FAFC] flex flex-col font-sans selection:bg-orange-500 selection:text-white overflow-x-hidden">
+    <div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
-      {/* Top Header Navigation */}
+      <Navbar />
-      <Header />
-
-      {/* Main Viewport Container */}
-      <div className="flex-1 flex flex-col min-w-0 w-full">
-        {/* Dynamic Page Content */}
-        <div className="flex-1 p-3 sm:p-6 lg:p-8 w-full max-w-full overflow-x-hidden">
       <AnimatePresence mode="wait">
         <motion.main
           key={location.pathname}
@@ -28,17 +24,12 @@ export default function MainLayout() {
           initial="initial"
           animate="enter"
           exit="exit"
-              transition={{ duration: 0.25, ease: 'easeInOut' }}
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
-              className="max-w-7xl mx-auto w-full"
         >
           <Outlet />
         </motion.main>
       </AnimatePresence>
-        </div>
+      {!hideFooter && <Footer />}
-
-        {/* Global Footer */}
-        <Footer />
-      </div>
     </div>
   );
 }

src/pages/Campus/Campus.tsx

@@ -20,9 +20,9 @@ interface LocationSpot {
 
 const BLUEPRINT_LEGEND = [
   { id: 'all', label: 'All Locations', color: '#F97316', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
-  { id: 'a-block', label: 'A Block', color: '#C25E17', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
+  { id: 'a-block', label: 'A Block', color: '#60A5FA', bg: 'bg-blue-50/80', text: 'text-blue-900', border: 'border-blue-200' },
-  { id: 'b-block', label: 'B Block', color: '#EA580C', bg: 'bg-orange-50/60', text: 'text-orange-950', border: 'border-orange-300' },
+  { id: 'b-block', label: 'B Block', color: '#93C5FD', bg: 'bg-blue-50/60', text: 'text-blue-900', border: 'border-blue-200' },
-  { id: 'c-block', label: 'C Block', color: '#F97316', bg: 'bg-orange-50/40', text: 'text-orange-950', border: 'border-orange-300' },
+  { id: 'c-block', label: 'C Block', color: '#BFDBFE', bg: 'bg-blue-50/40', text: 'text-blue-900', border: 'border-blue-200' },
   { id: 'admin', label: 'Admin / Facility', color: '#FDBA74', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-200' },
   { id: 'hostel', label: 'Hostel / Mess', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-950', border: 'border-purple-200' },
   { id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },

src/pages/Community/Community.tsx

@@ -533,8 +533,8 @@ export default function Community() {
                                                 <div className="flex-1 min-w-0">
                                                   <div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
                                                     <span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
-                                                    {/* Verified check icon for senior helpers */}
+                                                    {/* Blue verified check icon for senior helpers */}
-                                                    <span className="inline-flex text-orange-500" title="Verified Senior Helper">
+                                                    <span className="inline-flex text-blue-500" title="Verified Senior Helper">
                                                       <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
                                                         <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                                                       </svg>

src/pages/DevCollab/DevCollab.tsx

@@ -433,18 +433,18 @@ export default function DevCollab() {
         <div className="bg-white border-b border-[#E5E7EB] py-10">
           <div className="container-custom">
             <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
-              <Link to="/" className="hover:text-orange-500">Home</Link>
+              <Link to="/" className="hover:text-[#F97316]">Home</Link>
               <ChevronRight className="w-3 h-3" />
-              <span className="text-orange-500 font-medium">Developer Collab Hub</span>
+              <span className="text-[#F97316]">Developer Collab Hub</span>
             </div>
             <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
               <div>
-                <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-orange-500/40 text-orange-300 text-xs font-semibold mb-3">
+                <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-[#F97316] text-xs font-semibold mb-3">
-                  <Code2 className="w-4 h-4 text-orange-400" /> RIT Developers Environment
+                  <Code2 className="w-4 h-4" /> RIT Developers Environment
                 </div>
                 <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
                   Find Project{' '}
-                  <span style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                  <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                     Collaborators
                   </span>
                 </h1>
@@ -457,10 +457,10 @@ export default function DevCollab() {
                 whileHover={{ scale: 1.03 }}
                 whileTap={{ scale: 0.97 }}
                 onClick={() => requireVerifiedStudent(() => setShowPostModal(true))}
-                className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/20 shrink-0 cursor-pointer border border-white/20"
+                className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/25 shrink-0 cursor-pointer"
-                style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)', fontFamily: 'Poppins, sans-serif' }}
+                style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
               >
-                {isVerifiedStudent && <ShieldCheck className="w-4 h-4 text-amber-200" />}
+                {isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
                 <Plus className="w-4.5 h-4.5" />
                 Post Collaboration Request
               </motion.button>
@@ -609,7 +609,7 @@ export default function DevCollab() {
                                 CLOSED • SPOTS FILLED
                               </span>
                             ) : (
-                              <span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-slate-100 text-slate-700 border border-slate-200">
+                              <span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-blue-50 text-blue-700 border border-blue-200">
                                 {accepted} / {needed} Spots Filled
                               </span>
                             )}
@@ -744,7 +744,7 @@ export default function DevCollab() {
                       <div className="pt-4 border-t border-slate-100 flex items-center justify-between gap-2">
                         <button
                           onClick={() => openManageApplicants(item)}
-                          className="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 border border-slate-300 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
+                          className="px-4 py-2 rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
                         >
                           <Users className="w-3.5 h-3.5" />
                           Applicants ({item.applicationsCount || 0})

src/pages/Events/Events.tsx

@@ -13,10 +13,10 @@ import { CLUBS_DATA } from '@/constants';
 import type { Club } from '@/types';
 
 const CLUB_CATEGORY_COLORS: Record<string, string> = {
-  Technical: '#4F46E5',
+  Technical: '#3B82F6',
-  Cultural: '#7C3AED',
+  Cultural: '#EC4899',
   Social: '#10B981',
-  Creative: '#0284C7',
+  Creative: '#F59E0B',
 };
 
 const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -118,6 +118,7 @@ export default function Events() {
   // ─── Interactive Like / Favorite System State ─────────────────────────────
   const [likedClubs, setLikedClubs] = useState<Set<string>>(() => {
     try {
+      localStorage.removeItem('rit_freshers_liked_clubs');
       const saved = localStorage.getItem('rit_freshers_liked_clubs_v3');
       return saved ? new Set(JSON.parse(saved)) : new Set();
     } catch {
@@ -201,7 +202,7 @@ export default function Events() {
         <div className="container-custom">
           <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
             Student{' '}
-            <span style={{ background: 'linear-gradient(135deg, #4F46E5, #7C3AED)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+            <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
               Clubs
             </span>
           </h1>
@@ -216,25 +217,25 @@ export default function Events() {
         {/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
         <AnimatedContainer className="mb-14">
           <div
-            className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-6"
+            className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-orange-400/30 flex flex-col md:flex-row items-center justify-between gap-6"
-            style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)' }}
+            style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
           >
             {/* Background Glow */}
             <div
               className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none"
-              style={{ background: 'radial-gradient(circle, #EA580C, transparent)' }}
+              style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
             />
 
             <div className="relative z-10 max-w-xl">
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/80 text-orange-300 text-xs font-semibold mb-3 border border-orange-500/40">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/20 text-orange-400 text-xs font-semibold mb-3 border border-orange-500/30">
                 <Target className="w-3.5 h-3.5" />
                 <span>Interactive Club Matcher</span>
               </div>
               <h2 className="text-2xl md:text-3xl font-bold text-white mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
                 Not sure which club to join?
               </h2>
-              <p className="text-orange-50 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <p className="text-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
-                Take our 3-step Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
+                Take our 3-step AI-powered Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
               </p>
             </div>
 
@@ -242,11 +243,11 @@ export default function Events() {
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.98 }}
               onClick={() => { resetQuiz(); setIsQuizOpen(true); }}
-              className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer border border-white/20"
+              className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer"
-              style={{ background: 'linear-gradient(135deg, #EA580C, #F97316)', fontFamily: 'Poppins, sans-serif' }}
+              style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
             >
-              <Sparkles className="w-4 h-4 text-amber-200" />
+              <Sparkles className="w-4 h-4" />
-              <span>Find My Ideal Club</span>
+              Find My Ideal Club
               <ArrowRight className="w-4 h-4" />
             </motion.button>
           </div>
@@ -262,58 +263,61 @@ export default function Events() {
 
           const renderClubCard = (club: Club) => {
             const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom;
-            const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#C25E17';
+            const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#F97316';
             const isLiked = likedClubs.has(club.id);
             const likesCount = likesMap[club.id] || 0;
 
             return (
               <motion.div
-                layout
+                whileHover={{ y: -4 }}
-                whileHover={{ y: -6 }}
                 onClick={() => setSelectedClub(club)}
-                className="bg-white rounded-3xl border border-[#E5E7EB] p-6 shadow-xs hover:shadow-xl transition-all duration-300 flex flex-col justify-between cursor-pointer group"
+                className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-[#F97316] transition-all flex flex-col justify-between h-full group"
+                style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
               >
                 <div>
-                  {/* Top Row: Club Icon & Like Button */}
+                  {/* Top Row: Tech Icon / Club Logo & Interactive Heart Like Button */}
-                  <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-center justify-between mb-3">
                     {club.logoUrl ? (
-                      <div className="w-14 h-14 rounded-full border-2 border-slate-100 p-1 shadow-sm bg-white overflow-hidden shrink-0 group-hover:scale-105 transition-transform">
+                      <div className="w-12 h-12 rounded-full border border-slate-100 p-0.5 shadow-sm bg-white overflow-hidden shrink-0 transition-transform group-hover:scale-105">
                         <img src={club.logoUrl} alt={club.name} className="w-full h-full object-cover rounded-full" />
                       </div>
                     ) : (
                       <div
-                        className="w-13 h-13 rounded-2xl flex items-center justify-center text-white shadow-md shrink-0 group-hover:scale-105 transition-transform"
+                        className="w-11 h-11 rounded-full flex items-center justify-center text-white shadow-sm transition-transform group-hover:scale-105"
-                        style={{ background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)` }}
+                        style={{
+                          background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)`,
+                        }}
                       >
-                        <IconComponent className="w-6 h-6 text-white" />
+                        <IconComponent className="w-5 h-5 text-white" />
                       </div>
                     )}
 
+                    {/* Like Button */}
+                    <div className="flex items-center gap-2">
                       <motion.button
-                      whileHover={{ scale: 1.1 }}
+                        whileHover={{ scale: 1.08 }}
-                      whileTap={{ scale: 0.9 }}
+                        whileTap={{ scale: 0.85 }}
                         onClick={(e) => {
                           e.stopPropagation();
                           toggleLike(club.id);
                         }}
-                      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all border cursor-pointer ${
+                        className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold transition-all cursor-pointer border ${
                           isLiked
-                          ? 'bg-rose-500 text-white border-rose-600 shadow-sm'
+                            ? 'bg-rose-50 border-rose-200 text-rose-600 shadow-2xs'
-                          : 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200'
+                            : 'bg-slate-50 border-slate-200 text-slate-500 hover:border-rose-300 hover:text-rose-500'
                         }`}
                       >
-                      <Heart className={`w-3.5 h-3.5 ${isLiked ? 'fill-white' : ''}`} />
+                        <Heart className={`w-3.5 h-3.5 ${isLiked ? 'fill-rose-500 text-rose-500' : ''}`} />
                         <span>{likesCount}</span>
                       </motion.button>
                     </div>
+                  </div>
 
-                  {/* Club Title & Tagline */}
+                  {/* Club Title & Description */}
-                  <h3 className="text-xl font-bold text-[#1E293B] mb-1.5 group-hover:text-orange-600 transition-colors" style={{ fontFamily: 'Playfair Display, serif' }}>
+                  <h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-[#F97316] transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     {club.name}
                   </h3>
-                  <p className="text-xs text-[#64748B] line-clamp-2 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
+                  <p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
-                    {club.description}
-                  </p>
                 </div>
 
                 {/* Bottom Row: Category Tag & View Details Button */}
@@ -324,8 +328,8 @@ export default function Events() {
                   </span>
                   <motion.button
                     whileHover={{ scale: 1.04 }}
-                    className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer bg-[#C25E17] hover:bg-[#EA580C] transition-colors"
+                    className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer"
-                    style={{ fontFamily: 'Poppins, sans-serif' }}
+                    style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
                   >
                     View Details
                   </motion.button>
@@ -345,7 +349,7 @@ export default function Events() {
                 ))}
               </div>
 
-              {/* Centered Flex Row for Remaining Clubs */}
+              {/* Centered Flex Row for Remaining Clubs (WiSTEM & STEAM) */}
               {remainingClubs.length > 0 && (
                 <div className="flex flex-wrap justify-center gap-6 md:gap-7">
                   {remainingClubs.map((club) => (
@@ -387,13 +391,13 @@ export default function Events() {
                   </div>
                   <div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden">
                     <div
-                      className="h-full bg-[#C25E17] transition-all duration-300 rounded-full"
+                      className="h-full bg-[#F97316] transition-all duration-300 rounded-full"
                       style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }}
                     />
                   </div>
 
                   {/* Question Header */}
-                  <div className="flex items-center gap-2 mb-2 text-[#C25E17]">
+                  <div className="flex items-center gap-2 mb-2 text-[#F97316]">
                     <Compass className="w-5 h-5" />
                     <span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
                   </div>
@@ -407,10 +411,10 @@ export default function Events() {
                       <button
                         key={idx}
                         onClick={() => handleSelectOption(idx)}
-                        className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-orange-500 hover:bg-orange-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
+                        className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-[#F97316] hover:bg-orange-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
                       >
                         <span>{opt.label}</span>
-                        <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#C25E17] group-hover:translate-x-1 transition-all" />
+                        <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#F97316] group-hover:translate-x-1 transition-all" />
                       </button>
                     ))}
                   </div>
@@ -428,7 +432,7 @@ export default function Events() {
                 /* Results Screen */
                 <div>
                   <div className="text-center mb-6">
-                    <div className="w-14 h-14 rounded-2xl bg-orange-50 text-orange-600 border border-orange-200 flex items-center justify-center mx-auto mb-3">
+                    <div className="w-14 h-14 rounded-2xl bg-orange-100 text-[#F97316] flex items-center justify-center mx-auto mb-3">
                       <CheckCircle2 className="w-8 h-8" />
                     </div>
                     <h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
@@ -441,7 +445,7 @@ export default function Events() {
                   <div className="space-y-3 mb-6">
                     {quizResults.map((item, i) => {
                       const IconComponent = (item.club.icon && CLUB_ICON_MAP[item.club.icon]) || Atom;
-                      const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#C25E17';
+                      const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#F97316';
                       const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
 
                       return (
@@ -451,7 +455,7 @@ export default function Events() {
                             setIsQuizOpen(false);
                             setSelectedClub(item.club);
                           }}
-                          className="p-4 rounded-2xl border border-slate-200 hover:border-orange-500 bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
+                          className="p-4 rounded-2xl border border-slate-200 hover:border-[#F97316] bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
                         >
                           <div className="flex items-center gap-3">
                             {item.club.logoUrl ? (
@@ -492,7 +496,7 @@ export default function Events() {
                     </button>
                     <button
                       onClick={() => setIsQuizOpen(false)}
-                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#C25E17] hover:bg-[#EA580C] transition-all cursor-pointer"
+                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#F97316] hover:bg-[#EA580C] transition-all cursor-pointer"
                     >
                       Explore All Clubs
                     </button>
@@ -504,7 +508,7 @@ export default function Events() {
         )}
       </AnimatePresence>
 
-      {/* ─── Club Details Modal ────────────────────────────────────────────── */}
+      {/* ─── Club Details Modal (Featuring Feature 5: Social Link Hub) ───────── */}
       <AnimatePresence>
         {selectedClub && (
           <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
@@ -526,7 +530,7 @@ export default function Events() {
               {/* Modal Header */}
               {(() => {
                 const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
-                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#C25E17';
+                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#F97316';
                 const isLiked = likedClubs.has(selectedClub.id);
                 const likesCount = likesMap[selectedClub.id] || 0;
 
@@ -577,9 +581,9 @@ export default function Events() {
               })()}
 
               {/* Club Detailed Description */}
-              <div className="mb-5 bg-orange-50/60 border border-orange-200/60 rounded-2xl p-4.5">
+              <div className="mb-5 bg-gradient-to-r from-orange-50/70 via-amber-50/40 to-slate-50 border border-orange-200/80 rounded-2xl p-4.5">
-                <div className="flex items-center gap-2 text-xs font-bold text-orange-600 uppercase tracking-wider mb-2">
+                <div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider mb-2">
-                  <Info className="w-4 h-4 text-orange-600" />
+                  <Info className="w-4 h-4 text-[#F97316]" />
                   <span>About the Club</span>
                 </div>
                 <p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -587,35 +591,75 @@ export default function Events() {
                 </p>
               </div>
 
-              {/* Leadership & Contact Information */}
+              {/* Leadership & Contact Information - Icon Based Color Cards */}
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6">
-                <div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                {/* President Card - Indigo Theme */}
-                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#C25E17] to-[#EA580C] text-white flex items-center justify-center shadow-xs shrink-0">
+                <div className="bg-indigo-50/80 border border-indigo-100 hover:border-indigo-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 text-white flex items-center justify-center shadow-xs shadow-indigo-200 shrink-0">
                     <UserCheck className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <span className="text-[11px] text-orange-300 font-semibold block">President / Student Lead</span>
+                    <span className="text-[11px] text-indigo-500 font-semibold block">President / Student Lead</span>
-                    <span className="text-sm font-bold text-white">{selectedClub.presidentName || 'Student President'}</span>
+                    <span className="text-sm font-bold text-indigo-950">{selectedClub.presidentName || 'Student President'}</span>
                   </div>
                 </div>
 
+                {/* Vice President Card - Violet Theme */}
                 {selectedClub.vicePresidentName && (
-                  <div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                  <div className="bg-violet-50/80 border border-violet-100 hover:border-violet-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#EA580C] to-[#F97316] text-white flex items-center justify-center shadow-xs shrink-0">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-violet-600 text-white flex items-center justify-center shadow-xs shadow-violet-200 shrink-0">
                       <Users className="w-5 h-5 text-white" />
                     </div>
                     <div>
-                      <span className="text-[11px] text-orange-300 font-semibold block">Vice President</span>
+                      <span className="text-[11px] text-violet-500 font-semibold block">Vice President</span>
-                      <span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
+                      <span className="text-sm font-bold text-violet-950">{selectedClub.vicePresidentName}</span>
                     </div>
                   </div>
                 )}
+
+                {/* Coordinator Card - Amber Theme */}
+                {selectedClub.coordinatorName && (
+                  <div className="bg-amber-50/80 border border-amber-100 hover:border-amber-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-amber-600 text-white flex items-center justify-center shadow-xs shadow-amber-200 shrink-0">
+                      <GraduationCap className="w-5 h-5 text-white" />
+                    </div>
+                    <div>
+                      <span className="text-[11px] text-amber-600 font-semibold block">Faculty Coordinator</span>
+                      <span className="text-sm font-bold text-amber-950">{selectedClub.coordinatorName}</span>
+                    </div>
+                  </div>
+                )}
+
+{selectedClub.contactEmail && (
+  <div className="bg-emerald-50/80 border border-emerald-100 hover:border-emerald-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white flex items-center justify-center shadow-xs shadow-emerald-200 shrink-0">
+      <Mail className="w-5 h-5 text-white" />
+    </div>
+    <div className="min-w-0 flex-1">
+      <span className="text-[11px] text-emerald-500 font-semibold block">Contact Email</span>
+      <a href={`mailto:${selectedClub.contactEmail}`} className="text-sm font-bold text-emerald-700 hover:text-emerald-800 hover:underline truncate block">
+        {selectedClub.contactEmail}
+      </a>
+    </div>
+  </div>
+)}
+
+                {/* Phone Card - Sky Theme */}
+                <div className="bg-sky-50/80 border border-sky-100 hover:border-sky-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-500 to-sky-600 text-white flex items-center justify-center shadow-xs shadow-sky-200 shrink-0">
+                    <Phone className="w-5 h-5 text-white" />
+                  </div>
+                  <div>
+                    <span className="text-[11px] text-sky-500 font-semibold block">Contact Phone</span>
+                    <span className="text-sm font-bold text-sky-950">{selectedClub.contactPhone || '+91 98765 43210'}</span>
+                  </div>
+                </div>
               </div>
 
-              {/* Community & Social Links */}
+              {/* ─── Feature 5: Social & Community Link Hub (Dummy Links) ─────── */}
-              <div className="mb-6 bg-slate-900/40 border border-slate-800 rounded-2xl p-4">
+              <div className="mb-6 bg-orange-50/60 border border-orange-200/80 rounded-2xl p-4">
                 <div className="flex items-center justify-between mb-3">
-                  <div className="flex items-center gap-2 text-xs font-bold text-orange-400 uppercase tracking-wider">
+                  <div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider">
                     <ExternalLink className="w-3.5 h-3.5" />
                     <span>Community & Social Links</span>
                   </div>
@@ -640,9 +684,9 @@ export default function Events() {
                       href={selectedClub.socialLinks.website}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
+                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-orange-500 hover:text-orange-600 transition-all text-xs font-medium text-slate-700"
                     >
-                      <Globe className="w-4 h-4 text-slate-800 shrink-0" />
+                      <Globe className="w-4 h-4 text-orange-500 shrink-0" />
                       <span className="truncate">Linktree Hub</span>
                     </a>
                   )}
@@ -652,9 +696,9 @@ export default function Events() {
                       href={selectedClub.socialLinks.linkedin}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
+                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-blue-600 hover:text-blue-600 transition-all text-xs font-medium text-slate-700"
                     >
-                      <LinkedinIcon className="w-4 h-4 text-slate-800 shrink-0" />
+                      <LinkedinIcon className="w-4 h-4 text-blue-600 shrink-0" />
                       <span className="truncate">LinkedIn</span>
                     </a>
                   )}
@@ -670,6 +714,18 @@ export default function Events() {
                       <span className="truncate">WhatsApp Group</span>
                     </a>
                   )}
+
+                  {selectedClub.socialLinks?.youtube && (
+                    <a
+                      href={selectedClub.socialLinks.youtube}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-red-600 hover:text-red-600 transition-all text-xs font-medium text-slate-700"
+                    >
+                      <YoutubeIcon className="w-4 h-4 text-red-600 shrink-0" />
+                      <span className="truncate">YouTube Channel</span>
+                    </a>
+                  )}
                 </div>
               </div>
 

src/pages/Home/Home.tsx

@@ -1,121 +1,248 @@
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import {
-  BookOpen,
+  ArrowRight, BookOpen, Bot, GraduationCap,
-  Bot,
+  CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, MapPin, Sparkles
-  Bus,
-  Calendar,
-  Code2,
-  Trophy,
-  Sparkles,
-  ChevronRight
 } from 'lucide-react';
+import SectionTitle from '@/components/SectionTitle/SectionTitle';
+import FeatureCard from '@/components/FeatureCard/FeatureCard';
+import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
+import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
+import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
+import * as LucideIcons from 'lucide-react';
+
+import LazyVideoHero from '@/components/LazyVideoHero/LazyVideoHero';
 
 export default function Home() {
-  const quickLaunchModules = [
+  const { scrollY } = useScroll();
-    { label: 'Bus Routes', path: '/bus-routes', icon: Bus, desc: 'Schedules & GPS' },
+  const heroOpacity = useTransform(scrollY, [0, 450], [1, 0]);
-    { label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Moodle Material' },
+  const heroY = useTransform(scrollY, [0, 450], [0, -60]);
-    { label: 'Campus Chatbot', path: '/ai-assistant', icon: Bot, desc: 'AI Instant Q&A' },
-    { label: 'Student Clubs', path: '/events', icon: Calendar, desc: 'Clubs & Events' },
-    { label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Top RIT Coders' },
-    { label: 'Dev Collab', path: '/collab', icon: Code2, desc: 'Co-Developers' },
-  ];
 
   return (
-    <div className="relative w-full min-h-[calc(100vh-90px)] flex flex-col justify-between p-2 sm:p-6 lg:p-8 text-white group">
+    <div className="relative bg-[#FAFAFA] min-h-screen overflow-hidden">
-      {/* ─── Fixed Full-Screen Background Video (Spans Entire Laptop/Phone Frame) ─── */}
+      {/* ─── Hero Section with IntersectionObserver Lazy Video ─────────────────── */}
-      <video
+      <LazyVideoHero>
-        src="/campus-video.mp4"
+        <section className="relative pt-20 pb-24 z-10">
-        autoPlay
+          <motion.div 
-        loop
+            className="container-custom relative z-20 flex flex-col items-center text-center px-4"
-        muted
+            style={{ opacity: heroOpacity, y: heroY }}
-        playsInline
-        preload="auto"
-        className="fixed inset-0 w-full h-full object-cover pointer-events-none z-0"
-        style={{
-          filter: 'contrast(1.05) brightness(0.85) saturate(1.05)',
-          imageRendering: 'crisp-edges',
-        }}
-      />
-
-      {/* Fixed High-Contrast Dark Gradient Overlay across full viewport */}
-      <div 
-        className="fixed inset-0 pointer-events-none z-0" 
-        style={{
-          background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.3) 45%, rgba(11, 15, 25, 0.85) 100%)',
-        }}
-      />
-
-      {/* Top Branding Badge */}
-      <div className="relative z-10 flex items-center justify-between gap-2">
-        <div className="inline-flex items-center gap-1.5 sm:gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-slate-950/60 border border-white/20 text-[10px] sm:text-xs font-semibold text-white backdrop-blur-md shadow-xl truncate">
-          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shrink-0" />
-          <span className="truncate">Rajalakshmi Institute of Technology</span>
-        </div>
-
-        <Link
-          to="/raise"
-          className="inline-flex items-center gap-1 sm:gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-gradient-to-r from-rose-500/90 to-pink-600/90 hover:from-rose-500 hover:to-pink-600 text-white text-[10px] sm:text-xs font-bold border border-white/25 backdrop-blur-md transition-all shadow-lg hover:scale-105 shrink-0"
-          style={{ fontFamily: 'Poppins, sans-serif' }}
           >
-          <Sparkles className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-200" />
+          {/* Heading */}
-          <span>RAISE Incubator</span>
+          <motion.h1
-        </Link>
+            initial={{ opacity: 0, y: 15 }}
-      </div>
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+            className="text-3xl md:text-5xl font-medium tracking-wide mb-2"
+            style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 2px 14px rgba(0,0,0,0.95)' }}
+          >
+            Welcome to
+          </motion.h1>
 
-      {/* Center Main Hero Title */}
+          <motion.h2
-      <div className="relative z-10 max-w-4xl mx-auto text-center space-y-3 sm:space-y-4 my-auto py-8 sm:py-16">
+            initial={{ opacity: 0, y: 20 }}
-        <h1
+            animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-6xl md:text-7xl font-black tracking-tight leading-tight text-white"
+            transition={{ duration: 0.7, delay: 0.2 }}
-          style={{ 
+            className="text-5xl md:text-7xl font-black leading-tight mb-6"
-            fontFamily: 'Playfair Display, Georgia, serif', 
+            style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
-            color: '#FFFFFF', 
-            textShadow: '0 4px 35px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.95)' 
-          }}
           >
             RIT Freshers Hub
-        </h1>
+          </motion.h2>
-        <p
+
-          className="text-xs sm:text-base md:text-lg text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto px-2"
+          <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-100 text-base md:text-lg font-medium leading-relaxed mb-8 drop-shadow-md"
+            style={{ fontFamily: 'Inter, sans-serif' }}
+          >
+            Your centralized gateway to campus life at Rajalakshmi Institute of Technology — academic notes, AI assistant, bus routes, faculty directory, and campus navigation.
+          </motion.p>
+
+          {/* Call to Actions */}
+          <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"
+          >
+            <a href="#built-for-freshers">
+              <motion.button
+                whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(249,115,22,0.4)' }}
+                whileTap={{ scale: 0.96 }}
+                className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-semibold text-sm cursor-pointer shadow-md"
                 style={{
-            fontFamily: 'Inter, sans-serif',
+                  fontFamily: 'Poppins, sans-serif',
-            textShadow: '0 2px 14px rgba(0,0,0,0.95)'
+                  background: 'linear-gradient(135deg, #F97316, #FB923C)',
                 }}
               >
-          Your unified campus portal — academic notes, AI chatbot, live bus tracking, faculty directory & student developer hub.
+                <BookOpen className="w-4 h-4" />
-        </p>
+                Explore Hub
-      </div>
+                <ArrowRight className="w-4 h-4" />
+              </motion.button>
+            </a>
 
-      {/* Bottom Ultra-Compact Ultra-Transparent Quick Launch Bar */}
+            <Link to="/ai-assistant">
-      <div className="relative z-10 pt-2 sm:pt-4">
+              <motion.button
-        <div className="text-center mb-2 sm:mb-3">
+                whileHover={{ scale: 1.04, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.2)' }}
-          <span className="text-[9px] sm:text-[10px] font-extrabold text-slate-200 uppercase tracking-widest bg-slate-950/70 px-3 py-1 rounded-full border border-white/20 backdrop-blur-md shadow-lg inline-block">
+                whileTap={{ scale: 0.96 }}
-            Quick Launch Portal Modules
+                className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm border-2 border-white/40 text-white bg-black/30 backdrop-blur-md transition-all cursor-pointer shadow-2xs"
-          </span>
+                style={{ fontFamily: 'Poppins, sans-serif' }}
-        </div>
-
-        <div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-6 gap-1.5 sm:gap-3">
-          {quickLaunchModules.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.label}
-                to={item.path}
-                className="flex flex-col items-center justify-center p-2 sm:p-3.5 rounded-xl sm:rounded-2xl bg-slate-950/50 hover:bg-slate-900/80 border border-white/20 hover:border-white/40 backdrop-blur-md text-white transition-all duration-200 cursor-pointer hover:scale-[1.04] shadow-xl group text-center"
               >
-                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-lg sm:rounded-xl bg-white/15 border border-white/25 flex items-center justify-center mb-1 sm:mb-1.5 group-hover:bg-[#C25E17] transition-colors shrink-0">
+                <Bot className="w-4 h-4 text-[#F97316]" />
-                  <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
+                Ask Assistant
+              </motion.button>
+            </Link>
+
+            <Link to="/raise">
+              <motion.button
+                whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(233,30,99,0.5)' }}
+                whileTap={{ scale: 0.96 }}
+                className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm text-white bg-gradient-to-r from-rose-500 to-pink-600 border border-white/30 backdrop-blur-md transition-all cursor-pointer shadow-lg shadow-pink-500/20"
+                style={{ fontFamily: 'Poppins, sans-serif' }}
+              >
+                <Sparkles className="w-4 h-4 text-amber-200" />
+                Pitch your Idea - RAISE
+                <ArrowRight className="w-4 h-4" />
+              </motion.button>
+            </Link>
+          </motion.div>
+        </motion.div>
+      </section>
+    </LazyVideoHero>
+
+      {/* Sleek Stats Card Section */}
+      <section className="relative z-30 -mt-6 px-4">
+        <div className="container-custom max-w-5xl">
+          <motion.div 
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="rounded-3xl border border-[#E5E7EB] p-6 md:p-8 bg-white shadow-[0_20px_50px_-15px_rgba(0,0,0,0.06)]"
+          >
+            <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: 'ASSISTANT', icon: Cpu },
+                { value: '5000+', label: 'STUDENTS', icon: Users },
+              ].map((stat, i) => (
+                <div key={i} className="flex flex-col items-center justify-center p-3">
+                  <div className="w-10 h-10 rounded-xl bg-[#FFF7ED] flex items-center justify-center mb-2.5">
+                    <stat.icon className="w-5 h-5 text-[#F97316]" />
                   </div>
-                <span className="text-[10px] sm:text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                  <div 
-                  {item.label}
+                    className="text-2xl md:text-3xl font-black text-[#1E293B] mb-0.5"
-                </span>
+                    style={{ fontFamily: 'Poppins, sans-serif' }}
-                <span className="hidden sm:block text-[10px] text-slate-300/90 truncate max-w-full mt-0.5">
+                  >
-                  {item.desc}
+                    {stat.value}
+                  </div>
+                  <div 
+                    className="text-[11px] font-bold tracking-wider text-[#94A3B8] uppercase"
+                    style={{ fontFamily: 'Inter, sans-serif' }}
+                  >
+                    {stat.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* ─── Features Section ─────────────────────────────────────────────────── */}
+      <section id="built-for-freshers" className="section-padding relative z-20">
+        <div className="container-custom">
+          <SectionTitle
+            tag="Everything You Need"
+            title="Built for"
+            highlight="RIT Freshers"
+            subtitle="From notes to AI assistance — we've got everything you need to navigate campus life with confidence."
+          />
+
+          <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {FEATURES.map((feature) => (
+              <StaggerItem key={feature.id}>
+                <FeatureCard feature={feature} />
+              </StaggerItem>
+            ))}
+          </StaggerContainer>
+        </div>
+      </section>
+
+      {/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
+      <section className="section-padding relative z-20 bg-white border-y border-[#E5E7EB]">
+        <div className="container-custom">
+          <SectionTitle
+            tag="Navigate Campus"
+            title="Explore"
+            highlight="RIT Campus"
+            subtitle="Find your way around campus — departments, labs, library, and key locations."
+          />
+
+          <AnimatedContainer>
+            <div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden shadow-sm">
+              {/* Map Teaser Header */}
+              <div
+                className="h-52 flex items-center justify-center relative overflow-hidden"
+                style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
+              >
+                <div
+                  className="absolute inset-0 opacity-15"
+                  style={{
+                    backgroundImage: 'linear-gradient(rgba(249,115,22,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.4) 1px, transparent 1px)',
+                    backgroundSize: '28px 28px',
+                  }}
+                />
+                
+                <div className="relative z-10 text-center px-4">
+                  <div className="w-12 h-12 rounded-2xl bg-[#F97316]/20 border border-[#F97316]/30 flex items-center justify-center mx-auto mb-3">
+                    <MapPin className="w-6 h-6 text-[#F97316]" />
+                  </div>
+                  <h3 className="text-white text-lg font-bold mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                    Interactive Campus Map
+                  </h3>
+                  <p className="text-slate-400 text-xs mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
+                    Locate all major campus blocks, labs, library & amenities.
+                  </p>
+                  <Link to="/campus">
+                    <motion.button
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                      className="px-5 py-2 rounded-xl text-white text-xs font-semibold shadow-sm cursor-pointer"
+                      style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
+                    >
+                      Open Full Map
+                    </motion.button>
+                  </Link>
+                </div>
+              </div>
+
+              {/* Quick Nav Grid */}
+              <div className="p-5 grid grid-cols-3 sm:grid-cols-7 gap-3 bg-[#FAFAFA]">
+                {CAMPUS_LOCATIONS.map((loc) => {
+                  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
+                  return (
+                    <Link to="/campus" key={loc.id}>
+                      <motion.div
+                        whileHover={{ y: -3, backgroundColor: '#FFF7ED' }}
+                        className="flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all border border-transparent hover:border-[#FED7AA] bg-white shadow-2xs"
+                      >
+                        <div className="w-9 h-9 rounded-xl bg-[#FFF7ED] flex items-center justify-center">
+                          {Icon && <Icon className="w-4.5 h-4.5 text-[#F97316]" />}
+                        </div>
+                        <span className="text-[11px] text-[#475569] text-center font-medium leading-tight" style={{ fontFamily: 'Inter, sans-serif' }}>
+                          {loc.name}
                         </span>
+                      </motion.div>
                     </Link>
                   );
                 })}
               </div>
             </div>
+          </AnimatedContainer>
+        </div>
+      </section>
     </div>
   );
 }

src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx

@@ -153,7 +153,7 @@ export default function LeetcodeLeaderboard() {
                 RIT LeetCode Arena
               </div>
               <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins">
-                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316]">LeetCode Leaderboard</span>
+                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span>
               </h1>
               <p className="mt-2 text-slate-500 max-w-2xl text-sm sm:text-base">
                 Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.
@@ -205,7 +205,7 @@ export default function LeetcodeLeaderboard() {
 
             <div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E2E8F0]">
               <span className="text-xs font-semibold text-slate-500 flex items-center gap-1.5">
-                <User className="w-4 h-4 text-orange-400" /> Active Coders
+                <User className="w-4 h-4 text-indigo-500" /> Active Coders
               </span>
               <p className="text-xl font-bold text-[#1E293B] mt-1">
                 {profiles.length}

src/pages/Notes/Notes.tsx

@@ -39,7 +39,7 @@ const SUBJECTS_BY_SEM: Record<number, string[]> = {
 
 const TYPE_COLORS: Record<string, { bg: string; text: string; icon: React.ComponentType<any> }> = {
   notes: { bg: '#EFF6FF', text: '#3B82F6', icon: BookOpen },
-  pyq: { bg: '#EEF2FF', text: '#6366F1', icon: FileText },
+  pyq: { bg: '#FFF7ED', text: '#F97316', icon: FileText },
   syllabus: { bg: '#ECFDF5', text: '#10B981', icon: ScrollText },
   assignment: { bg: '#FDF2F8', text: '#EC4899', icon: BookMarked },
 };
@@ -1421,7 +1421,7 @@ export default function Notes() {
               </div>
               <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
                 Notes &{' '}
-                <span style={{ background: 'linear-gradient(135deg, #6366F1, #4F46E5)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                   PYQs
                 </span>
               </h1>
@@ -1994,7 +1994,7 @@ export default function Notes() {
                   </div>
 
                   <div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
-                    <div className="w-8 h-8 rounded-xl bg-slate-900 border border-slate-700 flex items-center justify-center text-orange-400">
+                    <div className="w-8 h-8 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-600">
                       <FileText className="w-4 h-4" />
                     </div>
                     <div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>

src/pages/Raise/components/PortfolioShowcase.tsx

@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "AI-based Systems",
       description: "Cognitive educational platforms providing personalised student learning paths.",
       remarks: "Testing with users",
-      color: "bg-[#C25E17]"
+      color: "bg-blue-500"
     },
     {
       name: "Innsole",
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "Hardware & Health",
       description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
       remarks: "Testing with users",
-      color: "bg-[#C25E17]"
+      color: "bg-blue-500"
     },
 
     // Prototype
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
   const getStageIcon = (stage: string) => {
     switch(stage) {
       case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
-      case 'mvp': return <Box className="w-4 h-4 text-orange-600" />;
+      case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
       case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
       case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
       default: return <HelpCircle className="w-4 h-4" />;
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
                 <div className="flex justify-between items-center mb-6">
                   <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
                     startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
-                    startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
+                    startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
                     startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
                     'bg-purple-100 text-purple-800'
                   }`}>

src/pages/RaiseIncubator/components/PortfolioShowcase.tsx

@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "AI-based Systems",
       description: "Cognitive educational platforms providing personalised student learning paths.",
       remarks: "Testing with users",
-      color: "bg-[#C25E17]"
+      color: "bg-blue-500"
     },
     {
       name: "Innsole",
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
       domain: "Hardware & Health",
       description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
       remarks: "Testing with users",
-      color: "bg-[#C25E17]"
+      color: "bg-blue-500"
     },
 
     // Prototype
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
   const getStageIcon = (stage: string) => {
     switch(stage) {
       case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
-      case 'mvp': return <Box className="w-4 h-4 text-orange-600" />;
+      case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
       case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
       case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
       default: return <HelpCircle className="w-4 h-4" />;
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
                 <div className="flex justify-between items-center mb-6">
                   <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
                     startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
-                    startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
+                    startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
                     startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
                     'bg-purple-100 text-purple-800'
                   }`}>

src/pages/Toolkit/Toolkit.tsx

@@ -684,13 +684,13 @@ export default function Toolkit() {
           <div className="container-custom">
             <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
               <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
-                <Link to="/" className="hover:text-[#6366F1]">Home</Link>
+                <Link to="/" className="hover:text-[#F97316]">Home</Link>
                 <ChevronRight className="w-3 h-3" />
-                <span className="text-[#6366F1]">Student Toolkit</span>
+                <span className="text-[#F97316]">Student Toolkit</span>
               </div>
               <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
                 Student{' '}
-                <span style={{ background: 'linear-gradient(135deg, #6366F1, #4F46E5)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                   Toolkit
                 </span>
               </h1>