UI · pages and hero sections
Landing page and hero section references your coding agent can rebuild
9 finished landing pages and 9 hero sections, each screen-recorded with a React + Tailwind recipe that Claude Code or Codex rebuilds for your product. Filter by service type, intent and style; fetch over MCP with search_ui and get_ui.
Every page is a reviewed example for a fictional brand — no real company, no real reviews or numbers. The recipe starts with STEP 0 (three questions about your product) and STEP 1 (conditional rules: no reviews, no public pricing, product not live yet…), then rebuilds the same structure, typography and motion in React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript). Hero sections are cut from the same pages with their own self-contained recipe. Pages and heroes are organized by service (AI Tools & SaaS · Commerce · Local Business), intent (Understand · Build Confidence · Take Action) and style (Clarity · Journal · Stage).
Open the UI galleryFetch over MCP
Landing pages (9)
Desktop and mobile screen recordings, section-by-section reasoning, and the full recipe on each page.
Sotto
Fictional AI meeting-notes tool
- Brief
- AI meeting notes · get people to try a sample
- Hero job
- H1 Product in Use
- Service
- AI Tools & SaaS
- Intent
- Understand
- Style
- Clarity — information hierarchy, ordered 12-col grid, ivory paper, one cobalt accent
- Sections
- Hero → Sequence → Demo → Benefits → Interlude → How it works → CTA
- Fonts
- Instrument Serif, Geist
Ledgerline
Fictional AI bookkeeping assistant for small studios
- Brief
- AI bookkeeping · prove accuracy before sign-up
- Hero job
- H3 Evidence First
- Service
- AI Tools & SaaS
- Intent
- Build Confidence
- Style
- Journal — masthead, § folios, numbered captions, hairline rules, cool archive paper, one bookkeeper's-green accent
- Sections
- Hero → Evidence → Interlude → One receipt → How it works → FAQ → CTA
- Fonts
- Instrument Serif, Geist
Plinth
Fictional AI product-photo studio
- Brief
- AI product photos · generate a first set, no account
- Hero job
- H2 Try It Now
- Service
- AI Tools & SaaS
- Intent
- Take Action
- Style
- Stage — strong scale contrast, one focus per screen, bone-white cyclorama + graphite stage, one cobalt accent
- Sections
- Hero → How it works → Before & after → Styles → Pricing → FAQ → CTA
- Fonts
- Bricolage Grotesque, Hanken Grotesk
Mardel
Fictional ceramics studio selling one stoneware pour-over set
- Brief
- Handmade pour-over set · show what it is and how it's used
- Hero job
- H4 Product Spotlight
- Service
- Commerce
- Intent
- Understand
- Style
- Journal — masthead line, roman folios, figure captions, hairline rules, serif display, one rust accent
- Sections
- Hero → Showcase → Benefits → How it works → FAQ → CTA
- Fonts
- Fraunces, Schibsted Grotesk
Halvard Steel
Fictional two-person workshop selling one hand-forged chef's knife
- Brief
- Hand-forged knife · justify the price without reviews
- Hero job
- H6 Origin & Craft
- Service
- Commerce
- Intent
- Build Confidence
- Style
- Stage — strong scale contrast, cool slate and steel, one fog-light proof band, one patina-copper accent
- Sections
- Hero → Process → Bench → In use → Proof → FAQ → CTA
- Fonts
- Source Serif 4, Instrument Sans
Fold & Fiber
Fictional washed-linen bedding: one set in 5 colours × 3 sizes
- Brief
- Linen bedding · pick colour and size, add to cart
- Hero job
- H7 Offer & Choice
- Service
- Commerce
- Intent
- Take Action
- Style
- Clarity — orderly 12-col grid, hairline rules, numbered rows, light limestone page, one pine-green accent
- Sections
- Hero → From box to bed → What's inside → Material facts → Prices → FAQ → CTA
- Fonts
- Newsreader, Hanken Grotesk
Ember House
Fictional urban Nordic sauna & cold-plunge house
- Brief
- Sauna house · send a booking request in one view
- Hero job
- H8 Availability & Booking
- Service
- Local Business
- Intent
- Take Action
- Style
- Stage — strong scale contrast, one cinematic image per screen, dark warm palette, one ember accent
- Sections
- Hero → Ritual → Sessions → Cold interlude → Prices → Visit → FAQ → Request
- Fonts
- Instrument Serif, Inter Tight
Northlight Framing
Fictional one-room custom picture-framing workshop
- Brief
- Framing workshop · what's possible, how it works, what it costs
- Hero job
- H5 Place & Service
- Service
- Local Business
- Intent
- Understand
- Style
- Clarity — 12-column grid, hairline rules, numbered rows, gallery white, ink buttons, one vermilion accent
- Sections
- Hero → Services → How it works → Try the options → Finished frames → Visit → FAQ → CTA
- Fonts
- Gloock, Albert Sans
Fernwood Joinery
Fictional two-person furniture repair and restoration workshop
- Brief
- Furniture repair · trust from one worked case, never testimonials
- Hero job
- H3 Evidence First
- Service
- Local Business
- Intent
- Build Confidence
- Style
- Journal — workshop case file: § folios, numbered Pl./Fig. captions, hairline rules, warm paper, one oxblood accent
- Sections
- Hero → Case file → How it works → In writing → Visit → Request
- Fonts
- Fraunces, Schibsted Grotesk
Hero sections (9)
The first viewport of each page — navigation plus hero — with what it shows, why it opens the page, and a hero-only recipe.
Sotto — H1 Product in Use
AI Tools & SaaS · Understand · Clarity · goal: Try a sample
Shows. Headline over a live product surface (title, status chip, progress strip, tabs, two lists) in real DOM.
Why. H1 Product in Use: a first-time visitor understands the tool by seeing its output, not by reading claims.
Ledgerline — H3 Evidence First
AI Tools & SaaS · Build Confidence · Journal · goal: Open the sample month
Shows. A real DOM excerpt of one sample line: source receipt, bank match, confidence and human-review mark.
Why. H3 Evidence First: a hesitant visitor sees checkable evidence before any promise.
Plinth — H2 Try It Now
AI Tools & SaaS · Take Action · Stage · goal: Generate sample set
Shows. Sample product loaded, scene-style picker and Generate button in real DOM; labelled fake progress, then a 2×2 result grid.
Why. H2 Try It Now: the visitor takes the first action inside the hero, with no account.
Mardel — H4 Product Spotlight
Commerce · Understand · Journal · goal: See the set
Shows. The set as the object, with callouts for each piece and the sample price.
Why. H4 Product Spotlight: the visitor first learns exactly what is in the box.
Halvard Steel — H6 Origin & Craft
Commerce · Build Confidence · Stage · goal: See the knife
Shows. The knife as the hero object with the one-line reason to trust (forged once, sharpened for life).
Why. H6 Origin & Craft: trust starts from how the product is made and the promise behind it.
Fold & Fiber — H7 Offer & Choice
Commerce · Take Action · Clarity · goal: Add to cart
Shows. Colour + size + add-on pickers with a live price and Add to cart in real DOM; photo changes per colour.
Why. H7 Offer & Choice: a visitor who already wants it chooses and adds to cart in the first view.
Ember House — H8 Availability & Booking
Local Business · Take Action · Stage · goal: Request a session
Shows. Session, day, time of day and guests pickers in real DOM, with the honest response time next to the button.
Why. H8 Availability & Booking: a visitor who already knows the place starts the request in the first view.
Northlight Framing — H5 Place & Service
Local Business · Understand · Clarity · goal: See framing options
Shows. Workshop photo beside a four-cell summary: from-price, lead time, today's hours and last consultation.
Why. H5 Place & Service: what this place does, where, and when it is open in the first view.
Fernwood Joinery — H3 Evidence First
Local Business · Build Confidence · Journal · goal: Send photos for a free assessment
Shows. One worked case beside the chair as it arrived: faults found, written range, final bill, working days and the two makers.
Why. H3 Evidence First: a hesitant owner sees a real job's numbers before any promise.
All hero sections: /ui/sections/hero. Over MCP, call search_ui with level: "hero", then get_ui with ui.hero-<slug>.