Product Surface Mosaic

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

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

import { Bento11, bento11Demo } from "@/components/beste/block/bento11";

export default function Page() {
  return <Bento11 {...bento11Demo} />;
}

import { Bento11 } from "@/components/beste/block/bento11";
import { Dashboard33 } from "@/components/beste/piece/dashboard33";
import { Indicator14 } from "@/components/beste/piece/indicator14";

export default function Page() {
  return (
    <Bento11
      badge={{ label: "The whole surface" }}
      heading="One workspace, seen from six angles"
      description="Every tile below is the same data, read by a different person."
      lead={{
        kicker: "Overview",
        title: "The week, already counted",
        description: "Bookings, no-shows, and clinical hours are totalled as the work happens.",
        media: (
          <Dashboard33
            title="This week"
            range="Mon to Sun"
            items={[{ label: "Booked", value: "142", delta: "+9", direction: "up" }]}
          />
        ),
        image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
      }}
      statement={{
        title: "Built for the eleven people who touch a record",
        description: "Roles read like jobs and every change writes itself into the log.",
      }}
      figure={{ value: "99.95%", title: "availability we sign for" }}
      asset={{
        kicker: "Reliability",
        title: "Published, not promised",
        description: "Forty-five days of service history, updated hourly.",
        media: <Indicator14 title="Booking service" uptime="99.98%" range="Last 45 days" />,
      }}
      list={{ title: "Included on every plan", items: ["Multi-site rota", "Audit log"] }}
      photo={{
        caption: "Bramble Health, Bristol",
        image: { src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" },
      }}
    />
  );
}

type TileImage = {
  src: string;
  alt: string;
};

type MediaTile = {
  kicker: string;
  title: string;
  description: string;
  media: ReactNode;
  image?: TileImage;
};

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

type FigureTile = {
  value: string;
  title: string;
};

type PhotoTile = {
  caption: string;
  image: TileImage;
};

type ListTile = {
  title: string;
  items: string[];
};