SaaS Platform Tour PagePRO

Platform1: SaaS Platform Tour Page

A product page that shows the software rather than listing it: a media-first hero floating a live appointment card, a three-tab tour of the screens a team lives in, a three-phase rollout timeline, an inverted band of customer quotes, 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/platform1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/platform1.tsx and everything behind it: the seven blocks it composes (navbar74, hero164, showcase46, workflow47, testimonial42, cta74, footer119), the six components they use (browser35, calendar31, dashboard32, chat33, button21, badge23) and the shadcn/ui tabs, input and button primitives. Fourteen files.

Quick start

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

import { Platform1, platform1Demo } from "@/components/beste/page/platform1";

export default function Page() {
  return <Platform1 {...platform1Demo} />;
}

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

import { Platform1, platform1Demo } from "@/components/beste/page/platform1";

export default function Page() {
  return (
    <Platform1
      {...platform1Demo}
      rollout={{
        label: "Rollout",
        heading: "Live in three weeks, not three quarters.",
        phases: [
          { title: "Week one", description: "We import your records and check them with you." },
          { title: "Week two", description: "Your team runs a real day beside the old system." },
          { title: "Week three", description: "The old system is read only." },
        ],
      }}
    />
  );
}

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 rollout removes that section entirely rather than rendering an empty one.
• The navbar is given sticky top-0 z-50 bg-transparent by the page. The transparent background is deliberate and is what lets the hero's media run under the bar; it works because hero164 is media-first, and it would not work over a hero whose copy starts at the top.
• The product screens in the tour are real components (browser35, dashboard32, chat33, calendar31), not screenshots, so they inherit your theme and typography rather than shipping someone else's.
• The quotes sit inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree, so the block's cards and borders follow the switch rather than staying light on a dark rectangle.
• The page sets className="bg-muted/40" on the tour after spreading tour, so a className passed inside that prop is overridden.
• hero164 keeps its floating card inside a centred max-w-7xl row: the background runs to the edges but the card does not drift into the far corner on a widescreen display.
• 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.