ui changes

src/components/Footer/Footer.tsx

@@ -16,24 +16,24 @@ const quickLinks = [
 export default function Footer() {
   return (
     <footer className="bg-[#0F172A] text-white border-t border-slate-800">
-      {/* CTA Banner - Enterprise Deep Indigo */}
-      <div className="bg-gradient-to-r from-indigo-700 via-indigo-800 to-purple-900 py-12 border-b border-indigo-500/20">
+      {/* CTA Banner - Professional Dark Slate Gray */}
+      <div className="bg-slate-800 border-b border-slate-700/60 py-10">
         <div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6 px-4">
           <div>
             <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
               Ready to explore RIT?
             </h3>
-            <p className="text-indigo-100/90 mt-1 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
+            <p className="text-slate-300 mt-1 text-sm" 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 hover:bg-slate-100 text-indigo-950 px-6 py-3 rounded-xl font-bold transition-all shadow-md hover:scale-105"
+            className="flex items-center gap-2 bg-slate-100 hover:bg-white text-slate-900 px-6 py-3 rounded-xl font-bold transition-all shadow-sm border border-slate-200 hover:scale-105"
             style={{ fontFamily: 'Poppins, sans-serif' }}
           >
             <span>Ask Chatbot</span>
-            <ArrowRight className="w-4 h-4 text-indigo-700" />
+            <ArrowRight className="w-4 h-4 text-slate-700" />
           </Link>
         </div>
       </div>

src/components/Header/Header.tsx

@@ -5,8 +5,6 @@ import {
   Bell,
   Menu,
   Calendar,
-  LogIn,
-  Check,
   X,
   BookOpen,
   Bus,
@@ -15,8 +13,6 @@ import {
   Code2,
   Trophy,
   Bot,
-  Rocket,
-  ChevronRight
 } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
 import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
@@ -40,7 +36,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   const [isNotifOpen, setIsNotifOpen] = useState(false);
   const [currentDate, setCurrentDate] = useState('');
   const navigate = useNavigate();
-  const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle } = useAuth();
+  const { user, isAuthenticated, isVerifiedStudent } = useAuth();
   const notifRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLDivElement>(null);
 
@@ -180,24 +176,24 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
-      <div className="flex items-center gap-4">
+    <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
+      <div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
         {/* Mobile Toggle */}
         <button
           onClick={onToggleSidebar}
-          className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer"
+          className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer shrink-0"
           title="Toggle Navigation Menu"
         >
           <Menu className="w-5 h-5" />
         </button>
 
         {/* Global Interactive Search Input Container */}
-        <div className="relative" ref={searchRef}>
+        <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}>
           <div
             onClick={() => setIsSearchOpen(true)}
-            className="relative w-64 sm:w-80 md:w-96 cursor-text"
+            className="relative w-full cursor-text"
           >
-            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
             <input
               type="text"
               value={searchQuery}
@@ -206,8 +202,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                 setIsSearchOpen(true);
               }}
               onFocus={() => setIsSearchOpen(true)}
-              placeholder="Search notes, faculty, bus routes, clubs..."
-              className="w-full pl-10 pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner"
+              placeholder="Search notes, faculty, bus routes..."
+              className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner truncate"
               style={{ fontFamily: 'Inter, sans-serif' }}
             />
             <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-400 bg-white border border-slate-200 px-1.5 py-0.5 rounded-md shadow-2xs">
@@ -291,7 +287,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
       </div>
 
       {/* Right Header Status Bar */}
-      <div className="flex items-center gap-3">
+      <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-100 text-slate-600 text-xs font-medium border border-slate-200/60">
           <Calendar className="w-3.5 h-3.5 text-indigo-600" />
@@ -376,8 +372,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
           )}
         </div>
 
-        {/* User Auth Quick Badge */}
-        {isAuthenticated && user ? (
+        {/* User Auth Quick Badge (If Logged In) */}
+        {isAuthenticated && user && (
           <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
             {user.pictureUrl ? (
               <img
@@ -400,17 +396,9 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
               </span>
             </div>
           </div>
-        ) : (
-          <button
-            onClick={loginWithGoogle}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold shadow-sm transition-all cursor-pointer"
-            style={{ fontFamily: 'Poppins, sans-serif' }}
-          >
-            <LogIn className="w-3.5 h-3.5" />
-            <span>Sign In</span>
-          </button>
         )}
       </div>
     </header>
   );
 }
+

src/index.css

@@ -3,20 +3,20 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary: #F97316;
-  --color-primary-light: #FB923C;
-  --color-primary-dark: #EA580C;
-  --color-primary-50: #FFF7ED;
-  --color-primary-100: #FFEDD5;
-  --color-primary-200: #FED7AA;
-  --color-secondary: #FB923C;
+  --color-primary: #6366F1;
+  --color-primary-light: #818CF8;
+  --color-primary-dark: #4F46E5;
+  --color-primary-50: #EEF2FF;
+  --color-primary-100: #E0E7FF;
+  --color-primary-200: #C7D2FE;
+  --color-secondary: #818CF8;
   --color-background: #FAFAFA;
   --color-surface: #FFFFFF;
   --color-border: #E5E7EB;
   --color-heading: #1E293B;
   --color-body: #475569;
   --color-muted: #94A3B8;
-  --color-accent: #FFF7ED;
+  --color-accent: #EEF2FF;
 
   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body: 'Inter', system-ui, sans-serif;
@@ -33,19 +33,24 @@
   --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 {
+html, body {
   scroll-behavior: smooth;
   font-size: 16px;
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+#root {
+  width: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
 body {
@@ -65,29 +70,28 @@ body {
   background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
-  background: #F97316;
+  background: #6366F1;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #EA580C;
+  background: #4F46E5;
 }
 
 /* Selection */
 ::selection {
-  background-color: rgba(249, 115, 22, 0.2);
+  background-color: rgba(99, 102, 241, 0.2);
   color: #1E293B;
 }
 
 /* Typography base */
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-heading);
-  color: #1E293B;
   line-height: 1.2;
 }
 
 /* Focus ring */
 :focus-visible {
-  outline: 2px solid #F97316;
+  outline: 2px solid #6366F1;
   outline-offset: 2px;
 }
 
@@ -178,16 +182,16 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Gradient text */
 .gradient-text {
-  background: linear-gradient(135deg, #F97316, #FB923C, #FBBF24);
+  background: linear-gradient(135deg, #4F46E5, #6366F1, #8B5CF6);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-/* Orange button */
+/* Primary button */
 .btn-primary {
   font-family: var(--font-button);
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, #4F46E5, #6366F1);
   color: white;
   border: none;
   border-radius: 12px;
@@ -196,7 +200,7 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
+  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -205,8 +209,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
-  background: linear-gradient(135deg, #EA580C, #F97316);
+  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
+  background: linear-gradient(135deg, #4338CA, #4F46E5);
 }
 
 .btn-primary:active {
@@ -232,8 +236,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .btn-ghost:hover {
-  border-color: #F97316;
-  color: #F97316;
+  border-color: #6366F1;
+  color: #6366F1;
   transform: translateY(-2px);
 }
 

src/layouts/MainLayout.tsx

@@ -28,7 +28,7 @@ export default function MainLayout() {
   };
 
   return (
-    <div className="min-h-screen bg-[#F8FAFC] flex flex-col lg:flex-row font-sans selection:bg-purple-700 selection:text-white">
+    <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">
       {/* Left Sidebar Navigation */}
       <Sidebar
         isOpen={isSidebarOpen}
@@ -39,7 +39,7 @@ export default function MainLayout() {
 
       {/* Main Right Viewport Wrapper */}
       <div
-        className={`flex-1 flex flex-col min-w-0 transition-all duration-300 ${
+        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'
         }`}
       >
@@ -47,7 +47,7 @@ export default function MainLayout() {
         <Header onToggleSidebar={toggleSidebar} />
 
         {/* Dynamic Page Content */}
-        <div className="flex-1 p-4 sm:p-6 lg:p-8">
+        <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}
@@ -56,7 +56,7 @@ export default function MainLayout() {
               animate="enter"
               exit="exit"
               transition={{ duration: 0.25, ease: 'easeInOut' }}
-              className="max-w-7xl mx-auto"
+              className="max-w-7xl mx-auto w-full"
             >
               <Outlet />
             </motion.main>

src/pages/Home/Home.tsx

@@ -5,22 +5,24 @@ import {
   Bus,
   Calendar,
   Code2,
-  Trophy
+  Trophy,
+  Sparkles,
+  ChevronRight
 } from 'lucide-react';
 
 export default function Home() {
   const quickLaunchModules = [
-    { label: 'Bus Routes', path: '/bus-routes', icon: Bus, desc: 'Schedules & Stops' },
-    { label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Moodle Materials' },
-    { label: 'Campus Chatbot', path: '/ai-assistant', icon: Bot, desc: 'Instant Q&A' },
+    { label: 'Bus Routes', path: '/bus-routes', icon: Bus, desc: 'Schedules & GPS' },
+    { label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Moodle Material' },
+    { 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 Ranking', path: '/leetcode', icon: Trophy, desc: 'Coder Leaderboard' },
+    { 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 overflow-hidden rounded-3xl h-[calc(100vh-120px)] min-h-[500px] flex flex-col justify-between p-6 sm:p-10 text-white shadow-2xl border border-slate-800 bg-[#0F172A]">
-      {/* Background Video (Low Bitrate & AutoPlay Muted) */}
+    <div className="relative overflow-hidden rounded-3xl min-h-[calc(100vh-100px)] flex flex-col justify-between p-5 sm:p-8 lg:p-10 text-white shadow-2xl border border-slate-800/80 bg-slate-950 group">
+      {/* ─── High Clarity Background Video ───────────────────────────────────── */}
       <video
         src="/campus-video.mp4"
         autoPlay
@@ -28,59 +30,85 @@ export default function Home() {
         muted
         playsInline
         preload="auto"
-        className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+        className="absolute inset-0 w-full h-full object-cover pointer-events-none transition-transform duration-1000 scale-[1.01]"
+        style={{
+          filter: 'contrast(1.05) brightness(0.9) saturate(1.05)',
+          imageRendering: 'crisp-edges',
+        }}
       />
 
-      {/* Clean Dark Vignette Overlay */}
-      <div className="absolute inset-0 bg-slate-950/45 backdrop-blur-[1px]" />
+      {/* Ultra-sleek Gradient Overlay for Crisp Text Contrast */}
+      <div 
+        className="absolute inset-0 pointer-events-none" 
+        style={{
+          background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.25) 45%, rgba(15, 23, 42, 0.75) 100%)',
+        }}
+      />
 
       {/* Top Branding Badge */}
-      <div className="relative z-10 text-center sm:text-left">
-        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-black/40 border border-white/20 text-xs font-semibold text-white backdrop-blur-md">
+      <div className="relative z-10 flex items-center justify-between">
+        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-950/40 border border-white/20 text-[11px] font-semibold text-white backdrop-blur-md shadow-lg">
+          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
           <span>Rajalakshmi Institute of Technology</span>
         </div>
+
+        <Link
+          to="/raise"
+          className="hidden sm:inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-gradient-to-r from-rose-500/80 to-pink-600/80 hover:from-rose-500 hover:to-pink-600 text-white text-xs font-bold border border-white/20 backdrop-blur-md transition-all shadow-md hover:scale-105"
+          style={{ fontFamily: 'Poppins, sans-serif' }}
+        >
+          <Sparkles className="w-3.5 h-3.5 text-amber-200" />
+          <span>RAISE Incubator</span>
+        </Link>
       </div>
 
       {/* Center Main Hero Title */}
-      <div className="relative z-10 max-w-3xl mx-auto text-center space-y-4 my-auto py-4">
+      <div className="relative z-10 max-w-4xl mx-auto text-center space-y-4 my-auto py-10 sm:py-16">
         <h1
-          className="text-4xl sm:text-6xl font-black tracking-tight leading-tight text-white drop-shadow-[0_4px_24px_rgba(0,0,0,0.95)]"
-          style={{ fontFamily: 'Playfair Display, serif', color: '#FFFFFF', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
+          className="text-4xl sm:text-6xl md:text-7xl font-black tracking-tight leading-tight text-white"
+          style={{ 
+            fontFamily: 'Playfair Display, Georgia, serif', 
+            color: '#FFFFFF', 
+            textShadow: '0 4px 30px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.9)' 
+          }}
         >
           RIT Freshers Hub
         </h1>
         <p
-          className="text-sm sm:text-base text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto drop-shadow-md"
-          style={{ fontFamily: 'Inter, sans-serif' }}
+          className="text-sm sm:text-base md:text-lg text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto"
+          style={{ 
+            fontFamily: 'Inter, sans-serif',
+            textShadow: '0 2px 12px rgba(0,0,0,0.9)'
+          }}
         >
-          Centralized campus portal — academic notes, chatbot, bus routes, faculty directory & student developer tools.
+          Your unified campus portal — academic notes, AI chatbot, live bus tracking, faculty directory & student developer hub.
         </p>
       </div>
 
-      {/* Bottom Transparent Glassmorphic Quick Launch Bar */}
+      {/* Bottom Ultra-Compact Ultra-Transparent Quick Launch Bar */}
       <div className="relative z-10 pt-2">
         <div className="text-center mb-3">
-          <span className="text-[11px] font-bold text-slate-300 uppercase tracking-widest bg-black/50 px-3.5 py-1.5 rounded-full border border-white/15 backdrop-blur-md">
+          <span className="text-[10px] font-extrabold text-slate-200 uppercase tracking-widest bg-slate-950/50 px-3 py-1 rounded-full border border-white/15 backdrop-blur-md shadow-md inline-block">
             Quick Launch Portal Modules
           </span>
         </div>
 
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.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-3.5 sm:p-4 rounded-2xl bg-white/10 hover:bg-white/25 border border-white/20 backdrop-blur-md text-white transition-all cursor-pointer hover:scale-[1.04] shadow-lg group text-center"
+                className="flex flex-col items-center justify-center p-2.5 sm:p-3 rounded-2xl bg-slate-950/30 hover:bg-slate-900/60 border border-white/15 hover:border-white/35 backdrop-blur-md text-white transition-all duration-200 cursor-pointer hover:scale-[1.03] shadow-lg group text-center"
               >
-                <div className="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center mb-2 group-hover:bg-indigo-600 transition-colors">
+                <div className="w-8 h-8 rounded-xl bg-white/15 border border-white/20 flex items-center justify-center mb-1.5 group-hover:bg-indigo-600 transition-colors shrink-0">
                   <Icon className="w-4 h-4 text-white" />
                 </div>
-                <span className="text-xs sm:text-sm font-bold truncate max-w-full" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                <span className="text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
                   {item.label}
                 </span>
-                <span className="text-[10px] sm:text-[11px] text-slate-300 truncate max-w-full">
+                <span className="text-[10px] text-slate-300/90 truncate max-w-full mt-0.5">
                   {item.desc}
                 </span>
               </Link>