src/app/blog/page.tsx

@@ -5,7 +5,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+
+interface BlogPost {
+    id: string;
+    slug: string;
+    title: string;
+    summary: string;
+    coverImage?: string;
+    publishedAt: string;
+}
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -40,19 +48,31 @@ export default function BlogPage() {
                 </div>
 
                 {isLoading ? (
-                    <div className="w-content-width mx-auto py-20 text-center">
+                    <div className="w-content-width mx-auto py-20 text-center min-h-screen flex items-center justify-center">
                         <p className="text-foreground">Loading posts...</p>
                     </div>
                 ) : (
-                    <div id="blog" data-section="blog">
-                        <BlogCardThree
-                            items={posts}
-                            title="Featured Articles"
-                            description="Explore our latest insights from the team."
-                            animationType="slide-up"
-                            textboxLayout="default"
-                            useInvertedBackground={false}
-                        />
+                    <div id="blog" data-section="blog" className="py-20">
+                        <div className="w-content-width mx-auto text-center mb-12">
+                            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl">Featured Articles</h1>
+                            <p className="mt-6 text-lg leading-8 text-foreground/80">Explore our latest insights from the team.</p>
+                        </div>
+                        <div className="w-content-width mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                            {(posts as BlogPost[]).map((post) => (
+                                <a key={post.id} href={`/blog/${post.slug}`} className="group block card bg-card text-card-foreground p-4 rounded-theme-md transition-all duration-300 hover:scale-105 hover:shadow-lg">
+                                    {post.coverImage && (
+                                        <div className="overflow-hidden rounded-theme-sm mb-4">
+                                            <img src={post.coverImage} alt={post.title} className="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-110" />
+                                        </div>
+                                    )}
+                                    <h2 className="text-xl font-semibold mb-2 leading-tight">{post.title}</h2>
+                                    <p className="text-card-foreground/70 text-sm mb-3">
+                                        {new Date(post.publishedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+                                    </p>
+                                    <p className="text-card-foreground/80 line-clamp-3">{post.summary}</p>
+                                </a>
+                            ))}
+                        </div>
                     </div>
                 )}
                 

src/app/page.tsx

@@ -28,7 +28,7 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered 
           brandName="Carter Brothers"
-          navItems={[{name:"Home",id:"hero"},{name:"Services",id:"services"},{name:"About",id:"about"},{name:"Reviews",id:"testimonials"},{name:"FAQ",id:"faq"}]}
+          navItems={[{name:"Home",id:"hero"},{name:"About",id:"about"},{name:"Services",id:"services"},{name:"Reviews",id:"testimonials"},{name:"FAQ",id:"faq"}]}
           button={{text:"Get a Free Quote",href:"contact"}}
           className="py-4"
         />