# Landing Page

> A whole landing page, built from our website components: a floating navbar, a split hero, a logo row, bento grids, a comparison, a testimonial wall, pricing, a FAQ, and a footer.

- Name: `landing-page`
- Status: beta
- Categories: landing, marketing, page
- Files: the install writes `landing-page.tsx`, and any part files named `landing-page-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/navbar`, `@arbokui/hero`, `@arbokui/logo-marquee`, `@arbokui/headline`, `@arbokui/bento-grid`, `@arbokui/comparison`, `@arbokui/faq`, `@arbokui/pricing`, `@arbokui/testimonial-wall`, `@arbokui/footer`. The install adds them.
- Gallery: https://arbokui.com/templates/landing-page
- Registry item: https://arbokui.com/r/landing-page.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the template. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/landing-page
   ```

## Use it for

- The home page of a product site. Render it as the whole page, from your app's page file.
- Write every word in the props: one object for the navbar, the hero, each section, and the footer.
- Order the sections the way a visitor decides: what it is, who uses it, what it does, how it compares, what people say, what it costs, then questions.
- Give a testimonials section its words in the section's \`headline\`, not the wall's own \`title\`, so every section heading matches.
- Put a logos section first, right under the hero, with six to twelve customer logos. Leave the hero's own \`logos\` out then, so the logos show once.
- Give each section an \`id\`, like "pricing", and point the navbar's links at it, like "#pricing".
- Pass your router's link once in \`renderLink\`. The navbar, the bento cards, and the footer all use it.
- Set \`embedded\` when you show the page inside another page, like a gallery, so it has no second main.

## Avoid it for

- A section type the template does not have. Install the part and add it to your copy, which is your own code once installed.
- More than one pricing section, or more than three plans in it.
- Words you can't stand behind, like a customer logo you have no right to show.

## Props

- `navbar`: `NavbarProps`. The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.
- `hero`: `HeroProps`. The Hero's props: the claim, the lead, the call to action, logos, and the preview.
- `sections`: `LandingSection[]`. Default `[]`. The sections under the hero, top to bottom. Each has an optional \`id\` and \`headline\`, and a \`type\` that says which part draws it.
- `footer`: `FooterProps`. The Footer's props: the brand, a line about you, link columns, and the legal line.
- `renderLink`: `(props: NavbarLinkProps) => ReactNode`. Default `a plain <a>`. Draws every link in the navbar, the bento cards, and the footer, unless a part sets its own.
- `embedded`: `boolean`. Default `false`. Renders the content in a div, not a main, for a preview inside another page.
- `className`: `string`. Extra classes on the root, which holds the container query.
- `LandingSection`: `{ id?: string; headline?: HeadlineProps } & ({ type: "bento"; cards: BentoCardProps[] } | { type: "comparison"; comparison: ComparisonProps } | { type: "faq"; faq: FaqProps } | { type: "logos"; logos: LogoMarqueeProps } | { type: "pricing"; plans: PricingCardProps[]; billing?: PricingBilling } | { type: "testimonials"; testimonials: TestimonialWallProps })`. Type. One section. Bento draws a BentoGrid of cards, comparison a Comparison, faq a FAQ, logos a Logo Marquee, testimonials a Testimonial Wall, and pricing a row of PricingCards, with an optional monthly or yearly switch.

## Accessibility

- The content sits in a main landmark, between the navbar's nav and the footer, so skip links and screen readers find it.
- The Hero renders the page's one h1. Each section's Headline is an h2.
- Sections with an \`id\` keep clear of the floating navbar when a link jumps to them.
- Each part keeps its own accessibility, listed on its page.

## Examples

### A short landing page

```tsx
<LandingPage
  navbar={{
    brand: "Workspace",
    links: [{ href: "#features", label: "Features" }, { href: "#pricing", label: "Pricing" }],
    actions: <Button tone="brand" size="sm">Create a team</Button>,
  }}
  hero={{
    title: "The app your team",
    accent: "is missing.",
    description: "Plan the week, see who is coming, and keep everyone in one place.",
    actions: <Button tone="brand" size="lg">Create a team</Button>,
  }}
  sections={[
    {
      id: "features",
      type: "bento",
      headline: { title: "Everything in one place." },
      cards: [{ title: "Reminders", description: "Emails go to whoever hasn't answered." }],
    },
    {
      id: "pricing",
      type: "pricing",
      headline: { title: "One plan.", muted: "Every team." },
      plans: [{ title: "Team", price: "$12", period: "a month", action: <Button tone="brand">Start</Button> }],
    },
  ]}
  footer={{
    brand: "Workspace",
    columns: [{ title: "Product", links: [{ href: "#pricing", label: "Pricing" }] }],
    legal: "© 2026 Workspace",
  }}
/>
```