Switching Campaign LandingPRO

Landing5: Switching Campaign Landing

A single-page switching campaign: an announcement navbar anchored to the sections below it, a hero floating a live saving calculation, an evidence band with the method written out, six objections answered with proof against each, two closing paths on an inverted band, and a footer carrying the same anchors. Six blocks, one install, one page.

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/landing5?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing5.tsx and everything behind it: the six blocks it composes (navbar73, hero161, stats70, faq83, cta83, footer120), the four components they use (money23, chart7, button21, badge23) and the shadcn/ui button primitive. Eleven files, no follow-up installs.

Quick start

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

import { Landing5, landing5Demo } from "@/components/beste/page/landing5";

export default function Page() {
  return <Landing5 {...landing5Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time. Keep the navbar's href values pointing at the anchors, or the page stops navigating itself.

import { Landing5, landing5Demo } from "@/components/beste/page/landing5";

export default function Page() {
  return (
    <Landing5
      {...landing5Demo}
      savings={{
        label: "Evidence",
        heading: "Where the saving comes from, written out.",
        stats: [
          { value: "€1,840", label: "Average monthly saving, 40 seats" },
          { value: "11 min", label: "Saved per invoice run" },
          { value: "0", label: "Days of overlap you pay for twice" },
        ],
      }}
    />
  );
}

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 savings removes that section entirely rather than rendering an empty one. On a one-page site that also removes the target of a navbar link, so drop the matching link too.
• The anchors belong to the page, not to the blocks: each section is wrapped in a div carrying the id and a scroll-mt offset, so no block is modified to be linkable.
• Smooth scrolling is set by a page-level style element that targets html, with a prefers-reduced-motion guard. Element selectors only, so class obfuscation cannot detach it.
• The navbar is given sticky top-0 z-50 by the page and stays for the whole document. On a one-page site it is the only navigation there is, so it has to be reachable from the bottom as well as the top; it works here because the block carries its own opaque band.
• The objections section takes six items. The grid is built for six, and five leaves one cell empty on the last row, which on a page arguing that nothing is left out is the worst place to have a hole.
• The saving figure in the hero and the chart in the evidence band are real components (money23, chart7), so they take your theme and typography rather than shipping an image of someone else's numbers.
• The closing band sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree rather than painting the section, so both paths keep their contrast.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks; the live calculation is demo data, not a calculator.