Add src/app/tickets/page.tsx
This commit is contained in:
252
src/app/tickets/page.tsx
Normal file
252
src/app/tickets/page.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import { ShoppingCart, Ticket, ArrowRight, Check } from "lucide-react";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function TicketsPage() {
|
||||
const [cart, setCart] = useState<Array<{ id: string; name: string; price: number; quantity: number }>>([]);
|
||||
const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
|
||||
|
||||
const addToCart = (planId: string, planName: string, price: number) => {
|
||||
const existingItem = cart.find((item) => item.id === planId);
|
||||
if (existingItem) {
|
||||
setCart(
|
||||
cart.map((item) =>
|
||||
item.id === planId ? { ...item, quantity: item.quantity + 1 } : item
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setCart([...cart, { id: planId, name: planName, price, quantity: 1 }]);
|
||||
}
|
||||
setSelectedPlan(planId);
|
||||
};
|
||||
|
||||
const removeFromCart = (planId: string) => {
|
||||
setCart(cart.filter((item) => item.id !== planId));
|
||||
};
|
||||
|
||||
const updateQuantity = (planId: string, quantity: number) => {
|
||||
if (quantity <= 0) {
|
||||
removeFromCart(planId);
|
||||
} else {
|
||||
setCart(
|
||||
cart.map((item) =>
|
||||
item.id === planId ? { ...item, quantity } : item
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const cartTotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||
|
||||
const handleCheckout = () => {
|
||||
if (cart.length === 0) {
|
||||
alert("Please add tickets to your cart");
|
||||
return;
|
||||
}
|
||||
alert(`Processing checkout for ${cart.length} ticket(s) - Total: $${cartTotal.toFixed(2)}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Counter-Strike"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Competitive", id: "#competitive" },
|
||||
{ name: "Community", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="tickets-hero" data-section="tickets-hero" className="py-20 text-center">
|
||||
<div className="max-w-3xl mx-auto px-4">
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
<Ticket className="w-6 h-6 text-primary-cta" />
|
||||
<span className="text-sm font-medium text-primary-cta">Esports Championship</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-6">Counter-Strike 2 Championship</h1>
|
||||
<p className="text-lg text-foreground/70 mb-8">
|
||||
Secure your spot at the biggest esports event of the year. Watch professional teams compete for glory and prize pools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing" className="py-20">
|
||||
<PricingCardFive
|
||||
title="Event Tickets & Packages"
|
||||
description="Choose the perfect ticket package to experience the championship"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "general-admission", tag: "General Admission", price: "$49", period: "/ticket", description: "Standard event access with general seating in the venue.", button: {
|
||||
text: "Add to Cart", onClick: () => addToCart("general-admission", "General Admission", 49),
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"General venue access", "Standard seating", "Complimentary water and snacks", "Official event merchandise discount"],
|
||||
},
|
||||
{
|
||||
id: "vip-package", tag: "VIP Package", tagIcon: Check,
|
||||
price: "$149", period: "/ticket", description: "Premium experience with priority seating and exclusive perks.", button: {
|
||||
text: "Add to Cart", onClick: () => addToCart("vip-package", "VIP Package", 149),
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"Premium seating (front section)", "Early venue entry", "VIP lounge access", "Exclusive event merchandise", "Meet & greet opportunity", "Premium food and beverages"],
|
||||
},
|
||||
{
|
||||
id: "pro-pass", tag: "Pro Pass", tagIcon: Check,
|
||||
price: "$299", period: "/ticket", description: "The ultimate championship experience with full access and exclusives.", button: {
|
||||
text: "Add to Cart", onClick: () => addToCart("pro-pass", "Pro Pass", 299),
|
||||
},
|
||||
featuresTitle: "What's Included:", features: [
|
||||
"VIP ringside seating", "Exclusive afterparty access", "Professional photography package", "Limited edition pro pass merchandise", "Private player autograph session", "Premium dining experience", "Behind-the-scenes tour", "24/7 concierge support"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cart" data-section="cart" className="py-20">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
<h2 className="text-3xl font-bold mb-8 flex items-center gap-2">
|
||||
<ShoppingCart className="w-8 h-8" />
|
||||
Your Cart
|
||||
</h2>
|
||||
|
||||
{cart.length === 0 ? (
|
||||
<p className="text-foreground/60 text-center py-12">
|
||||
Your cart is empty. Select tickets above to get started.
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
<div className="space-y-4 mb-8">
|
||||
{cart.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between p-4 bg-background rounded-lg border border-foreground/10"
|
||||
>
|
||||
<div>
|
||||
<p className="font-semibold">{item.name}</p>
|
||||
<p className="text-sm text-foreground/60">${item.price.toFixed(2)} each</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center border border-foreground/20 rounded">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity - 1)}
|
||||
className="px-3 py-2 text-foreground/60 hover:text-foreground"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="px-4">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
||||
className="px-3 py-2 text-foreground/60 hover:text-foreground"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<p className="font-semibold w-24 text-right">
|
||||
${(item.price * item.quantity).toFixed(2)}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => removeFromCart(item.id)}
|
||||
className="text-red-500 hover:text-red-600 font-medium"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-foreground/10 pt-6 mb-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-lg font-semibold">Total:</span>
|
||||
<span className="text-2xl font-bold text-primary-cta">${cartTotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCheckout}
|
||||
className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center gap-2"
|
||||
>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
tag="Questions?"
|
||||
tagIcon={Ticket}
|
||||
title="Need Help with Tickets?"
|
||||
description="Our support team is ready to assist you with any questions about tickets, packages, or the event."
|
||||
buttons={[
|
||||
{ text: "Contact Support", href: "mailto:support@counter-strike.net" },
|
||||
{ text: "Back to Home", href: "/" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Counter-Strike"
|
||||
copyrightText="© 2024 Counter-Strike. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Event", items: [
|
||||
{ label: "Tickets", href: "/tickets" },
|
||||
{ label: "Schedule", href: "/tickets#schedule" },
|
||||
{ label: "Venue", href: "/tickets#venue" },
|
||||
{ label: "FAQ", href: "/tickets#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Information", items: [
|
||||
{ label: "About Event", href: "#" },
|
||||
{ label: "Teams", href: "#" },
|
||||
{ label: "Matches", href: "#" },
|
||||
{ label: "Prizes", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Refund Policy", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user