Card Grid with Authors

npx shadcn add "https://ui.beste.co/r/blog3"

npx shadcn add "https://ui.beste.co/r-base/blog3"

import { Blog3, blog3Demo } from "@/components/beste/block/blog3";

export default function BlogIndexPage() {
  return <Blog3 {...blog3Demo} />;
}

import { Blog3 } from "@/components/beste/block/blog3";

export default function BlogIndexPage() {
  return (
    <Blog3
      badge={{ label: "Blog" }}
      heading="Latest articles"
      description="Notes on shipping product."
      posts={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&fit=crop",
            alt: "Code on screen",
          },
          title: "Shipping faster with feature flags",
          summary: "How we roll out risky changes without breaking prod.",
          date: "March 2, 2026",
          readTime: "6 min read",
          author: { name: "Sam Rivera", title: "Staff Engineer" },
          tags: [{ label: "Engineering", href: "/blog/tag/engineering" }],
          href: "/blog/feature-flags",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&fit=crop",
            alt: "Analytics dashboard",
          },
          title: "Reading a funnel report",
          summary: "A short primer on where users actually drop off.",
          date: "February 20, 2026",
          readTime: "4 min read",
          href: "/blog/funnel-report",
        },
      ]}
    />
  );
}

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: Tag[];
  href?: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Tag = { label: string; href?: string };