Blog layout

src/app/blog/data.ts

@@ -35,7 +35,7 @@ export const allBlogs = [
     category: "Database",
     image: EloqdocVSMongoDBPart3.src,
     isNew: true,
-    isFeatured: true,
+    isFeatured: false,
   },
   {
     author: "Ankur Tyagi",
@@ -49,7 +49,7 @@ export const allBlogs = [
     category: "AI Code Editor",
     image: CursorVSClaudeCode.src,
     isNew: true,
-    isFeatured: true,
+    isFeatured: false,
   },
   {
     author: "Ankur Tyagi",
@@ -63,7 +63,7 @@ export const allBlogs = [
     category: "Database",
     image: EloqdocVSMongoDBPart2.src,
     isNew: true,
-    isFeatured: true,
+    isFeatured: false,
   },
   {
     author: "Ankur Tyagi",
@@ -75,8 +75,8 @@ export const allBlogs = [
     publishedAt: "2026-01-02T00:00:00Z",
     category: "Database",
     image: EloqdocVSMongoDB.src,
-    isNew: true,
-    isFeatured: true,
+    isNew: false,
+    isFeatured: false,
   },
   {
     author: "Jitendra Nirnejak",
@@ -89,7 +89,7 @@ export const allBlogs = [
     publishedAt: "2025-11-12T00:00:00Z",
     category: "Python",
     image: RuffAndUvImage.src,
-    isNew: true,
+    isNew: false,
     isFeatured: true,
   },
   {
@@ -101,7 +101,7 @@ export const allBlogs = [
     publishedAt: "2025-10-21T00:00:00Z",
     category: "Code Review",
     image: StateOfAICodeReviewCoverImage.src,
-    isNew: true,
+    isNew: false,
     isFeatured: true,
   },
   {
@@ -182,7 +182,7 @@ export const allBlogs = [
     image: CodeRabbitCoverImage.src,
     category: "Code Review",
     isNew: false,
-    isFeatured: true,
+    isFeatured: false,
   },
   {
     author: "Hrutik Kumthekar",
@@ -208,7 +208,7 @@ export const allBlogs = [
     image: SupabaseCoverImage.src,
     category: "Auth",
     isNew: false,
-    isFeatured: true,
+    isFeatured: false,
   },
   {
     author: "Ankur Tyagi",

src/app/blog/page.tsx

@@ -1,4 +1,7 @@
+import React from "react"
+import Image from "next/image"
 import { Link } from "next-view-transitions"
+import { CircleUserRound, Clock } from "lucide-react"
 
 import { cn, formatDate } from "@/lib/utils"
 import { getMetadata } from "@/lib/metadata"
@@ -14,6 +17,74 @@ export const metadata = getMetadata({
   image: CoverImage.src,
 })
 
+interface BlogCardProps {
+  index: number
+  title: string
+  excerpt: string
+  author: string
+  image: string
+  slug: string
+  readTime?: string
+  category: string
+  isNew?: boolean
+}
+
+const BlogCard: React.FC<BlogCardProps> = ({
+  index,
+  title,
+  excerpt,
+  author,
+  image,
+  slug,
+  readTime,
+  category,
+  isNew,
+}) => {
+  const defaultReadTime = "8 min read"
+
+  return (
+    <Link
+      href={`/blog/${slug}/`}
+      className={cn(
+        "flex flex-col transition-colors hover:bg-neutral-900",
+        "border-b border-dashed border-neutral-100/15",
+        (index + 1) % 3 !== 0 ? "md:border-r" : ""
+      )}
+    >
+      <div className="relative h-48">
+        <Image
+          src={image}
+          alt={`${title} - ${excerpt}`}
+          layout="fill"
+          objectFit="cover"
+        />
+        {isNew && (
+          <span className="absolute right-2 top-2 rounded-full bg-yellow-400 px-2 py-1 text-xs font-bold text-black">
+            NEW
+          </span>
+        )}
+      </div>
+      <div className="p-6">
+        <span className="mb-2 block text-sm font-medium text-neutral-500">
+          {category}
+        </span>
+        <h3 className="mb-2 text-xl font-bold text-neutral-200">{title}</h3>
+        <p className="mb-4 text-neutral-500">{excerpt}</p>
+      </div>
+      <div className="mt-auto px-6 pb-6">
+        <div className="flex items-center justify-between text-sm leading-none text-neutral-500">
+          <p className="flex items-center gap-1">
+            <CircleUserRound size={14} /> {author}
+          </p>
+          <p className="flex items-center gap-1">
+            <Clock size={14} /> {readTime || defaultReadTime}
+          </p>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
 export default async function BlogPage() {
   return (
     <main className="mt-[80px]">
@@ -27,6 +98,21 @@ export default async function BlogPage() {
       </section>
 
       <section className="mx-auto mb-20 flex max-w-7xl flex-col">
+        <hr className="border-dashed border-neutral-100/15" />
+        <div className="grid grid-cols-1 md:grid-cols-3">
+          {allBlogs
+            .filter((post) => post.isFeatured)
+            .map((post, index) => (
+              <BlogCard key={index} {...post} index={index} />
+            ))}
+        </div>
+        <div className="mb-12 mt-20 text-center">
+          <h2 className="text-xl font-bold tracking-tight md:text-4xl">
+            <span className="bg-gradient-to-b from-neutral-700 to-neutral-200 bg-clip-text text-transparent">
+              All Blogs
+            </span>
+          </h2>
+        </div>
         <hr className="border-dashed border-neutral-100/15" />
         {allBlogs.map((post) => (
           <Link

src/components/FeaturedPosts.tsx

@@ -8,8 +8,6 @@ import { CircleUserRound, Clock } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { allBlogs } from "@/app/blog/data"
 
-const featuredPosts = allBlogs.filter((post) => post.isFeatured)
-
 interface BlogCardProps {
   index: number
   title: string
@@ -84,11 +82,11 @@ const FeaturedPosts: React.FC = () => {
       <div className="mx-auto max-w-7xl py-20 text-center">
         <h2 className="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
           <span className="bg-gradient-to-b from-neutral-600 to-neutral-200 bg-clip-text text-transparent">
-            Featured Posts
+            Recent Posts
           </span>
         </h2>
         <p className="text-lg text-neutral-400 md:text-xl">
-          Our most trending blog posts.
+          Our most recent blog posts.
         </p>
       </div>
 
@@ -97,7 +95,7 @@ const FeaturedPosts: React.FC = () => {
       </div>
       <div className="mx-auto max-w-7xl">
         <div className="grid grid-cols-1 md:grid-cols-3">
-          {featuredPosts.slice(0, 3).map((post, index) => (
+          {allBlogs.slice(0, 3).map((post, index) => (
             <BlogCard key={index} {...post} index={index} />
           ))}
         </div>