Imprint: Product Hero

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

export function ImprintDemo() {
  return (
    <Imprint className="flex h-[var(--demo-height,36rem)] w-full flex-col items-center justify-center rounded-2xl border border-border px-6 text-center text-foreground">
      <span className="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
        Softform 2.0 · now in beta
      </span>
      <h2 className="mt-6 max-w-[14ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.02]">
        Interfaces that give a little
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Softform turns your design system into components that answer the hand. They press,
        settle and spring back, out of the box.
      </p>
      <div className="mt-9 flex items-center gap-3">
        <a
          href="#"
          className="h-11 rounded-full bg-foreground px-6 text-sm/[2.75rem] font-medium text-background shadow-sm transition-transform active:scale-[0.97]"
        >
          Start building
        </a>
        <a
          href="#"
          className="h-11 rounded-full border border-border bg-background px-6 text-sm/[2.75rem] font-medium shadow-sm transition-transform active:scale-[0.97]"
        >
          Read the docs
        </a>
      </div>
    </Imprint>
  );
}