ui enhancement,topdown menu

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-violet-900/30 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" />
 
             {/* 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 } from 'lucide-react';
+import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock, MapPin } from 'lucide-react';
 import type { Faculty } from '@/types';
 
 interface FacultyCardProps {
@@ -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-[#1E1B4B] transition-colors shrink-0">
+                          <div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center group-hover:bg-[#C25E17] transition-colors shrink-0">
-                            <Phone className="w-4 h-4 text-violet-300 group-hover:text-white transition-colors" />
+                            <Phone className="w-4 h-4 text-orange-400 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>
@@ -225,13 +225,13 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
                   <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">
-                        <BookOpen className="w-5 h-5 text-violet-300" />
+                        <BookOpen className="w-5 h-5 text-orange-400" />
                       </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-slate-900/40 border border-slate-800">
+                      <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
-                        <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
+                        <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-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-slate-900/40 border border-slate-800">
+                        <div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
-                          <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
+                          <p className="text-xs font-bold text-orange-600 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,17 +250,45 @@ 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>
-                            <div className="flex flex-col">
+                            {faculty.studentsGuided.phd && (
-                              <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.phd}</span> 
+                              <div className="flex flex-col">
-                              <span className="text-xs font-semibold text-[#64748B]">Ph.D.</span>
+                                <span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.phd}</span> 
-                            </div>
+                                <span className="text-xs font-semibold text-[#64748B]">PhD</span>
+                              </div>
+                            )}
                           </div>
                         </div>
                       )}
                     </div>
                   </div>
 
-                  {/* Section 3: Achievements (Render only if present) */}
+                  {/* Section 3: Office & Availability */}
+                  <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">
@@ -310,10 +338,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-slate-900/40 border border-slate-800 flex items-start gap-4">
+                      <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-violet-300 shrink-0 mt-0.5" />
+                        <Building2 className="w-6 h-6 text-orange-500 shrink-0 mt-0.5" />
                         <div>
-                          <p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
+                          <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>

src/components/Footer/Footer.tsx

@@ -9,7 +9,7 @@ export default function Footer() {
           {/* Brand */}
           <div className="max-w-md">
             <div className="flex items-center gap-2.5 mb-2.5">
-              <div className="w-9 h-9 rounded-xl flex items-center justify-center bg-[#1E1B4B] border border-violet-800/40 text-white shadow-md">
+              <div className="w-9 h-9 rounded-xl flex items-center justify-center bg-[#C25E17] border border-orange-500/40 text-white shadow-md">
                 <GraduationCap className="w-4 h-4" />
               </div>
               <div>
@@ -29,16 +29,16 @@ export default function Footer() {
             </h4>
             <ul className="space-y-2 text-xs sm:text-sm">
               <li className="flex items-start gap-2.5 text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
-                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-violet-300" />
+                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-orange-400" />
                 <span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
               </li>
               <li className="flex items-center gap-2.5 text-slate-400">
-                <Phone className="w-4 h-4 shrink-0 text-violet-300" />
+                <Phone className="w-4 h-4 shrink-0 text-orange-400" />
-                <a href="tel:+914423422890" className="hover:text-violet-300 transition-colors">+91 44 2342 2890</a>
+                <a href="tel:+914423422890" className="hover:text-orange-400 transition-colors">+91 44 2342 2890</a>
               </li>
               <li className="flex items-center gap-2.5 text-slate-400">
-                <Mail className="w-4 h-4 shrink-0 text-violet-300" />
+                <Mail className="w-4 h-4 shrink-0 text-orange-400" />
-                <a href="mailto:info@rit.ac.in" className="hover:text-violet-300 transition-colors">info@rit.ac.in</a>
+                <a href="mailto:info@rit.ac.in" className="hover:text-orange-400 transition-colors">info@rit.ac.in</a>
               </li>
             </ul>
           </div>

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import {
   Search,
   Bell,
@@ -13,12 +14,22 @@ import {
   Code2,
   Trophy,
   Bot,
+  LayoutDashboard,
+  Wrench,
+  MapPin,
+  MessageSquare,
+  Rocket,
+  GitBranch,
+  LogIn,
+  LogOut,
+  ChevronRight,
+  Grid,
 } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
 import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
 
 interface HeaderProps {
-  onToggleSidebar: () => void;
+  onToggleSidebar?: () => void;
 }
 
 interface NotificationItem {
@@ -30,13 +41,30 @@ interface NotificationItem {
   type: 'academic' | 'dev' | 'campus' | 'bus';
 }
 
-export default function Header({ onToggleSidebar }: HeaderProps) {
+interface NavItem {
+  label: string;
+  path: string;
+  icon: any;
+  desc?: string;
+  highlight?: boolean;
+}
+
+interface NavGroup {
+  title: string;
+  items: NavItem[];
+}
+
+export default function Header({}: HeaderProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [isNotifOpen, setIsNotifOpen] = useState(false);
   const [currentDate, setCurrentDate] = useState('');
+  
   const navigate = useNavigate();
-  const { user, isAuthenticated, isVerifiedStudent } = useAuth();
+  const location = useLocation();
+  const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
+  
   const notifRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLDivElement>(null);
 
@@ -77,6 +105,41 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
 
   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 & Tools' },
+        { label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'AI Campus Assistant' },
+      ],
+    },
+    {
+      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 Contact Hours' },
+        { label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Societies & Leads' },
+      ],
+    },
+    {
+      title: 'COMMUNITY & DEV',
+      items: [
+        { label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Advice & Q&A' },
+        { label: 'Dev Collab Hub', path: '/collab', icon: Code2, desc: 'Find Project Teammates', highlight: true },
+        { label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Coding Leaderboard' },
+        { label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures' },
+      ],
+    },
+  ];
+
+  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', {
@@ -88,13 +151,18 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
     setCurrentDate(formatted);
   }, []);
 
-  // Listen for ⌘K shortcut
+  // 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') {
+        setIsMobileMenuOpen(false);
+        setIsSearchOpen(false);
+        setIsNotifOpen(false);
+      }
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
@@ -114,6 +182,11 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  // Auto close mobile drawer on route change
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [location.pathname, location.search]);
+
   const markAllAsRead = () => {
     setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
   };
@@ -176,229 +249,379 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-30 w-full bg-[#0F172A]/90 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-md text-white">
+    <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-8 py-2.5 shadow-md text-white">
-      <div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
+        <div className="max-w-7xl mx-auto flex items-center justify-between gap-3">
-        {/* Mobile Toggle */}
-        <button
-          onClick={onToggleSidebar}
-          className="lg:hidden p-2 rounded-xl bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 transition-colors cursor-pointer shrink-0 border border-slate-700/60"
-          title="Toggle Navigation Menu"
-        >
-          <Menu className="w-5 h-5" />
-        </button>
           
-        {/* Global Interactive Search Input Container */}
+          {/* Left Side: Brand Logo */}
-        <div className="relative min-w-0 flex-1 max-w-[210px] xs:max-w-[260px] sm:max-w-xs md:max-w-md" ref={searchRef}>
+          <Link to="/" className="flex items-center gap-2.5 group shrink-0">
-          <div
+            <div className="p-1.5 rounded-xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
-            onClick={() => setIsSearchOpen(true)}
+              <img
-            className="relative w-full cursor-text"
+                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 sm:text-lg tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                RIT Portal
+              </span>
+              <span className="text-[9px] sm:text-[10px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
+                Freshers Hub
+              </span>
+            </div>
+          </Link>
+
+          {/* Center: Desktop Top Navigation Links Strip */}
+          <nav
+            className="hidden lg:flex items-center gap-1 xl:gap-1.5 overflow-x-auto max-w-2xl shrink-0 [&::-webkit-scrollbar]:hidden"
+            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
           >
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            {navGroups.flatMap(g => g.items).map((item) => {
-            <input
+              const isActive = checkIsActive(item.path);
-              type="text"
+              const Icon = item.icon;
-              value={searchQuery}
+              return (
-              onChange={(e) => {
+                <Link
-                setSearchQuery(e.target.value);
+                  key={item.path}
-                setIsSearchOpen(true);
+                  to={item.path}
-              }}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
-              onFocus={() => setIsSearchOpen(true)}
+                    isActive
-              placeholder="Search notes, faculty, bus routes..."
+                      ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-xs border border-orange-400/40'
-              className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-violet-500/50 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
+                      : 'text-slate-300 hover:text-white hover:bg-slate-800/60 border border-transparent'
-              style={{ fontFamily: 'Inter, sans-serif' }}
+                  }`}
-            />
+                  style={{ fontFamily: 'Poppins, sans-serif' }}
-            <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1.5 py-0.5 rounded-md shadow-2xs">
-              ⌘K
-            </span>
-          </div>
-
-          {/* Search Live Results Dropdown Overlay */}
-          {isSearchOpen && (
-            <div className="absolute top-full left-0 mt-2 w-full sm:w-[420px] 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" />
+                  <Icon className={`w-3.5 h-3.5 ${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.5 shrink-0">
+            
+            {/* Global Search Input */}
+            <div className="relative min-w-0 w-28 xs:w-36 sm:w-44 md:w-52" 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-10 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-[400px] 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-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
+              <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="hidden sm:flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800">
+                {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"
+                    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 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>
-
-              <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-[#1E1B4B] text-violet-300 flex items-center justify-center shrink-0 border border-violet-800/40">
-                            <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-violet-300 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>
-      </div>
-
-      {/* Right Header Status Bar */}
-      <div className="flex items-center gap-2 sm:gap-3 shrink-0">
-        {/* Date Display Badge */}
-        <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
-          <Calendar className="w-3.5 h-3.5 text-violet-400" />
-          <span>{currentDate}</span>
-        </div>
-
-        {/* Functional 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-violet-400 ring-2 ring-[#0F172A]" />
-            )}
-          </button>
-
-          {/* Notifications Panel Dropdown */}
-          {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-violet-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-violet-400 hover:text-violet-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 Quick Badge (If Logged In) */}
-        {isAuthenticated && user && (
-          <div className="flex items-center gap-2 pl-2 border-l border-slate-800">
-            {user.pictureUrl ? (
-              <img
-                src={user.pictureUrl}
-                alt={user.name}
-                className="w-8 h-8 rounded-full border border-slate-700 object-cover"
-                referrerPolicy="no-referrer"
-              />
             ) : (
-              <div className="w-8 h-8 rounded-full bg-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center border border-violet-800/40">
+              <button
-                {user.name.charAt(0)}
+                onClick={loginWithGoogle}
-              </div>
+                className="hidden sm:flex items-center gap-1.5 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"
+                style={{ fontFamily: 'Poppins, sans-serif' }}
+              >
+                <LogIn className="w-3.5 h-3.5 shrink-0" />
+                <span>Sign In</span>
+              </button>
             )}
-            <div className="hidden xl:flex flex-col text-left">
+          <button
-              <span className="text-xs font-bold text-white leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
+            onClick={() => setIsMobileMenuOpen((prev) => !prev)}
-                {user.name}
+            className="lg:hidden p-1.5 sm:p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-200 border border-slate-800 flex items-center gap-1.5 transition-colors cursor-pointer"
-              </span>
+            title="Toggle Menu"
-              <span className="text-[10px] text-violet-300 font-semibold">
+          >
-                {isVerifiedStudent ? 'Verified Student' : 'RIT Account'}
+            {isMobileMenuOpen ? (
-              </span>
+              <X className="w-4 h-4 text-orange-400" />
-            </div>
+            ) : (
-          </div>
+              <Grid className="w-4 h-4 text-orange-400" />
-        )}
+            )}
+            <span className="text-xs font-bold text-slate-200">Menu</span>
+          </button>
+        </div>
       </div>
+
+      {/* ─── SLEEK, MINIMAL & COMPACT TOP DROPDOWN MENU (MOBILE ONLY) ─── */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <>
+            {/* Backdrop */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="fixed inset-0 z-40 bg-black/40 backdrop-blur-xs lg:hidden"
+            />
+
+            {/* Compact Top Dropdown Panel (Only ~220px High, No Screen Hogging!) */}
+            <motion.div
+              initial={{ opacity: 0, y: -10, scaleY: 0.96 }}
+              animate={{ opacity: 1, y: 0, scaleY: 1 }}
+              exit={{ opacity: 0, y: -10, scaleY: 0.96 }}
+              transition={{ duration: 0.18, ease: 'easeOut' }}
+              className="absolute top-full inset-x-0 z-50 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl p-3 rounded-b-2xl lg:hidden max-h-[65vh] overflow-y-auto custom-scrollbar"
+            >
+              <div className="max-w-4xl mx-auto space-y-2.5">
+                
+                {/* Header Category Header */}
+                <div className="flex items-center justify-between px-1 pb-1 border-b border-slate-800/80">
+                  <span className="text-[10px] font-extrabold text-orange-400 uppercase tracking-wider">
+                    Quick Navigation Modules
+                  </span>
+                  <button
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="text-[10px] font-semibold text-slate-400 hover:text-white"
+                  >
+                    Close ✕
+                  </button>
+                </div>
+
+                {/* Compact 2-Column Pill Grid */}
+                <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-1.5">
+                  {navGroups.flatMap(g => g.items).map((item) => {
+                    const isActive = checkIsActive(item.path);
+                    const Icon = item.icon;
+
+                    return (
+                      <Link
+                        key={item.path}
+                        to={item.path}
+                        onClick={() => setIsMobileMenuOpen(false)}
+                        className={`flex items-center gap-2 p-2 rounded-xl text-xs font-medium transition-all ${
+                          isActive
+                            ? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white font-bold shadow-xs border border-orange-400/40'
+                            : 'bg-slate-900/80 hover:bg-slate-800 text-slate-200 border border-slate-800'
+                        }`}
+                        style={{ fontFamily: 'Poppins, sans-serif' }}
+                      >
+                        <div className={`p-1 rounded-lg shrink-0 ${isActive ? 'bg-white/20 text-white' : 'text-orange-400 bg-slate-800'}`}>
+                          <Icon className="w-3.5 h-3.5" />
+                        </div>
+                        <span className="truncate">{item.label}</span>
+                      </Link>
+                    );
+                  })}
+                </div>
+
+                {/* Compact Footer CTA */}
+                <div className="pt-1.5 flex items-center justify-between gap-2 border-t border-slate-800/80">
+                  <Link
+                    to="/collab"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] text-white text-[11px] font-bold shadow-sm"
+                  >
+                    <GitBranch className="w-3.5 h-3.5" />
+                    <span>Dev Collab Hub →</span>
+                  </Link>
+
+                  {!isAuthenticated && (
+                    <button
+                      onClick={() => {
+                        setIsMobileMenuOpen(false);
+                        loginWithGoogle();
+                      }}
+                      className="py-1.5 px-3 rounded-xl bg-slate-800 text-slate-200 hover:text-white text-[11px] font-bold border border-slate-700"
+                    >
+                      Sign In
+                    </button>
+                  )}
+                </div>
+
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
     </header>
   );
 }
-

src/components/Sidebar/Sidebar.tsx

@@ -167,7 +167,7 @@ export default function Sidebar({
           {!isCollapsed && (
             <Link
               to="/collab"
-              className="w-full flex items-center justify-between p-3 rounded-2xl bg-gradient-to-r from-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white group transition-all duration-200 shadow-md shadow-slate-950/50"
+              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">
@@ -177,10 +177,10 @@ export default function Sidebar({
                   <span className="text-xs font-bold leading-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
                     Dev Collab Hub
                   </span>
-                  <span className="text-[10px] text-violet-200/90 truncate">Co-Developer Projects</span>
+                  <span className="text-[10px] text-orange-100/90 truncate">Co-Developer Projects</span>
                 </div>
               </div>
-              <ChevronRight className="w-4 h-4 text-violet-200 group-hover:translate-x-0.5 transition-transform" />
+              <ChevronRight className="w-4 h-4 text-orange-100 group-hover:translate-x-0.5 transition-transform" />
             </Link>
           )}
 
@@ -210,7 +210,7 @@ export default function Sidebar({
                         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-[#1E1B4B] to-[#2E1065] text-white shadow-sm border border-violet-800/50'
+                          ? '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' }}
@@ -225,7 +225,7 @@ export default function Sidebar({
                       </div>
 
                       {!isCollapsed && item.highlight && !isActive && (
-                        <span className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" />
+                        <span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse" />
                       )}
                     </Link>
                   );
@@ -244,11 +244,11 @@ export default function Sidebar({
                   <img
                     src={user.pictureUrl}
                     alt={user.name}
-                    className="w-8 h-8 rounded-xl border border-violet-800/40 object-cover shrink-0"
+                    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-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-violet-800/40">
+                  <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>
                 )}
@@ -280,7 +280,7 @@ export default function Sidebar({
               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-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md`}
+              } 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" />

src/index.css

@@ -3,20 +3,20 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary: #1E1B4B;
+  --color-primary: #F97316;
-  --color-primary-light: #2E1065;
+  --color-primary-light: #FB923C;
-  --color-primary-dark: #0A0D16;
+  --color-primary-dark: #C25E17;
-  --color-primary-50: #0B0F19;
+  --color-primary-50: #FFF7ED;
-  --color-primary-100: #131722;
+  --color-primary-100: #FFEDD5;
-  --color-primary-200: #1E1B4B;
+  --color-primary-200: #FED7AA;
-  --color-secondary: #2E1065;
+  --color-secondary: #EA580C;
   --color-background: #FAFAFA;
   --color-surface: #FFFFFF;
   --color-border: #E5E7EB;
   --color-heading: #1E293B;
   --color-body: #475569;
   --color-muted: #94A3B8;
-  --color-accent: #131722;
+  --color-accent: #C25E17;
 
   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body: 'Inter', system-ui, sans-serif;
@@ -70,16 +70,16 @@ body {
   background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
-  background: #1E1B4B;
+  background: #F97316;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #2E1065;
+  background: #EA580C;
 }
 
 /* Selection */
 ::selection {
-  background-color: rgba(30, 27, 75, 0.4);
+  background-color: rgba(249, 115, 22, 0.35);
   color: #FFFFFF;
 }
 
@@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Focus ring */
 :focus-visible {
-  outline: 2px solid #1E1B4B;
+  outline: 2px solid #F97316;
   outline-offset: 2px;
 }
 
@@ -182,7 +182,7 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
+  background: linear-gradient(135deg, #C25E17, #EA580C, #F97316);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -191,16 +191,16 @@ h1, h2, h3, h4, h5, h6 {
 /* Primary button */
 .btn-primary {
   font-family: var(--font-button);
-  background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
+  background: linear-gradient(135deg, #C25E17, #EA580C);
   color: white;
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   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(15, 23, 42, 0.5);
+  box-shadow: 0 4px 15px rgba(194, 94, 23, 0.4);
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -209,8 +209,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(46, 16, 101, 0.6);
+  box-shadow: 0 8px 25px rgba(234, 88, 12, 0.5);
-  background: linear-gradient(135deg, #1E1B4B, #2E1065, #3B0764);
+  background: linear-gradient(135deg, #EA580C, #F97316);
 }
 
 .btn-primary:active {
@@ -236,8 +236,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .btn-ghost:hover {
-  border-color: #2E1065;
+  border-color: #F97316;
-  color: #2E1065;
+  color: #EA580C;
   transform: translateY(-2px);
 }
 

src/layouts/MainLayout.tsx

@@ -1,7 +1,5 @@
-import { useState, useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import Sidebar from '@/components/Sidebar/Sidebar';
 import Header from '@/components/Header/Header';
 import Footer from '@/components/Footer/Footer';
 
@@ -12,40 +10,15 @@ const pageVariants = {
 };
 
 export default function MainLayout() {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
-    return localStorage.getItem('rit_sidebar_collapsed') === 'true';
-  });
   const location = useLocation();
 
-  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
-  const toggleSidebarCollapse = () => {
-    setIsSidebarCollapsed((prev) => {
-      const next = !prev;
-      localStorage.setItem('rit_sidebar_collapsed', String(next));
-      return next;
-    });
-  };
-
   return (
-    <div className="min-h-screen w-full max-w-full bg-[#F8FAFC] flex flex-col lg:flex-row font-sans selection:bg-purple-700 selection:text-white overflow-x-hidden">
+    <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">
-      {/* Left Sidebar Navigation */}
+      {/* Top Header Navigation */}
-      <Sidebar
+      <Header />
-        isOpen={isSidebarOpen}
-        onToggle={toggleSidebar}
-        isCollapsed={isSidebarCollapsed}
-        onToggleCollapse={toggleSidebarCollapse}
-      />
-
-      {/* Main Right Viewport Wrapper */}
-      <div
-        className={`flex-1 flex flex-col min-w-0 w-full transition-all duration-300 ${
-          isSidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64 xl:pl-72'
-        }`}
-      >
-        {/* Top Header */}
-        <Header onToggleSidebar={toggleSidebar} />
 
+      {/* 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">

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: '#1E1B4B', bg: 'bg-slate-900/80', text: 'text-violet-300', border: 'border-slate-800' },
+  { id: 'a-block', label: 'A Block', color: '#C25E17', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
-  { id: 'b-block', label: 'B Block', color: '#2E1065', bg: 'bg-slate-900/60', text: 'text-violet-300', border: 'border-slate-800' },
+  { id: 'b-block', label: 'B Block', color: '#EA580C', bg: 'bg-orange-50/60', text: 'text-orange-950', border: 'border-orange-300' },
-  { id: 'c-block', label: 'C Block', color: '#3B0764', bg: 'bg-slate-900/40', text: 'text-violet-300', border: 'border-slate-800' },
+  { id: 'c-block', label: 'C Block', color: '#F97316', bg: 'bg-orange-50/40', text: 'text-orange-950', border: 'border-orange-300' },
   { 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

@@ -534,7 +534,7 @@ export default function Community() {
                                                   <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 */}
-                                                    <span className="inline-flex text-violet-400" title="Verified Senior Helper">
+                                                    <span className="inline-flex text-orange-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-violet-400">Home</Link>
+              <Link to="/" className="hover:text-orange-500">Home</Link>
               <ChevronRight className="w-3 h-3" />
-              <span className="text-violet-400">Developer Collab Hub</span>
+              <span className="text-orange-500 font-medium">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-slate-700 text-violet-300 text-xs font-semibold mb-3">
+                <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">
-                  <Code2 className="w-4 h-4 text-violet-300" /> RIT Developers Environment
+                  <Code2 className="w-4 h-4 text-orange-400" /> 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, #0F172A, #1E1B4B, #2E1065)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                  <span style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C, #F97316)', 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-slate-900/25 shrink-0 cursor-pointer border border-violet-800/40"
+                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"
-                style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', fontFamily: 'Poppins, sans-serif' }}
+                style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)', fontFamily: 'Poppins, sans-serif' }}
               >
-                {isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
+                {isVerifiedStudent && <ShieldCheck className="w-4 h-4 text-amber-200" />}
                 <Plus className="w-4.5 h-4.5" />
                 Post Collaboration Request
               </motion.button>

src/pages/Events/Events.tsx

@@ -217,23 +217,23 @@ export default function Events() {
         <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"
-            style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)' }}
+            style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)' }}
           >
             {/* 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, #2E1065, transparent)' }}
+              style={{ background: 'radial-gradient(circle, #EA580C, 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-violet-300 text-xs font-semibold mb-3 border border-violet-900/40">
+              <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">
                 <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-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <p className="text-orange-50 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!
               </p>
             </div>
@@ -242,10 +242,10 @@ 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-violet-800/40"
+              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"
-              style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', fontFamily: 'Poppins, sans-serif' }}
+              style={{ background: 'linear-gradient(135deg, #EA580C, #F97316)', fontFamily: 'Poppins, sans-serif' }}
             >
-              <Sparkles className="w-4 h-4 text-violet-200" />
+              <Sparkles className="w-4 h-4 text-amber-200" />
               <span>Find My Ideal Club</span>
               <ArrowRight className="w-4 h-4" />
             </motion.button>
@@ -262,61 +262,58 @@ 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] || '#1E1B4B';
+            const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#C25E17';
             const isLiked = likedClubs.has(club.id);
             const likesCount = likesMap[club.id] || 0;
 
             return (
               <motion.div
-                whileHover={{ y: -4 }}
+                layout
+                whileHover={{ y: -6 }}
                 onClick={() => setSelectedClub(club)}
-                className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-slate-800 transition-all flex flex-col justify-between h-full group"
+                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"
-                style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
               >
                 <div>
-                  {/* Top Row: Tech Icon / Club Logo & Interactive Heart Like Button */}
+                  {/* Top Row: Club Icon & Like Button */}
-                  <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-start justify-between mb-4">
                     {club.logoUrl ? (
-                      <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">
+                      <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">
                         <img src={club.logoUrl} alt={club.name} className="w-full h-full object-cover rounded-full" />
                       </div>
                     ) : (
                       <div
-                        className="w-11 h-11 rounded-full flex items-center justify-center text-white shadow-sm transition-transform group-hover:scale-105"
+                        className="w-13 h-13 rounded-2xl flex items-center justify-center text-white shadow-md shrink-0 group-hover:scale-105 transition-transform"
-                        style={{
+                        style={{ background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)` }}
-                          background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)`,
-                        }}
                       >
-                        <IconComponent className="w-5 h-5 text-white" />
+                        <IconComponent className="w-6 h-6 text-white" />
                       </div>
                     )}
 
-                    {/* Like Button */}
+                    <motion.button
-                    <div className="flex items-center gap-2">
+                      whileHover={{ scale: 1.1 }}
-                      <motion.button
+                      whileTap={{ scale: 0.9 }}
-                        whileHover={{ scale: 1.08 }}
+                      onClick={(e) => {
-                        whileTap={{ scale: 0.85 }}
+                        e.stopPropagation();
-                        onClick={(e) => {
+                        toggleLike(club.id);
-                          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 ${
-                        }}
+                        isLiked
-                        className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold transition-all cursor-pointer border ${
+                          ? 'bg-rose-500 text-white border-rose-600 shadow-sm'
-                          isLiked
+                          : 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200'
-                            ? 'bg-rose-50 border-rose-200 text-rose-600 shadow-2xs'
+                      }`}
-                            : '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' : ''}`} />
-                      >
+                      <span>{likesCount}</span>
-                        <Heart className={`w-3.5 h-3.5 ${isLiked ? 'fill-rose-500 text-rose-500' : ''}`} />
+                    </motion.button>
-                        <span>{likesCount}</span>
-                      </motion.button>
-                    </div>
                   </div>
 
-                  {/* Club Title & Description */}
+                  {/* Club Title & Tagline */}
-                  <h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                  <h3 className="text-xl font-bold text-[#1E293B] mb-1.5 group-hover:text-orange-600 transition-colors" style={{ fontFamily: 'Playfair Display, serif' }}>
                     {club.name}
                   </h3>
-                  <p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
+                  <p className="text-xs text-[#64748B] line-clamp-2 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
+                    {club.description}
+                  </p>
                 </div>
 
                 {/* Bottom Row: Category Tag & View Details Button */}
@@ -327,7 +324,7 @@ 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-[#1E1B4B] hover:bg-[#2E1065] transition-colors"
+                    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"
                     style={{ fontFamily: 'Poppins, sans-serif' }}
                   >
                     View Details
@@ -390,13 +387,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-[#1E1B4B] transition-all duration-300 rounded-full"
+                      className="h-full bg-[#C25E17] 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-[#1E1B4B]">
+                  <div className="flex items-center gap-2 mb-2 text-[#C25E17]">
                     <Compass className="w-5 h-5" />
                     <span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
                   </div>
@@ -410,10 +407,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-slate-800 hover:bg-slate-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-orange-500 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-[#1E1B4B] group-hover:translate-x-1 transition-all" />
+                        <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#C25E17] group-hover:translate-x-1 transition-all" />
                       </button>
                     ))}
                   </div>
@@ -431,7 +428,7 @@ export default function Events() {
                 /* Results Screen */
                 <div>
                   <div className="text-center mb-6">
-                    <div className="w-14 h-14 rounded-2xl bg-slate-900 text-violet-300 flex items-center justify-center mx-auto mb-3">
+                    <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">
                       <CheckCircle2 className="w-8 h-8" />
                     </div>
                     <h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
@@ -444,7 +441,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] || '#1E1B4B';
+                      const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#C25E17';
                       const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
 
                       return (
@@ -454,7 +451,7 @@ export default function Events() {
                             setIsQuizOpen(false);
                             setSelectedClub(item.club);
                           }}
-                          className="p-4 rounded-2xl border border-slate-200 hover:border-slate-800 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-orange-500 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 ? (
@@ -495,7 +492,7 @@ export default function Events() {
                     </button>
                     <button
                       onClick={() => setIsQuizOpen(false)}
-                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#1E1B4B] hover:bg-[#2E1065] transition-all cursor-pointer"
+                      className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#C25E17] hover:bg-[#EA580C] transition-all cursor-pointer"
                     >
                       Explore All Clubs
                     </button>
@@ -529,7 +526,7 @@ export default function Events() {
               {/* Modal Header */}
               {(() => {
                 const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
-                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#1E1B4B';
+                const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#C25E17';
                 const isLiked = likedClubs.has(selectedClub.id);
                 const likesCount = likesMap[selectedClub.id] || 0;
 
@@ -580,9 +577,9 @@ export default function Events() {
               })()}
 
               {/* Club Detailed Description */}
-              <div className="mb-5 bg-slate-900/40 border border-slate-800 rounded-2xl p-4.5">
+              <div className="mb-5 bg-orange-50/60 border border-orange-200/60 rounded-2xl p-4.5">
-                <div className="flex items-center gap-2 text-xs font-bold text-violet-300 uppercase tracking-wider mb-2">
+                <div className="flex items-center gap-2 text-xs font-bold text-orange-600 uppercase tracking-wider mb-2">
-                  <Info className="w-4 h-4 text-violet-300" />
+                  <Info className="w-4 h-4 text-orange-600" />
                   <span>About the Club</span>
                 </div>
                 <p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -593,22 +590,22 @@ export default function Events() {
               {/* Leadership & Contact Information */}
               <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">
-                  <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#1E1B4B] to-[#2E1065] text-white flex items-center justify-center shadow-xs shrink-0">
+                  <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">
                     <UserCheck className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <span className="text-[11px] text-violet-300 font-semibold block">President / Student Lead</span>
+                    <span className="text-[11px] text-orange-300 font-semibold block">President / Student Lead</span>
                     <span className="text-sm font-bold text-white">{selectedClub.presidentName || 'Student President'}</span>
                   </div>
                 </div>
 
                 {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="w-10 h-10 rounded-xl bg-gradient-to-br from-[#2E1065] to-[#3B0764] text-white flex items-center justify-center shadow-xs shrink-0">
+                    <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">
                       <Users className="w-5 h-5 text-white" />
                     </div>
                     <div>
-                      <span className="text-[11px] text-violet-300 font-semibold block">Vice President</span>
+                      <span className="text-[11px] text-orange-300 font-semibold block">Vice President</span>
                       <span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
                     </div>
                   </div>
@@ -618,7 +615,7 @@ export default function Events() {
               {/* Community & Social Links */}
               <div className="mb-6 bg-slate-900/40 border border-slate-800 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-violet-300 uppercase tracking-wider">
+                  <div className="flex items-center gap-2 text-xs font-bold text-orange-400 uppercase tracking-wider">
                     <ExternalLink className="w-3.5 h-3.5" />
                     <span>Community & Social Links</span>
                   </div>

src/pages/Home/Home.tsx

@@ -102,7 +102,7 @@ export default function Home() {
                 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-[#1E1B4B] transition-colors shrink-0">
+                <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">
                   <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
                 </div>
                 <span className="text-[10px] sm:text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>

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-[#0F172A] via-[#1E1B4B] to-[#2E1065]">LeetCode Leaderboard</span>
+                Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#C25E17] via-[#EA580C] 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-violet-400" /> Active Coders
+                <User className="w-4 h-4 text-orange-400" /> Active Coders
               </span>
               <p className="text-xl font-bold text-[#1E293B] mt-1">
                 {profiles.length}

src/pages/Notes/Notes.tsx

@@ -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-violet-300">
+                    <div className="w-8 h-8 rounded-xl bg-slate-900 border border-slate-700 flex items-center justify-center text-orange-400">
                       <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-[#1E1B4B]"
+      color: "bg-[#C25E17]"
     },
     {
       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-[#1E1B4B]"
+      color: "bg-[#C25E17]"
     },
 
     // 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-violet-300" />;
+      case 'mvp': return <Box className="w-4 h-4 text-orange-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-slate-900 text-violet-300' :
+                    startup.stage === 'mvp' ? 'bg-orange-100 text-orange-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-[#1E1B4B]"
+      color: "bg-[#C25E17]"
     },
     {
       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-[#1E1B4B]"
+      color: "bg-[#C25E17]"
     },
 
     // 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-violet-300" />;
+      case 'mvp': return <Box className="w-4 h-4 text-orange-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-slate-900 text-violet-300' :
+                    startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
                     startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
                     'bg-purple-100 text-purple-800'
                   }`}>