Audience Tabs With Photo

npx shadcn add "https://ui.beste.co/r/usecase49?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/usecase49?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Usecase49, usecase49Demo } from "@/components/beste/block/usecase49";

export default function Page() {
  return <Usecase49 {...usecase49Demo} />;
}

import { Usecase49 } from "@/components/beste/block/usecase49";

export default function Page() {
  return (
    <Usecase49
      badge={{ label: "Depends who is asking" }}
      heading="The same project, explained to three different rooms."
      description="Founders, marketing leads and the people who will maintain it want different answers."
      tabs={[
        {
          label: "Founders",
          title: "What it costs you and what it buys back",
          summary: "One fixed price, one named lead and a schedule you can put in front of a board.",
          src: "/audiences/founders.jpg",
          alt: "Team working at a long shared table",
          outcomes: [
            { title: "No open-ended hours", description: "Fixed scope and a written estimate." },
            { title: "One person answerable", description: "The lead who sat in the first call." },
          ],
        },
        {
          label: "Marketing",
          title: "Pages you can update without a designer",
          summary: "Templates, components and written rules, handed over with a session.",
          src: "/audiences/marketing.jpg",
          alt: "Studio monitor showing a layout in progress",
          outcomes: [{ title: "Every state drawn", description: "Empty and error states included." }],
        },
      ]}
    />
  );
}

type AudienceTab = {
  label: string;
  title: string;
  summary: string;
  src: string;
  alt: string;
  outcomes: OutcomeRow[];
};

type OutcomeRow = {
  title: string;
  description: string;
};