From 7beec13899a2c833102a2de8a6f5bf66436f806e Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 13:04:00 +0000
Subject: [PATCH] Update app/blog/page.tsx

---
 app/blog/page.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 app/blog/page.tsx

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
new file mode 100644
index 0000000..432db8e
--- /dev/null
+++ b/app/blog/page.tsx
@@ -0,0 +1,47 @@
+import { type Metadata } from "next";
+import { getAllBlogs } from "@/lib/blog";
+import { Background } from "@/components/background";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { BlogCard } from "@/components/blog-card";
+
+export const metadata: Metadata = {
+  title: "Blog - [App Name]",
+  description:
+    "[App Name] blog - Stay updated with the latest insights, tutorials, and updates about our platform and features.",
+  openGraph: {
+    images: ["https://ai-saas-template-aceternity.vercel.app/banner.png"],
+  },
+};
+
+export default async function ArticlesIndex() {
+  let blogs = await getAllBlogs();
+
+  return (
+    <div className="relative overflow-hidden py-20 md:py-0">
+      <Background />
+      <Container className="flex flex-col items-center justify-between pb-20">
+        <div className="relative z-20 py-10 md:pt-40">
+          <Heading as="h1">Blog</Heading>
+          <Subheading className="text-center">
+            Discover insightful resources and expert advice from our seasoned
+            team to elevate your knowledge.
+          </Subheading>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-20 w-full mb-10">
+          {blogs.slice(0, 2).map((blog, index) => (
+            <BlogCard blog={blog} key={blog.title + index} />
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 w-full relative z-20">
+          {blogs.slice(2).map((blog, index) => (
+            <BlogCard blog={blog} key={blog.title + index} />
+          ))}
+        </div>
+      </Container>
+    </div>
+  );
+}