Workshop Campaign LandingPRO

Landing3: Workshop Campaign Landing

A single-page campaign for a two-day workshop: a tab bar navbar whose tabs are the sections below it, a cinematic hero with the date, a four-tab agenda with a photograph per half day, one ticket price with three add-ons, six accounts from past attendees, a booking FAQ, and a newsletter 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/landing3?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the page to components/beste/page/landing3.tsx and everything behind it: the seven blocks it composes (navbar51, hero115, workflow28, pricing64, testimonial26, faq71, footer104), the button1 and badge6 components they use, and the shadcn/ui tabs and button primitives. Ten files, no follow-up installs.

Quick start

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

import { Landing3, landing3Demo } from "@/components/beste/page/landing3";

export default function Page() {
  return <Landing3 {...landing3Demo} />;
}

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 { Landing3, landing3Demo } from "@/components/beste/page/landing3";

export default function Page() {
  return (
    <Landing3
      {...landing3Demo}
      tickets={{
        label: "Tickets",
        heading: "One price, and three things you can add.",
        plan: { name: "Two days", price: "€680", description: "Both days, lunch, and the notes afterwards." },
        addons: [
          { name: "Portfolio review", price: "€120" },
          { name: "Dinner on the first night", price: "€45" },
          { name: "Recording", price: "€90" },
        ],
      }}
    />
  );
}

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 agenda removes that section entirely rather than rendering an empty one. On a one-page site that also removes the target of a navbar tab, so drop the matching tab too.
• The navbar is given sticky top-0 z-50 by the page and stays for the whole document, which is the point of a tab bar: on a one-page site it is the only navigation there is, so it has to be reachable from the bottom of the page as well as the top.
• The navbar's tab labels are kept short on purpose. Long labels such as a full day-and-date wrap on a phone and the bar stops reading as a tab bar; the anchors carry the meaning, the labels only have to be distinguishable.
• 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 attendee grid takes six items because that is what fills its rows. Four leaves two cells empty on the last row, which reads as missing content rather than as a short list.
• There is no dark band and no closing CTA block on this page: the tickets section is the call to action, and putting a second one after the FAQ would ask twice.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.