ui changes

src/App.tsx

@@ -8,7 +8,8 @@ import AIAssistant from '@/pages/AIAssistant/AIAssistant';
 import Campus from '@/pages/Campus/Campus';
 import Events from '@/pages/Events/Events';
 import Community from '@/pages/Community/Community';
-import Profile from '@/pages/Profile/Profile';
+import BusRoutes from '@/pages/BusRoutes/BusRoutes';
+import Faculty from '@/pages/Faculty/Faculty';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -40,9 +41,10 @@ function App() {
             <Route path="/notes" element={<Notes />} />
             <Route path="/ai-assistant" element={<AIAssistant />} />
             <Route path="/campus" element={<Campus />} />
+            <Route path="/bus-routes" element={<BusRoutes />} />
+            <Route path="/faculty" element={<Faculty />} />
             <Route path="/events" element={<Events />} />
             <Route path="/community" element={<Community />} />
-            <Route path="/profile" element={<Profile />} />
           </Route>
         </Routes>
       </BrowserRouter>

src/components/ChatPreview/ChatPreview.tsx

@@ -1,127 +0,0 @@
-import { motion } from 'framer-motion';
-import { Bot, Sparkles, ArrowRight } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { AI_SUGGESTED_PROMPTS } from '@/constants';
-
-const PREVIEW_MESSAGES = [
-  { role: 'user', text: 'What documents do I need for the first day?' },
-  { role: 'ai', text: 'For your first day at RIT, you\'ll need: Allotment order, 10th & 12th mark sheets, Transfer Certificate, Conduct Certificate, and 10 passport-size photos. Originals and 2 sets of photocopies are required. Would you like a complete checklist?' },
-  { role: 'user', text: 'Yes, and what about hostel admission?' },
-  { role: 'ai', text: 'For hostel admission, additionally bring your Aadhaar card, medical fitness certificate, and filled hostel application form. The hostel fee can be paid at the accounts office.' },
-];
-
-export default function ChatPreview() {
-  return (
-    <div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden" style={{ boxShadow: '0 8px 40px -8px rgba(0,0,0,0.12)' }}>
-      {/* Header */}
-      <div className="px-5 py-4 border-b border-[#E5E7EB] flex items-center gap-3">
-        <div
-          className="w-9 h-9 rounded-xl flex items-center justify-center"
-          style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
-        >
-          <Bot className="w-5 h-5 text-white" />
-        </div>
-        <div>
-          <div className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
-            RIT AI Assistant
-          </div>
-          <div className="flex items-center gap-1.5 text-xs text-[#94A3B8]">
-            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
-            Powered by Gemini AI
-          </div>
-        </div>
-        <div className="ml-auto">
-          <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-[#FFF7ED] text-[#F97316]" style={{ fontFamily: 'Poppins, sans-serif' }}>
-            Live
-          </span>
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div className="p-5 flex flex-col gap-3 min-h-[260px]">
-        {PREVIEW_MESSAGES.map((msg, i) => (
-          <motion.div
-            key={i}
-            initial={{ opacity: 0, y: 10 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: i * 0.15 }}
-            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
-          >
-            {msg.role === 'ai' && (
-              <div className="w-7 h-7 rounded-full flex items-center justify-center mr-2 shrink-0 mt-0.5"
-                style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}>
-                <Bot className="w-3.5 h-3.5 text-white" />
-              </div>
-            )}
-            <div
-              className="text-xs leading-relaxed max-w-[78%] px-3.5 py-2.5"
-              style={{
-                background: msg.role === 'user' ? 'linear-gradient(135deg, #F97316, #FB923C)' : '#F8FAFC',
-                color: msg.role === 'user' ? 'white' : '#1E293B',
-                borderRadius: msg.role === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
-                border: msg.role === 'ai' ? '1px solid #E5E7EB' : 'none',
-                fontFamily: 'Inter, sans-serif',
-              }}
-            >
-              {msg.text}
-            </div>
-          </motion.div>
-        ))}
-
-        {/* Typing indicator */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.8 }}
-          className="flex justify-start"
-        >
-          <div className="flex items-center gap-1 px-4 py-2.5 bg-[#F8FAFC] rounded-2xl border border-[#E5E7EB]">
-            {[0, 1, 2].map((i) => (
-              <motion.span
-                key={i}
-                className="w-1.5 h-1.5 bg-[#94A3B8] rounded-full"
-                animate={{ y: [0, -4, 0] }}
-                transition={{ duration: 0.8, repeat: Infinity, delay: i * 0.15 }}
-              />
-            ))}
-          </div>
-        </motion.div>
-      </div>
-
-      {/* Suggested Prompts */}
-      <div className="px-5 pb-2 flex flex-wrap gap-2">
-        {AI_SUGGESTED_PROMPTS.slice(0, 3).map((prompt, i) => (
-          <motion.span
-            key={i}
-            whileHover={{ scale: 1.03 }}
-            className="text-xs px-3 py-1.5 rounded-full border border-[#E5E7EB] text-[#475569] cursor-pointer hover:border-[#F97316] hover:text-[#F97316] transition-all"
-            style={{ fontFamily: 'Inter, sans-serif' }}
-          >
-            {prompt}
-          </motion.span>
-        ))}
-      </div>
-
-      {/* CTA */}
-      <div className="p-5 pt-3">
-        <Link to="/ai-assistant">
-          <motion.button
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-            className="w-full flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-semibold text-white transition-all"
-            style={{
-              fontFamily: 'Poppins, sans-serif',
-              background: 'linear-gradient(135deg, #F97316, #FB923C)',
-              boxShadow: '0 4px 15px rgba(249,115,22,0.35)',
-            }}
-          >
-            <Sparkles className="w-4 h-4" />
-            Ask Anything
-            <ArrowRight className="w-4 h-4" />
-          </motion.button>
-        </Link>
-      </div>
-    </div>
-  );
-}

src/components/Footer/Footer.tsx

@@ -4,8 +4,10 @@ import { GraduationCap, MapPin, Phone, Mail, Camera, Send, Globe, Play, ArrowRig
 const quickLinks = [
   { label: 'Home', path: '/' },
   { label: 'Notes & PYQs', path: '/notes' },
-  { label: 'AI Assistant', path: '/ai-assistant' },
+  { label: 'Chatbot', path: '/ai-assistant' },
   { label: 'Campus Map', path: '/campus' },
+  { label: 'Bus Routes', path: '/bus-routes' },
+  { label: 'Faculty Directory', path: '/faculty' },
   { label: 'Events', path: '/events' },
   { label: 'Community', path: '/community' },
 ];
@@ -38,7 +40,7 @@ export default function Footer() {
             className="flex items-center gap-2 bg-white text-[#F97316] px-6 py-3 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5"
             style={{ fontFamily: 'Poppins, sans-serif' }}
           >
-            Ask AI Assistant
+            Ask Chatbot
             <ArrowRight className="w-4 h-4" />
           </Link>
         </div>
@@ -62,7 +64,7 @@ export default function Footer() {
               </div>
             </div>
             <p className="text-slate-400 text-sm leading-relaxed mb-5" style={{ fontFamily: 'Inter, sans-serif' }}>
-              Your all-in-one guide to campus life at RIT. Notes, AI assistant, events, faculty, and more — made for freshers.
+              Your all-in-one guide to campus life at RIT. Notes, chatbot, events, faculty, and more — made for freshers.
             </p>
             <div className="flex items-center gap-3">
               {[Camera, Send, Globe, Play].map((Icon, i) => (

src/constants/index.ts

@@ -1,11 +1,13 @@
-import type { Feature, Stat, BusRoute, Faculty, Event, Club, Question, Confession, ToolkitItem, CampusLocation } from '@/types';
+import type { Feature, Stat, BusRoute, Faculty, Event, Club, Question, ToolkitItem, CampusLocation } from '@/types';
 
 // ─── Navigation ──────────────────────────────────────────────────────────────
 export const NAV_LINKS = [
   { label: 'Home', path: '/' },
   { label: 'Notes', path: '/notes' },
-  { label: 'AI Assistant', path: '/ai-assistant' },
+  { label: 'Chatbot', path: '/ai-assistant' },
-  { label: 'Campus', path: '/campus' },
+  { label: 'Campus Map', path: '/campus' },
+  { label: 'Bus Routes', path: '/bus-routes' },
+  { label: 'Faculty Directory', path: '/faculty' },
   { label: 'Clubs', path: '/events' },
   { label: 'Community', path: '/community' },
 ];
@@ -15,7 +17,7 @@ export const STATS: Stat[] = [
   { value: 20, suffix: '+', label: 'Sports', icon: 'Trophy' },
   { value: 100, suffix: '+', label: 'Faculty', icon: 'Users' },
   { value: 18, suffix: '', label: 'Clubs', icon: 'Star' },
-  { value: 24, suffix: '/7', label: 'AI Assistant', icon: 'Bot' },
+  { value: 24, suffix: '/7', label: 'Chatbot', icon: 'Bot' },
   { value: 5000, suffix: '+', label: 'Students', icon: 'GraduationCap' },
 ];
 
@@ -33,8 +35,8 @@ export const FEATURES: Feature[] = [
   {
     id: 'ai',
     icon: 'Bot',
-    title: 'AI Fresher Assistant',
+    title: 'RIT Chatbot',
-    description: 'Get instant answers about campus life, academics, rules, and everything RIT – powered by Gemini AI.',
+    description: 'Get instant answers about campus life, academics, rules, and everything RIT.',
     path: '/ai-assistant',
     color: '#8B5CF6',
     bgColor: '#F5F3FF',
@@ -44,7 +46,7 @@ export const FEATURES: Feature[] = [
     icon: 'Map',
     title: 'Campus Map',
     description: 'Explore RIT campus interactively – find departments, labs, library, canteen, and facilities.',
-    path: '/campus?tab=map',
+    path: '/campus',
     color: '#10B981',
     bgColor: '#ECFDF5',
   },
@@ -53,7 +55,7 @@ export const FEATURES: Feature[] = [
     icon: 'Bus',
     title: 'Bus Routes',
     description: 'View all campus bus routes, timings, and pickup locations at a glance.',
-    path: '/campus?tab=bus',
+    path: '/bus-routes',
     color: '#3B82F6',
     bgColor: '#EFF6FF',
   },
@@ -62,7 +64,7 @@ export const FEATURES: Feature[] = [
     icon: 'UserCheck',
     title: 'Faculty Directory',
     description: 'Find faculty contact details, department, designation, and office hours.',
-    path: '/campus?tab=faculty',
+    path: '/faculty',
     color: '#EC4899',
     bgColor: '#FDF2F8',
   },
@@ -93,15 +95,6 @@ export const FEATURES: Feature[] = [
     color: '#06B6D4',
     bgColor: '#ECFEFF',
   },
-  {
-    id: 'confession',
-    icon: 'Heart',
-    title: 'Anonymous Confession',
-    description: 'Share your thoughts, feelings, and confessions anonymously with the RIT community.',
-    path: '/community',
-    color: '#F97316',
-    bgColor: '#FFF7ED',
-  },
 ];
 
 // ─── Bus Routes ──────────────────────────────────────────────────────────────
@@ -860,9 +853,6 @@ export const QUESTIONS_DATA: Question[] = [
   },
 ];
 
-// ─── Confessions ─────────────────────────────────────────────────────────────
-export const CONFESSIONS_DATA: Confession[] = [];
-
 // ─── Toolkit Items ───────────────────────────────────────────────────────────
 export const TOOLKIT_ITEMS: ToolkitItem[] = [
   { id: '1', title: 'CS tools', description: 'Computer Science tools and resources', type: 'link', url: '#', icon: 'Code', category: 'Engineering' },

src/pages/AIAssistant/AIAssistant.tsx

@@ -9,7 +9,7 @@ const INITIAL_MESSAGES: ChatMessage[] = [
   {
     id: '1',
     role: 'assistant',
-    content: "👋 Hi there! I'm your **RIT AI Assistant**, powered by Google Gemini. I have comprehensive knowledge about Rajalakshmi Institute of Technology — from admission procedures to campus facilities.\n\nHow can I help you today?",
+    content: "👋 Hi there! I'm your **RIT Chatbot**. I have comprehensive knowledge about Rajalakshmi Institute of Technology — from admission procedures to campus facilities.\n\nHow can I help you today?",
     timestamp: new Date().toISOString(),
   },
 ];
@@ -109,10 +109,10 @@ export default function AIAssistant() {
               <Bot className="w-5 h-5 text-white" />
             </div>
             <div>
-              <h1 className="font-semibold text-[#1E293B] text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT AI Assistant</h1>
+              <h1 className="font-semibold text-[#1E293B] text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Chatbot</h1>
               <div className="flex items-center gap-1.5 text-xs text-[#94A3B8]">
                 <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
-                Powered by Gemini AI · Campus Knowledge Enabled
+                Campus Knowledge Enabled
               </div>
             </div>
           </div>
@@ -288,6 +288,9 @@ export default function AIAssistant() {
             <Send className="w-4 h-4" />
           </motion.button>
         </div>
+        <p className="text-[11px] text-center text-[#94A3B8] mt-3" style={{ fontFamily: 'Inter, sans-serif' }}>
+          ⚠️ Chatbot responses may not always be accurate. Please cross-reference critical academic or administrative details with official sources.
+        </p>
       </div>
     </div>
   );

src/pages/BusRoutes/BusRoutes.tsx

@@ -0,0 +1,132 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Search, Loader2, ChevronRight } from 'lucide-react';
+import BusCard from '@/components/BusCard/BusCard';
+import BusRouteMap from '@/components/BusRouteMap/BusRouteMap';
+import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
+import type { BusRoute } from '@/types';
+import { getBackendUrl } from '@/lib/utils';
+import { Link } from 'react-router-dom';
+
+export default function BusRoutes() {
+  const [busSearch, setBusSearch] = useState('');
+  const [busRoutes, setBusRoutes] = useState<BusRoute[]>([]);
+  const [loadingBus, setLoadingBus] = useState(true);
+  const [selectedBusRoute, setSelectedBusRoute] = useState<BusRoute | null>(null);
+
+  useEffect(() => {
+    setLoadingBus(true);
+    fetch(getBackendUrl('/api/bus-routes'))
+      .then((res) => {
+        if (!res.ok) throw new Error('Backend offline');
+        return res.json();
+      })
+      .then((data) => {
+        if (data && data.length > 0) {
+          setBusRoutes(data);
+          setSelectedBusRoute(data[0]);
+        } else {
+          throw new Error('Empty data');
+        }
+        setLoadingBus(false);
+      })
+      .catch(() => {
+        fetch('/bus_routes.json')
+          .then((res) => res.json())
+          .then((data) => {
+            setBusRoutes(data);
+            setSelectedBusRoute(data[0]);
+          })
+          .catch((err) => console.error('Fallback fetch error:', err))
+          .finally(() => {
+            setLoadingBus(false);
+          });
+      });
+  }, []);
+
+  const filteredRoutes = busRoutes.filter((r) =>
+    r.name.toLowerCase().includes(busSearch.toLowerCase()) ||
+    r.from.toLowerCase().includes(busSearch.toLowerCase()) ||
+    r.number.toLowerCase().includes(busSearch.toLowerCase())
+  );
+
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
+      <div className="relative z-10">
+        {/* Header */}
+        <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-[#F97316]">Home</Link>
+              <ChevronRight className="w-3 h-3" />
+              <span className="text-[#F97316]">Bus Routes</span>
+            </div>
+            <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
+              RIT{' '}
+              <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                Bus Routes
+              </span>
+            </h1>
+            <p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
+              View all campus bus routes, timings, and pickup locations at a glance.
+            </p>
+          </div>
+        </div>
+
+        <div className="container-custom py-8">
+          <div className="relative mb-6">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-[#94A3B8]" />
+            <input
+              type="text"
+              placeholder="Search bus routes..."
+              value={busSearch}
+              onChange={(e) => setBusSearch(e.target.value)}
+              className="w-full pl-11 pr-4 py-3 rounded-xl border border-[#E5E7EB] bg-white text-sm text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#F97316] transition-colors"
+              style={{ fontFamily: 'Inter, sans-serif' }}
+            />
+          </div>
+
+          {loadingBus ? (
+            <div className="flex flex-col items-center justify-center py-16 gap-3">
+              <Loader2 className="w-8 h-8 text-[#F97316] animate-spin" />
+              <p className="text-sm text-[#94A3B8]" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                Loading live bus routes from RIT Transport...
+              </p>
+            </div>
+          ) : filteredRoutes.length === 0 ? (
+            <div className="text-center py-16 text-[#94A3B8]">
+              <p className="text-sm font-medium" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                No bus routes found matching "{busSearch}"
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+              {/* Routes List */}
+              <div className="lg:col-span-5 max-h-[650px] overflow-y-auto pr-2 space-y-4 scrollbar-thin">
+                <StaggerContainer>
+                  {filteredRoutes.map((route) => (
+                    <StaggerItem key={route.id} className="mb-4">
+                      <BusCard 
+                        route={route} 
+                        isSelected={selectedBusRoute?.number === route.number}
+                        onSelect={() => setSelectedBusRoute(route)}
+                      />
+                    </StaggerItem>
+                  ))}
+                </StaggerContainer>
+              </div>
+
+              {/* Interactive Map */}
+              <div className="lg:col-span-7 h-[450px] lg:h-[650px] sticky top-24">
+                <BusRouteMap 
+                  selectedRoute={selectedBusRoute} 
+                  allRoutes={filteredRoutes} 
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Campus/Campus.tsx

@@ -1,37 +1,13 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
-  ChevronRight,
+  ChevronRight, MapPin, ZoomIn, ZoomOut, Maximize2, Minimize2,
-  MapPin,
+  Download, Compass, Layers, Building2, CheckCircle2, Sparkles, X, Target
-  ZoomIn,
-  ZoomOut,
-  Maximize2,
-  Minimize2,
-  Download,
-  Compass,
-  Layers,
-  Building2,
-  CheckCircle2,
-  Sparkles,
-  X,
-  Target,
-  Search,
-  Users,
-  BookOpen,
-  Filter,
-  ArrowUpDown,
-  Loader2,
 } from 'lucide-react';
 import SectionTitle from '@/components/SectionTitle/SectionTitle';
-import BusCard from '@/components/BusCard/BusCard';
+import { CAMPUS_LOCATIONS } from '@/constants';
-import BusRouteMap from '@/components/BusRouteMap/BusRouteMap';
-import FacultyCard from '@/components/FacultyCard/FacultyCard';
-import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
-import { FACULTY_DATA, CAMPUS_LOCATIONS, DEPARTMENTS } from '@/constants';
 import * as LucideIcons from 'lucide-react';
-import { useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import type { BusRoute } from '@/types';
-import { getBackendUrl } from '@/lib/utils';
 
 interface LocationSpot {
   name: string;
@@ -87,23 +63,7 @@ const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
   sports: ['Playground'],
 };
 
-type Tab = 'map' | 'bus' | 'faculty';
-
 export default function Campus() {
-  const location = useLocation();
-  const queryTab = new URLSearchParams(location.search).get('tab') as Tab;
-  const [activeTab, setActiveTab] = useState<Tab>(
-    queryTab === 'map' || queryTab === 'bus' || queryTab === 'faculty' ? queryTab : 'map'
-  );
-  const [searchFaculty, setSearchFaculty] = useState('');
-  const [selectedDept, setSelectedDept] = useState('All Departments');
-  const [sortBy, setSortBy] = useState('Name A-Z');
-  const [busSearch, setBusSearch] = useState('');
-  const [busRoutes, setBusRoutes] = useState<BusRoute[]>([]);
-  const [loadingBus, setLoadingBus] = useState(true);
-  const [selectedBusRoute, setSelectedBusRoute] = useState<BusRoute | null>(null);
-  const [hasFetchedBus, setHasFetchedBus] = useState(false);
-
   // Interactive Map State
   const [zoomLevel, setZoomLevel] = useState(1);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -132,12 +92,10 @@ export default function Campus() {
     } else {
       setActiveCategory(catId);
       setSelectedFacility(null);
-      // Auto focus zoom slightly for visual feedback
       setZoomLevel(1.1);
     }
   };
 
-  // Determine active highlighted spots on the map
   const highlightedSpotNames = new Set<string>();
   if (selectedFacility) {
     highlightedSpotNames.add(selectedFacility.name);
@@ -171,98 +129,14 @@ export default function Campus() {
     return true;
   });
 
-  // Sync tab state when URL query parameter changes
-  useEffect(() => {
-    const qTab = new URLSearchParams(location.search).get('tab') as Tab;
-    if (qTab === 'map' || qTab === 'bus' || qTab === 'faculty') {
-      setActiveTab(qTab);
-    }
-  }, [location.search]);
-
-  useEffect(() => {
-    if (activeTab === 'bus' && !hasFetchedBus) {
-      setLoadingBus(true);
-      fetch(getBackendUrl('/api/bus-routes'))
-        .then((res) => {
-          if (!res.ok) throw new Error('Backend offline');
-          return res.json();
-        })
-        .then((data) => {
-          if (data && data.length > 0) {
-            setBusRoutes(data);
-            setSelectedBusRoute(prev => prev || data[0]);
-          } else {
-            throw new Error('Empty data');
-          }
-          setLoadingBus(false);
-          setHasFetchedBus(true);
-        })
-        .catch(() => {
-          fetch('/bus_routes.json')
-            .then((res) => res.json())
-            .then((data) => {
-              setBusRoutes(data);
-              setSelectedBusRoute(prev => prev || data[0]);
-            })
-            .catch((err) => console.error('Fallback fetch error:', err))
-            .finally(() => {
-              setLoadingBus(false);
-              setHasFetchedBus(true);
-            });
-        });
-    }
-  }, [activeTab, hasFetchedBus]);
-
-  const filteredAndSortedFaculty = useMemo(() => {
-    const filtered = FACULTY_DATA.filter((f) => {
-      const searchLower = searchFaculty.trim().toLowerCase();
-      const matchSearch = 
-        f.name.toLowerCase().includes(searchLower) ||
-        f.department.toLowerCase().includes(searchLower) ||
-        f.designation.toLowerCase().includes(searchLower) ||
-        (f.specialization && f.specialization.toLowerCase().includes(searchLower));
-      
-      const matchDept = selectedDept === 'All Departments' || f.department === selectedDept;
-      return matchSearch && matchDept;
-    });
-
-    return filtered.sort((a, b) => {
-      if (sortBy === 'Name A-Z') return a.name.localeCompare(b.name);
-      if (sortBy === 'Department') return a.department.localeCompare(b.department);
-      if (sortBy === 'Designation') return a.designation.localeCompare(b.designation);
-      return 0;
-    });
-  }, [searchFaculty, selectedDept, sortBy]);
-
-  const filteredRoutes = busRoutes.filter((r) =>
-    r.name.toLowerCase().includes(busSearch.toLowerCase()) ||
-    r.from.toLowerCase().includes(busSearch.toLowerCase()) ||
-    r.number.toLowerCase().includes(busSearch.toLowerCase())
-  );
-
-  const TABS: { id: Tab; label: string; icon: string }[] = [
-    { id: 'map', label: 'Campus Map', icon: 'Map' },
-    { id: 'bus', label: 'Bus Routes', icon: 'Bus' },
-    { id: 'faculty', label: 'Faculty Directory', icon: 'Users' },
-  ];
-
   return (
-    <div className="min-h-screen relative overflow-hidden" style={{ backgroundColor: activeTab === 'faculty' ? '#F8FAFC' : '#FAFAFA' }}>
+    <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
-      {/* Background decorations for Faculty tab */}
-      {activeTab === 'faculty' && (
-        <div className="absolute inset-0 pointer-events-none overflow-hidden">
-          <div className="absolute top-0 left-0 w-full h-96 bg-gradient-to-b from-white/80 to-transparent" />
-          <div className="absolute top-20 -left-64 w-[500px] h-[500px] bg-purple-200/40 rounded-full blur-3xl opacity-50" />
-          <div className="absolute top-40 -right-64 w-[600px] h-[600px] bg-orange-200/40 rounded-full blur-3xl opacity-40" />
-          <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(rgba(148, 163, 184, 0.1) 2px, transparent 2px)', backgroundSize: '32px 32px' }} />
-        </div>
-      )}
       <div className="relative z-10">
         {/* Header */}
         <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">
-            <span>Home</span>
+              <Link to="/" className="hover:text-[#F97316]">Home</Link>
               <ChevronRight className="w-3 h-3" />
               <span className="text-[#F97316]">Campus Map</span>
             </div>
@@ -272,47 +146,14 @@ export default function Campus() {
                 Campus Map
               </span>
             </h1>
-          <p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
+            <p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
               Navigate campus layout, click location categories or blocks to spot exact places on the blueprint.
             </p>
           </div>
         </div>
 
         <div className="container-custom py-8">
-        {/* Tabs */}
-        <div className="flex gap-2 bg-white rounded-2xl p-2 border border-[#E5E7EB] mb-8 w-fit" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-          {TABS.map((tab) => {
-            const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[tab.icon];
-            return (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className="relative flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium transition-all"
-                style={{
-                  fontFamily: 'Poppins, sans-serif',
-                  color: activeTab === tab.id ? 'white' : '#475569',
-                }}
-              >
-                {activeTab === tab.id && (
-                  <motion.div
-                    layoutId="campus-tab"
-                    className="absolute inset-0 rounded-xl"
-                    style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
-                    transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
-                  />
-                )}
-                <span className="relative z-10 flex items-center gap-2">
-                  {Icon && <Icon className="w-4 h-4" />}
-                  {tab.label}
-                </span>
-              </button>
-            );
-          })}
-        </div>
-
-        {activeTab === 'map' && (
           <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
-          
             {/* Map Viewer Header Bar */}
             <div className="bg-[#0F172A] rounded-t-3xl p-4 md:p-6 text-white border-b border-slate-800 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
               <div>
@@ -335,128 +176,54 @@ export default function Campus() {
 
               {/* Toolbar Controls */}
               <div className="flex items-center flex-wrap gap-2">
-              {/* Zoom Controls */}
                 <div className="flex items-center bg-slate-800/80 rounded-xl p-1 border border-slate-700">
-                <button
+                  <button onClick={handleZoomOut} title="Zoom Out" className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer">
-                  onClick={handleZoomOut}
-                  title="Zoom Out"
-                  className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer"
-                >
                     <ZoomOut className="w-4 h-4" />
                   </button>
-                <button
+                  <button onClick={handleResetZoom} title="Reset Zoom" className="px-2 text-xs font-semibold text-orange-400 hover:text-orange-300 transition-colors cursor-pointer">
-                  onClick={handleResetZoom}
-                  title="Reset Zoom"
-                  className="px-2 text-xs font-semibold text-orange-400 hover:text-orange-300 transition-colors cursor-pointer"
-                >
                     {Math.round(zoomLevel * 100)}%
                   </button>
-                <button
+                  <button onClick={handleZoomIn} title="Zoom In" className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer">
-                  onClick={handleZoomIn}
-                  title="Zoom In"
-                  className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer"
-                >
                     <ZoomIn className="w-4 h-4" />
                   </button>
                 </div>
 
-              {/* Fullscreen Button */}
+                <button onClick={() => setIsFullscreen(true)} className="p-2 bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 hover:text-white rounded-xl border border-slate-700 transition-colors cursor-pointer" title="Expand to Fullscreen">
-              <button
-                onClick={() => setIsFullscreen(true)}
-                className="p-2 bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 hover:text-white rounded-xl border border-slate-700 transition-colors cursor-pointer"
-                title="Expand to Fullscreen"
-              >
                   <Maximize2 className="w-4 h-4" />
                 </button>
 
-              {/* Download Button */}
+                <button onClick={handleDownload} className="flex items-center gap-1.5 px-3 py-2 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white text-xs font-semibold rounded-xl shadow-lg shadow-orange-500/20 transition-all cursor-pointer" title="Download Blueprint Image">
-              <button
-                onClick={handleDownload}
-                className="flex items-center gap-1.5 px-3 py-2 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white text-xs font-semibold rounded-xl shadow-lg shadow-orange-500/20 transition-all cursor-pointer"
-                title="Download Blueprint Image"
-              >
                   <Download className="w-3.5 h-3.5" />
                   Download
                 </button>
               </div>
             </div>
 
-          {/* Blueprint Main Canvas Container with Spotting Markers */}
+            {/* Blueprint Main Canvas Container */}
             <div className="bg-[#0B1120] rounded-b-3xl border border-slate-800 overflow-hidden shadow-xl mb-8 relative">
               <div
                 className="w-full flex items-center justify-center p-2 sm:p-4 md:p-6 overflow-auto relative cursor-grab active:cursor-grabbing"
                 style={{
-                backgroundImage:
+                  backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)',
-                  'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)',
                   backgroundSize: '24px 24px',
                 }}
               >
-              <motion.div
+                <motion.div animate={{ scale: zoomLevel }} transition={{ type: 'spring', stiffness: 260, damping: 25 }} className="relative w-full flex items-center justify-center transition-transform duration-200">
-                animate={{ scale: zoomLevel }}
-                transition={{ type: 'spring', stiffness: 260, damping: 25 }}
-                className="relative w-full flex items-center justify-center transition-transform duration-200"
-              >
-                {/* Main Campus Map Image Container */}
                   <div className="relative w-full rounded-2xl overflow-hidden border border-slate-700/60 shadow-2xl bg-slate-950">
-                  <img
+                    <img src={currentMapSrc} alt="Rajalakshmi Institute of Technology Campus Blueprint" className="w-full h-auto block object-cover" style={{ boxShadow: '0 20px 40px -10px rgba(0, 0, 0, 0.7)' }} />
-                    src={currentMapSrc}
-                    alt="Rajalakshmi Institute of Technology Campus Blueprint"
-                    className="w-full h-auto block object-cover"
-                    style={{
-                      boxShadow: '0 20px 40px -10px rgba(0, 0, 0, 0.7)',
-                    }}
-                  />
 
-                  {/* Interactive Spot Markers overlayed on map image */}
                     {LOCATION_SPOTS.map((spot) => {
                       const isHighlighted = highlightedSpotNames.has(spot.name);
                       const isSelected = selectedFacility?.name === spot.name;
 
                       return (
-                      <div
+                        <div key={spot.name} style={{ left: `${spot.x}%`, top: `${spot.y}%` }} className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer" onClick={() => setSelectedFacility(spot)}>
-                        key={spot.name}
-                        style={{
-                          left: `${spot.x}%`,
-                          top: `${spot.y}%`,
-                        }}
-                        className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer"
-                        onClick={() => setSelectedFacility(spot)}
-                      >
-                        {/* Glowing Pulsing Ring if Highlighted */}
                           {isHighlighted && (
-                          <motion.span
+                            <motion.span initial={{ scale: 0.6, opacity: 0.8 }} animate={{ scale: [1, 2.2, 1], opacity: [0.8, 0, 0.8] }} transition={{ repeat: Infinity, duration: 1.8, ease: 'easeInOut' }} className="absolute inset-0 -m-3 rounded-full bg-orange-500/50 blur-xs pointer-events-none" />
-                            initial={{ scale: 0.6, opacity: 0.8 }}
-                            animate={{ scale: [1, 2.2, 1], opacity: [0.8, 0, 0.8] }}
-                            transition={{ repeat: Infinity, duration: 1.8, ease: 'easeInOut' }}
-                            className="absolute inset-0 -m-3 rounded-full bg-orange-500/50 blur-xs pointer-events-none"
-                          />
                           )}
-
+                          <motion.div whileHover={{ scale: 1.3 }} animate={isHighlighted ? { scale: [1, 1.25, 1] } : { scale: 1 }} transition={isHighlighted ? { repeat: Infinity, duration: 2 } : {}} className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-gradient-to-r from-orange-500 to-amber-500 border-white ring-4 ring-orange-500/40 text-white z-30' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white opacity-75 hover:opacity-100'}`}>
-                        {/* Spot Pin Button */}
-                        <motion.div
-                          whileHover={{ scale: 1.3 }}
-                          animate={isHighlighted ? { scale: [1, 1.25, 1] } : { scale: 1 }}
-                          transition={isHighlighted ? { repeat: Infinity, duration: 2 } : {}}
-                          className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${
-                            isSelected
-                              ? 'bg-gradient-to-r from-orange-500 to-amber-500 border-white ring-4 ring-orange-500/40 text-white z-30'
-                              : isHighlighted
-                              ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20'
-                              : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-500 hover:text-white opacity-75 hover:opacity-100'
-                          }`}
-                        >
                             <MapPin className="w-4 h-4" />
-
+                            <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2.5 py-1 rounded-xl text-[11px] font-bold whitespace-nowrap shadow-xl border pointer-events-none transition-all ${isHighlighted || isSelected ? 'bg-slate-900 text-orange-400 border-orange-500/40 opacity-100 scale-100' : 'bg-slate-900/90 text-white border-slate-700 opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100'}`}>{spot.name}</div>
-                          {/* Hover / Highlight Tooltip Label */}
-                          <div
-                            className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2.5 py-1 rounded-xl text-[11px] font-bold whitespace-nowrap shadow-xl border pointer-events-none transition-all ${
-                              isHighlighted || isSelected
-                                ? 'bg-slate-900 text-orange-400 border-orange-500/40 opacity-100 scale-100'
-                                : 'bg-slate-900/90 text-white border-slate-700 opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100'
-                            }`}
-                          >
-                            {spot.name}
-                          </div>
                           </motion.div>
                         </div>
                       );
@@ -465,23 +232,19 @@ export default function Campus() {
                 </motion.div>
               </div>
 
-            {/* Active Spotting Info Banner Overlay at Bottom */}
+              {/* Active Spotting Info Banner Overlay */}
               <div className="absolute bottom-4 left-4 right-16 flex items-center justify-between pointer-events-none">
                 {activeCategory ? (
                   <div className="bg-orange-500/90 backdrop-blur-md px-4 py-2 rounded-2xl text-white text-xs font-semibold flex items-center gap-2 shadow-xl pointer-events-auto">
                     <Target className="w-4 h-4 animate-pulse text-white" />
                     <span>Spotting Category: <strong>{CAMPUS_LOCATIONS.find((c) => c.id === activeCategory)?.name}</strong> ({highlightedSpotNames.size} Locations)</span>
-                  <button onClick={() => setActiveCategory(null)} className="ml-2 hover:opacity-75 cursor-pointer">
+                    <button onClick={() => setActiveCategory(null)} className="ml-2 hover:opacity-75 cursor-pointer"><X className="w-3.5 h-3.5" /></button>
-                    <X className="w-3.5 h-3.5" />
-                  </button>
                   </div>
                 ) : selectedFacility ? (
                   <div className="bg-slate-900/90 backdrop-blur-md px-4 py-2 rounded-2xl text-white text-xs font-semibold flex items-center gap-2 shadow-xl pointer-events-auto border border-orange-500/40">
                     <MapPin className="w-4 h-4 text-orange-400" />
                     <span>Spotted: <strong>{selectedFacility.name}</strong> ({selectedFacility.area})</span>
-                  <button onClick={() => setSelectedFacility(null)} className="ml-2 hover:opacity-75 cursor-pointer">
+                    <button onClick={() => setSelectedFacility(null)} className="ml-2 hover:opacity-75 cursor-pointer"><X className="w-3.5 h-3.5" /></button>
-                    <X className="w-3.5 h-3.5" />
-                  </button>
                   </div>
                 ) : (
                   <div className="bg-slate-900/90 backdrop-blur-md px-3.5 py-2 rounded-2xl border border-slate-700/60 text-slate-300 text-xs flex items-center gap-2 shadow-xl">
@@ -495,16 +258,9 @@ export default function Campus() {
             {/* Quick Location Categories Bar */}
             <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
               <div className="flex items-center justify-between mb-5">
-              <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
+                <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Quick Location Categories</h3>
-                Quick Location Categories
-              </h3>
                 {activeCategory && (
-                <button
+                  <button onClick={() => setActiveCategory(null)} className="text-xs font-semibold text-orange-500 hover:text-orange-600 flex items-center gap-1 cursor-pointer"><X className="w-3.5 h-3.5" /> Clear Spot Filter</button>
-                  onClick={() => setActiveCategory(null)}
-                  className="text-xs font-semibold text-orange-500 hover:text-orange-600 flex items-center gap-1 cursor-pointer"
-                >
-                  <X className="w-3.5 h-3.5" /> Clear Spot Filter
-                </button>
                 )}
               </div>
               <div className="grid grid-cols-3 sm:grid-cols-7 gap-4">
@@ -512,34 +268,11 @@ export default function Campus() {
                   const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<any>>)[loc.icon];
                   const isCatActive = activeCategory === loc.id;
                   return (
-                  <motion.button
+                    <motion.button key={loc.id} whileHover={{ y: -3 }} whileTap={{ scale: 0.95 }} onClick={() => handleCategoryClick(loc.id)} className={`flex flex-col items-center gap-2.5 p-3 rounded-2xl transition-all border cursor-pointer group ${isCatActive ? 'border-orange-500 bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/30' : 'border-transparent hover:border-[#FED7AA] hover:bg-orange-50/50'}`}>
-                    key={loc.id}
+                      <div className={`w-12 h-12 rounded-full flex items-center justify-center border transition-colors ${isCatActive ? 'bg-white text-orange-500 border-white' : 'bg-[#F8FAFC] group-hover:bg-orange-100 text-[#F97316] border-[#E5E7EB] group-hover:border-orange-300'}`}>
-                    whileHover={{ y: -3 }}
-                    whileTap={{ scale: 0.95 }}
-                    onClick={() => handleCategoryClick(loc.id)}
-                    className={`flex flex-col items-center gap-2.5 p-3 rounded-2xl transition-all border cursor-pointer group ${
-                      isCatActive
-                        ? 'border-orange-500 bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/30'
-                        : 'border-transparent hover:border-[#FED7AA] hover:bg-orange-50/50'
-                    }`}
-                  >
-                    <div
-                      className={`w-12 h-12 rounded-full flex items-center justify-center border transition-colors ${
-                        isCatActive
-                          ? 'bg-white text-orange-500 border-white'
-                          : 'bg-[#F8FAFC] group-hover:bg-orange-100 text-[#F97316] border-[#E5E7EB] group-hover:border-orange-300'
-                      }`}
-                    >
                         {Icon && <Icon className="w-5 h-5" />}
                       </div>
-                    <span
+                      <span className={`text-[11px] font-semibold text-center leading-tight ${isCatActive ? 'text-white' : 'text-[#475569] group-hover:text-[#F97316]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{loc.name}</span>
-                      className={`text-[11px] font-semibold text-center leading-tight ${
-                        isCatActive ? 'text-white' : 'text-[#475569] group-hover:text-[#F97316]'
-                      }`}
-                      style={{ fontFamily: 'Inter, sans-serif' }}
-                    >
-                      {loc.name}
-                    </span>
                     </motion.button>
                   );
                 })}
@@ -550,107 +283,44 @@ export default function Campus() {
             <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
               <div className="flex items-center gap-2 mb-5">
                 <Layers className="w-5 h-5 text-[#F97316]" />
-              <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
+                <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Blueprint Map Legend</h3>
-                Blueprint Map Legend
-              </h3>
               </div>
               <div className="flex flex-wrap gap-3">
                 {BLUEPRINT_LEGEND.map((item) => {
                   const isActive = activeLegend === item.id;
                   return (
-                  <button
+                    <button key={item.id} onClick={() => { setActiveLegend(item.id); setActiveCategory(null); setSelectedFacility(null); }} className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${isActive ? 'border-[#F97316] bg-orange-500 text-white shadow-md scale-105' : `${item.border} ${item.bg} ${item.text} hover:scale-105`}`}>
-                    key={item.id}
+                      <span className="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs border border-black/10" style={{ backgroundColor: isActive ? 'white' : item.color }} />
-                    onClick={() => {
+                      <span className="text-xs font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</span>
-                      setActiveLegend(item.id);
-                      setActiveCategory(null);
-                      setSelectedFacility(null);
-                    }}
-                    className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${
-                      isActive
-                        ? 'border-[#F97316] bg-orange-500 text-white shadow-md scale-105'
-                        : `${item.border} ${item.bg} ${item.text} hover:scale-105`
-                    }`}
-                  >
-                    <span
-                      className="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs border border-black/10"
-                      style={{ backgroundColor: isActive ? 'white' : item.color }}
-                    />
-                    <span className="text-xs font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>
-                      {item.label}
-                    </span>
                     </button>
                   );
                 })}
               </div>
             </div>
 
-          {/* Blueprint Facilities List & Quick Selector */}
+            {/* Blueprint Facilities Index */}
             <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
               <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-6">
                 <div>
                   <div className="flex items-center gap-2">
                     <Building2 className="w-5 h-5 text-[#F97316]" />
-                  <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
+                    <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Campus Blocks & Facilities Index</h3>
-                    Campus Blocks & Facilities Index
-                  </h3>
                   </div>
-                <p className="text-xs text-[#64748B] mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
+                  <p className="text-xs text-[#64748B] mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>Click any facility card below to spot its exact location on the campus map image.</p>
-                  Click any facility card below to spot its exact location on the campus map image.
-                </p>
                 </div>
-              <span className="text-xs font-semibold text-[#F97316] bg-orange-50 px-3.5 py-1.5 rounded-full border border-orange-200">
+                <span className="text-xs font-semibold text-[#F97316] bg-orange-50 px-3.5 py-1.5 rounded-full border border-orange-200">{filteredFacilities.length} Locations Mapped</span>
-                {filteredFacilities.length} Locations Mapped
-              </span>
               </div>
-
               <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                 {filteredFacilities.map((facility) => {
                   const isSelected = selectedFacility?.name === facility.name;
                   const isHighlighted = highlightedSpotNames.has(facility.name);
                   return (
-                  <motion.button
+                    <motion.button key={facility.name} whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }} onClick={() => { if (isSelected) setSelectedFacility(null); else { setSelectedFacility(facility); setActiveCategory(null); } }} className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'border-[#F97316] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40' : isHighlighted ? 'border-[#F97316] bg-orange-50/90 shadow-md' : 'border-[#E5E7EB] bg-[#F8FAFC] hover:bg-white hover:border-orange-200 hover:shadow-xs'}`}>
-                    key={facility.name}
-                    whileHover={{ scale: 1.02, y: -2 }}
-                    whileTap={{ scale: 0.98 }}
-                    onClick={() => {
-                      if (isSelected) {
-                        setSelectedFacility(null);
-                      } else {
-                        setSelectedFacility(facility);
-                        setActiveCategory(null);
-                      }
-                    }}
-                    className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${
-                      isSelected
-                        ? 'border-[#F97316] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40'
-                        : isHighlighted
-                        ? 'border-[#F97316] bg-orange-50/90 shadow-md'
-                        : 'border-[#E5E7EB] bg-[#F8FAFC] hover:bg-white hover:border-orange-200 hover:shadow-xs'
-                    }`}
-                  >
                       <div className="flex items-start justify-between gap-1 mb-1.5">
-                      <span
+                        <span className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1E293B]'}`} style={{ fontFamily: 'Poppins, sans-serif' }}>{facility.name}</span>
-                        className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1E293B]'}`}
+                        <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full shrink-0 border ${isSelected ? 'bg-white/20 border-white/30 text-white' : 'bg-white border-[#E5E7EB] text-[#475569]'}`}>{facility.area}</span>
-                        style={{ fontFamily: 'Poppins, sans-serif' }}
-                      >
-                        {facility.name}
-                      </span>
-                      <span
-                        className={`text-[10px] font-semibold px-2 py-0.5 rounded-full shrink-0 border ${
-                          isSelected
-                            ? 'bg-white/20 border-white/30 text-white'
-                            : 'bg-white border-[#E5E7EB] text-[#475569]'
-                        }`}
-                      >
-                        {facility.area}
-                      </span>
                       </div>
-                    <p
+                      <p className={`text-xs line-clamp-1 ${isSelected ? 'text-orange-100' : 'text-[#64748B]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{facility.desc}</p>
-                      className={`text-xs line-clamp-1 ${isSelected ? 'text-orange-100' : 'text-[#64748B]'}`}
-                      style={{ fontFamily: 'Inter, sans-serif' }}
-                    >
-                      {facility.desc}
-                    </p>
                     </motion.button>
                   );
                 })}
@@ -660,60 +330,25 @@ export default function Campus() {
             {/* Fullscreen Lightbox Modal */}
             <AnimatePresence>
               {isFullscreen && (
-              <motion.div
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col p-4 md:p-8">
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col p-4 md:p-8"
-              >
                   <div className="flex items-center justify-between text-white mb-4">
                     <div className="flex items-center gap-3">
                       <MapPin className="w-5 h-5 text-orange-500" />
                       <h3 className="text-lg font-bold">RIT Campus Blueprint — Fullscreen Spotter</h3>
                     </div>
-                  <div className="flex items-center gap-3">
+                    <button onClick={() => setIsFullscreen(false)} className="p-2 rounded-xl bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer"><Minimize2 className="w-5 h-5" /></button>
-                    <button
-                      onClick={() => setIsFullscreen(false)}
-                      className="p-2 rounded-xl bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer"
-                    >
-                      <Minimize2 className="w-5 h-5" />
-                    </button>
                   </div>
-                </div>
-
                   <div className="flex-1 flex items-center justify-center overflow-auto p-2 relative">
                     <div className="relative inline-block max-w-full max-h-full">
-                    <img
+                      <img src={currentMapSrc} alt="RIT Campus Blueprint Fullscreen" className="max-w-full max-h-full object-contain rounded-xl shadow-2xl block" />
-                      src={currentMapSrc}
-                      alt="RIT Campus Blueprint Fullscreen"
-                      className="max-w-full max-h-full object-contain rounded-xl shadow-2xl block"
-                    />
                       {LOCATION_SPOTS.map((spot) => {
                         const isHighlighted = highlightedSpotNames.has(spot.name);
                         const isSelected = selectedFacility?.name === spot.name;
                         return (
-                        <div
+                          <div key={`fs-${spot.name}`} style={{ left: `${spot.x}%`, top: `${spot.y}%` }} className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer" onClick={() => setSelectedFacility(spot)}>
-                          key={`fs-${spot.name}`}
+                            <div className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-orange-500 border-white text-white ring-4 ring-orange-500/40 z-30 scale-125' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white'}`}>
-                          style={{
-                            left: `${spot.x}%`,
-                            top: `${spot.y}%`,
-                          }}
-                          className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer"
-                          onClick={() => setSelectedFacility(spot)}
-                        >
-                          <div
-                            className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${
-                              isSelected
-                                ? 'bg-orange-500 border-white text-white ring-4 ring-orange-500/40 z-30 scale-125'
-                                : isHighlighted
-                                ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20'
-                                : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-500 hover:text-white'
-                            }`}
-                          >
                               <MapPin className="w-4 h-4" />
-                            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-0.5 rounded-lg text-[10px] font-bold whitespace-nowrap bg-slate-900 text-white border border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">
+                              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-0.5 rounded-lg text-[10px] font-bold whitespace-nowrap bg-slate-900 text-white border border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">{spot.name}</div>
-                              {spot.name}
-                            </div>
                             </div>
                           </div>
                         );
@@ -723,211 +358,9 @@ export default function Campus() {
                 </motion.div>
               )}
             </AnimatePresence>
-
-          {/* Quick Nav */}
-          <div className="p-6 grid grid-cols-4 sm:grid-cols-8 gap-4">
-            {CAMPUS_LOCATIONS.map((loc) => {
-              const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
-              return (
-                <motion.button
-                  key={loc.id}
-                  whileHover={{ y: -3, backgroundColor: '#FFF7ED' }}
-                  className="flex flex-col items-center gap-2 p-3 rounded-xl transition-all hover:border-[#FED7AA] border border-transparent"
-                >
-                  <div className="w-10 h-10 rounded-xl bg-[#F8FAFC] flex items-center justify-center">
-                    {Icon && <Icon className="w-5 h-5 text-[#F97316]" />}
-                  </div>
-                  <span className="text-[11px] text-[#475569] text-center leading-tight" style={{ fontFamily: 'Inter, sans-serif' }}>
-                    {loc.name}
-                  </span>
-                </motion.button>
-              );
-            })}
-          </div>
           </motion.div>
-        )}
-
-        {/* Bus Routes Tab */}
-        {activeTab === 'bus' && (
-          <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
-            <div className="relative mb-6">
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-[#94A3B8]" />
-              <input
-                type="text"
-                placeholder="Search bus routes..."
-                value={busSearch}
-                onChange={(e) => setBusSearch(e.target.value)}
-                className="w-full pl-11 pr-4 py-3 rounded-xl border border-[#E5E7EB] bg-white text-sm text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#F97316] transition-colors"
-                style={{ fontFamily: 'Inter, sans-serif' }}
-              />
-            </div>
-            
-            {loadingBus ? (
-              <div className="flex flex-col items-center justify-center py-16 gap-3">
-                <Loader2 className="w-8 h-8 text-[#F97316] animate-spin" />
-                <p className="text-sm text-[#94A3B8]" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  Loading live bus routes from RIT Transport...
-                </p>
-              </div>
-            ) : filteredRoutes.length === 0 ? (
-              <div className="text-center py-16 text-[#94A3B8]">
-                <p className="text-sm font-medium" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  No bus routes found matching "{busSearch}"
-                </p>
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
-                {/* Routes List */}
-                <div className="lg:col-span-5 max-h-[650px] overflow-y-auto pr-2 space-y-4 scrollbar-thin">
-                  <StaggerContainer>
-                    {filteredRoutes.map((route) => (
-                      <StaggerItem key={route.id} className="mb-4">
-                        <BusCard 
-                          route={route} 
-                          isSelected={selectedBusRoute?.number === route.number}
-                          onSelect={() => setSelectedBusRoute(route)}
-                        />
-                      </StaggerItem>
-                    ))}
-                  </StaggerContainer>
-                </div>
-                
-                {/* Interactive Map */}
-                <div className="lg:col-span-7 h-[450px] lg:h-[650px] sticky top-24">
-                  <BusRouteMap 
-                    selectedRoute={selectedBusRoute} 
-                    allRoutes={filteredRoutes} 
-                  />
         </div>
       </div>
-            )}
-          </motion.div>
-        )}
-
-        {/* Faculty Tab */}
-        {activeTab === 'faculty' && (
-          <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} className="space-y-8">
-            {/* Faculty Hero Section */}
-            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
-              <div className="lg:col-span-5 bg-white rounded-3xl p-8 border border-[#E8ECF4] shadow-sm flex flex-col justify-center relative overflow-hidden">
-                <div className="absolute top-0 right-0 w-32 h-32 bg-orange-50 rounded-bl-full -z-10" />
-                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF7A00] to-[#FB923C] flex items-center justify-center text-white mb-6 shadow-md">
-                  <Users className="w-7 h-7" />
-                </div>
-                <h2 className="text-3xl font-bold text-[#1E293B] mb-3" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  Faculty Directory
-                </h2>
-                <p className="text-[#64748B] text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
-                  Browse and connect with experienced faculty members. Search by name, department, or specialization.
-                </p>
-              </div>
-
-              <div className="lg:col-span-7 bg-white rounded-3xl p-6 border border-[#E8ECF4] shadow-sm">
-                <h3 className="text-sm font-semibold text-[#1E293B] mb-4 uppercase tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>Department Overview</h3>
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-                  {[
-                    { abrv: 'CSE', full: 'Computer Science & Engineering', color: 'blue' },
-                    { abrv: 'CSBS', full: 'Computer Science & Business Systems', color: 'indigo' },
-                    { abrv: 'AIML', full: 'Artificial Intelligence & Machine Learning', color: 'sky' },
-                    { abrv: 'ECE', full: 'Electronics & Communication Engineering', color: 'purple' },
-                    { abrv: 'MECH', full: 'Mechanical Engineering', color: 'orange' },
-                    { abrv: 'CIVIL', full: 'Civil Engineering', color: 'emerald' },
-                    { abrv: 'AI & DS', full: 'Artificial Intelligence & Data Science', color: 'pink' },
-                    { abrv: 'EEE', full: 'Electrical & Electronics Engineering', color: 'yellow' },
-                  ].map(d => {
-                    const count = FACULTY_DATA.filter(f => f.department === d.full).length;
-                    return (
-                      <div key={d.abrv} className={`p-4 rounded-2xl bg-${d.color}-50 border border-${d.color}-100 flex flex-col gap-1 transition-transform hover:scale-105 cursor-default`}>
-                        <div className="flex justify-between items-center">
-                          <span className={`text-xs font-bold text-${d.color}-700`} style={{ fontFamily: 'Poppins, sans-serif' }}>{d.abrv}</span>
-                          <BookOpen className={`w-3.5 h-3.5 text-${d.color}-400`} />
-                        </div>
-                        <span className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{count}</span>
     </div>
   );
-                  })}
-                </div>
-              </div>
-            </div>
-
-            {/* Search Section */}
-            <div className="bg-white rounded-3xl p-4 border border-[#E8ECF4] shadow-sm flex flex-col md:flex-row gap-4">
-              <div className="relative flex-1">
-                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#94A3B8]" />
-                <input
-                  type="text"
-                  placeholder="Search by faculty name, department, designation or specialization..."
-                  value={searchFaculty}
-                  onChange={(e) => setSearchFaculty(e.target.value)}
-                  className="w-full pl-12 pr-4 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm text-[#1E293B] placeholder-[#94A3B8] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all"
-                  style={{ fontFamily: 'Inter, sans-serif' }}
-                />
-              </div>
-              <div className="flex flex-col sm:flex-row gap-3">
-                <div className="relative">
-                  <Filter className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8] pointer-events-none" />
-                  <select
-                    value={selectedDept}
-                    onChange={(e) => setSelectedDept(e.target.value)}
-                    className="h-full pl-10 pr-10 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm font-medium text-[#475569] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all appearance-none cursor-pointer min-w-[200px]"
-                    style={{ fontFamily: 'Inter, sans-serif', backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394A3B8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 1rem top 50%', backgroundSize: '0.65rem auto' }}
-                  >
-                    {DEPARTMENTS.map((dept) => {
-                      const count = dept === 'All Departments' ? FACULTY_DATA.length : FACULTY_DATA.filter((f) => f.department === dept).length;
-                      return <option key={dept} value={dept}>{dept} ({count})</option>;
-                    })}
-                  </select>
-                </div>
-                <div className="relative">
-                  <ArrowUpDown className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8] pointer-events-none" />
-                  <select
-                    value={sortBy}
-                    onChange={(e) => setSortBy(e.target.value)}
-                    className="h-full pl-10 pr-10 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm font-medium text-[#475569] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all appearance-none cursor-pointer"
-                    style={{ fontFamily: 'Inter, sans-serif', backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394A3B8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 1rem top 50%', backgroundSize: '0.65rem auto' }}
-                  >
-                    <option value="Name A-Z">Sort: Name A-Z</option>
-                    <option value="Department">Sort: Department</option>
-                    <option value="Designation">Sort: Designation</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            {/* Grid */}
-            {filteredAndSortedFaculty.length > 0 ? (
-              <StaggerContainer key={`${searchFaculty}-${selectedDept}-${sortBy}`} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pb-20">
-                {filteredAndSortedFaculty.map((faculty) => (
-                  <StaggerItem key={faculty.id}>
-                    <FacultyCard faculty={faculty} />
-                  </StaggerItem>
-                ))}
-              </StaggerContainer>
-            ) : (
-              <div className="py-20 text-center flex flex-col items-center justify-center bg-white rounded-3xl border border-[#E8ECF4] shadow-sm">
-                <Users className="w-12 h-12 text-[#CBD5E1] mb-4" />
-                <h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>No faculty found</h3>
-                <p className="text-[#64748B] text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>Try adjusting your search or filters.</p>
-              </div>
-            )}
-
-            {/* Bottom Status */}
-            <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none">
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }} 
-                animate={{ opacity: 1, y: 0 }} 
-                className="px-6 py-3 bg-white/80 backdrop-blur-md border border-[#E8ECF4] shadow-[0_8px_30px_rgb(0,0,0,0.08)] rounded-full flex items-center gap-2"
-              >
-                <span className="text-lg">👥</span>
-                <span className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>
-                  Showing {filteredAndSortedFaculty.length} Faculty Members
-                </span>
-              </motion.div>
-            </div>
-          </motion.div>
-        )}
-      </div>
-    </div>
-  </div>
-);
 }

src/pages/Community/Community.tsx

@@ -8,7 +8,6 @@ import SectionTitle from '@/components/SectionTitle/SectionTitle';
 import { getBackendUrl } from '@/lib/utils';
 import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
 import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
-import { CONFESSIONS_DATA } from '@/constants';
 
 const TRENDING_TAGS = ['hostel', 'academics', 'clubs', 'campus', 'canteen', 'sports', 'placement', 'library', 'cat exam', 'semester', 'labs', 'exams'];
 
@@ -270,7 +269,7 @@ export default function Community() {
             RIT Community
           </h1>
           <p className="text-slate-500 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
-            Ask questions, share confessions, and connect with fellow RIT students.
+            Ask questions and connect with fellow RIT students.
           </p>
         </div>
       </div>

src/pages/Faculty/Faculty.tsx

@@ -0,0 +1,188 @@
+import { useState, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { Search, Users, Filter, ArrowUpDown, BookOpen, ChevronRight } from 'lucide-react';
+import FacultyCard from '@/components/FacultyCard/FacultyCard';
+import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
+import { FACULTY_DATA, DEPARTMENTS } from '@/constants';
+import { Link } from 'react-router-dom';
+
+export default function Faculty() {
+  const [searchFaculty, setSearchFaculty] = useState('');
+  const [selectedDept, setSelectedDept] = useState('All Departments');
+  const [sortBy, setSortBy] = useState('Name A-Z');
+
+  const filteredAndSortedFaculty = useMemo(() => {
+    const filtered = FACULTY_DATA.filter((f) => {
+      const searchLower = searchFaculty.trim().toLowerCase();
+      const matchSearch = 
+        f.name.toLowerCase().includes(searchLower) ||
+        f.department.toLowerCase().includes(searchLower) ||
+        f.designation.toLowerCase().includes(searchLower) ||
+        (f.specialization && f.specialization.toLowerCase().includes(searchLower));
+      
+      const matchDept = selectedDept === 'All Departments' || f.department === selectedDept;
+      return matchSearch && matchDept;
+    });
+
+    return filtered.sort((a, b) => {
+      if (sortBy === 'Name A-Z') return a.name.localeCompare(b.name);
+      if (sortBy === 'Department') return a.department.localeCompare(b.department);
+      if (sortBy === 'Designation') return a.designation.localeCompare(b.designation);
+      return 0;
+    });
+  }, [searchFaculty, selectedDept, sortBy]);
+
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-[#F8FAFC]">
+      {/* Background decorations */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-96 bg-gradient-to-b from-white/80 to-transparent" />
+        <div className="absolute top-20 -left-64 w-[500px] h-[500px] bg-purple-200/40 rounded-full blur-3xl opacity-50" />
+        <div className="absolute top-40 -right-64 w-[600px] h-[600px] bg-orange-200/40 rounded-full blur-3xl opacity-40" />
+        <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(rgba(148, 163, 184, 0.1) 2px, transparent 2px)', backgroundSize: '32px 32px' }} />
+      </div>
+
+      <div className="relative z-10">
+        {/* Header */}
+        <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-[#F97316]">Home</Link>
+              <ChevronRight className="w-3 h-3" />
+              <span className="text-[#F97316]">Faculty Directory</span>
+            </div>
+            <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
+              Faculty{' '}
+              <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                Directory
+              </span>
+            </h1>
+            <p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
+              Browse and connect with experienced faculty members across all departments.
+            </p>
+          </div>
+        </div>
+
+        <div className="container-custom py-8 space-y-8">
+          {/* Faculty Hero Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
+            <div className="lg:col-span-5 bg-white rounded-3xl p-8 border border-[#E8ECF4] shadow-sm flex flex-col justify-center relative overflow-hidden">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-orange-50 rounded-bl-full -z-10" />
+              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF7A00] to-[#FB923C] flex items-center justify-center text-white mb-6 shadow-md">
+                <Users className="w-7 h-7" />
+              </div>
+              <h2 className="text-3xl font-bold text-[#1E293B] mb-3" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                Faculty Directory
+              </h2>
+              <p className="text-[#64748B] text-xs leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
+                Browse and connect with experienced faculty members. Search by name, department, or specialization.
+              </p>
+            </div>
+
+            <div className="lg:col-span-7 bg-white rounded-3xl p-6 border border-[#E8ECF4] shadow-sm">
+              <h3 className="text-sm font-semibold text-[#1E293B] mb-4 uppercase tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>Department Overview</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                {[
+                  { abrv: 'CSE', full: 'Computer Science & Engineering', color: 'blue' },
+                  { abrv: 'CSBS', full: 'Computer Science & Business Systems', color: 'indigo' },
+                  { abrv: 'AIML', full: 'Artificial Intelligence & Machine Learning', color: 'sky' },
+                  { abrv: 'ECE', full: 'Electronics & Communication Engineering', color: 'purple' },
+                  { abrv: 'MECH', full: 'Mechanical Engineering', color: 'orange' },
+                  { abrv: 'CIVIL', full: 'Civil Engineering', color: 'emerald' },
+                  { abrv: 'AI & DS', full: 'Artificial Intelligence & Data Science', color: 'pink' },
+                  { abrv: 'EEE', full: 'Electrical & Electronics Engineering', color: 'yellow' },
+                ].map(d => {
+                  const count = FACULTY_DATA.filter(f => f.department === d.full).length;
+                  return (
+                    <div key={d.abrv} className={`p-4 rounded-2xl bg-${d.color}-50 border border-${d.color}-100 flex flex-col gap-1 transition-transform hover:scale-105 cursor-default`}>
+                      <div className="flex justify-between items-center">
+                        <span className={`text-xs font-bold text-${d.color}-700`} style={{ fontFamily: 'Poppins, sans-serif' }}>{d.abrv}</span>
+                        <BookOpen className={`w-3.5 h-3.5 text-${d.color}-400`} />
+                      </div>
+                      <span className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{count}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Search Section */}
+          <div className="bg-white rounded-3xl p-4 border border-[#E8ECF4] shadow-sm flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#94A3B8]" />
+              <input
+                type="text"
+                placeholder="Search by faculty name, department, designation or specialization..."
+                value={searchFaculty}
+                onChange={(e) => setSearchFaculty(e.target.value)}
+                className="w-full pl-12 pr-4 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm text-[#1E293B] placeholder-[#94A3B8] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all"
+                style={{ fontFamily: 'Inter, sans-serif' }}
+              />
+            </div>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="relative">
+                <Filter className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8] pointer-events-none" />
+                <select
+                  value={selectedDept}
+                  onChange={(e) => setSelectedDept(e.target.value)}
+                  className="h-full pl-10 pr-10 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm font-medium text-[#475569] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all appearance-none cursor-pointer min-w-[200px]"
+                  style={{ fontFamily: 'Inter, sans-serif', backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394A3B8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 1rem top 50%', backgroundSize: '0.65rem auto' }}
+                >
+                  {DEPARTMENTS.map((dept) => {
+                    const count = dept === 'All Departments' ? FACULTY_DATA.length : FACULTY_DATA.filter((f) => f.department === dept).length;
+                    return <option key={dept} value={dept}>{dept} ({count})</option>;
+                  })}
+                </select>
+              </div>
+              <div className="relative">
+                <ArrowUpDown className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8] pointer-events-none" />
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value)}
+                  className="h-full pl-10 pr-10 py-3.5 rounded-2xl bg-[#F8FAFC] border-none text-sm font-medium text-[#475569] focus:ring-2 focus:ring-[#FF7A00]/20 focus:outline-none transition-all appearance-none cursor-pointer"
+                  style={{ fontFamily: 'Inter, sans-serif', backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394A3B8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 1rem top 50%', backgroundSize: '0.65rem auto' }}
+                >
+                  <option value="Name A-Z">Sort: Name A-Z</option>
+                  <option value="Department">Sort: Department</option>
+                  <option value="Designation">Sort: Designation</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Grid */}
+          {filteredAndSortedFaculty.length > 0 ? (
+            <StaggerContainer key={`${searchFaculty}-${selectedDept}-${sortBy}`} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pb-20">
+              {filteredAndSortedFaculty.map((faculty) => (
+                <StaggerItem key={faculty.id}>
+                  <FacultyCard faculty={faculty} />
+                </StaggerItem>
+              ))}
+            </StaggerContainer>
+          ) : (
+            <div className="py-20 text-center flex flex-col items-center justify-center bg-white rounded-3xl border border-[#E8ECF4] shadow-sm">
+              <Users className="w-12 h-12 text-[#CBD5E1] mb-4" />
+              <h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>No faculty found</h3>
+              <p className="text-[#64748B] text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>Try adjusting your search or filters.</p>
+            </div>
+          )}
+
+          {/* Bottom Status */}
+          <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none">
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }} 
+              animate={{ opacity: 1, y: 0 }} 
+              className="px-6 py-3 bg-white/80 backdrop-blur-md border border-[#E8ECF4] shadow-[0_8px_30px_rgb(0,0,0,0.08)] rounded-full flex items-center gap-2"
+            >
+              <span className="text-lg">👥</span>
+              <span className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>
+                Showing {filteredAndSortedFaculty.length} Faculty Members
+              </span>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Home/Home.tsx

@@ -7,7 +7,6 @@ import {
 import SectionTitle from '@/components/SectionTitle/SectionTitle';
 import FeatureCard from '@/components/FeatureCard/FeatureCard';
 import FloatingCard from '@/components/FloatingCard/FloatingCard';
-import ChatPreview from '@/components/ChatPreview/ChatPreview';
 import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
 import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
 import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
@@ -123,7 +122,7 @@ export default function Home() {
                 style={{ fontFamily: 'Poppins, sans-serif' }}
               >
                 <Bot className="w-4 h-4" />
-                Ask AI Assistant
+                Ask Chatbot
               </motion.button>
             </Link>
           </motion.div>
@@ -178,7 +177,7 @@ export default function Home() {
                 { value: '20+', label: 'SPORTS', icon: Trophy },
                 { value: '100+', label: 'FACULTY', icon: GraduationCap },
                 { value: '18', label: 'CLUBS', icon: Award },
-                { value: '24/7', label: 'AI ASSISTANT', icon: Cpu },
+                { value: '24/7', label: 'CHATBOT', icon: Cpu },
                 { value: '5000+', label: 'STUDENTS', icon: Users },
               ].map((stat, i) => (
                 <div key={i} className="flex flex-col items-center justify-center p-4">
@@ -227,76 +226,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* ─── AI Section ───────────────────────────────────────────────────────── */}
-      <section className="section-padding bg-white relative z-20">
-        <div className="container-custom">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            {/* Left – Text */}
-            <AnimatedContainer direction="left">
-              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-5"
-                style={{ backgroundColor: '#F5F3FF', border: '1px solid #DDD6FE' }}>
-                <Sparkles className="w-4 h-4 text-[#8B5CF6]" />
-                <span className="text-xs font-semibold text-[#8B5CF6] uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  AI-Powered
-                </span>
-              </div>
-              <h2 className="text-3xl md:text-4xl font-bold mb-4" style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}>
-                Your 24/7{' '}
-                <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
-                  Campus Guide
-                </span>
-              </h2>
-              <p className="text-[#475569] leading-relaxed mb-8" style={{ fontFamily: 'Inter, sans-serif' }}>
-                Ask anything about RIT — from admission documents to canteen timings. Our AI assistant, powered by Google Gemini with campus-specific knowledge, gives you instant, accurate answers.
-              </p>
 
-              <div className="grid grid-cols-2 gap-4 mb-8">
-                {[
-                  { icon: 'Brain', label: 'Gemini AI', desc: 'State-of-the-art AI' },
-                  { icon: 'Database', label: 'RAG System', desc: 'Campus knowledge base' },
-                  { icon: 'Map', label: 'Campus Context', desc: 'RIT-specific answers' },
-                  { icon: 'Zap', label: 'Instant Answers', desc: 'No wait time' },
-                ].map((item, i) => {
-                  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string; style?: React.CSSProperties }>>)[item.icon];
-                  return (
-                    <div key={i} className="flex items-start gap-3 p-4 rounded-xl border border-[#E5E7EB] bg-[#FAFAFA]">
-                      <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-[#FFF7ED] shrink-0">
-                        {Icon && <Icon className="w-4.5 h-4.5" style={{ color: '#F97316' }} />}
-                      </div>
-                      <div>
-                        <div className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{item.label}</div>
-                        <div className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>{item.desc}</div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-
-              <Link to="/ai-assistant">
-                <motion.button
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  className="flex items-center gap-2 px-7 py-3.5 rounded-xl text-white font-semibold"
-                  style={{
-                    fontFamily: 'Poppins, sans-serif',
-                    background: 'linear-gradient(135deg, #F97316, #FB923C)',
-                    boxShadow: '0 6px 20px rgba(249,115,22,0.35)',
-                  }}
-                >
-                  <Bot className="w-4.5 h-4.5" />
-                  Try AI Assistant
-                  <ArrowRight className="w-4 h-4" />
-                </motion.button>
-              </Link>
-            </AnimatedContainer>
-
-            {/* Right – Chat Preview */}
-            <AnimatedContainer direction="right" delay={0.2}>
-              <ChatPreview />
-            </AnimatedContainer>
-          </div>
-        </div>
-      </section>
 
       {/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
       <section className="section-padding relative z-20" style={{ backgroundColor: '#FAFAFA' }}>
@@ -386,11 +316,10 @@ export default function Home() {
 
       {/* ─── Community Teaser ─────────────────────────────────────────────────── */}
       <section className="section-padding bg-white relative z-20">
-        <div className="container-custom">
+        <div className="container-custom max-w-2xl">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* Q&A teaser */}
-            <AnimatedContainer direction="left">
+          <AnimatedContainer>
-              <div className="rounded-3xl p-7 h-full border border-[#E5E7EB]"
+            <div className="rounded-3xl p-7 border border-[#E5E7EB]"
               style={{ background: 'linear-gradient(135deg, #FAFAFA, #FFF7ED)', boxShadow: '0 4px 20px -4px rgba(0,0,0,0.07)' }}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[#FFF7ED]">
@@ -420,52 +349,6 @@ export default function Home() {
               </Link>
             </div>
           </AnimatedContainer>
-
-            {/* Anonymous Confession Teaser */}
-            <AnimatedContainer direction="right" delay={0.1}>
-              <div className="rounded-3xl p-7 h-full border border-[#E5E7EB]"
-                style={{ background: 'linear-gradient(135deg, #1E293B, #334155)', boxShadow: '0 4px 20px -4px rgba(0,0,0,0.15)' }}>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ backgroundColor: 'rgba(249,115,22,0.2)' }}>
-                    <LucideIcons.Heart className="w-5 h-5 text-[#F97316]" />
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous Confessions</h3>
-                    <p className="text-xs text-slate-400">Share without revealing identity</p>
-                  </div>
-                </div>
-                <div className="space-y-3 mb-5">
-                  {[
-                    { text: "I went to the wrong department on my first day 😅", reactions: 87 },
-                    { text: "The library WiFi is faster than my home connection 😂", reactions: 134 },
-                  ].map((c, i) => (
-                    <div key={i} className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.1)' }}>
-                      <p className="text-xs text-slate-300 mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>{c.text}</p>
-                      <div className="flex items-center gap-1 text-xs text-slate-500">
-                        <LucideIcons.Heart className="w-3 h-3 text-[#F97316]" />
-                        <span>{c.reactions}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-                <div className="flex items-center gap-2 p-3 rounded-xl mb-4" style={{ backgroundColor: 'rgba(249,115,22,0.1)', border: '1px solid rgba(249,115,22,0.2)' }}>
-                  <LucideIcons.Shield className="w-4 h-4 text-[#F97316] shrink-0" />
-                  <span className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
-                    100% Anonymous. No tracking. No identity revealed.
-                  </span>
-                </div>
-                <Link to="/community">
-                  <motion.button
-                    whileHover={{ scale: 1.02 }}
-                    className="w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all"
-                    style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
-                  >
-                    Confess Anonymously
-                  </motion.button>
-                </Link>
-              </div>
-            </AnimatedContainer>
-          </div>
         </div>
       </section>
     </div>

src/pages/Profile/Profile.tsx

@@ -1,219 +0,0 @@
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-import {
-  User, Mail, Phone, GraduationCap, BookOpen,
-  Settings, LogOut, Edit3, Camera, Bell,
-  Shield, Star, Calendar, ChevronRight
-} from 'lucide-react';
-import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
-import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
-
-const MOCK_USER = {
-  name: 'Arjun Kumar',
-  rollNo: 'CB.EN.U4CSE25001',
-  department: 'Computer Science & Engineering',
-  semester: '1st Semester',
-  email: 'arjun.kumar@rit.ac.in',
-  phone: '+91 98765 43210',
-  joinedDate: 'August 2025',
-  batch: '2025-2029',
-};
-
-const ACTIVITY = [
-  { label: 'Notes Downloaded', value: '12', icon: BookOpen, color: '#F97316' },
-  { label: 'Questions Asked', value: '3', icon: Star, color: '#8B5CF6' },
-  { label: 'Events Registered', value: '2', icon: Calendar, color: '#10B981' },
-  { label: 'AI Queries', value: '48', icon: Shield, color: '#3B82F6' },
-];
-
-const MENU_ITEMS = [
-  { icon: Bell, label: 'Notifications', badge: '3' },
-  { icon: BookOpen, label: 'My Downloads', badge: null },
-  { icon: Star, label: 'Bookmarks', badge: null },
-  { icon: Settings, label: 'Settings', badge: null },
-  { icon: Shield, label: 'Privacy & Security', badge: null },
-];
-
-export default function Profile() {
-  const [isEditing, setIsEditing] = useState(false);
-
-  return (
-    <div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
-      {/* Header */}
-      <div
-        className="py-16 relative overflow-hidden"
-        style={{ background: 'linear-gradient(135deg, #1E293B 0%, #334155 100%)' }}
-      >
-        <div
-          className="absolute inset-0 opacity-5"
-          style={{
-            backgroundImage: 'radial-gradient(circle, #F97316 1px, transparent 1px)',
-            backgroundSize: '32px 32px',
-          }}
-        />
-        <div className="container-custom relative z-10">
-          <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
-            {/* Avatar */}
-            <div className="relative">
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                className="w-24 h-24 rounded-2xl flex items-center justify-center text-3xl font-bold text-white cursor-pointer"
-                style={{
-                  background: 'linear-gradient(135deg, #F97316, #FB923C)',
-                  fontFamily: 'Poppins, sans-serif',
-                  boxShadow: '0 8px 30px rgba(249,115,22,0.4)',
-                }}
-              >
-                AK
-              </motion.div>
-              <button
-                className="absolute -bottom-2 -right-2 w-8 h-8 rounded-xl flex items-center justify-center text-white"
-                style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
-                aria-label="Change photo"
-              >
-                <Camera className="w-3.5 h-3.5" />
-              </button>
-            </div>
-
-            {/* Info */}
-            <div className="flex-1">
-              <h1 className="text-2xl font-bold text-white mb-1" style={{ fontFamily: 'Playfair Display, serif' }}>
-                {MOCK_USER.name}
-              </h1>
-              <p className="text-orange-300 text-sm mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>
-                {MOCK_USER.rollNo}
-              </p>
-              <p className="text-slate-400 text-sm mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
-                {MOCK_USER.department} · {MOCK_USER.batch}
-              </p>
-              <div className="flex flex-wrap gap-2">
-                <span className="px-3 py-1 rounded-full text-xs font-semibold bg-orange-500/20 text-orange-300 border border-orange-500/30" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  {MOCK_USER.semester}
-                </span>
-                <span className="px-3 py-1 rounded-full text-xs font-semibold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  Active Student
-                </span>
-              </div>
-            </div>
-
-            {/* Edit button */}
-            <motion.button
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setIsEditing(!isEditing)}
-              className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-white text-sm font-semibold border border-white/20 hover:bg-white/10 transition-all"
-              style={{ fontFamily: 'Poppins, sans-serif' }}
-            >
-              <Edit3 className="w-4 h-4" />
-              Edit Profile
-            </motion.button>
-          </div>
-        </div>
-      </div>
-
-      <div className="container-custom py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Left */}
-          <div className="lg:col-span-2 flex flex-col gap-6">
-            {/* Activity Stats */}
-            <AnimatedContainer>
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                {ACTIVITY.map((item, i) => (
-                  <motion.div
-                    key={i}
-                    whileHover={{ y: -3 }}
-                    className="bg-white rounded-2xl border border-[#E5E7EB] p-4 text-center"
-                    style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
-                  >
-                    <div
-                      className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2"
-                      style={{ backgroundColor: `${item.color}15` }}
-                    >
-                      <item.icon className="w-5 h-5" style={{ color: item.color } as React.CSSProperties} />
-                    </div>
-                    <div className="text-xl font-bold mb-0.5" style={{ color: item.color, fontFamily: 'Poppins, sans-serif' }}>
-                      {item.value}
-                    </div>
-                    <div className="text-[10px] text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</div>
-                  </motion.div>
-                ))}
-              </div>
-            </AnimatedContainer>
-
-            {/* Personal Details */}
-            <AnimatedContainer delay={0.1}>
-              <div className="bg-white rounded-2xl border border-[#E5E7EB] p-6" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                <h3 className="text-sm font-semibold text-[#1E293B] mb-5" style={{ fontFamily: 'Poppins, sans-serif' }}>
-                  Personal Information
-                </h3>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-                  {[
-                    { icon: User, label: 'Full Name', value: MOCK_USER.name },
-                    { icon: GraduationCap, label: 'Roll Number', value: MOCK_USER.rollNo },
-                    { icon: Mail, label: 'Email', value: MOCK_USER.email },
-                    { icon: Phone, label: 'Phone', value: MOCK_USER.phone },
-                    { icon: BookOpen, label: 'Department', value: MOCK_USER.department },
-                    { icon: Calendar, label: 'Joined', value: MOCK_USER.joinedDate },
-                  ].map((item, i) => (
-                    <div key={i} className="flex items-center gap-3 p-3 rounded-xl bg-[#F8FAFC] border border-[#E5E7EB]">
-                      <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-[#FFF7ED] shrink-0">
-                        <item.icon className="w-4.5 h-4.5 text-[#F97316]" />
-                      </div>
-                      <div>
-                        <div className="text-[10px] text-[#94A3B8] uppercase tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</div>
-                        <div className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{item.value}</div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </AnimatedContainer>
-          </div>
-
-          {/* Right Sidebar */}
-          <div className="flex flex-col gap-5">
-            {/* Menu */}
-            <AnimatedContainer direction="right" delay={0.1}>
-              <div className="bg-white rounded-2xl border border-[#E5E7EB] overflow-hidden" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
-                {MENU_ITEMS.map((item, i) => (
-                  <motion.button
-                    key={i}
-                    whileHover={{ backgroundColor: '#FFF7ED', x: 2 }}
-                    className="w-full flex items-center justify-between px-5 py-3.5 border-b border-[#E5E7EB] last:border-0 transition-all text-left"
-                  >
-                    <div className="flex items-center gap-3">
-                      <item.icon className="w-4 h-4 text-[#94A3B8]" />
-                      <span className="text-sm text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {item.badge && (
-                        <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] text-white font-bold"
-                          style={{ backgroundColor: '#F97316', fontFamily: 'Poppins, sans-serif' }}>
-                          {item.badge}
-                        </span>
-                      )}
-                      <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
-                    </div>
-                  </motion.button>
-                ))}
-              </div>
-            </AnimatedContainer>
-
-            {/* Logout */}
-            <AnimatedContainer direction="right" delay={0.2}>
-              <motion.button
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-                className="w-full flex items-center justify-center gap-2 py-3 rounded-xl border-2 border-red-100 text-red-400 hover:bg-red-50 text-sm font-semibold transition-all"
-                style={{ fontFamily: 'Poppins, sans-serif' }}
-              >
-                <LogOut className="w-4 h-4" />
-                Sign Out
-              </motion.button>
-            </AnimatedContainer>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/types/index.ts

@@ -142,14 +142,6 @@ export interface Question {
   isAnswered: boolean;
 }
 
-export interface Confession {
-  id: string;
-  content: string;
-  createdAt: string;
-  reactions: number;
-  category?: string;
-}
-
 // ─── AI Chat ─────────────────────────────────────────────────────────────────
 export interface ChatMessage {
   id: string;