import Link from "next/link";
import { ArrowRight, BarChart3, Lightbulb, MessagesSquare } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export const meta = {
  name: "Three-column post cards",
  description: "Post cards with gradient covers, category badge, date, reading time and author avatar.",
};

const posts = [
  {
    title: "How Linear-style teams triage 2,000 feedback items a week",
    excerpt: "A practical framework for tagging, deduplicating and prioritizing requests without drowning in spreadsheets.",
    category: "Playbooks",
    date: "Sep 24, 2026",
    readingTime: "8 min read",
    author: "Maya Chen",
    initials: "MC",
    icon: MessagesSquare,
    cover: "from-primary/30 via-primary/10 to-transparent",
  },
  {
    title: "The 5 retention metrics we wish we had tracked from day one",
    excerpt: "Cohort curves are only the start. Here are the signals that predicted churn months before it happened.",
    category: "Analytics",
    date: "Sep 17, 2026",
    readingTime: "6 min read",
    author: "Daniel Okafor",
    initials: "DO",
    icon: BarChart3,
    cover: "from-primary/10 via-primary/25 to-primary/5",
  },
  {
    title: "Introducing Nimbus Insights: AI summaries for every customer theme",
    excerpt: "Ask a question in plain English and get an answer grounded in tickets, calls and NPS comments.",
    category: "Product",
    date: "Sep 9, 2026",
    readingTime: "4 min read",
    author: "Priya Raman",
    initials: "PR",
    icon: Lightbulb,
    cover: "from-transparent via-primary/15 to-primary/30",
  },
];

export default function Blog01() {
  return (
    <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="max-w-2xl">
          <p className="text-sm font-medium text-primary">Blog</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">From the Nimbus team</h2>
          <p className="mt-4 text-muted-foreground">
            Research, playbooks and product news for teams who build with their customers.
          </p>
        </div>
        <Button variant="outline" asChild>
          <Link href="#">
            View all posts <ArrowRight />
          </Link>
        </Button>
      </div>

      <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <article
            key={post.title}
            className="group relative flex flex-col overflow-hidden rounded-2xl border bg-card transition-shadow hover:shadow-lg"
          >
            <div
              aria-hidden
              className={`relative flex aspect-[16/9] items-center justify-center overflow-hidden bg-gradient-to-br ${post.cover} bg-muted`}
            >
              <div className="absolute inset-0 bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:16px_16px] opacity-70" />
              <div className="relative flex size-14 items-center justify-center rounded-2xl border bg-background/80 text-primary shadow-sm backdrop-blur transition-transform group-hover:scale-105">
                <post.icon className="size-6" />
              </div>
            </div>
            <div className="flex flex-1 flex-col p-6">
              <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-muted-foreground">
                <Badge variant="secondary">{post.category}</Badge>
                <time>{post.date}</time>
                <span aria-hidden>·</span>
                <span>{post.readingTime}</span>
              </div>
              <h3 className="mt-4 text-lg font-semibold leading-snug">
                <Link href="#" className="after:absolute after:inset-0 hover:underline hover:underline-offset-4">
                  {post.title}
                </Link>
              </h3>
              <p className="mt-2 flex-1 text-sm text-muted-foreground">{post.excerpt}</p>
              <div className="mt-6 flex items-center gap-3">
                <Avatar size="sm">
                  <AvatarFallback>{post.initials}</AvatarFallback>
                </Avatar>
                <span className="text-sm font-medium">{post.author}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
Three-column post cards

Featured post with list

Searchable post listInteractive
