Update src/app/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -1,38 +0,0 @@
-"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

@@ -1,54 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-"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/layout.tsx

@@ -6,24 +6,20 @@ import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
-import { Open_Sans } from "next/font/google";
-import { DM_Sans } from "next/font/google";
 
-
-
-export const metadata: Metadata = { title: 'FEDERICO | Authentic Italian Dining in Tunis', description: 'Experience the finest Italian cuisine at FEDERICO in Tunis. Join us for an exquisite dining experience featuring authentic flavors, elegant ambiance, and premium service.' };
-
-
-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",
+const halant = Halant({
+  variable: "--font-halant",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
 });
+
 const inter = Inter({
   variable: "--font-inter",
   subsets: ["latin"],
 });
 
+export const metadata: Metadata = { title: 'FEDERICO | Authentic Italian Dining in Tunis', description: 'Experience the finest Italian cuisine at FEDERICO in Tunis. Join us for an exquisite dining experience featuring authentic flavors, elegant ambiance, and premium service.' };
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -32,7 +28,9 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
+        <body
+          className={`${halant.variable} ${inter.variable} antialiased`}
+        >
           <Tag />
           {children}
           <script

src/app/menu/page.tsx

@@ -1,61 +0,0 @@
-"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

@@ -1,17 +1,15 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
-import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
-import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Utensils, MapPin, Instagram, Facebook, Linkedin } from "lucide-react";
+import { Utensils } from "lucide-react";
 
 export default function FedericoRestaurantPage() {
     return (
@@ -28,39 +26,92 @@ export default function FedericoRestaurantPage() {
             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" }}
-                />
-                <HeroCarouselLogo
-                    logoText="FEDERICO"
-                    description="Authentic Italian flavors in the heart of Tunis. Join us for a refined culinary experience at Immeuble El Majd."
-                    buttons={[
-                        { text: "View Menu", href: "/" },
-                        { text: "Directions", href: "/contact" },
-                    ]}
-                    slides={[
-                        { imageSrc: "http://img.b2bpic.net/free-photo/waiter-is-serving-dinner-two-pretty-friends-women-elegant-restaurant_8353-10575.jpg", imageAlt: "Elegant Italian restaurant dining" },
-                        { imageSrc: "http://img.b2bpic.net/free-photo/delicious-penne-pasta-with-tomato-sauce-fresh-basil-grated-parmesan-cheese_84443-81547.jpg", imageAlt: "Gourmet pasta dish" },
-                        { imageSrc: "http://img.b2bpic.net/free-photo/glass-sparking-wine_1339-4221.jpg", imageAlt: "Wine pairing experience" },
-                        { imageSrc: "http://img.b2bpic.net/free-photo/decorated-wedding-reception-venue-with-view-sea-through-windows_637285-1001.jpg", imageAlt: "Warm restaurant ambiance" },
-                    ]}
-                    showDimOverlay={true}
-                />
-                <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" },
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[
+                            { name: "Overview", id: "overview" },
+                            { name: "Menu", id: "menu" },
+                            { name: "Reviews", id: "reviews" },
+                            { name: "About", id: "about" },
+                            { name: "Contact", id: "contact" },
+                        ]}
+                        brandName="FEDERICO"
+                        button={{ text: "Reservations", href: "#contact" }}
+                    />
+                </div>
+                <div id="overview" data-section="overview">
+                    <HeroLogo
+                        logoText="FEDERICO"
+                        description="Authentic Italian flavors in the heart of Tunis. Join us for a refined culinary experience at Immeuble El Majd."
+                        buttons={[
+                            { 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"
+                        imageAlt="Elegant Italian restaurant dining"
+                        showDimOverlay={true}
+                    />
+                </div>
+                <div id="about" data-section="about">
+                    <SplitAbout
+                        title="We craft authentic culinary masterpieces"
+                        description="Using the finest Mediterranean ingredients for a unique experience."
+                        buttons={[{ text: "Learn Our Story", href: "#about" }]}
+                        useInvertedBackground={false}
+                        mediaAnimation="slide-up"
+                        textboxLayout="inline-image"
+                        bulletPoints={[
+                            { title: "Authentic Recipes", description: "Generations of Italian tradition." },
+                            { title: "Fresh Ingredients", description: "Sourced from the best local providers." }
+                        ]}
+                    />
+                </div>
+                <div id="menu" data-section="menu">
+                    <FeatureCardSeven
+                        tag="Menu"
+                        tagIcon={Utensils}
+                        title="A Taste of Italy"
+                        description="Traditional recipes prepared with modern elegance and fresh local produce."
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                        features={[
+                            { title: "Handmade Pasta", description: "Fresh daily pasta crafted using authentic techniques.", imageSrc: "http://img.b2bpic.net/free-photo/pasta-near-eggs-flour_23-2147849810.jpg", imageAlt: "Pasta" },
+                            { title: "Wood-Fired Pizza", description: "Authentic thin-crust pizzas with premium Italian toppings.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-chef-baking-pizza-wood-fired-oven_52683-106696.jpg", imageAlt: "Pizza" },
+                            { title: "Exquisite Seafood", description: "Fresh catch of the day prepared with Mediterranean herbs.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mussels-white-sauce-with-tablecloth-cutlery_23-2148234931.jpg", imageAlt: "Seafood" }
+                        ]}
+                    />
+                </div>
+                <div id="reviews" data-section="reviews">
+                    <TestimonialCardFifteen
+                        testimonial="Truly authentic flavors that transport you directly to Rome. Exceptional service and a beautiful setting."
+                        rating={5}
+                        author="Sami Ben Youssef"
+                        avatars={[{ src: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153828.jpg", alt: "Sami" }]}
+                        ratingAnimation="slide-up"
+                        avatarsAnimation="slide-up"
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <div id="contact" data-section="contact">
+                    <ContactSplit
+                        tag="Reservations"
+                        title="Connect With Us"
+                        description="Need a reservation or have an inquiry? Get in touch today."
+                        background={{ variant: "plain" }}
+                        useInvertedBackground={false}
+                        imageSrc="http://img.b2bpic.net/free-photo/view-table-arrangement-by-wedding-planner_23-2150167204.jpg"
+                        imageAlt="Contact Us"
+                        mediaAnimation="slide-up"
+                        mediaPosition="right"
+                    />
+                </div>
+                <FooterSimple
+                    columns={[
+                        { title: "Federico", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "#contact" }] }
                     ]}
+                    bottomLeftText="© 2025 FEDERICO Restaurant."
+                    bottomRightText="1 Rue du Lac de Constance, Tunis."
                 />
             </ReactLenis>
         </ThemeProvider>

src/app/reservations/page.tsx

@@ -1,61 +0,0 @@
-"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), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
 }

src/app/styles/variables.css

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