Merge version_34_1780499845558 into main

Merge version_34_1780499845558 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import BookingPage from "@/pages/BookingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/booking" element={<BookingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import FooterBrand from '@/components/sections/footer/FooterBrand';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
@@ -6,9 +7,19 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
 import Button from "@/components/ui/Button";
 
 export default function Layout() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const navItems = [
   {
-    "name": "Home",    "href": "#hero"
+    "name": "Home",    "href": "/"
   },
   {
     "name": "About",    "href": "#about"
@@ -30,16 +41,18 @@ export default function Layout() {
   },
   {
     "name": "Contact",    "href": "#contact"
-  }
+  },
+  { name: "Booking", href: "/booking" },
+
 ];
 
   return (
     <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <nav className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm border-b border-foreground/10 py-4">
+        <nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
           <div className="mx-auto flex w-content-width items-center justify-between">
-            <a href="#" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
+            <a href="/" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
               The Grand Hotel
             </a>
             <div className="hidden lg:flex items-center gap-6">
@@ -49,7 +62,7 @@ export default function Layout() {
                 </a>
               ))}
             </div>
-            <Button text="Book Now" href="#contact" variant="primary" />
+            <Button text="Book Now" href="/booking" variant="primary" />
           </div>
         </nav>
       </SectionErrorBoundary>

src/pages/BookingPage.tsx

@@ -0,0 +1,17 @@
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function BookingPage() {
+  return (
+    <>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book Your Session"
+        title="Schedule Your Appointment"
+        description="Easily book your preferred service or consultation with us. Fill out the form below, and we'll confirm your slot shortly."
+        inputs={[{"name":"name","type":"text","placeholder":"Your Full Name","required":true},{"name":"email","type":"email","placeholder":"Your Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Your Phone Number (Optional)"},{"name":"service","type":"text","placeholder":"Desired Service (e.g., Consultation)"},{"name":"date","type":"date","placeholder":"Preferred Date"}]}
+        textarea={{"name":"message","placeholder":"Tell us more about your needs or questions...","rows":4}}
+        buttonText="Confirm Booking"
+        imageSrc="https://img.freepik.com/free-photo/young-woman-making-appointment-online_23-2149154371.jpg"
+      /></div>
+    </>
+  );
+}

src/pages/HomePage.tsx

@@ -16,6 +16,15 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+
+
+{/* webild-stub @2026-06-03T14:44:17.404Z: in the hero section on top of the big image let's add floating cards with kpi number and description. */}
+
+{/* webild-stub @2026-06-03T14:42:44.419Z: in the hero section on top of the big image let's add floating cards with kpi number and description. on mouse move they should have a nice moving animation */}
+
+{/* webild-stub @2026-06-03T14:40:24.768Z: add floating KPI cards in the hero section, they should move with a parallax effect as I move my mouse around in the hero section */}
+
 {/* webild-stub @2026-06-03T14:26:06.808Z: make the hero section use width content width, like w-content-width */}
 
 {/* webild-stub @2026-06-03T14:17:28.384Z: make the hero section the same width as all the other sections */}

src/pages/HomePage/sections/About.tsx

@@ -1,10 +1,59 @@
 import React from 'react';
+import Tag from "@/components/ui/Tag";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Button from "@/components/ui/Button";
+import { Check } from "lucide-react";
 
 export default function AboutSection() {
   return (
-    <section id="about" className="bg-background">
-      <div className="max-w-content-width mx-auto px-6 text-center">
-        {/* Text 'Our Legacy of Hospitality' removed as requested */}
+    <section data-webild-section="about" id="about" className="bg-background py-24">
+      <div className="max-w-content-width mx-auto px-6">
+        <ScrollReveal variant="slide-up">
+          <div className="bg-card border border-border rounded-theme p-8 md:p-12 mb-16 space-y-6 max-w-4xl mx-auto text-left">
+            <Tag text="About Us" />
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
+              A Legacy of Unparalleled Hospitality
+            </h2>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
+          <ScrollReveal variant="slide-up">
+            <div className="space-y-8">
+              <ul className="space-y-4">
+                {[
+                  "Award-winning fine dining restaurants",
+                  "World-class spa and wellness center",
+                  "24/7 personalized concierge service",
+                  "Breathtaking panoramic city views",
+                  "State-of-the-art fitness facilities"
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-3">
+                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Check className="w-4 h-4 text-primary" />
+                    </div>
+                    <span className="text-foreground">{item}</span>
+                  </li>
+                ))}
+              </ul>
+              <Button text="Discover Our Story" variant="primary" />
+            </div>
+          </ScrollReveal>
+          
+          <ScrollReveal variant="fade">
+            <div className="relative h-[500px] rounded-theme overflow-hidden">
+              <ImageOrVideo 
+                imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-black/10"></div>
+            </div>
+          </ScrollReveal>
+        </div>
       </div>
     </section>
   );

src/pages/HomePage/sections/Accommodation.tsx

@@ -4,39 +4,43 @@
 import React from 'react';
 import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Button from "@/components/ui/Button";
 
 export default function AccommodationSection(): React.JSX.Element {
   return (
-    <div id="accommodation" data-section="accommodation">
+    <div id="accommodation" data-section="accommodation" className="relative">
         <SectionErrorBoundary name="accommodation">
-              <FeaturesDetailedSteps
-          tag="Accommodation"
-          title="Indulge in Our Luxurious Rooms & Suites"
-          description="Each space at The Grand Hotel is meticulously designed for ultimate comfort and sophistication, offering elegant decor, modern amenities, and breathtaking views to ensure a serene retreat."
-          steps={[
-            {
-              tag: "Cozy Comfort",
-              title: "Standard Room",
-              subtitle: "Your Elegant Retreat",
-              description: "Perfect for a relaxing stay, our Standard Rooms offer essential amenities and a comfortable ambiance.",
-              imageSrc: "http://img.b2bpic.net/free-photo/white-bed-lamp-hotel-business_1203-4933.jpg",
-            },
-            {
-              tag: "Spacious Luxury",
-              title: "Deluxe Suite",
-              subtitle: "The Premium Experience",
-              description: "Enjoy expansive living areas, enhanced amenities, and picturesque city views from our Deluxe Suites.",
-              imageSrc: "http://img.b2bpic.net/free-photo/empty-atelier-with-sketches-tools_482257-85311.jpg",
-            },
-            {
-              tag: "Unmatched Grandeur",
-              title: "Presidential Suite",
-              subtitle: "An Opulent Haven",
-              description: "The pinnacle of luxury, our Presidential Suite offers personalized service, private dining, and panoramic vistas.",
-              imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-worker-business-trip_482257-80852.jpg",
-            },
-          ]}
-        />
+          <FeaturesDetailedSteps
+            tag="Accommodation"
+            title="Indulge in Our Luxurious Rooms & Suites"
+            description="Each space at The Grand Hotel is meticulously designed for ultimate comfort and sophistication, offering elegant decor, modern amenities, and breathtaking views to ensure a serene retreat."
+            steps={[
+              {
+                tag: "Cozy Comfort",
+                title: "Standard Room",
+                subtitle: "Your Elegant Retreat",
+                description: "Perfect for a relaxing stay, our Standard Rooms offer essential amenities and a comfortable ambiance.",
+                imageSrc: "http://img.b2bpic.net/free-photo/white-bed-lamp-hotel-business_1203-4933.jpg",
+              },
+              {
+                tag: "Spacious Luxury",
+                title: "Deluxe Suite",
+                subtitle: "The Premium Experience",
+                description: "Enjoy expansive living areas, enhanced amenities, and picturesque city views from our Deluxe Suites.",
+                imageSrc: "http://img.b2bpic.net/free-photo/empty-atelier-with-sketches-tools_482257-85311.jpg",
+              },
+              {
+                tag: "Unmatched Grandeur",
+                title: "Presidential Suite",
+                subtitle: "An Opulent Haven",
+                description: "The pinnacle of luxury, our Presidential Suite offers personalized service, private dining, and panoramic vistas.",
+                imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-worker-business-trip_482257-80852.jpg",
+              },
+            ]}
+          />
+          <div className="flex justify-center pb-24 -mt-12 relative z-10">
+            <Button text="Book Your Stay" variant="primary" href="/booking" className="px-8 py-4 text-lg" />
+          </div>
         </SectionErrorBoundary>
       </div>
   );

src/pages/HomePage/sections/Experiences.tsx

@@ -4,60 +4,64 @@
 import React from 'react';
 import FeaturesRevealCardsBentoSharp from '@/components/sections/features/FeaturesRevealCardsBentoSharp';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Button from "@/components/ui/Button";
 
 export default function ExperiencesSection(): React.JSX.Element {
   return (
-    <div id="experiences" data-section="experiences">
+    <div id="experiences" data-section="experiences" className="relative">
         <SectionErrorBoundary name="experiences">
-              <FeaturesRevealCardsBentoSharp
-          tag="Experiences"
-          title="Beyond Your Stay: Our Signature Services"
-          description="From gourmet dining to rejuvenating spa treatments, The Grand Hotel offers an array of services designed to enrich every moment of your visit."
-          items={[
-            {
-              title: "Fine Dining",
-              description: "Savor exquisite dishes prepared by award-winning chefs in an elegant atmosphere.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-mushrooms-tomato_140725-3752.jpg",
-            },
-            {
-              title: "Spa & Wellness",
-              description: "Indulge in a range of treatments designed for ultimate relaxation and rejuvenation.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fair-skinned-women-use-moisturizing-day-cream-sensitive-skin-light-room-self-care-health-day-concept_197531-31471.jpg",
-            },
-            {
-              title: "Fitness Center",
-              description: "Maintain your routine with our state-of-the-art facilities and professional trainers.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-looking-mirror_23-2149832697.jpg",
-            },
-            {
-              title: "Event Spaces",
-              description: "Host your perfect occasion in our versatile venues, ideal for weddings and conferences.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/beautifully-decorated-venue-interior-wedding_181624-58530.jpg",
-            },
-            {
-              title: "Concierge Service",
-              description: "Our dedicated team provides personalized assistance to cater to your every need.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/guests-with-suitcases-hotel-reception_482257-80053.jpg",
-            },
-            {
-              title: "Rooftop Bar",
-              description: "Enjoy crafted beverages and stunning panoramic cityscapes from our exclusive bar.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-inside-night-club-black-hat_627829-5507.jpg",
-            },
-            {
-              title: "Business Center",
-              description: "Fully equipped facilities for your professional needs, ensuring productivity on the go.",
-              href: "#",
-              imageSrc: "http://img.b2bpic.net/free-photo/view-empty-waiting-room_1170-1960.jpg",
-            },
-          ]}
-        />
+          <FeaturesRevealCardsBentoSharp
+            tag="Experiences"
+            title="Beyond Your Stay: Our Signature Services"
+            description="From gourmet dining to rejuvenating spa treatments, The Grand Hotel offers an array of services designed to enrich every moment of your visit."
+            items={[
+              {
+                title: "Fine Dining",
+                description: "Savor exquisite dishes prepared by award-winning chefs in an elegant atmosphere.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-mushrooms-tomato_140725-3752.jpg",
+              },
+              {
+                title: "Spa & Wellness",
+                description: "Indulge in a range of treatments designed for ultimate relaxation and rejuvenation.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fair-skinned-women-use-moisturizing-day-cream-sensitive-skin-light-room-self-care-health-day-concept_197531-31471.jpg",
+              },
+              {
+                title: "Fitness Center",
+                description: "Maintain your routine with our state-of-the-art facilities and professional trainers.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-looking-mirror_23-2149832697.jpg",
+              },
+              {
+                title: "Event Spaces",
+                description: "Host your perfect occasion in our versatile venues, ideal for weddings and conferences.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/beautifully-decorated-venue-interior-wedding_181624-58530.jpg",
+              },
+              {
+                title: "Concierge Service",
+                description: "Our dedicated team provides personalized assistance to cater to your every need.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/guests-with-suitcases-hotel-reception_482257-80053.jpg",
+              },
+              {
+                title: "Rooftop Bar",
+                description: "Enjoy crafted beverages and stunning panoramic cityscapes from our exclusive bar.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-inside-night-club-black-hat_627829-5507.jpg",
+              },
+              {
+                title: "Business Center",
+                description: "Fully equipped facilities for your professional needs, ensuring productivity on the go.",
+                href: "/booking",
+                imageSrc: "http://img.b2bpic.net/free-photo/view-empty-waiting-room_1170-1960.jpg",
+              },
+            ]}
+          />
+          <div className="flex justify-center pb-24 -mt-12 relative z-10">
+            <Button text="Inquire About Experiences" variant="primary" href="/booking" className="px-8 py-4 text-lg" />
+          </div>
         </SectionErrorBoundary>
       </div>
   );

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/booking', label: 'Booking', pageFile: 'BookingPage' },
 ];