KANTO DS v1.12.0
Customise

Theme

Accent

Font

Corners

Density

Text size

Reset to Kanto
Templates

Landing

GitHub Copy link

A product's marketing page: a hero, features, pricing, questions and the way in.

Demo

Live demo
Landing

The frame is the template itself, running. Everything in it works.

What to try

  • Switch the pricing to yearly: the plans change, with what yearly saves.
  • Subscribe to the newsletter — and try an @example.com address, which is on the list already.
  • Narrow the window: every block stacks, and the header's links move into its menu.

Start a project

npm create kanto@latest my-app -- --template landing --stack react

Or fork it as it is, without the tool:

npx degit MrArnaudMichel/kanto/templates/landing-react my-app

What is inside

Northwind's marketing page — the product of the SaaS template — with every section one of Kanto's blocks: a hero, the companies that use it, features, what people say, pricing, questions, a newsletter and the way in.

Every word and every price is in one file, src/content.ts: rewrite it and the page is yours.

Route What it shows
#features, #pricing, #questions, #start The sections, reached from the header.
To change first What it holds
src/content.ts Every word and every price.
src/brand.ts The brand, in one call.
src/actions.ts Sign-up and the newsletter. Call your app and email provider here.

Components