Landing4: Agency One-Page Landing

A whole agency on one page: a floating card navbar anchored to the sections below it, an editorial split hero that closes on a client strip, a stats-led studio band, four projects with what each one was for, an inverted band of client-reported numbers, an inline contact panel, and a mega footer repeating the 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/landing4?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing4.tsx and everything behind it: the seven blocks it composes (navbar50, hero112, about34, showcase37, stats57, cta65, footer102), the button1 and badge6 components they use, and the shadcn/ui button primitive. Ten files, no follow-up installs.

Quick start

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

import { Landing4, landing4Demo } from "@/components/beste/page/landing4";

export default function Page() {
  return <Landing4 {...landing4Demo} />;
}

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 { Landing4, landing4Demo } from "@/components/beste/page/landing4";

export default function Page() {
  return (
    <Landing4
      {...landing4Demo}
      results={{
        label: "Results",
        heading: "Numbers our clients reported, not ones we measured.",
        stats: [
          { value: "2.4x", label: "Repeat orders, first year after relaunch" },
          { value: "31%", label: "Lower cost per acquisition" },
          { value: "9 days", label: "From brief to first press check" },
        ],
      }}
    />
  );
}

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 results 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 sticky and floats as a card, so it needs the space either side of it. It sits above the hero rather than over it, since the hero starts on type and a bar laid over it would cover the first line.
• The hero's heading is rendered as HTML, so a <br /> sets the line break and the words inside <strong> are the ones that drop to the muted tone. It is the one string on the page that is not plain text.
• The hero's client strip is the page's first piece of evidence, and it names the same studios the work section then shows. Passing an empty clients array removes the strip and the rule above it.
• The results band sits inside a wrapper carrying the dark class, which swaps the theme tokens for that subtree rather than painting the section, so the block's own figures and labels follow.
• showcase37 lays out four projects. Three leaves a hole in the grid, and the copy convention here is what each project was for, which is what makes the section read as evidence rather than as a gallery.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.