Multi-Site Group LandingPRO

Landing6: Multi-Site Group Landing

A single page aimed at multi-site groups: a capsule navbar anchored to the sections below it, a full-bleed hero floating a live intake figure, three site cards showing what stays local, the daily weekly and monthly cadence written out, an inverted customer quote with a rating, four documents to read before booking, and a minimal footer carrying the same anchors. Seven 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/landing6?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing6.tsx and everything behind it: the seven blocks it composes (navbar74, hero157, usecase42, workflow50, testimonial43, cta87, footer121), the five components they use (stats16, location7, socialproof25, button21, badge23) and the shadcn/ui button primitive. Thirteen files.

Quick start

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

import { Landing6, landing6Demo } from "@/components/beste/page/landing6";

export default function Page() {
  return <Landing6 {...landing6Demo} />;
}

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 { Landing6, landing6Demo } from "@/components/beste/page/landing6";

export default function Page() {
  return (
    <Landing6
      {...landing6Demo}
      sites={{
        label: "Your sites",
        heading: "One system, and each site still runs itself.",
        items: [
          { title: "Local prices", description: "Set per site, changed without a ticket." },
          { title: "Local rotas", description: "Managers keep their own, the group sees all of them." },
          { title: "Local stock", description: "Counted on site, reported to the group nightly." },
        ],
      }}
    />
  );
}

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 cadence 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 bg-transparent by the page, so the hero's full-bleed media runs under it. That only works because hero157 is media-first; over a hero whose copy starts at the top, the bar would land on the text.
• Counts are load-bearing on this page. The hero takes three proof items, not four, or the fourth wraps to its own line; the cadence columns take three items each so the three lists stay level.
• hero157 keeps its floating card inside a bounded row: the background runs to the edges but the card stops at the container, so it does not drift into the corner on a widescreen display.
• The quote sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree rather than painting the section, so the rating and avatar follow the switch.
• 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 intake figure is demo data.