Paint Reveal: About the Founder

import { PaintReveal } from "@/components/ui/paint-reveal";

const portrait = (grade = "") =>
  `https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&crop=faces&w=900&h=1125&q=80${grade}`;

export function PaintRevealFounderDemo() {
  return (
    <section className="grid w-full max-w-4xl items-center gap-8 sm:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] sm:gap-12">
      <PaintReveal
        src={portrait("&sat=-100&con=8")}
        alt="Portrait of Noor Haddad"
        revealSrc={portrait()}
        autoPlay
        brushSize={150}
        softness={0.75}
        fadeMs={1100}
        className="aspect-[4/5] w-full rounded-2xl"
      />
      <div>
        <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">About the founder</p>
        <blockquote className="mt-4 text-2xl leading-snug font-medium tracking-tight text-balance text-zinc-900 sm:text-3xl dark:text-zinc-50">
          “Every brand guide I was handed was a PDF nobody opened. So we build the system into the
          tools people already use.”
        </blockquote>
        <div className="mt-6 flex items-center gap-3">
          <span className="h-px w-8 bg-zinc-300 dark:bg-zinc-700" />
          <p className="text-sm text-zinc-600 dark:text-zinc-400">
            <span className="font-medium text-zinc-900 dark:text-zinc-100">Noor Haddad</span>,
            founder of Mera Studio
          </p>
        </div>
        <p className="mt-6 max-w-md text-sm leading-relaxed text-pretty text-zinc-600 dark:text-zinc-400">
          Twelve years in brand teams at Spotify and Monzo, then a studio of six in Amsterdam. Mera
          designs identities that ship as code, type and templates on day one.
        </p>
      </div>
    </section>
  );
}