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

ui enhancement,topdown menu
Some checks failed
Deploy RIT Freshers Hub to VPS / Deploy to Live VPS (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Shanmuga Krishnan S M
2026-08-14 09:43:11 +05:30
parent 68e8f6e002
commit 122e839d36
16 changed files with 607 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Auth/GoogleAuthModal.tsx
View File

@@ -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-violet-900/30 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" />
{/* Close Button */}
<button

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

@@ -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 } from 'lucide-react';
import { Mail, Phone, Building2, User, X, BookOpen, ChevronRight, Monitor, Command, GraduationCap, Briefcase, Microscope, Clock, MapPin } from 'lucide-react';
import type { Faculty } from '@/types';
interface FacultyCardProps {
@@ -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-[#1E1B4B] transition-colors shrink-0">
<Phone className="w-4 h-4 text-violet-300 group-hover:text-white transition-colors" />
<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>
<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>
@@ -225,13 +225,13 @@ export default function FacultyCard({ faculty }: FacultyCardProps) {
<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-violet-300" />
<BookOpen className="w-5 h-5 text-orange-400" />
</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-slate-900/40 border border-slate-800">
<p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>Subjects Handling</p>
<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>
<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-slate-900/40 border border-slate-800">
<p className="text-xs font-bold text-violet-300 uppercase tracking-wider mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Students Guided</p>
<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="flex gap-8">
<div className="flex flex-col">
<span className="text-2xl font-bold text-[#1E293B]">{faculty.studentsGuided.ug}</span>
@@ -250,17 +250,45 @@ 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>
<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>
{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>
</div>
)}
</div>
</div>
{/* Section 3: Achievements (Render only if present) */}
{/* 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) */}
{(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">
@@ -310,10 +338,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-slate-900/40 border border-slate-800 flex items-start gap-4">
<Building2 className="w-6 h-6 text-violet-300 shrink-0 mt-0.5" />
<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-violet-300 uppercase tracking-wider mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Office Location</p>
<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>

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

@@ -9,7 +9,7 @@ export default function Footer() {
{/* 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-[#1E1B4B] border border-violet-800/40 text-white shadow-md">
<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>
@@ -29,16 +29,16 @@ export default function Footer() {
</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-violet-300" />
<MapPin className="w-4 h-4 mt-0.5 shrink-0 text-orange-400" />
<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-violet-300" />
<a href="tel:+914423422890" className="hover:text-violet-300 transition-colors">+91 44 2342 2890</a>
<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>
<li className="flex items-center gap-2.5 text-slate-400">
<Mail className="w-4 h-4 shrink-0 text-violet-300" />
<a href="mailto:info@rit.ac.in" className="hover:text-violet-300 transition-colors">info@rit.ac.in</a>
<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>
</ul>
</div>

663
src/components/Header/Header.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation, Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
Search,
Bell,
@@ -13,12 +14,22 @@ import {
Code2,
Trophy,
Bot,
LayoutDashboard,
Wrench,
MapPin,
MessageSquare,
Rocket,
GitBranch,
LogIn,
LogOut,
ChevronRight,
Grid,
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';
import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
interface HeaderProps {
onToggleSidebar: () => void;
onToggleSidebar?: () => void;
}
interface NotificationItem {
@@ -30,13 +41,30 @@ interface NotificationItem {
type: 'academic' | 'dev' | 'campus' | 'bus';
}
export default function Header({ onToggleSidebar }: HeaderProps) {
interface NavItem {
label: string;
path: string;
icon: any;
desc?: string;
highlight?: boolean;
}
interface NavGroup {
title: string;
items: NavItem[];
}
export default function Header({}: HeaderProps) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [isSearchOpen, setIsSearchOpen] = useState(false);
const [isNotifOpen, setIsNotifOpen] = useState(false);
const [currentDate, setCurrentDate] = useState('');
const navigate = useNavigate();
const { user, isAuthenticated, isVerifiedStudent } = useAuth();
const location = useLocation();
const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle, logout } = useAuth();
const notifRef = useRef<HTMLDivElement>(null);
const searchRef = useRef<HTMLDivElement>(null);
@@ -77,6 +105,41 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
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 & Tools' },
{ label: 'RIT Chatbot', path: '/ai-assistant', icon: Bot, desc: 'AI Campus Assistant' },
],
},
{
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 Contact Hours' },
{ label: 'Student Clubs', path: '/events', icon: ClubIcon, desc: 'Societies & Leads' },
],
},
{
title: 'COMMUNITY & DEV',
items: [
{ label: 'Freshers Q&A', path: '/community', icon: MessageSquare, desc: 'Peer Advice & Q&A' },
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2, desc: 'Find Project Teammates', highlight: true },
{ label: 'LeetCode Board', path: '/leetcode', icon: Trophy, desc: 'Coding Leaderboard' },
{ label: 'RAISE Incubator', path: '/raise', icon: Rocket, desc: 'Startup Ventures' },
],
},
];
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', {
@@ -88,13 +151,18 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
setCurrentDate(formatted);
}, []);
// Listen for ⌘K shortcut
// 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') {
setIsMobileMenuOpen(false);
setIsSearchOpen(false);
setIsNotifOpen(false);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
@@ -114,6 +182,11 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Auto close mobile drawer on route change
useEffect(() => {
setIsMobileMenuOpen(false);
}, [location.pathname, location.search]);
const markAllAsRead = () => {
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
};
@@ -176,229 +249,379 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
};
return (
<header className="sticky top-0 z-30 w-full bg-[#0F172A]/90 backdrop-blur-md border-b border-slate-800/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-md text-white">
<div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
{/* Mobile Toggle */}
<button
onClick={onToggleSidebar}
className="lg:hidden p-2 rounded-xl bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 transition-colors cursor-pointer shrink-0 border border-slate-700/60"
title="Toggle Navigation Menu"
>
<Menu className="w-5 h-5" />
</button>
<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-8 py-2.5 shadow-md text-white">
<div className="max-w-7xl mx-auto flex items-center justify-between gap-3">
{/* Left Side: Brand Logo */}
<Link to="/" className="flex items-center gap-2.5 group shrink-0">
<div className="p-1.5 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 sm:text-lg tracking-tight truncate leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
RIT Portal
</span>
<span className="text-[9px] sm:text-[10px] text-orange-400 font-medium tracking-wider uppercase truncate" style={{ fontFamily: 'Inter, sans-serif' }}>
Freshers Hub
</span>
</div>
</Link>
{/* Global Interactive Search Input Container */}
<div className="relative min-w-0 flex-1 max-w-[210px] xs:max-w-[260px] sm:max-w-xs md:max-w-md" ref={searchRef}>
<div
onClick={() => setIsSearchOpen(true)}
className="relative w-full cursor-text"
{/* Center: Desktop Top Navigation Links Strip */}
<nav
className="hidden lg:flex items-center gap-1 xl:gap-1.5 overflow-x-auto max-w-2xl shrink-0 [&::-webkit-scrollbar]:hidden"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<input
type="text"
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setIsSearchOpen(true);
}}
onFocus={() => setIsSearchOpen(true)}
placeholder="Search notes, faculty, bus routes..."
className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-900/90 hover:bg-slate-900 focus:bg-slate-950 border border-slate-800 focus:border-violet-500/50 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-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-300 bg-slate-800 border border-slate-700 px-1.5 py-0.5 rounded-md shadow-2xs">
⌘K
</span>
</div>
{/* Search Live Results Dropdown Overlay */}
{isSearchOpen && (
<div className="absolute top-full left-0 mt-2 w-full sm:w-[420px] 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"
{navGroups.flatMap(g => g.items).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-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' }}
>
<X className="w-3.5 h-3.5" />
<Icon className={`w-3.5 h-3.5 ${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.5 shrink-0">
{/* Global Search Input */}
<div className="relative min-w-0 w-28 xs:w-36 sm:w-44 md:w-52" 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-10 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-[400px] 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-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
<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="hidden sm:flex items-center gap-1.5 sm:gap-2 pl-1.5 sm:pl-2 border-l border-slate-800">
{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"
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 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>
<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-[#1E1B4B] text-violet-300 flex items-center justify-center shrink-0 border border-violet-800/40">
<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-violet-300 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>
</div>
{/* Right Header Status Bar */}
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
{/* Date Display Badge */}
<div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900/90 text-slate-300 text-xs font-medium border border-slate-800">
<Calendar className="w-3.5 h-3.5 text-violet-400" />
<span>{currentDate}</span>
</div>
{/* Functional 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-violet-400 ring-2 ring-[#0F172A]" />
)}
</button>
{/* Notifications Panel Dropdown */}
{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-violet-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-violet-400 hover:text-violet-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 Quick Badge (If Logged In) */}
{isAuthenticated && user && (
<div className="flex items-center gap-2 pl-2 border-l border-slate-800">
{user.pictureUrl ? (
<img
src={user.pictureUrl}
alt={user.name}
className="w-8 h-8 rounded-full border border-slate-700 object-cover"
referrerPolicy="no-referrer"
/>
) : (
<div className="w-8 h-8 rounded-full bg-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center border border-violet-800/40">
{user.name.charAt(0)}
</div>
<button
onClick={loginWithGoogle}
className="hidden sm:flex items-center gap-1.5 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"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogIn className="w-3.5 h-3.5 shrink-0" />
<span>Sign In</span>
</button>
)}
<div className="hidden xl:flex flex-col text-left">
<span className="text-xs font-bold text-white leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
{user.name}
</span>
<span className="text-[10px] text-violet-300 font-semibold">
{isVerifiedStudent ? 'Verified Student' : 'RIT Account'}
</span>
</div>
</div>
)}
<button
onClick={() => setIsMobileMenuOpen((prev) => !prev)}
className="lg:hidden p-1.5 sm:p-2 rounded-xl bg-slate-900/90 hover:bg-slate-800 text-slate-200 border border-slate-800 flex items-center gap-1.5 transition-colors cursor-pointer"
title="Toggle Menu"
>
{isMobileMenuOpen ? (
<X className="w-4 h-4 text-orange-400" />
) : (
<Grid className="w-4 h-4 text-orange-400" />
)}
<span className="text-xs font-bold text-slate-200">Menu</span>
</button>
</div>
</div>
{/* ─── SLEEK, MINIMAL & COMPACT TOP DROPDOWN MENU (MOBILE ONLY) ─── */}
<AnimatePresence>
{isMobileMenuOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setIsMobileMenuOpen(false)}
className="fixed inset-0 z-40 bg-black/40 backdrop-blur-xs lg:hidden"
/>
{/* Compact Top Dropdown Panel (Only ~220px High, No Screen Hogging!) */}
<motion.div
initial={{ opacity: 0, y: -10, scaleY: 0.96 }}
animate={{ opacity: 1, y: 0, scaleY: 1 }}
exit={{ opacity: 0, y: -10, scaleY: 0.96 }}
transition={{ duration: 0.18, ease: 'easeOut' }}
className="absolute top-full inset-x-0 z-50 bg-[#0F172A]/98 backdrop-blur-2xl border-b border-slate-800 shadow-2xl p-3 rounded-b-2xl lg:hidden max-h-[65vh] overflow-y-auto custom-scrollbar"
>
<div className="max-w-4xl mx-auto space-y-2.5">
{/* Header Category Header */}
<div className="flex items-center justify-between px-1 pb-1 border-b border-slate-800/80">
<span className="text-[10px] font-extrabold text-orange-400 uppercase tracking-wider">
Quick Navigation Modules
</span>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="text-[10px] font-semibold text-slate-400 hover:text-white"
>
Close ✕
</button>
</div>
{/* Compact 2-Column Pill Grid */}
<div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-1.5">
{navGroups.flatMap(g => g.items).map((item) => {
const isActive = checkIsActive(item.path);
const Icon = item.icon;
return (
<Link
key={item.path}
to={item.path}
onClick={() => setIsMobileMenuOpen(false)}
className={`flex items-center gap-2 p-2 rounded-xl text-xs font-medium transition-all ${
isActive
? 'bg-gradient-to-r from-[#C25E17] to-[#EA580C] text-white font-bold shadow-xs border border-orange-400/40'
: 'bg-slate-900/80 hover:bg-slate-800 text-slate-200 border border-slate-800'
}`}
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<div className={`p-1 rounded-lg shrink-0 ${isActive ? 'bg-white/20 text-white' : 'text-orange-400 bg-slate-800'}`}>
<Icon className="w-3.5 h-3.5" />
</div>
<span className="truncate">{item.label}</span>
</Link>
);
})}
</div>
{/* Compact Footer CTA */}
<div className="pt-1.5 flex items-center justify-between gap-2 border-t border-slate-800/80">
<Link
to="/collab"
onClick={() => setIsMobileMenuOpen(false)}
className="flex-1 flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-xl bg-gradient-to-r from-[#C25E17] via-[#EA580C] to-[#F97316] text-white text-[11px] font-bold shadow-sm"
>
<GitBranch className="w-3.5 h-3.5" />
<span>Dev Collab Hub →</span>
</Link>
{!isAuthenticated && (
<button
onClick={() => {
setIsMobileMenuOpen(false);
loginWithGoogle();
}}
className="py-1.5 px-3 rounded-xl bg-slate-800 text-slate-200 hover:text-white text-[11px] font-bold border border-slate-700"
>
Sign In
</button>
)}
</div>
</div>
</motion.div>
</>
)}
</AnimatePresence>
</header>
);
}

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

@@ -167,7 +167,7 @@ export default function Sidebar({
{!isCollapsed && (
<Link
to="/collab"
className="w-full flex items-center justify-between p-3 rounded-2xl bg-gradient-to-r from-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white group transition-all duration-200 shadow-md shadow-slate-950/50"
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">
@@ -177,10 +177,10 @@ export default function Sidebar({
<span className="text-xs font-bold leading-tight truncate" style={{ fontFamily: 'Poppins, sans-serif' }}>
Dev Collab Hub
</span>
<span className="text-[10px] text-violet-200/90 truncate">Co-Developer Projects</span>
<span className="text-[10px] text-orange-100/90 truncate">Co-Developer Projects</span>
</div>
</div>
<ChevronRight className="w-4 h-4 text-violet-200 group-hover:translate-x-0.5 transition-transform" />
<ChevronRight className="w-4 h-4 text-orange-100 group-hover:translate-x-0.5 transition-transform" />
</Link>
)}
@@ -210,7 +210,7 @@ export default function Sidebar({
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-[#1E1B4B] to-[#2E1065] text-white shadow-sm border border-violet-800/50'
? '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' }}
@@ -225,7 +225,7 @@ export default function Sidebar({
</div>
{!isCollapsed && item.highlight && !isActive && (
<span className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" />
<span className="w-2 h-2 rounded-full bg-orange-400 animate-pulse" />
)}
</Link>
);
@@ -244,11 +244,11 @@ export default function Sidebar({
<img
src={user.pictureUrl}
alt={user.name}
className="w-8 h-8 rounded-xl border border-violet-800/40 object-cover shrink-0"
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-[#1E1B4B] text-white font-bold text-xs flex items-center justify-center shrink-0 border border-violet-800/40">
<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>
)}
@@ -280,7 +280,7 @@ export default function Sidebar({
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-[#1E1B4B] via-[#2E1065] to-[#1E1B4B] hover:from-[#2E1065] hover:to-[#3B0764] border border-violet-800/40 text-white font-bold text-xs transition-all cursor-pointer shadow-md`}
} 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" />

40
src/index.css
View File

@@ -3,20 +3,20 @@
@import "tailwindcss";
@theme {
--color-primary: #1E1B4B;
--color-primary-light: #2E1065;
--color-primary-dark: #0A0D16;
--color-primary-50: #0B0F19;
--color-primary-100: #131722;
--color-primary-200: #1E1B4B;
--color-secondary: #2E1065;
--color-primary: #F97316;
--color-primary-light: #FB923C;
--color-primary-dark: #C25E17;
--color-primary-50: #FFF7ED;
--color-primary-100: #FFEDD5;
--color-primary-200: #FED7AA;
--color-secondary: #EA580C;
--color-background: #FAFAFA;
--color-surface: #FFFFFF;
--color-border: #E5E7EB;
--color-heading: #1E293B;
--color-body: #475569;
--color-muted: #94A3B8;
--color-accent: #131722;
--color-accent: #C25E17;
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
@@ -70,16 +70,16 @@ body {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #1E1B4B;
background: #F97316;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #2E1065;
background: #EA580C;
}
/* Selection */
::selection {
background-color: rgba(30, 27, 75, 0.4);
background-color: rgba(249, 115, 22, 0.35);
color: #FFFFFF;
}
@@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
/* Focus ring */
:focus-visible {
outline: 2px solid #1E1B4B;
outline: 2px solid #F97316;
outline-offset: 2px;
}
@@ -182,7 +182,7 @@ h1, h2, h3, h4, h5, h6 {
/* Gradient text */
.gradient-text {
background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
background: linear-gradient(135deg, #C25E17, #EA580C, #F97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -191,16 +191,16 @@ h1, h2, h3, h4, h5, h6 {
/* Primary button */
.btn-primary {
font-family: var(--font-button);
background: linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065);
background: linear-gradient(135deg, #C25E17, #EA580C);
color: white;
border: 1px solid rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
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(15, 23, 42, 0.5);
box-shadow: 0 4px 15px rgba(194, 94, 23, 0.4);
display: inline-flex;
align-items: center;
gap: 8px;
@@ -209,8 +209,8 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(46, 16, 101, 0.6);
background: linear-gradient(135deg, #1E1B4B, #2E1065, #3B0764);
box-shadow: 0 8px 25px rgba(234, 88, 12, 0.5);
background: linear-gradient(135deg, #EA580C, #F97316);
}
.btn-primary:active {
@@ -236,8 +236,8 @@ h1, h2, h3, h4, h5, h6 {
}
.btn-ghost:hover {
border-color: #2E1065;
color: #2E1065;
border-color: #F97316;
color: #EA580C;
transform: translateY(-2px);
}

37
src/layouts/MainLayout.tsx
View File

@@ -1,7 +1,5 @@
import { useState, useEffect } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import Sidebar from '@/components/Sidebar/Sidebar';
import Header from '@/components/Header/Header';
import Footer from '@/components/Footer/Footer';
@@ -12,40 +10,15 @@ const pageVariants = {
};
export default function MainLayout() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
return localStorage.getItem('rit_sidebar_collapsed') === 'true';
});
const location = useLocation();
const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
const toggleSidebarCollapse = () => {
setIsSidebarCollapsed((prev) => {
const next = !prev;
localStorage.setItem('rit_sidebar_collapsed', String(next));
return next;
});
};
return (
<div className="min-h-screen w-full max-w-full bg-[#F8FAFC] flex flex-col lg:flex-row font-sans selection:bg-purple-700 selection:text-white overflow-x-hidden">
{/* Left Sidebar Navigation */}
<Sidebar
isOpen={isSidebarOpen}
onToggle={toggleSidebar}
isCollapsed={isSidebarCollapsed}
onToggleCollapse={toggleSidebarCollapse}
/>
{/* Main Right Viewport Wrapper */}
<div
className={`flex-1 flex flex-col min-w-0 w-full transition-all duration-300 ${
isSidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64 xl:pl-72'
}`}
>
{/* Top Header */}
<Header onToggleSidebar={toggleSidebar} />
<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">

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

@@ -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: '#1E1B4B', bg: 'bg-slate-900/80', text: 'text-violet-300', border: 'border-slate-800' },
{ id: 'b-block', label: 'B Block', color: '#2E1065', bg: 'bg-slate-900/60', text: 'text-violet-300', border: 'border-slate-800' },
{ id: 'c-block', label: 'C Block', color: '#3B0764', bg: 'bg-slate-900/40', text: 'text-violet-300', border: 'border-slate-800' },
{ 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: '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' },

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

@@ -534,7 +534,7 @@ export default function Community() {
<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-violet-400" title="Verified Senior Helper">
<span className="inline-flex text-orange-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>

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

@@ -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-violet-400">Home</Link>
<Link to="/" className="hover:text-orange-500">Home</Link>
<ChevronRight className="w-3 h-3" />
<span className="text-violet-400">Developer Collab Hub</span>
<span className="text-orange-500 font-medium">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-slate-700 text-violet-300 text-xs font-semibold mb-3">
<Code2 className="w-4 h-4 text-violet-300" /> RIT Developers Environment
<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>
<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, #0F172A, #1E1B4B, #2E1065)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
<span style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C, #F97316)', 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-slate-900/25 shrink-0 cursor-pointer border border-violet-800/40"
style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', 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/20 shrink-0 cursor-pointer border border-white/20"
style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)', fontFamily: 'Poppins, sans-serif' }}
>
{isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
{isVerifiedStudent && <ShieldCheck className="w-4 h-4 text-amber-200" />}
<Plus className="w-4.5 h-4.5" />
Post Collaboration Request
</motion.button>

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

@@ -217,23 +217,23 @@ export default function Events() {
<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, #0F172A, #1E1B4B, #2E1065)' }}
style={{ background: 'linear-gradient(135deg, #C25E17, #EA580C)' }}
>
{/* 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, #2E1065, transparent)' }}
style={{ background: 'radial-gradient(circle, #EA580C, 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-violet-300 text-xs font-semibold mb-3 border border-violet-900/40">
<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">
<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-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<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>
</div>
@@ -242,10 +242,10 @@ 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-violet-800/40"
style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', 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 border border-white/20"
style={{ background: 'linear-gradient(135deg, #EA580C, #F97316)', fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-4 h-4 text-violet-200" />
<Sparkles className="w-4 h-4 text-amber-200" />
<span>Find My Ideal Club</span>
<ArrowRight className="w-4 h-4" />
</motion.button>
@@ -262,61 +262,58 @@ 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] || '#1E1B4B';
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#C25E17';
const isLiked = likedClubs.has(club.id);
const likesCount = likesMap[club.id] || 0;
return (
<motion.div
whileHover={{ y: -4 }}
layout
whileHover={{ y: -6 }}
onClick={() => setSelectedClub(club)}
className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-slate-800 transition-all flex flex-col justify-between h-full group"
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
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"
>
<div>
{/* Top Row: Tech Icon / Club Logo & Interactive Heart Like Button */}
<div className="flex items-center justify-between mb-3">
{/* Top Row: Club Icon & Like Button */}
<div className="flex items-start justify-between mb-4">
{club.logoUrl ? (
<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">
<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">
<img src={club.logoUrl} alt={club.name} className="w-full h-full object-cover rounded-full" />
</div>
) : (
<div
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)`,
}}
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)` }}
>
<IconComponent className="w-5 h-5 text-white" />
<IconComponent className="w-6 h-6 text-white" />
</div>
)}
{/* 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>
<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>
</div>
{/* Club Title & Description */}
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
{/* 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.name}
</h3>
<p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
<p className="text-xs text-[#64748B] line-clamp-2 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
{club.description}
</p>
</div>
{/* Bottom Row: Category Tag & View Details Button */}
@@ -327,7 +324,7 @@ 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-[#1E1B4B] hover:bg-[#2E1065] transition-colors"
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' }}
>
View Details
@@ -390,13 +387,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-[#1E1B4B] transition-all duration-300 rounded-full"
className="h-full bg-[#C25E17] 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-[#1E1B4B]">
<div className="flex items-center gap-2 mb-2 text-[#C25E17]">
<Compass className="w-5 h-5" />
<span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
</div>
@@ -410,10 +407,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-slate-800 hover:bg-slate-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-orange-500 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-[#1E1B4B] group-hover:translate-x-1 transition-all" />
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#C25E17] group-hover:translate-x-1 transition-all" />
</button>
))}
</div>
@@ -431,7 +428,7 @@ export default function Events() {
/* Results Screen */
<div>
<div className="text-center mb-6">
<div className="w-14 h-14 rounded-2xl bg-slate-900 text-violet-300 flex items-center justify-center mx-auto mb-3">
<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">
<CheckCircle2 className="w-8 h-8" />
</div>
<h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
@@ -444,7 +441,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] || '#1E1B4B';
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#C25E17';
const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
return (
@@ -454,7 +451,7 @@ export default function Events() {
setIsQuizOpen(false);
setSelectedClub(item.club);
}}
className="p-4 rounded-2xl border border-slate-200 hover:border-slate-800 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-orange-500 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 ? (
@@ -495,7 +492,7 @@ export default function Events() {
</button>
<button
onClick={() => setIsQuizOpen(false)}
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#1E1B4B] hover:bg-[#2E1065] transition-all cursor-pointer"
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#C25E17] hover:bg-[#EA580C] transition-all cursor-pointer"
>
Explore All Clubs
</button>
@@ -529,7 +526,7 @@ export default function Events() {
{/* Modal Header */}
{(() => {
const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#1E1B4B';
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#C25E17';
const isLiked = likedClubs.has(selectedClub.id);
const likesCount = likesMap[selectedClub.id] || 0;
@@ -580,9 +577,9 @@ export default function Events() {
})()}
{/* Club Detailed Description */}
<div className="mb-5 bg-slate-900/40 border border-slate-800 rounded-2xl p-4.5">
<div className="flex items-center gap-2 text-xs font-bold text-violet-300 uppercase tracking-wider mb-2">
<Info className="w-4 h-4 text-violet-300" />
<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" />
<span>About the Club</span>
</div>
<p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -593,22 +590,22 @@ export default function Events() {
{/* Leadership & Contact Information */}
<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-[#1E1B4B] to-[#2E1065] text-white flex items-center justify-center shadow-xs shrink-0">
<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">
<UserCheck className="w-5 h-5 text-white" />
</div>
<div>
<span className="text-[11px] text-violet-300 font-semibold block">President / Student Lead</span>
<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>
</div>
</div>
{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-[#2E1065] to-[#3B0764] text-white flex items-center justify-center shadow-xs shrink-0">
<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">
<Users className="w-5 h-5 text-white" />
</div>
<div>
<span className="text-[11px] text-violet-300 font-semibold block">Vice President</span>
<span className="text-[11px] text-orange-300 font-semibold block">Vice President</span>
<span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
</div>
</div>
@@ -618,7 +615,7 @@ export default function Events() {
{/* Community & Social Links */}
<div className="mb-6 bg-slate-900/40 border border-slate-800 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-violet-300 uppercase tracking-wider">
<div className="flex items-center gap-2 text-xs font-bold text-orange-400 uppercase tracking-wider">
<ExternalLink className="w-3.5 h-3.5" />
<span>Community & Social Links</span>
</div>

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

@@ -102,7 +102,7 @@ export default function Home() {
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"
>
<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-[#1E1B4B] transition-colors shrink-0">
<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" />
</div>
<span className="text-[10px] sm:text-xs font-bold truncate max-w-full leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>

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

@@ -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-[#0F172A] via-[#1E1B4B] to-[#2E1065]">LeetCode Leaderboard</span>
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#C25E17] via-[#EA580C] 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-violet-400" /> Active Coders
<User className="w-4 h-4 text-orange-400" /> Active Coders
</span>
<p className="text-xl font-bold text-[#1E293B] mt-1">
{profiles.length}

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

@@ -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-violet-300">
<div className="w-8 h-8 rounded-xl bg-slate-900 border border-slate-700 flex items-center justify-center text-orange-400">
<FileText className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>

8
src/pages/Raise/components/PortfolioShowcase.tsx
View File

@@ -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-[#1E1B4B]"
color: "bg-[#C25E17]"
},
{
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-[#1E1B4B]"
color: "bg-[#C25E17]"
},
// 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-violet-300" />;
case 'mvp': return <Box className="w-4 h-4 text-orange-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-slate-900 text-violet-300' :
startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
'bg-purple-100 text-purple-800'
}`}>

8
src/pages/RaiseIncubator/components/PortfolioShowcase.tsx
View File

@@ -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-[#1E1B4B]"
color: "bg-[#C25E17]"
},
{
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-[#1E1B4B]"
color: "bg-[#C25E17]"
},
// 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-violet-300" />;
case 'mvp': return <Box className="w-4 h-4 text-orange-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-slate-900 text-violet-300' :
startup.stage === 'mvp' ? 'bg-orange-100 text-orange-800' :
startup.stage === 'prototype' ? 'bg-amber-100 text-amber-800' :
'bg-purple-100 text-purple-800'
}`}>