Landing page
A whole landing page stacked from ten section blocks: the header, a hero, features, metrics, customer proof, pricing, an FAQ, a closing call to action and the footer.
Installation & usage
npx @youj/cli add marketing-cta marketing-faq marketing-feature-grid marketing-feature-spotlight marketing-footer marketing-hero-centered marketing-navbar marketing-pricing marketing-metrics marketing-social-proofIt’s 10 blocks stacked into one page, so it installs as those blocks, each with the components it uses.
Description
A complete landing page, top to bottom: the mega-menu header with its announcement bar; a centered hero with two calls to action over a soft animated aurora; a ruled grid of features, each read off a live instrument; features again as alternating text and interactive demos; headline metrics that count up for a chosen period; logos and ratings with a featured customer story; plans with a monthly and a yearly price; an FAQ with its own search; a closing call to action; and the sitemap footer. Pick it as the first draft of a product's site, then swap any band for another of its kind or leave it out.
Code
Landing page, the Landing page story: the files youj add writes.
blocks/marketing
Each band is a block of its own, with its alternatives on its page: the header and footer, the hero, features, metrics and logos and ratings, pricing, the FAQ and the closing call to action. The page installs as those section blocks, which Built from under Reference lists with the components they use; the page itself is the composition under Code.
Reference
Built from43 components, 10 blocks
Built from
Components used
- Button
- Illustrations
- Magnetic
- Mesh Gradient
- Reveal
- Accordion
- Input Group
- Presence List
- Segmented Control
- Select
- Badge
- Counter
- Day Ring
- Distribution Strip
- Hatched Bar
- Lane Meter
- Rollout Ruler
- ScrambleText
- Card
- Chart
- Timeline
- Toggle Group
- Field
- Input
- Native Select
- Aurora
- Stagger
- App Header
- Avatar
- Collapse
- Command
- Command Palette
- Dropdown Menu
- Mega Menu
- Navigation Menu
- Sparkline
- Shimmer Border
- Table
- Skeleton
- Progress
- Rating
- Spotlight
- Tabs
Demo content: this block takes no props yet, so edit its file after adding it.
Accessibilitylandmarks, headings, sections, motion
Accessibility
The page is the header, one main that holds the eight sections, and the footer, so the header and the footer sit outside main as landmarks. The hero's headline is the page's one h1; every section below it is a region named by its own h2 (headingLevel changes a section's). Each section keeps the keyboard and screen reader behavior its own page describes.
Under reduced motion the hero's aurora holds one frame and its text is already in place.