Home1: Care Platform Home

A full marketing home page for a light editorial SaaS: a pill navbar, a split hero with a full-bleed image band, an interactive capability selector, outcome metrics, an editorial quote carrying its own proof, a closing call to action, and a newsletter footer. Seven blocks, one install.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

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

This installs the page to components/beste/page/home1.tsx and everything behind it: the seven blocks it composes (navbar71, hero143, feature257, stats66, testimonial41, cta73, footer119), the nine components they use (calendar31, calendar32, chart7, indicator14, progress16, stats15, socialproof24, button21, badge23) and the shadcn/ui input, avatar and button primitives. Seventeen files, the largest closure in the set.

Quick start

The installed file exports home1Demo alongside the page: the exact props behind the preview above. Spread it to get a working page in one line.

import { Home1, home1Demo } from "@/components/beste/page/home1";

export default function Page() {
  return <Home1 {...home1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time.

import { Home1, home1Demo } from "@/components/beste/page/home1";

export default function Page() {
  return (
    <Home1
      {...home1Demo}
      stats={{
        label: "Outcomes",
        heading: "What changes in the first quarter.",
        stats: [
          { value: "42%", label: "Fewer missed appointments" },
          { value: "3.1h", label: "Given back per clinician, per week" },
          { value: "94%", label: "Of records complete at sign-off" },
        ],
      }}
    />
  );
}

Props

Every prop is the full prop object of the block that renders that section, so anything the block accepts is accepted here.

Sections

Behavior notes

• Every section is conditional on its own prop, so omitting stats removes that section entirely rather than rendering an empty one.
• The page sets className="bg-muted/40" on the capability selector after spreading feature, so a className passed inside that prop is overridden. Tint that section from the page, not through the prop.
• The closing call to action sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree, so the block's own cards, borders and muted labels follow the switch rather than staying light on a dark rectangle.
• Because that band uses dark rather than a fixed colour, it inverts against whatever theme is active.
• This closure is the largest in the set at seventeen files, because the capability selector composes real components (calendar31, calendar32, chart7, progress16, stats15) rather than pictures of them.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.
• The page is Pro because blocks inside it are, which is why the licence parameters are on the command above.