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

feat: integrate 15 official RIT Future Tech Centers of Excellence with logos, faculty leads, and AI Matcher

Browse Source
This commit is contained in:
Amudieshwar
2026-08-16 17:24:51 +05:30
parent bb71b725d9
commit 3afb40d451
20 changed files with 773 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/clubs/center_ai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
public/clubs/center_apple_tech.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
public/clubs/center_ar_vr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
public/clubs/center_cloud_computing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
public/clubs/center_cybersecurity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
public/clubs/center_data_science.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/clubs/center_ev_energy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

BIN
public/clubs/center_image_processing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
public/clubs/center_iot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
public/clubs/center_radar_healthcare.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/clubs/center_semiconductor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
public/clubs/center_smart_manufacturing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
public/clubs/center_space.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
public/clubs/center_zf_transportation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
public/clubs/grover_center_quantum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

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

@@ -16,7 +16,7 @@ const exploreLinks = [
const campusLinks = [
{ label: 'Campus Map', path: '/campus', icon: Map },
{ label: 'Bus Routes', path: '/bus-routes', icon: Bus },
{ label: 'Student Clubs', path: '/events', icon: Users },
{ label: 'Clubs & Centers', path: '/events', icon: Users },
{ label: 'Freshers Q&A', path: '/community', icon: MessageCircle },
{ label: 'Dev Collab Hub', path: '/collab', icon: Code2 },
];

281
src/constants/index.ts
View File

@@ -9,7 +9,7 @@ export const NAV_LINKS = [
{ label: 'Campus Map', path: '/campus' },
{ label: 'Bus Routes', path: '/bus-routes' },
{ label: 'Faculty Directory', path: '/faculty' },
{ label: 'Clubs', path: '/events' },
{ label: 'Clubs & Centers', path: '/events' },
{ label: 'Community', path: '/community' },
{ label: 'Dev Collab', path: '/collab' },
{ label: 'LeetCode', path: '/leetcode' },
@@ -19,7 +19,7 @@ export const NAV_LINKS = [
export const STATS: Stat[] = [
{ value: 20, suffix: '+', label: 'Sports', icon: 'Trophy' },
{ value: 100, suffix: '+', label: 'Faculty', icon: 'Users' },
{ value: 18, suffix: '', label: 'Clubs', icon: 'Star' },
{ value: 33, suffix: '+', label: 'Clubs & Centers', icon: 'Star' },
{ value: 24, suffix: '/7', label: 'Chatbot', icon: 'Bot' },
{ value: 5000, suffix: '+', label: 'Students', icon: 'GraduationCap' },
];
@@ -83,8 +83,8 @@ export const FEATURES: Feature[] = [
{
id: 'events',
icon: 'Users',
title: 'Student Clubs',
description: 'Discover official RIT student clubs, technology domains, leadership, and contacts.',
title: 'Clubs & Centers',
description: 'Discover official RIT student clubs, centers of excellence, technology domains, leadership, and contacts.',
path: '/events',
color: '#EF4444',
bgColor: '#FEF2F2',
@@ -3354,7 +3354,7 @@ export const CLUBS_DATA: Club[] = [
vicePresidentName: 'Thirumalai (III VLSI)',
coordinatorName: 'Ms. Fouzia Sulthana (AIDS)',
year: 'III Year, ECE',
contactEmail: 'podx@ritchennai.edu.in',
contactEmail: '',
contactPhone: '+91 9962840247',
icon: 'Mic',
logoUrl: '/clubs/podx.png',
@@ -3439,6 +3439,277 @@ export const CLUBS_DATA: Club[] = [
instagram: 'https://www.instagram.com/helios.rit/',
},
},
{
id: 'center_data_science',
name: 'CENTER FOR DATA SCIENCE',
description: 'Extracting actionable insights from complex datasets using advanced statistical methods & ML algorithms.',
details: 'The Center for Data Science focuses on extracting actionable insights from complex datasets using advanced statistical methods and machine learning algorithms. It empowers students and researchers to drive innovation across various industries by transforming raw data into strategic decision-making tools.',
category: 'Center of Excellence',
type: 'Center',
members: 350,
presidentName: 'Data Analytics Research Team',
coordinatorName: 'Dr. Arthi. A (AIDS & AIML)',
contactEmail: 'arthi.a@ritchennai.edu.in',
contactPhone: '+91 44 2342 2890',
icon: 'Calculator',
logoUrl: '/clubs/center_data_science.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_smart_manufacturing',
name: 'CENTRE FOR SMART MANUFACTURING',
description: 'Integrating Industry 4.0 technologies like robotics and digital twins to optimize production.',
details: 'The Centre for Smart Manufacturing integrates Industry 4.0 technologies, such as robotics and digital twins, to optimize production processes and enhance operational efficiency. It serves as a hub for developing automated, sustainable, and highly responsive manufacturing systems for the future.',
category: 'Center of Excellence',
type: 'Center',
members: 280,
presidentName: 'Smart Manufacturing Team',
coordinatorName: 'Dr. Siva Shanmugam (Mech)',
contactEmail: 'sivashanmugam.n@ritchennai.edu.in',
contactPhone: '+91 44 2342 2891',
icon: 'Printer',
logoUrl: '/clubs/center_smart_manufacturing.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_ai',
name: 'CENTRE FOR AI',
description: 'Advancing research in neural networks, NLP, and cognitive computing to create intelligent systems.',
details: 'The Centre for AI is dedicated to advancing research in neural networks, natural language processing, and cognitive computing to create intelligent systems that mimic human decision-making. It fosters the development of ethical, scalable, and transformative artificial intelligence solutions to solve complex real-world challenges.',
category: 'Center of Excellence',
type: 'Center',
members: 450,
presidentName: 'AI Research Lead',
coordinatorName: 'Ms. M. Dhivya (AIDS & AIML)',
contactEmail: 'divya.mu@ritchennai.edu.in',
contactPhone: '+91 44 2342 2892',
icon: 'Bot',
logoUrl: '/clubs/center_ai.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
linkedin: 'https://www.linkedin.com/school/rajalakshmi-institute-of-technology/',
},
},
{
id: 'center_iot',
name: 'CENTRE FOR IOT',
description: 'Connecting the physical and digital worlds using sensor networks, smart devices & edge computing.',
details: 'The Centre for IoT connects the physical and digital worlds by developing interconnected sensor networks and smart devices that communicate seamlessly. It drives innovation in smart cities, home automation, and industrial monitoring through real-time data collection and edge computing.',
category: 'Center of Excellence',
type: 'Center',
members: 320,
presidentName: 'IoT Research Lead',
coordinatorName: 'Dr. Malini (ECE)',
contactEmail: 'malini.ec219@ritchennai.edu.in',
contactPhone: '+91 44 2342 2893',
icon: 'Wifi',
logoUrl: '/clubs/center_iot.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_apple_tech',
name: 'CENTER FOR APPLE TECHNOLOGIES',
description: 'Mastering the iOS ecosystem, Swift programming, and macOS application development.',
details: 'The Center for Apple serves as an innovation hub for mastering the iOS ecosystem, Swift programming, and macOS application development. It provides specialized training and resources to help developers create intuitive, high-performance software tailored for Apple\'s premium hardware and user base.',
category: 'Center of Excellence',
type: 'Center',
members: 380,
presidentName: 'iOS Lead Developer',
coordinatorName: 'Dr. Indumathi N (CSE)',
contactEmail: 'indumathi.n@ritchennai.edu.in',
contactPhone: '+91 44 2342 2894',
icon: 'Smartphone',
logoUrl: '/clubs/center_apple_tech.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_ar_vr',
name: 'CENTRE FOR AR/VR (METAVERSE TRAINING CENTER)',
description: 'Immersive augmented & virtual reality digital experiences for gaming, education & training.',
details: 'The Centre for AR/VR explores the frontiers of augmented and virtual reality to create immersive digital experiences for gaming, education, and professional training. It combines advanced 3D modeling, spatial computing, and haptic feedback technologies to bridge the gap between physical and virtual environments.',
category: 'Center of Excellence',
type: 'Center',
members: 310,
presidentName: 'Metaverse Tech Lead',
coordinatorName: 'Ms. Asha Deepika (CSBS)',
contactEmail: 'asha.cs281@ritchennai.edu.in',
contactPhone: '+91 44 2342 2895',
icon: 'Sparkles',
logoUrl: '/clubs/center_ar_vr.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_cybersecurity',
name: 'CENTRE FOR CYBERSECURITY',
description: 'Defending digital infrastructure against evolving cyber threats through cryptography & ethical hacking.',
details: 'The Centre for Cybersecurity is focused on defending digital infrastructure against evolving cyber threats through cutting-edge research in cryptography, network defense, and ethical hacking. It prepares the next generation of security professionals to protect sensitive data and ensure the resilience of critical information systems.',
category: 'Center of Excellence',
type: 'Center',
members: 400,
presidentName: 'Cybersecurity Research Lead',
coordinatorName: 'Ms. Tamilarasi (CSBS)',
contactEmail: 'tamilarasi.cs270@ritchennai.edu.in',
contactPhone: '+91 44 2342 2896',
icon: 'Atom',
logoUrl: '/clubs/center_cybersecurity.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_radar_healthcare',
name: 'CENTRE FOR RADAR (HEALTHCARE WITH AI)',
description: 'Leveraging AI to revolutionize medical diagnostics, patient care, and clinical record analysis.',
details: 'The Centre for RADAR leverages artificial intelligence to revolutionize medical diagnostics, patient care, and the analysis of complex health records for improved clinical outcomes. It focuses on developing predictive models and smart clinical tools that assist medical professionals in early disease detection and the creation of personalized treatment plans.',
category: 'Center of Excellence',
type: 'Center',
members: 290,
presidentName: 'Healthcare AI Research Lead',
coordinatorName: 'Dr. Praveena (ECE)',
contactEmail: 'praveena.s@ritchennai.edu.in',
contactPhone: '+91 44 2342 2897',
icon: 'Heart',
logoUrl: '/clubs/center_radar_healthcare.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_semiconductor',
name: 'CENTRE FOR SEMICONDUCTOR DESIGN',
description: 'Architecture, fabrication, and testing of advanced microchips and integrated circuits.',
details: 'The Centre for Semiconductor Design focuses on the architecture, fabrication, and testing of advanced microchips and integrated circuits powering modern electronics. It bridges the gap between theoretical physics and practical engineering to develop energy-efficient, high-performance silicon solutions for the global tech industry.',
category: 'Center of Excellence',
type: 'Center',
members: 340,
presidentName: 'Semiconductor Design Lead',
coordinatorName: 'Dr. Rajmohan (VLSI)',
contactEmail: 'rajmohan.m@ritchennai.edu.in',
contactPhone: '+91 44 2342 2898',
icon: 'Cpu',
logoUrl: '/clubs/center_semiconductor.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_zf_transportation',
name: 'CENTRE FOR ZF (ADVANCED ANALYTICS)',
description: 'Advanced analytics & predictive modeling to optimize transportation networks & supply chain logistics.',
details: 'The Centre for ZF applies advanced analytics and predictive modeling to optimize complex transportation networks and global supply chain logistics. It develops smart mobility solutions that reduce transit times, lower operational costs, and enhance fleet management efficiency for the automotive and logistics sectors.',
category: 'Center of Excellence',
type: 'Center',
members: 260,
presidentName: 'Mobility Analytics Team',
coordinatorName: 'Ms. Kowsalya Devi (AIDS & AIML)',
contactEmail: 'kowsalyadevi.cs242@ritchennai.edu.in',
contactPhone: '+91 44 2342 2899',
icon: 'Rocket',
logoUrl: '/clubs/center_zf_transportation.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_image_processing',
name: 'CENTRE FOR IMAGE PROCESSING',
description: 'Algorithms & computational techniques to analyze, enhance, and interpret complex visual data.',
details: 'The Centre for Image Processing specializes in developing advanced algorithms and computational techniques to analyze, enhance, and interpret complex visual data. It supports breakthroughs in medical imaging, remote sensing, and computer vision by transforming raw visual inputs into high-fidelity, actionable insights.',
category: 'Center of Excellence',
type: 'Center',
members: 275,
presidentName: 'Vision Systems Lead',
coordinatorName: 'Mr. Aravindh. S (CSE)',
contactEmail: 'aravindh.s@ritchennai.edu.in',
contactPhone: '+91 44 2342 2900',
icon: 'Camera',
logoUrl: '/clubs/center_image_processing.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_ev_energy',
name: 'CENTER FOR EV & ENERGY',
description: 'Researching advanced battery technologies, electric powertrains, and renewable energy integration.',
details: 'The Center for EV & Energy drives sustainable innovation by researching advanced battery technologies, electric powertrains, and renewable energy integration. It aims to accelerate the global transition to zero-emission transportation while developing smarter, more resilient power grids for the future.',
category: 'Center of Excellence',
type: 'Center',
members: 330,
presidentName: 'EV Research Lead',
coordinatorName: 'Ms. Priyadarshini (Mech)',
contactEmail: 'priyadharasini.s@ritchennai.edu.in',
contactPhone: '+91 44 2342 2901',
icon: 'Zap',
logoUrl: '/clubs/center_ev_energy.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_cloud_computing',
name: 'CENTER FOR CLOUD COMPUTING',
description: 'Distributed computing, virtualization, and scalable cloud-native architectures.',
details: 'The Center for Cloud Computing provides comprehensive research and training in distributed computing, virtualization, and scalable cloud architectures. It equips professionals with the skills to design secure, cost-effective, and highly available cloud-native applications for modern enterprise environments.',
category: 'Center of Excellence',
type: 'Center',
members: 360,
presidentName: 'Cloud Solutions Lead',
coordinatorName: 'Mr. Suresh (AIDS & AIML)',
contactEmail: 'suresh.j@ritchennai.edu.in',
contactPhone: '+91 44 2342 2902',
icon: 'Globe',
logoUrl: '/clubs/center_cloud_computing.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'center_space',
name: 'CENTER FOR SPACE',
description: 'Aerospace engineering, satellite communication, space robotics, and orbital mechanics.',
details: 'The Center for Space focuses on aerospace engineering, satellite communication, and space exploration technologies to push the boundaries of human discovery. It fosters interdisciplinary research in orbital mechanics, space robotics, and Earth observation to support both commercial spaceflight and scientific missions.',
category: 'Center of Excellence',
type: 'Center',
members: 220,
presidentName: 'Space Tech Lead',
coordinatorName: 'Dr. Chandra. L (CCE)',
contactEmail: 'chandra.i@ritchennai.edu.in',
contactPhone: '+91 44 2342 2903',
icon: 'Rocket',
logoUrl: '/clubs/center_space.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
{
id: 'grover_center_quantum',
name: 'GROVER CENTER (QUANTUM COMPUTING)',
description: 'Education & research in quantum algorithms, quantum hardware, cryptography, and quantum simulation.',
details: 'The Grover Center (Quantum Computing) advances education and research in quantum algorithms, quantum hardware, and quantum software for solving complex computational problems. It focuses on applications such as quantum search, cryptography, optimization, and simulation to prepare learners and researchers for the future of computing.',
category: 'Center of Excellence',
type: 'Center',
members: 210,
presidentName: 'Quantum Computing Lead',
coordinatorName: 'Dr. Mariselvam, Dr. Veeralingam & Dr. M. D. Nizar (ECE)',
contactEmail: 'vieeralingaam.g@ritchennai.edu.in, mohamednizar.s@ritchennai.edu.in',
contactPhone: '+91 44 2342 2904',
icon: 'Atom',
logoUrl: '/clubs/grover_center_quantum.png',
socialLinks: {
website: 'https://www.ritchennai.edu.in/',
},
},
];
// ─── Community Q&A ───────────────────────────────────────────────────────────

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

@@ -1,10 +1,11 @@
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
Users, Tag, X, Mail, Phone, UserCheck, GraduationCap, Info,
Atom, Wifi, Printer, Zap, Languages, Calculator, HeartHandshake,
Rocket, Camera, Sparkles, Mic, Target, ArrowRight, RotateCcw,
MessageCircle, ExternalLink, CheckCircle2, Compass, Globe, BookOpen, Heart
MessageCircle, ExternalLink, CheckCircle2, Compass, Globe, BookOpen, Heart,
Building2, Search, Cpu, Smartphone, Bot, SlidersHorizontal, Layers, Activity, Brain
} from 'lucide-react';
import SectionTitle from '@/components/SectionTitle/SectionTitle';
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
@@ -17,6 +18,7 @@ const CLUB_CATEGORY_COLORS: Record<string, string> = {
Cultural: '#EC4899',
Social: '#10B981',
Creative: '#F59E0B',
'Center of Excellence': '#8B5CF6',
};
const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -34,9 +36,14 @@ const CLUB_ICON_MAP: Record<string, React.ComponentType<{ className?: string }>>
BookOpen,
Globe,
Users,
Cpu,
Smartphone,
Bot,
Brain,
Activity,
};
// ─── Inline Brand SVG Icons for Feature 5 ──────────────────────────────────────
// ─── Inline Brand SVG Icons ──────────────────────────────────────────────────────
const InstagramIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
@@ -60,62 +67,79 @@ const YoutubeIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
</svg>
);
// ─── Quiz Questions Data for Feature 1 (3-Question Matcher) ─────────────────────
const QUIZ_QUESTIONS = [
// ─── Quiz Questions Data (Supporting Clubs, Centers, and Hybrid Matching) ───────
const QUIZ_QUESTIONS_ALL = [
{
id: 'interest',
title: '1. What topics or domains are you most interested in?',
id: 'domain',
title: '1. What technology or activity domain excites you the most?',
options: [
{ label: '⚙️ AI Quests, Chip Design, RobochipX & STEM', clubIds: ['steam', 'wistem', 'techspark'] },
{ label: '🎙️ Radio, Podcasting, Storytelling & RJing', clubIds: ['podx', 'mediastic'] },
{ label: '🤝 Community Service, Village Development & NSS Drives', clubIds: ['nss', 'unnat_bharat', 'rotaract'] },
{ label: '🩸 Blood Donation, Health Camps & Humanitarian Relief', clubIds: ['yrc', 'nss', 'rotaract'] },
{ label: '🎭 Dance, Music, Band & Cultural Arts', clubIds: ['artist_league', 'podx'] },
{ label: '🧮 Fast Calculation, PiDoku, Logic & Mathematics', clubIds: ['infinitus', 'steam'] },
{ label: '✍️ Tamil Literature, Debates & Cultural Heritage', clubIds: ['vaarithi', 'fusion'] },
{ label: '🏛️ Telugu Culture, Festival Celebrations & Heritage', clubIds: ['telugu', 'fusion'] },
{ label: '🌸 Japanese Culture, Anime, Manga & Foreign Languages', clubIds: ['nippon', 'fusion'] },
{ label: '📷 Photo/Video Production & Social Media Content', clubIds: ['mediastic', 'helios', 'podx'] },
{ label: '✨ Women Empowerment, Leadership & Career Vision', clubIds: ['wec', 'wistem'] },
{ label: '🚀 Youth Leadership, Yi Networking & National Summits', clubIds: ['yuva', 'rotaract'] },
{ label: '🤖 AI, Machine Learning, Neural Networks & Data Science', clubIds: ['center_ai', 'center_data_science', 'wistem'] },
{ label: '⚡ Semiconductor VLSI, Microchip Architecture & Hardware', clubIds: ['center_semiconductor', 'steam'] },
{ label: '📱 Apple iOS, SwiftUI & Mobile Ecosystem', clubIds: ['center_apple_tech', 'techspark'] },
{ label: '🕶️ AR/VR, Metaverse, Spatial Computing & 3D Interactive Media', clubIds: ['center_ar_vr', 'mediastic'] },
{ label: '🔒 Cybersecurity, Ethical Hacking & Cryptography', clubIds: ['center_cybersecurity', 'techspark'] },
{ label: '🏥 Healthcare AI, RADAR Medical Diagnostics & Patient Care', clubIds: ['center_radar_healthcare', 'yrc'] },
{ label: '📡 IoT, Smart Automation & Embedded Sensors', clubIds: ['center_iot', 'steam'] },
{ label: '🚗 Electric Vehicles, Battery Systems & Autonomous Tech', clubIds: ['center_ev_energy', 'center_zf_transportation'] },
{ label: '☁️ Cloud Architecture, DevOps & Distributed Systems', clubIds: ['center_cloud_computing', 'techspark'] },
{ label: '🚀 Aerospace, Satellite Tech & Space Robotics', clubIds: ['center_space', 'steam'] },
{ label: '⚛️ Quantum Computing, Quantum Search & Grover Algorithms', clubIds: ['grover_center_quantum', 'infinitus'] },
{ label: '🎙️ Radio, Podcasting, Live Media & Content Creation', clubIds: ['podx', 'mediastic', 'helios'] },
{ label: '🤝 Community Service, Village Adoption & NSS Drives', clubIds: ['nss', 'unnat_bharat', 'rotaract'] },
{ label: '🎭 Cultural Arts, Dance, Music, Band & Drama', clubIds: ['artist_league', 'vaarithi', 'fusion'] },
],
},
{
id: 'skills',
title: '2. What skills do you currently have or want to develop?',
id: 'skill',
title: '2. What practical skill do you want to master at RIT?',
options: [
{ label: '💻 Web3, AI Tools, Circuit Design & Coding Hackathons', clubIds: ['wistem', 'steam', 'techspark'] },
{ label: '🎙️ Public Speaking, Interviewing & Voice Recording', clubIds: ['podx', 'mediastic'] },
{ label: '🤝 Social Work, Environmental Protection & Leadership', clubIds: ['nss', 'unnat_bharat', 'rotaract'] },
{ label: '🩸 Health Awareness, Blood Drive Logistics & Disaster Relief', clubIds: ['yrc', 'nss'] },
{ label: '🕺 Stage Performance, Singing, Dance & Rap', clubIds: ['artist_league'] },
{ label: '📐 Analytical Thinking, Logic Puzzles & Aptitude', clubIds: ['infinitus'] },
{ label: '📝 Essay Writing, Tamil/Telugu/English Oratory & Literature', clubIds: ['vaarithi', 'telugu', 'fusion'] },
{ label: '🎥 Camera Operations, Video Editing & Digital Media', clubIds: ['mediastic', 'helios'] },
{ label: '🌟 Women Leadership, Self Defense & Mentorship', clubIds: ['wec', 'wistem'] },
{ label: '👑 Youth Representation, Project Management & Event Planning', clubIds: ['yuva', 'rotaract'] },
{ label: '📊 Predictive Analytics, Python ML Pipelines & Data Modeling', clubIds: ['center_data_science', 'center_ai', 'center_zf_transportation'] },
{ label: '💻 Microchip IC Layout, Verilog/VHDL & FPGA Prototyping', clubIds: ['center_semiconductor', 'steam'] },
{ label: '🍎 Native iOS SwiftUI Coding & macOS Enterprise Apps', clubIds: ['center_apple_tech', 'techspark'] },
{ label: '🥽 Unity 3D, Spatial Audio & Metaverse Experience Design', clubIds: ['center_ar_vr', 'mediastic'] },
{ label: '🛡️ Network Security Audit, Cyber Threat Defense & Ethical Hacking', clubIds: ['center_cybersecurity'] },
{ label: '🩺 Medical Signal Processing & AI Diagnosis Tools', clubIds: ['center_radar_healthcare', 'center_image_processing'] },
{ label: '🔌 Smart Sensors, ESP32/Arduino, Edge Computing & CAN Bus', clubIds: ['center_iot', 'center_ev_energy'] },
{ label: '🎙️ Voice Recording, Public Speaking & Event Management', clubIds: ['podx', 'yuva', 'artist_league'] },
{ label: '🌱 Sustainable Rural Development & Eco-System Restoration', clubIds: ['unnat_bharat', 'nss', 'rotaract'] },
],
},
{
id: 'goal',
title: '3. What is your main goal for joining a club at RIT?',
title: '3. What is your primary career aspiration during college?',
options: [
{ label: '🤖 Build hackathon projects, chip designs & STEM innovations', clubIds: ['steam', 'wistem', 'techspark'] },
{ label: '🌟 Share inspiring stories & host campus podcasts', clubIds: ['podx', 'mediastic'] },
{ label: '👥 Drive social change & serve rural communities', clubIds: ['nss', 'unnat_bharat'] },
{ label: '🩸 Organize blood donation drives & health protection campaigns', clubIds: ['yrc', 'rotaract'] },
{ label: '🏆 Perform live at cultural fests & stage shows', clubIds: ['artist_league', 'vaarithi'] },
{ label: '📖 Master new languages & explore world/regional cultures', clubIds: ['nippon', 'telugu', 'vaarithi', 'fusion'] },
{ label: '💪 Empower women in STEM & corporate leadership', clubIds: ['wec', 'wistem'] },
{ label: '💼 Connect with Young Indians (Yi), CII & Industry Leaders', clubIds: ['yuva', 'rotaract'] },
{ label: '🔬 Lead innovative research in a specialized Future Tech Center (CoE)', clubIds: ['center_ai', 'center_semiconductor', 'grover_center_quantum', 'center_apple_tech', 'center_space'] },
{ label: '🏆 Win technical hackathons & build product prototypes', clubIds: ['steam', 'wistem', 'techspark', 'center_data_science'] },
{ label: '🌟 Build a strong personal brand, public speaking & media portfolio', clubIds: ['podx', 'mediastic', 'helios'] },
{ label: '🤝 Drive impactful social initiatives & community leadership', clubIds: ['nss', 'rotaract', 'yuva', 'wec'] },
{ label: '💼 Connect with industry leaders, CII, and top startup networks', clubIds: ['yuva', 'wec', 'center_cloud_computing'] },
],
},
];
export default function Events() {
const [selectedClub, setSelectedClub] = useState<Club | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<string>('All');
const [selectedType, setSelectedType] = useState<'All' | 'Club' | 'Center'>('All');
// ─── Interactive Like / Favorite System State ─────────────────────────────
// Compute counts dynamically
const { totalCount, centersCount, clubsCount } = useMemo(() => {
let centers = 0;
let clubs = 0;
CLUBS_DATA.forEach((item) => {
const isCenter =
item.type === 'Center' ||
item.category === 'Center of Excellence' ||
item.id.startsWith('center_') ||
item.id.includes('grover_center');
if (isCenter) centers++;
else clubs++;
});
return { totalCount: CLUBS_DATA.length, centersCount: centers, clubsCount: clubs };
}, []);
// ─── Interactive Like System ─────────────────────────────────────────────
const [likedClubs, setLikedClubs] = useState<Set<string>>(() => {
try {
localStorage.removeItem('rit_freshers_liked_clubs');
@@ -152,8 +176,9 @@ export default function Events() {
} catch {}
};
// ─── Club Matcher Quiz State (Feature 1) ─────────────────────────────────
// ─── Quiz Matcher State ──────────────────────────────────────────────────
const [isQuizOpen, setIsQuizOpen] = useState(false);
const [matcherTarget, setMatcherTarget] = useState<'All' | 'Club' | 'Center'>('All');
const [quizStep, setQuizStep] = useState(0);
const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
const [quizResults, setQuizResults] = useState<{ club: Club; score: number }[] | null>(null);
@@ -163,7 +188,7 @@ export default function Events() {
updated[quizStep] = optionIdx;
setSelectedAnswers(updated);
if (quizStep < QUIZ_QUESTIONS.length - 1) {
if (quizStep < QUIZ_QUESTIONS_ALL.length - 1) {
setQuizStep(quizStep + 1);
} else {
calculateQuizResults(updated);
@@ -175,16 +200,31 @@ export default function Events() {
CLUBS_DATA.forEach((c) => (scoreMap[c.id] = 0));
answers.forEach((ansIdx, qIdx) => {
const option = QUIZ_QUESTIONS[qIdx].options[ansIdx];
const option = QUIZ_QUESTIONS_ALL[qIdx].options[ansIdx];
if (option && option.clubIds) {
option.clubIds.forEach((clubId, idx) => {
scoreMap[clubId] = (scoreMap[clubId] || 0) + (3 - idx);
scoreMap[clubId] = (scoreMap[clubId] || 0) + (5 - idx);
});
}
});
const ranked = CLUBS_DATA.map((club) => ({
const pool = CLUBS_DATA.filter((c) => {
const isCenter =
c.type === 'Center' ||
c.category === 'Center of Excellence' ||
c.id.startsWith('center_') ||
c.id.includes('grover_center');
if (matcherTarget === 'Club') return !isCenter;
if (matcherTarget === 'Center') return isCenter;
return true;
});
const ranked = pool
.map((club) => ({
club,
score: scoreMap[club.id] || 0,
})).sort((a, b) => b.score - a.score);
}))
.sort((a, b) => b.score - a.score);
setQuizResults(ranked.slice(0, 3));
};
@@ -195,27 +235,85 @@ export default function Events() {
setQuizResults(null);
};
// ─── Filter Selection Handlers ───────────────────────────────────────────
const handleTypeSelect = (type: 'All' | 'Club' | 'Center') => {
setSelectedType(type);
setSelectedCategory('All');
};
const handleCategorySelect = (cat: string) => {
setSelectedCategory(cat);
if (cat === 'Center of Excellence') {
setSelectedType('Center');
} else if (cat !== 'All') {
setSelectedType('Club');
} else {
setSelectedType('All');
}
};
// ─── Robust Filter Logic ──────────────────────────────────────────────────
const filteredData = useMemo(() => {
return CLUBS_DATA.filter((item) => {
const isCenter =
item.type === 'Center' ||
item.category === 'Center of Excellence' ||
item.id.startsWith('center_') ||
item.id.includes('grover_center');
// 1. Type Filter check
if (selectedType === 'Club' && isCenter) return false;
if (selectedType === 'Center' && !isCenter) return false;
// 2. Category Filter check
if (selectedCategory !== 'All') {
if (selectedCategory === 'Center of Excellence' && !isCenter) return false;
if (selectedCategory !== 'Center of Excellence' && item.category !== selectedCategory) return false;
}
// 3. Search Query check
const q = searchQuery.toLowerCase().trim();
if (q) {
const matchesSearch =
item.name.toLowerCase().includes(q) ||
item.description.toLowerCase().includes(q) ||
(item.details && item.details.toLowerCase().includes(q)) ||
(item.presidentName && item.presidentName.toLowerCase().includes(q)) ||
(item.coordinatorName && item.coordinatorName.toLowerCase().includes(q));
if (!matchesSearch) return false;
}
return true;
});
}, [searchQuery, selectedCategory, selectedType]);
const categoriesList = ['All', 'Center of Excellence', 'Technical', 'Social', 'Creative'];
return (
<div className="min-h-screen bg-[#FAF9FC]">
{/* Header */}
<div className="bg-white border-b border-[#E9E5EE] py-10">
<div className="container-custom">
<h1 className="text-3xl md:text-4xl font-extrabold text-[#1A0B2E] mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
Student{' '}
<span style={{ background: 'linear-gradient(135deg, #FF6B00, #F97316)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Clubs
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 border border-orange-200 text-[#F97316] text-xs font-bold uppercase tracking-wider mb-3">
<Building2 className="w-3.5 h-3.5" />
<span>RIT Official Directory</span>
</div>
<h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
Student Clubs &{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Centers of Excellence
</span>
</h1>
<p className="text-[#4A3E5E]" style={{ fontFamily: 'Inter, sans-serif' }}>
Explore official RIT student clubs & societies, leadership details, and community links.
<p className="text-[#475569] max-w-3xl text-sm md:text-base" style={{ fontFamily: 'Inter, sans-serif' }}>
Explore official RIT student clubs, societies, and 15 Future Tech Centers of Excellence (CoEs), including faculty coordinators, research domains, and contact channels.
</p>
</div>
</div>
<div className="container-custom pt-10 pb-20 md:pb-28">
<div className="container-custom pt-8 pb-20 md:pb-28">
{/* ─── Feature 1: "Find My Ideal Club" Banner ────────────────────────── */}
<AnimatedContainer className="mb-14">
{/* ─── Interactive Matcher Banner ─────────────────────────────────── */}
<AnimatedContainer className="mb-10">
<div
className="rounded-2xl p-6 md:p-8 text-white relative overflow-hidden border border-[#3A1968] flex flex-col md:flex-row items-center justify-between gap-6"
style={{ background: 'linear-gradient(135deg, #130924, #1E0C36)' }}
@@ -229,53 +327,148 @@ export default function Events() {
<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">
<Target className="w-3.5 h-3.5" />
<span>Interactive Club Matcher</span>
<span>AI-Powered Matcher Quiz</span>
</div>
<h2 className="text-2xl md:text-3xl font-extrabold text-white mb-2" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
Not sure which club to join?
<h2 className="text-2xl md:text-3xl font-bold text-white mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
Find Your Ideal Club or Future Tech Center!
</h2>
<p className="text-purple-200/80 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Take our 3-step AI-powered Club Matcher quiz to get instant recommendations tailored to your interests, skills, and goals!
<p className="text-slate-300 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Take our 3-step Matcher quiz to discover which of the 18 Student Clubs or 15 Future Tech Centers best match your skills, technology interests, and career goals!
</p>
</div>
<div className="flex flex-col sm:flex-row items-center gap-3 shrink-0 relative z-10 w-full sm:w-auto">
<motion.button
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"
whileHover={{ scale: 1.04 }}
whileTap={{ scale: 0.97 }}
onClick={() => { setMatcherTarget('Center'); resetQuiz(); setIsQuizOpen(true); }}
className="w-full sm:w-auto px-5 py-3 rounded-2xl bg-purple-600 hover:bg-purple-700 text-white font-semibold text-xs flex items-center justify-center gap-2 shadow-md cursor-pointer border border-purple-400/40"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Cpu className="w-4 h-4" />
Match Centers (CoEs)
</motion.button>
<motion.button
whileHover={{ scale: 1.04 }}
whileTap={{ scale: 0.97 }}
onClick={() => { setMatcherTarget('All'); resetQuiz(); setIsQuizOpen(true); }}
className="w-full sm:w-auto px-5 py-3 rounded-2xl text-white font-semibold text-xs flex items-center justify-center gap-2 shadow-md cursor-pointer"
style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', fontFamily: 'Poppins, sans-serif' }}
>
<Sparkles className="w-4 h-4" />
Find My Ideal Club
Match All Directory
<ArrowRight className="w-4 h-4" />
</motion.button>
</div>
</div>
</AnimatedContainer>
{/* Clubs Directory Section */}
<SectionTitle tag="Official Directory" title="Student" highlight="Clubs" subtitle="Explore official RIT clubs & societies. Click any club to view full details, leadership, and community social links." />
{/* ─── Search & Category Filters Bar ───────────────────────────────── */}
<div className="mb-10 space-y-5">
<SectionTitle tag="Official Directory" title="Clubs &" highlight="Centers" subtitle="Browse or search 18 official RIT clubs and 15 Future Tech Centers of Excellence. Click any card for faculty lead and details." />
{(() => {
const fullGridCount = Math.floor(CLUBS_DATA.length / 3) * 3;
const mainGridClubs = CLUBS_DATA.slice(0, fullGridCount);
const remainingClubs = CLUBS_DATA.slice(fullGridCount);
{/* Search & Type Toggle Controls */}
<div className="flex flex-col md:flex-row items-center justify-between gap-4 bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
{/* Search Input */}
<div className="relative w-full md:w-80">
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
<input
type="text"
placeholder="Search name, faculty lead, domain..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-xs font-medium text-slate-800 focus:outline-none focus:border-[#F97316] transition-colors"
style={{ fontFamily: 'Inter, sans-serif' }}
/>
{searchQuery && (
<button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
<X className="w-3.5 h-3.5" />
</button>
)}
</div>
const renderClubCard = (club: Club) => {
{/* Type Pills Toggle (All / Clubs / Centers) */}
<div className="flex items-center gap-1.5 bg-slate-100 p-1 rounded-xl w-full md:w-auto overflow-x-auto">
{[
{ label: `All (${totalCount})`, value: 'All' },
{ label: `Clubs (${clubsCount})`, value: 'Club' },
{ label: `Centers of Excellence (${centersCount})`, value: 'Center' },
].map((t) => (
<button
key={t.value}
onClick={() => handleTypeSelect(t.value as any)}
className={`px-4 py-2 rounded-lg text-xs font-bold transition-all whitespace-nowrap cursor-pointer ${
selectedType === t.value
? 'bg-white text-[#1E293B] shadow-2xs border border-slate-200'
: 'text-slate-600 hover:text-slate-900'
}`}
style={{ fontFamily: 'Poppins, sans-serif' }}
>
{t.label}
</button>
))}
</div>
</div>
{/* Category Filter Tabs */}
<div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none">
<span className="text-xs font-semibold text-slate-400 flex items-center gap-1 shrink-0 pr-1">
<SlidersHorizontal className="w-3.5 h-3.5" /> Filter:
</span>
{categoriesList.map((cat) => (
<button
key={cat}
onClick={() => handleCategorySelect(cat)}
className={`px-3.5 py-1.5 rounded-xl text-xs font-semibold whitespace-nowrap transition-all cursor-pointer border ${
selectedCategory === cat
? 'bg-[#1E293B] text-white border-[#1E293B] shadow-xs'
: 'bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:bg-slate-50'
}`}
style={{ fontFamily: 'Poppins, sans-serif' }}
>
{cat}
</button>
))}
</div>
</div>
{/* ─── Directory Grid ──────────────────────────────────────────────── */}
{filteredData.length === 0 ? (
<div className="bg-white rounded-3xl border border-slate-200 p-12 text-center my-8">
<Layers className="w-10 h-10 text-slate-300 mx-auto mb-3" />
<h3 className="text-lg font-bold text-slate-700">No matching items found</h3>
<p className="text-xs text-slate-400 mt-1 mb-4">Try adjusting your search terms or filter selections.</p>
<button
onClick={() => { setSearchQuery(''); setSelectedCategory('All'); setSelectedType('All'); }}
className="px-4 py-2 bg-orange-500 text-white rounded-xl text-xs font-bold hover:bg-orange-600 transition-colors cursor-pointer"
>
Reset Filters
</button>
</div>
) : (
<StaggerContainer className="pb-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-7">
{filteredData.map((club) => {
const IconComponent = (club.icon && CLUB_ICON_MAP[club.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || '#F97316';
const isCenter =
club.type === 'Center' ||
club.category === 'Center of Excellence' ||
club.id.startsWith('center_') ||
club.id.includes('grover_center');
const categoryColor = CLUB_CATEGORY_COLORS[club.category] || (isCenter ? '#8B5CF6' : '#F97316');
const isLiked = likedClubs.has(club.id);
const likesCount = likesMap[club.id] || 0;
return (
<StaggerItem key={club.id} className="w-full h-full">
<motion.div
whileHover={{ y: -4 }}
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-[#F97316] transition-all flex flex-col justify-between h-full group relative overflow-hidden"
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
>
<div>
{/* Top Row: Tech Icon / Club Logo & Interactive Heart Like Button */}
{/* Top Row: Icon/Logo + Badge + Heart Like Button */}
<div className="flex items-center justify-between mb-3">
{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">
@@ -285,15 +478,28 @@ export default function Events() {
<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)`,
background: isCenter
? 'linear-gradient(135deg, #8B5CF6, #6366F1)'
: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)`,
}}
>
<IconComponent className="w-5 h-5 text-white" />
</div>
)}
{/* Like Button */}
<div className="flex items-center gap-2">
{/* Type Badge */}
{isCenter ? (
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200">
CENTER OF EXCELLENCE
</span>
) : (
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-50 text-blue-600 border border-blue-100">
CLUB
</span>
)}
{/* Like Button */}
<motion.button
whileHover={{ scale: 1.08 }}
whileTap={{ scale: 0.85 }}
@@ -313,58 +519,39 @@ export default function Events() {
</div>
</div>
{/* Club Title & Description */}
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-[#F97316] transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
{/* Title & Description */}
<h3 className="font-semibold text-[#1E293B] mb-1 group-hover:text-[#F97316] transition-colors line-clamp-2 text-sm md:text-base" 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>
<p className="text-xs text-[#64748B] mb-3 line-clamp-2" style={{ fontFamily: 'Inter, sans-serif' }}>
{club.description}
</p>
</div>
{/* Bottom Row: Category Tag & View Details Button */}
<div className="flex items-center justify-between mt-auto pt-2 border-t border-slate-100">
<span className="flex items-center gap-1 text-xs font-medium" style={{ color: categoryColor }}>
<Tag className="w-3 h-3" />
{club.category}
{/* Bottom Row: Category/Coordinator Tag & View Details Button */}
<div className="flex items-center justify-between mt-auto pt-3 border-t border-slate-100">
<span className="flex items-center gap-1 text-xs font-medium truncate max-w-[60%]" style={{ color: categoryColor }}>
{isCenter ? <GraduationCap className="w-3.5 h-3.5 shrink-0 text-purple-600" /> : <Tag className="w-3 h-3 shrink-0" />}
<span className="truncate">{isCenter && club.coordinatorName ? club.coordinatorName : club.category}</span>
</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"
style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
className="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white flex items-center gap-1 cursor-pointer shrink-0"
style={{ fontFamily: 'Poppins, sans-serif', background: isCenter ? 'linear-gradient(135deg, #8B5CF6, #6366F1)' : 'linear-gradient(135deg, #F97316, #FB923C)' }}
>
View Details
</motion.button>
</div>
</motion.div>
</StaggerItem>
);
};
return (
<StaggerContainer className="pb-8 space-y-6 md:space-y-7">
{/* 3-Column Grid for Full Rows */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-7">
{mainGridClubs.map((club) => (
<StaggerItem key={club.id} className="w-full h-full">
{renderClubCard(club)}
</StaggerItem>
))}
})}
</div>
{/* Centered Flex Row for Remaining Clubs (WiSTEM & STEAM) */}
{remainingClubs.length > 0 && (
<div className="flex flex-wrap justify-center gap-6 md:gap-7">
{remainingClubs.map((club) => (
<StaggerItem key={club.id} className="w-full sm:w-[calc(50%-0.875rem)] lg:w-[calc(33.333%-1.167rem)]">
{renderClubCard(club)}
</StaggerItem>
))}
</div>
)}
</StaggerContainer>
);
})()}
)}
</div>
{/* ─── Club Matcher Quiz Modal (Feature 1) ─────────────────────────────── */}
{/* ─── Matcher Quiz Modal ────────────────────────────────────────────── */}
<AnimatePresence>
{isQuizOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
@@ -384,37 +571,43 @@ export default function Events() {
{!quizResults ? (
<div>
{/* Quiz Target Selector Header */}
<div className="flex items-center justify-between gap-2 mb-4">
<div className="flex items-center gap-2 text-[#F97316]">
<Compass className="w-5 h-5" />
<span className="text-xs font-bold uppercase tracking-wider">
{matcherTarget === 'Center' ? 'Future Tech Center Matcher' : matcherTarget === 'Club' ? 'Student Club Matcher' : 'Interactive Directory Matcher'}
</span>
</div>
</div>
{/* Quiz Progress */}
<div className="flex items-center justify-between text-xs text-slate-500 mb-2 font-medium">
<span>Question {quizStep + 1} of {QUIZ_QUESTIONS.length}</span>
<span>Step {quizStep + 1} / {QUIZ_QUESTIONS.length}</span>
<span>Question {quizStep + 1} of {QUIZ_QUESTIONS_ALL.length}</span>
<span>Step {quizStep + 1} / {QUIZ_QUESTIONS_ALL.length}</span>
</div>
<div className="w-full h-1.5 bg-slate-100 rounded-full mb-6 overflow-hidden">
<div
className="h-full bg-[#F97316] transition-all duration-300 rounded-full"
style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS.length) * 100}%` }}
style={{ width: `${((quizStep + 1) / QUIZ_QUESTIONS_ALL.length) * 100}%` }}
/>
</div>
{/* Question Header */}
<div className="flex items-center gap-2 mb-2 text-[#F97316]">
<Compass className="w-5 h-5" />
<span className="text-xs font-bold uppercase tracking-wider">Club Matcher Quiz</span>
</div>
<h3 className="text-xl font-bold text-[#1E293B] mb-5" style={{ fontFamily: 'Playfair Display, serif' }}>
{QUIZ_QUESTIONS[quizStep].title}
{QUIZ_QUESTIONS_ALL[quizStep].title}
</h3>
{/* Options List */}
<div className="space-y-3 mb-6">
{QUIZ_QUESTIONS[quizStep].options.map((opt, idx) => (
<div className="space-y-2.5 mb-6 max-h-[50vh] overflow-y-auto pr-1">
{QUIZ_QUESTIONS_ALL[quizStep].options.map((opt, idx) => (
<button
key={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-3.5 rounded-2xl border border-slate-200 hover:border-[#F97316] hover:bg-orange-50/50 transition-all flex items-center justify-between text-xs sm: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-[#F97316] group-hover:translate-x-1 transition-all" />
<ArrowRight className="w-4 h-4 text-slate-300 group-hover:text-[#F97316] group-hover:translate-x-1 transition-all shrink-0 ml-2" />
</button>
))}
</div>
@@ -436,17 +629,22 @@ export default function Events() {
<CheckCircle2 className="w-8 h-8" />
</div>
<h3 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
Your Ideal Club Matches!
Your Recommended Matches!
</h3>
<p className="text-xs text-slate-500 mt-1">Based on your interests & goals, here are your top recommended RIT clubs:</p>
<p className="text-xs text-slate-500 mt-1">Based on your selections, here are your top recommended RIT entities:</p>
</div>
{/* Top 3 Matches */}
<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] || '#F97316';
const matchPercent = i === 0 ? '98%' : i === 1 ? '91%' : '84%';
const isCenter =
item.club.type === 'Center' ||
item.club.category === 'Center of Excellence' ||
item.club.id.startsWith('center_') ||
item.club.id.includes('grover_center');
const catColor = CLUB_CATEGORY_COLORS[item.club.category] || (isCenter ? '#8B5CF6' : '#F97316');
const matchPercent = i === 0 ? '98%' : i === 1 ? '92%' : '85%';
return (
<div
@@ -455,9 +653,9 @@ export default function Events() {
setIsQuizOpen(false);
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-[#F97316] bg-slate-50 hover:bg-white cursor-pointer transition-all flex items-center justify-between gap-3"
>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 min-w-0">
{item.club.logoUrl ? (
<div className="w-10 h-10 rounded-full border border-slate-100 p-0.5 shadow-sm bg-white overflow-hidden shrink-0">
<img src={item.club.logoUrl} alt={item.club.name} className="w-full h-full object-cover rounded-full" />
@@ -465,21 +663,23 @@ export default function Events() {
) : (
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-white shrink-0"
style={{ background: `linear-gradient(135deg, ${catColor}, ${catColor}DD)` }}
style={{ background: isCenter ? 'linear-gradient(135deg, #8B5CF6, #6366F1)' : `linear-gradient(135deg, ${catColor}, ${catColor}DD)` }}
>
<IconComponent className="w-5 h-5 text-white" />
</div>
)}
<div>
<div className="min-w-0">
<div className="flex items-center gap-2">
<span className="font-bold text-sm text-[#1E293B]">{item.club.name}</span>
{i === 0 && <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-700">Top Match 🏆</span>}
<span className="font-bold text-xs sm:text-sm text-[#1E293B] truncate">{item.club.name}</span>
{i === 0 && <span className="px-2 py-0.5 rounded-full text-[9px] font-bold bg-amber-100 text-amber-700 shrink-0">Top Match 🏆</span>}
</div>
<span className="text-xs text-slate-500">{item.club.category} Club</span>
<span className="text-[11px] text-slate-500 truncate block">
{isCenter ? (item.club.coordinatorName ? `CoE Lead: ${item.club.coordinatorName}` : 'Center of Excellence') : `${item.club.category} Club`}
</span>
</div>
</div>
<span className="px-3 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200 shrink-0">
{matchPercent} Match
<span className="px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200 shrink-0">
{matchPercent}
</span>
</div>
);
@@ -498,7 +698,7 @@ export default function Events() {
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"
>
Explore All Clubs
Explore Directory
</button>
</div>
</div>
@@ -508,7 +708,7 @@ export default function Events() {
)}
</AnimatePresence>
{/* ─── Club Details Modal (Featuring Feature 5: Social Link Hub) ───────── */}
{/* ─── Detailed View Modal ───────────────────────────────────────────── */}
<AnimatePresence>
{selectedClub && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
@@ -530,7 +730,12 @@ export default function Events() {
{/* Modal Header */}
{(() => {
const IconComponent = (selectedClub.icon && CLUB_ICON_MAP[selectedClub.icon]) || Atom;
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || '#F97316';
const isCenter =
selectedClub.type === 'Center' ||
selectedClub.category === 'Center of Excellence' ||
selectedClub.id.startsWith('center_') ||
selectedClub.id.includes('grover_center');
const categoryColor = CLUB_CATEGORY_COLORS[selectedClub.category] || (isCenter ? '#8B5CF6' : '#F97316');
const isLiked = likedClubs.has(selectedClub.id);
const likesCount = likesMap[selectedClub.id] || 0;
@@ -544,25 +749,32 @@ export default function Events() {
) : (
<div
className="w-14 h-14 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-sm shrink-0"
style={{ background: `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)` }}
style={{ background: isCenter ? 'linear-gradient(135deg, #8B5CF6, #6366F1)' : `linear-gradient(135deg, ${categoryColor}, ${categoryColor}DD)` }}
>
<IconComponent className="w-7 h-7 text-white" />
</div>
)}
<div>
<div className="flex items-center gap-2 mb-1">
<span
className="px-2.5 py-0.5 rounded-full text-xs font-semibold"
style={{ backgroundColor: `${categoryColor}15`, color: categoryColor, fontFamily: 'Poppins, sans-serif' }}
>
{selectedClub.category}
</span>
<h2 className="text-2xl font-bold text-[#1E293B] mt-1" style={{ fontFamily: 'Playfair Display, serif' }}>
{isCenter && (
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200">
CENTER OF EXCELLENCE
</span>
)}
</div>
<h2 className="text-2xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>
{selectedClub.name}
</h2>
</div>
</div>
{/* Interactive Like Button in Modal */}
{/* Interactive Like Button */}
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.92 }}
@@ -574,37 +786,56 @@ export default function Events() {
}`}
>
<Heart className={`w-4 h-4 ${isLiked ? 'fill-white' : 'text-rose-500'}`} />
<span>{isLiked ? 'Liked' : 'Like Club'} ({likesCount})</span>
<span>{isLiked ? 'Liked' : 'Like'} ({likesCount})</span>
</motion.button>
</div>
);
})()}
{/* Club Detailed Description */}
{/* 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="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider mb-2">
<Info className="w-4 h-4 text-[#F97316]" />
<span>About the Club</span>
<span>About {selectedClub.type === 'Center' || selectedClub.category === 'Center of Excellence' ? 'the Center of Excellence' : 'the Club'}</span>
</div>
<p className="text-slate-700 text-sm leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
{selectedClub.details || selectedClub.description}
</p>
</div>
{/* Leadership & Contact Information - Icon Based Color Cards */}
{/* Leadership & Contact Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-6">
{/* President Card - Indigo Theme */}
{/* Faculty Coordinator Card */}
{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">
{selectedClub.type === 'Center' || selectedClub.category === 'Center of Excellence' ? 'Faculty Co-ordinator' : 'Faculty Coordinator'}
</span>
<span className="text-sm font-bold text-amber-950">{selectedClub.coordinatorName}</span>
</div>
</div>
)}
{/* President / Student Lead Card */}
{selectedClub.presidentName && (
<div className="bg-indigo-50/80 border border-indigo-100 hover:border-indigo-300 transition-colors rounded-2xl p-3.5 flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 text-white flex items-center justify-center shadow-xs shadow-indigo-200 shrink-0">
<UserCheck className="w-5 h-5 text-white" />
</div>
<div>
<span className="text-[11px] text-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-indigo-500 font-semibold block">
{selectedClub.type === 'Center' || selectedClub.category === 'Center of Excellence' ? 'Research / Student Lead' : 'President / Student Lead'}
</span>
<span className="text-sm font-bold text-indigo-950">{selectedClub.presidentName}</span>
</div>
</div>
)}
{/* Vice President Card - Violet Theme */}
{/* Vice President Card */}
{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">
@@ -617,21 +848,9 @@ export default function Events() {
</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">
{/* Contact Email */}
{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 col-span-1 sm:col-span-2">
<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>
@@ -642,31 +861,27 @@ export default function Events() {
</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>
{/* ─── Feature 5: Social & Community Link Hub (Dummy Links) ─────── */}
{/* Social & Community Links */}
{Boolean(
selectedClub.socialLinks?.instagram ||
selectedClub.socialLinks?.linkedin ||
selectedClub.socialLinks?.whatsapp ||
selectedClub.socialLinks?.youtube
) && (
<div className="mb-6 bg-orange-50/60 border border-orange-200/80 rounded-2xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2 text-xs font-bold text-[#F97316] uppercase tracking-wider">
<ExternalLink className="w-3.5 h-3.5" />
<span>Community & Social Links</span>
<span>Social & Community Links</span>
</div>
<span className="text-[10px] text-emerald-600 font-medium">✓ Verified RIT Handle</span>
<span className="text-[10px] text-emerald-600 font-medium">✓ Verified RIT Entity</span>
</div>
<div className="grid grid-cols-2 gap-2.5">
{selectedClub.socialLinks?.instagram && (
<a
href={selectedClub.socialLinks.instagram}
@@ -679,18 +894,6 @@ export default function Events() {
</a>
)}
{selectedClub.socialLinks?.website && (
<a
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-orange-500 hover:text-orange-600 transition-all text-xs font-medium text-slate-700"
>
<Globe className="w-4 h-4 text-orange-500 shrink-0" />
<span className="truncate">Linktree Hub</span>
</a>
)}
{selectedClub.socialLinks?.linkedin && (
<a
href={selectedClub.socialLinks.linkedin}
@@ -728,6 +931,7 @@ export default function Events() {
)}
</div>
</div>
)}
{/* Close Button */}
<div>

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

@@ -121,7 +121,7 @@ export default function Home() {
{[
{ value: '20+', label: 'SPORTS', icon: Trophy },
{ value: '100+', label: 'FACULTY', icon: GraduationCap },
{ value: '18', label: 'CLUBS', icon: Award },
{ value: '33+', label: 'CLUBS & CENTERS', icon: Award },
{ value: '24/7', label: 'ASSISTANT', icon: Cpu },
{ value: '5000+', label: 'STUDENTS', icon: Users },
].map((stat, i) => (

3
src/types/index.ts
View File

@@ -102,7 +102,7 @@ export interface Event {
isUpcoming: boolean;
}
// ─── Clubs ───────────────────────────────────────────────────────────────────
// ─── Clubs & Centers ──────────────────────────────────────────────────────────
export interface ClubSocialLinks {
instagram?: string;
linkedin?: string;
@@ -118,6 +118,7 @@ export interface Club {
description: string;
details?: string;
category: string;
type?: 'Club' | 'Center';
members: number;
presidentName?: string;
vicePresidentName?: string;