Category Previews 02

import { cn } from "@/lib/utils";
import Link from "next/link";

const callouts = [
  {
    name: "Desk and Office",
    description: "Work from home accessories",
    imageSrc:
      "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg",
    imageAlt:
      "Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug.",
    href: "#"
  },
  {
    name: "Self-Improvement",
    description: "Journals and note-taking",
    imageSrc:
      "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg",
    imageAlt:
      "Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant.",
    href: "#"
  },
  {
    name: "Travel",
    description: "Daily commute essentials",
    imageSrc:
      "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-03.jpg",
    imageAlt: "Collection of four insulated travel bottles on wooden shelf.",
    href: "#"
  }
];

export default function Example() {
  return (
    <section className="py-10 lg:py-20">
      <div className="container mx-auto px-4">
        <header className="mb-6">
          <h2 className="font-heading text-3xl">Collections</h2>
        </header>

        <div className="grid gap-6 md:grid-cols-2">
          {callouts.map((callout, i) => (
            <Link
              key={callout.name}
              href={callout.href}
              className={cn("group relative block overflow-hidden border", {
                "row-span-2 aspect-video md:aspect-auto": i === 0,
                "aspect-video": i !== 0
              })}>
              <img
                className="h-full w-full object-cover transition-all duration-300 group-hover:opacity-75"
                src={callout.imageSrc}
                alt=""
              />
              <div className="absolute inset-0 top-auto flex items-end justify-between bg-white/30 p-4 backdrop-blur-md dark:bg-black/30">
                <p className="relative text-base font-semibold">{callout.description}</p>
                <h3 className="relative text-sm">{callout.name}</h3>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}