Type Release LandingPRO

Landing1: Type Release Landing

A single-page product launch for a typeface: a poster navbar anchored to every section below it, a fact-led hero, a centred manifesto, a ruled index of the work it is set in, three licence tiers, a buyer's FAQ, an inverted newsletter band, and a ruled index footer repeating the same anchors. Eight 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/landing1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing1.tsx and everything behind it: the eight blocks it composes (navbar67, hero148, about65, portfolio112, pricing65, faq76, cta72, footer111) and the badge7 and button12 components they use. Eleven files, no follow-up installs.

Quick start

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

import { Landing1, landing1Demo } from "@/components/beste/page/landing1";

export default function Page() {
  return <Landing1 {...landing1Demo} />;
}

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 { Landing1, landing1Demo } from "@/components/beste/page/landing1";

export default function Page() {
  return (
    <Landing1
      {...landing1Demo}
      licences={{
        label: "Licences",
        heading: "Three, and the desktop one is perpetual.",
        plans: [
          { name: "Desktop", price: "$90", description: "Two machines, no expiry." },
          { name: "Web", price: "$180", description: "Up to 500,000 views a month." },
          { name: "Family", price: "$420", description: "Nine weights, both widths." },
        ],
      }}
    />
  );
}

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 manifesto 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. Point a link at #in-use and it lands with the heading clear of the bar.
• Smooth scrolling is set by a page-level style element that targets html, with a prefers-reduced-motion guard. It uses element selectors only, no class names, so class obfuscation cannot detach it.
• The navbar on this page is deliberately not sticky. It is a poster, read once at the top; pinning it would keep a heavy masthead over a page whose whole argument is the typeface.
• The footer repeats the same anchors as the navbar, so a reader at the bottom can get back without scrolling up. Renaming an id means changing it in three places: the wrapper, the navbar link and the footer link.
• The newsletter 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 fields 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.