src/app/blog/page.tsx

@@ -2,10 +2,9 @@
 
 import { useEffect, useState } from "react";
 import ReactLenis from "lenis/react";
-import BlogCardOne from "@/components/sections/blog/BlogCardOne";
-import FooterCard from "@/components/sections/footer/FooterCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
+import FooterCard from "@/components/sections/footer/FooterCard";
 import { Twitter, Linkedin, Github } from 'lucide-react';
 
 type BlogPost = {
@@ -55,7 +54,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}?status=published`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -109,21 +109,29 @@ export default function BlogPage() {
                             <p className="text-foreground">Loading posts...</p>
                         </div>
                     ) : (
-                        <BlogCardOne
+                        <div className="w-content-width mx-auto py-20">
-                            blogs={posts}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                            title="Latest Insights & Updates"
+                                {posts.map((post) => (
-                            description="Discover our latest thoughts, tutorials, and industry insights to help you stay ahead of the curve"
+                                    <div key={post.id} className="card p-6">
-                            tag="Blog"
+                                        <div className="aspect-video mb-4 rounded-lg overflow-hidden">
-                            textboxLayout="default"
+                                            <img src={post.imageSrc} alt={post.imageAlt} className="w-full h-full object-cover" />
-                            useInvertedBackground="noInvert"
+                                        </div>
-                            carouselMode="buttons"
+                                        <div className="mb-2">
-                            animationType="slide-up"
+                                            <span className="text-sm text-accent font-medium">{post.category}</span>
-                            buttons={[
+                                        </div>
-                                {
+                                        <h2 className="text-xl font-semibold text-foreground mb-2">{post.title}</h2>
-                                    text: "View All Posts",                                    href: "/blog/archive"
+                                        <p className="text-foreground/75 mb-4">{post.excerpt}</p>
-                                }
+                                        <div className="flex items-center space-x-3">
-                            ]}
+                                            <img src={post.authorAvatar} alt={post.authorName} className="w-8 h-8 rounded-full" />
-                        />
+                                            <div className="flex flex-col">
+                                                <span className="text-sm font-medium text-foreground">{post.authorName}</span>
+                                                <span className="text-xs text-foreground/60">{post.date}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
                     )}
 
                     <FooterCard
@@ -142,7 +150,7 @@ export default function BlogPage() {
                                 icon: Github,
                                 href: "https://github.com",                                ariaLabel: "GitHub"
                             }
-                        ]]
+                        ]}
                     />
                 </div>
             </ReactLenis>

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';