SidharthPL/Event-Management-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert backends to Firebase and combine projects

Browse Source
This commit is contained in:
Abiram070207
2026-06-18 14:07:24 +05:30
commit 0a76feafc5
147 changed files with 35104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
RIT-EVENT-MANAGEMENT--main/components/CategoryGrid.tsx Normal file
View File

@@ -0,0 +1,106 @@
import React from 'react';
import { CATEGORIES } from '../constants';
interface CategoryGridProps {
onSelectCategory: (id: string) => void;
title?: string;
}
const CategoryGrid: React.FC<CategoryGridProps> = ({ onSelectCategory }) => {
const threeCategories = CATEGORIES.filter(c => c.id !== 'CENTRE-ACTIVITY');
const centreActivityCategory = CATEGORIES.find(c => c.id === 'CENTRE-ACTIVITY');
return (
<section className="py-12 px-6 md:px-12 lg:px-24 bg-white animate-in fade-in slide-in-from-bottom-4 duration-500">
<h2 className="text-3xl md:text-4xl font-black text-center text-[#1A202C] mb-12 tracking-tight uppercase">
Discover by <span className="text-[#f97316]">Category</span>
</h2>
{/* Three Standard Categories */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-8">
{threeCategories.map((cat) => (
<div
key={cat.id}
onClick={() => onSelectCategory(cat.id)}
className="group relative h-[380px] md:h-[500px] rounded-[3rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-700 hover:scale-[1.02] hover:shadow-[0_40px_80px_rgba(0,0,0,0.25)]"
>
{/* Background Image with Zoom Effect */}
<img
src={cat.image}
alt={cat.name}
className="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110"
/>
{/* Premium Multi-layer Overlay */}
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors duration-500"></div>
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-90 transition-opacity duration-500"></div>
{/* Border Glow on Hover */}
<div className="absolute inset-0 border-[3px] border-white/0 group-hover:border-white/20 rounded-[3rem] transition-all duration-500 scale-95 group-hover:scale-100"></div>
{/* Rich Typography and Content */}
<div className="absolute bottom-10 left-10 right-10 flex items-end justify-between">
<div>
<span className="inline-block px-4 py-1.5 bg-white/10 backdrop-blur-md rounded-full text-white/70 text-[10px] uppercase font-black tracking-[0.2em] mb-3 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
Explore Events
</span>
<h3 className="text-3xl md:text-4xl font-black text-white tracking-tighter leading-none mb-1 shadow-black/20">
{cat.name}
</h3>
<div className="h-1 w-12 bg-[#f97316] rounded-full transition-all duration-500 group-hover:w-24"></div>
</div>
<div className="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-white text-xl transform translate-x-12 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500 delay-100">
<i className="fas fa-arrow-right"></i>
</div>
</div>
</div>
))}
</div>
{/* Centre Activity Wide Card */}
{centreActivityCategory && (
<div className="max-w-7xl mx-auto">
<div
onClick={() => onSelectCategory(centreActivityCategory.id)}
className="group relative h-[320px] md:h-[420px] rounded-[3.5rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.15)] transition-all duration-700 hover:scale-[1.01] hover:shadow-[0_40px_80px_rgba(0,0,0,0.3)] border-[3px] border-transparent hover:border-white/20"
>
{/* Background Image with Zoom Effect */}
<img
src={centreActivityCategory.image}
alt={centreActivityCategory.name}
className="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105"
/>
{/* Overlays */}
<div className="absolute inset-0 bg-black/45 group-hover:bg-black/35 transition-colors duration-500"></div>
<div className="absolute inset-0 bg-gradient-to-r from-black/95 via-black/60 to-transparent"></div>
{/* Rich Typography and Content */}
<div className="absolute inset-0 flex items-center justify-between px-10 md:px-20">
<div className="space-y-4 text-left">
<span className="inline-block px-5 py-2 bg-white/10 backdrop-blur-md rounded-full text-white/95 text-[10px] uppercase font-black tracking-[0.25em] opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-2 group-hover:translate-y-0">
Special Hub Activities
</span>
<h3 className="text-4xl md:text-6xl font-black text-white tracking-tighter leading-none shadow-black/20 uppercase">
{centreActivityCategory.name}
</h3>
<p className="text-white/80 font-medium tracking-wide text-xs md:text-sm max-w-2xl leading-relaxed">
Engage in multidisciplinary innovation, advanced research hubs, incubation cells, and collaborative special projects driving academic excellence.
</p>
<div className="h-1.5 w-20 bg-[#f97316] rounded-full transition-all duration-500 group-hover:w-40"></div>
</div>
<div className="w-16 h-16 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-3xl flex items-center justify-center text-white text-2xl md:text-3xl transform translate-x-12 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500 delay-100 mr-4 shrink-0">
<i className="fas fa-arrow-right"></i>
</div>
</div>
</div>
</div>
)}
</section>
);
};
export default CategoryGrid;