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

style: complete orange theme removal across footer, events, and dev collab; optimize mobile layout
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-13 14:22:21 +05:30
parent dad13527c6
commit bede7ca962
4 changed files with 66 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,40 +15,37 @@ const quickLinks = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-[#1E293B] text-white"> <footer className="bg-[#0F172A] text-white border-t border-slate-800">
{/* CTA Banner */} {/* CTA Banner - Enterprise Deep Indigo */}
<div style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }} className="py-12"> <div className="bg-gradient-to-r from-indigo-700 via-indigo-800 to-purple-900 py-12 border-b border-indigo-500/20">
<div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6"> <div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6 px-4">
<div> <div>
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}> <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
Ready to explore RIT? Ready to explore RIT?
</h3> </h3>
<p className="text-orange-100 mt-1" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-indigo-100/90 mt-1 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
Everything a fresher needs — all in one place. Everything a fresher needs — all in one place.
</p> </p>
</div> </div>
<Link <Link
to="/ai-assistant" 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" className="flex items-center gap-2 bg-white hover:bg-slate-100 text-indigo-950 px-6 py-3 rounded-xl font-bold transition-all shadow-md hover:scale-105"
style={{ fontFamily: 'Poppins, sans-serif' }} style={{ fontFamily: 'Poppins, sans-serif' }}
> >
Ask Chatbot <span>Ask Chatbot</span>
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4 text-indigo-700" />
</Link> </Link>
</div> </div>
</div> </div>
{/* Main Footer */} {/* Main Footer */}
<div className="container-custom py-14"> <div className="container-custom py-12 px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-10"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
{/* Brand */} {/* Brand */}
<div> <div>
<div className="flex items-center gap-2.5 mb-4"> <div className="flex items-center gap-2.5 mb-4">
<div <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-indigo-600 border border-indigo-400/30 text-white shadow-md">
className="w-10 h-10 rounded-xl flex items-center justify-center" <GraduationCap className="w-5 h-5" />
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
>
<GraduationCap className="w-5 h-5 text-white" />
</div> </div>
<div> <div>
<div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div> <div className="font-bold text-white text-sm" style={{ fontFamily: 'Poppins, sans-serif' }}>RIT Freshers Hub</div>
@@ -70,10 +67,10 @@ export default function Footer() {
<Link <Link
key={link.path} key={link.path}
to={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" className="text-slate-400 hover:text-indigo-400 text-sm transition-colors flex items-center gap-1.5 group py-1"
style={{ fontFamily: 'Inter, sans-serif' }} style={{ fontFamily: 'Inter, sans-serif' }}
> >
<span className="w-1 h-1 rounded-full bg-[#F97316] opacity-0 group-hover:opacity-100 transition-opacity" /> <span className="w-1 h-1 rounded-full bg-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity" />
{link.label} {link.label}
</Link> </Link>
))} ))}
@@ -87,35 +84,24 @@ export default function Footer() {
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-start gap-3 text-slate-400 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}> <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]" /> <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-indigo-400" />
<span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span> <span>Rajalakshmi Institute of Technology,<br />Kuthambakkam, Chennai - 600 124</span>
</li> </li>
<li className="flex items-center gap-3 text-slate-400 text-sm"> <li className="flex items-center gap-3 text-slate-400 text-sm">
<Phone className="w-4 h-4 shrink-0 text-[#F97316]" /> <Phone className="w-4 h-4 shrink-0 text-indigo-400" />
<a href="tel:+914423422890" className="hover:text-[#F97316] transition-colors">+91 44 2342 2890</a> <a href="tel:+914423422890" className="hover:text-indigo-400 transition-colors">+91 44 2342 2890</a>
</li> </li>
<li className="flex items-center gap-3 text-slate-400 text-sm"> <li className="flex items-center gap-3 text-slate-400 text-sm">
<Mail className="w-4 h-4 shrink-0 text-[#F97316]" /> <Mail className="w-4 h-4 shrink-0 text-indigo-400" />
<a href="mailto:info@rit.ac.in" className="hover:text-[#F97316] transition-colors">info@rit.ac.in</a> <a href="mailto:info@rit.ac.in" className="hover:text-indigo-400 transition-colors">info@rit.ac.in</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
{/* Bottom Bar */} <div className="mt-10 pt-6 border-t border-slate-800 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-3">
<div className="border-t border-slate-700"> <span>© {new Date().getFullYear()} Rajalakshmi Institute of Technology. All rights reserved.</span>
<div className="container-custom py-5 flex flex-col sm:flex-row items-center justify-between gap-3"> <span className="text-slate-400">RIT Student Portal v2.0</span>
<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>
</div> </div>
</footer> </footer>

14
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="bg-white border-b border-[#E5E7EB] py-10">
<div className="container-custom"> <div className="container-custom">
<div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3"> <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
<Link to="/" className="hover:text-[#F97316]">Home</Link> <Link to="/" className="hover:text-indigo-600">Home</Link>
<ChevronRight className="w-3 h-3" /> <ChevronRight className="w-3 h-3" />
<span className="text-[#F97316]">Developer Collab Hub</span> <span className="text-indigo-600">Developer Collab Hub</span>
</div> </div>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div> <div>
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-[#F97316] text-xs font-semibold mb-3"> <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-50 border border-indigo-200 text-indigo-600 text-xs font-semibold mb-3">
<Code2 className="w-4 h-4" /> RIT Developers Environment <Code2 className="w-4 h-4 text-indigo-600" /> RIT Developers Environment
</div> </div>
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}> <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
Find Project{' '} Find Project{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}> <span style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Collaborators Collaborators
</span> </span>
</h1> </h1>
@@ -457,8 +457,8 @@ export default function DevCollab() {
whileHover={{ scale: 1.03 }} whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }} whileTap={{ scale: 0.97 }}
onClick={() => requireVerifiedStudent(() => setShowPostModal(true))} onClick={() => requireVerifiedStudent(() => setShowPostModal(true))}
className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-orange-500/25 shrink-0 cursor-pointer" className="flex items-center gap-2.5 px-6 py-3.5 rounded-2xl text-white font-semibold text-sm shadow-lg shadow-indigo-500/25 shrink-0 cursor-pointer"
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }} style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', fontFamily: 'Poppins, sans-serif' }}
> >
{isVerifiedStudent && <ShieldCheck className="w-4 h-4" />} {isVerifiedStudent && <ShieldCheck className="w-4 h-4" />}
<Plus className="w-4.5 h-4.5" /> <Plus className="w-4.5 h-4.5" />

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

@@ -13,10 +13,10 @@ import { CLUBS_DATA } from '@/constants';
import type { Club } from '@/types'; import type { Club } from '@/types';
const CLUB_CATEGORY_COLORS: Record<string, string> = { const CLUB_CATEGORY_COLORS: Record<string, string> = {
Technical: '#3B82F6', Technical: '#4F46E5',
Cultural: '#EC4899', Cultural: '#7C3AED',
Social: '#10B981', Social: '#10B981',
Creative: '#F59E0B', Creative: '#0284C7',
}; };
const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = { const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -118,7 +118,6 @@ export default function Events() {
// ─── Interactive Like / Favorite System State ───────────────────────────── // ─── Interactive Like / Favorite System State ─────────────────────────────
const [likedClubs, setLikedClubs] = useState<Set<string>>(() => { const [likedClubs, setLikedClubs] = useState<Set<string>>(() => {
try { try {
localStorage.removeItem('rit_freshers_liked_clubs');
const saved = localStorage.getItem('rit_freshers_liked_clubs_v3'); const saved = localStorage.getItem('rit_freshers_liked_clubs_v3');
return saved ? new Set(JSON.parse(saved)) : new Set(); return saved ? new Set(JSON.parse(saved)) : new Set();
} catch { } catch {
@@ -202,7 +201,7 @@ export default function Events() {
<div className="container-custom"> <div className="container-custom">
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}> <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
Student{' '} Student{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}> <span style={{ background: 'linear-gradient(135deg, #4F46E5, #7C3AED)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Clubs Clubs
</span> </span>
</h1> </h1>
@@ -217,17 +216,17 @@ export default function Events() {
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */} {/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
<AnimatedContainer className="mb-14"> <AnimatedContainer className="mb-14">
<div <div
className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-orange-400/30 flex flex-col md:flex-row items-center justify-between gap-6" className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-indigo-500/30 flex flex-col md:flex-row items-center justify-between gap-6"
style={{ background: 'linear-gradient(135deg, #1E293B, #0F172A)' }} style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B)' }}
> >
{/* Background Glow */} {/* Background Glow */}
<div <div
className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none" className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 pointer-events-none"
style={{ background: 'radial-gradient(circle, #F97316, transparent)' }} style={{ background: 'radial-gradient(circle, #6366F1, transparent)' }}
/> />
<div className="relative z-10 max-w-xl"> <div className="relative z-10 max-w-xl">
<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"> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-300 text-xs font-semibold mb-3 border border-indigo-500/30">
<Target className="w-3.5 h-3.5" /> <Target className="w-3.5 h-3.5" />
<span>Interactive Club Matcher</span> <span>Interactive Club Matcher</span>
</div> </div>
@@ -235,7 +234,7 @@ export default function Events() {
Not sure which club to join? Not sure which club to join?
</h2> </h2>
<p className="text-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-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! Take our 3-step Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
</p> </p>
</div> </div>
@@ -244,10 +243,10 @@ export default function Events() {
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
onClick={() => { resetQuiz(); setIsQuizOpen(true); }} 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" 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' }} style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', fontFamily: 'Poppins, sans-serif' }}
> >
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4 text-indigo-200" />
Find My Ideal Club <span>Find My Ideal Club</span>
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
</motion.button> </motion.button>
</div> </div>
@@ -263,7 +262,7 @@ export default function Events() {
const renderClubCard = (club: Club) => { const renderClubCard = (club: Club) => {
const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom; const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#F97316'; const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#4F46E5';
const isLiked = likedClubs.has(club.id); const isLiked = likedClubs.has(club.id);
const likesCount = likesMap[club.id] || 0; const likesCount = likesMap[club.id] || 0;
@@ -271,7 +270,7 @@ export default function Events() {
<motion.div <motion.div
whileHover={{ y: -4 }} whileHover={{ y: -4 }}
onClick={() => setSelectedClub(club)} onClick={() => setSelectedClub(club)}
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" className="bg-white rounded-2xl border border-[#E5E7EB] p-5 cursor-pointer hover:border-indigo-400 transition-all flex flex-col justify-between h-full group"
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }} style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
> >
<div> <div>
@@ -314,7 +313,7 @@ export default function Events() {
</div> </div>
{/* Club Title & Description */} {/* Club Title & Description */}
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-[#F97316] transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}> <h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-indigo-600 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
{club.name} {club.name}
</h3> </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] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
@@ -328,8 +327,8 @@ export default function Events() {
</span> </span>
<motion.button <motion.button
whileHover={{ scale: 1.04 }} 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" className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer bg-indigo-600 hover:bg-indigo-700 transition-colors"
style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }} style={{ fontFamily: 'Poppins, sans-serif' }}
> >
View Details View Details
</motion.button> </motion.button>
@@ -349,7 +348,7 @@ export default function Events() {
))} ))}
</div> </div>
{/* Centered Flex Row for Remaining Clubs (WiSTEM & STEAM) */} {/* Centered Flex Row for Remaining Clubs */}
{remainingClubs.length > 0 && ( {remainingClubs.length > 0 && (
<div className="flex flex-wrap justify-center gap-6 md:gap-7"> <div className="flex flex-wrap justify-center gap-6 md:gap-7">
{remainingClubs.map((club) => ( {remainingClubs.map((club) => (
@@ -391,13 +390,13 @@ export default function Events() {
</div> </div>
<div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden"> <div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden">
<div <div
className="h-full bg-[#F97316] transition-all duration-300 rounded-full" className="h-full bg-indigo-600 transition-all duration-300 rounded-full"
style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }} style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }}
/> />
</div> </div>
{/* Question Header */} {/* Question Header */}
<div className="flex items-center gap-2 mb-2 text-[#F97316]"> <div className="flex items-center gap-2 mb-2 text-indigo-600">
<Compass className="w-5 h-5" /> <Compass className="w-5 h-5" />
<span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span> <span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
</div> </div>
@@ -411,10 +410,10 @@ export default function Events() {
<button <button
key={idx} key={idx}
onClick={() => handleSelectOption(idx)} onClick={() => handleSelectOption(idx)}
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" className="w-full text-left p-4 rounded-2xl border border-slate-200 hover:border-indigo-500 hover:bg-indigo-50/50 transition-all flex items-center justify-between text-sm font-medium text-slate-700 cursor-pointer group"
> >
<span>{opt.label}</span> <span>{opt.label}</span>
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#F97316] group-hover:translate-x-1 transition-all" /> <ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-indigo-600 group-hover:translate-x-1 transition-all" />
</button> </button>
))} ))}
</div> </div>
@@ -432,7 +431,7 @@ export default function Events() {
/* Results Screen */ /* Results Screen */
<div> <div>
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="w-14 h-14 rounded-2xl bg-orange-100 text-[#F97316] flex items-center justify-center mx-auto mb-3"> <div className="w-14 h-14 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center mx-auto mb-3">
<CheckCircle2 className="w-8 h-8" /> <CheckCircle2 className="w-8 h-8" />
</div> </div>
<h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}> <h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
@@ -445,7 +444,7 @@ export default function Events() {
<div className="space-y-3 mb-6"> <div className="space-y-3 mb-6">
{quizResults.map((item, i) => { {quizResults.map((item, i) => {
const IconComponent = (item.club.icon && CLUB_ICON_MAP[item.club.icon]) || Atom; const IconComponent = (item.club.icon && CLUB_ICON_MAP[item.club.icon]) || Atom;
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#F97316'; const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#4F46E5';
const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%'; const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
return ( return (
@@ -455,7 +454,7 @@ export default function Events() {
setIsQuizOpen(false); setIsQuizOpen(false);
setSelectedClub(item.club); setSelectedClub(item.club);
}} }}
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" className="p-4 rounded-2xl border border-slate-200 hover:border-indigo-500 bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{item.club.logoUrl ? ( {item.club.logoUrl ? (
@@ -496,7 +495,7 @@ export default function Events() {
</button> </button>
<button <button
onClick={() => setIsQuizOpen(false)} onClick={() => setIsQuizOpen(false)}
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#F97316] hover:bg-[#EA580C] transition-all cursor-pointer" className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-indigo-600 hover:bg-indigo-700 transition-all cursor-pointer"
> >
Explore All Clubs Explore All Clubs
</button> </button>
@@ -508,7 +507,7 @@ export default function Events() {
)} )}
</AnimatePresence> </AnimatePresence>
{/* ─── Club Details Modal (Featuring Feature 5: Social Link Hub) ───────── */} {/* ─── Club Details Modal ────────────────────────────────────────────── */}
<AnimatePresence> <AnimatePresence>
{selectedClub && ( {selectedClub && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
@@ -530,7 +529,7 @@ export default function Events() {
{/* Modal Header */} {/* Modal Header */}
{(() => { {(() => {
const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom; const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#F97316'; const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#4F46E5';
const isLiked = likedClubs.has(selectedClub.id); const isLiked = likedClubs.has(selectedClub.id);
const likesCount = likesMap[selectedClub.id] || 0; const likesCount = likesMap[selectedClub.id] || 0;
@@ -581,9 +580,9 @@ export default function Events() {
})()} })()}
{/* Club Detailed Description */} {/* Club Detailed Description */}
<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="mb-5 bg-indigo-50/60 border border-indigo-100 rounded-2xl p-4.5">
<div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider mb-2"> <div className="flex items-center gap-2 text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2">
<Info className="w-4 h-4 text-[#F97316]" /> <Info className="w-4 h-4 text-indigo-600" />
<span>About the Club</span> <span>About the Club</span>
</div> </div>
<p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -591,9 +590,8 @@ export default function Events() {
</p> </p>
</div> </div>
{/* Leadership & Contact Information - Icon Based Color Cards */} {/* Leadership & Contact Information */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6">
{/* 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="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"> <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" /> <UserCheck className="w-5 h-5 text-white" />
@@ -604,7 +602,6 @@ export default function Events() {
</div> </div>
</div> </div>
{/* Vice President Card - Violet Theme */}
{selectedClub.vicePresidentName && ( {selectedClub.vicePresidentName && (
<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="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"> <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">
@@ -616,50 +613,12 @@ export default function Events() {
</div> </div>
</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> </div>
{/* ─── Feature 5: Social & Community Link Hub (Dummy Links) ─────── */} {/* Community & Social Links */}
<div className="mb-6 bg-orange-50/60 border border-orange-200/80 rounded-2xl p-4"> <div className="mb-6 bg-indigo-50/60 border border-indigo-200/80 rounded-2xl p-4">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider"> <div className="flex items-center gap-2 text-xs font-bold text-indigo-600 uppercase tracking-wider">
<ExternalLink className="w-3.5 h-3.5" /> <ExternalLink className="w-3.5 h-3.5" />
<span>Community & Social Links</span> <span>Community & Social Links</span>
</div> </div>
@@ -684,9 +643,9 @@ export default function Events() {
href={selectedClub.socialLinks.website} href={selectedClub.socialLinks.website}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
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" className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-indigo-500 hover:text-indigo-600 transition-all text-xs font-medium text-slate-700"
> >
<Globe className="w-4 h-4 text-orange-500 shrink-0" /> <Globe className="w-4 h-4 text-indigo-500 shrink-0" />
<span className="truncate">Linktree Hub</span> <span className="truncate">Linktree Hub</span>
</a> </a>
)} )}
@@ -714,18 +673,6 @@ export default function Events() {
<span className="truncate">WhatsApp Group</span> <span className="truncate">WhatsApp Group</span>
</a> </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>
</div> </div>

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

@@ -153,7 +153,7 @@ export default function LeetcodeLeaderboard() {
RIT LeetCode Arena RIT LeetCode Arena
</div> </div>
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins"> <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[#1E293B] font-poppins">
Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-amber-400 via-orange-400 to-[#F97316]">LeetCode Leaderboard</span> Campus <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-600">LeetCode Leaderboard</span>
</h1> </h1>
<p className="mt-2 text-slate-500 max-w-2xl text-sm sm:text-base"> <p className="mt-2 text-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. Track top problem solvers across departments. Automatically updated every 24 hours with rate-limited, spaced background sync.