Update theme colors

Merge version_3 into main

src/app/contact/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Zap, Mail } from 'lucide-react';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="medium"
+      background="none"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Rage Room Vienna"
+          navItems={[
+            { name: "Packages", id: "/" },
+            { name: "Experience", id: "/" },
+            { name: "FAQ", id: "/" },
+            { name: "Contact", id: "/contact" },
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Get In Touch"
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          title="We're Here to Help"
+          description="Have questions about our packages, group bookings, or special requests? Reach out to our team and we'll get back to you as soon as possible."
+          background={{ variant: "canvas-reveal" }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/person-suffering-from-technology-addiction-cybersickness_23-2151552653.jpg?_wi=2"
+          imageAlt="Contact us"
+          mediaAnimation="blur-reveal"
+          mediaPosition="right"
+          inputPlaceholder="your@email.com"
+          buttonText="Send Message"
+          termsText="We'll respond to your inquiry within 24 hours. Your information is secure and won't be shared."
+          onSubmit={(email) => {
+            alert(`Thank you! We'll contact you at ${email} soon.`);
+          }}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/weathered-concrete-wall-texture-with-stains_632498-60807.jpg?_wi=2"
+          imageAlt="Industrial concrete background"
+          logoText="Rage Room Vienna"
+          copyrightText="© 2025 Rage Room Vienna | Adrenaline. Chaos. Freedom."
+          columns={[
+            {
+              title: "Experience",              items: [
+                { label: "Packages", href: "/" },
+                { label: "About Us", href: "/" },
+                { label: "Safety", href: "/" },
+              ],
+            },
+            {
+              title: "Info",              items: [
+                { label: "Hours", href: "#" },
+                { label: "Contact", href: "/contact" },
+                { label: "Book Now", href: "https://booking.rageroomvienna.local" },
+              ],
+            },
+            {
+              title: "Follow",              items: [
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "TikTok", href: "https://tiktok.com" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

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 40;
+    }
+    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"
@@ -53,19 +96,23 @@ export default function LandingPage() {
           testimonials={[
             {
               name: "Marcus K.",              handle: "Stressed Executive",              testimonial: "Best stress relief I've ever experienced. Walked in angry, left smiling. Booking again!",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
+            },
             {
               name: "Lisa M.",              handle: "Corporate Manager",              testimonial: "The team loved it! We came as a group and it was the perfect team building activity. Absolutely cathartic.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
+            },
             {
               name: "Daniel R.",              handle: "Fitness Enthusiast",              testimonial: "Incredible workout disguised as entertainment. The adrenaline rush is unmatched. Worth every euro.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
+            },
             {
               name: "Sophie V.",              handle: "Break-Up Survivor",              testimonial: "Exactly what I needed. Therapeutic, fun, and exhilarating. Five stars all the way!",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4"
+            },
           ]}
           testimonialRotationInterval={5000}
-          imageSrc="http://img.b2bpic.net/free-photo/person-suffering-from-technology-addiction-cybersickness_23-2151552653.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/person-suffering-from-technology-addiction-cybersickness_23-2151552653.jpg?_wi=1"
           imageAlt="Rage Room destruction session"
           mediaAnimation="blur-reveal"
           imagePosition="right"
@@ -98,26 +145,29 @@ export default function LandingPage() {
             {
               id: "basic",              badge: "Beginner",              badgeIcon: Flame,
               price: "€49",              subtitle: "Perfect First Strike – 30 Minutes",              buttons: [
-                { text: "Select Package", href: "https://booking.rageroomvienna.local/basic" },
+                { 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 discount: €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",              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 discount: €40/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" },
+                { 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 discount: €40/person (4+ people)"
+              ],
             },
           ]}
           animationType="slide-up"
@@ -154,21 +204,56 @@ export default function LandingPage() {
           useInvertedBackground={false}
           faqs={[
             {
-              id: "1",              title: "What should I wear?",              content: "Wear comfortable, sturdy clothing and closed-toe shoes. We provide full protective gear including helmet, gloves, and safety vest. No special attire needed – we'll gear you up for maximum safety."},
+              id: "1",              title: "What should I wear?",              content: "Wear comfortable, sturdy clothing and closed-toe shoes. We provide full protective gear including helmet, gloves, and safety vest. No special attire needed – we'll gear you up for maximum safety."
+            },
             {
-              id: "2",              title: "Is it really safe?",              content: "Absolutely. All participants receive thorough safety briefing, professional-grade protective equipment, and constant supervision. Our trained staff ensures a safe, controlled environment for pure adrenaline release."},
+              id: "2",              title: "Is it really safe?",              content: "Absolutely. All participants receive thorough safety briefing, professional-grade protective equipment, and constant supervision. Our trained staff ensures a safe, controlled environment for pure adrenaline release."
+            },
             {
-              id: "3",              title: "How many people can join?",              content: "Sessions are designed for solo destructors up to small groups. Basic packages work great for 1-2 people. Destroyer and Elite packages support small groups. Contact us for group booking options."},
+              id: "3",              title: "How many people can join?",              content: "Sessions are designed for solo destructors up to small groups. Basic packages work great for 1-2 people. Destroyer and Elite packages support small groups. Contact us for group booking options."
+            },
             {
-              id: "4",              title: "What's included in pricing?",              content: "All packages include full protective gear, safety briefing, tools, smashable items (glass, ceramics, electronics), and supervised session time. Photos available in Elite package."},
+              id: "4",              title: "What's included in pricing?",              content: "All packages include full protective gear, safety briefing, tools, smashable items (glass, ceramics, electronics), and supervised session time. Photos available in Elite package."
+            },
             {
-              id: "5",              title: "Are there age restrictions?",              content: "Minimum age is 16 years old (with parental consent). No maximum age limit – we welcome destructors of all ages who can safely handle the experience."},
+              id: "5",              title: "Are there age restrictions?",              content: "Minimum age is 16 years old (with parental consent). No maximum age limit – we welcome destructors of all ages who can safely handle the experience."
+            },
             {
-              id: "6",              title: "Can I book in advance?",              content: "Yes! Check available time slots on our booking calendar. We're open Thursday 5 PM–10 PM, Friday 2 PM–12 AM, Saturday & Sunday 12 PM–12 AM."},
+              id: "6",              title: "Can I book in advance?",              content: "Yes! Check available time slots on our booking calendar. We're open Thursday 5 PM–10 PM, Friday 2 PM–12 AM, Saturday & Sunday 12 PM–12 AM."
+            },
           ]}
         />
       </div>
 
+      <div id="maps" data-section="maps">
+        <div className="w-full bg-card py-16 md:py-24">
+          <div className="flex items-center justify-center w-full">
+            <div className="w-full max-w-6xl px-6 md:px-8">
+              <div className="text-center mb-12">
+                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">Visit Us</h2>
+                <p className="text-lg text-foreground/70">Find Rage Room Vienna at our location in the heart of the city</p>
+              </div>
+              <div className="w-full rounded-lg overflow-hidden shadow-lg" style={{ height: '500px' }}>
+                <iframe
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  loading="lazy"
+                  allowFullScreen
+                  referrerPolicy="no-referrer-when-downgrade"
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2659.2098789453607!2d16.36892492346897!3d48.20849977122393!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d079f8c41d6ad%3A0x1234567890!2sVienna%2C%20Austria!5e0!3m2!1sen!2sat!4v1234567890"
+                ></iframe>
+              </div>
+              <div className="mt-8 text-center">
+                <p className="text-foreground font-semibold mb-2">Rage Room Vienna</p>
+                <p className="text-foreground/70">Vienna, Austria</p>
+                <p className="text-foreground/70 mt-4">Open: Thu 5PM-10PM | Fri 2PM-12AM | Sat & Sun 12PM-12AM</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactCTA
           tag="Ready to Rage?"
@@ -177,8 +262,8 @@ 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: "Contact Us", href: "mailto:bookings@rageroomvienna.local" },
+            { text: "Book a Session", onClick: () => openBookingModal('destroyer') },
+            { text: "Email Us", href: "mailto:bookings@rageroomvienna.local?subject=Rage%20Room%20Inquiry" },
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "downward-rays-static" }}
@@ -188,7 +273,7 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/weathered-concrete-wall-texture-with-stains_632498-60807.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/weathered-concrete-wall-texture-with-stains_632498-60807.jpg?_wi=1"
           imageAlt="Industrial concrete background"
           logoText="Rage Room Vienna"
           copyrightText="© 2025 Rage Room Vienna | Adrenaline. Chaos. Freedom."
@@ -217,6 +302,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>
   );
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4f0;
-  --card: #ffffff;
-  --foreground: #1a1a1a;
-  --primary-cta: #2c2c2c;
-  --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f5f4f0;
-  --secondary-cta-text: #1a1a1a;
-  --accent: #8a8a8a;
-  --background-accent: #e8e6e1;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);