216 lines
7.3 KiB
TypeScript
216 lines
7.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|