Merge version_2 into main #2
165
src/app/page.tsx
165
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<string | null>(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<string, number> = {
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -45,7 +88,7 @@ export default function LandingPage() {
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Book Your Session", href: "#pricing" },
|
||||
{ text: "Book Your Session", onClick: () => openBookingModal('destroyer') },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -90,34 +133,34 @@ export default function LandingPage() {
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Choose Your Explosion"
|
||||
description="Three fury-fueled packages designed to match your rage level. All include protective gear, tools, and unlimited smashing."
|
||||
description="Three fury-fueled packages designed to match your rage level. All include protective gear, tools, and unlimited smashing. Group discount: 4+ people pay only €40 per person per package!"
|
||||
tag="Pricing"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Beginner", badgeIcon: Flame,
|
||||
price: "€49", subtitle: "Perfect First Strike – 30 Minutes", buttons: [
|
||||
{ text: "Select Package", href: "https://booking.rageroomvienna.local/basic" },
|
||||
price: "€49", subtitle: "Perfect First Strike – 30 Minutes | Save 18% with groups of 4+", buttons: [
|
||||
{ text: "Book Package", onClick: () => 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() {
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showBookingModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full">
|
||||
<div className="flex items-center justify-between p-6 border-b">
|
||||
<h2 className="text-2xl font-bold">Book Your Session</h2>
|
||||
<button
|
||||
onClick={closeBookingModal}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Package</label>
|
||||
<select
|
||||
value={selectedPackage || ''}
|
||||
onChange={(e) => setSelectedPackage(e.target.value)}
|
||||
className="w-full border rounded px-3 py-2"
|
||||
>
|
||||
<option value="">Select a package</option>
|
||||
<option value="basic">Basic - €49</option>
|
||||
<option value="destroyer">Destroyer - €79</option>
|
||||
<option value="elite">Elite - €129</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Group Size</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setGroupSize(Math.max(1, groupSize - 1))}
|
||||
className="px-3 py-2 border rounded hover:bg-gray-100"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="text-lg font-bold min-w-12 text-center">{groupSize}</span>
|
||||
<button
|
||||
onClick={() => setGroupSize(groupSize + 1)}
|
||||
className="px-3 py-2 border rounded hover:bg-gray-100"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
{selectedPackage && groupSize >= 4 && (
|
||||
<p className="text-sm text-green-600 mt-2 font-semibold">✓ Group discount applied! €40 per person</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
className="w-full border rounded px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Time</label>
|
||||
<select
|
||||
value={selectedTime}
|
||||
onChange={(e) => setSelectedTime(e.target.value)}
|
||||
className="w-full border rounded px-3 py-2"
|
||||
>
|
||||
<option value="">Select a time</option>
|
||||
<option value="17:00">5:00 PM</option>
|
||||
<option value="18:00">6:00 PM</option>
|
||||
<option value="19:00">7:00 PM</option>
|
||||
<option value="20:00">8:00 PM</option>
|
||||
<option value="21:00">9:00 PM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{selectedPackage && (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<p className="text-sm text-gray-600">Price per person</p>
|
||||
<p className="text-2xl font-bold">€{calculatePrice(packagePrices[selectedPackage], groupSize).toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-600 mt-1">Total: €{(calculatePrice(packagePrices[selectedPackage], groupSize) * groupSize).toFixed(2)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleBooking}
|
||||
disabled={!selectedPackage || !selectedDate || !selectedTime}
|
||||
className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
Confirm Booking
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user