Add src/app/events/page.tsx

This commit is contained in:
2026-03-21 10:06:40 +00:00
parent 734b6a13cc
commit d34b484478

157
src/app/events/page.tsx Normal file
View File

@@ -0,0 +1,157 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Sparkles, Zap, CheckCircle } from 'lucide-react';
export default function EventsPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="mediumSizeLargeTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-radial"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="OAC"
navItems={[
{ name: "Home", id: "/" },
{ name: "Events", id: "events" },
{ name: "Tickets", id: "tickets" },
{ name: "Management", id: "management" }
]}
button={{ text: "Book Tickets", href: "#tickets" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Event Booking Arena"
description="Secure your spot in the most electrifying anime tournaments and community events. Browse upcoming tournaments, book tickets, and level up your tournament experience with integrated payment processing."
tag="Seamless Ticketing"
tagIcon={Zap}
tagAnimation="blur-reveal"
buttons={[
{ text: "Browse Events", href: "#events" },
{ text: "My Bookings", href: "#management" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
imageAlt="Tournament arena with event energy"
showDimOverlay={false}
showBlur={true}
ariaLabel="Events Booking Hero Section"
/>
</div>
<div id="events" data-section="events">
<FeatureCardMedia
title="Upcoming Events & Tournaments"
description="Discover exclusive events with real-time ticket availability, pricing tiers, and detailed event information. Book your tickets instantly and receive confirmation within seconds."
tag="Event Calendar"
tagIcon={Calendar}
tagAnimation="blur-reveal"
features={[
{
id: "event-spring-2024", title: "Spring Clash 2024 - VIP Experience", description: "Premium tournament access with front-row seating, exclusive merchandise, and meet-and-greet with tournament organizers. Early bird pricing available.", tag: "VIP Available", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1", imageAlt: "Spring Clash tournament VIP experience", buttons: [
{ text: "Book VIP - $89", href: "#booking" },
{ text: "Standard - $49", href: "#booking" }
]
},
{
id: "event-summer-gauntlet", title: "Summer Power Gauntlet - Group Packages", description: "Peak season tournament with group booking discounts. Bring your squad and save up to 30%. Includes group photo session and team merchandise pack.", tag: "Group Discount", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=2", imageAlt: "Summer Gauntlet group package", buttons: [
{ text: "Book Groups 5+", href: "#booking" },
{ text: "View Details", href: "#" }
]
},
{
id: "event-autumn-championship", title: "Autumn Championship - Elite Pass", description: "Exclusive championship event with tiered seating, premium hospitality, and VIP lounge access. Limited availability—secure your spot today.", tag: "Elite Pass", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=3", imageAlt: "Autumn Championship elite experience", buttons: [
{ text: "Book Elite - $149", href: "#booking" },
{ text: "Waitlist", href: "#" }
]
}
]}
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Events and Ticketing Gallery"
/>
</div>
<div id="tickets" data-section="tickets">
<MetricCardEleven
title="Booking System Features"
description="Integrated payment gateway supporting Razorpay and Stripe. Instant confirmation, secure transactions, and real-time inventory management."
tag="Payment Processing"
tagIcon={Sparkles}
tagAnimation="blur-reveal"
metrics={[
{
id: "metric-payment-gateway", value: "2", title: "Payment Partners", description: "Razorpay and Stripe integration for secure, instant payments", imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=1", imageAlt: "Payment gateway partners"
},
{
id: "metric-tickets-sold", value: "2,847", title: "Tickets Booked", description: "Active ticket reservations across all upcoming events", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=4", imageAlt: "Ticket booking counter"
},
{
id: "metric-conversion-rate", value: "94%", title: "Success Rate", description: "Checkout completion rate with zero failed transactions", imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=2", imageAlt: "Transaction success rate"
},
{
id: "metric-support", value: "24/7", title: "Customer Support", description: "Round-the-clock assistance for booking and payment issues", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=5", imageAlt: "Support availability"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Booking System Metrics"
/>
</div>
<div id="management" data-section="management">
<FeatureCardMedia
title="Event Management Dashboard"
description="Comprehensive event management tools for organizers. Track bookings, manage inventory, send confirmations, and analyze event performance with real-time analytics."
tag="Admin Tools"
tagIcon={CheckCircle}
tagAnimation="blur-reveal"
features={[
{
id: "feature-booking-dashboard", title: "Booking Management", description: "Real-time dashboard showing ticket sales, reservation status, and attendee information. Export reports, manage refunds, and track revenue metrics.", tag: "Real-Time Updates", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=6", imageAlt: "Booking dashboard interface", buttons: [{ text: "Access Dashboard", href: "#" }]
},
{
id: "feature-inventory-management", title: "Inventory Control", description: "Dynamic pricing, tier management, and stock allocation. Set capacity limits, activate flash sales, and manage waitlists automatically with automated notifications.", tag: "Automated Alerts", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=7", imageAlt: "Inventory management system", buttons: [{ text: "Manage Inventory", href: "#" }]
},
{
id: "feature-confirmation-system", title: "Automated Confirmations", description: "Instant email and SMS confirmations with ticket barcodes. Customizable confirmation templates, reminder notifications, and check-in QR code generation.", tag: "SMS & Email", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=8", imageAlt: "Confirmation system", buttons: [{ text: "Setup Templates", href: "#" }]
}
]}
animationType="slide-up"
textboxLayout="split-actions"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Event Management Tools"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Events Hub"
leftLink={{ text: "Event Calendar", href: "/events" }}
rightLink={{ text: "Support", href: "mailto:events@odishaanimeclub.dev" }}
ariaLabel="Events Footer Navigation"
/>
</div>
</ThemeProvider>
);
}