Marketing · Page template

Marketing Landing

Hero + feature grid + social proof + CTA strip — for product or feature launches.

example.com
What it is

When to reach for it.

A full marketing page structure for announcing a product, feature, or campaign. Hero with the headline + CTA pair, dim logo row for social proof, three-up feature grid below, and a closing CTA strip. Fast to assemble, slow to grow stale.

  • Announcing a new feature, product, or campaign with its own URL.
  • Replacing a landing page that's grown into 12 stacked sections of noise.
  • Building the first impression for a marketing-driven audience.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Hero

    Centered headline, sub-copy, two CTAs — primary + ghost secondary.

    HeadingTextButton
  2. 2

    Logo row

    Dim grayscale customer logos — 5–6 in a row.

    Image
  3. 3

    Feature grid

    Three feature cards: icon + headline + 1-paragraph copy.

    CardIconHeading
  4. 4

    Closing CTA

    Repeat the primary CTA on a contrast strip near the bottom.

    HeadingButton
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

HeadingButtonCardIconText
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
productNameCleenUIHero headline
primaryCtaStart free trialHero + closing CTA buttons
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Marketing Landing layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.