Landing pages

The Marketing components build landing, pricing, changelog and about pages with the same tokens, type and spacing as the app. Stack sections, pass content, and the spacing between them stays even on every screen.

How the kit is built

Primitives: Section, Section header, Marketing navbar, Marketing footer, AnnouncementOne container and one vertical rhythm. Everything else sits inside them.
Sections: Hero, Logo cloud, Feature grid, Feature rows, Bento grid, Stats strip, Testimonials, Pricing table, FAQ, Newsletter signup, Changelog, Team grid, CTA bandThe bands of a page. Each one knows its own layout, so you only pass content.
Helpers: Backdrop, Reveal, Product frameA quiet pattern behind a section, rise on first view, and a real product screen in a window.
Pages: SaaS landing, AI product landing, Pricing page, Changelog page, About pageComplete blocks to start from. Copy one, then change the words and the product screens.

Build a page

Start from a block
Pick the page closest to yours on the blocks page and install it. It brings every section it uses.
```
npx prodular-ui add landing
```
Put the product in the hero
Wrap a real screen in ProductFrame. Build the screen from the same components as the app, at app width, and the frame scales it to fit. It stays sharp, follows the theme and never goes stale like a screenshot.

Stack sections without margins

Every band is a Section. It sets the padding above and below and the content width, so two sections in a row are always the same distance apart. Separate them with tone="muted" or divider, never with a margin.

import { MarketingNavbar } from "@/components/ui/marketing-navbar"import { HeroSection } from "@/components/ui/hero-section"import { ProductFrame } from "@/components/ui/product-frame"import { Section, SectionHeader } from "@/components/ui/section"import { FeatureGrid } from "@/components/ui/feature-grid"import { CtaBand } from "@/components/ui/cta-band"import { MarketingFooter } from "@/components/ui/marketing-footer"
export default function Page() {  return (    <>      <MarketingNavbar brand={<Logo />} links={links} actions={actions} />      <main>        <HeroSection          title="Get paid on time without chasing anyone"          lead="One or two sentences on what changes for the reader."          actions={actions}          media={            <ProductFrame address="app.example.com" fade>              <Overview />            </ProductFrame>          }        />        <Section divider>          <SectionHeader eyebrow="Invoicing to cash" title="Everything between sending an invoice and seeing the money" />          <FeatureGrid features={features} />        </Section>        <CtaBand title="Stop chasing. Start closing on time." actions={actions} />      </main>      <MarketingFooter brand={<Logo />} columns={columns} legal="© 2026 Example, Inc." />    </>  )}

Close with one action
End with a CtaBand that repeats the hero action. One primary button per screen, the second one outline or ghost.

Spacing

Values are at a phone and at 1440 wide. They scale smoothly in between with clamp, so there are no jumps at breakpoints.

Part	Space	Used for
Section size sm	48 to 72	Logo clouds, newsletter bands, the header of a changelog
Section size default	64 to 104	Most sections
Section size lg	80 to 144	The hero
Section header, below	40 to 64	Between a header and the content it introduces
Gutter	16 to 32	Left and right of every container, navbar and footer included

Containers share one gutter. Pass a width to Section, the navbar and the footer so their edges line up.

Width	Max	Used for
narrow	768	Long text, a single form
default	1152	Most sections
wide	1280	Heroes with a product frame, bento grids
full	none	Edge to edge pictures

An order that works

Most landing pages read well in this order. Leave out what you cannot back with something real.

Section	What it does
Navbar	Brand, three to five links, Sign in and one call to action.
Hero	The promise in one line, a lead that says how, and the product itself.
Logo cloud	Proof right under the fold. One line, six logos.
Features	Feature grid for breadth, Feature rows for the three or four that sell.
Bento grid	What the AI does, shown with live components.
Stats strip	Three numbers with where they come from.
Testimonials	One highlight, then a wall if you have more.
Pricing	The table, or a link to the pricing page.
FAQ	The questions sales hears every week.
CTA band	The same action as the hero, said once more.
Footer	Links, legal and a newsletter signup if you send one.

Words

Sentence case everywhere. Titles say what the reader gets, not what the product is. Leads are one or two sentences. Numbers say where they come from. Buttons say what happens next: Start free trial, Book a demo. Write the pages for your product, then cut a third.

Free and Pro

Section, Section header, Announcement, Backdrop, Reveal, Logo cloud, FAQ, Newsletter signup and Team grid are free. The navbar, footer, every other section and all page blocks are part of Pro.

Pages to start from

SaaS landing: Relay, invoicing. Every section in one page.
AI product landing: Wren, a support agent. A live run in the hero, approvals and cited answers.
Pricing page: Plans with a comparison, a savings estimate and billing questions.
Changelog page: Release notes with pictures and an email signup.
About page: Mission, numbers, a short story, principles, the team and hiring.

The Figma library has the same sections as components at 1440 wide, on the Marketing page, and the same pages built from them.