Imprint: Studio Card

import { Imprint } from "@/components/ui/imprint";

const services = ["Product design", "Design systems", "Motion", "Prototyping"];

export function ImprintStudioDemo() {
  return (
    <Imprint
      cell={64}
      depth={64}
      reach={110}
      falloff={0}
      boxClassName="text-stone-100 dark:text-stone-900"
      accentClassName="text-orange-500"
      className="w-full max-w-3xl rounded-2xl border border-stone-200 text-stone-900 dark:border-stone-800 dark:text-stone-100"
    >
      <div className="flex min-h-[26rem] flex-col justify-between gap-12 p-8 sm:p-12">
        <span className="text-sm font-medium tracking-tight">Kiln Studio</span>
        <div>
          <h2 className="max-w-[16ch] font-serif text-4xl/[1.05] tracking-tight text-balance sm:text-5xl/[1.02]">
            We make the parts people touch.
          </h2>
          <ul className="mt-6 flex flex-wrap gap-2">
            {services.map((s) => (
              <li
                key={s}
                className="rounded-full border border-stone-200 bg-stone-50 px-3 py-1 text-xs text-stone-600 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-400"
              >
                {s}
              </li>
            ))}
          </ul>
        </div>
        <div className="flex items-end justify-between gap-6">
          <a
            href="#"
            className="rounded-full bg-orange-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-transform active:scale-[0.97]"
          >
            Start a project
          </a>
          <span className="text-right text-xs text-stone-500">Booking from March</span>
        </div>
      </div>
    </Imprint>
  );
}