Two-Up Capability Cards

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

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

import { Feature258, feature258Demo } from "@/components/beste/block/feature258";

export default function Page() {
  return <Feature258 {...feature258Demo} />;
}

import { Feature258 } from "@/components/beste/block/feature258";
import { Money23 } from "@/components/beste/piece/money23";
import { Notification20 } from "@/components/beste/piece/notification20";
import { ShieldCheck } from "lucide-react";

export default function Page() {
  return (
    <Feature258
      badge={{ label: "Two hard parts" }}
      heading="Billing and access, handled without a second system"
      description="The two things practices usually bolt on afterwards are the two things this refuses to leave out."
      items={[
        {
          kicker: "Billing",
          title: "One bill instead of four",
          description: "Charges accrue as care happens and reconcile themselves.",
          points: [
            "Invoices raised from the appointment record",
            "Insurer and self-pay on the same ledger",
          ],
          button: { label: "See billing", href: "/billing" },
          media: <Money23 label="Estimated saving" amount="$1,840" period="per month" />,
          image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
        },
        {
          kicker: "Access",
          title: "Records open to the right people only",
          description: "Access is requested inside the product and logged either way.",
          points: ["Six named roles, no checkbox grid", "Every grant and export written down"],
          button: { label: "See permissions", href: "/security" },
          media: (
            <Notification20
              icon={ShieldCheck}
              title="Access request"
              meta="Noah Reyes is asking for the records role"
              primaryLabel="Approve"
              secondaryLabel="Decline"
            />
          ),
          image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
        },
      ]}
    />
  );
}

type ActionLink = {
  label: string;
  href: string;
};

type FeatureCard = {
  kicker: string;
  title: string;
  description: string;
  points: string[];
  button: ActionLink;
  media: ReactNode;
  image?: TileImage;
};

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