import { BrushedMetalCard } from "@/components/vandoko-brushed-metal";

export default function Page() {
  return (
    <BrushedMetalCard
      title="Hero Highlight"
      description="Interactive dot pattern background with animated text."
      href="/docs/components/ace-hero-01"
      category="Hero"
      license="MIT"
      curatedBy="Michael"
      curatedDate="2026-03-28"
      compatibility={{ react: "19.2.4", next: "16.2.1" }}
      badges={[{ label: "New", variant: "primary" }]}
    />
  );
}

import { BrushedMetal } from "@/components/vandoko-brushed-metal";

export default function Card() {
  return (
    <div className="rounded-xl border bg-card overflow-hidden">
      <BrushedMetal height="h-48">
        <span className="absolute left-3 top-3 rounded-full border bg-card/80 px-2 py-0.5 text-xs backdrop-blur-sm">
          Badge
        </span>
      </BrushedMetal>
      <div className="p-4">
        <h3>Card Title</h3>
      </div>
    </div>
  );
}