From 1954429fd0c2a28d3d45b718d47e154f4a11107b Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 5 Mar 2026 22:00:16 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 165 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 152 insertions(+), 13 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 05ade7d..57f6c1f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,9 +9,52 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree'; import FaqSplitText from '@/components/sections/faq/FaqSplitText'; import ContactCTA from '@/components/sections/contact/ContactCTA'; import FooterMedia from '@/components/sections/footer/FooterMedia'; -import { Zap, Flame, Sparkles, Crown, Users, Star, Clock, TrendingUp, Mail } from 'lucide-react'; +import { Zap, Flame, Sparkles, Crown, Users, Star, Clock, TrendingUp, Mail, Calendar, X } from 'lucide-react'; +import { useState } from 'react'; export default function LandingPage() { + const [showBookingModal, setShowBookingModal] = useState(false); + const [selectedPackage, setSelectedPackage] = useState(null); + const [groupSize, setGroupSize] = useState(1); + const [selectedDate, setSelectedDate] = useState(''); + const [selectedTime, setSelectedTime] = useState(''); + + const calculatePrice = (basePrice: number, quantity: number) => { + if (quantity >= 4) { + return Math.round(basePrice * 0.8 * 100) / 100; + } + return basePrice; + }; + + const packagePrices: Record = { + basic: 49, + destroyer: 79, + elite: 129, + }; + + const openBookingModal = (packageId: string) => { + setSelectedPackage(packageId); + setGroupSize(1); + setShowBookingModal(true); + }; + + const closeBookingModal = () => { + setShowBookingModal(false); + setSelectedPackage(null); + setGroupSize(1); + setSelectedDate(''); + setSelectedTime(''); + }; + + const handleBooking = () => { + if (selectedPackage && selectedDate && selectedTime) { + const pricePerPerson = calculatePrice(packagePrices[selectedPackage], groupSize); + const totalPrice = pricePerPerson * groupSize; + alert(`Booking confirmed!\nPackage: ${selectedPackage}\nGroup Size: ${groupSize}\nDate: ${selectedDate}\nTime: ${selectedTime}\nTotal: €${totalPrice.toFixed(2)}`); + closeBookingModal(); + } + }; + return ( openBookingModal('destroyer') }, { text: "Learn More", href: "#about" }, ]} buttonAnimation="slide-up" @@ -90,34 +133,34 @@ export default function LandingPage() {
openBookingModal('basic') }, ], features: [ - "30 minutes of pure destruction", "All safety gear included", "Glass and ceramics", "Solo or duo session", "Perfect for first-timers"], + "30 minutes of pure destruction", "All safety gear included", "Glass and ceramics", "Solo or duo session", "Perfect for first-timers", "Group price: €40/person (4+ people)"], }, { id: "destroyer", badge: "Most Popular", badgeIcon: Sparkles, - price: "€79", subtitle: "Bestes Preis-Leistungs-Verhältnis – 60 Minuten pure Eskalation", buttons: [ - { text: "Book Now", href: "https://booking.rageroomvienna.local/destroyer" }, + price: "€79", subtitle: "Best Value – 60 Minutes | Save 18% with groups of 4+", buttons: [ + { text: "Book Now", onClick: () => openBookingModal('destroyer') }, ], features: [ - "60 minutes of maximum chaos", "Premium safety equipment", "Glass, ceramics & electronics", "Doubles or small group", "Most items to smash", "Best value experience"], + "60 minutes of maximum chaos", "Premium safety equipment", "Glass, ceramics & electronics", "Doubles or small group", "Most items to smash", "Best value experience", "Group price: €63/person (4+ people)"], }, { id: "elite", badge: "Ultimate", badgeIcon: Crown, - price: "€129", subtitle: "Total Annihilation – 90 Minutes", buttons: [ - { text: "Reserve Elite", href: "https://booking.rageroomvienna.local/elite" }, + price: "€129", subtitle: "Total Annihilation – 90 Minutes | Save 18% with groups of 4+", buttons: [ + { text: "Reserve Elite", onClick: () => openBookingModal('elite') }, ], features: [ - "90 minutes unlimited destruction", "VIP treatment & priorities", "All destruction categories", "Small group packages", "Premium room setup", "Professional photos included"], + "90 minutes unlimited destruction", "VIP treatment & priorities", "All destruction categories", "Small group packages", "Premium room setup", "Professional photos included", "Group price: €103/person (4+ people)"], }, ]} animationType="slide-up" @@ -177,7 +220,7 @@ export default function LandingPage() { title="Let's Get You Booked" description="Choose your package above and select your time slot on our calendar. Or get in touch with questions – our team is ready to help you plan the perfect destruction session." buttons={[ - { text: "Book a Session", href: "#pricing" }, + { text: "Book a Session", onClick: () => openBookingModal('destroyer') }, { text: "Contact Us", href: "mailto:bookings@rageroomvienna.local" }, ]} buttonAnimation="slide-up" @@ -217,6 +260,102 @@ export default function LandingPage() { ]} />
+ + {showBookingModal && ( +
+
+
+

Book Your Session

+ +
+ +
+
+ + +
+ +
+ +
+ + {groupSize} + +
+ {selectedPackage && groupSize >= 4 && ( +

✓ Group discount applied! €40 per person

+ )} +
+ +
+ + setSelectedDate(e.target.value)} + className="w-full border rounded px-3 py-2" + /> +
+ +
+ + +
+ + {selectedPackage && ( +
+

Price per person

+

€{calculatePrice(packagePrices[selectedPackage], groupSize).toFixed(2)}

+

Total: €{(calculatePrice(packagePrices[selectedPackage], groupSize) * groupSize).toFixed(2)}

+
+ )} + + +
+
+
+ )} ); } -- 2.49.1