Staircase Asset Trio

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

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

import { Feature265, feature265Demo } from "@/components/beste/block/feature265";

export default function Page() {
  return <Feature265 {...feature265Demo} />;
}

import { Feature265 } from "@/components/beste/block/feature265";
import { Receipt3 } from "@/components/beste/piece/receipt3";
import { Search24 } from "@/components/beste/piece/search24";

export default function Page() {
  return (
    <Feature265
      badge={{ label: "Find, act, settle" }}
      heading="Three moves that used to take three systems"
      description="Look something up, do the thing it needed, and close the money side of it."
      items={[
        {
          kicker: "Find it",
          title: "One search across everything",
          description: "Members, notes, appointments, and invoices answer the same query.",
          media: (
            <Search24
              query="rowan"
              groupLabel="Members"
              results={[{ title: "Rowan Blake", meta: "Active · Clinic 2", kind: "Member" }]}
              footer="1 of 11 matches shown"
            />
          ),
          image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
        },
        {
          kicker: "Settle it",
          title: "Paid before the notes are filed",
          description: "The charge is attached to the appointment that created it.",
          media: <Receipt3 status="Payment received" amount="$1,240.00" caption="May care plan" />,
          image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
        },
      ]}
    />
  );
}

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

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