Content List Card

import { Badge } from "@/app/components/ui/badge";

/**
 * Pattern A — "Content List Card".
 * Seen on: BookCard (ebook/playbook), EventCard (resources), ResourcesCards.
 * Shape: image on top, rounded-lg, overflow-hidden bg-white shadow-smooth,
 * body p-3.5–p-4.
 */
const items = [
  {
    title: "The Complete SEO Playbook",
    description: "A step-by-step guide to ranking on page one.",
    tag: "Ebook",
  },
  {
    title: "Link Building Masterclass",
    description: "Recorded session covering outreach at scale.",
    tag: "Webinar",
  },
];

export function CardContentListDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
      {items.map((item) => (
        <article
          key={item.title}
          className="shadow-smooth flex h-full flex-col overflow-hidden rounded-lg bg-white"
        >
          <div className="background-gradient-blue h-[160px]" />
          <div className="flex flex-1 flex-col gap-2 p-4">
            <Badge variant="blue">{item.tag}</Badge>
            <h3 className="text-foreground text-base font-semibold">
              {item.title}
            </h3>
            <p className="text-muted text-sm">{item.description}</p>
          </div>
        </article>
      ))}
    </div>
  );
}