Three Card Post Grid

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
2import { Badge } from "@/components/ui/badge"
3import { Button } from "@/components/ui/button"
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card"
12import { Separator } from "@/components/ui/separator"
13import { IconPlaceholder } from "@/components/icons/icon-placeholder"
14 
15const posts = [
16  {
17    category: "Engineering",
18    title: "How we cut API latency by 60% with edge caching",
19    excerpt:
20      "Our monolith was fast enough, until it wasn't. We traced the bottleneck to cold database reads on every request and rearchitected our caching layer in three weeks.",
21    author: {
22      name: "Lena Park",
23      initials: "LP",
24      avatar: "https://i.pravatar.cc/150?img=45",
25    },
26    date: "Jun 9, 2026",
27    readTime: "7 Min Read",
28    image:
29      "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80",
30    imageAlt: "Server rack with blinking lights in a data center",
31  },
32  {
33    category: "Design",
34    title: "Building a token system that survives a rebrand",
35    excerpt:
36      "Semantic tokens feel abstract until the day your brand color changes. We share the naming conventions and tooling that let us ship a full rebrand in under two days.",
37    author: {
38      name: "Marcus Webb",
39      initials: "MW",
40      avatar: "https://i.pravatar.cc/150?img=12",
41    },
42    date: "May 28, 2026",
43    readTime: "5 Min Read",
44    image:
45      "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&q=80",
46    imageAlt: "Colour swatches and design tokens spread on a desk",
47  },
48  {
49    category: "Product",
50    title: "What 1,200 user interviews taught us about onboarding",
51    excerpt:
52      "Drop-off at step two turned out to have nothing to do with the UI. Listening to customers revealed a mismatch between our mental model and theirs. Here's how we fixed it.",
53    author: {
54      name: "Sofia Andrade",
55      initials: "SA",
56      avatar: "https://i.pravatar.cc/150?img=32",
57    },
58    date: "May 14, 2026",
59    readTime: "9 Min Read",
60    image:
61      "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80",
62    imageAlt: "Two people in a user research interview session",
63  },
64]
65 
66export default function BlogBlock() {
67  return (
68    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground">
69      <div className="mx-auto w-full max-w-5xl">
70// … truncated