Studio Brief With Changing Plate

npx shadcn add "https://ui.beste.co/r/agency24"

npx shadcn add "https://ui.beste.co/r-base/agency24"

import { Agency24, agency24Demo } from "@/components/beste/block/agency24";

export default function Page() {
  return <Agency24 {...agency24Demo} />;
}

import { Agency24 } from "@/components/beste/block/agency24";

export default function Page() {
  return (
    <Agency24
      badge={{ label: "Start a brief" }}
      heading="Four answers and we know whether we are the wrong studio for you."
      description="The same questions we would ask on a first call."
      shortcuts="numbers"
      steps={[
        {
          name: "work",
          title: "What are we making?",
          required: true,
          choices: [
            { value: "identity", label: "An identity" },
            { value: "site", label: "A site" },
          ],
          image: { src: "https://images.unsplash.com/photo-1583201173319-a4efa99605cf", alt: "Print" },
          caption: "Wordmark and print system for a small publisher.",
        },
        {
          name: "contact",
          title: "Where do we send the reply?",
          required: true,
          // an input step: the field writes to the same name
          input: { label: "Email address", placeholder: "you@studio.com", type: "email" },
          image: { src: "https://images.unsplash.com/photo-1777523743687-233bbfdbd894", alt: "Desk" },
          caption: "Every brief gets a written answer.",
        },
      ]}
      closing={{
        image: { src: "https://images.unsplash.com/photo-1763307411452-43cfd9f516ce", alt: "Studio" },
        caption: "This is the room your brief lands in on Monday morning.",
        title: "Brief received",
        description: "One of us replies inside two working days.",
        emptyLabel: "Left blank",
      }}
      button={{ label: "Book the intro call", href: "https://beste.co" }}
      notes={[
        {
          title: "No forms after this one",
          description: "The reply comes from the person who would run the work.",
        },
      ]}
    />
  );
}

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type BriefImage = { src: string; alt: string };
type Note = { title: string; description: string };

type BriefStep = {
  name: string;
  title: string;
  description?: string;
  choices?: BriefChoice[];
  input?: { label: string; placeholder?: string; type?: "email" | "text" };
  required?: boolean;
  multiple?: boolean;
  image: BriefImage;
  caption: string;
};

type BriefChoice = { value: string; label: string; description?: string };

type Closing = {
  image: BriefImage;
  caption: string;
  title: string;
  description: string;
  emptyLabel?: string;
};

type Agency24Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
};