bender/fbc034e6-ad7e-4171-aed0-91d4fded13fb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 8 commits from version_2 into main 2026-03-21 10:06:46 +00:00
Conversation 0 Commits 8 Files Changed 8 +976 -8
8 changed files with 976 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/app/admin/page.tsx Normal file
View File

@@ -0,0 +1,202 @@
"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 ProductCardFour from '@/components/sections/product/ProductCardFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { BarChart3, Users, ImageGallery, TrendingUp, Settings, LogOut } from 'lucide-react';
export default function AdminDashboard() {
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 Admin"
navItems={[
{ name: "Events", id: "events" },
{ name: "Gallery", id: "gallery" },
{ name: "Analytics", id: "analytics" },
{ name: "Users", id: "users" }
]}
button={{ text: "Logout", href: "#" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Admin Command Center"
description="Manage events, gallery uploads, sales analytics, and user administration from a unified dashboard. Monitor community engagement in real-time with advanced metrics and controls."
tag="Admin Access"
tagIcon={Settings}
tagAnimation="blur-reveal"
buttons={[
{ text: "View Dashboard", href: "#analytics" },
{ text: "Manage Users", href: "#users" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
imageAlt="Admin dashboard control interface"
showDimOverlay={false}
showBlur={true}
ariaLabel="Admin Dashboard Hero Section"
/>
</div>
<div id="events" data-section="events">
<FeatureCardMedia
title="Event Management Engine"
description="Create, modify, and oversee tournament events. Control registration timelines, bracket management, and event visibility across the platform."
tag="Event Administration"
tagIcon={BarChart3}
tagAnimation="blur-reveal"
features={[
{
id: "event-create", title: "Create New Event", description: "Launch tournaments with customizable brackets, registration limits, and competition rules. Set start dates, registration deadlines, and prize pools.", tag: "Quick Setup", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1", imageAlt: "Event creation interface", buttons: [{ text: "Create Event", href: "#" }]
},
{
id: "event-edit", title: "Edit Event Details", description: "Modify tournament parameters, adjust brackets mid-competition, update participant lists, and manage registration approvals in real-time.", tag: "Live Editing", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=2", imageAlt: "Event editing dashboard", buttons: [{ text: "Edit Events", href: "#" }]
},
{
id: "event-schedule", title: "Schedule & Timeline", description: "Organize tournament schedules with automated notifications. Coordinate match timings, round progressions, and announcement broadcasts to participants.", tag: "Automation Ready", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=3", imageAlt: "Tournament schedule planner", buttons: [{ text: "View Schedule", href: "#" }]
}
]}
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Event Management Dashboard"
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
title="Gallery Upload Management"
description="Administer cosplay showcase and event gallery uploads. Moderate content, verify submissions, organize collections, and manage premium feature access for creators."
tag="Content Moderation"
tagIcon={ImageGallery}
tagAnimation="blur-reveal"
products={[
{
id: "gallery-upload", name: "Pending Reviews", price: "45 Items", variant: "Awaiting Approval", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg", imageAlt: "Gallery submission review queue"
},
{
id: "gallery-featured", name: "Featured Content", price: "128 Items", variant: "Active Showcase", imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg", imageAlt: "Featured gallery collection"
},
{
id: "gallery-archive", name: "Archive Collection", price: "892 Items", variant: "Historical Database", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg", imageAlt: "Gallery archive storage"
}
]}
gridVariant="bento-grid"
animationType="scale-rotate"
textboxLayout="inline-image"
useInvertedBackground={false}
uniformGridCustomHeightClasses="min-h-100 2xl:min-h-110"
ariaLabel="Gallery Management Section"
/>
</div>
<div id="analytics" data-section="analytics">
<MetricCardEleven
title="Sales & Performance Analytics"
description="Monitor real-time revenue metrics, transaction volumes, and engagement statistics. Track platform growth with comprehensive business intelligence dashboards."
tag="Performance Metrics"
tagIcon={TrendingUp}
tagAnimation="blur-reveal"
metrics={[
{
id: "metric-revenue", value: "$47.2K", title: "Monthly Revenue", description: "Total platform sales from premium features and sponsored events", imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=1", imageAlt: "Revenue analytics"
},
{
id: "metric-transactions", value: "1,240", title: "Total Transactions", description: "Completed purchases and premium subscriptions this month", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=4", imageAlt: "Transaction counter"
},
{
id: "metric-engagement", value: "94.2%", title: "Engagement Rate", description: "Active user participation in tournaments and community events", imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=2", imageAlt: "Engagement statistics"
},
{
id: "metric-growth", value: "+23.5%", title: "Month-over-Month Growth", description: "User base expansion and platform adoption metrics", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=5", imageAlt: "Growth trends"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Sales and Analytics Dashboard"
/>
</div>
<div id="users" data-section="users">
<TextSplitAbout
title="User Management System"
description={[
"Comprehensive user administration interface for account management, role assignment, and community moderation. Monitor user activity, verify identities, and enforce community guidelines across all platform members.", "Advanced filtering and search capabilities enable targeted user segments for notifications, promotional campaigns, and policy enforcement. Manage banned accounts, verify premium members, and track user engagement patterns for platform optimization."
]}
showBorder={false}
useInvertedBackground={false}
buttons={[{ text: "Access User Panel", href: "#" }]}
buttonAnimation="slide-up"
ariaLabel="User Management Section"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="Admin Team Feedback"
description="Insights from our administration team managing the OAC platform. Dedicated to maintaining community standards and platform excellence."
tag="Admin Voices"
tagIcon={Users}
tagAnimation="blur-reveal"
testimonials={[
{
id: "testimonial-1", name: "Deepika Rao", handle: "@PlatformDirector", testimonial: "The admin dashboard has streamlined our event management workflow tremendously. Running multiple tournaments simultaneously is now seamless and intuitive.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg", imageAlt: "Platform director"
},
{
id: "testimonial-2", name: "Marcus Chen", handle: "@ContentModManager", testimonial: "Gallery moderation tools are exceptional. The submission review interface makes it easy to curate quality content while maintaining creator satisfaction.", imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg", imageAlt: "Content manager"
},
{
id: "testimonial-3", name: "Sophia Williams", handle: "@AnalyticsHead", testimonial: "The analytics dashboard provides the insights we need to make data-driven decisions. Revenue tracking and user engagement metrics are comprehensive and real-time.", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg", imageAlt: "Analytics lead"
},
{
id: "testimonial-4", name: "James Kumar", handle: "@UserOpsManager", testimonial: "User management has never been easier. The filtering and search capabilities save us hours of administrative work each week.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg", imageAlt: "User operations manager"
},
{
id: "testimonial-5", name: "Elena Rodriguez", handle: "@CommunityGM", testimonial: "The centralized command center lets us manage events, users, and content from one place. This has been revolutionary for our team efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg", imageAlt: "Community GM"
},
{
id: "testimonial-6", name: "David Thompson", handle: "@SalesAnalyst", testimonial: "Real-time analytics and revenue tracking give us the visibility needed to optimize our monetization strategy and understand customer behavior patterns.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-vening-street_1303-3837.jpg", imageAlt: "Sales analyst"
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
speed={35}
topMarqueeDirection="left"
ariaLabel="Admin Team Testimonials"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Admin Suite"
leftLink={{ text: "Admin Docs", href: "#" }}
rightLink={{ text: "Support Portal", href: "#" }}
ariaLabel="Admin Footer Navigation"
/>
</div>
</ThemeProvider>
);
}

111
src/app/cart/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingCart } from 'lucide-react';
export default function CartPage() {
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: "Shop", id: "shop" },
{ name: "Tournament", id: "tournament" },
{ name: "Gallery", id: "gallery" },
{ name: "Community", id: "community" },
{ name: "Power Stats", id: "power-stats" }
]}
button={{ text: "Cart", href: "/cart" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Shopping Cart"
description="Review your selected merchandise and proceed to checkout. Your power level awaits elevation through premium OAC gear."
tag="Order Summary"
tagIcon={ShoppingCart}
tagAnimation="blur-reveal"
buttons={[
{ text: "Continue Shopping", href: "/shop" },
{ text: "Proceed to Checkout", href: "/checkout" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
imageAlt="Shopping cart showcase"
showDimOverlay={false}
showBlur={true}
ariaLabel="Cart Page Hero"
/>
</div>
<div id="cart-items" data-section="cart-items">
<div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-4xl">
<div className="space-y-6">
<h2 className="text-2xl font-bold">Your Cart</h2>
<div className="text-foreground/70 py-12 text-center">
<p className="mb-4">Your cart is currently empty.</p>
<button className="text-primary-cta font-semibold hover:underline">
Continue shopping to add items
</button>
</div>
</div>
</div>
</div>
<div id="checkout" data-section="checkout">
<div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl mt-8">
<h3 className="text-xl font-bold mb-6">Order Summary</h3>
<div className="space-y-4">
<div className="flex justify-between py-2 border-b border-foreground/10">
<span>Subtotal</span>
<span className="font-semibold">$0.00</span>
</div>
<div className="flex justify-between py-2 border-b border-foreground/10">
<span>Shipping</span>
<span className="font-semibold">$0.00</span>
</div>
<div className="flex justify-between py-2 border-b border-foreground/10">
<span>Tax</span>
<span className="font-semibold">$0.00</span>
</div>
<div className="flex justify-between py-3 bg-foreground/5 px-4 rounded-lg">
<span className="font-bold text-lg">Total</span>
<span className="font-bold text-lg text-primary-cta">$0.00</span>
</div>
<button className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 mt-6">
Proceed to Checkout
</button>
<button className="w-full border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5">
Continue Shopping
</button>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Command Center"
leftLink={{ text: "Shop", href: "/shop" }}
rightLink={{ text: "Home", href: "/" }}
ariaLabel="Footer Navigation"
/>
</div>
</ThemeProvider>
);
}

194
src/app/checkout/page.tsx Normal file
View File

@@ -0,0 +1,194 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingCart, CreditCard } from 'lucide-react';
import { useState } from 'react';
import Input from '@/components/form/Input';
export default function CheckoutPage() {
const [email, setEmail] = useState('');
const [fullName, setFullName] = useState('');
const [address, setAddress] = useState('');
const [city, setCity] = useState('');
const [postalCode, setPostalCode] = useState('');
const [cardNumber, setCardNumber] = useState('');
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: "Shop", id: "shop" },
{ name: "Tournament", id: "tournament" },
{ name: "Gallery", id: "gallery" },
{ name: "Community", id: "community" },
{ name: "Power Stats", id: "power-stats" }
]}
button={{ text: "Cart", href: "/cart" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Checkout"
description="Complete your order and receive your premium OAC merchandise. Secure payment processing ensures safe transactions."
tag="Secure Checkout"
tagIcon={CreditCard}
tagAnimation="blur-reveal"
buttons={[
{ text: "Back to Cart", href: "/cart" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
imageAlt="Secure checkout"
showDimOverlay={false}
showBlur={true}
ariaLabel="Checkout Page Hero"
/>
</div>
<div id="checkout-form" data-section="checkout-form">
<div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
<form className="space-y-8">
{/* Shipping Information */}
<div>
<h3 className="text-xl font-bold mb-4">Shipping Information</h3>
<div className="space-y-4">
<Input
value={email}
onChange={setEmail}
type="email"
placeholder="Email address"
required
/>
<Input
value={fullName}
onChange={setFullName}
type="text"
placeholder="Full name"
required
/>
<Input
value={address}
onChange={setAddress}
type="text"
placeholder="Street address"
required
/>
<div className="grid grid-cols-2 gap-4">
<Input
value={city}
onChange={setCity}
type="text"
placeholder="City"
required
/>
<Input
value={postalCode}
onChange={setPostalCode}
type="text"
placeholder="Postal code"
required
/>
</div>
</div>
</div>
{/* Payment Information */}
<div>
<h3 className="text-xl font-bold mb-4">Payment Information</h3>
<div className="space-y-4">
<Input
value={cardNumber}
onChange={setCardNumber}
type="text"
placeholder="Card number"
required
/>
<div className="grid grid-cols-2 gap-4">
<Input
value=""
onChange={() => {}}
type="text"
placeholder="MM/YY"
required
/>
<Input
value=""
onChange={() => {}}
type="text"
placeholder="CVV"
required
/>
</div>
</div>
</div>
{/* Order Summary */}
<div className="bg-foreground/5 rounded-lg p-6">
<h3 className="text-lg font-bold mb-4">Order Summary</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span>Subtotal</span>
<span>$0.00</span>
</div>
<div className="flex justify-between">
<span>Shipping</span>
<span>$0.00</span>
</div>
<div className="flex justify-between">
<span>Tax</span>
<span>$0.00</span>
</div>
<div className="flex justify-between font-bold text-lg border-t border-foreground/10 pt-2 mt-2">
<span>Total</span>
<span className="text-primary-cta">$0.00</span>
</div>
</div>
</div>
{/* Buttons */}
<div className="flex gap-4">
<button
type="submit"
className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90"
>
Complete Purchase
</button>
<button
type="button"
className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5"
>
Cancel
</button>
</div>
</form>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Command Center"
leftLink={{ text: "Shop", href: "/shop" }}
rightLink={{ text: "Cart", href: "/cart" }}
ariaLabel="Footer Navigation"
/>
</div>
</ThemeProvider>
);
}

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>
);
}

86
src/app/page.tsx
View File

@@ -9,9 +9,32 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Camera, Heart, Sparkles, Zap } from 'lucide-react';
import ContactForm from '@/components/form/ContactForm';
import { Camera, Heart, Sparkles, Zap, Mail, Share2 } from 'lucide-react';
import { useState } from 'react';
export default function LandingPage() {
const [isNewsletterSubmitted, setIsNewsletterSubmitted] = useState(false);
const handleNewsletterSubmit = (email: string) => {
setIsNewsletterSubmitted(true);
setTimeout(() => setIsNewsletterSubmitted(false), 3000);
};
const shareOnSocial = (platform: string) => {
const pageUrl = typeof window !== 'undefined' ? window.location.href : 'https://odishaanimeclub.dev';
const title = 'Spirit Bomb Initiative - Odisha Anime Club';
const links: { [key: string]: string } = {
twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(title)}`,
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`,
whatsapp: `https://wa.me/?text=${encodeURIComponent(title + ' ' + pageUrl)}`
};
if (links[platform]) {
window.open(links[platform], '_blank');
}
};
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -189,6 +212,67 @@ export default function LandingPage() {
/>
</div>
<div id="newsletter" data-section="newsletter" className="transition-all duration-500 ease-out">
<ContactForm
title="Join the Elite Circle"
description="Subscribe to receive exclusive tournament announcements, power-level updates, and community insider content delivered to your arena."
tag="Newsletter"
tagIcon={Mail}
inputPlaceholder="Enter your power signature"
buttonText="Ascend Now"
termsText="By subscribing you're confirming that you agree to receive our power-boosting announcements and community updates. You can unsubscribe anytime."
onSubmit={handleNewsletterSubmit}
centered={true}
className={`transform transition-all duration-700 ${isNewsletterSubmitted ? 'scale-105 opacity-100' : 'scale-100'}`}
/>
</div>
<div id="social-sharing" data-section="social-sharing" className="w-full py-16 flex items-center justify-center">
<div className="max-w-6xl mx-auto px-4 w-full">
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 flex-wrap">
<p className="text-center text-sm md:text-base font-medium opacity-70 w-full md:w-auto">Share the Spirit Bomb Initiative:</p>
<div className="flex items-center gap-3 md:gap-4 flex-wrap justify-center">
<button
onClick={() => shareOnSocial('twitter')}
className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
aria-label="Share on Twitter"
title="Share on Twitter"
>
<Share2 size={18} />
<span className="hidden sm:inline">Twitter</span>
</button>
<button
onClick={() => shareOnSocial('facebook')}
className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
aria-label="Share on Facebook"
title="Share on Facebook"
>
<Share2 size={18} />
<span className="hidden sm:inline">Facebook</span>
</button>
<button
onClick={() => shareOnSocial('linkedin')}
className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
aria-label="Share on LinkedIn"
title="Share on LinkedIn"
>
<Share2 size={18} />
<span className="hidden sm:inline">LinkedIn</span>
</button>
<button
onClick={() => shareOnSocial('whatsapp')}
className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
aria-label="Share on WhatsApp"
title="Share on WhatsApp"
>
<Share2 size={18} />
<span className="hidden sm:inline">WhatsApp</span>
</button>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Command Center"

107
src/app/product/[id]/page.tsx Normal file
View File

@@ -0,0 +1,107 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingCart, ChevronLeft } from 'lucide-react';
import { useParams } from 'next/navigation';
const productData: { [key: string]: any } = {
"1": {
id: "1", name: "Power Hoodie", price: "$49.99", description: "Premium cotton blend hoodie with embroidered OAC logo. Perfect for representing your power level in style.", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg", imageAlt: "Power Hoodie Premium Cotton Blend", variant: "Premium Cotton Blend", details: "100% comfort, 80% cotton, 20% polyester. Available in XS to 3XL."
},
"2": {
id: "2", name: "Elite T-Shirt", price: "$24.99", description: "Limited edition graphic tee featuring exclusive OAC tournament artwork.", imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg", imageAlt: "Elite T-Shirt Limited Edition", variant: "Limited Edition Print", details: "100% certified organic cotton. Sustainable production. Unisex sizing."
},
"3": {
id: "3", name: "Champion Cap", price: "$19.99", description: "Adjustable baseball cap with embroidered champion badge. Show off your elite status.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg", imageAlt: "Champion Cap Adjustable Fit", variant: "Adjustable Fit", details: "Breathable mesh back. Curved bill. Adjustable snapback closure."
}
};
export default function ProductPage() {
const params = useParams();
const productId = params?.id as string;
const product = productData[productId] || productData["1"];
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: "Shop", id: "shop" },
{ name: "Tournament", id: "tournament" },
{ name: "Gallery", id: "gallery" },
{ name: "Community", id: "community" },
{ name: "Power Stats", id: "power-stats" }
]}
button={{ text: "Cart", href: "/cart" }}
/>
</div>
<div id="product" data-section="product">
<HeroOverlay
title={product.name}
description={product.description}
tag={product.variant}
tagIcon={ShoppingCart}
tagAnimation="blur-reveal"
buttons={[
{ text: "Add to Cart", href: "/cart" },
{ text: "Back to Shop", href: "/shop" }
]}
buttonAnimation="slide-up"
imageSrc={product.imageSrc}
imageAlt={product.imageAlt}
showDimOverlay={false}
showBlur={true}
ariaLabel={`${product.name} Product Details`}
/>
</div>
<div id="details" data-section="details">
<div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold mb-2">{product.name}</h2>
<p className="text-xl font-semibold text-primary-cta mb-4">{product.price}</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-2">Product Details</h3>
<p className="text-foreground/80">{product.details}</p>
</div>
<div className="flex gap-4">
<button className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90">
Add to Cart
</button>
<button className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-card">
Continue Shopping
</button>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Command Center"
leftLink={{ text: "Shop", href: "/shop" }}
rightLink={{ text: "Cart", href: "/cart" }}
ariaLabel="Footer Navigation"
/>
</div>
</ThemeProvider>
);
}

113
src/app/shop/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingCart } from 'lucide-react';
export default function ShopPage() {
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: "Shop", id: "catalog" },
{ name: "Tournament", id: "tournament" },
{ name: "Gallery", id: "gallery" },
{ name: "Community", id: "community" },
{ name: "Power Stats", id: "power-stats" }
]}
button={{ text: "Cart", href: "/cart" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Merchandise Store"
description="Discover premium official merchandise from Odisha Anime Club. From apparel to collectibles, find everything you need to represent your power level."
tag="Shop Now"
tagIcon={ShoppingCart}
tagAnimation="blur-reveal"
buttons={[
{ text: "Browse Catalog", href: "#catalog" },
{ text: "View Cart", href: "/cart" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
imageAlt="Merchandise store showcase"
showDimOverlay={false}
showBlur={true}
ariaLabel="Shop Hero Section"
/>
</div>
<div id="catalog" data-section="catalog">
<ProductCardFour
title="Complete Merchandise Catalog"
description="Explore our full collection of premium anime merchandise. Every product is carefully curated and verified for authenticity and quality."
tag="All Products"
tagIcon={ShoppingCart}
tagAnimation="blur-reveal"
products={[
{
id: "merch-hoodie", name: "Power Hoodie", price: "$49.99", variant: "Premium Cotton Blend", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg", imageAlt: "Power Hoodie Premium Cotton Blend"
},
{
id: "merch-tshirt", name: "Elite T-Shirt", price: "$24.99", variant: "Limited Edition Print", imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg", imageAlt: "Elite T-Shirt Limited Edition"
},
{
id: "merch-cap", name: "Champion Cap", price: "$19.99", variant: "Adjustable Fit", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg", imageAlt: "Champion Cap Adjustable Fit"
},
{
id: "merch-badges", name: "Tournament Badge Set", price: "$14.99", variant: "Collectible 5-Piece Set", imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1", imageAlt: "Tournament Badge Collectible Set"
},
{
id: "merch-poster", name: "Power Level Poster", price: "$9.99", variant: "A3 Size 300gsm Paper", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg", imageAlt: "Power Level Poster A3 Size"
},
{
id: "merch-bottle", name: "Signature Water Bottle", price: "$34.99", variant: "Double-Wall Insulated", imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg", imageAlt: "Signature Water Bottle Double-Wall Insulated"
},
{
id: "merch-mug", name: "Elite Mug", price: "$12.99", variant: "Ceramic 12oz", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg", imageAlt: "Elite Mug Ceramic 12oz"
},
{
id: "merch-keychain", name: "Power Keychain", price: "$7.99", variant: "Metal Alloy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg", imageAlt: "Power Keychain Metal Alloy"
},
{
id: "merch-pin", name: "Enamel Pin Collection", price: "$11.99", variant: "Limited 3-Pack", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg", imageAlt: "Enamel Pin Collection Limited 3-Pack"
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="scale-rotate"
textboxLayout="inline-image"
useInvertedBackground={false}
uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
ariaLabel="Product Catalog Section"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="OAC Command Center"
leftLink={{ text: "Home", href: "/" }}
rightLink={{ text: "Cart", href: "/cart" }}
ariaLabel="Footer Navigation"
/>
</div>
</ThemeProvider>
);
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #000000;
--card: #1f1f40;
--foreground: #ffffff;
--primary-cta: #ffffff;
--background: #0a0e27;
--card: #141829;
--foreground: #f0f0f0;
--primary-cta: #00d4ff;
--primary-cta-text: #0a051a;
--secondary-cta: #0d0d2b;
--secondary-cta: #7c3aed;
--secondary-cta-text: #d4d4f6;
--accent: #3d2880;
--background-accent: #663cff;
--accent: #00ffff;
--background-accent: #1a1f3a;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);