import { ArrowRight, BookOpen, Gauge, Layers } from "lucide-react" import { Section, SectionHeader } from "@/registry/balick/ui/section" const header = { eyebrow: "Blog", title: "Notes from the team.", description: "Product updates, engineering deep dives and lessons learned along the way.", } const all = { label: "View all posts", href: "#" } const posts = [ { title: "How we cut cold starts by 80%", excerpt: "A look at the caching and bundling changes behind our fastest release yet.", category: "Engineering", date: "2026-09-12", readingTime: "8 min read", author: "David Chen", icon: Gauge, href: "#", }, { title: "Designing a system that scales with the team", excerpt: "Tokens, primitives and the rules that keep forty screens looking like one product.", category: "Design", date: "2026-08-28", readingTime: "6 min read", author: "Amara Okafor", icon: Layers, href: "#", }, { title: "What we learned from a thousand customer calls", excerpt: "The questions people ask before they buy, and how they reshaped our roadmap.", category: "Company", date: "2026-08-03", readingTime: "5 min read", author: "Claire Martin", icon: BookOpen, href: "#", }, ] function formatDate(date: string) { return new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC", }) } export function Blog01({ id = "blog" }: { id?: string }) { return (

{all.label}

{/* Replace with a cover image: */}

{post.category} · {formatDate(post.date)}

{post.title}

{post.excerpt}

{post.author} · {post.readingTime}

) }

{post.title}