ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: upgrade UI design system with Orange, White & Dark Purple theme

Browse Source
This commit is contained in:
Amudieshwar A G
2026-08-14 13:46:41 +05:30
parent 3f277f53f4
commit fcaf16405d
19 changed files with 710 additions and 736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/resources/application.properties
View File

@@ -1,7 +1,7 @@
# ─── DATABASE CONNECTION CONFIGURATION ─── # ─── DATABASE CONNECTION CONFIGURATION ───
spring.datasource.url=jdbc:postgresql://localhost:5432/rit_freshers_hub?sslmode=disable spring.datasource.url=jdbc:postgresql://localhost:5432/rit_freshers_hub?sslmode=disable
spring.datasource.username=postgres spring.datasource.username=postgres
spring.datasource.password=${DB_PASSWORD:Devesh@54} spring.datasource.password=${DB_PASSWORD:Amudiesh22@.}
# ─── JPA / HIBERNATE SETTINGS ─── # ─── JPA / HIBERNATE SETTINGS ───
spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect

27
src/components/FacultyCard/FacultyCard.tsx
View File

@@ -39,17 +39,16 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
return ( return (
<> <>
<motion.div <motion.div
whileHover={{ y: -6, boxShadow: '0 20px 40px -10px rgba(0,0,0,0.1)' }} whileHover={{ y: -4 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="bg-white border border-[#E8ECF4] rounded-[20px] p-5 flex flex-col gap-4 relative" className="bg-white border border-[#E9E5EE] rounded-2xl p-5 flex flex-col gap-4 relative shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] hover:shadow-[0_12px_35px_-6px_rgba(19,9,36,0.08)] hover:border-[#FF6B00]/30"
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
> >
{/* Avatar + Name */} {/* Avatar + Name */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="relative"> <div className="relative">
<div <div
className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-lg shrink-0 shadow-sm" className="w-14 h-14 rounded-2xl flex items-center justify-center text-white font-bold text-lg shrink-0 shadow-sm"
style={{ background: `linear-gradient(135deg, ${from}, ${to})`, fontFamily: 'Poppins, sans-serif' }} style={{ background: `linear-gradient(135deg, ${from}, ${to})`, fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
{initials} {initials}
</div> </div>
@@ -57,10 +56,10 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-[#22C55E] border-2 border-white rounded-full z-10 shadow-sm" /> <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-[#22C55E] border-2 border-white rounded-full z-10 shadow-sm" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-[#1E293B] text-sm leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}> <h3 className="font-bold text-[#1A0B2E] text-sm leading-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
{faculty.name} {faculty.name}
</h3> </h3>
<p className="text-xs text-[#FF7A00] font-medium mt-0.5" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-xs text-[#FF6B00] font-semibold mt-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>
{faculty.designation} {faculty.designation}
</p> </p>
</div> </div>
@@ -68,27 +67,27 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
{/* Details */} {/* Details */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex items-center gap-2 text-xs text-[#475569]"> <div className="flex items-center gap-2 text-xs text-[#4A3E5E]">
<Building2 className="w-3.5 h-3.5 text-[#94A3B8] shrink-0" /> <Building2 className="w-3.5 h-3.5 text-[#9E91B6] shrink-0" />
<span style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.department}</span> <span style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.department}</span>
</div> </div>
</div> </div>
{/* Contact & Actions */} {/* Contact & Actions */}
<div className="flex items-center gap-2 pt-2 border-t border-[#E5E7EB] mt-auto"> <div className="flex items-center gap-2 pt-2 border-t border-[#E9E5EE] mt-auto">
<button <button
onClick={() => setShowEmailOptions(true)} onClick={() => setShowEmailOptions(true)}
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium text-[#475569] transition-all hover:bg-gray-50 border border-transparent hover:border-gray-200" className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-semibold text-[#4A3E5E] transition-all hover:bg-purple-50/50 border border-transparent hover:border-[#E9E5EE]"
style={{ fontFamily: 'Poppins, sans-serif' }} style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
aria-label={`Email ${faculty.name}`} aria-label={`Email ${faculty.name}`}
> >
<Mail className="w-3.5 h-3.5" /> <Mail className="w-3.5 h-3.5 text-[#FF6B00]" />
Email Email
</button> </button>
<button <button
onClick={() => setShowModal(true)} onClick={() => setShowModal(true)}
className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-medium transition-all hover:bg-[#FFF7ED]" className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-bold transition-all hover:bg-[#FFF7ED]"
style={{ color: '#F97316', fontFamily: 'Poppins, sans-serif' }} style={{ color: '#FF6B00', fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
View Profile View Profile
<ChevronRight className="w-3.5 h-3.5" /> <ChevronRight className="w-3.5 h-3.5" />

17
src/components/FeatureCard/FeatureCard.tsx
View File

@@ -13,14 +13,13 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
return ( return (
<motion.div <motion.div
whileHover={{ y: -6, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.15)' }} whileHover={{ y: -4 }}
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
className="bg-white border border-[#E5E7EB] rounded-2xl p-6 flex flex-col gap-4 group cursor-pointer" className="bg-white border border-[#E9E5EE] rounded-2xl p-6 flex flex-col gap-4 group cursor-pointer shadow-[0_4px_20px_-4px_rgba(19,9,36,0.04)] hover:shadow-[0_12px_35px_-6px_rgba(19,9,36,0.08)] hover:border-[#FF6B00]/30"
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
> >
{/* Icon */} {/* Icon */}
<div <div
className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110" className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-105"
style={{ backgroundColor: feature.bgColor, color: feature.color }} style={{ backgroundColor: feature.bgColor, color: feature.color }}
> >
{IconComponent && <IconComponent className="w-6 h-6" />} {IconComponent && <IconComponent className="w-6 h-6" />}
@@ -29,12 +28,12 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
{/* Content */} {/* Content */}
<div className="flex-1"> <div className="flex-1">
<h3 <h3
className="text-base font-semibold text-[#1E293B] mb-1.5" className="text-base font-bold text-[#1A0B2E] mb-1.5"
style={{ fontFamily: 'Poppins, sans-serif' }} style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
{feature.title} {feature.title}
</h3> </h3>
<p className="text-sm text-[#94A3B8] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-sm text-[#4A3E5E] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
{feature.description} {feature.description}
</p> </p>
</div> </div>
@@ -42,9 +41,9 @@ export default function FeatureCard({ feature }: FeatureCardProps) {
{/* Arrow */} {/* Arrow */}
<Link <Link
to={feature.path} to={feature.path}
className="flex items-center gap-1.5 text-sm font-semibold transition-all duration-200 w-fit" className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider transition-all duration-200 w-fit"
style={{ style={{
fontFamily: 'Poppins, sans-serif', fontFamily: 'Plus Jakarta Sans, sans-serif',
color: feature.color, color: feature.color,
}} }}
aria-label={`Explore ${feature.title}`} aria-label={`Explore ${feature.title}`}

330
src/components/Footer/Footer.tsx
View File

@@ -1,123 +1,239 @@
import { Link } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { GraduationCap, MapPin, Phone, Mail, ArrowRight } from 'lucide-react'; import { motion } from 'framer-motion';
import {
GraduationCap, MapPin, Phone, Mail, ArrowRight, Sparkles,
BookOpen, Bot, Map, Bus, UserCheck, Users, MessageCircle, Wrench, Code2, Trophy
} from 'lucide-react';
const quickLinks = [ const exploreLinks = [
{ label: 'Home', path: '/' }, { label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
{ label: 'Notes & PYQs', path: '/notes' }, { label: 'Student Toolkit', path: '/toolkit', icon: Wrench },
{ label: 'RIT Chatbot', path: '/ai-assistant' }, { label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot },
{ label: '3D Campus Map', path: '/campus' }, { label: 'Faculty Directory', path: '/faculty', icon: UserCheck },
{ label: 'Bus Routes', path: '/bus-routes' }, { label: 'LeetCode Arena', path: '/leetcode', icon: Trophy },
{ label: 'Faculty Directory', path: '/faculty' }, ];
{ label: 'Events', path: '/events' },
{ label: 'Community', path: '/community' }, const campusLinks = [
{ label: 'Dev Hub', path: '/collab' }, { label: 'Campus Map', path: '/campus', icon: Map },
{ label: 'Bus Routes', path: '/bus-routes', icon: Bus },
{ label: 'Student Clubs', path: '/events', icon: Users },
{ label: 'Freshers Q&A', path: '/community', icon: MessageCircle },
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2 },
]; ];
export default function Footer() { export default function Footer() {
const location = useLocation();
const isHome = location.pathname === '/';
return ( return (
<footer className="bg-[#1E293B] text-white"> <div className="w-full relative z-20">
{/* CTA Banner */} {/* ─── 1. CTA Banner (Floating Overlay Box - Only on Home Page) ────────── */}
<div style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} className="py-12"> {isHome && (
<div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6"> <div className="container-custom relative z-20 -mb-20 lg:-mb-24 px-4">
<div> <motion.div
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}> whileHover={{ y: -3 }}
Ready to explore RIT? transition={{ duration: 0.3 }}
</h3> className="relative overflow-hidden rounded-3xl p-8 lg:p-12 shadow-2xl border border-orange-400/30"
<p className="text-orange-100 mt-1" style={{ fontFamily: 'Inter, sans-serif' }}> style={{
Everything a fresher needs — all in one place. background: 'linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FB923C 100%)',
</p> }}
</div>
<Link
to="/ai-assistant"
className="flex items-center gap-2 bg-white text-[#F97316] px-6 py-3 rounded-xl font-semibold transition-all hover:shadow-lg hover:-translate-y-0.5"
style={{ fontFamily: 'Poppins, sans-serif' }}
> >
Ask Chatbot {/* Ambient Background Lighting */}
<ArrowRight className="w-4 h-4" /> <div className="absolute -right-16 -top-16 w-64 h-64 bg-white/10 rounded-full blur-3xl pointer-events-none" />
</Link> <div className="absolute -left-16 -bottom-16 w-64 h-64 bg-black/10 rounded-full blur-3xl pointer-events-none" />
</div>
</div>
{/* Main Footer */} <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
<div className="container-custom py-14"> <div className="text-center md:text-left">
<div className="grid grid-cols-1 md:grid-cols-3 gap-10"> <div className="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full bg-white/15 backdrop-blur-md text-white text-xs font-bold uppercase tracking-wider mb-3 border border-white/20">
{/* Brand */} <Sparkles className="w-3.5 h-3.5 text-amber-200" />
<div> <span>RIT Student Portal</span>
<div className="flex items-center gap-2.5 mb-4"> </div>
<div <h3
className="w-10 h-10 rounded-xl flex items-center justify-center" className="text-2xl lg:text-3xl xl:text-4xl font-extrabold text-white tracking-tight"
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} style={{ fontFamily: 'Poppins, sans-serif' }}
> >
<GraduationCap className="w-5 h-5 text-white" /> Ready to explore RIT?
</div> </h3>
<div> <p
<div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div> className="text-orange-100 text-sm lg:text-base mt-2 max-w-xl font-medium"
<div className="text-[10px] text-slate-400">Rajalakshmi Institute of Technology</div>
</div>
</div>
<p className="text-slate-400 text-sm leading-relaxed mb-5" style={{ fontFamily: 'Inter, sans-serif' }}>
Your all-in-one guide to campus life at RIT. Notes, chatbot, bus routes, 3D campus map, and developer hub — built for students.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
Quick Navigation
</h4>
<div className="grid grid-cols-2 gap-2">
{quickLinks.map((link) => (
<Link
key={link.path}
to={link.path}
className="text-slate-400 hover:text-[#F97316] text-sm transition-colors flex items-center gap-1.5 group py-1"
style={{ fontFamily: 'Inter, sans-serif' }} style={{ fontFamily: 'Inter, sans-serif' }}
> >
<span className="w-1 h-1 rounded-full bg-[#F97316] opacity-0 group-hover:opacity-100 transition-opacity" /> Everything a fresher needs — semester notes, campus map, chatbot, bus routes, and developer tools all in one place.
{link.label} </p>
</Link> </div>
))}
<Link to="/ai-assistant" className="shrink-0">
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 20px 30px -10px rgba(0,0,0,0.3)' }}
whileTap={{ scale: 0.96 }}
className="flex items-center gap-2.5 bg-white text-[#EA580C] px-7 py-3.5 rounded-2xl font-bold text-sm lg:text-base shadow-xl transition-all cursor-pointer group"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<span>Ask Chatbot</span>
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</motion.button>
</Link>
</div>
</motion.div>
</div>
)}
{/* ─── 2. Main Footer Section (Deep Royal Dark Purple) ──────────── */}
<footer className={`bg-[#130924] text-slate-300 relative z-10 pb-24 lg:pb-28 ${isHome ? 'pt-32 lg:pt-36' : 'pt-28 lg:pt-36'}`}>
<div className="container-custom">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-12 gap-12 xl:gap-14 items-start">
{/* Column 1: Brand Info (xl:col-span-4) */}
<div className="xl:col-span-4 flex flex-col gap-5">
<Link to="/" className="flex items-center gap-3.5 group w-fit">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center shadow-lg shadow-orange-500/25 group-hover:scale-105 transition-transform shrink-0">
<GraduationCap className="w-6.5 h-6.5 text-white" />
</div>
<div className="flex flex-col">
<span className="font-extrabold text-white text-xl tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
RIT Freshers Hub
</span>
<span className="text-xs font-semibold text-purple-300/80 uppercase tracking-wider mt-0.5">
Rajalakshmi Institute of Technology
</span>
</div>
</Link>
<p className="text-slate-300/80 text-sm lg:text-base leading-relaxed max-w-md" style={{ fontFamily: 'Inter, sans-serif' }}>
Your official student companion for RIT campus life. Access study resources, competitive coding ranks, project collaboration, and campus navigation.
</p>
<div className="flex items-center gap-2.5 mt-2 flex-wrap">
<span className="px-3.5 py-1.5 rounded-xl bg-[#1E0C36] border border-[#3A1968] text-xs font-semibold text-orange-400">
Official Student Portal
</span>
<span className="px-3.5 py-1.5 rounded-xl bg-emerald-500/15 border border-emerald-500/25 text-xs font-semibold text-emerald-400">
Active 24/7
</span>
</div>
</div>
{/* Column 2: Academics & Tools (xl:col-span-2) */}
<div className="xl:col-span-2">
<h4
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
Academics
</h4>
<ul className="space-y-4 lg:space-y-4.5">
{exploreLinks.map((link) => {
const Icon = link.icon;
return (
<li key={link.path}>
<Link
to={link.path}
className="text-slate-300/80 hover:text-orange-400 text-sm lg:text-base font-medium transition-colors inline-flex items-center gap-3 group py-1"
style={{ fontFamily: 'Inter, sans-serif' }}
>
<Icon className="w-4.5 h-4.5 text-purple-400/60 group-hover:text-orange-400 transition-colors shrink-0" />
<span>{link.label}</span>
</Link>
</li>
);
})}
</ul>
</div>
{/* Column 3: Campus Life (xl:col-span-3) */}
<div className="xl:col-span-3">
<h4
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
Campus Life
</h4>
<ul className="space-y-4 lg:space-y-4.5">
{campusLinks.map((link) => {
const Icon = link.icon;
return (
<li key={link.path}>
<Link
to={link.path}
className="text-slate-300/80 hover:text-orange-400 text-sm lg:text-base font-medium transition-colors inline-flex items-center gap-3 group py-1"
style={{ fontFamily: 'Inter, sans-serif' }}
>
<Icon className="w-4.5 h-4.5 text-purple-400/60 group-hover:text-orange-400 transition-colors shrink-0" />
<span>{link.label}</span>
</Link>
</li>
);
})}
</ul>
</div>
{/* Column 4: Reach Us (xl:col-span-3) */}
<div className="xl:col-span-3">
<h4
className="!text-white font-extrabold text-xs lg:text-sm uppercase tracking-widest mb-6 lg:mb-7 flex items-center gap-2.5"
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
>
<span className="w-2.5 h-2.5 rounded-full bg-orange-500 shadow-xs shadow-orange-500/50" />
Reach Us
</h4>
<ul className="space-y-5 lg:space-y-6">
<li className="flex items-start gap-4 text-slate-300 text-sm lg:text-base leading-relaxed">
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0 mt-0.5">
<MapPin className="w-4.5 h-4.5 text-orange-400" />
</div>
<div className="flex flex-col">
<span className="font-semibold text-white">Rajalakshmi Institute of Technology</span>
<span className="text-slate-400 text-xs lg:text-sm mt-1">Kuthambakkam, Chennai - 600 124</span>
</div>
</li>
<li className="flex items-center gap-4 text-slate-300 text-sm lg:text-base">
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0">
<Phone className="w-4.5 h-4.5 text-orange-400" />
</div>
<a href="tel:+914423422890" className="hover:text-orange-400 transition-colors font-medium">
+91 44 2342 2890
</a>
</li>
<li className="flex items-center gap-4 text-slate-300 text-sm lg:text-base">
<div className="w-9 h-9 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center shrink-0">
<Mail className="w-4.5 h-4.5 text-orange-400" />
</div>
<a href="mailto:info@rit.ac.in" className="hover:text-orange-400 transition-colors font-medium">
info@rit.ac.in
</a>
</li>
</ul>
</div> </div>
</div> </div>
</div>
{/* Contact */} {/* Bottom Copyright Bar */}
<div> <div className="border-t border-[#2A104E] bg-[#090314] py-9 lg:py-10 px-4 mt-20">
<h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}> <div className="container-custom flex flex-col sm:flex-row items-center justify-between gap-5">
Campus Location & Contact <p className="text-purple-300/70 text-sm lg:text-base font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
</h4> © {new Date().getFullYear()} RIT Freshers Hub. Built for Rajalakshmi Institute of Technology Students.
<ul className="space-y-3"> </p>
<li className="flex items-start gap-3 text-slate-400 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
<MapPin className="w-4 h-4 mt-0.5 shrink-0 text-[#F97316]" /> <div className="flex items-center gap-6 text-sm lg:text-base font-medium text-purple-300/70">
<span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span> <a href="#" className="hover:text-orange-400 transition-colors">
</li> Privacy Policy
<li className="flex items-center gap-3 text-slate-400 text-sm"> </a>
<Phone className="w-4 h-4 shrink-0 text-[#F97316]" /> <span className="text-purple-900">·</span>
<a href="tel:+914423422890" className="hover:text-[#F97316] transition-colors">+91 44 2342 2890</a> <a href="#" className="hover:text-orange-400 transition-colors">
</li> Terms of Use
<li className="flex items-center gap-3 text-slate-400 text-sm"> </a>
<Mail className="w-4 h-4 shrink-0 text-[#F97316]" /> <span className="text-purple-900">·</span>
<a href="mailto:info@rit.ac.in" className="hover:text-[#F97316] transition-colors">info@rit.ac.in</a> <a href="#" className="hover:text-orange-400 transition-colors">
</li> Accessibility
</ul> </a>
</div>
</div> </div>
</div> </div>
</div> </footer>
</div>
{/* Bottom Bar */}
<div className="border-t border-slate-700">
<div className="container-custom py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
<p className="text-slate-500 text-xs" style={{ fontFamily: 'Inter, sans-serif' }}>
© 2025 RIT Freshers Hub. All rights reserved.
</p>
<div className="flex items-center gap-4 text-xs text-slate-500">
<a href="#" className="hover:text-[#F97316] transition-colors">Privacy Policy</a>
<span>·</span>
<a href="#" className="hover:text-[#F97316] transition-colors">Terms of Use</a>
<span>·</span>
<a href="#" className="hover:text-[#F97316] transition-colors">Accessibility</a>
</div>
</div>
</div>
</footer>
); );
} }

439
src/components/Navbar/Navbar.tsx
View File

@@ -35,55 +35,44 @@ export default function Navbar() {
}, []); }, []);
const checkIsActive = (linkPath: string) => { const checkIsActive = (linkPath: string) => {
const [pathName, searchString] = linkPath.split('?'); const [pathName] = linkPath.split('?');
if (location.pathname !== pathName) return false; return location.pathname === pathName;
if (pathName === '/notes') {
const params = new URLSearchParams(location.search);
const hasToolkit = params.has('toolkit') || params.get('section') === 'toolkit';
if (searchString) {
return hasToolkit;
} else {
return !hasToolkit;
}
}
return true;
}; };
return ( return (
<> <>
<motion.nav {/* Fixed Header Layout Wrapper */}
initial={{ y: -100, opacity: 0 }} <div className="fixed top-3 left-1/2 -translate-x-1/2 z-50 w-[96%] xl:w-[97%] max-w-[1560px] flex items-start justify-between gap-2.5 lg:gap-3.5 pointer-events-none px-1 lg:px-2">
animate={{ y: 0, opacity: 1 }} {/* Grey Rectangular Capsule Container (Logo + Links ending with LeetCode) */}
transition={{ duration: 0.6, ease: 'easeOut' }} <motion.nav
className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]" initial={{ y: -100, opacity: 0 }}
style={{ animate={{ y: 0, opacity: 1 }}
background: 'linear-gradient(to right, rgba(15, 23, 42, 0.45) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(15, 23, 42, 0.45) 100%)', transition={{ duration: 0.6, ease: 'easeOut' }}
backdropFilter: 'blur(16px)', className="pointer-events-auto flex items-center justify-between flex-1 min-w-0 pl-2.5 pr-4 lg:pl-3.5 lg:pr-5 py-2 transition-all duration-300 shadow-[0_8px_32px_rgba(0,0,0,0.25)]"
WebkitBackdropFilter: 'blur(16px)', style={{
borderRadius: '20px', background: 'linear-gradient(to right, rgba(19, 9, 36, 0.88) 0%, rgba(30, 12, 54, 0.82) 50%, rgba(19, 9, 36, 0.88) 100%)',
border: '1px solid rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(16px)',
}} WebkitBackdropFilter: 'blur(16px)',
> borderRadius: '20px',
<div className="flex items-center justify-between px-5 py-2.5"> border: '1px solid rgba(255, 255, 255, 0.12)',
}}
>
{/* Logo - RIT Event Hub Style */} {/* Logo - RIT Event Hub Style */}
<a href="/" className="flex items-center gap-2 group"> <a href="/" className="flex items-center gap-1.5 lg:gap-2 group shrink-0">
{/* Logo Image */} {/* Logo Image */}
<motion.img <motion.img
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
src="/logo.png" src="/logo.png"
alt="RIT Logo" alt="RIT Logo"
className="w-10 h-10 object-contain rounded-full shrink-0" className="w-8 h-8 lg:w-9 lg:h-9 object-contain rounded-full shrink-0"
/> />
<div className="flex items-center"> <div className="flex items-center">
<span className="font-extrabold text-white text-2xl tracking-tighter" style={{ fontFamily: 'Poppins, sans-serif' }}> <span className="font-extrabold text-white text-lg lg:text-xl xl:text-2xl tracking-tighter" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
rit rit
</span> </span>
<div className="h-7 w-[1px] bg-white/20 mx-2" /> <div className="h-5 lg:h-6 w-[1px] bg-white/20 mx-1 lg:mx-1.5" />
<div className="flex flex-col text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}> <div className="hidden sm:flex flex-col text-[7.5px] lg:text-[8px] xl:text-[8.5px] font-bold text-slate-200 leading-tight tracking-wider" style={{ fontFamily: 'Inter, sans-serif' }}>
<span>RAJALAKSHMI</span> <span>RAJALAKSHMI</span>
<span>INSTITUTE OF</span> <span>INSTITUTE OF</span>
<span>TECHNOLOGY</span> <span>TECHNOLOGY</span>
@@ -91,17 +80,17 @@ export default function Navbar() {
</div> </div>
</a> </a>
{/* Desktop Nav */} {/* Desktop Nav - Ends with LeetCode */}
<div className="hidden md:flex items-center gap-1"> <div className="hidden md:flex items-center gap-0.5 lg:gap-0.5 xl:gap-1">
{NAV_LINKS.map((link) => { {NAV_LINKS.map((link) => {
const isActive = checkIsActive(link.path); const isActive = checkIsActive(link.path);
return ( return (
<Link <Link
key={link.path} key={link.path}
to={link.path} to={link.path}
className="relative px-1.5 lg:px-2.5 xl:px-3.5 py-1.5 rounded-lg text-[10px] lg:text-[11px] xl:text-xs font-semibold uppercase tracking-wider transition-all duration-200" className="relative px-1 lg:px-1.5 xl:px-2 2xl:px-2.5 py-1.5 rounded-lg text-[8.5px] lg:text-[9px] xl:text-[10px] 2xl:text-[11px] font-semibold uppercase tracking-wider transition-all duration-200 whitespace-nowrap shrink-0"
style={{ style={{
fontFamily: 'Poppins, sans-serif', fontFamily: 'Plus Jakarta Sans, sans-serif',
color: isActive ? '#FFFFFF' : '#CBD5E1', color: isActive ? '#FFFFFF' : '#CBD5E1',
}} }}
> >
@@ -109,7 +98,7 @@ export default function Navbar() {
<motion.div <motion.div
layoutId="nav-active" layoutId="nav-active"
className="absolute inset-0 rounded-xl" className="absolute inset-0 rounded-xl"
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)' }}
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }} transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
/> />
)} )}
@@ -119,209 +108,209 @@ export default function Navbar() {
})} })}
</div> </div>
{/* Right Side: Auth + Mobile Toggle */} {/* Mobile Toggle */}
<div className="flex items-center gap-2"> <div className="md:hidden flex items-center">
{/* Pitch your Idea - RAISE Button */}
<Link
to="/raise"
className="hidden lg:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-rose-500 via-pink-500 to-rose-600 hover:from-rose-600 hover:to-pink-600 text-white text-[11px] font-bold shadow-md shadow-rose-500/25 border border-white/20 transition-all duration-200 hover:scale-[1.03] active:scale-95 whitespace-nowrap"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-3.5 h-3.5 text-amber-200" />
<span>Pitch your Idea - RAISE</span>
</Link>
{/* Auth Section */}
{isAuthenticated && user ? (
<div className="relative" ref={profileRef}>
<button
onClick={() => setIsProfileOpen(!isProfileOpen)}
className="flex items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-white/10 transition-all cursor-pointer"
>
{user.pictureUrl ? (
<img
src={user.pictureUrl}
alt={user.name}
className="w-8 h-8 rounded-full border-2 border-white/30 object-cover"
referrerPolicy="no-referrer"
/>
) : (
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-sm">
{user.name.charAt(0).toUpperCase()}
</div>
)}
<div className="hidden lg:flex flex-col items-start">
<span className="text-white text-[11px] font-semibold leading-tight max-w-[100px] truncate">
{user.name.split(' ')[0]}
</span>
{isVerifiedStudent && (
<span className="flex items-center gap-0.5 text-[9px] text-emerald-400 font-bold">
<ShieldCheck className="w-2.5 h-2.5" /> Verified
</span>
)}
</div>
<ChevronDown className="w-3 h-3 text-slate-400 hidden lg:block" />
</button>
{/* Profile Dropdown */}
<AnimatePresence>
{isProfileOpen && (
<motion.div
initial={{ opacity: 0, y: 8, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8, scale: 0.95 }}
transition={{ duration: 0.15 }}
className="absolute right-0 top-full mt-2 w-64 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden z-50"
>
<div className="p-4 border-b border-slate-700/60">
<div className="flex items-center gap-3">
{user.pictureUrl ? (
<img
src={user.pictureUrl}
alt={user.name}
className="w-10 h-10 rounded-full border-2 border-orange-500/40 object-cover"
referrerPolicy="no-referrer"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-lg">
{user.name.charAt(0).toUpperCase()}
</div>
)}
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-bold truncate">{user.name}</p>
<p className="text-slate-400 text-[11px] truncate">{user.email}</p>
</div>
</div>
{isVerifiedStudent ? (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
<span className="text-[11px] font-bold text-emerald-400">Verified RIT Student</span>
</div>
) : (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/15 border border-amber-500/25">
<span className="text-[11px] font-semibold text-amber-400">
Sign in with @ritchennai.edu.in for verified badge
</span>
</div>
)}
</div>
<div className="p-2">
<button
onClick={() => {
logout();
setIsProfileOpen(false);
}}
className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-red-500/15 text-xs font-semibold transition-all cursor-pointer"
>
<LogOut className="w-4 h-4" />
Sign Out
</button>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
) : (
<motion.button
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
onClick={loginWithGoogle}
className="hidden md:flex items-center gap-2 px-4 py-2 rounded-xl text-white text-[11px] font-semibold border border-white/15 hover:border-orange-500/40 hover:bg-white/5 transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogIn className="w-3.5 h-3.5" />
Sign In
</motion.button>
)}
{/* Mobile Toggle */}
<motion.button <motion.button
whileTap={{ scale: 0.9 }} whileTap={{ scale: 0.9 }}
onClick={() => setIsMobileOpen(!isMobileOpen)} onClick={() => setIsMobileOpen(!isMobileOpen)}
className="md:hidden w-11 h-11 rounded-xl flex items-center justify-center text-slate-200 hover:text-white bg-slate-800/60 hover:bg-slate-700/60 border border-slate-700/50 transition-all active:scale-95" className="w-9 h-9 rounded-xl flex items-center justify-center text-slate-200 hover:text-white bg-slate-800/60 hover:bg-slate-700/60 border border-slate-700/50 transition-all active:scale-95"
aria-label="Toggle menu" aria-label="Toggle menu"
> >
{isMobileOpen ? <X className="w-5 h-5 stroke-[2.5]" /> : <Menu className="w-5 h-5 stroke-[2.5]" />} {isMobileOpen ? <X className="w-5 h-5 stroke-[2.5]" /> : <Menu className="w-5 h-5 stroke-[2.5]" />}
</motion.button> </motion.button>
</div> </div>
</div>
{/* Mobile Menu */} {/* Mobile Menu Dropdown */}
<AnimatePresence> <AnimatePresence>
{isMobileOpen && ( {isMobileOpen && (
<motion.div <motion.div
initial={{ height: 0, opacity: 0 }} initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }} animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }} exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
className="overflow-hidden md:hidden max-h-[80vh] overflow-y-auto" className="absolute left-0 top-full mt-2 w-full overflow-hidden md:hidden max-h-[80vh] overflow-y-auto z-50"
> >
<div className="px-4 pb-5 pt-3 grid grid-cols-2 gap-2 border-t border-white/10 bg-slate-950/90 backdrop-blur-2xl rounded-b-2xl"> <div className="px-4 pb-5 pt-3 grid grid-cols-2 gap-2 border border-white/10 bg-slate-950/95 backdrop-blur-2xl rounded-2xl shadow-2xl">
{NAV_LINKS.map((link) => { {NAV_LINKS.map((link) => {
const isActive = checkIsActive(link.path); const isActive = checkIsActive(link.path);
return ( return (
<Link <Link
key={link.path} key={link.path}
to={link.path} to={link.path}
onClick={() => setIsMobileOpen(false)} onClick={() => setIsMobileOpen(false)}
className="px-3.5 py-3 rounded-xl text-xs font-semibold uppercase tracking-wider flex items-center justify-center text-center transition-all min-h-[44px]" className="px-3.5 py-3 rounded-xl text-xs font-semibold uppercase tracking-wider flex items-center justify-center text-center transition-all min-h-[44px]"
style={{ style={{
fontFamily: 'Poppins, sans-serif', fontFamily: 'Poppins, sans-serif',
color: isActive ? '#FFFFFF' : '#CBD5E1', color: isActive ? '#FFFFFF' : '#CBD5E1',
backgroundColor: isActive ? '#F97316' : 'rgba(255, 255, 255, 0.05)', backgroundColor: isActive ? '#F97316' : 'rgba(255, 255, 255, 0.05)',
border: isActive ? '1px solid #FB923C' : '1px solid rgba(255, 255, 255, 0.08)', border: isActive ? '1px solid #FB923C' : '1px solid rgba(255, 255, 255, 0.08)',
}}
>
{link.label}
</Link>
);
})}
{/* Mobile RAISE Button */}
<Link
to="/raise"
onClick={() => setIsMobileOpen(false)}
className="col-span-2 mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-rose-500 to-pink-600 border border-rose-400/40 shadow-md shadow-rose-500/20 transition-all active:scale-95"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-4 h-4 text-amber-200" />
Pitch your Idea - RAISE Incubator
</Link>
{/* Mobile Auth Button */}
{!isAuthenticated ? (
<button
onClick={() => {
loginWithGoogle();
setIsMobileOpen(false);
}} }}
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-orange-500/10 hover:bg-orange-500/20 transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
> >
{link.label} <LogIn className="w-4 h-4" />
</Link> Sign In with Google
); </button>
})} ) : (
<button
onClick={() => {
logout();
setIsMobileOpen(false);
}}
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogOut className="w-4 h-4" />
Sign Out ({user?.name.split(' ')[0]})
</button>
)}
</div>
</motion.div>
)}
</AnimatePresence>
</motion.nav>
{/* Mobile RAISE Button */} {/* Separate Top Right Section: Sign In on Top, RAISE Incubator Below */}
<Link <motion.div
to="/raise" initial={{ y: -100, opacity: 0 }}
onClick={() => setIsMobileOpen(false)} animate={{ y: 0, opacity: 1 }}
className="col-span-2 mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-white text-xs font-bold bg-gradient-to-r from-rose-500 to-pink-600 border border-rose-400/40 shadow-md shadow-rose-500/20 transition-all active:scale-95" transition={{ duration: 0.6, ease: 'easeOut', delay: 0.05 }}
style={{ fontFamily: 'Poppins, sans-serif' }} className="hidden md:flex flex-col items-center gap-2 pointer-events-auto shrink-0"
> >
<Sparkles className="w-4 h-4 text-amber-200" /> {/* Sign Option (Top Right, Centered) */}
Pitch your Idea - RAISE {isAuthenticated && user ? (
</Link> <div className="relative" ref={profileRef}>
<button
{/* Mobile Auth Button */} onClick={() => setIsProfileOpen(!isProfileOpen)}
{!isAuthenticated ? ( className="flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-slate-900/90 backdrop-blur-md border border-slate-700/80 hover:border-orange-500/50 hover:bg-slate-800/95 shadow-lg transition-all cursor-pointer min-w-[120px]"
<button >
onClick={() => { {user.pictureUrl ? (
loginWithGoogle(); <img
setIsMobileOpen(false); src={user.pictureUrl}
}} alt={user.name}
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-white text-xs font-semibold border border-orange-500/40 bg-orange-500/10 hover:bg-orange-500/20 transition-all cursor-pointer" className="w-6 h-6 rounded-full border border-white/30 object-cover"
style={{ fontFamily: 'Poppins, sans-serif' }} referrerPolicy="no-referrer"
> />
<LogIn className="w-4 h-4" />
Sign In with Google
</button>
) : ( ) : (
<button <div className="w-6 h-6 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-xs">
onClick={() => { {user.name.charAt(0).toUpperCase()}
logout(); </div>
setIsMobileOpen(false);
}}
className="col-span-2 mt-2 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-red-400 text-xs font-semibold border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogOut className="w-4 h-4" />
Sign Out ({user?.name.split(' ')[0]})
</button>
)} )}
</div> <span className="text-white text-xs lg:text-sm font-semibold max-w-[100px] truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
</motion.div> {user.name.split(' ')[0]}
</span>
<ChevronDown className="w-4 h-4 text-slate-400" />
</button>
{/* Profile Dropdown */}
<AnimatePresence>
{isProfileOpen && (
<motion.div
initial={{ opacity: 0, y: 8, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8, scale: 0.95 }}
transition={{ duration: 0.15 }}
className="absolute right-0 top-full mt-2 w-64 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl overflow-hidden z-50"
>
<div className="p-4 border-b border-slate-700/60">
<div className="flex items-center gap-3">
{user.pictureUrl ? (
<img
src={user.pictureUrl}
alt={user.name}
className="w-10 h-10 rounded-full border-2 border-orange-500/40 object-cover"
referrerPolicy="no-referrer"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-lg">
{user.name.charAt(0).toUpperCase()}
</div>
)}
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-bold truncate">{user.name}</p>
<p className="text-slate-400 text-[11px] truncate">{user.email}</p>
</div>
</div>
{isVerifiedStudent ? (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-emerald-500/15 border border-emerald-500/25">
<ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
<span className="text-[11px] font-bold text-emerald-400">Verified RIT Student</span>
</div>
) : (
<div className="mt-3 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/15 border border-amber-500/25">
<span className="text-[11px] font-semibold text-amber-400">
Sign in with @ritchennai.edu.in for verified badge
</span>
</div>
)}
</div>
<div className="p-2">
<button
onClick={() => {
logout();
setIsProfileOpen(false);
}}
className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-red-500/15 text-xs font-semibold transition-all cursor-pointer"
>
<LogOut className="w-4 h-4" />
Sign Out
</button>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
) : (
<motion.button
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
onClick={loginWithGoogle}
className="flex items-center justify-center gap-2 px-5 py-2 rounded-xl text-white text-xs lg:text-sm font-bold bg-slate-900/90 backdrop-blur-md border border-slate-700/80 hover:border-orange-500/60 hover:bg-slate-800/95 shadow-lg shadow-black/30 transition-all cursor-pointer min-w-[120px]"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogIn className="w-4 h-4 text-orange-400" />
<span className="text-white">Sign In</span>
</motion.button>
)} )}
</AnimatePresence>
</motion.nav> {/* RAISE Incubator Module (Below Sign Option) */}
<Link
to="/raise"
className="flex items-center justify-center gap-1.5 px-3.5 py-1.5 lg:px-4 lg:py-2 rounded-xl bg-gradient-to-r from-rose-500 via-pink-500 to-rose-600 hover:from-rose-600 hover:to-pink-600 text-white text-[10.5px] lg:text-[11.5px] font-bold shadow-lg shadow-rose-500/25 border border-white/20 transition-all duration-200 hover:scale-[1.03] active:scale-95 whitespace-nowrap"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-3.5 h-3.5 text-amber-200 shrink-0" />
<span>Pitch your Idea - RAISE Incubator</span>
</Link>
</motion.div>
</div>
{/* Spacer */} {/* Spacer */}
<div className="h-20" /> <div className="h-24" />
</> </>
); );
} }

16
src/components/SectionTitle/SectionTitle.tsx
View File

@@ -28,12 +28,12 @@ export default function SectionTitle({
className={`inline-flex items-center gap-2 mb-3 ${isCenter ? 'mx-auto' : ''}`} className={`inline-flex items-center gap-2 mb-3 ${isCenter ? 'mx-auto' : ''}`}
> >
<span <span
className="px-3 py-1 rounded-full text-xs font-semibold tracking-wider uppercase" className="px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase"
style={{ style={{
fontFamily: 'Poppins, sans-serif', fontFamily: 'Plus Jakarta Sans, sans-serif',
backgroundColor: '#FFF7ED', backgroundColor: '#FFF7ED',
color: '#F97316', color: '#FF6B00',
border: '1px solid #FED7AA', border: '1px solid #FFEDD5',
}} }}
> >
{tag} {tag}
@@ -46,15 +46,15 @@ export default function SectionTitle({
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }} transition={{ duration: 0.5, delay: 0.1 }}
className="text-3xl md:text-4xl font-bold" className="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight"
style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }} style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', color: '#1A0B2E' }}
> >
{title}{' '} {title}{' '}
{highlight && ( {highlight && (
<span <span
className="relative inline-block" className="relative inline-block"
style={{ style={{
background: 'linear-gradient(135deg, #F97316, #FB923C)', background: 'linear-gradient(135deg, #FF6B00, #F97316)',
WebkitBackgroundClip: 'text', WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent', WebkitTextFillColor: 'transparent',
backgroundClip: 'text', backgroundClip: 'text',
@@ -71,7 +71,7 @@ export default function SectionTitle({
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }} transition={{ duration: 0.5, delay: 0.2 }}
className={`mt-3 text-base text-[#475569] max-w-xl ${isCenter ? 'mx-auto' : ''}`} className={`mt-3 text-base text-[#4A3E5E] max-w-xl ${isCenter ? 'mx-auto' : ''}`}
style={{ fontFamily: 'Inter, sans-serif' }} style={{ fontFamily: 'Inter, sans-serif' }}
> >
{subtitle} {subtitle}

21
src/constants/index.ts
View File

@@ -4,7 +4,7 @@ import type { Feature, Stat, BusRoute, Faculty, Event, Club, Question, ToolkitIt
export const NAV_LINKS = [ export const NAV_LINKS = [
{ label: 'Home', path: '/' }, { label: 'Home', path: '/' },
{ label: 'Notes', path: '/notes' }, { label: 'Notes', path: '/notes' },
{ label: 'Toolkit', path: '/notes?section=toolkit' }, { label: 'Toolkit', path: '/toolkit' },
{ label: 'Chatbot', path: '/ai-assistant' }, { label: 'Chatbot', path: '/ai-assistant' },
{ label: 'Campus Map', path: '/campus' }, { label: 'Campus Map', path: '/campus' },
{ label: 'Bus Routes', path: '/bus-routes' }, { label: 'Bus Routes', path: '/bus-routes' },
@@ -13,7 +13,6 @@ export const NAV_LINKS = [
{ label: 'Community', path: '/community' }, { label: 'Community', path: '/community' },
{ label: 'Dev Collab', path: '/collab' }, { label: 'Dev Collab', path: '/collab' },
{ label: 'LeetCode', path: '/leetcode' }, { label: 'LeetCode', path: '/leetcode' },
{ label: 'RAISE', path: '/raise' },
]; ];
// ─── Stats ──────────────────────────────────────────────────────────────────── // ─── Stats ────────────────────────────────────────────────────────────────────
@@ -99,6 +98,24 @@ export const FEATURES: Feature[] = [
color: '#06B6D4', color: '#06B6D4',
bgColor: '#ECFEFF', bgColor: '#ECFEFF',
}, },
{
id: 'collab',
icon: 'Code2',
title: 'Dev Collab Hub',
description: 'Post open-source projects, search for co-developers, and connect with fellow programmers.',
path: '/collab',
color: '#6366F1',
bgColor: '#EEF2FF',
},
{
id: 'leetcode',
icon: 'Trophy',
title: 'LeetCode Arena',
description: 'Track campus competitive programming rankings and see top RIT coders.',
path: '/leetcode',
color: '#F59E0B',
bgColor: '#FFFBEB',
},
]; ];
// ─── Bus Routes ────────────────────────────────────────────────────────────── // ─── Bus Routes ──────────────────────────────────────────────────────────────

225
src/index.css
View File

@@ -1,26 +1,32 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Black&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--color-primary: #F97316; --color-primary: #FF6B00;
--color-primary-light: #FB923C; --color-primary-light: #F97316;
--color-primary-dark: #EA580C; --color-primary-dark: #EA580C;
--color-primary-50: #FFF7ED; --color-primary-50: #FFF7ED;
--color-primary-100: #FFEDD5; --color-primary-100: #FFEDD5;
--color-primary-200: #FED7AA; --color-primary-200: #FED7AA;
--color-secondary: #FB923C; --color-secondary: #F97316;
--color-background: #FAFAFA;
--color-dark-purple: #130924;
--color-dark-purple-light: #1E0C36;
--color-dark-purple-surface: #2A104E;
--color-dark-purple-border: #3A1968;
--color-background: #FAF9FC;
--color-surface: #FFFFFF; --color-surface: #FFFFFF;
--color-border: #E5E7EB; --color-border: #E9E5EE;
--color-heading: #1E293B; --color-heading: #1A0B2E;
--color-body: #475569; --color-body: #4A3E5E;
--color-muted: #94A3B8; --color-muted: #9E91B6;
--color-accent: #FFF7ED; --color-accent: #FFF7ED;
--font-heading: 'Playfair Display', Georgia, serif; --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;
--font-button: 'Poppins', system-ui, sans-serif; --font-button: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
--radius-sm: 8px; --radius-sm: 8px;
--radius-md: 12px; --radius-md: 12px;
@@ -30,19 +36,17 @@
--radius-3xl: 32px; --radius-3xl: 32px;
--radius-full: 9999px; --radius-full: 9999px;
--shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04); --shadow-soft: 0 4px 20px -4px rgba(19, 9, 36, 0.05), 0 1px 3px rgba(19, 9, 36, 0.02);
--shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07); --shadow-medium: 0 8px 30px -6px rgba(19, 9, 36, 0.08), 0 2px 6px rgba(19, 9, 36, 0.03);
--shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1); --shadow-strong: 0 16px 45px -8px rgba(19, 9, 36, 0.15), 0 4px 12px rgba(19, 9, 36, 0.05);
--shadow-orange: 0 8px 30px -4px rgba(249,115,22,0.3); --shadow-orange: 0 8px 30px -4px rgba(255, 107, 0, 0.35);
--color-brand-orange: #ff5722; --color-brand-orange: #FF6B00;
--color-brand-pink: #e91e63; --color-brand-purple: #130924;
--color-brand-purple: #9c27b0;
--animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} }
/* Tailwind Preflight handles resets natively. Custom modifications go here: */ /* Base resets & typography */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 16px; font-size: 16px;
@@ -50,8 +54,8 @@ html {
body { body {
font-family: var(--font-body); font-family: var(--font-body);
background-color: #FAFAFA; background-color: #FAF9FC;
color: #475569; color: #4A3E5E;
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -62,10 +66,10 @@ body {
width: 6px; width: 6px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #f1f1f1; background: #FAF9FC;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #F97316; background: #FF6B00;
border-radius: 3px; border-radius: 3px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@@ -74,20 +78,23 @@ body {
/* Selection */ /* Selection */
::selection { ::selection {
background-color: rgba(249, 115, 22, 0.2); background-color: rgba(255, 107, 0, 0.2);
color: #1E293B; color: #1A0B2E;
} }
/* Typography base */ /* Typography base */
h1, h2, h3, h4, h5, h6 { @layer base {
font-family: var(--font-heading); h1, h2, h3, h4, h5, h6 {
color: #1E293B; font-family: var(--font-heading);
line-height: 1.2; color: #1A0B2E;
font-weight: 700;
line-height: 1.25;
}
} }
/* Focus ring */ /* Focus ring */
:focus-visible { :focus-visible {
outline: 2px solid #F97316; outline: 2px solid #FF6B00;
outline-offset: 2px; outline-offset: 2px;
} }
@@ -110,12 +117,12 @@ h1, h2, h3, h4, h5, h6 {
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0px); } 0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); } 50% { transform: translateY(-8px); }
} }
@keyframes pulse-orange { @keyframes pulse-orange {
0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); } 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); } 70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
} }
@keyframes shimmer { @keyframes shimmer {
@@ -123,12 +130,6 @@ h1, h2, h3, h4, h5, h6 {
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animate-float { .animate-float {
animation: float 4s ease-in-out infinite; animation: float 4s ease-in-out infinite;
} }
@@ -149,36 +150,37 @@ h1, h2, h3, h4, h5, h6 {
/* Glass effect */ /* Glass effect */
.glass { .glass {
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.6);
} }
.glass-dark { .glass-dark {
background: rgba(30, 41, 59, 0.8); background: rgba(19, 9, 36, 0.85);
backdrop-filter: blur(12px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
} }
/* Card base */ /* Card base */
.card-base { .card-base {
background: #FFFFFF; background: #FFFFFF;
border-radius: 20px; border-radius: 16px;
border: 1px solid #E5E7EB; border: 1px solid #E9E5EE;
box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04); box-shadow: 0 4px 20px -4px rgba(19, 9, 36, 0.04), 0 1px 3px rgba(19, 9, 36, 0.02);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
} }
.card-base:hover { .card-base:hover {
transform: translateY(-4px); transform: translateY(-3px);
box-shadow: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1); box-shadow: 0 12px 35px -6px rgba(19, 9, 36, 0.08), 0 4px 12px -2px rgba(19, 9, 36, 0.04);
border-color: rgba(255, 107, 0, 0.3);
} }
/* Gradient text */ /* Gradient text */
.gradient-text { .gradient-text {
background: linear-gradient(135deg, #F97316, #FB923C, #FBBF24); background: linear-gradient(135deg, #FF6B00 0%, #F97316 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -187,16 +189,17 @@ h1, h2, h3, h4, h5, h6 {
/* Orange button */ /* Orange button */
.btn-primary { .btn-primary {
font-family: var(--font-button); font-family: var(--font-button);
background: linear-gradient(135deg, #F97316, #FB923C); background: linear-gradient(135deg, #FF6B00 0%, #F97316 100%);
color: white; color: white;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
padding: 12px 28px; padding: 12px 28px;
font-weight: 600; font-weight: 700;
font-size: 15px; font-size: 14px;
letter-spacing: 0.01em;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); box-shadow: 0 4px 16px rgba(255, 107, 0, 0.28);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -205,8 +208,8 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4); box-shadow: 0 8px 24px rgba(255, 107, 0, 0.38);
background: linear-gradient(135deg, #EA580C, #F97316); background: linear-gradient(135deg, #EA580C 0%, #FF6B00 100%);
} }
.btn-primary:active { .btn-primary:active {
@@ -217,12 +220,12 @@ h1, h2, h3, h4, h5, h6 {
.btn-ghost { .btn-ghost {
font-family: var(--font-button); font-family: var(--font-button);
background: transparent; background: transparent;
color: #1E293B; color: #1A0B2E;
border: 2px solid #E5E7EB; border: 1.5px solid #E9E5EE;
border-radius: 12px; border-radius: 12px;
padding: 10px 26px; padding: 10px 26px;
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
display: inline-flex; display: inline-flex;
@@ -232,8 +235,9 @@ h1, h2, h3, h4, h5, h6 {
} }
.btn-ghost:hover { .btn-ghost:hover {
border-color: #F97316; border-color: #FF6B00;
color: #F97316; color: #FF6B00;
background-color: rgba(255, 107, 0, 0.04);
transform: translateY(-2px); transform: translateY(-2px);
} }
@@ -263,23 +267,13 @@ h1, h2, h3, h4, h5, h6 {
/* Orange dot pattern background */ /* Orange dot pattern background */
.dot-pattern { .dot-pattern {
background-image: radial-gradient(circle, #F9731615 1px, transparent 1px); background-image: radial-gradient(circle, rgba(255, 107, 0, 0.08) 1px, transparent 1px);
background-size: 24px 24px; background-size: 24px 24px;
} }
/* Noise texture overlay */
.noise-overlay::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
pointer-events: none;
}
/* Chat bubble */ /* Chat bubble */
.chat-bubble-user { .chat-bubble-user {
background: linear-gradient(135deg, #F97316, #FB923C); background: linear-gradient(135deg, #FF6B00, #F97316);
color: white; color: white;
border-radius: 18px 18px 4px 18px; border-radius: 18px 18px 4px 18px;
padding: 12px 16px; padding: 12px 16px;
@@ -289,91 +283,26 @@ h1, h2, h3, h4, h5, h6 {
} }
.chat-bubble-ai { .chat-bubble-ai {
background: #F8FAFC; background: #FFFFFF;
color: #1E293B; color: #1A0B2E;
border-radius: 18px 18px 18px 4px; border-radius: 18px 18px 18px 4px;
padding: 12px 16px; padding: 12px 16px;
font-size: 14px; font-size: 14px;
max-width: 80%; max-width: 80%;
align-self: flex-start; align-self: flex-start;
border: 1px solid #E5E7EB; border: 1px solid #E9E5EE;
} }
/* Verified card style input focus state */ /* Verified card style input focus state */
.verified-focus-input { .verified-focus-input {
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1.5px solid #E5E7EB !important; border: 1.5px solid #E9E5EE !important;
} }
.verified-focus-input:focus { .verified-focus-input:focus {
outline: none !important; outline: none !important;
border-color: #F97316 !important; border-color: #FF6B00 !important;
box-shadow: none !important; box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
} }
/* RAISE Incubator Website Styles */
.raise-website {
--font-sans: 'Inter', sans-serif;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--color-primary: #101010;
}
.raise-website body {
font-family: var(--font-sans);
background-color: #fafafa;
color: #171717;
}
.raise-website h1,
.raise-website h2,
.raise-website h3,
.raise-website h4,
.raise-website h5,
.raise-website h6 {
font-family: var(--font-heading) !important;
}
.text-gradient {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo-blue {
filter: invert(29%) sepia(92%) saturate(2377%) hue-rotate(215deg) brightness(93%) contrast(97%);
}
.logo-black {
filter: brightness(0);
}
.glassmorphism {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.shadow-premium {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02),
0 1px 3px rgba(0, 0, 0, 0.05),
0 20px 40px rgba(0, 0, 0, 0.03);
}
.shadow-premium-hover {
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.shadow-premium-hover:hover {
transform: translateY(-4px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.06),
0 30px 60px rgba(0, 0, 0, 0.05);
}
.grid-bg {
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

22
src/pages/AIAssistant/AIAssistant.tsx
View File

@@ -109,17 +109,17 @@ export default function AIAssistant() {
}; };
return ( return (
<div className="min-h-screen flex flex-col bg-[#FAFAFA]"> <div className="min-h-screen flex flex-col bg-[#FAF9FC]">
{/* Header */} {/* 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="container-custom flex items-center justify-between">
<div className="flex items-center gap-3"> <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" /> <Bot className="w-5.5 h-5.5 text-white" />
</div> </div>
<div> <div>
<h1 className="font-bold text-[#1E293B] text-base" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Assistant</h1> <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-[#64748B]"> <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" /> <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
Campus Knowledge Engine Online Campus Knowledge Engine Online
</div> </div>
@@ -187,8 +187,8 @@ export default function AIAssistant() {
{/* Chat Container */} {/* Chat Container */}
<div <div
ref={chatContainerRef} 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" 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 8px 30px -6px rgba(0,0,0,0.04)' }} style={{ minHeight: '420px', maxHeight: '65vh', boxShadow: '0 4px 20px_-4px_rgba(19,9,36,0.04)' }}
> >
{messages.map((msg) => ( {messages.map((msg) => (
<motion.div <motion.div
@@ -199,17 +199,17 @@ export default function AIAssistant() {
className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`} className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}
> >
{msg.role === 'assistant' && ( {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" /> <Bot className="w-4 h-4 text-white" />
</div> </div>
)} )}
<div <div
className="max-w-[85%] sm:max-w-[78%] px-4 py-3 text-sm leading-relaxed" className="max-w-[85%] sm:max-w-[78%] px-4 py-3 text-sm leading-relaxed"
style={{ style={{
background: msg.role === 'user' ? 'linear-gradient(135deg, #F97316, #EA580C)' : '#F8FAFC', background: msg.role === 'user' ? 'linear-gradient(135deg, #FF6B00, #F97316)' : '#FFFFFF',
color: msg.role === 'user' ? 'white' : '#1E293B', color: msg.role === 'user' ? 'white' : '#1A0B2E',
borderRadius: msg.role === 'user' ? '20px 20px 4px 20px' : '20px 20px 20px 4px', 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', fontFamily: 'Inter, sans-serif',
}} }}
dangerouslySetInnerHTML={{ __html: formatContent(msg.content) }} dangerouslySetInnerHTML={{ __html: formatContent(msg.content) }}

24
src/pages/BusRoutes/BusRoutes.tsx
View File

@@ -50,18 +50,18 @@ export default function BusRoutes() {
); );
return ( 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 */} {/* 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 className="max-w-7xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 text-xs text-slate-400 mb-1"> <div className="flex items-center gap-2 text-xs text-purple-300/80 mb-1">
<Link to="/" className="hover:text-orange-400">Home</Link> <Link to="/" className="hover:text-[#FF6B00]">Home</Link>
<ChevronRight className="w-3 h-3" /> <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>
<div className="flex items-center gap-3"> <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 RIT Live Transport Map
</h1> </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"> <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 */} {/* Controls: Search + Toggle Drawer Button */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="relative flex-1 sm:w-64"> <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 <input
type="text" type="text"
placeholder="Search route or bus no..." placeholder="Search route or bus no..."
value={busSearch} value={busSearch}
onChange={(e) => setBusSearch(e.target.value)} 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' }} style={{ fontFamily: 'Inter, sans-serif' }}
/> />
</div> </div>
<button <button
onClick={() => setIsSidebarOpen(!isSidebarOpen)} 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 isSidebarOpen
? 'bg-orange-500 text-white border-orange-400 shadow-lg shadow-orange-500/20' ? 'bg-gradient-to-r from-[#FF6B00] to-[#F97316] 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-[#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" />} {isSidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
<span className="hidden sm:inline"> <span className="hidden sm:inline">

64
src/pages/Campus/Campus.tsx
View File

@@ -148,27 +148,27 @@ export default function Campus() {
{/* Header */} {/* Header */}
<div className="bg-white border-b border-[#E5E7EB] py-10"> <div className="bg-white border-b border-[#E5E7EB] py-10">
<div className="container-custom"> <div className="container-custom">
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3"> <div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
<Link to="/" className="hover:text-[#F97316]">Home</Link> <Link to="/" className="hover:text-[#FF6B00]">Home</Link>
<ChevronRight className="w-3 h-3" /> <ChevronRight className="w-3 h-3" />
<span className="text-[#F97316]">Campus Map</span> <span className="text-[#FF6B00] font-semibold">Campus Map</span>
</div> </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{' '} 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 Campus Map
</span> </span>
</h1> </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. Navigate campus layout, click location categories or blocks to spot exact places on the blueprint.
</p> </p>
</div> </div>
</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 }}> <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
{/* Map Viewer Header Bar */} {/* 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>
<div className="flex items-center gap-2 mb-1"> <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"> <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 <CheckCircle2 className="w-3 h-3" /> Interactive Location Spotter
</span> </span>
</div> </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 Rajalakshmi Institute of Technology
</h2> </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" /> <MapPin className="w-3.5 h-3.5 text-orange-400" />
Kuthambakkam, Chennai • Interactive Map Spotting Enabled Kuthambakkam, Chennai • Interactive Map Spotting Enabled
</p> </p>
@@ -189,23 +189,23 @@ export default function Campus() {
{/* Toolbar Controls */} {/* Toolbar Controls */}
<div className="flex items-center flex-wrap gap-2"> <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"> <div className="flex items-center bg-[#1E0C36] rounded-xl p-1 border border-[#3A1968]">
<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"> <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" /> <ZoomOut className="w-4 h-4" />
</button> </button>
<button onClick={handleResetZoom} title="Reset Zoom" className="px-2 text-xs font-semibold text-orange-400 hover:text-orange-300 transition-colors cursor-pointer"> <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)}% {Math.round(zoomLevel * 100)}%
</button> </button>
<button onClick={handleZoomIn} title="Zoom In" className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer"> <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" /> <ZoomIn className="w-4 h-4" />
</button> </button>
</div> </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" /> <Maximize2 className="w-4 h-4" />
</button> </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 className="w-3.5 h-3.5" />
Download Download
</button> </button>
@@ -269,9 +269,9 @@ export default function Campus() {
</div> </div>
{/* Quick Location Categories Bar */} {/* 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"> <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 && ( {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> <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; const isCatActive = activeCategory === loc.id;
return ( 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'}`}> <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" />} {Icon && <Icon className="w-5 h-5" />}
</div> </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> </motion.button>
); );
})} })}
@@ -293,16 +293,16 @@ export default function Campus() {
</div> </div>
{/* Blueprint Legend & Color Key */} {/* 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"> <div className="flex items-center gap-2 mb-5">
<Layers className="w-5 h-5 text-[#F97316]" /> <Layers className="w-5 h-5 text-[#FF6B00]" />
<h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Blueprint Map Legend</h3> <h3 className="text-xl font-bold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>Blueprint Map Legend</h3>
</div> </div>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{BLUEPRINT_LEGEND.map((item) => { {BLUEPRINT_LEGEND.map((item) => {
const isActive = activeLegend === item.id; const isActive = activeLegend === item.id;
return ( 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="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> <span className="text-xs font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</span>
</button> </button>
@@ -312,28 +312,28 @@ export default function Campus() {
</div> </div>
{/* Blueprint Facilities Index */} {/* 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 className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-6">
<div> <div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Building2 className="w-5 h-5 text-[#F97316]" /> <Building2 className="w-5 h-5 text-[#FF6B00]" />
<h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Campus Blocks & Facilities Index</h3> <h3 className="text-xl font-bold text-[#1A0B2E]" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>Campus Blocks & Facilities Index</h3>
</div> </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> </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>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{filteredFacilities.map((facility) => { {filteredFacilities.map((facility) => {
const isSelected = selectedFacility?.name === facility.name; const isSelected = selectedFacility?.name === facility.name;
const isHighlighted = highlightedSpotNames.has(facility.name); const isHighlighted = highlightedSpotNames.has(facility.name);
return ( 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"> <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-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-[#E5E7EB] text-[#475569]'}`}>{facility.area}</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> </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> </motion.button>
); );
})} })}

14
src/pages/Community/Community.tsx
View File

@@ -261,24 +261,24 @@ export default function Community() {
}; };
return ( return (
<div className="min-h-screen" style={{ backgroundColor: '#FAFBFD' }}> <div className="min-h-screen bg-[#FAF9FC]">
{/* Header */} {/* 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"> <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 RIT Community
</h1> </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. Ask questions and connect with fellow RIT students.
</p> </p>
</div> </div>
</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="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2"> {/* Ask Question Box */} <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)' }}> <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-semibold text-[#1E293B] mb-3 tracking-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>Ask a Question</h3> <h3 className="text-base font-bold text-[#1A0B2E] mb-3 tracking-tight" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>Ask a Question</h3>
{showSuccessBanner && ( {showSuccessBanner && (
<motion.div <motion.div

26
src/pages/DevCollab/DevCollab.tsx
View File

@@ -432,23 +432,23 @@ export default function DevCollab() {
{/* Header */} {/* Header */}
<div className="bg-white border-b border-[#E5E7EB] py-10"> <div className="bg-white border-b border-[#E5E7EB] py-10">
<div className="container-custom"> <div className="container-custom">
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3"> <div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
<Link to="/" className="hover:text-[#F97316]">Home</Link> <Link to="/" className="hover:text-[#FF6B00]">Home</Link>
<ChevronRight className="w-3 h-3" /> <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>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div> <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 <Code2 className="w-4 h-4" /> RIT Developers Environment
</div> </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{' '} 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 Collaborators
</span> </span>
</h1> </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! Post open-source projects, search for co-developers, or manage candidate applications cleanly on the website or via Telegram!
</p> </p>
</div> </div>
@@ -457,8 +457,8 @@ export default function DevCollab() {
whileHover={{ scale: 1.03 }} whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }} whileTap={{ scale: 0.97 }}
onClick={() => requireVerifiedStudent(() => setShowPostModal(true))} 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" 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, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }} style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
{isVerifiedStudent && <ShieldCheck className="w-4 h-4" />} {isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
<Plus className="w-4.5 h-4.5" /> <Plus className="w-4.5 h-4.5" />
@@ -467,15 +467,15 @@ export default function DevCollab() {
</div> </div>
{/* Dashboard Tabs Bar */} {/* 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 <button
onClick={() => setActiveTab('explore')} onClick={() => setActiveTab('explore')}
className={`px-5 py-3 text-xs font-bold transition-all border-b-2 flex items-center gap-2 cursor-pointer ${ className={`px-5 py-3 text-xs font-bold transition-all border-b-2 flex items-center gap-2 cursor-pointer ${
activeTab === 'explore' activeTab === 'explore'
? 'border-[#F97316] text-[#F97316]' ? 'border-[#FF6B00] text-[#FF6B00]'
: 'border-transparent text-slate-500 hover:text-slate-800' : '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" /> <Code2 className="w-4 h-4" />
Explore Projects ({requests.length}) Explore Projects ({requests.length})

20
src/pages/Events/Events.tsx
View File

@@ -196,17 +196,17 @@ export default function Events() {
}; };
return ( return (
<div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}> <div className="min-h-screen bg-[#FAF9FC]">
{/* Header */} {/* 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="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{' '} 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 Clubs
</span> </span>
</h1> </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. Explore official RIT student clubs & societies, leadership details, and community links.
</p> </p>
</div> </div>
@@ -217,13 +217,13 @@ export default function Events() {
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */} {/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
<AnimatedContainer className="mb-14"> <AnimatedContainer className="mb-14">
<div <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" 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, #1E293B, #0F172A)' }} style={{ background: 'linear-gradient(135deg, #130924, #1E0C36)' }}
> >
{/* Background Glow */} {/* Background Glow */}
<div <div
className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none" 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"> <div className="relative z-10 max-w-xl">
@@ -231,10 +231,10 @@ export default function Events() {
<Target className="w-3.5 h-3.5" /> <Target className="w-3.5 h-3.5" />
<span>Interactive Club Matcher</span> <span>Interactive Club Matcher</span>
</div> </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? Not sure which club to join?
</h2> </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! Take our 3-step AI-powered Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
</p> </p>
</div> </div>

24
src/pages/Faculty/Faculty.tsx
View File

@@ -44,26 +44,26 @@ export default function Faculty() {
<div className="relative z-10"> <div className="relative z-10">
{/* Header */} {/* 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="container-custom">
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3"> <div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3">
<Link to="/" className="hover:text-[#F97316]">Home</Link> <Link to="/" className="hover:text-[#FF6B00]">Home</Link>
<ChevronRight className="w-3 h-3" /> <ChevronRight className="w-3 h-3" />
<span className="text-[#F97316]">Faculty Directory</span> <span className="text-[#FF6B00] font-semibold">Faculty Directory</span>
</div> </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{' '} 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 Directory
</span> </span>
</h1> </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. Browse and connect with experienced faculty members across all departments.
</p> </p>
</div> </div>
</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 */} {/* Under Development Banner */}
<motion.div <motion.div
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
@@ -87,15 +87,15 @@ export default function Faculty() {
</motion.div> </motion.div>
{/* Faculty Hero Section */} {/* Faculty Hero Section */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch"> <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="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" /> <Users className="w-7 h-7" />
</div> </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 Faculty Directory
</h2> </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. Browse and connect with experienced faculty members. Search by name, department, or specialization.
</p> </p>
</div> </div>

114
src/pages/Home/Home.tsx
View File

@@ -2,14 +2,12 @@ import { motion, useScroll, useTransform } from 'framer-motion';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
ArrowRight, BookOpen, Bot, GraduationCap, ArrowRight, BookOpen, Bot, GraduationCap,
CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, MapPin, Sparkles CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, Sparkles
} from 'lucide-react'; } from 'lucide-react';
import SectionTitle from '@/components/SectionTitle/SectionTitle'; import SectionTitle from '@/components/SectionTitle/SectionTitle';
import FeatureCard from '@/components/FeatureCard/FeatureCard'; import FeatureCard from '@/components/FeatureCard/FeatureCard';
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer'; import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer'; import { FEATURES } from '@/constants';
import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
import * as LucideIcons from 'lucide-react';
import LazyVideoHero from '@/components/LazyVideoHero/LazyVideoHero'; import LazyVideoHero from '@/components/LazyVideoHero/LazyVideoHero';
@@ -33,7 +31,7 @@ export default function Home() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
className="text-3xl md:text-5xl font-medium tracking-wide mb-2" 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 Welcome to
</motion.h1> </motion.h1>
@@ -42,8 +40,8 @@ export default function Home() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.2 }} transition={{ duration: 0.7, delay: 0.2 }}
className="text-5xl md:text-7xl font-black leading-tight mb-6" className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight mb-6"
style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }} style={{ color: '#FFFFFF', fontFamily: 'Plus Jakarta Sans, sans-serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
> >
RIT Freshers Hub RIT Freshers Hub
</motion.h2> </motion.h2>
@@ -67,12 +65,12 @@ export default function Home() {
> >
<a href="#built-for-freshers"> <a href="#built-for-freshers">
<motion.button <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 }} 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={{ style={{
fontFamily: 'Poppins, sans-serif', fontFamily: 'Plus Jakarta Sans, sans-serif',
background: 'linear-gradient(135deg, #F97316, #FB923C)', background: 'linear-gradient(135deg, #FF6B00, #F97316)',
}} }}
> >
<BookOpen className="w-4 h-4" /> <BookOpen className="w-4 h-4" />
@@ -83,12 +81,12 @@ export default function Home() {
<Link to="/ai-assistant"> <Link to="/ai-assistant">
<motion.button <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 }} 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" 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: 'Poppins, sans-serif' }} 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 Ask Assistant
</motion.button> </motion.button>
</Link> </Link>
@@ -98,7 +96,7 @@ export default function Home() {
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(233,30,99,0.5)' }} whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(233,30,99,0.5)' }}
whileTap={{ scale: 0.96 }} 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" 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" /> <Sparkles className="w-4 h-4 text-amber-200" />
Pitch your Idea - RAISE Pitch your Idea - RAISE
@@ -117,7 +115,7 @@ export default function Home() {
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }} 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"> <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) => ( ].map((stat, i) => (
<div key={i} className="flex flex-col items-center justify-center p-3"> <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"> <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>
<div <div
className="text-2xl md:text-3xl font-black text-[#1E293B] mb-0.5" className="text-2xl md:text-3xl font-extrabold text-[#1A0B2E] mb-0.5"
style={{ fontFamily: 'Poppins, sans-serif' }} style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
{stat.value} {stat.value}
</div> </div>
<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' }} style={{ fontFamily: 'Inter, sans-serif' }}
> >
{stat.label} {stat.label}
@@ -169,80 +167,6 @@ export default function Home() {
</StaggerContainer> </StaggerContainer>
</div> </div>
</section> </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> </div>
); );
} }

33
src/pages/LeetcodeLeaderboard/LeetcodeLeaderboard.tsx
View File

@@ -125,7 +125,7 @@ export default function LeetcodeLeaderboard() {
const topProfile = profiles.length > 0 ? profiles[0] : null; const topProfile = profiles.length > 0 ? profiles[0] : null;
return ( 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 */} {/* Toast Notification */}
<AnimatePresence> <AnimatePresence>
{toastMessage && ( {toastMessage && (
@@ -133,7 +133,7 @@ export default function LeetcodeLeaderboard() {
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }} 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} {toastMessage}
</motion.div> </motion.div>
@@ -142,20 +142,19 @@ export default function LeetcodeLeaderboard() {
<div className="max-w-7xl mx-auto space-y-8"> <div className="max-w-7xl mx-auto space-y-8">
{/* Banner Header */} {/* 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="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-amber-500/5 rounded-full blur-3xl pointer-events-none" /> <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="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 z-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6"> <div className="relative z-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
<div> <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"> <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-amber-500 animate-pulse" /> <Flame className="w-4 h-4 text-[#FF6B00] animate-pulse" />
RIT LeetCode Arena RIT LeetCode Arena
</div> </div>
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins"> <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-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span> Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6B00] to-[#F97316]">LeetCode Leaderboard</span>
</h1> </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. Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.
</p> </p>
</div> </div>
@@ -163,7 +162,8 @@ export default function LeetcodeLeaderboard() {
<div className="flex flex-wrap items-center gap-3 shrink-0"> <div className="flex flex-wrap items-center gap-3 shrink-0">
<button <button
onClick={() => setShowModal(true)} 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]" /> <Plus className="w-5 h-5 stroke-[2.5]" />
Register Handle Register Handle
@@ -171,9 +171,10 @@ export default function LeetcodeLeaderboard() {
<button <button
onClick={handleTriggerSync} onClick={handleTriggerSync}
disabled={isSyncing} 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 24h Spaced Sync
</button> </button>
</div> </div>
@@ -369,10 +370,10 @@ export default function LeetcodeLeaderboard() {
</div> </div>
{/* Desktop Table View (Medium Screens & Up) */} {/* Desktop Table View (Medium Screens & Up) */}
<div className="hidden md:block overflow-x-auto"> <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-slate-600 border-collapse"> <table className="w-full text-left text-[#4A3E5E] border-collapse">
<thead> <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 text-center w-16">Rank</th>
<th className="py-4 px-6">Student</th> <th className="py-4 px-6">Student</th>
<th className="py-4 px-6">Dept & Year</th> <th className="py-4 px-6">Dept & Year</th>

2
src/pages/Notes/Notes.tsx
View File

@@ -1433,7 +1433,7 @@ export default function Notes() {
</div> </div>
)} )}
<div className="container-custom py-10"> <div className="container-custom pt-10 pb-32 lg:pb-44">
{selectedToolkit ? ( {selectedToolkit ? (

26
src/pages/Toolkit/Toolkit.tsx
View File

@@ -677,24 +677,24 @@ export default function Toolkit() {
const toolkitRef = useRef<HTMLDivElement>(null); const toolkitRef = useRef<HTMLDivElement>(null);
return ( return (
<div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}> <div className="min-h-screen bg-[#FAF9FC]">
{/* Header */} {/* Header */}
{!selectedToolkit && ( {!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"> <div className="container-custom">
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}> <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' }}> <div className="flex items-center gap-2 text-xs text-[#9E91B6] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
<Link to="/" className="hover:text-[#F97316]">Home</Link> <Link to="/" className="hover:text-[#FF6B00]">Home</Link>
<ChevronRight className="w-3 h-3" /> <ChevronRight className="w-3 h-3" />
<span className="text-[#F97316]">Student Toolkit</span> <span className="text-[#FF6B00] font-semibold">Student Toolkit</span>
</div> </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{' '} 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 Toolkit
</span> </span>
</h1> </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. Access specialized development environments, IDE configurations, compiler guides, and department toolkits.
</p> </p>
</motion.div> </motion.div>
@@ -702,7 +702,7 @@ export default function Toolkit() {
</div> </div>
)} )}
<div className="container-custom py-10"> <div className="container-custom pt-10 pb-32 lg:pb-44">
{selectedToolkit ? ( {selectedToolkit ? (
(() => { (() => {
const TOOLKIT_MAP: Record<string, { categories: typeof CS_TOOLS_CATEGORIES; label: string }> = { const TOOLKIT_MAP: Record<string, { categories: typeof CS_TOOLS_CATEGORIES; label: string }> = {
@@ -737,8 +737,8 @@ export default function Toolkit() {
setSelectedToolkit(null); 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" 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: 'Poppins, sans-serif' }} style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
> >
<ArrowLeft className="w-4 h-4" /> <ArrowLeft className="w-4 h-4" />
{selectedTool {selectedTool
@@ -750,8 +750,8 @@ export default function Toolkit() {
: 'Back to Toolkit'} : 'Back to Toolkit'}
</button> </button>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h2 className="text-2xl md:text-3xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}> <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, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Toolkit</span> {label} <span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Toolkit</span>
</h2> </h2>
</div> </div>
<p className="text-[#64748B] text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-[#64748B] text-sm mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>