Landing2: Studio One-Page Landing

A whole studio on one page: a mega navbar whose panel and links are anchors into the page itself, a cross-fading photo hero, a stats-led studio band, a capabilities accordion with lead times and figures, a two-row quote marquee, an inverted closing panel, and a contact footer that repeats 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/landing2?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing2.tsx and everything behind it: the seven blocks it composes (navbar66, hero153, about66, agency21, testimonial34, cta70, footer110), the badge7 and button12 components they use, and the shadcn/ui accordion primitive. Ten files, no follow-up installs.

Quick start

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

import { Landing2, landing2Demo } from "@/components/beste/page/landing2";

export default function Page() {
  return <Landing2 {...landing2Demo} />;
}

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 { Landing2, landing2Demo } from "@/components/beste/page/landing2";

export default function Page() {
  return (
    <Landing2
      {...landing2Demo}
      capabilities={{
        label: "Capabilities",
        heading: "Four things, and the lead time for each.",
        items: [
          { title: "Identity", lead: "Nine weeks", detail: "Naming, marks, type and the rules that hold them." },
          { title: "Packaging", lead: "Twelve weeks", detail: "Structure, artwork and the press check." },
          { title: "Websites", lead: "Ten weeks", detail: "Design and build, handed over running." },
        ],
      }}
    />
  );
}

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 capabilities 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, no class names, so class obfuscation cannot detach it.
• The navbar is sticky, and its mega panel is always mounted and hidden with CSS rather than conditionally rendered, so the panel's links exist in the server-rendered HTML and a crawler can follow them.
• The quote marquee and the hero's cross-fade are the only motion on the page, and both live inside their blocks. Neither is driven by the page.
• The closing panel 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 cards and borders follow.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.