Update src/app/services/page.tsx

Merge version_10 into main

src/app/about/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { History } from "lucide-react";
+
+export default function AboutPage() {
+  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: "Services", id: "/services" },
+              { name: "Events", id: "/#events" },
+              { name: "Visit", id: "/#visit" },
+            ]}
+            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">
+          <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/menu/page.tsx

@@ -0,0 +1,109 @@
+"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 ProductCardThree from '@/components/sections/product/ProductCardThree';
+
+export default function MenuPage() {
+  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: "Services", id: "/services" },
+              { name: "Events", id: "/#events" },
+              { name: "Visit", id: "/#visit" },
+            ]}
+            brandName="Molisana Bakery"
+          />
+        </div>
+
+        <div className="pt-32 pb-20">
+            <div id="espresso-bar" data-section="products">
+                <ProductCardThree 
+                    title="Espresso Bar"
+                    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"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="hot-table" data-section="products">
+                <ProductCardThree 
+                    title="Hot Table Classics"
+                    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"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="sandwiches" data-section="products">
+                <ProductCardThree 
+                    title="Sandwiches"
+                    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"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="pastries" data-section="products">
+                <ProductCardThree 
+                    title="Pastries"
+                    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"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="catering" data-section="products">
+                <ProductCardThree 
+                    title="Catering Trays"
+                    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"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </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/page.tsx

@@ -29,10 +29,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Menu", id: "#menu" },
-        { name: "Catering", id: "#catering" },
-        { name: "Events", id: "#events" },
-        { name: "Visit", id: "#visit" },
+        { name: "Menu", id: "/menu" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Events", id: "/#events" },
+        { name: "Visit", id: "/#visit" },
       ]}
       brandName="Molisana Bakery"
     />
@@ -44,8 +45,8 @@ export default function LandingPage() {
       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."
       buttons={[
-        { text: "View Menu", href: "#menu" },
-        { text: "Order Catering", href: "#catering" },
+        { text: "View Menu", href: "/menu" },
+        { text: "View Services", href: "/services" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-white-sweater-pouring-milk-into-coffee-dessert_1157-26624.jpg"
       imageAlt="authentic italian bakery display"
@@ -122,10 +123,10 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={false}
       background={{ variant: "sparkles-gradient" }}
-      text="Ready to feed your team? From corporate catering to private birthday dinners, we bring the authentic taste of Italy to your event."
+      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 to Order", href: "tel:+1000000000" },
+        { text: "View Catering Details", href: "/services" },
+        { text: "Call (905) 856-6100", onClick: () => { const el = document.getElementById('contact'); el?.scrollIntoView({ behavior: 'smooth' }); } },
       ]}
     />
   </div>
@@ -133,9 +134,9 @@ export default function LandingPage() {
   <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: "tel:+1000000000" }] },
+        { 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", onClick: () => { const el = document.getElementById('contact'); el?.scrollIntoView({ behavior: 'smooth' }); } }] },
       ]}
       bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
       bottomRightText="Authentic Italian Daily Rituals"
@@ -144,4 +145,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,78 @@
+"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";
+
+export default function ServicesPage() {
+  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: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            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: "Services", href: "/services" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Home", href: "/" }] },
+              { title: "Visit", items: [{ label: "Contact", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+            bottomRightText="Authentic Italian Daily Rituals"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}