Hover Feature Cards

import {
  HoverFeatureCards,
  type HoverFeatureCard,
} from "@/components/unlumen-ui/hover-feature-cards";
import Link from "next/link";

const items: HoverFeatureCard[] = [
  {
    name: "Components",
    description:
      "Real components, not just primitives. Ready to use and customize.",
    href: "/components",
    img: "/blocks.png",
    imgLight: "/blocks-light.png",
    imgClassName: "absolute -bottom-10 left-1/2 -translate-x-1/2",
    imgWidth: 320,
    containerClassName: "h-full rounded-3xl",
    fadeBottom: true,
  },
  {
    name: "primitives",
    description: "Polished UI system, focused on aesthetics and smooth UX.",
    href: "/docs/ui",
    img: "/refined-ui.png",
    imgWidth: 200,
    containerClassName: "h-full rounded-3xl",
  },
];

export default function Example() {
  return (
    <HoverFeatureCards
      items={items}
      renderLink={(href, children) => <Link href={href}>{children}</Link>}
    />
  );
}