revert: restore UI to commit ec06c59985
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
This commit is contained in:
Shanmuga Krishnan S M
@@ -75,7 +75,7 @@ export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProp
|
||||
>
|
||||
{/* Background Orbs */}
|
||||
<div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-500/20 rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="absolute -bottom-20 -left-20 w-40 h-40 bg-orange-600/20 rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="absolute -bottom-20 -left-20 w-40 h-40 bg-blue-500/20 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock, MapPin } from 'lucide-react';
|
||||
import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock } from 'lucide-react';
|
||||
import type { Faculty } from '@/types';
|
||||
|
||||
interface FacultyCardProps {
|
||||
@@ -32,7 +32,7 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
const mailOptions = [
|
||||
{ name: 'Default Mail App', url: `mailto:${faculty.email}`, icon: Monitor, color: 'text-gray-700', bg: 'bg-gray-100' },
|
||||
{ name: 'Gmail', url: `https://mail.google.com/mail/?view=cm&fs=1&to=${faculty.email}`, icon: Mail, color: 'text-red-500', bg: 'bg-red-50' },
|
||||
{ name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-slate-800', bg: 'bg-slate-100' },
|
||||
{ name: 'Outlook', url: `https://outlook.office.com/mail/deeplink/compose?to=${faculty.email}`, icon: Mail, color: 'text-blue-600', bg: 'bg-blue-50' },
|
||||
{ name: 'Yahoo Mail', url: `https://compose.mail.yahoo.com/?to=${faculty.email}`, icon: Mail, color: 'text-purple-600', bg: 'bg-purple-50' },
|
||||
];
|
||||
|
||||
@@ -172,8 +172,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/80 transition-colors border group w-full"
|
||||
style={{ backgroundColor: 'rgba(255, 255, 255, 0.6)', borderColor: `${from}15` }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center group-hover:bg-[#C25E17] transition-colors shrink-0">
|
||||
<Phone className="w-4 h-4 text-orange-400 group-hover:text-white transition-colors" />
|
||||
<div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center group-hover:bg-blue-500 transition-colors shrink-0">
|
||||
<Phone className="w-4 h-4 text-blue-500 group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<p className="text-[11px] font-semibold text-[#94A3B8] uppercase tracking-wider mb-0.5" style={{ fontFamily: 'Inter, sans-serif' }}>Phone Number</p>
|
||||
@@ -224,14 +224,14 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
{/* Section 2: Academic Info */}
|
||||
<div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center shrink-0">
|
||||
<BookOpen className="w-5 h-5 text-orange-400" />
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
|
||||
<BookOpen className="w-5 h-5 text-indigo-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Academic Information</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
|
||||
<p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
|
||||
<div className="p-5 rounded-xl bg-indigo-50/30 border border-indigo-100/50">
|
||||
<p className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.subjectsHandling || 'Not specified'}</p>
|
||||
</div>
|
||||
<div className="p-5 rounded-xl bg-teal-50/30 border border-teal-100/50">
|
||||
@@ -239,8 +239,8 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif', lineHeight: '1.6' }}>{faculty.researchAreas || 'Not specified'}</p>
|
||||
</div>
|
||||
{faculty.studentsGuided && (
|
||||
<div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50">
|
||||
<p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
|
||||
<div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50">
|
||||
<p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
|
||||
<div className="flex gap-8">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.ug}</span>
|
||||
@@ -250,45 +250,17 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
<span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.pg}</span>
|
||||
<span className="text-xs font-semibold text-[#64748B]">PG</span>
|
||||
</div>
|
||||
{faculty.studentsGuided.phd && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.phd}</span>
|
||||
<span className="text-xs font-semibold text-[#64748B]">PhD</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.phd}</span>
|
||||
<span className="text-xs font-semibold text-[#64748B]">Ph.D.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 3: Office & Availability */}
|
||||
<div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center shrink-0">
|
||||
<MapPin className="w-5 h-5 text-[#FF7A00]" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Office & Availability</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-5 rounded-xl bg-gray-50/80 border border-gray-100 flex items-start gap-4">
|
||||
<Clock className="w-6 h-6 text-[#FF7A00] shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-[#94A3B8] uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Hours</p>
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.officeHours || 'Not specified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50 flex items-start gap-4">
|
||||
<Building2 className="w-6 h-6 text-orange-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office || 'Not specified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 4: Achievements (Render only if present) */}
|
||||
{/* Section 3: Achievements (Render only if present) */}
|
||||
{(faculty.achievements || faculty.publications) && (
|
||||
<div className="bg-white rounded-[20px] shadow-sm border border-[#E8ECF4] p-6 sm:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
@@ -338,10 +310,10 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.officeHours || 'Not specified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 rounded-xl bg-orange-50/40 border border-orange-200/50 flex items-start gap-4">
|
||||
<Building2 className="w-6 h-6 text-orange-500 shrink-0 mt-0.5" />
|
||||
<div className="p-5 rounded-xl bg-blue-50/30 border border-blue-100/50 flex items-start gap-4">
|
||||
<Building2 className="w-6 h-6 text-blue-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
|
||||
<p className="text-xs font-bold text-blue-500 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
|
||||
<p className="text-sm font-medium text-[#1E293B]" style={{ fontFamily: 'Inter, sans-serif' }}>{faculty.office || 'Not specified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,121 @@
|
||||
import { GraduationCap, MapPin, Phone, Mail } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { GraduationCap, MapPin, Phone, Mail, ArrowRight } from 'lucide-react';
|
||||
|
||||
const quickLinks = [
|
||||
{ label: 'Home', path: '/' },
|
||||
{ label: 'Notes & PYQs', path: '/notes' },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant' },
|
||||
{ label: '3D Campus Map', path: '/campus' },
|
||||
{ label: 'Bus Routes', path: '/bus-routes' },
|
||||
{ label: 'Faculty Directory', path: '/faculty' },
|
||||
{ label: 'Events', path: '/events' },
|
||||
{ label: 'Community', path: '/community' },
|
||||
{ label: 'Dev Hub', path: '/collab' },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#0F172A] text-white border-t border-slate-800">
|
||||
<footer className="bg-[#1E293B] text-white">
|
||||
{/* CTA Banner */}
|
||||
<div style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} className="py-12">
|
||||
<div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Ready to explore RIT?
|
||||
</h3>
|
||||
<p className="text-orange-100 mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Everything a fresher needs — all in one place.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/ai-assistant"
|
||||
className="flex items-center gap-2 bg-white 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
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Footer */}
|
||||
<div className="container-custom py-6 sm:py-8 px-4">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12">
|
||||
<div className="container-custom py-14">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{/* Brand */}
|
||||
<div className="max-w-md">
|
||||
<div className="flex items-center gap-2.5 mb-2.5">
|
||||
<div className="w-9 h-9 rounded-xl flex items-center justify-center bg-[#C25E17] border border-orange-500/40 text-white shadow-md">
|
||||
<GraduationCap className="w-4 h-4" />
|
||||
<div>
|
||||
<div className="flex items-center gap-2.5 mb-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
|
||||
>
|
||||
<GraduationCap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div>
|
||||
<div className="text-[10px] text-slate-400">Rajalakshmi Institute of Technology</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-slate-400 text-xs sm:text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<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' }}
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-[#F97316] opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="shrink-0">
|
||||
<h4 className="text-white font-semibold mb-2.5 text-xs sm:text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4 text-sm uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Campus Location & Contact
|
||||
</h4>
|
||||
<ul className="space-y-2 text-xs sm:text-sm">
|
||||
<li className="flex items-start gap-2.5 text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<MapPin className="w-4 h-4 mt-0.5 shrink-0 text-orange-400" />
|
||||
<ul className="space-y-3">
|
||||
<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]" />
|
||||
<span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5 text-slate-400">
|
||||
<Phone className="w-4 h-4 shrink-0 text-orange-400" />
|
||||
<a href="tel:+914423422890" className="hover:text-orange-400 transition-colors">+91 44 2342 2890</a>
|
||||
<li className="flex items-center gap-3 text-slate-400 text-sm">
|
||||
<Phone className="w-4 h-4 shrink-0 text-[#F97316]" />
|
||||
<a href="tel:+914423422890" className="hover:text-[#F97316] transition-colors">+91 44 2342 2890</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5 text-slate-400">
|
||||
<Mail className="w-4 h-4 shrink-0 text-orange-400" />
|
||||
<a href="mailto:info@rit.ac.in" className="hover:text-orange-400 transition-colors">info@rit.ac.in</a>
|
||||
<li className="flex items-center gap-3 text-slate-400 text-sm">
|
||||
<Mail className="w-4 h-4 shrink-0 text-[#F97316]" />
|
||||
<a href="mailto:info@rit.ac.in" className="hover:text-[#F97316] transition-colors">info@rit.ac.in</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-slate-800/80 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
|
||||
<span>© {new Date().getFullYear()} Rajalakshmi Institute of Technology. All rights reserved.</span>
|
||||
<span className="text-slate-400">RIT Student Portal v2.0</span>
|
||||
{/* 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>
|
||||
|
||||
@@ -1,668 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
Menu,
|
||||
Calendar,
|
||||
X,
|
||||
BookOpen,
|
||||
Bus,
|
||||
Users,
|
||||
Calendar as ClubIcon,
|
||||
Code2,
|
||||
Trophy,
|
||||
Bot,
|
||||
LayoutDashboard,
|
||||
Wrench,
|
||||
MapPin,
|
||||
MessageSquare,
|
||||
Rocket,
|
||||
GitBranch,
|
||||
LogIn,
|
||||
LogOut,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Grid,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
|
||||
|
||||
interface HeaderProps {
|
||||
onToggleSidebar?: () => void;
|
||||
}
|
||||
|
||||
interface NotificationItem {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
time: string;
|
||||
read: boolean;
|
||||
type: 'academic' | 'dev' | 'campus' | 'bus';
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
path: string;
|
||||
icon: any;
|
||||
desc?: string;
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
title: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
export default function Header({}: HeaderProps) {
|
||||
const [isNavOpen, setIsNavOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
||||
const [isNotifOpen, setIsNotifOpen] = useState(false);
|
||||
const [currentDate, setCurrentDate] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
|
||||
|
||||
const notifRef = useRef<HTMLDivElement>(null);
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const navRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [notifications, setNotifications] = useState<NotificationItem[]>([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Moodle Notes & PYQs Updated',
|
||||
message: '1st to 8th Semester notes and previous year question papers are published on Moodle.',
|
||||
time: '10m ago',
|
||||
read: false,
|
||||
type: 'academic',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Dev Collab Hub Open',
|
||||
message: 'Post open-source project ideas or find co-developers across departments.',
|
||||
time: '1h ago',
|
||||
read: false,
|
||||
type: 'dev',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'LeetCode Campus Rankings Live',
|
||||
message: 'Monthly competitive programming leaderboard has been updated.',
|
||||
time: '3h ago',
|
||||
read: false,
|
||||
type: 'academic',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Campus Bus Schedule Confirmed',
|
||||
message: 'All 4 campus bus routes operating on 7:00 AM morning schedule.',
|
||||
time: '1d ago',
|
||||
read: true,
|
||||
type: 'bus',
|
||||
},
|
||||
]);
|
||||
|
||||
const unreadCount = notifications.filter((n) => !n.read).length;
|
||||
|
||||
const navGroups: NavGroup[] = [
|
||||
{
|
||||
title: 'ACADEMICS & PORTAL',
|
||||
items: [
|
||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard, desc: 'Campus Overview' },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Semester Study Materials' },
|
||||
{ label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench, desc: 'Calculators & Converters' },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'Instant AI Campus Q&A' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'CAMPUS & UTILITIES',
|
||||
items: [
|
||||
{ label: 'Bus Tracker', path: '/bus-routes', icon: Bus, desc: 'Routes & Timings' },
|
||||
{ label: 'Campus Map', path: '/campus', icon: MapPin, desc: '3D Campus Map' },
|
||||
{ label: 'Faculty Directory', path: '/faculty', icon: Users, desc: 'Staff Contacts & Hours' },
|
||||
{ label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Official Societies & Leads' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'COMMUNITY & DEV',
|
||||
items: [
|
||||
{ label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Answers & Advice' },
|
||||
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2, desc: 'Find Project Teammates', highlight: true },
|
||||
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Campus Coding Arena' },
|
||||
{ label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures & MVP' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const checkIsActive = (path: string) => {
|
||||
if (path === '/') return location.pathname === '/';
|
||||
return location.pathname.startsWith(path.split('?')[0]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
const formatted = now.toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
setCurrentDate(formatted);
|
||||
}, []);
|
||||
|
||||
// Listen for ⌘K shortcut and Escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setIsSearchOpen((prev) => !prev);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setIsNavOpen(false);
|
||||
setIsSearchOpen(false);
|
||||
setIsNotifOpen(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
|
||||
// Close dropdowns on outside click
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (notifRef.current && !notifRef.current.contains(e.target as Node)) {
|
||||
setIsNotifOpen(false);
|
||||
}
|
||||
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
||||
setIsSearchOpen(false);
|
||||
}
|
||||
if (navRef.current && !navRef.current.contains(e.target as Node)) {
|
||||
setIsNavOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Auto close nav on location change
|
||||
useEffect(() => {
|
||||
setIsNavOpen(false);
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
const markAllAsRead = () => {
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
||||
};
|
||||
|
||||
const clearNotifications = () => {
|
||||
setNotifications([]);
|
||||
};
|
||||
|
||||
// Search indexing & results calculation
|
||||
const searchResults = (() => {
|
||||
if (!searchQuery.trim()) return [];
|
||||
const q = searchQuery.toLowerCase();
|
||||
const results: { title: string; desc: string; path: string; icon: any; category: string }[] = [];
|
||||
|
||||
// Check modules
|
||||
if ('notes pyqs moodle syllabus question paper'.includes(q)) {
|
||||
results.push({ title: 'Academic Notes & PYQs', desc: 'Semester course notes & past papers', path: '/notes', icon: BookOpen, category: 'Academics' });
|
||||
}
|
||||
if ('bus route timing transport travel pickup'.includes(q)) {
|
||||
results.push({ title: 'Campus Bus Routes', desc: 'Schedules and stops for all campus buses', path: '/bus-routes', icon: Bus, category: 'Utilities' });
|
||||
}
|
||||
if ('chatbot assistant question help contact rules'.includes(q)) {
|
||||
results.push({ title: 'Campus Chatbot', desc: 'Instant Q&A about campus life & rules', path: '/ai-assistant', icon: Bot, category: 'Academics' });
|
||||
}
|
||||
if ('collab dev project developer team coding github'.includes(q)) {
|
||||
results.push({ title: 'Dev Collab Hub', desc: 'Find co-developers & build projects', path: '/collab', icon: Code2, category: 'Dev' });
|
||||
}
|
||||
if ('leetcode ranking leaderboard coding rank'.includes(q)) {
|
||||
results.push({ title: 'LeetCode Leaderboard', desc: 'Campus competitive coding rankings', path: '/leetcode', icon: Trophy, category: 'Dev' });
|
||||
}
|
||||
|
||||
// Search Bus Routes
|
||||
BUS_ROUTES.forEach((r) => {
|
||||
if (r.name.toLowerCase().includes(q) || r.number.toLowerCase().includes(q) || r.from.toLowerCase().includes(q)) {
|
||||
results.push({ title: `${r.number}: ${r.name}`, desc: `Departure: ${r.departureTime} from ${r.from}`, path: '/bus-routes', icon: Bus, category: 'Bus Route' });
|
||||
}
|
||||
});
|
||||
|
||||
// Search Faculty
|
||||
FACULTY_DATA.forEach((f) => {
|
||||
if (f.name.toLowerCase().includes(q) || f.department.toLowerCase().includes(q) || (f.specialization && f.specialization.toLowerCase().includes(q))) {
|
||||
results.push({ title: f.name, desc: `${f.designation} — ${f.department}`, path: '/faculty', icon: Users, category: 'Faculty' });
|
||||
}
|
||||
});
|
||||
|
||||
// Search Clubs
|
||||
CLUBS_DATA.forEach((c) => {
|
||||
if (c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q)) {
|
||||
results.push({ title: c.name, desc: c.description, path: '/events', icon: ClubIcon, category: 'Club' });
|
||||
}
|
||||
});
|
||||
|
||||
return results.slice(0, 6);
|
||||
})();
|
||||
|
||||
const handleSelectResult = (path: string) => {
|
||||
setIsSearchOpen(false);
|
||||
setSearchQuery('');
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
// 5 Key Quick Links for PC header center
|
||||
const mainDesktopLinks = [
|
||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
|
||||
{ label: 'Bus Tracker', path: '/bus-routes', icon: Bus },
|
||||
{ label: 'Dev Collab', path: '/collab', icon: Code2 },
|
||||
{ label: 'LeetCode', path: '/leetcode', icon: Trophy },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 w-full bg-[#0F172A]/95 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-6 py-2 shadow-md text-white">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between gap-2 sm:gap-4">
|
||||
|
||||
{/* Left Side: Brand Logo & Top Navigation Toggle Button */}
|
||||
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
|
||||
<Link to="/" className="flex items-center gap-2 group shrink-0">
|
||||
<div className="p-1 rounded-xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
className="w-7 h-7 object-contain rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-bold text-white text-base tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
RIT Portal
|
||||
</span>
|
||||
<span className="text-[9px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Freshers Hub
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Navigation Dropdown Toggle Button */}
|
||||
<div className="relative" ref={navRef}>
|
||||
<button
|
||||
onClick={() => setIsNavOpen((prev) => !prev)}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border text-xs font-bold transition-all cursor-pointer shadow-sm ${
|
||||
isNavOpen
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white border-orange-400/50'
|
||||
: 'bg-slate-900/90 hover:bg-slate-800 text-slate-200 border-slate-800 hover:border-slate-700'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
title="Toggle Navigation Menu"
|
||||
>
|
||||
<Grid className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span className="hidden xs:inline text-[11.5px]">Navigation</span>
|
||||
<ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${isNavOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center: Desktop Top Quick Links Strip (Clean 5 Links, No Truncation) */}
|
||||
<nav className="hidden lg:flex items-center gap-1 xl:gap-2 shrink-0">
|
||||
{mainDesktopLinks.map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`flex items-center gap-1.5 px-2.5 xl:px-3 py-1.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-xs border border-orange-400/40'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60 border border-transparent'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Icon className={`w-3.5 h-3.5 shrink-0 ${isActive ? 'text-white' : 'text-orange-400'}`} />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Right Controls */}
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
|
||||
|
||||
{/* Global Search Input */}
|
||||
<div className="relative min-w-0 w-24 xs:w-32 sm:w-40 md:w-48" ref={searchRef}>
|
||||
<div
|
||||
onClick={() => setIsSearchOpen(true)}
|
||||
className="relative w-full cursor-text"
|
||||
>
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setIsSearchOpen(true);
|
||||
}}
|
||||
onFocus={() => setIsSearchOpen(true)}
|
||||
placeholder="Search..."
|
||||
className="w-full pl-8 pr-6 sm:pr-8 py-1.5 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-orange-500/60 rounded-xl text-white placeholder-slate-400 outline-none transition-all shadow-inner truncate"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
/>
|
||||
<span className="hidden sm:inline-flex absolute right-2 top-1/2 -translate-y-1/2 text-[9px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1 py-0.5 rounded shadow-2xs">
|
||||
⌘K
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Search Live Results Overlay */}
|
||||
{isSearchOpen && (
|
||||
<div className="absolute top-full right-0 mt-2 w-72 sm:w-[380px] bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-2 text-left">
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-slate-800">
|
||||
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
{searchQuery.trim() ? 'Search Results' : 'Quick Navigation'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsSearchOpen(false)}
|
||||
className="p-1 rounded-md text-slate-400 hover:text-white hover:bg-slate-800"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar p-1 space-y-1">
|
||||
{searchResults.length > 0 ? (
|
||||
searchResults.map((res, i) => {
|
||||
const Icon = res.icon;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleSelectResult(res.path)}
|
||||
className="flex items-center justify-between p-2.5 rounded-xl hover:bg-slate-800/80 cursor-pointer transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-orange-500/10 text-orange-400 flex items-center justify-center shrink-0 border border-orange-500/30">
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="text-xs font-bold text-white group-hover:text-orange-400 truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{res.title}
|
||||
</span>
|
||||
<span className="text-[11px] text-slate-400 truncate">{res.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[9px] font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0 border border-slate-700">
|
||||
{res.category}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="p-4 text-center space-y-2">
|
||||
<span className="text-xs text-slate-400 block">
|
||||
{searchQuery.trim() ? `No matches found for "${searchQuery}"` : 'Type to search notes, faculty, routes & clubs'}
|
||||
</span>
|
||||
<div className="flex flex-wrap justify-center gap-1.5 pt-1">
|
||||
<button
|
||||
onClick={() => handleSelectResult('/notes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Notes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/bus-routes')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Bus Routes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSelectResult('/faculty')}
|
||||
className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 font-medium hover:bg-slate-700 hover:text-white border border-slate-700"
|
||||
>
|
||||
Faculty
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Date Display Badge */}
|
||||
<div className="hidden xl:flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800 whitespace-nowrap">
|
||||
<Calendar className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span>{currentDate}</span>
|
||||
</div>
|
||||
|
||||
{/* Notifications Dropdown */}
|
||||
<div className="relative" ref={notifRef}>
|
||||
<button
|
||||
onClick={() => setIsNotifOpen((prev) => !prev)}
|
||||
className="relative p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-300 hover:text-white transition-colors cursor-pointer border border-slate-800"
|
||||
title="Notifications"
|
||||
>
|
||||
<Bell className="w-4 h-4" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-orange-500 ring-2 ring-[#0F172A]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Notifications Dropdown Panel */}
|
||||
{isNotifOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-[#0F172A] rounded-2xl border border-slate-800 shadow-2xl overflow-hidden z-50 p-3 text-left">
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Notifications
|
||||
</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-orange-600 text-white">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={markAllAsRead}
|
||||
className="text-[11px] font-semibold text-orange-400 hover:text-orange-300"
|
||||
>
|
||||
Mark all read
|
||||
</button>
|
||||
)}
|
||||
{notifications.length > 0 && (
|
||||
<button
|
||||
onClick={clearNotifications}
|
||||
className="text-[11px] font-semibold text-slate-400 hover:text-slate-300"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto custom-scrollbar pt-2 space-y-2">
|
||||
{notifications.length > 0 ? (
|
||||
notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`p-2.5 rounded-xl border transition-colors ${
|
||||
n.read ? 'bg-slate-900/40 border-slate-800' : 'bg-slate-900/90 border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-bold text-white leading-snug" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{n.title}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-medium">{n.time}</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-300 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{n.message}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-6 text-center text-xs text-slate-400">
|
||||
No new notifications
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Auth Profile / Sign In */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800 shrink-0">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 rounded-full border border-slate-700 object-cover shrink-0"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-orange-500/40">
|
||||
{user.name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={logout}
|
||||
title="Sign Out"
|
||||
className="p-1 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginWithGoogle}
|
||||
className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md shrink-0 whitespace-nowrap"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5 shrink-0" />
|
||||
<span>Sign In</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── FULL TOP NAVIGATION DROPDOWN DRAWER (DESKTOP & MOBILE) ─── */}
|
||||
<AnimatePresence>
|
||||
{isNavOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10, scaleY: 0.97 }}
|
||||
animate={{ opacity: 1, y: 0, scaleY: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scaleY: 0.97 }}
|
||||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||||
className="absolute top-full inset-x-0 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl z-50 p-3 sm:p-5 md:p-6 max-h-[80vh] overflow-y-auto custom-scrollbar"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto space-y-4">
|
||||
|
||||
{/* Header Bar inside Drawer */}
|
||||
<div className="flex items-center justify-between pb-2 border-b border-slate-800/80">
|
||||
<span className="text-[11px] font-extrabold text-orange-400 uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
All Campus Modules & Services
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className="text-xs font-semibold px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
Close Menu ✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation Grid (1 Column Mobile, 3 Columns Desktop) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-5">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.title} className="flex flex-col gap-1.5 bg-slate-900/70 p-3 rounded-2xl border border-slate-800/80">
|
||||
<span
|
||||
className="px-2 text-[10px] sm:text-[11px] font-bold text-orange-400 tracking-wider uppercase mb-0.5 flex items-center justify-between"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<span>{group.title}</span>
|
||||
</span>
|
||||
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className={`flex items-center justify-between p-2.5 rounded-xl transition-all duration-200 group ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-md border border-orange-500/50'
|
||||
: 'hover:bg-slate-800/80 text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className={`p-1.5 rounded-lg shrink-0 ${
|
||||
isActive ? 'bg-white/20 text-white' : 'bg-slate-800 text-orange-400 group-hover:bg-slate-700'
|
||||
}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{item.label}
|
||||
</span>
|
||||
{item.highlight && !isActive && (
|
||||
<span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{item.desc && (
|
||||
<span className={`text-[10px] sm:text-[10.5px] truncate ${isActive ? 'text-orange-100' : 'text-slate-400'}`}>
|
||||
{item.desc}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`text-xs ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Dev Collab Hub CTA Banner */}
|
||||
<div className="pt-2 border-t border-slate-800/80">
|
||||
<Link
|
||||
to="/collab"
|
||||
onClick={() => setIsNavOpen(false)}
|
||||
className="w-full flex items-center justify-between p-3 sm:p-3.5 rounded-2xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white group transition-all duration-200 shadow-lg shadow-orange-500/10"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
|
||||
<GitBranch className="w-4.5 h-4.5" />
|
||||
</div>
|
||||
<div className="flex flex-col text-left min-w-0">
|
||||
<span className="text-xs font-bold leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Developer Collaboration Hub
|
||||
</span>
|
||||
<span className="text-[10.5px] sm:text-[11px] text-orange-100/90 truncate">Find co-developers & build open-source projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[11px] sm:text-xs font-bold px-3 py-1 rounded-xl bg-white/20 hover:bg-white/30 transition-colors shrink-0 ml-2">
|
||||
Launch Hub →
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,294 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
BookOpen,
|
||||
Wrench,
|
||||
Bot,
|
||||
MapPin,
|
||||
Bus,
|
||||
Users,
|
||||
Calendar,
|
||||
MessageSquare,
|
||||
Code2,
|
||||
Trophy,
|
||||
Rocket,
|
||||
LogOut,
|
||||
LogIn,
|
||||
ShieldCheck,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
GitBranch,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
|
||||
interface SidebarProps {
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
isCollapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
path: string;
|
||||
icon: any;
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
title: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
export default function Sidebar({
|
||||
isOpen,
|
||||
onToggle,
|
||||
isCollapsed,
|
||||
onToggleCollapse,
|
||||
}: SidebarProps) {
|
||||
const location = useLocation();
|
||||
const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
|
||||
|
||||
const checkIsActive = (linkPath: string) => {
|
||||
const [pathName, searchString] = linkPath.split('?');
|
||||
if (location.pathname !== pathName) return false;
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
const navGroups: NavGroup[] = [
|
||||
{
|
||||
title: 'ACADEMICS & PORTAL',
|
||||
items: [
|
||||
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen },
|
||||
{ label: 'Student Toolkit', path: '/notes?section=toolkit', icon: Wrench },
|
||||
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'CAMPUS & UTILITIES',
|
||||
items: [
|
||||
{ label: 'Bus Tracker', path: '/bus-routes', icon: Bus },
|
||||
{ label: 'Campus Map', path: '/campus', icon: MapPin },
|
||||
{ label: 'Faculty Directory', path: '/faculty', icon: Users },
|
||||
{ label: 'Student Clubs', path: '/events', icon: Calendar },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'COMMUNITY & DEV',
|
||||
items: [
|
||||
{ label: 'Freshers Q&A', path: '/community', icon: MessageSquare },
|
||||
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2, highlight: true },
|
||||
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy },
|
||||
{ label: 'RAISE Incubator', path: '/raise', icon: Rocket },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Backdrop Overlay */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onToggle}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-xs z-40 lg:hidden"
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Main Sidebar Container - Sleek Professional Deep Indigo */}
|
||||
<aside
|
||||
className={`fixed top-0 left-0 z-50 h-screen bg-[#0F172A] text-white transition-all duration-300 ease-in-out lg:translate-x-0 ${
|
||||
isOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
} ${
|
||||
isCollapsed ? 'w-20' : 'w-64 xl:w-72'
|
||||
} flex flex-col justify-between border-r border-slate-800 shadow-[8px_0_30px_rgba(0,0,0,0.3)]`}
|
||||
>
|
||||
{/* Top Branding & Collapse Button */}
|
||||
<div className="p-4 sm:p-5 flex flex-col gap-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-3 group min-w-0">
|
||||
<div className="p-2 rounded-2xl bg-slate-950 border border-slate-800 shadow-sm shrink-0">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="RIT Logo"
|
||||
className="w-7 h-7 object-contain rounded-full"
|
||||
/>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="font-bold text-white text-lg tracking-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
RIT Portal
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Freshers Hub
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Mobile Close Button */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="lg:hidden p-1.5 rounded-xl bg-slate-800 text-slate-200 hover:bg-slate-700"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Desktop Collapse Toggle Button */}
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
className="hidden lg:flex p-1.5 rounded-xl bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700/60 transition-colors"
|
||||
title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
|
||||
>
|
||||
{isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Quick Dev Collab Launch CTA inside Sidebar (Expanded only) */}
|
||||
{!isCollapsed && (
|
||||
<Link
|
||||
to="/collab"
|
||||
className="w-full flex items-center justify-between p-3 rounded-2xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white group transition-all duration-200 shadow-md shadow-slate-950/50"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<div className="w-7 h-7 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0">
|
||||
<GitBranch className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex flex-col text-left min-w-0">
|
||||
<span className="text-xs font-bold leading-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Dev Collab Hub
|
||||
</span>
|
||||
<span className="text-[10px] text-orange-100/90 truncate">Co-Developer Projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-orange-100 group-hover:translate-x-0.5 transition-transform" />
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Navigation Groups */}
|
||||
<nav className="flex flex-col gap-5 overflow-y-auto max-h-[calc(100vh-320px)] custom-scrollbar pr-0.5">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.title} className="flex flex-col gap-1">
|
||||
{!isCollapsed && (
|
||||
<span
|
||||
className="px-3 text-[10px] font-bold text-slate-400/70 tracking-widest uppercase mb-1"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
{group.title}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{group.items.map((item) => {
|
||||
const isActive = checkIsActive(item.path);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
title={isCollapsed ? item.label : undefined}
|
||||
className={`relative flex items-center ${
|
||||
isCollapsed ? 'justify-center px-0 py-3' : 'justify-between px-3 py-2.5'
|
||||
} rounded-xl text-xs font-semibold transition-all duration-200 group ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white shadow-sm border border-orange-500/50'
|
||||
: 'text-slate-300 hover:text-white hover:bg-slate-800/60'
|
||||
}`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon
|
||||
className={`w-4 h-4 shrink-0 ${
|
||||
isActive ? 'text-white' : 'text-slate-400 group-hover:text-slate-200'
|
||||
}`}
|
||||
/>
|
||||
{!isCollapsed && <span>{item.label}</span>}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && item.highlight && !isActive && (
|
||||
<span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Footer User Profile & Auth Section */}
|
||||
<div className="p-3 border-t border-slate-800 bg-slate-950/60">
|
||||
{isAuthenticated && user ? (
|
||||
<div className={`flex items-center ${isCollapsed ? 'justify-center p-2' : 'justify-between p-2.5'} rounded-2xl bg-white/5 border border-white/10`}>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
{user.pictureUrl ? (
|
||||
<img
|
||||
src={user.pictureUrl}
|
||||
alt={user.name}
|
||||
className="w-8 h-8 rounded-xl border border-orange-500/40 object-cover shrink-0"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-xl bg-[#C25E17] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-orange-500/40">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
{!isCollapsed && (
|
||||
<div className="flex flex-col min-w-0 text-left">
|
||||
<span className="text-xs font-bold text-white truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{user.name}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 truncate">
|
||||
{isVerifiedStudent ? 'Verified Student' : 'RIT Account'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && (
|
||||
<button
|
||||
onClick={logout}
|
||||
title="Sign Out"
|
||||
className="p-1.5 rounded-xl hover:bg-white/10 text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginWithGoogle}
|
||||
title={isCollapsed ? 'Student Sign In' : undefined}
|
||||
className={`w-full flex items-center justify-center gap-2 ${
|
||||
isCollapsed ? 'p-2.5' : 'p-2.5'
|
||||
} rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] hover:from-[#EA580C] hover:to-[#FB923C] border border-orange-500/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md`}
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<LogIn className="w-4 h-4 shrink-0" />
|
||||
{!isCollapsed && <span>Student Sign In</span>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -5,18 +5,18 @@
|
||||
@theme {
|
||||
--color-primary: #F97316;
|
||||
--color-primary-light: #FB923C;
|
||||
--color-primary-dark: #C25E17;
|
||||
--color-primary-dark: #EA580C;
|
||||
--color-primary-50: #FFF7ED;
|
||||
--color-primary-100: #FFEDD5;
|
||||
--color-primary-200: #FED7AA;
|
||||
--color-secondary: #EA580C;
|
||||
--color-secondary: #FB923C;
|
||||
--color-background: #FAFAFA;
|
||||
--color-surface: #FFFFFF;
|
||||
--color-border: #E5E7EB;
|
||||
--color-heading: #1E293B;
|
||||
--color-body: #475569;
|
||||
--color-muted: #94A3B8;
|
||||
--color-accent: #C25E17;
|
||||
--color-accent: #FFF7ED;
|
||||
|
||||
--font-heading: 'Playfair Display', Georgia, serif;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
@@ -33,24 +33,19 @@
|
||||
--shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
|
||||
--shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07);
|
||||
--shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1);
|
||||
--shadow-orange: 0 8px 30px -4px rgba(249,115,22,0.3);
|
||||
|
||||
--color-brand-orange: #ff5722;
|
||||
--color-brand-pink: #e91e63;
|
||||
--color-brand-purple: #9c27b0;
|
||||
--animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Tailwind Preflight handles resets natively. Custom modifications go here: */
|
||||
|
||||
html, body {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -79,13 +74,14 @@ body {
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: rgba(249, 115, 22, 0.35);
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(249, 115, 22, 0.2);
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
/* Typography base */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
color: #1E293B;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -160,7 +156,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
@@ -182,25 +178,25 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #C25E17, #EA580C, #F97316);
|
||||
background: linear-gradient(135deg, #F97316, #FB923C, #FBBF24);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Primary button */
|
||||
/* Orange button */
|
||||
.btn-primary {
|
||||
font-family: var(--font-button);
|
||||
background: linear-gradient(135deg, #C25E17, #EA580C);
|
||||
background: linear-gradient(135deg, #F97316, #FB923C);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 28px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(194, 94, 23, 0.4);
|
||||
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -209,7 +205,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(234, 88, 12, 0.5);
|
||||
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
|
||||
background: linear-gradient(135deg, #EA580C, #F97316);
|
||||
}
|
||||
|
||||
@@ -237,7 +233,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.btn-ghost:hover {
|
||||
border-color: #F97316;
|
||||
color: #EA580C;
|
||||
color: #F97316;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Outlet, useLocation } from 'react-router-dom';
|
||||
import { Outlet, useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Header from '@/components/Header/Header';
|
||||
import Navbar from '@/components/Navbar/Navbar';
|
||||
import Footer from '@/components/Footer/Footer';
|
||||
|
||||
const pageVariants = {
|
||||
@@ -11,34 +11,25 @@ const pageVariants = {
|
||||
|
||||
export default function MainLayout() {
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const hideFooter = location.pathname === '/notes' && searchParams.has('toolkit');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full max-w-full bg-[#F8FAFC] flex flex-col font-sans selection:bg-orange-500 selection:text-white overflow-x-hidden">
|
||||
{/* Top Header Navigation */}
|
||||
<Header />
|
||||
|
||||
{/* Main Viewport Container */}
|
||||
<div className="flex-1 flex flex-col min-w-0 w-full">
|
||||
{/* Dynamic Page Content */}
|
||||
<div className="flex-1 p-3 sm:p-6 lg:p-8 w-full max-w-full overflow-x-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.main
|
||||
key={location.pathname}
|
||||
variants={pageVariants}
|
||||
initial="initial"
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.25, ease: 'easeInOut' }}
|
||||
className="max-w-7xl mx-auto w-full"
|
||||
>
|
||||
<Outlet />
|
||||
</motion.main>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Global Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
|
||||
<Navbar />
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.main
|
||||
key={location.pathname}
|
||||
variants={pageVariants}
|
||||
initial="initial"
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
<Outlet />
|
||||
</motion.main>
|
||||
</AnimatePresence>
|
||||
{!hideFooter && <Footer />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,9 +20,9 @@ interface LocationSpot {
|
||||
|
||||
const BLUEPRINT_LEGEND = [
|
||||
{ id: 'all', label: 'All Locations', color: '#F97316', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
|
||||
{ id: 'a-block', label: 'A Block', color: '#C25E17', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
|
||||
{ id: 'b-block', label: 'B Block', color: '#EA580C', bg: 'bg-orange-50/60', text: 'text-orange-950', border: 'border-orange-300' },
|
||||
{ id: 'c-block', label: 'C Block', color: '#F97316', bg: 'bg-orange-50/40', text: 'text-orange-950', border: 'border-orange-300' },
|
||||
{ id: 'a-block', label: 'A Block', color: '#60A5FA', bg: 'bg-blue-50/80', text: 'text-blue-900', border: 'border-blue-200' },
|
||||
{ id: 'b-block', label: 'B Block', color: '#93C5FD', bg: 'bg-blue-50/60', text: 'text-blue-900', border: 'border-blue-200' },
|
||||
{ id: 'c-block', label: 'C Block', color: '#BFDBFE', bg: 'bg-blue-50/40', text: 'text-blue-900', border: 'border-blue-200' },
|
||||
{ id: 'admin', label: 'Admin / Facility', color: '#FDBA74', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-200' },
|
||||
{ id: 'hostel', label: 'Hostel / Mess', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-950', border: 'border-purple-200' },
|
||||
{ id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },
|
||||
|
||||
@@ -533,8 +533,8 @@ export default function Community() {
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
|
||||
<span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
|
||||
{/* Verified check icon for senior helpers */}
|
||||
<span className="inline-flex text-orange-500" title="Verified Senior Helper">
|
||||
{/* Blue verified check icon for senior helpers */}
|
||||
<span className="inline-flex text-blue-500" title="Verified Senior Helper">
|
||||
<svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
||||
</svg>
|
||||
|
||||
@@ -433,18 +433,18 @@ export default function DevCollab() {
|
||||
<div className="bg-white border-b border-[#E5E7EB] py-10">
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
|
||||
<Link to="/" className="hover:text-orange-500">Home</Link>
|
||||
<Link to="/" className="hover:text-[#F97316]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-orange-500 font-medium">Developer Collab Hub</span>
|
||||
<span className="text-[#F97316]">Developer Collab Hub</span>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-orange-500/40 text-orange-300 text-xs font-semibold mb-3">
|
||||
<Code2 className="w-4 h-4 text-orange-400" /> RIT Developers Environment
|
||||
<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">
|
||||
<Code2 className="w-4 h-4" /> RIT Developers Environment
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Find Project{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Collaborators
|
||||
</span>
|
||||
</h1>
|
||||
@@ -457,10 +457,10 @@ export default function DevCollab() {
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => requireVerifiedStudent(() => setShowPostModal(true))}
|
||||
className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/20 shrink-0 cursor-pointer border border-white/20"
|
||||
style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/25 shrink-0 cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
{isVerifiedStudent && <ShieldCheck className="w-4 h-4 text-amber-200" />}
|
||||
{isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
|
||||
<Plus className="w-4.5 h-4.5" />
|
||||
Post Collaboration Request
|
||||
</motion.button>
|
||||
@@ -609,7 +609,7 @@ export default function DevCollab() {
|
||||
CLOSED • SPOTS FILLED
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-slate-100 text-slate-700 border border-slate-200">
|
||||
<span className="px-2.5 py-1 rounded-full text-[11px] font-semibold bg-blue-50 text-blue-700 border border-blue-200">
|
||||
{accepted} / {needed} Spots Filled
|
||||
</span>
|
||||
)}
|
||||
@@ -744,7 +744,7 @@ export default function DevCollab() {
|
||||
<div className="pt-4 border-t border-slate-100 flex items-center justify-between gap-2">
|
||||
<button
|
||||
onClick={() => openManageApplicants(item)}
|
||||
className="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 border border-slate-300 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
|
||||
className="px-4 py-2 rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer"
|
||||
>
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
Applicants ({item.applicationsCount || 0})
|
||||
|
||||
@@ -13,10 +13,10 @@ import { CLUBS_DATA } from '@/constants';
|
||||
import type { Club } from '@/types';
|
||||
|
||||
const CLUB_CATEGORY_COLORS: Record<string, string> = {
|
||||
Technical: '#4F46E5',
|
||||
Cultural: '#7C3AED',
|
||||
Technical: '#3B82F6',
|
||||
Cultural: '#EC4899',
|
||||
Social: '#10B981',
|
||||
Creative: '#0284C7',
|
||||
Creative: '#F59E0B',
|
||||
};
|
||||
|
||||
const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
@@ -118,6 +118,7 @@ export default function Events() {
|
||||
// ─── Interactive Like / Favorite System State ─────────────────────────────
|
||||
const [likedClubs, setLikedClubs] = useState<Set<string>>(() => {
|
||||
try {
|
||||
localStorage.removeItem('rit_freshers_liked_clubs');
|
||||
const saved = localStorage.getItem('rit_freshers_liked_clubs_v3');
|
||||
return saved ? new Set(JSON.parse(saved)) : new Set();
|
||||
} catch {
|
||||
@@ -201,7 +202,7 @@ export default function Events() {
|
||||
<div className="container-custom">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Student{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #4F46E5, #7C3AED)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Clubs
|
||||
</span>
|
||||
</h1>
|
||||
@@ -216,25 +217,25 @@ export default function Events() {
|
||||
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
|
||||
<AnimatedContainer className="mb-14">
|
||||
<div
|
||||
className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-6"
|
||||
style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)' }}
|
||||
className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-orange-400/30 flex flex-col md:flex-row items-center justify-between gap-6"
|
||||
style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
|
||||
>
|
||||
{/* Background Glow */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none"
|
||||
style={{ background: 'radial-gradient(circle, #EA580C, transparent)' }}
|
||||
style={{ background: 'radial-gradient(circle, #F97316, transparent)' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/80 text-orange-300 text-xs font-semibold mb-3 border border-orange-500/40">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/20 text-orange-400 text-xs font-semibold mb-3 border border-orange-500/30">
|
||||
<Target className="w-3.5 h-3.5" />
|
||||
<span>Interactive Club Matcher</span>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Not sure which club to join?
|
||||
</h2>
|
||||
<p className="text-orange-50 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Take our 3-step Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
|
||||
<p className="text-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Take our 3-step AI-powered Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -242,11 +243,11 @@ export default function Events() {
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => { resetQuiz(); setIsQuizOpen(true); }}
|
||||
className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer border border-white/20"
|
||||
style={{ background: 'linear-gradient(135deg, #EA580C, #F97316)', fontFamily: 'Poppins, sans-serif' }}
|
||||
className="relative z-10 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm flex items-center gap-2.5 shadow-lg shrink-0 cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-200" />
|
||||
<span>Find My Ideal Club</span>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Find My Ideal Club
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.button>
|
||||
</div>
|
||||
@@ -262,58 +263,61 @@ export default function Events() {
|
||||
|
||||
const renderClubCard = (club: Club) => {
|
||||
const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom;
|
||||
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#C25E17';
|
||||
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#F97316';
|
||||
const isLiked = likedClubs.has(club.id);
|
||||
const likesCount = likesMap[club.id] || 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
whileHover={{ y: -6 }}
|
||||
whileHover={{ y: -4 }}
|
||||
onClick={() => setSelectedClub(club)}
|
||||
className="bg-white rounded-3xl border border-[#E5E7EB] p-6 shadow-xs hover:shadow-xl transition-all duration-300 flex flex-col justify-between cursor-pointer group"
|
||||
className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-[#F97316] transition-all flex flex-col justify-between h-full group"
|
||||
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
||||
>
|
||||
<div>
|
||||
{/* Top Row: Club Icon & Like Button */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
{/* Top Row: Tech Icon / Club Logo & Interactive Heart Like Button */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
{club.logoUrl ? (
|
||||
<div className="w-14 h-14 rounded-full border-2 border-slate-100 p-1 shadow-sm bg-white overflow-hidden shrink-0 group-hover:scale-105 transition-transform">
|
||||
<div className="w-12 h-12 rounded-full border border-slate-100 p-0.5 shadow-sm bg-white overflow-hidden shrink-0 transition-transform group-hover:scale-105">
|
||||
<img src={club.logoUrl} alt={club.name} className="w-full h-full object-cover rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-13 h-13 rounded-2xl flex items-center justify-center text-white shadow-md shrink-0 group-hover:scale-105 transition-transform"
|
||||
style={{ background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)` }}
|
||||
className="w-11 h-11 rounded-full flex items-center justify-center text-white shadow-sm transition-transform group-hover:scale-105"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)`,
|
||||
}}
|
||||
>
|
||||
<IconComponent className="w-6 h-6 text-white" />
|
||||
<IconComponent className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleLike(club.id);
|
||||
}}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all border cursor-pointer ${
|
||||
isLiked
|
||||
? 'bg-rose-500 text-white border-rose-600 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-rose-50 hover:text-rose-600 hover:border-rose-200'
|
||||
}`}
|
||||
>
|
||||
<Heart className={`w-3.5 h-3.5 ${isLiked ? 'fill-white' : ''}`} />
|
||||
<span>{likesCount}</span>
|
||||
</motion.button>
|
||||
{/* Like Button */}
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.08 }}
|
||||
whileTap={{ scale: 0.85 }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleLike(club.id);
|
||||
}}
|
||||
className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold transition-all cursor-pointer border ${
|
||||
isLiked
|
||||
? 'bg-rose-50 border-rose-200 text-rose-600 shadow-2xs'
|
||||
: 'bg-slate-50 border-slate-200 text-slate-500 hover:border-rose-300 hover:text-rose-500'
|
||||
}`}
|
||||
>
|
||||
<Heart className={`w-3.5 h-3.5 ${isLiked ? 'fill-rose-500 text-rose-500' : ''}`} />
|
||||
<span>{likesCount}</span>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Club Title & Tagline */}
|
||||
<h3 className="text-xl font-bold text-[#1E293B] mb-1.5 group-hover:text-orange-600 transition-colors" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
{/* Club Title & Description */}
|
||||
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-[#F97316] transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{club.name}
|
||||
</h3>
|
||||
<p className="text-xs text-[#64748B] line-clamp-2 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{club.description}
|
||||
</p>
|
||||
<p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row: Category Tag & View Details Button */}
|
||||
@@ -324,8 +328,8 @@ export default function Events() {
|
||||
</span>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04 }}
|
||||
className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer bg-[#C25E17] hover:bg-[#EA580C] transition-colors"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer"
|
||||
style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
|
||||
>
|
||||
View Details
|
||||
</motion.button>
|
||||
@@ -345,7 +349,7 @@ export default function Events() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Centered Flex Row for Remaining Clubs */}
|
||||
{/* Centered Flex Row for Remaining Clubs (WiSTEM & STEAM) */}
|
||||
{remainingClubs.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-6 md:gap-7">
|
||||
{remainingClubs.map((club) => (
|
||||
@@ -387,13 +391,13 @@ export default function Events() {
|
||||
</div>
|
||||
<div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-[#C25E17] transition-all duration-300 rounded-full"
|
||||
className="h-full bg-[#F97316] transition-all duration-300 rounded-full"
|
||||
style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Question Header */}
|
||||
<div className="flex items-center gap-2 mb-2 text-[#C25E17]">
|
||||
<div className="flex items-center gap-2 mb-2 text-[#F97316]">
|
||||
<Compass className="w-5 h-5" />
|
||||
<span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
|
||||
</div>
|
||||
@@ -407,10 +411,10 @@ export default function Events() {
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => handleSelectOption(idx)}
|
||||
className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-orange-500 hover:bg-orange-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
|
||||
className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-[#F97316] hover:bg-orange-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
|
||||
>
|
||||
<span>{opt.label}</span>
|
||||
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#C25E17] group-hover:translate-x-1 transition-all" />
|
||||
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#F97316] group-hover:translate-x-1 transition-all" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -428,7 +432,7 @@ export default function Events() {
|
||||
/* Results Screen */
|
||||
<div>
|
||||
<div className="text-center mb-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-orange-50 text-orange-600 border border-orange-200 flex items-center justify-center mx-auto mb-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-orange-100 text-[#F97316] flex items-center justify-center mx-auto mb-3">
|
||||
<CheckCircle2 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
@@ -441,7 +445,7 @@ export default function Events() {
|
||||
<div className="space-y-3 mb-6">
|
||||
{quizResults.map((item, i) => {
|
||||
const IconComponent = (item.club.icon && CLUB_ICON_MAP[item.club.icon]) || Atom;
|
||||
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#C25E17';
|
||||
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#F97316';
|
||||
const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
|
||||
|
||||
return (
|
||||
@@ -451,7 +455,7 @@ export default function Events() {
|
||||
setIsQuizOpen(false);
|
||||
setSelectedClub(item.club);
|
||||
}}
|
||||
className="p-4 rounded-2xl border border-slate-200 hover:border-orange-500 bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
|
||||
className="p-4 rounded-2xl border border-slate-200 hover:border-[#F97316] bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{item.club.logoUrl ? (
|
||||
@@ -492,7 +496,7 @@ export default function Events() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsQuizOpen(false)}
|
||||
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#C25E17] hover:bg-[#EA580C] transition-all cursor-pointer"
|
||||
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#F97316] hover:bg-[#EA580C] transition-all cursor-pointer"
|
||||
>
|
||||
Explore All Clubs
|
||||
</button>
|
||||
@@ -504,7 +508,7 @@ export default function Events() {
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* ─── Club Details Modal ────────────────────────────────────────────── */}
|
||||
{/* ─── Club Details Modal (Featuring Feature 5: Social Link Hub) ───────── */}
|
||||
<AnimatePresence>
|
||||
{selectedClub && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
@@ -526,7 +530,7 @@ export default function Events() {
|
||||
{/* Modal Header */}
|
||||
{(() => {
|
||||
const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
|
||||
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#C25E17';
|
||||
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#F97316';
|
||||
const isLiked = likedClubs.has(selectedClub.id);
|
||||
const likesCount = likesMap[selectedClub.id] || 0;
|
||||
|
||||
@@ -577,9 +581,9 @@ export default function Events() {
|
||||
})()}
|
||||
|
||||
{/* Club Detailed Description */}
|
||||
<div className="mb-5 bg-orange-50/60 border border-orange-200/60 rounded-2xl p-4.5">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-orange-600 uppercase tracking-wider mb-2">
|
||||
<Info className="w-4 h-4 text-orange-600" />
|
||||
<div className="mb-5 bg-gradient-to-r from-orange-50/70 via-amber-50/40 to-slate-50 border border-orange-200/80 rounded-2xl p-4.5">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider mb-2">
|
||||
<Info className="w-4 h-4 text-[#F97316]" />
|
||||
<span>About the Club</span>
|
||||
</div>
|
||||
<p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
@@ -587,35 +591,75 @@ export default function Events() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Leadership & Contact Information */}
|
||||
{/* Leadership & Contact Information - Icon Based Color Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6">
|
||||
<div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#C25E17] to-[#EA580C] text-white flex items-center justify-center shadow-xs shrink-0">
|
||||
{/* President Card - Indigo Theme */}
|
||||
<div className="bg-indigo-50/80 border border-indigo-100 hover:border-indigo-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 text-white flex items-center justify-center shadow-xs shadow-indigo-200 shrink-0">
|
||||
<UserCheck className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[11px] text-orange-300 font-semibold block">President / Student Lead</span>
|
||||
<span className="text-sm font-bold text-white">{selectedClub.presidentName || 'Student President'}</span>
|
||||
<span className="text-[11px] text-indigo-500 font-semibold block">President / Student Lead</span>
|
||||
<span className="text-sm font-bold text-indigo-950">{selectedClub.presidentName || 'Student President'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vice President Card - Violet Theme */}
|
||||
{selectedClub.vicePresidentName && (
|
||||
<div className="bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#EA580C] to-[#F97316] text-white flex items-center justify-center shadow-xs shrink-0">
|
||||
<div className="bg-violet-50/80 border border-violet-100 hover:border-violet-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-violet-600 text-white flex items-center justify-center shadow-xs shadow-violet-200 shrink-0">
|
||||
<Users className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[11px] text-orange-300 font-semibold block">Vice President</span>
|
||||
<span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
|
||||
<span className="text-[11px] text-violet-500 font-semibold block">Vice President</span>
|
||||
<span className="text-sm font-bold text-violet-950">{selectedClub.vicePresidentName}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Coordinator Card - Amber Theme */}
|
||||
{selectedClub.coordinatorName && (
|
||||
<div className="bg-amber-50/80 border border-amber-100 hover:border-amber-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-amber-600 text-white flex items-center justify-center shadow-xs shadow-amber-200 shrink-0">
|
||||
<GraduationCap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[11px] text-amber-600 font-semibold block">Faculty Coordinator</span>
|
||||
<span className="text-sm font-bold text-amber-950">{selectedClub.coordinatorName}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedClub.contactEmail && (
|
||||
<div className="bg-emerald-50/80 border border-emerald-100 hover:border-emerald-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white flex items-center justify-center shadow-xs shadow-emerald-200 shrink-0">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-[11px] text-emerald-500 font-semibold block">Contact Email</span>
|
||||
<a href={`mailto:${selectedClub.contactEmail}`} className="text-sm font-bold text-emerald-700 hover:text-emerald-800 hover:underline truncate block">
|
||||
{selectedClub.contactEmail}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Phone Card - Sky Theme */}
|
||||
<div className="bg-sky-50/80 border border-sky-100 hover:border-sky-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-500 to-sky-600 text-white flex items-center justify-center shadow-xs shadow-sky-200 shrink-0">
|
||||
<Phone className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[11px] text-sky-500 font-semibold block">Contact Phone</span>
|
||||
<span className="text-sm font-bold text-sky-950">{selectedClub.contactPhone || '+91 98765 43210'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Community & Social Links */}
|
||||
<div className="mb-6 bg-slate-900/40 border border-slate-800 rounded-2xl p-4">
|
||||
{/* ─── Feature 5: Social & Community Link Hub (Dummy Links) ─────── */}
|
||||
<div className="mb-6 bg-orange-50/60 border border-orange-200/80 rounded-2xl p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-orange-400 uppercase tracking-wider">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider">
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<span>Community & Social Links</span>
|
||||
</div>
|
||||
@@ -640,9 +684,9 @@ export default function Events() {
|
||||
href={selectedClub.socialLinks.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
|
||||
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-orange-500 hover:text-orange-600 transition-all text-xs font-medium text-slate-700"
|
||||
>
|
||||
<Globe className="w-4 h-4 text-slate-800 shrink-0" />
|
||||
<Globe className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span className="truncate">Linktree Hub</span>
|
||||
</a>
|
||||
)}
|
||||
@@ -652,9 +696,9 @@ export default function Events() {
|
||||
href={selectedClub.socialLinks.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
|
||||
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-blue-600 hover:text-blue-600 transition-all text-xs font-medium text-slate-700"
|
||||
>
|
||||
<LinkedinIcon className="w-4 h-4 text-slate-800 shrink-0" />
|
||||
<LinkedinIcon className="w-4 h-4 text-blue-600 shrink-0" />
|
||||
<span className="truncate">LinkedIn</span>
|
||||
</a>
|
||||
)}
|
||||
@@ -670,6 +714,18 @@ export default function Events() {
|
||||
<span className="truncate">WhatsApp Group</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{selectedClub.socialLinks?.youtube && (
|
||||
<a
|
||||
href={selectedClub.socialLinks.youtube}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-red-600 hover:text-red-600 transition-all text-xs font-medium text-slate-700"
|
||||
>
|
||||
<YoutubeIcon className="w-4 h-4 text-red-600 shrink-0" />
|
||||
<span className="truncate">YouTube Channel</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,121 +1,248 @@
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
BookOpen,
|
||||
Bot,
|
||||
Bus,
|
||||
Calendar,
|
||||
Code2,
|
||||
Trophy,
|
||||
Sparkles,
|
||||
ChevronRight
|
||||
ArrowRight, BookOpen, Bot, GraduationCap,
|
||||
CheckCircle, Zap, Shield, Trophy, Award, Cpu, Users, MapPin, Sparkles
|
||||
} from 'lucide-react';
|
||||
import SectionTitle from '@/components/SectionTitle/SectionTitle';
|
||||
import FeatureCard from '@/components/FeatureCard/FeatureCard';
|
||||
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
|
||||
import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
|
||||
import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
|
||||
import * as LucideIcons from 'lucide-react';
|
||||
|
||||
import LazyVideoHero from '@/components/LazyVideoHero/LazyVideoHero';
|
||||
|
||||
export default function Home() {
|
||||
const quickLaunchModules = [
|
||||
{ label: 'Bus Routes', path: '/bus-routes', icon: Bus, desc: 'Schedules & GPS' },
|
||||
{ label: 'Notes & PYQs', path: '/notes', icon: BookOpen, desc: 'Moodle Material' },
|
||||
{ label: 'Campus Chatbot', path: '/ai-assistant', icon: Bot, desc: 'AI Instant Q&A' },
|
||||
{ label: 'Student Clubs', path: '/events', icon: Calendar, desc: 'Clubs & Events' },
|
||||
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Top RIT Coders' },
|
||||
{ label: 'Dev Collab', path: '/collab', icon: Code2, desc: 'Co-Developers' },
|
||||
];
|
||||
const { scrollY } = useScroll();
|
||||
const heroOpacity = useTransform(scrollY, [0, 450], [1, 0]);
|
||||
const heroY = useTransform(scrollY, [0, 450], [0, -60]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full min-h-[calc(100vh-90px)] flex flex-col justify-between p-2 sm:p-6 lg:p-8 text-white group">
|
||||
{/* ─── Fixed Full-Screen Background Video (Spans Entire Laptop/Phone Frame) ─── */}
|
||||
<video
|
||||
src="/campus-video.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="auto"
|
||||
className="fixed inset-0 w-full h-full object-cover pointer-events-none z-0"
|
||||
style={{
|
||||
filter: 'contrast(1.05) brightness(0.85) saturate(1.05)',
|
||||
imageRendering: 'crisp-edges',
|
||||
}}
|
||||
/>
|
||||
<div className="relative bg-[#FAFAFA] min-h-screen overflow-hidden">
|
||||
{/* ─── Hero Section with IntersectionObserver Lazy Video ─────────────────── */}
|
||||
<LazyVideoHero>
|
||||
<section className="relative pt-20 pb-24 z-10">
|
||||
<motion.div
|
||||
className="container-custom relative z-20 flex flex-col items-center text-center px-4"
|
||||
style={{ opacity: heroOpacity, y: heroY }}
|
||||
>
|
||||
{/* Heading */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-medium tracking-wide mb-2"
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 2px 14px rgba(0,0,0,0.95)' }}
|
||||
>
|
||||
Welcome to
|
||||
</motion.h1>
|
||||
|
||||
{/* Fixed High-Contrast Dark Gradient Overlay across full viewport */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none z-0"
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.3) 45%, rgba(11, 15, 25, 0.85) 100%)',
|
||||
}}
|
||||
/>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
className="text-5xl md:text-7xl font-black leading-tight mb-6"
|
||||
style={{ color: '#FFFFFF', fontFamily: 'Playfair Display, serif', textShadow: '0 4px 24px rgba(0,0,0,0.95)' }}
|
||||
>
|
||||
RIT Freshers Hub
|
||||
</motion.h2>
|
||||
|
||||
{/* Top Branding Badge */}
|
||||
<div className="relative z-10 flex items-center justify-between gap-2">
|
||||
<div className="inline-flex items-center gap-1.5 sm:gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-slate-950/60 border border-white/20 text-[10px] sm:text-xs font-semibold text-white backdrop-blur-md shadow-xl truncate">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shrink-0" />
|
||||
<span className="truncate">Rajalakshmi Institute of Technology</span>
|
||||
</div>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
className="max-w-2xl text-slate-100 text-base md:text-lg font-medium leading-relaxed mb-8 drop-shadow-md"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
Your centralized gateway to campus life at Rajalakshmi Institute of Technology — academic notes, AI assistant, bus routes, faculty directory, and campus navigation.
|
||||
</motion.p>
|
||||
|
||||
<Link
|
||||
to="/raise"
|
||||
className="inline-flex items-center gap-1 sm:gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-gradient-to-r from-rose-500/90 to-pink-600/90 hover:from-rose-500 hover:to-pink-600 text-white text-[10px] sm:text-xs font-bold border border-white/25 backdrop-blur-md transition-all shadow-lg hover:scale-105 shrink-0"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-200" />
|
||||
<span>RAISE Incubator</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Center Main Hero Title */}
|
||||
<div className="relative z-10 max-w-4xl mx-auto text-center space-y-3 sm:space-y-4 my-auto py-8 sm:py-16">
|
||||
<h1
|
||||
className="text-4xl sm:text-6xl md:text-7xl font-black tracking-tight leading-tight text-white"
|
||||
style={{
|
||||
fontFamily: 'Playfair Display, Georgia, serif',
|
||||
color: '#FFFFFF',
|
||||
textShadow: '0 4px 35px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.95)'
|
||||
}}
|
||||
>
|
||||
RIT Freshers Hub
|
||||
</h1>
|
||||
<p
|
||||
className="text-xs sm:text-base md:text-lg text-slate-100 font-medium leading-relaxed max-w-2xl mx-auto px-2"
|
||||
style={{
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
textShadow: '0 2px 14px rgba(0,0,0,0.95)'
|
||||
}}
|
||||
>
|
||||
Your unified campus portal — academic notes, AI chatbot, live bus tracking, faculty directory & student developer hub.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom Ultra-Compact Ultra-Transparent Quick Launch Bar */}
|
||||
<div className="relative z-10 pt-2 sm:pt-4">
|
||||
<div className="text-center mb-2 sm:mb-3">
|
||||
<span className="text-[9px] sm:text-[10px] font-extrabold text-slate-200 uppercase tracking-widest bg-slate-950/70 px-3 py-1 rounded-full border border-white/20 backdrop-blur-md shadow-lg inline-block">
|
||||
Quick Launch Portal Modules
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-6 gap-1.5 sm:gap-3">
|
||||
{quickLaunchModules.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.label}
|
||||
to={item.path}
|
||||
className="flex flex-col items-center justify-center p-2 sm:p-3.5 rounded-xl sm:rounded-2xl bg-slate-950/50 hover:bg-slate-900/80 border border-white/20 hover:border-white/40 backdrop-blur-md text-white transition-all duration-200 cursor-pointer hover:scale-[1.04] shadow-xl group text-center"
|
||||
{/* Call to Actions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
className="flex flex-wrap justify-center gap-4"
|
||||
>
|
||||
<a href="#built-for-freshers">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(249,115,22,0.4)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-semibold text-sm cursor-pointer shadow-md"
|
||||
style={{
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
background: 'linear-gradient(135deg, #F97316, #FB923C)',
|
||||
}}
|
||||
>
|
||||
<div className="w-6 h-6 sm:w-8 sm:h-8 rounded-lg sm:rounded-xl bg-white/15 border border-white/25 flex items-center justify-center mb-1 sm:mb-1.5 group-hover:bg-[#C25E17] transition-colors shrink-0">
|
||||
<Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
|
||||
<BookOpen className="w-4 h-4" />
|
||||
Explore Hub
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.button>
|
||||
</a>
|
||||
|
||||
<Link to="/ai-assistant">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.2)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm border-2 border-white/40 text-white bg-black/30 backdrop-blur-md transition-all cursor-pointer shadow-2xs"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Bot className="w-4 h-4 text-[#F97316]" />
|
||||
Ask Assistant
|
||||
</motion.button>
|
||||
</Link>
|
||||
|
||||
<Link to="/raise">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.04, boxShadow: '0 10px 30px -5px rgba(233,30,99,0.5)' }}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm text-white bg-gradient-to-r from-rose-500 to-pink-600 border border-white/30 backdrop-blur-md transition-all cursor-pointer shadow-lg shadow-pink-500/20"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-amber-200" />
|
||||
Pitch your Idea - RAISE
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</LazyVideoHero>
|
||||
|
||||
{/* Sleek Stats Card Section */}
|
||||
<section className="relative z-30 -mt-6 px-4">
|
||||
<div className="container-custom max-w-5xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="rounded-3xl border border-[#E5E7EB] p-6 md:p-8 bg-white shadow-[0_20px_50px_-15px_rgba(0,0,0,0.06)]"
|
||||
>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 text-center">
|
||||
{[
|
||||
{ value: '20+', label: 'SPORTS', icon: Trophy },
|
||||
{ value: '100+', label: 'FACULTY', icon: GraduationCap },
|
||||
{ value: '18', label: 'CLUBS', icon: Award },
|
||||
{ value: '24/7', label: 'ASSISTANT', icon: Cpu },
|
||||
{ value: '5000+', label: 'STUDENTS', icon: Users },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="flex flex-col items-center justify-center p-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-[#FFF7ED] flex items-center justify-center mb-2.5">
|
||||
<stat.icon className="w-5 h-5 text-[#F97316]" />
|
||||
</div>
|
||||
<div
|
||||
className="text-2xl md:text-3xl font-black text-[#1E293B] mb-0.5"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
{stat.value}
|
||||
</div>
|
||||
<div
|
||||
className="text-[11px] font-bold tracking-wider text-[#94A3B8] uppercase"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] sm:text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="hidden sm:block text-[10px] text-slate-300/90 truncate max-w-full mt-0.5">
|
||||
{item.desc}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Features Section ─────────────────────────────────────────────────── */}
|
||||
<section id="built-for-freshers" className="section-padding relative z-20">
|
||||
<div className="container-custom">
|
||||
<SectionTitle
|
||||
tag="Everything You Need"
|
||||
title="Built for"
|
||||
highlight="RIT Freshers"
|
||||
subtitle="From notes to AI assistance — we've got everything you need to navigate campus life with confidence."
|
||||
/>
|
||||
|
||||
<StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{FEATURES.map((feature) => (
|
||||
<StaggerItem key={feature.id}>
|
||||
<FeatureCard feature={feature} />
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
|
||||
<section className="section-padding relative z-20 bg-white border-y border-[#E5E7EB]">
|
||||
<div className="container-custom">
|
||||
<SectionTitle
|
||||
tag="Navigate Campus"
|
||||
title="Explore"
|
||||
highlight="RIT Campus"
|
||||
subtitle="Find your way around campus — departments, labs, library, and key locations."
|
||||
/>
|
||||
|
||||
<AnimatedContainer>
|
||||
<div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden shadow-sm">
|
||||
{/* Map Teaser Header */}
|
||||
<div
|
||||
className="h-52 flex items-center justify-center relative overflow-hidden"
|
||||
style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-15"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(249,115,22,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.4) 1px, transparent 1px)',
|
||||
backgroundSize: '28px 28px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 text-center px-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#F97316]/20 border border-[#F97316]/30 flex items-center justify-center mx-auto mb-3">
|
||||
<MapPin className="w-6 h-6 text-[#F97316]" />
|
||||
</div>
|
||||
<h3 className="text-white text-lg font-bold mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
Interactive Campus Map
|
||||
</h3>
|
||||
<p className="text-slate-400 text-xs mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Locate all major campus blocks, labs, library & amenities.
|
||||
</p>
|
||||
<Link to="/campus">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-5 py-2 rounded-xl text-white text-xs font-semibold shadow-sm cursor-pointer"
|
||||
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
Open Full Map
|
||||
</motion.button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Nav Grid */}
|
||||
<div className="p-5 grid grid-cols-3 sm:grid-cols-7 gap-3 bg-[#FAFAFA]">
|
||||
{CAMPUS_LOCATIONS.map((loc) => {
|
||||
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
|
||||
return (
|
||||
<Link to="/campus" key={loc.id}>
|
||||
<motion.div
|
||||
whileHover={{ y: -3, backgroundColor: '#FFF7ED' }}
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all border border-transparent hover:border-[#FED7AA] bg-white shadow-2xs"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-xl bg-[#FFF7ED] flex items-center justify-center">
|
||||
{Icon && <Icon className="w-4.5 h-4.5 text-[#F97316]" />}
|
||||
</div>
|
||||
<span className="text-[11px] text-[#475569] text-center font-medium leading-tight" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
{loc.name}
|
||||
</span>
|
||||
</motion.div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedContainer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@ export default function LeetcodeLeaderboard() {
|
||||
RIT LeetCode Arena
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins">
|
||||
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316]">LeetCode Leaderboard</span>
|
||||
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-slate-500 max-w-2xl text-sm sm:text-base">
|
||||
Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.
|
||||
@@ -205,7 +205,7 @@ export default function LeetcodeLeaderboard() {
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E2E8F0]">
|
||||
<span className="text-xs font-semibold text-slate-500 flex items-center gap-1.5">
|
||||
<User className="w-4 h-4 text-orange-400" /> Active Coders
|
||||
<User className="w-4 h-4 text-indigo-500" /> Active Coders
|
||||
</span>
|
||||
<p className="text-xl font-bold text-[#1E293B] mt-1">
|
||||
{profiles.length}
|
||||
|
||||
@@ -39,7 +39,7 @@ const SUBJECTS_BY_SEM: Record<number, string[]> = {
|
||||
|
||||
const TYPE_COLORS: Record<string, { bg: string; text: string; icon: React.ComponentType<any> }> = {
|
||||
notes: { bg: '#EFF6FF', text: '#3B82F6', icon: BookOpen },
|
||||
pyq: { bg: '#EEF2FF', text: '#6366F1', icon: FileText },
|
||||
pyq: { bg: '#FFF7ED', text: '#F97316', icon: FileText },
|
||||
syllabus: { bg: '#ECFDF5', text: '#10B981', icon: ScrollText },
|
||||
assignment: { bg: '#FDF2F8', text: '#EC4899', icon: BookMarked },
|
||||
};
|
||||
@@ -1421,7 +1421,7 @@ export default function Notes() {
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Notes &{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #6366F1, #4F46E5)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
PYQs
|
||||
</span>
|
||||
</h1>
|
||||
@@ -1994,7 +1994,7 @@ export default function Notes() {
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-xl bg-slate-900 border border-slate-700 flex items-center justify-center text-orange-400">
|
||||
<div className="w-8 h-8 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-600">
|
||||
<FileText className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
|
||||
@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
domain: "AI-based Systems",
|
||||
description: "Cognitive educational platforms providing personalised student learning paths.",
|
||||
remarks: "Testing with users",
|
||||
color: "bg-[#C25E17]"
|
||||
color: "bg-blue-500"
|
||||
},
|
||||
{
|
||||
name: "Innsole",
|
||||
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
domain: "Hardware & Health",
|
||||
description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
|
||||
remarks: "Testing with users",
|
||||
color: "bg-[#C25E17]"
|
||||
color: "bg-blue-500"
|
||||
},
|
||||
|
||||
// Prototype
|
||||
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
const getStageIcon = (stage: string) => {
|
||||
switch(stage) {
|
||||
case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
|
||||
case 'mvp': return <Box className="w-4 h-4 text-orange-600" />;
|
||||
case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
|
||||
case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
|
||||
case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
|
||||
default: return <HelpCircle className="w-4 h-4" />;
|
||||
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
|
||||
startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
|
||||
startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
|
||||
startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
|
||||
startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
|
||||
'bg-purple-100 text-purple-800'
|
||||
}`}>
|
||||
|
||||
@@ -56,7 +56,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
domain: "AI-based Systems",
|
||||
description: "Cognitive educational platforms providing personalised student learning paths.",
|
||||
remarks: "Testing with users",
|
||||
color: "bg-[#C25E17]"
|
||||
color: "bg-blue-500"
|
||||
},
|
||||
{
|
||||
name: "Innsole",
|
||||
@@ -64,7 +64,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
domain: "Hardware & Health",
|
||||
description: "Smart footwear soles embedded with sensor arrays to monitor athletic gait and posture.",
|
||||
remarks: "Testing with users",
|
||||
color: "bg-[#C25E17]"
|
||||
color: "bg-blue-500"
|
||||
},
|
||||
|
||||
// Prototype
|
||||
@@ -207,7 +207,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
const getStageIcon = (stage: string) => {
|
||||
switch(stage) {
|
||||
case 'commercialization': return <TrendingUp className="w-4 h-4 text-emerald-600" />;
|
||||
case 'mvp': return <Box className="w-4 h-4 text-orange-600" />;
|
||||
case 'mvp': return <Box className="w-4 h-4 text-blue-600" />;
|
||||
case 'prototype': return <Layers className="w-4 h-4 text-amber-600" />;
|
||||
case 'idea': return <Sparkles className="w-4 h-4 text-purple-600" />;
|
||||
default: return <HelpCircle className="w-4 h-4" />;
|
||||
@@ -277,7 +277,7 @@ export const PortfolioShowcase: React.FC = () => {
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider ${
|
||||
startup.stage === 'commercialization' ? 'bg-emerald-100 text-emerald-800' :
|
||||
startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
|
||||
startup.stage === 'mvp' ? 'bg-blue-100 text-blue-800' :
|
||||
startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
|
||||
'bg-purple-100 text-purple-800'
|
||||
}`}>
|
||||
|
||||
@@ -684,13 +684,13 @@ export default function Toolkit() {
|
||||
<div className="container-custom">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
|
||||
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
<Link to="/" className="hover:text-[#6366F1]">Home</Link>
|
||||
<Link to="/" className="hover:text-[#F97316]">Home</Link>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span className="text-[#6366F1]">Student Toolkit</span>
|
||||
<span className="text-[#F97316]">Student Toolkit</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||
Student{' '}
|
||||
<span style={{ background: 'linear-gradient(135deg, #6366F1, #4F46E5)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
Toolkit
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
Reference in New Issue
Block a user