Init
This commit is contained in:
Julien Froidefond
215
components/EventsPageSection.tsx
Normal file
215
components/EventsPageSection.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
|
||||
interface Event {
|
||||
id: number;
|
||||
date: string;
|
||||
name: string;
|
||||
description: string;
|
||||
type: "summit" | "launch" | "festival" | "competition";
|
||||
status: "upcoming" | "live" | "past";
|
||||
}
|
||||
|
||||
const events: Event[] = [
|
||||
{
|
||||
id: 1,
|
||||
date: "NOVEMBER 18th, 2023",
|
||||
name: "Tech Innovation Summit",
|
||||
description:
|
||||
"Join industry leaders and innovators for a day of cutting-edge technology discussions, AI breakthroughs, and networking opportunities.",
|
||||
type: "summit",
|
||||
status: "past",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: "DECEMBER 3rd, 2023",
|
||||
name: "AI Revolution Launch",
|
||||
description:
|
||||
"Witness the launch of revolutionary AI systems that will reshape the gaming landscape. Exclusive previews and early access opportunities.",
|
||||
type: "launch",
|
||||
status: "past",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: "DECEMBER 22nd, 2023",
|
||||
name: "Winter Code Festival",
|
||||
description:
|
||||
"A celebration of coding excellence with hackathons, coding challenges, and prizes. Showcase your skills and compete with the best developers.",
|
||||
type: "festival",
|
||||
status: "past",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "JANUARY 15th, 2024",
|
||||
name: "Quantum Computing Expo",
|
||||
description:
|
||||
"Explore the future of quantum computing in gaming. Interactive demos, expert talks, and hands-on workshops for all skill levels.",
|
||||
type: "summit",
|
||||
status: "upcoming",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: "FEBRUARY 8th, 2024",
|
||||
name: "Cyber Arena Championship",
|
||||
description:
|
||||
"The ultimate competitive gaming event. Compete for glory, exclusive rewards, and the title of Cyber Arena Champion. Registration now open.",
|
||||
type: "competition",
|
||||
status: "upcoming",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: "MARCH 12th, 2024",
|
||||
name: "Spring Tech Gala",
|
||||
description:
|
||||
"An elegant evening celebrating technological achievements. Awards ceremony, networking, and exclusive announcements from top tech companies.",
|
||||
type: "festival",
|
||||
status: "upcoming",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventTypeColor = (type: Event["type"]) => {
|
||||
switch (type) {
|
||||
case "summit":
|
||||
return "from-blue-600 to-cyan-500";
|
||||
case "launch":
|
||||
return "from-purple-600 to-pink-500";
|
||||
case "festival":
|
||||
return "from-pixel-gold to-orange-500";
|
||||
case "competition":
|
||||
return "from-red-600 to-orange-500";
|
||||
default:
|
||||
return "from-gray-600 to-gray-500";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: Event["status"]) => {
|
||||
switch (status) {
|
||||
case "upcoming":
|
||||
return (
|
||||
<span className="px-3 py-1 bg-green-900/50 border border-green-500/50 text-green-400 text-xs uppercase tracking-widest rounded">
|
||||
Upcoming
|
||||
</span>
|
||||
);
|
||||
case "live":
|
||||
return (
|
||||
<span className="px-3 py-1 bg-red-900/50 border border-red-500/50 text-red-400 text-xs uppercase tracking-widest rounded animate-pulse">
|
||||
Live Now
|
||||
</span>
|
||||
);
|
||||
case "past":
|
||||
return (
|
||||
<span className="px-3 py-1 bg-gray-800/50 border border-gray-600/50 text-gray-400 text-xs uppercase tracking-widest rounded">
|
||||
Past
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function EventsPageSection() {
|
||||
return (
|
||||
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('/got-2.jpg')`,
|
||||
}}
|
||||
>
|
||||
{/* Dark overlay for readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
|
||||
{/* Title Section */}
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 tracking-tight">
|
||||
<span
|
||||
className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
|
||||
style={{
|
||||
textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
|
||||
}}
|
||||
>
|
||||
EVENTS
|
||||
</span>
|
||||
</h1>
|
||||
<div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-6 tracking-wide">
|
||||
<span>✦</span>
|
||||
<span>Upcoming & Past Events</span>
|
||||
<span>✦</span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm max-w-2xl mx-auto">
|
||||
Join us for exciting tech events, competitions, and celebrations
|
||||
throughout the year
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Events Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{events.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm hover:border-pixel-gold/50 transition group"
|
||||
>
|
||||
{/* Event Header */}
|
||||
<div
|
||||
className={`h-2 bg-gradient-to-r ${getEventTypeColor(
|
||||
event.type
|
||||
)}`}
|
||||
></div>
|
||||
|
||||
{/* Event Content */}
|
||||
<div className="p-6">
|
||||
{/* Status Badge */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
{getStatusBadge(event.status)}
|
||||
<span className="text-pixel-gold text-xs uppercase tracking-widest">
|
||||
{event.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="text-white text-sm font-bold uppercase tracking-widest mb-3">
|
||||
{event.date}
|
||||
</div>
|
||||
|
||||
{/* Event Name */}
|
||||
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-pixel-gold transition">
|
||||
{event.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-400 text-sm leading-relaxed mb-4">
|
||||
{event.description}
|
||||
</p>
|
||||
|
||||
{/* Action Button */}
|
||||
{event.status === "upcoming" && (
|
||||
<button className="w-full px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
|
||||
Register Now
|
||||
</button>
|
||||
)}
|
||||
{event.status === "live" && (
|
||||
<button className="w-full px-4 py-2 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition animate-pulse">
|
||||
Join Live
|
||||
</button>
|
||||
)}
|
||||
{event.status === "past" && (
|
||||
<button className="w-full px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-500 uppercase text-xs tracking-widest rounded cursor-not-allowed">
|
||||
Event Ended
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-gray-500 text-sm">
|
||||
Stay updated with our latest events and announcements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user