feat: upgrade UI design system with Orange, White & Dark Purple theme
This commit is contained in:
Amudieshwar A G
@@ -109,17 +109,17 @@ export default function AIAssistant() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-[#FAFAFA]">
|
||||
<div className="min-h-screen flex flex-col bg-[#FAF9FC]">
|
||||
{/* Header */}
|
||||
<div className="bg-white border-b border-[#E5E7EB] py-4 relative z-10 shadow-xs">
|
||||
<div className="bg-white border-b border-[#E9E5EE] py-4 relative z-10 shadow-xs">
|
||||
<div className="container-custom flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center shadow-sm" style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}>
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center shadow-md shadow-orange-500/20" style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)' }}>
|
||||
<Bot className="w-5.5 h-5.5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-bold text-[#1E293B] text-base" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Assistant</h1>
|
||||
<div className="flex items-center gap-1.5 text-xs text-[#64748B]">
|
||||
<h1 className="font-extrabold text-[#1A0B2E] text-base" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>RIT Assistant</h1>
|
||||
<div className="flex items-center gap-1.5 text-xs text-[#9E91B6]">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
Campus Knowledge Engine Online
|
||||
</div>
|
||||
@@ -187,8 +187,8 @@ export default function AIAssistant() {
|
||||
{/* Chat Container */}
|
||||
<div
|
||||
ref={chatContainerRef}
|
||||
className="flex-1 bg-white rounded-3xl border border-[#E5E7EB] p-4 sm:p-6 flex flex-col gap-4 overflow-y-auto"
|
||||
style={{ minHeight: '420px', maxHeight: '65vh', boxShadow: '0 8px 30px -6px rgba(0,0,0,0.04)' }}
|
||||
className="flex-1 bg-white rounded-2xl border border-[#E9E5EE] p-4 sm:p-6 flex flex-col gap-4 overflow-y-auto"
|
||||
style={{ minHeight: '420px', maxHeight: '65vh', boxShadow: '0 4px 20px_-4px_rgba(19,9,36,0.04)' }}
|
||||
>
|
||||
{messages.map((msg) => (
|
||||
<motion.div
|
||||
@@ -199,17 +199,17 @@ export default function AIAssistant() {
|
||||
className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}
|
||||
>
|
||||
{msg.role === 'assistant' && (
|
||||
<div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0 mt-1 shadow-xs" style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}>
|
||||
<div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0 mt-1 shadow-sm" style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)' }}>
|
||||
<Bot className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="max-w-[85%] sm:max-w-[78%] px-4 py-3 text-sm leading-relaxed"
|
||||
style={{
|
||||
background: msg.role === 'user' ? 'linear-gradient(135deg, #F97316, #EA580C)' : '#F8FAFC',
|
||||
color: msg.role === 'user' ? 'white' : '#1E293B',
|
||||
background: msg.role === 'user' ? 'linear-gradient(135deg, #FF6B00, #F97316)' : '#FFFFFF',
|
||||
color: msg.role === 'user' ? 'white' : '#1A0B2E',
|
||||
borderRadius: msg.role === 'user' ? '20px 20px 4px 20px' : '20px 20px 20px 4px',
|
||||
border: msg.role === 'assistant' ? '1px solid #E5E7EB' : 'none',
|
||||
border: msg.role === 'assistant' ? '1px solid #E9E5EE' : 'none',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: formatContent(msg.content) }}
|
||||
|
||||
@@ -50,18 +50,18 @@ export default function BusRoutes() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen relative overflow-hidden bg-slate-950 text-white">
|
||||
<div className="min-h-screen relative overflow-hidden bg-[#0A0414] text-white">
|
||||
{/* Sleek Dark Header */}
|
||||
<div className="bg-slate-900 border-b border-slate-800/80 py-4 px-4 sm:px-8 z-30 relative">
|
||||
<div className="bg-[#130924] border-b border-[#3A1968]/80 py-4 px-4 sm:px-8 z-30 relative">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 mb-1">
|
||||
<Link to="/" className="hover:text-orange-400">Home</Link>
|
||||
<div className="flex items-center gap-2 text-xs text-purple-300/80 mb-1">
|
||||
<Link to="/" className="hover:text-[#FF6B00]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-orange-400 font-semibold">Live Bus Tracking</span>
|
||||
<span className="text-[#FF6B00] font-semibold">Live Bus Tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-white tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<h1 className="text-xl sm:text-2xl font-extrabold text-white tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
RIT Live Transport Map
|
||||
</h1>
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 text-[11px] font-bold">
|
||||
@@ -74,25 +74,25 @@ export default function BusRoutes() {
|
||||
{/* Controls: Search + Toggle Drawer Button */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1 sm:w-64">
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-purple-300/60" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search route or bus no..."
|
||||
value={busSearch}
|
||||
onChange={(e) => setBusSearch(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 rounded-xl bg-slate-800 border border-slate-700 text-xs text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 transition-colors"
|
||||
className="w-full pl-9 pr-4 py-2 rounded-xl bg-[#1E0C36] border border-[#3A1968] text-xs text-white placeholder-purple-300/50 focus:outline-none focus:border-[#FF6B00] transition-colors"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||
className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold border transition-all cursor-pointer ${
|
||||
className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold border transition-all cursor-pointer ${
|
||||
isSidebarOpen
|
||||
? 'bg-orange-500 text-white border-orange-400 shadow-lg shadow-orange-500/20'
|
||||
: 'bg-slate-800 text-slate-200 border-slate-700 hover:bg-slate-700'
|
||||
? 'bg-gradient-to-r from-[#FF6B00] to-[#F97316] text-white border-orange-400 shadow-lg shadow-orange-500/20'
|
||||
: 'bg-[#1E0C36] text-purple-100 border-[#3A1968] hover:bg-[#2A104E]'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
{isSidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
|
||||
<span className="hidden sm:inline">
|
||||
|
||||
@@ -148,27 +148,27 @@ export default function Campus() {
|
||||
{/* 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>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
|
||||
<Link to="/" className="hover:text-[#FF6B00]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-[#F97316]">Campus Map</span>
|
||||
<span className="text-[#FF6B00] font-semibold">Campus Map</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Explore{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Campus Map
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E] 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">
|
||||
<div className="container-custom pt-8 pb-20 md:pb-28">
|
||||
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
||||
{/* Map Viewer Header Bar */}
|
||||
<div ref={mapRef} 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 ref={mapRef} className="bg-[#130924] rounded-t-3xl p-4 md:p-6 text-white border-b border-purple-900/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
<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">
|
||||
@@ -178,10 +178,10 @@ export default function Campus() {
|
||||
<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' }}>
|
||||
<h2 className="text-xl md:text-2xl font-extrabold tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-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">
|
||||
<p className="text-xs md:text-sm text-purple-300/80 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>
|
||||
@@ -189,23 +189,23 @@ export default function Campus() {
|
||||
|
||||
{/* Toolbar Controls */}
|
||||
<div className="flex items-center flex-wrap gap-2">
|
||||
<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">
|
||||
<div className="flex items-center bg-[#1E0C36] rounded-xl p-1 border border-[#3A1968]">
|
||||
<button onClick={handleZoomOut} title="Zoom Out" className="p-2 text-purple-200 hover:text-white hover:bg-purple-900/40 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">
|
||||
<button onClick={handleZoomIn} title="Zoom In" className="p-2 text-purple-200 hover:text-white hover:bg-purple-900/40 rounded-lg transition-colors cursor-pointer">
|
||||
<ZoomIn className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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-[#1E0C36] hover:bg-[#2A104E] text-purple-200 hover:text-white rounded-xl border border-[#3A1968] transition-colors cursor-pointer" title="Expand to Fullscreen">
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
</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-4 py-2 bg-gradient-to-r from-[#FF6B00] to-[#F97316] hover:from-[#EA580C] hover:to-[#FF6B00] text-white text-xs font-bold 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>
|
||||
@@ -269,9 +269,9 @@ export default function Campus() {
|
||||
</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="bg-white rounded-2xl border border-[#E9E5EE] p-6 md:p-8 mb-8 shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)]">
|
||||
<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>
|
||||
<h3 className="text-xl font-bold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-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>
|
||||
)}
|
||||
@@ -282,10 +282,10 @@ export default function Campus() {
|
||||
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'}`}>
|
||||
<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-[#FAF9FC] group-hover:bg-orange-100 text-[#FF6B00] border-[#E9E5EE] 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>
|
||||
<span className={`text-[11px] font-semibold text-center leading-tight ${isCatActive ? 'text-white' : 'text-[#4A3E5E] group-hover:text-[#FF6B00]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{loc.name}</span>
|
||||
</motion.button>
|
||||
);
|
||||
})}
|
||||
@@ -293,16 +293,16 @@ export default function Campus() {
|
||||
</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="bg-white rounded-2xl border border-[#E9E5EE] p-6 md:p-8 mb-8 shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)]">
|
||||
<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>
|
||||
<Layers className="w-5 h-5 text-[#FF6B00]" />
|
||||
<h3 className="text-xl font-bold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-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); scrollToMap(); }} 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`}`}>
|
||||
<button key={item.id} onClick={() => { setActiveLegend(item.id); setActiveCategory(null); setSelectedFacility(null); scrollToMap(); }} className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${isActive ? 'border-[#FF6B00] 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>
|
||||
@@ -312,28 +312,28 @@ export default function Campus() {
|
||||
</div>
|
||||
|
||||
{/* Blueprint Facilities Index */}
|
||||
<div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
|
||||
<div className="bg-white rounded-2xl border border-[#E9E5EE] p-6 md:p-8 mb-8 shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)]">
|
||||
<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>
|
||||
<Building2 className="w-5 h-5 text-[#FF6B00]" />
|
||||
<h3 className="text-xl font-bold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-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>
|
||||
<p className="text-xs text-[#9E91B6] 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>
|
||||
<span className="text-xs font-semibold text-[#FF6B00] 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); scrollToMap(); } }} 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'}`}>
|
||||
<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); scrollToMap(); } }} className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'border-[#FF6B00] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40' : isHighlighted ? 'border-[#FF6B00] bg-orange-50/90 shadow-md' : 'border-[#E9E5EE] bg-[#FAF9FC] 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>
|
||||
<span className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1A0B2E]'}`} style={{ fontFamily: 'Plus Jakarta Sans, 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-[#E9E5EE] text-[#4A3E5E]'}`}>{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>
|
||||
<p className={`text-xs line-clamp-1 ${isSelected ? 'text-orange-100' : 'text-[#9E91B6]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{facility.desc}</p>
|
||||
</motion.button>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -261,24 +261,24 @@ export default function Community() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FAFBFD' }}>
|
||||
<div className="min-h-screen bg-[#FAF9FC]">
|
||||
{/* Header */}
|
||||
<div className="bg-white border-b border-slate-100 py-12">
|
||||
<div className="bg-white border-b border-[#E9E5EE] py-12">
|
||||
<div className="container-custom">
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-2 tracking-tight" style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold mb-2 tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', color: '#1A0B2E' }}>
|
||||
RIT Community
|
||||
</h1>
|
||||
<p className="text-slate-500 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Ask questions and connect with fellow RIT students.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-custom py-10">
|
||||
<div className="container-custom pt-10 pb-20 md:pb-28">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2"> {/* Ask Question Box */}
|
||||
<div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 mb-8" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
|
||||
<h3 className="text-base font-semibold text-[#1E293B] mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3>
|
||||
<div className="bg-white border border-[#E9E5EE] rounded-2xl p-6 mb-8 shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)]">
|
||||
<h3 className="text-base font-bold text-[#1A0B2E] mb-3 tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>Ask a Question</h3>
|
||||
|
||||
{showSuccessBanner && (
|
||||
<motion.div
|
||||
|
||||
@@ -432,23 +432,23 @@ export default function DevCollab() {
|
||||
{/* 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>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
|
||||
<Link to="/" className="hover:text-[#FF6B00]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-[#F97316]">Developer Collab Hub</span>
|
||||
<span className="text-[#FF6B00] font-semibold">Developer Collab Hub</span>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-[#F97316] text-xs font-semibold mb-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-[#FF6B00] text-xs font-bold mb-3">
|
||||
<Code2 className="w-4 h-4" /> RIT Developers Environment
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Find Project{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Collaborators
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-[#475569] text-sm max-w-2xl" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E] text-sm max-w-2xl" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Post open-source projects, search for co-developers, or manage candidate applications cleanly on the website or via Telegram!
|
||||
</p>
|
||||
</div>
|
||||
@@ -457,8 +457,8 @@ export default function DevCollab() {
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => requireVerifiedStudent(() => setShowPostModal(true))}
|
||||
className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/25 shrink-0 cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
className="flex items-center gap-2.5 px-6 py-3.5 rounded-xl text-white font-bold text-sm shadow-lg shadow-orange-500/25 shrink-0 cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
{isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
|
||||
<Plus className="w-4.5 h-4.5" />
|
||||
@@ -467,15 +467,15 @@ export default function DevCollab() {
|
||||
</div>
|
||||
|
||||
{/* Dashboard Tabs Bar */}
|
||||
<div className="flex items-center gap-3 mt-8 border-b border-slate-200 overflow-x-auto pb-px">
|
||||
<div className="flex items-center gap-3 mt-8 border-b border-[#E9E5EE] overflow-x-auto pb-px">
|
||||
<button
|
||||
onClick={() => setActiveTab('explore')}
|
||||
className={`px-5 py-3 text-xs font-bold transition-all border-b-2 flex items-center gap-2 cursor-pointer ${
|
||||
activeTab === 'explore'
|
||||
? 'border-[#F97316] text-[#F97316]'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-800'
|
||||
? 'border-[#FF6B00] text-[#FF6B00]'
|
||||
: 'border-transparent text-purple-400 hover:text-[#1A0B2E]'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<Code2 className="w-4 h-4" />
|
||||
Explore Projects ({requests.length})
|
||||
|
||||
@@ -196,17 +196,17 @@ export default function Events() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
|
||||
<div className="min-h-screen bg-[#FAF9FC]">
|
||||
{/* Header */}
|
||||
<div className="bg-white border-b border-[#E5E7EB] py-10">
|
||||
<div className="bg-white border-b border-[#E9E5EE] py-10">
|
||||
<div className="container-custom">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Student{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Clubs
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E]" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Explore official RIT student clubs & societies, leadership details, and community links.
|
||||
</p>
|
||||
</div>
|
||||
@@ -217,13 +217,13 @@ export default function Events() {
|
||||
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
|
||||
<AnimatedContainer className="mb-14">
|
||||
<div
|
||||
className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-orange-400/30 flex flex-col md:flex-row items-center justify-between gap-6"
|
||||
style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
|
||||
className="rounded-2xl p-6 md:p-8 text-white relative overflow-hidden border border-[#3A1968] flex flex-col md:flex-row items-center justify-between gap-6"
|
||||
style={{ background: 'linear-gradient(135deg, #130924, #1E0C36)' }}
|
||||
>
|
||||
{/* Background Glow */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none"
|
||||
style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
|
||||
style={{ background: 'radial-gradient(circle, #FF6B00, transparent)' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-xl">
|
||||
@@ -231,10 +231,10 @@ export default function Events() {
|
||||
<Target className="w-3.5 h-3.5" />
|
||||
<span>Interactive Club Matcher</span>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Not sure which club to join?
|
||||
</h2>
|
||||
<p className="text-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-purple-200/80 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Take our 3-step AI-powered Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -44,26 +44,26 @@ export default function Faculty() {
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Header */}
|
||||
<div className="bg-white border-b border-[#E5E7EB] py-10">
|
||||
<div className="bg-white border-b border-[#E9E5EE] 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>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
|
||||
<Link to="/" className="hover:text-[#FF6B00]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-[#F97316]">Faculty Directory</span>
|
||||
<span className="text-[#FF6B00] font-semibold">Faculty Directory</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Faculty{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Directory
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E] 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">
|
||||
<div className="container-custom pt-8 pb-20 md:pb-28 space-y-8">
|
||||
{/* Under Development Banner */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
@@ -87,15 +87,15 @@ export default function Faculty() {
|
||||
</motion.div>
|
||||
{/* 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="lg:col-span-5 bg-white rounded-2xl p-8 border border-[#E9E5EE] shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] 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">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF6B00] to-[#F97316] flex items-center justify-center text-white mb-6 shadow-md shadow-orange-500/20">
|
||||
<Users className="w-7 h-7" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-[#1E293B] mb-3" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<h2 className="text-3xl font-extrabold text-[#1A0B2E] mb-3" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Faculty Directory
|
||||
</h2>
|
||||
<p className="text-[#64748B] text-xs leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E] text-xs leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Browse and connect with experienced faculty members. Search by name, department, or specialization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -2,14 +2,12 @@ import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
ArrowRight, BookOpen, Bot, GraduationCap,
|
||||
CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, MapPin, Sparkles
|
||||
CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, Sparkles
|
||||
} from 'lucide-react';
|
||||
import SectionTitle from '@/components/SectionTitle/SectionTitle';
|
||||
import FeatureCard from '@/components/FeatureCard/FeatureCard';
|
||||
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
|
||||
import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
|
||||
import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
|
||||
import * as LucideIcons from 'lucide-react';
|
||||
import { FEATURES } from '@/constants';
|
||||
|
||||
import LazyVideoHero from '@/components/LazyVideoHero/LazyVideoHero';
|
||||
|
||||
@@ -33,7 +31,7 @@ export default function Home() {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-medium tracking-wide mb-2"
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 2px 14px rgba(0,0,0,0.95)' }}
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Plus Jakarta Sans, sans-serif', textShadow: '0 2px 14px rgba(0,0,0,0.95)' }}
|
||||
>
|
||||
Welcome to
|
||||
</motion.h1>
|
||||
@@ -42,8 +40,8 @@ export default function Home() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
className="text-5xl md:text-7xl font-black leading-tight mb-6"
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
|
||||
className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight mb-6"
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Plus Jakarta Sans, sans-serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
|
||||
>
|
||||
RIT Freshers Hub
|
||||
</motion.h2>
|
||||
@@ -67,12 +65,12 @@ export default function Home() {
|
||||
>
|
||||
<a href="#built-for-freshers">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(249,115,22,0.4)' }}
|
||||
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(255,107,0,0.4)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-semibold text-sm cursor-pointer shadow-md"
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-bold text-sm cursor-pointer shadow-md"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
||||
fontFamily: 'Plus Jakarta Sans, sans-serif',
|
||||
background: 'linear-gradient(135deg, #FF6B00, #F97316)',
|
||||
}}
|
||||
>
|
||||
<BookOpen className="w-4 h-4" />
|
||||
@@ -83,12 +81,12 @@ export default function Home() {
|
||||
|
||||
<Link to="/ai-assistant">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.2)' }}
|
||||
whileHover={{ scale: 1.04, borderColor: '#FF6B00', backgroundColor: 'rgba(255,255,255,0.2)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm border-2 border-white/40 text-white bg-black/30 backdrop-blur-md transition-all cursor-pointer shadow-2xs"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm border-2 border-white/40 text-white bg-black/30 backdrop-blur-md transition-all cursor-pointer shadow-2xs"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<Bot className="w-4 h-4 text-[#F97316]" />
|
||||
<Bot className="w-4 h-4 text-[#FF6B00]" />
|
||||
Ask Assistant
|
||||
</motion.button>
|
||||
</Link>
|
||||
@@ -98,7 +96,7 @@ export default function Home() {
|
||||
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(233,30,99,0.5)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm text-white bg-gradient-to-r from-rose-500 to-pink-600 border border-white/30 backdrop-blur-md transition-all cursor-pointer shadow-lg shadow-pink-500/20"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-200" />
|
||||
Pitch your Idea - RAISE
|
||||
@@ -117,7 +115,7 @@ export default function Home() {
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="rounded-3xl border border-[#E5E7EB] p-6 md:p-8 bg-white shadow-[0_20px_50px_-15px_rgba(0,0,0,0.06)]"
|
||||
className="rounded-2xl border border-[#E9E5EE] p-6 md:p-8 bg-white shadow-[0_4px_20px_-4px_rgba(19,9,36,0.05)]"
|
||||
>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 text-center">
|
||||
{[
|
||||
@@ -129,16 +127,16 @@ export default function Home() {
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="flex flex-col items-center justify-center p-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-[#FFF7ED] flex items-center justify-center mb-2.5">
|
||||
<stat.icon className="w-5 h-5 text-[#F97316]" />
|
||||
<stat.icon className="w-5 h-5 text-[#FF6B00]" />
|
||||
</div>
|
||||
<div
|
||||
className="text-2xl md:text-3xl font-black text-[#1E293B] mb-0.5"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="text-2xl md:text-3xl font-extrabold text-[#1A0B2E] mb-0.5"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
{stat.value}
|
||||
</div>
|
||||
<div
|
||||
className="text-[11px] font-bold tracking-wider text-[#94A3B8] uppercase"
|
||||
className="text-[11px] font-bold tracking-wider text-[#9E91B6] uppercase"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
{stat.label}
|
||||
@@ -169,80 +167,6 @@ export default function Home() {
|
||||
</StaggerContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
|
||||
<section className="section-padding relative z-20 bg-white border-y border-[#E5E7EB]">
|
||||
<div className="container-custom">
|
||||
<SectionTitle
|
||||
tag="Navigate Campus"
|
||||
title="Explore"
|
||||
highlight="RIT Campus"
|
||||
subtitle="Find your way around campus — departments, labs, library, and key locations."
|
||||
/>
|
||||
|
||||
<AnimatedContainer>
|
||||
<div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden shadow-sm">
|
||||
{/* Map Teaser Header */}
|
||||
<div
|
||||
className="h-52 flex items-center justify-center relative overflow-hidden"
|
||||
style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-15"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(249,115,22,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.4) 1px, transparent 1px)',
|
||||
backgroundSize: '28px 28px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 text-center px-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#F97316]/20 border border-[#F97316]/30 flex items-center justify-center mx-auto mb-3">
|
||||
<MapPin className="w-6 h-6 text-[#F97316]" />
|
||||
</div>
|
||||
<h3 className="text-white text-lg font-bold mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Interactive Campus Map
|
||||
</h3>
|
||||
<p className="text-slate-400 text-xs mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Locate all major campus blocks, labs, library & amenities.
|
||||
</p>
|
||||
<Link to="/campus">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-5 py-2 rounded-xl text-white text-xs font-semibold shadow-sm cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
Open Full Map
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Nav Grid */}
|
||||
<div className="p-5 grid grid-cols-3 sm:grid-cols-7 gap-3 bg-[#FAFAFA]">
|
||||
{CAMPUS_LOCATIONS.map((loc) => {
|
||||
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
|
||||
return (
|
||||
<Link to="/campus" key={loc.id}>
|
||||
<motion.div
|
||||
whileHover={{ y: -3, backgroundColor: '#FFF7ED' }}
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all border border-transparent hover:border-[#FED7AA] bg-white shadow-2xs"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-xl bg-[#FFF7ED] flex items-center justify-center">
|
||||
{Icon && <Icon className="w-4.5 h-4.5 text-[#F97316]" />}
|
||||
</div>
|
||||
<span className="text-[11px] text-[#475569] text-center font-medium leading-tight" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{loc.name}
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedContainer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -125,7 +125,7 @@ export default function LeetcodeLeaderboard() {
|
||||
const topProfile = profiles.length > 0 ? profiles[0] : null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16 bg-[#FAFAFA] text-[#1E293B] px-4 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen pt-24 pb-16 bg-[#FAF9FC] text-[#1A0B2E] px-4 sm:px-6 lg:px-8">
|
||||
{/* Toast Notification */}
|
||||
<AnimatePresence>
|
||||
{toastMessage && (
|
||||
@@ -133,7 +133,7 @@ export default function LeetcodeLeaderboard() {
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="fixed top-6 right-6 z-50 px-5 py-3 rounded-xl bg-white border border-[#E5E7EB] backdrop-blur-md text-[#1E293B] font-semibold shadow-2xl flex items-center gap-2"
|
||||
className="fixed top-6 right-6 z-50 px-5 py-3 rounded-xl bg-white border border-[#E9E5EE] backdrop-blur-md text-[#1A0B2E] font-bold shadow-2xl flex items-center gap-2"
|
||||
>
|
||||
{toastMessage}
|
||||
</motion.div>
|
||||
@@ -142,20 +142,19 @@ export default function LeetcodeLeaderboard() {
|
||||
|
||||
<div className="max-w-7xl mx-auto space-y-8">
|
||||
{/* Banner Header */}
|
||||
<div className="relative overflow-hidden rounded-[24px] bg-white border border-[#E5E7EB] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
|
||||
<div className="absolute top-0 right-0 -mt-12 -mr-12 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-1/3 -mb-12 w-80 h-80 bg-teal-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="relative overflow-hidden rounded-2xl bg-white border border-[#E9E5EE] p-8 shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)]">
|
||||
<div className="absolute top-0 right-0 -mt-12 -mr-12 w-96 h-96 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs font-semibold uppercase tracking-wider mb-4">
|
||||
<Flame className="w-4 h-4 text-amber-500 animate-pulse" />
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-500/10 border border-orange-500/20 text-[#FF6B00] text-xs font-bold uppercase tracking-wider mb-4">
|
||||
<Flame className="w-4 h-4 text-[#FF6B00] animate-pulse" />
|
||||
RIT LeetCode Arena
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins">
|
||||
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span>
|
||||
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6B00] to-[#F97316]">LeetCode Leaderboard</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-slate-500 max-w-2xl text-sm sm:text-base">
|
||||
<p className="mt-2 text-[#4A3E5E] max-w-2xl text-sm sm:text-base font-medium">
|
||||
Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.
|
||||
</p>
|
||||
</div>
|
||||
@@ -163,7 +162,8 @@ export default function LeetcodeLeaderboard() {
|
||||
<div className="flex flex-wrap items-center gap-3 shrink-0">
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-[#F97316] to-[#FB923C] hover:from-[#EA580C] hover:to-[#F97316] text-white font-bold text-sm shadow-lg shadow-[#F97316]/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0 cursor-pointer"
|
||||
className="flex items-center gap-2 px-5 py-3 rounded-xl bg-gradient-to-r from-[#FF6B00] to-[#F97316] hover:from-[#EA580C] hover:to-[#FF6B00] text-white font-bold text-sm shadow-lg shadow-orange-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0 cursor-pointer"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<Plus className="w-5 h-5 stroke-[2.5]" />
|
||||
Register Handle
|
||||
@@ -171,9 +171,10 @@ export default function LeetcodeLeaderboard() {
|
||||
<button
|
||||
onClick={handleTriggerSync}
|
||||
disabled={isSyncing}
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-2xl bg-[#F8FAFC] hover:bg-[#F1F5F9] text-slate-700 border border-[#E2E8F0] font-semibold text-sm transition-all cursor-pointer"
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[#FAF9FC] hover:bg-purple-50/50 text-[#1A0B2E] border border-[#E9E5EE] font-semibold text-sm transition-all cursor-pointer"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin text-amber-500' : ''}`} />
|
||||
<RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin text-[#FF6B00]' : ''}`} />
|
||||
24h Spaced Sync
|
||||
</button>
|
||||
</div>
|
||||
@@ -369,10 +370,10 @@ export default function LeetcodeLeaderboard() {
|
||||
</div>
|
||||
|
||||
{/* Desktop Table View (Medium Screens & Up) */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full text-left text-slate-600 border-collapse">
|
||||
<div className="hidden md:block overflow-x-auto rounded-2xl border border-[#E9E5EE] shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] bg-white">
|
||||
<table className="w-full text-left text-[#4A3E5E] border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-[11px] font-bold uppercase tracking-wider text-slate-500">
|
||||
<tr className="border-b border-[#3A1968] bg-[#130924] text-[11px] font-extrabold uppercase tracking-wider text-white">
|
||||
<th className="py-4 px-6 text-center w-16">Rank</th>
|
||||
<th className="py-4 px-6">Student</th>
|
||||
<th className="py-4 px-6">Dept & Year</th>
|
||||
|
||||
@@ -1433,7 +1433,7 @@ export default function Notes() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="container-custom py-10">
|
||||
<div className="container-custom pt-10 pb-32 lg:pb-44">
|
||||
|
||||
|
||||
{selectedToolkit ? (
|
||||
|
||||
@@ -677,24 +677,24 @@ export default function Toolkit() {
|
||||
const toolkitRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
|
||||
<div className="min-h-screen bg-[#FAF9FC]">
|
||||
{/* Header */}
|
||||
{!selectedToolkit && (
|
||||
<div className="bg-white border-b border-[#E5E7EB] py-10">
|
||||
<div className="bg-white border-b border-[#E9E5EE] py-10">
|
||||
<div className="container-custom">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
|
||||
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<Link to="/" className="hover:text-[#F97316]">Home</Link>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<Link to="/" className="hover:text-[#FF6B00]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-[#F97316]">Student Toolkit</span>
|
||||
<span className="text-[#FF6B00] font-semibold">Student Toolkit</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
Student{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Toolkit
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<p className="text-[#4A3E5E]" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Access specialized development environments, IDE configurations, compiler guides, and department toolkits.
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -702,7 +702,7 @@ export default function Toolkit() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="container-custom py-10">
|
||||
<div className="container-custom pt-10 pb-32 lg:pb-44">
|
||||
{selectedToolkit ? (
|
||||
(() => {
|
||||
const TOOLKIT_MAP: Record<string, { categories: typeof CS_TOOLS_CATEGORIES; label: string }> = {
|
||||
@@ -737,8 +737,8 @@ export default function Toolkit() {
|
||||
setSelectedToolkit(null);
|
||||
}
|
||||
}}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold text-[#475569] bg-white border border-[#E5E7EB] hover:border-[#F97316] hover:text-[#F97316] transition-all cursor-pointer shadow-2xs mb-4"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold text-[#4A3E5E] bg-white border border-[#E9E5EE] hover:border-[#FF6B00] hover:text-[#FF6B00] transition-all cursor-pointer shadow-2xs mb-4"
|
||||
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
{selectedTool
|
||||
@@ -750,8 +750,8 @@ export default function Toolkit() {
|
||||
: 'Back to Toolkit'}
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
{label} <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Toolkit</span>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
|
||||
{label} <span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Toolkit</span>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-[#64748B] text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
|
||||
Reference in New Issue
Block a user