2026-02-20 20:01:41 +00:00
10 changed files with 207 additions and 139 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,6 +8,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -63,7 +64,7 @@ export default function AboutPage() {
              { "value": "Integrity and trust", "title": "We build lasting relationships." },
              { "value": "Clear communication", "title": "You'll always know what's happening." }
            ]}
-            imageSrc="https://img.b2bpic.net/free-photo/portrait-happy-auto-repairman-looking-camera-while-his-customers-are-standing-background_637285-7790.jpg?_wi=2"
+            imageSrc="https://img.b2bpic.net/free-photo/portrait-happy-auto-repairman-looking-camera-while-his-customers-are-standing-background_637285-7790.jpg"
            imageAlt="Portrait of Nick, a professional and friendly plumber."
            useInvertedBackground={false}
            mediaAnimation="opacity"
@@ -90,7 +91,7 @@ export default function AboutPage() {
              { "value": "Pro-Level Skill", "title": "We solve problems other plumbers miss—and we do it efficiently." },
              { "value": "Integrity You Can Feel", "title": "Customers call out our honesty, professionalism, and respect in the home." }
            ]}
-            imageSrc="https://img.b2bpic.net/free-photo/man-fixing-kitchen-sink_53876-13430.jpg?_wi=1"
+            imageSrc="https://img.b2bpic.net/free-photo/man-fixing-kitchen-sink_53876-13430.jpg"
            imageAlt="Plumber fixing a pipe with precision."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,62 +1,89 @@
 "use client";

-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import BlogCardOne from "@/components/sections/blog/BlogCardOne";
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Services", id: "/services" },
+  { name: "About Us", id: "/about" },
+  { name: "Reviews", id: "/reviews" },
+  { name: "Service Areas", id: "/service-areas" },
+  { name: "Contact Us", id: "/contact" },
+];
+
+const footerColumns = [
+  {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Services", href: "/services" },
+      { label: "About Us", href: "/about" },
+    ],
+  },
+  {
+    items: [
+      { label: "Reviews", href: "/reviews" },
+      { label: "Service Areas", href: "/service-areas" },
+      { label: "Contact Us", href: "/contact" },
+    ],
+  },
+];
+
 export default function BlogPage() {
    const { posts, isLoading } = useBlogPosts();

    return (
        <ThemeProvider
-            defaultButtonVariant=\"elastic-effect\"
-            defaultTextAnimation=\"entrance-slide\"
-            borderRadius=\"pill\"
-            contentWidth=\"small\"
-            sizing=\"mediumSizeLargeTitles\"
-            background=\"none\"
-            cardStyle=\"outline\"
-            primaryButtonStyle=\"shadow\"
-            secondaryButtonStyle=\"layered\"
-            headingFontWeight=\"extrabold\"
+            defaultButtonVariant="elastic-effect"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
+            contentWidth="small"
+            sizing="mediumSizeLargeTitles"
+            background="none"
+            cardStyle="outline"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="layered"
+            headingFontWeight="extrabold"
        >
-            <ReactLenis root>
+            <div id="nav" data-section="nav">
                <NavbarStyleFullscreen
-                    navItems={[{ name: \"Home\", id: \"/\" }, { name: \"Services\", id: \"/services\" }, { name: \"About\", id: \"/about\" }, { name: \"Reviews\", id: \"/reviews\" }, { name: \"Areas\", id: \"/service-areas\" }, { name: \"Contact\", id: \"/contact\" }]}
-                    brandName=\"Nick and Sons Plumbing\"
-                    bottomLeftText=\"Call Now\"
-                    bottomRightText=\"Request Estimate\"
+                    navItems={navItems}
+                    brandName="Nick and Sons Plumbing"
+                    bottomLeftText="Call Now"
+                    bottomRightText="Request Estimate"
                />
-
+            </div>
+            <main>
                {isLoading ? (
-                    <div className=\"w-content-width mx-auto py-20 text-center\">
-                        <p className=\"text-foreground\">Loading posts...</p>
+                    <div className="w-content-width mx-auto py-20 text-center">
+                        <p className="text-foreground">Loading posts...</p>
                    </div>
                ) : (
-                    <div id=\"blog\" data-section=\"blog\">
+                    <div id="blog" data-section="blog">
                        <BlogCardOne
                            blogs={posts}
-                            title=\"Latest Articles\"
-                            description=\"Insights and updates from our team\"
-                            animationType=\"slide-up\"
-                            textboxLayout=\"default\"
+                            title="Latest Articles"
+                            description="Insights and updates from our team"
+                            animationType="slide-up"
+                            textboxLayout="default"
                            useInvertedBackground={false}
-                            carouselMode=\"buttons\"
+                            carouselMode="buttons"
                        />
                    </div>
                )}
-
+            </main>
+            <div id="footer" data-section="footer">
                <FooterLogoEmphasis
-                    columns={[{ items: [{ label: \"Services\", href: \"/services\" }, { label: \"About Us\", href: \"/about\" }, { label: \"Reviews\", href: \"/reviews\" }] }, { items: [{ label: \"Service Areas\", href: \"/service-areas\" }, { label: \"Contact\", href: \"/contact\" }, { label: \"Request Estimate\", href: \"/contact\" }] }]}
-                    logoText=\"Nick and Sons Plumbing\"
-                    containerClassName=\"py-10 md:py-12 lg:py-16\"
-                    logoClassName=\"text-4xl font-extrabold text-[--foreground] mb-6\"
-                    itemClassName=\"text-[--foreground] hover:text-[--primary-cta] transition-colors\"
+                    columns={footerColumns}
+                    logoText="Nick and Sons Plumbing"
+                    containerClassName="py-10 md:py-12 lg:py-16"
+                    logoClassName="text-4xl font-extrabold text-[--foreground] mb-6"
+                    itemClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors"
                />
-            </ReactLenis>
+            </div>
        </ThemeProvider>
    );
 }
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -9,6 +9,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -65,7 +66,7 @@ export default function ContactPage() {
              { "name": "phone", "type": "tel", "placeholder": "Phone", "required": true }
            ]}
            textarea={{ "name": "issue", "placeholder": "Describe the issue...", "rows": 4, "required": true }}
-            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg?_wi=5"
+            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Professional plumber answering a phone call."
            useInvertedBackground={false}
            mediaAnimation="opacity"
@@ -109,7 +110,7 @@ export default function ContactPage() {
              { "value": "Pro-Level Skill", "title": "We solve problems other plumbers miss—and we do it efficiently." },
              { "value": "Integrity You Can Feel", "title": "Customers call out our honesty, professionalism, and respect in the home." }
            ]}
-            imageSrc="https://img.b2bpic.net/free-photo/man-fixing-kitchen-sink_53876-13430.jpg?_wi=2"
+            imageSrc="https://img.b2bpic.net/free-photo/man-fixing-kitchen-sink_53876-13430.jpg"
            imageAlt="Plumber fixing a pipe with precision."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,20 +3,16 @@ import { Playfair_Display, Inter } from "next/font/google";
 import "./globals.css";

 const playfairDisplay = Playfair_Display({
-  variable: "--font-playfair-display",
-  subsets: ["latin"],
+  variable: "--font-playfair-display",  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800", "900"]
 });

 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });

 export const metadata: Metadata = {
-  title: "Nick and Sons Plumbing",
-  description: "Nick and Sons Plumbing delivers pro-level workmanship, clear communication, and integrity-first service—from quick fixes to upgrades and remodel support.",
-};
+  title: "Nick and Sons Plumbing",  description: "Nick and Sons Plumbing delivers pro-level workmanship, clear communication, and integrity-first service—from quick fixes to upgrades and remodel support."};

 export default function RootLayout({
  children,
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,6 +12,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -130,7 +131,7 @@ export default function HomePage() {
              { "value": "Integrity and trust", "title": "We build lasting relationships." },
              { "value": "Clear communication", "title": "You'll always know what's happening." }
            ]}
-            imageSrc="https://img.b2bpic.net/free-photo/portrait-happy-auto-repairman-looking-camera-while-his-customers-are-standing-background_637285-7790.jpg?_wi=1"
+            imageSrc="https://img.b2bpic.net/free-photo/portrait-happy-auto-repairman-looking-camera-while-his-customers-are-standing-background_637285-7790.jpg"
            imageAlt="Portrait of Nick, a professional and friendly plumber."
            useInvertedBackground={false}
            mediaAnimation="opacity"
@@ -201,7 +202,7 @@ export default function HomePage() {
              { "name": "phone", "type": "tel", "placeholder": "Phone", "required": true }
            ]}
            textarea={{ "name": "issue", "placeholder": "Describe the issue...", "rows": 4, "required": true }}
-            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg?_wi=1"
+            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Professional plumber answering a phone call."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/reviews/page.tsx
+++ b/src/app/reviews/page.tsx
@@ -9,6 +9,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -106,7 +107,7 @@ export default function ReviewsPage() {
              { "name": "phone", "type": "tel", "placeholder": "Phone", "required": true }
            ]}
            textarea={{ "name": "issue", "placeholder": "Describe the issue...", "rows": 4, "required": true }}
-            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg?_wi=3"
+            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Professional plumber answering a phone call."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/service-areas/page.tsx
+++ b/src/app/service-areas/page.tsx
@@ -9,6 +9,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -106,7 +107,7 @@ export default function ServiceAreasPage() {
              { "name": "phone", "type": "tel", "placeholder": "Phone", "required": true }
            ]}
            textarea={{ "name": "issue", "placeholder": "Describe the issue...", "rows": 4, "required": true }}
-            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg?_wi=4"
+            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Professional plumber answering a phone call."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -8,6 +8,7 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import Link from "next/link";

 const navItems = [
+  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "About Us", id: "/about" },
  { name: "Reviews", id: "/reviews" },
@@ -115,7 +116,7 @@ export default function ServicesPage() {
              { "name": "phone", "type": "tel", "placeholder": "Phone", "required": true }
            ]}
            textarea={{ "name": "issue", "placeholder": "Describe the issue...", "rows": 4, "required": true }}
-            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg?_wi=2"
+            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Professional plumber answering a phone call."
            useInvertedBackground={false}
            mediaAnimation="opacity"
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -2,7 +2,6 @@

 import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
@@ -12,6 +11,32 @@ import { useCheckout } from "@/hooks/useCheckout";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Services", id: "/services" },
+  { name: "About Us", id: "/about" },
+  { name: "Reviews", id: "/reviews" },
+  { name: "Service Areas", id: "/service-areas" },
+  { name: "Contact Us", id: "/contact" },
+];
+
+const footerColumns = [
+  {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Services", href: "/services" },
+      { label: "About Us", href: "/about" },
+    ],
+  },
+  {
+    items: [
+      { label: "Reviews", href: "/reviews" },
+      { label: "Service Areas", href: "/service-areas" },
+      { label: "Contact Us", href: "/contact" },
+    ],
+  },
+];
+
 interface ProductPageProps {
    params: Promise<{ id: string }>;
 }
@@ -88,20 +113,17 @@ function ProductPageContent({ params }: ProductPageProps) {
                secondaryButtonStyle="layered"
                headingFontWeight="extrabold"
            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ "name": "Home", "id": "/" }, { "name": "Services", "id": "/services" }, { "name": "About", "id": "/about" }, { "name": "Reviews", "id": "/reviews" }, { "name": "Areas", "id": "/service-areas" }, { "name": "Contact", "id": "/contact" }, { "name": "Shop", "id": "/shop" }]}
-                            brandName="Nick and Sons Plumbing"
-                            bottomLeftText="Call Now"
-                            bottomRightText="Request Estimate"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <p className="text-foreground">Loading product...</p>
-                    </main>
-                </ReactLenis>
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={navItems}
+                        brandName="Nick and Sons Plumbing"
+                        bottomLeftText="Call Now"
+                        bottomRightText="Request Estimate"
+                    />
+                </div>
+                <main className="min-h-screen flex items-center justify-center pt-20">
+                    <p className="text-foreground">Loading product...</p>
+                </main>
            </ThemeProvider>
        );
    }
@@ -120,28 +142,25 @@ function ProductPageContent({ params }: ProductPageProps) {
                secondaryButtonStyle="layered"
                headingFontWeight="extrabold"
            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ "name": "Home", "id": "/" }, { "name": "Services", "id": "/services" }, { "name": "About", "id": "/about" }, { "name": "Reviews", "id": "/reviews" }, { "name": "Areas", "id": "/service-areas" }, { "name": "Contact", "id": "/contact" }, { "name": "Shop", "id": "/shop" }]}
-                            brandName="Nick and Sons Plumbing"
-                            bottomLeftText="Call Now"
-                            bottomRightText="Request Estimate"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={navItems}
+                        brandName="Nick and Sons Plumbing"
+                        bottomLeftText="Call Now"
+                        bottomRightText="Request Estimate"
+                    />
+                </div>
+                <main className="min-h-screen flex items-center justify-center pt-20">
+                    <div className="text-center">
+                        <p className="text-foreground mb-4">Product not found</p>
+                        <button
+                            onClick={() => router.push("/shop")}
+                            className="primary-button px-6 py-2 rounded-theme"
+                        >
+                            Back to Shop
+                        </button>
                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <div className="text-center">
-                            <p className="text-foreground mb-4">Product not found</p>
-                            <button
-                                onClick={() => router.push("/shop")}
-                                className="primary-button px-6 py-2 rounded-theme"
-                            >
-                                Back to Shop
-                            </button>
-                        </div>
-                    </main>
-                </ReactLenis>
+                </main>
            </ThemeProvider>
        );
    }
@@ -159,16 +178,15 @@ function ProductPageContent({ params }: ProductPageProps) {
            secondaryButtonStyle="layered"
            headingFontWeight="extrabold"
        >
-            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{ "name": "Home", "id": "/" }, { "name": "Services", "id": "/services" }, { "name": "About", "id": "/about" }, { "name": "Reviews", "id": "/reviews" }, { "name": "Areas", "id": "/service-areas" }, { "name": "Contact", "id": "/contact" }, { "name": "Shop", "id": "/shop" }]}
-                        brandName="Nick and Sons Plumbing"
-                        bottomLeftText="Call Now"
-                        bottomRightText="Request Estimate"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                    />
-                </div>
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen
+                    navItems={navItems}
+                    brandName="Nick and Sons Plumbing"
+                    bottomLeftText="Call Now"
+                    bottomRightText="Request Estimate"
+                />
+            </div>
+            <main>
                <div id="product-detail-card" data-section="product-detail-card">
                    <ProductDetailCard
                        layout="page"
@@ -205,16 +223,16 @@ function ProductPageContent({ params }: ProductPageProps) {
                        ]}
                    />
                </div>
-                <div id="footer" data-section="footer">
-                    <FooterLogoEmphasis
-                        columns={[{ "items": [{ "label": "Services", "href": "/services" }, { "label": "About Us", "href": "/about" }, { "label": "Reviews", "href": "/reviews" }] }, { "items": [{ "label": "Service Areas", "href": "/service-areas" }, { "label": "Contact", "href": "/contact" }, { "label": "Request Estimate", "href": "/contact" }] }]}
-                        logoText="Nick and Sons Plumbing"
-                        containerClassName="py-10 md:py-12 lg:py-16"
-                        logoClassName="text-4xl font-extrabold text-[--foreground] mb-6"
-                        itemClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors"
-                    />
-                </div>
-            </ReactLenis>
+            </main>
+            <div id="footer" data-section="footer">
+                <FooterLogoEmphasis
+                    columns={footerColumns}
+                    logoText="Nick and Sons Plumbing"
+                    containerClassName="py-10 md:py-12 lg:py-16"
+                    logoClassName="text-4xl font-extrabold text-[--foreground] mb-6"
+                    itemClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors"
+                />
+            </div>
        </ThemeProvider>
    );
 }
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,12 +1,37 @@
 "use client";

-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Services", id: "/services" },
+  { name: "About Us", id: "/about" },
+  { name: "Reviews", id: "/reviews" },
+  { name: "Service Areas", id: "/service-areas" },
+  { name: "Contact Us", id: "/contact" },
+];
+
+const footerColumns = [
+  {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Services", href: "/services" },
+      { label: "About Us", href: "/about" },
+    ],
+  },
+  {
+    items: [
+      { label: "Reviews", href: "/reviews" },
+      { label: "Service Areas", href: "/service-areas" },
+      { label: "Contact Us", href: "/contact" },
+    ],
+  },
+];
+
 export default function ShopPage() {
    const {
        products,
@@ -30,20 +55,17 @@ export default function ShopPage() {
                secondaryButtonStyle="layered"
                headingFontWeight="extrabold"
            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ "name": "Home", "id": "/" }, { "name": "Services", "id": "/services" }, { "name": "About", "id": "/about" }, { "name": "Reviews", "id": "/reviews" }, { "name": "Areas", "id": "/service-areas" }, { "name": "Contact", "id": "/contact" }, { "name": "Shop", "id": "/shop" }]}
-                            brandName="Nick and Sons Plumbing"
-                            bottomLeftText="Call Now"
-                            bottomRightText="Request Estimate"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <p className="text-foreground">Loading products...</p>
-                    </main>
-                </ReactLenis>
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={navItems}
+                        brandName="Nick and Sons Plumbing"
+                        bottomLeftText="Call Now"
+                        bottomRightText="Request Estimate"
+                    />
+                </div>
+                <main className="min-h-screen flex items-center justify-center pt-20">
+                    <p className="text-foreground">Loading products...</p>
+                </main>
            </ThemeProvider>
        );
    }
@@ -61,16 +83,15 @@ export default function ShopPage() {
            secondaryButtonStyle="layered"
            headingFontWeight="extrabold"
        >
-            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{ "name": "Home", "id": "/" }, { "name": "Services", "id": "/services" }, { "name": "About", "id": "/about" }, { "name": "Reviews", "id": "/reviews" }, { "name": "Areas", "id": "/service-areas" }, { "name": "Contact", "id": "/contact" }, { "name": "Shop", "id": "/shop" }]}
-                        brandName="Nick and Sons Plumbing"
-                        bottomLeftText="Call Now"
-                        bottomRightText="Request Estimate"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                    />
-                </div>
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen
+                    navItems={navItems}
+                    brandName="Nick and Sons Plumbing"
+                    bottomLeftText="Call Now"
+                    bottomRightText="Request Estimate"
+                />
+            </div>
+            <main>
                <div id="product-catalog" data-section="product-catalog">
                    <ProductCatalog
                        layout="page"
@@ -82,16 +103,16 @@ export default function ShopPage() {
                        emptyMessage="No products found"
                    />
                </div>
-                <div id="footer" data-section="footer">
-                    <FooterLogoEmphasis
-                        columns={[{ "items": [{ "label": "Services", "href": "/services" }, { "label": "About Us", "href": "/about" }, { "label": "Reviews", "href": "/reviews" }] }, { "items": [{ "label": "Service Areas", "href": "/service-areas" }, { "label": "Contact", "href": "/contact" }, { "label": "Request Estimate", "href": "/contact" }] }]}
-                        logoText="Nick and Sons Plumbing"
-                        containerClassName="py-10 md:py-12 lg:py-16"
-                        logoClassName="text-4xl font-extrabold text-[--foreground] mb-6"
-                        itemClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors"
-                    />
-                </div>
-            </ReactLenis>
+            </main>
+            <div id="footer" data-section="footer">
+                <FooterLogoEmphasis
+                    columns={footerColumns}
+                    logoText="Nick and Sons Plumbing"
+                    containerClassName="py-10 md:py-12 lg:py-16"
+                    logoClassName="text-4xl font-extrabold text-[--foreground] mb-6"
+                    itemClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors"
+                />
+            </div>
        </ThemeProvider>
    );
 }