Blog Rows with Cover Art

import { Heading } from "@/components/editorial/heading"
import {
  Post,
  PostAuthor,
  PostCategory,
  PostContent,
  PostDate,
  PostExcerpt,
  PostGroup,
  PostMedia,
  PostMeta,
  PostTitle,
} from "@/components/editorial/post"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Guides",
  body: "Longer reads for support leads, from first hire to a team of fifty.",
} as const

const POSTS = [
  {
    image: "https://01orbital.dev/art/kit/layered-currents-180965.png",
    category: "Hiring",
    title: "Hiring your first support lead",
    description:
      "The first lead sets the tone for every hire after them. We asked twelve founders what they looked for and what they wish they had looked for instead.",
    datetime: "2026-08-20",
    date: "Aug 20, 2026",
    author: "Peggy Whitson",
    href: "#",
  },
  {
    image: "https://01orbital.dev/art/kit/newman-blue.png",
    category: "Operations",
    title: "One queue, then the specialists",
    description:
      "Every conversation starts in one shared queue. Specialist teams pull from it by rule, so nothing waits in a side inbox that nobody watches.",
    datetime: "2026-08-06",
    date: "Aug 6, 2026",
    author: "Tim Peake",
    href: "#",
  },
  {
    image: "https://01orbital.dev/art/kit/fluid-forms-831492.png",
    category: "Product",
    title: "Automations that stay out of the way",
    description:
      "An automation should save a person a step, never answer for them. We rebuilt ours around that rule and replies got warmer.",
    datetime: "2026-07-23",
    date: "Jul 23, 2026",
    author: "Jim Lovell",
    href: "#",
  },
] as const

export default function Blog03() {
  return (
    <Section>
      {/* The header shares the list's column, so both start on one edge. */}
      <SectionContent width="lg" size="lg">
        <SectionHeader>
          <SectionTitleGroup>
            <Heading>{COPY.title}</Heading>
          </SectionTitleGroup>
          <SectionDescription>{COPY.body}</SectionDescription>
        </SectionHeader>
        <PostGroup cols={1}>
          {POSTS.map((post) => (
            <Post key={post.title} variant="row">
              <PostMedia>
                <img src={post.image} alt="" loading="lazy" />
              </PostMedia>
              <PostContent className="max-w-md self-center">
                <PostMeta>
                  <PostDate dateTime={post.datetime}>{post.date}</PostDate>
                  <PostCategory>{post.category}</PostCategory>
                </PostMeta>
                <PostTitle>
                  <a href={post.href}>{post.title}</a>
                </PostTitle>
                <PostExcerpt>{post.description}</PostExcerpt>
                <PostMeta className="mt-3 text-foreground">
                  <PostAuthor>{post.author}</PostAuthor>
                </PostMeta>
              </PostContent>
            </Post>
          ))}
        </PostGroup>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/blog-03

npx shadcn add @01orbital/blog-03

yarn shadcn add @01orbital/blog-03

bunx --bun shadcn add @01orbital/blog-03