Update src/app/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+              navItems={[
+                  { name: "Overview", id: "/" },
+                  { name: "Menu", id: "/menu" },
+                  { name: "About", id: "/about" },
+                  { name: "Contact", id: "/#contact" },
+              ]}
+              brandName="FEDERICO"
+              button={{ text: "Book Table", href: "/reservations" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function ContactPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "Overview", id: "/" },
+                        { name: "Gallery", id: "/gallery" },
+                        { name: "Reservations", id: "/reservations" },
+                        { name: "Contact", id: "/contact" },
+                    ]}
+                    brandName="FEDERICO"
+                    button={{ text: "Book Table", href: "/reservations" }}
+                />
+                <ContactCenter
+                    tag="Contact"
+                    title="Visit or Reach Out"
+                    description="Locate us at 1 Rue du Lac de Constance, Tunis. We are open for your pleasure."
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={false}
+                />
+                <FooterCard
+                    logoText="FEDERICO"
+                    copyrightText="© 2025 FEDERICO Restaurant. 1 Rue du Lac de Constance, Tunis."
+                    socialLinks={[
+                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/gallery/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+
+export default function GalleryPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="Gallery"
+          button={{ text: "Get Started", href: "/contact" }}
+        />
+      </div>
+      <div id="features" data-section="features">
+        <FeatureCardSeven
+          title="Our Gallery"
+          description="Explore our featured collection."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              title: "Feature One",              description: "Description one.",              imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb",              imageAlt: "Feature one"
+            },
+            {
+              title: "Feature Two",              description: "Description two.",              imageSrc: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05",              imageAlt: "Feature two"
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/menu/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+            navItems={[
+                { name: "Overview", id: "/" },
+                { name: "Menu", id: "/menu" },
+                { name: "About", id: "/about" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="FEDERICO"
+            button={{ text: "Book Table", href: "/reservations" }}
+        />
+        <FeatureCardOne
+            className="py-20"
+            title="Our Menu"
+            description="Savor authentic Italian recipes made fresh daily."
+            gridVariant="three-columns-all-equal-width"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+                { title: "Antipasti", description: "Light starters featuring fresh bruschetta and caprese salad.", imageSrc: "http://img.b2bpic.net/free-photo/tasty-bruschetta-with-tomatoes-basil-wooden-table_23-2148184659.jpg" },
+                { title: "Primi Piatti", description: "Signature handmade pasta dishes with authentic sauces.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-penne-pasta-with-tomato-sauce-fresh-basil-grated-parmesan-cheese_84443-81547.jpg" },
+                { title: "Secondi", description: "Premium seafood and meat preparations crafted with passion.", imageSrc: "http://img.b2bpic.net/free-photo/grilled-fish-with-vegetables-served-table_144627-24855.jpg" }
+            ]}
+            animationType="slide-up"
+        />
+        <FooterCard
+            logoText="FEDERICO"
+            copyrightText="© 2025 FEDERICO Restaurant. 1 Rue du Lac de Constance, Tunis."
+            socialLinks={[
+                { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+            ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -47,7 +47,7 @@ export default function FedericoRestaurantPage() {
                             { text: "View Menu", href: "#menu" },
                             { text: "Directions", href: "#contact" },
                         ]}
-                        imageSrc="http://img.b2bpic.net/free-photo/waiter-is-serving-dinner-two-pretty-friends-women-elegant-restaurant_8353-10575.jpg"
+                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdIwT7IHWcCqb6UBtzr3xax2lB/uploaded-1778607880091-ae9age3h.jpg"
                         imageAlt="Elegant Italian restaurant dining"
                         showDimOverlay={true}
                     />

src/app/reservations/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function ReservationsPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "Overview", id: "/" },
+                        { name: "Gallery", id: "/gallery" },
+                        { name: "Reservations", id: "/reservations" },
+                        { name: "Contact", id: "/contact" },
+                    ]}
+                    brandName="FEDERICO"
+                    button={{ text: "Book Table", href: "/reservations" }}
+                />
+                <ContactSplitForm
+                    title="Reserve Your Table"
+                    description="Select your date, time, and party size to confirm your reservation."
+                    imageSrc="http://img.b2bpic.net/free-photo/view-table-arrangement-by-wedding-planner_23-2150167204.jpg"
+                    imageAlt="Booking"
+                    useInvertedBackground={false}
+                    inputs={[
+                        { name: "date", type: "date", placeholder: "Date" },
+                        { name: "time", type: "time", placeholder: "Time" },
+                        { name: "guests", type: "number", placeholder: "Guests" },
+                    ]}
+                    textarea={{ name: "requests", placeholder: "Any special requests?" }}
+                    buttonText="Submit Booking"
+                />
+                <FooterCard
+                    logoText="FEDERICO"
+                    copyrightText="© 2025 FEDERICO Restaurant. 1 Rue du Lac de Constance, Tunis."
+                    socialLinks={[
+                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
+  --background: #ffffff;
-  --card: #efe7dd;
+  --card: #f9f9f9;
-  --foreground: #2b180a;
+  --foreground: #000612e6;
-  --primary-cta: #2b180a;
+  --primary-cta: #15479c;
-  --primary-cta-text: #f6f0e9;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #2b180a;
+  --secondary-cta-text: #000612e6;
-  --accent: #94877c;
+  --accent: #e2e2e2;
-  --background-accent: #afa094;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);