feat: update campus blueprint map layout, box fit, pin coordinates, and facility details

src/components/FeatureCard/FeatureCard.tsx

@@ -21,9 +21,9 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
       {/* Icon */}
       <div
         className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110"
-        style={{ backgroundColor: feature.bgColor }}
+        style={{ backgroundColor: feature.bgColor, color: feature.color }}
       >
-        {IconComponent && <IconComponent className="w-6 h-6" style={{ color: feature.color } as React.CSSProperties} />}
+        {IconComponent && <IconComponent className="w-6 h-6" />}
       </div>
 
       {/* Content */}

src/constants/index.ts

@@ -902,7 +902,6 @@ export const CAMPUS_LOCATIONS: CampusLocation[] = [
   { id: 'labs', name: 'Labs', icon: 'FlaskConical' },
   { id: 'hostel', name: 'Hostels', icon: 'Home' },
   { id: 'canteen', name: 'Canteen', icon: 'UtensilsCrossed' },
-  { id: 'busstop', name: 'Bus Stop', icon: 'Bus' },
   { id: 'auditorium', name: 'Auditorium', icon: 'Theater' },
   { id: 'sports', name: 'Sports Ground', icon: 'Trophy' },
 ];

src/pages/Campus/Campus.tsx

@@ -1,6 +1,27 @@
 import { useState, useMemo, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
-import { Search, ChevronRight, MapPin, Users, BookOpen, Filter, ArrowUpDown, Loader2 } from 'lucide-react';
+import {
+  ChevronRight,
+  MapPin,
+  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 FacultyCard from '@/components/FacultyCard/FacultyCard';
@@ -10,6 +31,60 @@ import * as LucideIcons from 'lucide-react';
 import { useLocation } from 'react-router-dom';
 import type { BusRoute } from '@/types';
 
+interface LocationSpot {
+  name: string;
+  x: number; // percentage
+  y: number; // percentage
+  category: string;
+  desc: string;
+  area: string;
+}
+
+const BLUEPRINT_LEGEND = [
+  { id: 'all', label: 'All Locations', color: '#F97316', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
+  { id: 'a-block', label: 'A Block', color: '#60A5FA', bg: 'bg-blue-50/80', text: 'text-blue-900', border: 'border-blue-200' },
+  { id: 'b-block', label: 'B Block', color: '#93C5FD', bg: 'bg-blue-50/60', text: 'text-blue-900', border: 'border-blue-200' },
+  { id: 'c-block', label: 'C Block', color: '#BFDBFE', bg: 'bg-blue-50/40', text: 'text-blue-900', border: 'border-blue-200' },
+  { id: 'admin', label: 'Admin / Facility', color: '#FDBA74', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-200' },
+  { id: 'hostel', label: 'Hostel / Mess', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-950', border: 'border-purple-200' },
+  { id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },
+  { id: 'amenity', label: 'Amenity', color: '#BEF264', bg: 'bg-lime-50/80', text: 'text-lime-950', border: 'border-lime-200' },
+  { id: 'parking', label: 'Parking Area', color: '#94A3B8', bg: 'bg-slate-100/80', text: 'text-slate-900', border: 'border-slate-300' },
+  { id: 'green', label: 'Green Area', color: '#4ADE80', bg: 'bg-emerald-50/80', text: 'text-emerald-950', border: 'border-emerald-200' },
+];
+
+const LOCATION_SPOTS: LocationSpot[] = [
+  { name: 'Girls Hostel', x: 8.5, y: 12.0, category: 'Hostel / Mess', desc: 'Residential Quarter for Women', area: 'Top Left' },
+  { name: 'Playground', x: 32.0, y: 24.0, category: 'Amenity', desc: 'Main Sports & Athletic Field', area: 'Top Left' },
+  { name: 'Canteen', x: 64.0, y: 14.0, category: 'Amenity', desc: 'Food Court & Refreshments', area: 'North Center' },
+  { name: 'Statue', x: 63.0, y: 25.5, category: 'Amenity', desc: 'Landmark Monument', area: 'North Center' },
+  { name: 'Boys Mess', x: 87.0, y: 9.5, category: 'Amenity', desc: 'Ground Floor Dining', area: 'Top Right' },
+  { name: 'Staff Mess', x: 87.0, y: 18.5, category: 'Amenity', desc: 'First Floor Dining', area: 'Top Right' },
+  { name: 'C Block', x: 87.0, y: 42.0, category: 'C Block', desc: 'Labs, Classrooms, Auditorium & Staff Rooms', area: 'East Block' },
+  { name: 'Steve Jobs Block', x: 8.5, y: 39.0, category: 'Admin / Facility', desc: 'Auditorium, Labs & Staff Rooms', area: 'West Wing' },
+  { name: 'Girls Mess', x: 8.5, y: 53.0, category: 'Amenity', desc: 'Dedicated Dining Hall for Women', area: 'West Wing' },
+  { name: 'EPL Lab', x: 8.5, y: 67.0, category: 'Lab / Academic', desc: 'Engineering Practices Laboratory', area: 'South West' },
+  { name: 'B Block', x: 33.0, y: 51.0, category: 'B Block', desc: 'Labs, Classrooms & Faculty Rooms', area: 'Central West' },
+  { name: 'Hut', x: 63.0, y: 41.0, category: 'Amenity', desc: 'Student Discussion & Rest Area', area: 'Central Green' },
+  { name: 'A Block', x: 70.0, y: 65.0, category: 'A Block', desc: 'Labs, Classrooms, Faculty Rooms, Principal Room & Exam Cell', area: 'Central East' },
+  { name: 'RSB Block', x: 24.0, y: 80.0, category: 'Amenity', desc: 'Library, Auditorium & Accounts Room', area: 'South West' },
+  { name: 'Side Parking', x: 6.5, y: 83.0, category: 'Parking Area', desc: 'Visitor & Staff Parking Zone', area: 'South West' },
+  { name: 'Arcade', x: 43.5, y: 72.0, category: 'Amenity', desc: 'Student Hub & Stores', area: 'South Central' },
+  { name: 'Security Booth', x: 45.8, y: 88.5, category: 'Amenity', desc: 'Main Gate Security Checkpoint', area: 'South Entrance' },
+  { name: 'Parking Area', x: 73.5, y: 85.5, category: 'Parking Area', desc: 'Two-Wheeler & Four-Wheeler Parking', area: 'South East' },
+  { name: 'Main Entrance', x: 50.5, y: 95.5, category: 'Amenity', desc: 'Primary Campus Security Gate', area: 'South Entrance' },
+];
+
+const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
+  dept: ['A Block', 'B Block', 'C Block'],
+  library: ['RSB Block'],
+  labs: ['Steve Jobs Block', 'A Block', 'B Block', 'C Block', 'EPL Lab'],
+  hostel: ['Girls Hostel'],
+  canteen: ['Canteen', 'Staff Mess', 'Girls Mess', 'Boys Mess'],
+  auditorium: ['Steve Jobs Block', 'C Block', 'RSB Block'],
+  sports: ['Playground'],
+};
+
 type Tab = 'map' | 'bus' | 'faculty';
 
 export default function Campus() {
@@ -25,6 +100,73 @@ export default function Campus() {
   const [busRoutes, setBusRoutes] = useState<BusRoute[]>([]);
   const [loadingBus, setLoadingBus] = useState(true);
 
+  // Interactive Map State
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [activeLegend, setActiveLegend] = useState<string>('all');
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [selectedFacility, setSelectedFacility] = useState<LocationSpot | null>(null);
+
+  const currentMapSrc = '/campus-map.jpg';
+
+  const handleZoomIn = () => setZoomLevel((prev) => Math.min(prev + 0.25, 2.5));
+  const handleZoomOut = () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.75));
+  const handleResetZoom = () => setZoomLevel(1);
+
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.href = currentMapSrc;
+    link.download = 'RIT_Campus_Blueprint.jpg';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleCategoryClick = (catId: string) => {
+    if (activeCategory === catId) {
+      setActiveCategory(null);
+    } 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);
+  } else if (activeCategory && CATEGORY_MAP_SPOTS[activeCategory]) {
+    CATEGORY_MAP_SPOTS[activeCategory].forEach((name) => highlightedSpotNames.add(name));
+  } else if (activeLegend !== 'all') {
+    LOCATION_SPOTS.forEach((spot) => {
+      if (activeLegend === 'a-block' && spot.category === 'A Block') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'b-block' && spot.category === 'B Block') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'c-block' && spot.category === 'C Block') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'admin' && spot.category === 'Admin / Facility') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'hostel' && spot.category === 'Hostel / Mess') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'lab' && spot.category === 'Lab / Academic') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'amenity' && spot.category === 'Amenity') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'parking' && spot.category === 'Parking Area') highlightedSpotNames.add(spot.name);
+      if (activeLegend === 'green' && spot.area.includes('Green')) highlightedSpotNames.add(spot.name);
+    });
+  }
+
+  const filteredFacilities = LOCATION_SPOTS.filter((fac) => {
+    if (activeLegend === 'all') return true;
+    if (activeLegend === 'a-block') return fac.category === 'A Block';
+    if (activeLegend === 'b-block') return fac.category === 'B Block';
+    if (activeLegend === 'c-block') return fac.category === 'C Block';
+    if (activeLegend === 'admin') return fac.category === 'Admin / Facility';
+    if (activeLegend === 'hostel') return fac.category === 'Hostel / Mess';
+    if (activeLegend === 'lab') return fac.category === 'Lab / Academic';
+    if (activeLegend === 'amenity') return fac.category === 'Amenity';
+    if (activeLegend === 'parking') return fac.category === 'Parking Area';
+    if (activeLegend === 'green') return fac.area.includes('Green');
+    return true;
+  });
+
   // Sync tab state when URL query parameter changes
   useEffect(() => {
     const qTab = new URLSearchParams(location.search).get('tab') as Tab;
@@ -103,16 +245,16 @@ export default function Campus() {
           <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
             <span>Home</span>
             <ChevronRight className="w-3 h-3" />
-            <span className="text-[#F97316]">Campus</span>
+            <span className="text-[#F97316]">Campus Map</span>
           </div>
           <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
             Explore{' '}
             <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
-              Campus
+              Campus Map
             </span>
           </h1>
           <p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
-            Navigate campus, find bus routes, and connect with faculty.
+            Navigate campus layout, click location categories or blocks to spot exact places on the blueprint.
           </p>
         </div>
       </div>
@@ -149,57 +291,419 @@ export default function Campus() {
           })}
         </div>
 
-        {/* Map Tab */}
         {activeTab === 'map' && (
         <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
-            <div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden mb-8" style={{ boxShadow: '0 4px 25px -5px rgba(0,0,0,0.1)' }}>
+          
-              <div
+          {/* Map Viewer Header Bar */}
-                className="h-96 flex items-center justify-center relative overflow-hidden"
+          <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">
-                style={{ background: 'linear-gradient(135deg, #1E293B, #334155)' }}
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-orange-500/20 text-orange-400 text-xs font-semibold border border-orange-500/30">
+                  <Sparkles className="w-3 h-3" /> Official Blueprint
+                </span>
+                <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-semibold border border-emerald-500/30">
+                  <CheckCircle2 className="w-3 h-3" /> Interactive Location Spotter
+                </span>
+              </div>
+              <h2 className="text-xl md:text-2xl font-bold tracking-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
+                Rajalakshmi Institute of Technology
+              </h2>
+              <p className="text-xs md:text-sm text-slate-400 flex items-center gap-1.5 mt-0.5">
+                <MapPin className="w-3.5 h-3.5 text-orange-400" />
+                Kuthambakkam, Chennai • Interactive Map Spotting Enabled
+              </p>
+            </div>
+
+            {/* 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
+                  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
+                  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
+                  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"
+              >
+                <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"
+              >
+                <Download className="w-3.5 h-3.5" />
+                Download
+              </button>
+            </div>
+          </div>
+
+          {/* Blueprint Main Canvas Container with Spotting Markers */}
+          <div className="bg-[#0B1120] rounded-b-3xl border border-slate-800 overflow-hidden shadow-xl mb-8 relative">
             <div
-                  className="absolute inset-0 opacity-10"
+              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: 'linear-gradient(rgba(249,115,22,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.5) 1px, transparent 1px)',
+                backgroundImage:
-                    backgroundSize: '40px 40px',
+                  'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)',
+                backgroundSize: '24px 24px',
+              }}
+            >
+              <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"
+              >
+                {/* 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
+                    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)',
                     }}
                   />
-                {/* Mock campus blocks */}
-                {[
-                  { label: 'CSE Block', x: '20%', y: '25%', w: '14%', h: '18%' },
-                  { label: 'ECE Block', x: '38%', y: '25%', w: '12%', h: '18%' },
-                  { label: 'Library', x: '58%', y: '30%', w: '16%', h: '14%' },
-                  { label: 'Canteen', x: '65%', y: '58%', w: '12%', h: '12%' },
-                  { label: 'Hostel', x: '18%', y: '58%', w: '14%', h: '20%' },
-                  { label: 'Auditorium', x: '40%', y: '55%', w: '18%', h: '14%' },
-                ].map((block, i) => (
-                  <motion.div
-                    key={i}
-                    whileHover={{ scale: 1.05 }}
-                    className="absolute flex items-center justify-center rounded-lg cursor-pointer group"
-                    style={{
-                      left: block.x,
-                      top: block.y,
-                      width: block.w,
-                      height: block.h,
-                      backgroundColor: 'rgba(249,115,22,0.15)',
-                      border: '1px solid rgba(249,115,22,0.4)',
-                    }}
-                  >
-                    <span className="text-[10px] text-orange-300 font-medium text-center leading-tight px-1" style={{ fontFamily: 'Inter, sans-serif' }}>
-                      {block.label}
-                    </span>
-                  </motion.div>
-                ))}
 
-                {/* Pin */}
+                  {/* Interactive Spot Markers overlayed on map image */}
-                <div className="relative z-10 text-center">
+                  {LOCATION_SPOTS.map((spot) => {
-                  <div className="flex items-center gap-2 text-white/40 text-sm">
+                    const isHighlighted = highlightedSpotNames.has(spot.name);
+                    const isSelected = selectedFacility?.name === spot.name;
+
+                    return (
+                      <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)}
+                      >
+                        {/* Glowing Pulsing Ring if Highlighted */}
+                        {isHighlighted && (
+                          <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"
+                          />
+                        )}
+
+                        {/* 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" />
-                    <span>RIT Campus, Kuthambakkam, Chennai</span>
+
+                          {/* 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>
+                    );
+                  })}
+                </div>
+              </motion.div>
+            </div>
+
+            {/* Active Spotting Info Banner Overlay at Bottom */}
+            <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">
+                    <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">
+                    <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">
+                  <Compass className="w-4 h-4 text-orange-400" />
+                  <span className="font-medium text-white">Click any category below to spot on map</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 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' }}>
+                Quick Location Categories
+              </h3>
+              {activeCategory && (
+                <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">
+              {CAMPUS_LOCATIONS.map((loc) => {
+                const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<any>>)[loc.icon];
+                const isCatActive = activeCategory === loc.id;
+                return (
+                  <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'
+                    }`}
+                  >
+                    <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
+                      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>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Blueprint Legend & Color Key */}
+          <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' }}>
+                Blueprint Map Legend
+              </h3>
+            </div>
+            <div className="flex flex-wrap gap-3">
+              {BLUEPRINT_LEGEND.map((item) => {
+                const isActive = activeLegend === item.id;
+                return (
+                  <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`
+                    }`}
+                  >
+                    <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 */}
+          <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' }}>
+                    Campus Blocks & Facilities Index
+                  </h3>
+                </div>
+                <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>
+              </div>
+              <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>
+            </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
+                    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
+                        className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1E293B]'}`}
+                        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
+                      className={`text-xs line-clamp-1 ${isSelected ? 'text-orange-100' : 'text-[#64748B]'}`}
+                      style={{ fontFamily: 'Inter, sans-serif' }}
+                    >
+                      {facility.desc}
+                    </p>
+                  </motion.button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Fullscreen Lightbox Modal */}
+          <AnimatePresence>
+            {isFullscreen && (
+              <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"
+              >
+                <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>
+                  </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
+                      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
+                          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)}
+                        >
+                          <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">
+                              {spot.name}
                             </div>
                           </div>
                         </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
 
           {/* Quick Nav */}
           <div className="p-6 grid grid-cols-4 sm:grid-cols-8 gap-4">
@@ -221,7 +725,6 @@ export default function Campus() {
               );
             })}
           </div>
-            </div>
         </motion.div>
         )}
 

src/pages/Home/Home.tsx

@@ -359,7 +359,7 @@ export default function Home() {
               </div>
 
               {/* Quick nav buttons */}
-              <div className="p-5 grid grid-cols-4 sm:grid-cols-8 gap-3">
+              <div className="p-5 grid grid-cols-3 sm:grid-cols-7 gap-3">
                 {CAMPUS_LOCATIONS.map((loc) => {
                   const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
                   return (