Update src/app/blog/page.tsx

src/app/blog/page.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
-// Define common navigation items for sub-pages to maintain consistency
-const ALL_NAV_ITEMS_SUB_PAGES = [
+const navItemsForSubPages = [
     { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
-    { name: "Shop", id: "/shop" },
-    { name: "Blog", id: "/blog" },
     { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
-    { name: "FAQs", id: "/#faqs" }
+    { name: "FAQs", id: "/#faqs" },
+    { name: "Contact", id: "/#contact" },
 ];
 
 export default function BlogPage() {
@@ -33,36 +30,33 @@ export default function BlogPage() {
             secondaryButtonStyle="solid"
             headingFontWeight="light"
         >
-            <ReactLenis root>
-                <div id="nav" data-section="nav">
-                    <NavbarLayoutFloatingInline
-                        brandName="Nano Mango"
-                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
-                        button={{ text: "Shop Now", href: "/products" }}
-                        buttonClassName="shadow-lg"
-                        navItemClassName="text-foreground/80 hover:text-foreground"
-                        className="backdrop-blur-sm bg-card/70"
+            <div id="nav" data-section="nav">
+                <NavbarLayoutFloatingInline
+                    brandName="Nano Mango"
+                    navItems={navItemsForSubPages}
+                    button={{ text: "Shop Now", href: "/shop" }}
+                    buttonClassName="shadow-lg"
+                    navItemClassName="text-foreground/80 hover:text-foreground"
+                    className="backdrop-blur-sm bg-card/70"
+                />
+            </div>
+
+            {isLoading ? (
+                <div className="w-full mx-auto py-40 text-center">
+                    <p className="text-foreground">Loading posts...</p>
+                </div>
+            ) : (
+                <div id="blog" data-section="blog">
+                    <BlogCardThree
+                        blogs={posts.map(post => ({ ...post, onBlogClick: () => {} }))}
+                        title="Latest Articles"
+                        description="Insights and updates from our team"
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
                     />
                 </div>
-
-                    {isLoading ? (
-                        <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">
-                            <BlogCardTwo
-                                blogs={posts}
-                                title="Latest Articles"
-                                description="Insights and updates from our team"
-                                animationType="slide-up"
-                                textboxLayout="default"
-                                useInvertedBackground={false}
-                            />
-                        </div>
-                    )}
-
-            </ReactLenis>
+            )}
         </ThemeProvider>
     );
 }