Mobile app landing page
A sleep-and-breathing app landing in a light lavender theme — with no screenshots: a header with a “breathing” logo and rating, a hero with a CSS phone whose circle breathes to 4-7-8, features with a sticky phone whose screens change on scroll, “before / after” with a sleep chart comparison slider, store reviews as a strip, free / premium pricing with a table, an FAQ accordion, a “download” CTA with a CSS QR and a footer with badges. Manrope and IBM Plex Mono.
An app landing page that needs no ready screenshots: the phone is drawn in code and its screens change on scroll alongside the features. After that come pricing, reviews and store buttons. The app in the demo is fictional.
What it is made of
9 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
App site header with a “breathing” logonavbar-032
A logo with a pulsing dot, sections, a rating chip, a “Download” button.
2. First screen
App hero with a CSS phone and a breathing circlehero-032
A CSS phone with a 4-7-8 breathing circle, star rating, store badges.
3. Inside
Features with a sticky phone whose screen changes on scrollapp-001
A feature list and a sticky phone whose screen changes on scroll.
4. Results
“Before / after” with a chart comparison sliderapp-002
Sleep charts before and after, a comparison slider.
5. Reviews
Store reviews as a scroll-snap striptestimonials-025
App Store and Google Play cards in a snap strip, an overall rating.
6. Pricing
App pricing: free and premium with a tablepricing-024
Free and premium, monthly/yearly, “7 days free”, a feature table.
7. FAQ
FAQ accordion with a plus-to-cross togglefaq-023
An accordion with a plus-to-cross toggle, one open.
8. Download
Download: store badges and a CSS QR codecta-025
A dark card over a photo, badges and a CSS QR code.
9. Footer
App site footer with store badgesfooter-031
Logo, links, stores, legal items.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Mobile app landing page” page made of?
- 9 catalog sections in order: App site header with a “breathing” logo, App hero with a CSS phone and a breathing circle, Features with a sticky phone whose screen changes on scroll, “Before / after” with a chart comparison slider, Store reviews as a scroll-snap strip, App pricing, FAQ accordion with a plus-to-cross toggle, Download, App site footer with store badges. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.