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

@@ -19,7 +19,7 @@ export default function Layout() {
 
   const navItems = [
   {
-    "name": "Home",    "href": "#hero"
+    "name": "Home",    "href": "/"
   },
   {
     "name": "About",    "href": "#about"
@@ -41,7 +41,9 @@ export default function Layout() {
   },
   {
     "name": "Contact",    "href": "#contact"
-  }
+  },
+  { name: "Booking", href: "/booking" },
+
 ];
 
   return (
@@ -50,7 +52,7 @@ export default function Layout() {
       <SectionErrorBoundary name="navbar">
         <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">
@@ -60,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/sections/About.tsx

@@ -3,30 +3,49 @@ 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 data-webild-section="about" id="about" className="bg-background">
+    <section data-webild-section="about" id="about" className="bg-background py-24">
       <div className="max-w-content-width mx-auto px-6">
-        <div className="grid grid-cols-1 lg:grid-cols-2 items-center">
+        <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">
-              <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>
-              <p className="text-lg text-muted-foreground leading-relaxed">
-                We believe that true luxury lies in the experience. Our dedicated staff is here to ensure that your stay is nothing short of extraordinary, anticipating your every need and exceeding your expectations.
-              </p>
+              <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-[600px] rounded-theme overflow-hidden">
+            <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"

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' },
 ];