From ecbd6288eb01349225db4d40d47ed7040c8f863d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 25 Feb 2026 11:41:41 +0000
Subject: [PATCH] Update src/app/blog/page.tsx

---
 src/app/blog/page.tsx | 67 ++++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 9b93317..9ebc5c6 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -22,38 +21,42 @@ export default function BlogPage() {
             secondaryButtonStyle="layered"
             headingFontWeight="light"
         >
-            <ReactLenis root>
-                <div id="nav" data-section="nav">
-                    <NavbarStyleCentered
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Blog", id: "/blog" },
-                            { name: "Shop", id: "/shop" },
-                        ]}
-                        button={{ text: "Shop Now", href: "/shop" }}
-                        brandName="Dring Together"
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Blog", id: "/blog" },
+                        { name: "Shop", id: "/shop" },
+                    ]}
+                    button={{ text: "Shop Now", href: "/shop" }}
+                    brandName="Dring Together"
+                />
+            </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">
+                    <FeatureCardTwentyFour
+                        features={posts.map(post => ({
+                            id: post.id,
+                            title: post.title,
+                            author: post.author || 'Dring Together',
+                            description: post.excerpt,
+                            tags: post.tags || [],
+                            imageSrc: post.image,
+                            imageAlt: post.title,
+                        }))}
+                        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
-                                posts={posts}
-                                title="Latest Articles"
-                                description="Insights and updates from our team"
-                                animationType="slide-up"
-                                textboxLayout="default"
-                                useInvertedBackground={false}
-                                carouselMode="buttons"
-                            />
-                        </div>
-                    )}
-
-            </ReactLenis>
+            )}
         </ThemeProvider>
     );
 }