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

video playback enhanced
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 23:23:48 +05:30
parent a6efffdefd
commit 68e8f6e002
15 changed files with 189 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -216,17 +216,17 @@ export default function Events() {
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
<AnimatedContainer className="mb-14">
<div
className="rounded-3xl p-6 md:p-8 text-white relative overflow-hidden border border-indigo-500/30 flex flex-col md:flex-row items-center justify-between gap-6"
style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B)' }}
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)' }}
>
{/* 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, #6366F1, transparent)' }}
style={{ background: 'radial-gradient(circle, #2E1065, transparent)' }}
/>
<div className="relative z-10 max-w-xl">
<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">
<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">
<Target className="w-3.5 h-3.5" />
<span>Interactive Club Matcher</span>
</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"
style={{ background: 'linear-gradient(135deg, #4F46E5, #6366F1)', 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-violet-800/40"
style={{ background: 'linear-gradient(135deg, #0F172A, #1E1B4B, #2E1065)', fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-4 h-4 text-indigo-200" />
<Sparkles className="w-4 h-4 text-violet-200" />
<span>Find My Ideal Club</span>
<ArrowRight className="w-4 h-4" />
</motion.button>
@@ -262,7 +262,7 @@ 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] || '#4F46E5';
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#1E1B4B';
const isLiked = likedClubs.has(club.id);
const likesCount = likesMap[club.id] || 0;
@@ -270,7 +270,7 @@ export default function Events() {
<motion.div
whileHover={{ y: -4 }}
onClick={() => setSelectedClub(club)}
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"
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)' }}
>
<div>
@@ -313,7 +313,7 @@ export default function Events() {
</div>
{/* Club Title & Description */}
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-indigo-600 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-slate-900 transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
{club.name}
</h3>
<p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>{club.description}</p>
@@ -327,7 +327,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-indigo-600 hover:bg-indigo-700 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-[#1E1B4B] hover:bg-[#2E1065] transition-colors"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
View Details
@@ -390,13 +390,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-indigo-600 transition-all duration-300 rounded-full"
className="h-full bg-[#1E1B4B] 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-indigo-600">
<div className="flex items-center gap-2 mb-2 text-[#1E1B4B]">
<Compass className="w-5 h-5" />
<span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
</div>
@@ -410,10 +410,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-indigo-500 hover:bg-indigo-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-slate-800 hover:bg-slate-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-indigo-600 group-hover:translate-x-1 transition-all" />
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#1E1B4B] group-hover:translate-x-1 transition-all" />
</button>
))}
</div>
@@ -431,7 +431,7 @@ export default function Events() {
/* Results Screen */
<div>
<div className="text-center mb-6">
<div className="w-14 h-14 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center mx-auto mb-3">
<div className="w-14 h-14 rounded-2xl bg-slate-900 text-violet-300 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 +444,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] || '#4F46E5';
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || '#1E1B4B';
const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
return (
@@ -454,7 +454,7 @@ export default function Events() {
setIsQuizOpen(false);
setSelectedClub(item.club);
}}
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"
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"
>
<div className="flex items-center gap-3">
{item.club.logoUrl ? (
@@ -495,7 +495,7 @@ export default function Events() {
</button>
<button
onClick={() => setIsQuizOpen(false)}
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-indigo-600 hover:bg-indigo-700 transition-all cursor-pointer"
className="flex-1 py-3 rounded-xl text-white font-semibold text-xs bg-[#1E1B4B] hover:bg-[#2E1065] transition-all cursor-pointer"
>
Explore All Clubs
</button>
@@ -529,7 +529,7 @@ export default function Events() {
{/* Modal Header */}
{(() => {
const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#4F46E5';
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#1E1B4B';
const isLiked = likedClubs.has(selectedClub.id);
const likesCount = likesMap[selectedClub.id] || 0;
@@ -580,9 +580,9 @@ export default function Events() {
})()}
{/* Club Detailed Description */}
<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-indigo-600 uppercase tracking-wider mb-2">
<Info className="w-4 h-4 text-indigo-600" />
<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" />
<span>About the Club</span>
</div>
<p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
@@ -592,33 +592,33 @@ 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-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="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">
<UserCheck className="w-5 h-5 text-white" />
</div>
<div>
<span className="text-[11px] text-indigo-500 font-semibold block">President / Student Lead</span>
<span className="text-sm font-bold text-indigo-950">{selectedClub.presidentName || 'Student President'}</span>
<span className="text-[11px] text-violet-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-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="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">
<Users className="w-5 h-5 text-white" />
</div>
<div>
<span className="text-[11px] text-violet-500 font-semibold block">Vice President</span>
<span className="text-sm font-bold text-violet-950">{selectedClub.vicePresidentName}</span>
<span className="text-[11px] text-violet-300 font-semibold block">Vice President</span>
<span className="text-sm font-bold text-white">{selectedClub.vicePresidentName}</span>
</div>
</div>
)}
</div>
{/* Community & Social Links */}
<div className="mb-6 bg-indigo-50/60 border border-indigo-200/80 rounded-2xl p-4">
<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-indigo-600 uppercase tracking-wider">
<div className="flex items-center gap-2 text-xs font-bold text-violet-300 uppercase tracking-wider">
<ExternalLink className="w-3.5 h-3.5" />
<span>Community & Social Links</span>
</div>
@@ -643,9 +643,9 @@ export default function Events() {
href={selectedClub.socialLinks.website}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-indigo-500 hover:text-indigo-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-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
>
<Globe className="w-4 h-4 text-indigo-500 shrink-0" />
<Globe className="w-4 h-4 text-slate-800 shrink-0" />
<span className="truncate">Linktree Hub</span>
</a>
)}
@@ -655,9 +655,9 @@ export default function Events() {
href={selectedClub.socialLinks.linkedin}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 p-2.5 rounded-xl bg-white border border-slate-200 hover:border-blue-600 hover:text-blue-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-slate-800 hover:text-slate-900 transition-all text-xs font-medium text-slate-700"
>
<LinkedinIcon className="w-4 h-4 text-blue-600 shrink-0" />
<LinkedinIcon className="w-4 h-4 text-slate-800 shrink-0" />
<span className="truncate">LinkedIn</span>
</a>
)}