src/app/contact/page.tsx

@@ -8,7 +8,7 @@ import LegalSection from '@/components/legal/LegalSection';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import { Phone } from "lucide-react";
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,64 +23,61 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        { name: "Home", id: "/" },
-        { name: "Rooms", id: "/rooms" },
-        { name: "About", id: "/about" },
-        { name: "Contact", id: "/contact" },
-      ]}
-      brandName="Hôtel Kaiser"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Rooms", id: "/rooms" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Hôtel Kaiser"
+          />
+        </div>
 
-  <div id="contact-info" data-section="contact-info">
-      <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "Where are you located?",          content: "We are located at Avenue Taieb Mhiri, Sousse."},
-        {
-          id: "f2",          title: "Do you offer Wi-Fi?",          content: "Yes, high-speed Wi-Fi is available for free."},
-      ]}
-      ctaTitle="Book Your Stay Today"
-      ctaDescription="Get in touch for the best rates and availability. Call us now or fill out the form."
-      ctaButton={{
-        text: "Call Now",        href: "tel:+21600000000"}}
-      ctaIcon={Phone}
-    />
-  </div>
+        <div id="contact-info" data-section="contact-info">
+          <ContactFaq
+            animationType="slide-up"
+            useInvertedBackground={false}
+            faqs={[
+              {
+                id: "f1",                title: "Where are you located?",                content: "We are located at Avenue Taieb Mhiri, Sousse."
+              },
+              {
+                id: "f2",                title: "Do you offer Wi-Fi?",                content: "Yes, high-speed Wi-Fi is available for free."
+              },
+            ]}
+            ctaTitle="Book Your Stay Today"
+            ctaDescription="Get in touch for the best rates and availability. Call us now or fill out the form."
+            ctaButton={{
+              text: "Call Now",              href: "tel:+21600000000"
+            }}
+            ctaIcon={Phone}
+          />
+        </div>
 
-  <div id="legal" data-section="legal">
-      <LegalSection
-      layout="section"
-      title="Booking Policy"
-      sections={[
-        {
-          heading: "Cancellation",          content: { 
-            text: "Cancellations must be made 48 hours prior to arrival."},
-        },
-        {
-          heading: "Payment",          content: { 
-            items: [
-              "Credit card required",              "Cash at arrival"],
-          },
-        },
-      ]}
-    />
-  </div>
+        <div id="legal" data-section="legal">
+          <LegalSection
+            layout="section"
+            title="Booking Policy"
+            sections={[
+              {
+                heading: "Cancellation",                content: { type: "paragraph", text: "Cancellations must be made 48 hours prior to arrival." }
+              },
+              {
+                heading: "Payment",                content: { type: "list", items: ["Credit card required", "Cash at arrival"] }
+              },
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Hôtel Kaiser"
-      leftLink={{
-        text: "Terms of Service",        href: "#"}}
-      rightLink={{
-        text: "Privacy Policy",        href: "#"}}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Hôtel Kaiser"
+            leftLink={{ text: "Terms of Service", href: "#" }}
+            rightLink={{ text: "Privacy Policy", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Mulish } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: "Webild components 2",
-  description: "Generated by create next app",
+  title: 'Contact Hôtel Kaiser - Sousse',
+  description: 'Get in touch with Hôtel Kaiser in Sousse for booking inquiries and information.',
 };
 
 const mulish = Mulish({