@theguild/components/dist/components/cards-colorful.js

import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Anchor } from "./anchor";
const CardsColorful = ({ cards, className }) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white py-8 dark:bg-dark", className), children: /* @__PURE__ */ jsx("div", { className: "container flex flex-wrap space-y-6 md:flex-nowrap md:space-x-8 md:space-y-0", children: cards.map((card) => /* @__PURE__ */ jsx(
  Anchor,
  {
    className: "relative min-h-[200px] w-full rounded-3xl p-8 text-white [background:var(--color)] after:absolute after:right-0 after:top-0 after:h-full after:w-[calc(30%-1rem)] after:rounded-3xl after:bg-white/10 after:content-[''] md:h-72 md:w-1/2 md:hover:scale-105 md:hover:shadow-xl lg:after:w-[calc(50%-1rem)]",
    style: { "--color": card.color },
    ...card.link,
    children: /* @__PURE__ */ jsxs("div", { className: "w-3/4 lg:w-1/2", children: [
      /* @__PURE__ */ jsx("h2", { className: "pb-1.5 text-xs font-semibold uppercase opacity-60", children: card.category }),
      /* @__PURE__ */ jsx("h3", { className: "pb-2.5 text-2xl font-bold md:text-3xl", children: card.title }),
      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium opacity-60", children: card.description })
    ] })
  },
  card.title
)) }) });
export {
  CardsColorful
};