src/app/blog/page.tsx

@@ -1,14 +1,23 @@
 "use client";
 
-import ReactLenis from "lenis/react";
+import React from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import Link from 'next/link';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Services", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     const formattedPosts = !isLoading && Array.isArray(posts)
         ? posts.map((post: any) => ({
             id: post.id || '',
@@ -35,16 +44,9 @@ export default function BlogPage() {
             secondaryButtonStyle="radial-glow"
             headingFontWeight="semibold"
         >
-            <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "/#about" },
-                            { name: "Services", id: "/#features" },
-                            { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
-                        ]}
+                        navItems={navItems}
                         brandName="Roofing Repair Guy"
                         bottomLeftText="Aurora, IL"
                         bottomRightText="(630) 523-8819"
@@ -53,12 +55,12 @@ export default function BlogPage() {
 
                 <div id="blog-content" data-section="blog-content">
                     {isLoading ? (
-                        <div className="w-content-width mx-auto py-20 text-center">
+                        <div className="w-full max-w-4xl mx-auto py-20 text-center">
                             <p className="text-foreground">Loading posts...</p>
                         </div>
                     ) : (
                         <BlogCardTwo
-                            posts={formattedPosts}
+                            items={formattedPosts}
                             title="Latest Articles"
                             description="Insights and updates from our team"
                             animationType="slide-up"
@@ -67,7 +69,6 @@ export default function BlogPage() {
                         />
                     )}
                 </div>
-            </ReactLenis>
         </ThemeProvider>
     );
 }

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ReactLenis from 'lenis/react';
+import React from 'react';
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
@@ -10,8 +10,18 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import { Building, Shield, Sparkles, Wrench } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LandingPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/#about' },
+    { name: 'Services', id: '/#features' },
+    { name: 'Testimonials', id: '/#testimonials' },
+    { name: 'Contact', id: '/#contact' },
+    // Blog and Shop pages are intentionally omitted as per design guidelines
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -25,16 +35,9 @@ export default function LandingPage() {
       secondaryButtonStyle="radial-glow"
       headingFontWeight="semibold"
     >
-      <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarStyleFullscreen
-            navItems={[
-              { name: 'Home', id: '/' },
-              { name: 'About', id: 'about' },
-              { name: 'Services', id: 'features' },
-              { name: 'Testimonials', id: 'testimonials' },
-              { name: 'Contact', id: 'contact' },
-            ]}
+            navItems={navItems.map(item => ({...item, href: item.id}))} // map id to href for internal Link components
             brandName="Roofing Repair Guy"
             bottomLeftText="Aurora, IL"
             bottomRightText="(630) 523-8819"
@@ -146,8 +149,7 @@ export default function LandingPage() {
                 id: '3',
                 title: 'Fair Pricing and Transparent Communication',
                 quote:
-                  'We got several quotes, and Roofing Repair Guy offered the best value. They were transparent throughout the process, and there were no hidden costs. A truly honest contractor.',
-                name: 'Emily R.',
+                  "We got several quotes, and Roofing Repair Guy offered the best value. They were transparent throughout the process, and there were no hidden costs. A truly honest contractor.",                name: 'Emily R.',
                 role: 'Resident, Aurora',
                 imageSrc: 'https://img.b2bpic.net/free-photo/cheerful-happy-hr-manager-talking-female-candidate-cafe_1262-16890.jpg',
                 imageAlt: 'Photo of Emily R.',
@@ -223,7 +225,6 @@ export default function LandingPage() {
             mediaAnimation="blur-reveal"
           />
         </div>
-      </ReactLenis>
     </ThemeProvider>
   );
 }

src/app/shop/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import ReactLenis from "lenis/react";
+import React from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
@@ -10,6 +10,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -73,6 +74,14 @@ function ProductPageContent({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Services", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -87,16 +96,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                 secondaryButtonStyle="radial-glow"
                 headingFontWeight="semibold"
             >
-                <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "About", id: "/#about" },
-                                { name: "Services", id: "/#features" },
-                                { name: "Testimonials", id: "/#testimonials" },
-                                { name: "Contact", id: "/#contact" },
-                            ]}
+                            navItems={navItems}
                             brandName="Roofing Repair Guy"
                             bottomLeftText="Aurora, IL"
                             bottomRightText="(630) 523-8819"
@@ -105,7 +107,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading product...</p>
                     </main>
-                </ReactLenis>
             </ThemeProvider>
         );
     }
@@ -124,16 +125,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                 secondaryButtonStyle="radial-glow"
                 headingFontWeight="semibold"
             >
-                <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "About", id: "/#about" },
-                                { name: "Services", id: "/#features" },
-                                { name: "Testimonials", id: "/#testimonials" },
-                                { name: "Contact", id: "/#contact" },
-                            ]}
+                            navItems={navItems}
                             brandName="Roofing Repair Guy"
                             bottomLeftText="Aurora, IL"
                             bottomRightText="(630) 523-8819"
@@ -152,7 +146,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                             </div>
                         </div>
                     </main>
-                </ReactLenis>
             </ThemeProvider>
         );
     }
@@ -170,16 +163,9 @@ function ProductPageContent({ params }: ProductPageProps) {
             secondaryButtonStyle="radial-glow"
             headingFontWeight="semibold"
         >
-            <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "/#about" },
-                            { name: "Services", id: "/#features" },
-                            { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
-                        ]}
+                        navItems={navItems}
                         brandName="Roofing Repair Guy"
                         bottomLeftText="Aurora, IL"
                         bottomRightText="(630) 523-8819"
@@ -221,7 +207,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                         ]}
                     />
                 </div>
-            </ReactLenis>
         </ThemeProvider>
     );
 }

src/app/shop/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Suspense, useCallback } from "react";
-import ReactLenis from "lenis/react";
+import React from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
@@ -9,6 +9,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
 function ShopPageContent() {
     const {
@@ -40,6 +41,14 @@ function ShopPageContent() {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Services", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -54,16 +63,9 @@ function ShopPageContent() {
                 secondaryButtonStyle="radial-glow"
                 headingFontWeight="semibold"
             >
-                <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "About", id: "/#about" },
-                                { name: "Services", id: "/#features" },
-                                { name: "Testimonials", id: "/#testimonials" },
-                                { name: "Contact", id: "/#contact" },
-                            ]}
+                            navItems={navItems}
                             brandName="Roofing Repair Guy"
                             bottomLeftText="Aurora, IL"
                             bottomRightText="(630) 523-8819"
@@ -87,7 +89,6 @@ function ShopPageContent() {
                             ]}
                         />
                     </div>
-                </ReactLenis>
             </ThemeProvider>
         );
     }
@@ -105,16 +106,9 @@ function ShopPageContent() {
             secondaryButtonStyle="radial-glow"
             headingFontWeight="semibold"
         >
-            <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "/#about" },
-                            { name: "Services", id: "/#features" },
-                            { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
-                        ]}
+                        navItems={navItems}
                         brandName="Roofing Repair Guy"
                         bottomLeftText="Aurora, IL"
                         bottomRightText="(630) 523-8819"
@@ -146,7 +140,6 @@ function ShopPageContent() {
                         ]}
                     />
                 </div>
-            </ReactLenis>
         </ThemeProvider>
     );
 }