Update src/app/page.tsx

Merge version_14 into main

src/app/about/page.tsx

@@ -6,8 +6,14 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import TextAbout from '@/components/sections/about/TextAbout';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { History } from "lucide-react";
+import { useEffect, useState } from "react";
 
 export default function AboutPage() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -21,48 +27,49 @@ export default function AboutPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="normal"
     >
-      <ReactLenis root>
+      {isMounted && (
-        <div id="nav" data-section="nav">
+        <ReactLenis root>
-          <NavbarLayoutFloatingOverlay
+          <div id="nav" data-section="nav">
-            navItems={[
+            <NavbarLayoutFloatingOverlay
-              { name: "Menu", id: "/menu" },
+              navItems={[
-              { name: "About", id: "/about" },
+                { name: "Menu", id: "/menu" },
-              { name: "Catering", id: "/#catering" },
+                { name: "About", id: "/about" },
-              { name: "Events", id: "/#events" },
+                { name: "Services", id: "/services" },
-              { name: "Visit", id: "/#visit" },
+                { name: "Events", id: "/#events" },
-              { name: "Contact", id: "/contact" },
+                { name: "Visit", id: "/#visit" },
-            ]}
+              ]}
-            brandName="Molisana Bakery"
+              brandName="Molisana Bakery"
-          />
+            />
-        </div>
-
-        <div id="about-content" data-section="about-content">
-          <TextAbout
-            tag="Our Story"
-            tagIcon={History}
-            title="Old-School Italian Hospitality"
-            className="py-20"
-            useInvertedBackground={false}
-          />
-          <div className="max-w-4xl mx-auto px-6 pb-20 space-y-8">
-            <p className="text-lg">Molisana Bakery was born from a desire to bring the authentic, old-school Italian bakery experience to our local community. We pride ourselves on preserving traditions passed down through generations.</p>
-            <p className="text-lg">Our daily hot table is the heart of our kitchen, featuring scratch-made classics that change with the seasons. We believe food is a language of love, and we serve every dish with the warmth of a family gathering.</p>
-            <p className="text-lg">Whether you stop in for your morning espresso ritual to start the day or join us for a slow lunch, our commitment to hospitality remains the same: treat every customer like a long-time friend at our family table.</p>
           </div>
-        </div>
 
-        <div id="footer" data-section="footer">
+          <div id="about-content" data-section="about-content">
-          <FooterSimple
+            <TextAbout
-            columns={[
+              tag="Our Story"
-              { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
+              tagIcon={History}
-              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
+              title="Old-School Italian Hospitality"
-              { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", href: "/contact" }] },
+              className="py-20"
-            ]}
+              useInvertedBackground={false}
-            bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+            />
-            bottomRightText="Authentic Italian Daily Rituals"
+            <div className="max-w-4xl mx-auto px-6 pb-20 space-y-8">
-          />
+              <p className="text-lg">Molisana Bakery was born from a desire to bring the authentic, old-school Italian bakery experience to our local community. We pride ourselves on preserving traditions passed down through generations.</p>
-        </div>
+              <p className="text-lg">Our daily hot table is the heart of our kitchen, featuring scratch-made classics that change with the seasons. We believe food is a language of love, and we serve every dish with the warmth of a family gathering.</p>
-      </ReactLenis>
+              <p className="text-lg">Whether you stop in for your morning espresso ritual to start the day or join us for a slow lunch, our commitment to hospitality remains the same: treat every customer like a long-time friend at our family table.</p>
+            </div>
+          </div>
+
+          <div id="footer" data-section="footer">
+            <FooterSimple
+              columns={[
+                { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Services", href: "/services" }] },
+                { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/" }] },
+                { title: "Visit", items: [{ label: "Directions", href: "/" }, { label: "Contact", href: "/" }] },
+              ]}
+              bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+              bottomRightText="Authentic Italian Daily Rituals"
+            />
+          </div>
+        </ReactLenis>
+      )}
     </ThemeProvider>
   );
 }

src/app/contact/page.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-
-export default function ContactPage() {
-  return (
-    <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
-        contentWidth="medium"
-        sizing="medium"
-        background="floatingGradient"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
-    >
-      <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
-            navItems={[
-              { name: "Menu", id: "/menu" },
-              { name: "About", id: "/about" },
-              { name: "Catering", id: "/#catering" },
-              { name: "Events", id: "/#events" },
-              { name: "Visit", id: "/#visit" },
-              { name: "Contact", id: "/contact" },
-            ]}
-            brandName="Molisana Bakery"
-          />
-        </div>
-
-        <div id="contact" data-section="contact">
-          <ContactText
-            useInvertedBackground={false}
-            background={{ variant: "sparkles-gradient" }}
-            text="Visit us at 5731 Hwy 7, Woodbridge, ON L4L 1T7. We are open daily from 6 a.m. to 10 p.m. Call us at (905) 856-6100 for orders and inquiries."
-            buttons={[
-              { text: "Get a Catering Quote", href: "mailto:hello@molisanabakery.com" },
-              { text: "Call (905) 856-6100", href: "tel:+19058566100" },
-            ]}
-          />
-        </div>
-
-        <div id="footer" data-section="footer">
-          <FooterSimple
-            columns={[
-              { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
-              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
-              { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", href: "/contact" }] },
-            ]}
-            bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
-            bottomRightText="Authentic Italian Daily Rituals"
-          />
-        </div>
-      </ReactLenis>
-    </ThemeProvider>
-  );
-}

src/app/layout.tsx

@@ -10,8 +10,8 @@ import { Raleway } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Molisana Bakery | Authentic Italian Bakery, Espresso & Hot Table',
+  title: 'Molisana Bakery',
-  description: 'Authentic Italian bakery and hot table. Best espresso, fresh pastries, generous sandwiches, catering and private events. Open early at 6 AM.',
+  description: 'Authentic Italian Daily Rituals',
   openGraph: {
     "title": "Molisana Bakery",
     "description": "Your daily Italian ritual. Authentic bakery, hot table, and espresso bar.",

src/app/menu/page.tsx

@@ -5,8 +5,14 @@ import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import { useEffect, useState } from "react";
 
 export default function MenuPage() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -20,91 +26,92 @@ export default function MenuPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="normal"
     >
-      <ReactLenis root>
+      {isMounted && (
-        <div id="nav" data-section="nav">
+        <ReactLenis root>
-          <NavbarLayoutFloatingOverlay
+          <div id="nav" data-section="nav">
-            navItems={[
+            <NavbarLayoutFloatingOverlay
-              { name: "Menu", id: "/menu" },
+              navItems={[
-              { name: "About", id: "/about" },
+                { name: "Menu", id: "/menu" },
-              { name: "Catering", id: "/#catering" },
+                { name: "About", id: "/about" },
-              { name: "Events", id: "/#events" },
+                { name: "Services", id: "/services" },
-              { name: "Visit", id: "/#visit" },
+                { name: "Events", id: "/#events" },
-              { name: "Contact", id: "/contact" },
+                { name: "Visit", id: "/#visit" },
-            ]}
+              ]}
-            brandName="Molisana Bakery"
+              brandName="Molisana Bakery"
-          />
+            />
-        </div>
+          </div>
 
-        <div className="pt-32 pb-20">
+          <div className="pt-32 pb-20">
-            <div id="espresso-bar" data-section="products">
+              <div id="espresso-bar" data-section="products">
-                <ProductCardThree 
+                  <ProductCardThree 
-                    title="Espresso Bar"
+                      title="Espresso Bar"
-                    description="Premium Italian roasted coffee rituals."
+                      description="Premium Italian roasted coffee rituals."
-                    products={[{id: "e1", name: "Espresso", price: "", imageSrc: "http://img.b2bpic.net/free-photo/glass-foamy-latte-decorated-with-daffodil_141793-433.jpg?_wi=2"}]}
+                      products={[{id: "e1", name: "Espresso", price: "", imageSrc: "http://img.b2bpic.net/free-photo/glass-foamy-latte-decorated-with-daffodil_141793-433.jpg?_wi=1"}]}
-                    gridVariant="uniform-all-items-equal"
+                      gridVariant="uniform-all-items-equal"
-                    animationType="slide-up"
+                      animationType="slide-up"
-                    textboxLayout="default"
+                      textboxLayout="default"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                />
+                  />
-            </div>
+              </div>
-            <div id="hot-table" data-section="products">
+              <div id="hot-table" data-section="products">
-                <ProductCardThree 
+                  <ProductCardThree 
-                    title="Hot Table Classics"
+                      title="Hot Table Classics"
-                    description="Scratch-made daily rotating specials."
+                      description="Scratch-made daily rotating specials."
-                    products={[{id: "h1", name: "Lasagna", price: "", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-italian-pasta-with-meat-tomato-sauce-grey-surface-meal-pasta-dough-food-dinner_140725-85885.jpg?_wi=2"}]}
+                      products={[{id: "h1", name: "Lasagna", price: "", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-italian-pasta-with-meat-tomato-sauce-grey-surface-meal-pasta-dough-food-dinner_140725-85885.jpg?_wi=1"}]}
-                    gridVariant="uniform-all-items-equal"
+                      gridVariant="uniform-all-items-equal"
-                    animationType="slide-up"
+                      animationType="slide-up"
-                    textboxLayout="default"
+                      textboxLayout="default"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                />
+                  />
-            </div>
+              </div>
-            <div id="sandwiches" data-section="products">
+              <div id="sandwiches" data-section="products">
-                <ProductCardThree 
+                  <ProductCardThree 
-                    title="Sandwiches"
+                      title="Sandwiches"
-                    description="Fresh bread, packed with cured meats."
+                      description="Fresh bread, packed with cured meats."
-                    products={[{id: "s1", name: "Porchetta Sandwich", price: "", imageSrc: "http://img.b2bpic.net/free-photo/roll-hot-smoked-fish_2829-14225.jpg?_wi=2"}]}
+                      products={[{id: "s1", name: "Porchetta Sandwich", price: "", imageSrc: "http://img.b2bpic.net/free-photo/roll-hot-smoked-fish_2829-14225.jpg?_wi=1"}]}
-                    gridVariant="uniform-all-items-equal"
+                      gridVariant="uniform-all-items-equal"
-                    animationType="slide-up"
+                      animationType="slide-up"
-                    textboxLayout="default"
+                      textboxLayout="default"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                />
+                  />
-            </div>
+              </div>
-            <div id="pastries" data-section="products">
+              <div id="pastries" data-section="products">
-                <ProductCardThree 
+                  <ProductCardThree 
-                    title="Pastries"
+                      title="Pastries"
-                    description="Sweet treats, artisan style."
+                      description="Sweet treats, artisan style."
-                    products={[{id: "p1", name: "Pistachio Cannoli", price: "", imageSrc: "http://img.b2bpic.net/free-photo/closeup-raw-vegan-roll-made-from-hazelnuts-purple-grunge-tabletop_181624-44513.jpg?_wi=2"}]}
+                      products={[{id: "p1", name: "Pistachio Cannoli", price: "", imageSrc: "http://img.b2bpic.net/free-photo/closeup-raw-vegan-roll-made-from-hazelnuts-purple-grunge-tabletop_181624-44513.jpg?_wi=1"}]}
-                    gridVariant="uniform-all-items-equal"
+                      gridVariant="uniform-all-items-equal"
-                    animationType="slide-up"
+                      animationType="slide-up"
-                    textboxLayout="default"
+                      textboxLayout="default"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                />
+                  />
-            </div>
+              </div>
-            <div id="catering" data-section="products">
+              <div id="catering" data-section="products">
-                <ProductCardThree 
+                  <ProductCardThree 
-                    title="Catering Trays"
+                      title="Catering Trays"
-                    description="Perfect for your next gathering."
+                      description="Perfect for your next gathering."
-                    products={[{id: "c1", name: "Party Tray", price: "", imageSrc: "http://img.b2bpic.net/free-photo/mozzarella-sliders-summer-picnic-sandwiches_53876-103644.jpg?_wi=2"}]}
+                      products={[{id: "c1", name: "Party Tray", price: "", imageSrc: "http://img.b2bpic.net/free-photo/mozzarella-sliders-summer-picnic-sandwiches_53876-103644.jpg?_wi=1"}]}
-                    gridVariant="uniform-all-items-equal"
+                      gridVariant="uniform-all-items-equal"
-                    animationType="slide-up"
+                      animationType="slide-up"
-                    textboxLayout="default"
+                      textboxLayout="default"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                />
+                  />
-            </div>
+              </div>
-        </div>
+          </div>
 
-        <div id="footer" data-section="footer">
+          <div id="footer" data-section="footer">
-          <FooterSimple
+            <FooterSimple
-            columns={[
+              columns={[
-              { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
+                { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Services", href: "/services" }] },
-              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
+                { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/" }] },
-              { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", href: "/contact" }] },
+                { title: "Visit", items: [{ label: "Directions", href: "/" }, { label: "Contact", href: "/" }] },
-            ]}
+              ]}
-            bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+              bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
-            bottomRightText="Authentic Italian Daily Rituals"
+              bottomRightText="Authentic Italian Daily Rituals"
-          />
+            />
-        </div>
+          </div>
-      </ReactLenis>
+        </ReactLenis>
+      )}
     </ThemeProvider>
   );
 }

src/app/page.tsx

@@ -3,15 +3,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import { Award, Coffee, Smile } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [isMounted] = useState(true);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -25,113 +26,81 @@ export default function LandingPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="normal"
     >
-      <ReactLenis root>
+      {isMounted && (
-  <div id="nav" data-section="nav">
+        <ReactLenis root>
-      <NavbarLayoutFloatingOverlay
+          <div id="nav" data-section="nav">
-      navItems={[
+            <NavbarLayoutFloatingOverlay
-        { name: "Menu", id: "/menu" },
+              navItems={[
-        { name: "About", id: "/about" },
+                { name: "Menu", id: "/menu" },
-        { name: "Catering", id: "/#catering" },
+                { name: "About", id: "/about" },
-        { name: "Events", id: "/#events" },
+                { name: "Catering", id: "/services" },
-        { name: "Visit", id: "/#visit" },
+                { name: "Events", id: "/#events" },
-        { name: "Contact", id: "/contact" },
+                { name: "Visit", id: "/#visit" },
-      ]}
+              ]}
-      brandName="Molisana Bakery"
+              brandName="Molisana Bakery"
-    />
+            />
-  </div>
+          </div>
 
-  <div id="hero" data-section="hero">
+          <div id="hero" data-section="hero">
-      <HeroSplit
+            <HeroSplit
-      background={{ variant: "gradient-bars" }}
+              background={{ variant: "gradient-bars" }}
-      title="Wood-Fired Comfort, Italian Classics & Espresso Done Right."
+              title="Wood-Fired Comfort, Italian Classics & Espresso Done Right."
-      description="From early-morning cappuccinos to hot table favourites and fresh pastries — Molisana Bakery is your daily Italian ritual."
+              description="From early-morning cappuccinos to hot table favourites and fresh pastries — Molisana Bakery is your daily Italian ritual. Simply put: There is no substitute for the Italian way of food."
-      buttons={[
+              buttons={[
-        { text: "View Menu", href: "/menu" },
+                { text: "View Menu", href: "/menu" },
-        { text: "Order Catering", href: "/#catering" },
+                { text: "View Services", href: "/services" },
-      ]}
+              ]}
-      imageSrc="http://img.b2bpic.net/free-photo/woman-white-sweater-pouring-milk-into-coffee-dessert_1157-26624.jpg"
+              imageSrc="http://img.b2bpic.net/free-photo/woman-white-sweater-pouring-milk-into-coffee-dessert_1157-26624.jpg"
-      imageAlt="authentic italian bakery display"
+              imageAlt="authentic italian bakery display"
-      mediaAnimation="blur-reveal"
+              mediaAnimation="blur-reveal"
-      avatars={[
+            />
-        { src: "http://img.b2bpic.net/free-photo/medium-woman-taking-food-photo_23-2149250048.jpg", alt: "Medium woman taking food photo" },
+          </div>
-        { src: "http://img.b2bpic.net/free-photo/smiling-man-enjoying-croissant_1170-631.jpg", alt: "Smiling Man Enjoying a Croissant" },
-        { src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-kebab_23-2148773545.jpg", alt: "Medium shot smiley woman with kebab" },
-        { src: "http://img.b2bpic.net/free-photo/american-diner-aesthetics_23-2151854444.jpg", alt: "American diner aesthetics" },
-        { src: "http://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg", alt: "Young smiling woman in a cafe" },
-      ]}
-      avatarText="Join 500+ happy regulars"
-      marqueeItems={[
-        { type: "text", text: "Authentic Italian" },
-        { type: "text", text: "Fresh Daily" },
-        { type: "text", text: "Artisan Pastry" },
-        { type: "text", text: "Hot Table" },
-        { type: "text", text: "Premium Espresso" },
-      ]}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+          <div id="about" data-section="about">
-      <AboutMetric
+            <AboutMetric
-      useInvertedBackground={true}
+              title="A Daily Italian Ritual"
-      title="A Daily Italian Ritual"
+              metrics={[
-      metrics={[
+                { label: "Years of Tradition", value: "15+", icon: Award },
-        { label: "Years of Tradition", value: "15+", icon: Award },
+                { label: "Fresh Pastries Daily", value: "20+", icon: Coffee },
-        { label: "Fresh Pastries Daily", value: "20+", icon: Coffee },
+                { label: "Satisfied Customers", value: "500+", icon: Smile },
-        { label: "Satisfied Customers", value: "500+", icon: Smile },
+              ]}
-      ]}
+              metricsAnimation="slide-up"
-      metricsAnimation="slide-up"
+              useInvertedBackground={true}
-    />
+            />
-  </div>
+          </div>
 
-  <div id="products" data-section="products">
+          <div id="products" data-section="products">
-      <ProductCardThree
+            <ProductCardThree
-      animationType="slide-up"
+              animationType="slide-up"
-      textboxLayout="split"
+              textboxLayout="split"
-      gridVariant="one-large-left-three-stacked-right"
+              gridVariant="one-large-left-three-stacked-right"
-      useInvertedBackground={false}
+              useInvertedBackground={false}
-      products={[
+              products={[
-        { id: "p1", name: "Lasagna Al Forno", price: "CA$15", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-italian-pasta-with-meat-tomato-sauce-grey-surface-meal-pasta-dough-food-dinner_140725-85885.jpg?_wi=1" },
+                { id: "p1", name: "Lasagna Al Forno", price: "CA$15", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-italian-pasta-with-meat-tomato-sauce-grey-surface-meal-pasta-dough-food-dinner_140725-85885.jpg?_wi=2" },
-        { id: "p2", name: "Signature Tiramisu", price: "CA$8", imageSrc: "http://img.b2bpic.net/free-photo/tasty-homemade-tiramisu-cake_114579-43299.jpg" },
+                { id: "p2", name: "Signature Tiramisu", price: "CA$8", imageSrc: "http://img.b2bpic.net/free-photo/tasty-homemade-tiramisu-cake_114579-43299.jpg" },
-        { id: "p3", name: "Pistachio Cannoli", price: "CA$5", imageSrc: "http://img.b2bpic.net/free-photo/closeup-raw-vegan-roll-made-from-hazelnuts-purple-grunge-tabletop_181624-44513.jpg?_wi=1" },
+                { id: "p3", name: "Pistachio Cannoli", price: "CA$5", imageSrc: "http://img.b2bpic.net/free-photo/closeup-raw-vegan-roll-made-from-hazelnuts-purple-grunge-tabletop_181624-44513.jpg?_wi=2" },
-        { id: "p4", name: "Porchetta Sandwich", price: "CA$12", imageSrc: "http://img.b2bpic.net/free-photo/roll-hot-smoked-fish_2829-14225.jpg?_wi=1" },
+                { id: "p4", name: "Porchetta Sandwich", price: "CA$12", imageSrc: "http://img.b2bpic.net/free-photo/roll-hot-smoked-fish_2829-14225.jpg?_wi=2" },
-        { id: "p5", name: "Cafe Crema", price: "CA$4", imageSrc: "http://img.b2bpic.net/free-photo/glass-foamy-latte-decorated-with-daffodil_141793-433.jpg?_wi=1" },
+                { id: "p5", name: "Cafe Crema", price: "CA$4", imageSrc: "http://img.b2bpic.net/free-photo/glass-foamy-latte-decorated-with-daffodil_141793-433.jpg?_wi=2" },
-        { id: "p6", name: "Focaccia Sandwich", price: "CA$14", imageSrc: "http://img.b2bpic.net/free-photo/mozzarella-sliders-summer-picnic-sandwiches_53876-103644.jpg?_wi=1" },
+                { id: "p6", name: "Focaccia Sandwich", price: "CA$14", imageSrc: "http://img.b2bpic.net/free-photo/mozzarella-sliders-summer-picnic-sandwiches_53876-103644.jpg?_wi=2" },
-      ]}
+              ]}
-      title="Our Daily Classics"
+              title="Our Daily Classics"
-      description="Authentic recipes, generous portions, and the quality you expect from a real Italian eatery."
+              description="Authentic recipes, generous portions, and the quality you expect from a real Italian eatery."
-    />
+            />
-  </div>
+          </div>
 
-  <div id="testimonials" data-section="testimonials">
+          <div id="footer" data-section="footer">
-      <TestimonialCardThirteen
+            <FooterSimple
-      animationType="slide-up"
+              columns={[
-      textboxLayout="split"
+                { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Services", href: "/services" }] },
-      useInvertedBackground={true}
+                { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/" }] },
-      testimonials={[
+                { title: "Visit", items: [{ label: "Directions", href: "/" }] },
-        { id: "1", name: "Fabiano Daher", handle: "@fabiano", testimonial: "The lasagna and the tiramisu are among the best I have ever tasted in my life.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-enjoying-dining-table-while-communicating-with-her-husband_637285-3516.jpg" },
+              ]}
-        { id: "2", name: "Constantine Marzavas", handle: "@constantine", testimonial: "Perfect espresso! Opens at 6am so it's a great place to relax before your work day.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashionable-handsome-male-student-with-thick-beard-sitting-wooden-table-with-mug-drinking-coffee-having-happy-cheerful-face-expression_273609-1763.jpg" },
+              bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
-        { id: "3", name: "Aly Amaral", handle: "@aly", testimonial: "The atmosphere feels incredibly authentic, lively, and welcoming.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg" },
+              bottomRightText="Authentic Italian Daily Rituals"
-        { id: "4", name: "Oscar Castillo", handle: "@oscar", testimonial: "Excellent place to grab a sandwich or hit up the hot plates. Sandwiches packed with meat!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hipster-with-stylish-haircut-beard-sits-table-roadside-cafe-drinks-soda-hot-day_613910-19633.jpg" },
+            />
-        { id: "5", name: "MariaV", handle: "@maria", testimonial: "Best bakery in town by far. The hot table is fantastic, service is excellent.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-age-senior-woman-wearing-apron-uniform-red-isolated-background-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-32756.jpg" },
+          </div>
-      ]}
+        </ReactLenis>
-      showRating={true}
+      )}
-      title="What Our Community Says"
-      description="Family eatery, artisan bakery, and your local morning spot."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
-        { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
-        { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", href: "/contact" }] },
-      ]}
-      bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
-      bottomRightText="Authentic Italian Daily Rituals"
-    />
-  </div>
-      </ReactLenis>
     </ThemeProvider>
   );
 }

src/app/services/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import { Phone } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export default function ServicesPage() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      {isMounted && (
+        <ReactLenis root>
+          <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Menu", id: "/menu" },
+                { name: "About", id: "/about" },
+                { name: "Catering", id: "/services" },
+                { name: "Events", id: "/#events" },
+                { name: "Visit", id: "/#visit" },
+              ]}
+              brandName="Molisana Bakery"
+            />
+          </div>
+
+          <div id="services" data-section="about">
+            <SplitAbout
+              tag="Our Services"
+              title="Catering Capabilities"
+              description="From corporate lunches to family gatherings, we bring the authentic Molisana Bakery experience to your event. We specialize in custom party trays featuring our signature sandwiches, hot table classics, and house-made pastries."
+              className="py-32"
+              useInvertedBackground={false}
+              textboxLayout="default"
+              bulletPoints={[
+                { title: "Custom Party Trays", description: "Signature sandwiches and house-made pastries." },
+                { title: "Hot Table Classics", description: "Authentic Italian daily rituals for your event." }
+              ]}
+              mediaAnimation="none"
+            />
+            <div className="max-w-4xl mx-auto px-6 pb-20">
+              <div className="bg-card p-8 rounded-2xl border flex items-center gap-6">
+                <div className="p-4 bg-accent rounded-full">
+                  <Phone className="w-8 h-8" />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-semibold mb-2">Ready to Book?</h3>
+                  <p className="text-lg">Give us a call at (905) 856-6100 to discuss your catering requirements or email us at hello@molisanabakery.com.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div id="footer" data-section="footer">
+            <FooterSimple
+              columns={[
+                { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Services", href: "/services" }] },
+                { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/" }] },
+                { title: "Visit", items: [{ label: "Directions", href: "/" }, { label: "Contact", href: "/" }] },
+              ]}
+              bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+              bottomRightText="Authentic Italian Daily Rituals"
+            />
+          </div>
+        </ReactLenis>
+      )}
+    </ThemeProvider>
+  );
+}