Marketing
A one-page site with a sticky bar, a hero, sections for what a product does and what it costs, and a footer, made from the page patterns.
The marketing template is a one-page site: a sticky bar whose links scroll to their sections, a hero, sections for what the product does, a few numbers and two plans, a closing call to action and a footer. Use it for a product's launch page or a small site that sells one thing.
Start from it
Make the app
npx create-buttery my-app --template marketingcreate-butterymakesmy-appin the folder you're in and installs it with the package manager that ran it. The app takes the folder's name, which also replaces "buttery site" in the bar and the footer.Inside the buttery repository,
pnpm new-app my-app --template marketingcopiesapps/templates/marketingtoapps/my-appinstead, with the next free port.
What's inside
| File | What it does |
|---|---|
src/App.tsx | The site: a Page with a sticky NavBar, a CenteredHero, Sections of features, a StatStrip and plans, a closing hero and a Footer |
src/app.css | Room at the page's end as tall as the floating lanes, so the last line can scroll clear of a toast |
src/router.tsx | The router every template has; the dashboard's page explains it |
src/main.tsx | Follows links, then renders the app inside ButteryProvider |
src/index.ts | What another app imports to show this one, as the docs site does for the preview |
e2e/smoke.spec.ts | Renders with no console errors, scrolls to a section from the bar, and shows a plan's toast |
e2e/layout.spec.ts | Runs expectButtery on the site with the bar's sheet open on a phone and a toast showing |
Links to sections. The bar's links and buttons go to sections of the page with scrollToSection, which stops each section below the sticky bar and leaves the address alone.
It's made from the marketing page patterns, and its router is explained under routing on the dashboard's page.
A demo made from it
The Halfmoon shop is this template with Halfmoon Roastery's own store in place of the template's page: menus in the bar, a split hero with this week's coffee, coffees that open into their details, a subscription builder, and a bag that opens in a sheet from any page and checks out on pages of its own.
Related
- Marketing page
The bands a marketing page is made of, from heroes and bento grids to the footer.
- Page grid and containers
The page grid, the content column, sections and centered content, for marketing and content pages.