From e8d5f5f82b8eb6b6f0334a7e7d2a706b3ec7fb94 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 6 Mar 2026 11:00:09 +0000 Subject: [PATCH] Add src/app/tickets/page.tsx --- src/app/tickets/page.tsx | 252 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 src/app/tickets/page.tsx diff --git a/src/app/tickets/page.tsx b/src/app/tickets/page.tsx new file mode 100644 index 0000000..75840ba --- /dev/null +++ b/src/app/tickets/page.tsx @@ -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>([]); + const [selectedPlan, setSelectedPlan] = useState(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 ( + + + +
+
+
+ + Esports Championship +
+

Counter-Strike 2 Championship

+

+ Secure your spot at the biggest esports event of the year. Watch professional teams compete for glory and prize pools. +

+
+
+ +
+ 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"], + }, + ]} + /> +
+ +
+
+
+

+ + Your Cart +

+ + {cart.length === 0 ? ( +

+ Your cart is empty. Select tickets above to get started. +

+ ) : ( +
+
+ {cart.map((item) => ( +
+
+

{item.name}

+

${item.price.toFixed(2)} each

+
+
+
+ + {item.quantity} + +
+

+ ${(item.price * item.quantity).toFixed(2)} +

+ +
+
+ ))} +
+ +
+
+ Total: + ${cartTotal.toFixed(2)} +
+ +
+
+ )} +
+
+
+ +
+ +
+ + + + ); +}