Mobile App Landing Page
A high-converting mobile app landing page with a phone mockup hero, feature highlights, app store badges, screenshots carousel, and social proof section.
Compatible with:ChatGPTv0Bolt.newCursorGitHub Copilot
Patterns:hero, card-grid, footer
Prompt
Build a mobile app landing page for a productivity app called "Focusly". The page should include:
1. **Sticky navigation bar** — Logo ("Focusly" with a lightning bolt icon) on the left, nav links (Features, Pricing, Blog, About) in the center, and a "Download Free" button (blue-600, rounded-full) on the right. Nav collapses behind a hamburger on mobile.
2. **Hero section** — Full-width, light gray-50 background. Two columns:
- **Left (55%):** Small eyebrow label in blue-600: "🏆 #1 Productivity App of 2025". H1 heading (max-w-xl, font-bold, text-5xl): "Deep focus, zero distraction." A subtitle (text-xl, text-zinc-500): "Block distractions, plan your day with AI, and track focus sessions — all in one app." Two CTA buttons below: "Download on the App Store" (black pill button with Apple logo) and "Get it on Google Play" (dark gray pill button with Play Store logo). Below the buttons, a social proof line: "⭐ 4.8 — Rated by 62,000+ users".
- **Right (45%):** A centered phone mockup (375px wide illustration) showing the in-app timer screen. Behind the phone, two floating feature cards (box-shadow, rounded-xl): one top-left reading "🔥 Streak: 12 days", one bottom-right reading "⏱ 2h 14m focus today".
3. **Logos strip** — "Loved by teams at" followed by 6 greyscaled company logos in a horizontal row (Notion, Linear, Figma, Vercel, Stripe, GitHub).
4. **Feature highlights (3 cards):**
- **AI Daily Planner** — "Tell Focusly your goals; it builds a prioritized daily plan for you." Icon: 🧠
- **Focus Timer** — "Pomodoro + custom sessions with ambient noise and distraction blocker." Icon: ⏱
- **Progress Analytics** — "See your weekly focus trends, streaks, and productivity score." Icon: 📊
Each card is a zinc-50 rounded-2xl card with an icon in a blue-50 square, a bold title, and 2-sentence description.
5. **Screenshots carousel** — Full-width dark zinc-900 background section, title "See it in action" in white. Horizontal scrollable row of 4 phone screenshots with captions below: "Daily Plan", "Focus Timer", "Analytics", "App Integrations".
6. **Social proof** — 3 testimonial cards with user photo (circle, 48px), name, role, star rating (5 stars), and quote. Examples: "I've shipped 40% more since using Focusly" — Maria G., Indie Dev; "Our whole eng team runs on this now" — Tomas V., CTO; "Best focus app I've tried in 5 years" — Ren C., Designer.
7. **Final CTA band** — Centered, violet-600 background, white text. "Download Focusly free today." Subtitle: "No subscription required. iOS and Android." Both app store buttons below.
8. **Footer** — 4-column: brand + tagline, Product links, Company links, Legal links. Copyright line at bottom.
**Design:** Clean white background, blue-600 and violet-600 accents, SF Pro / Inter font, generous 96px vertical section padding. Fully responsive — single column on mobile.Mockdown
[NAVBAR]
⚡ Focusly Features Pricing Blog About [Download Free]
[HERO — gray-50 background]
┌──────────────────────────────────────────┐ ┌────────────────────────┐
│ 🏆 #1 Productivity App of 2025 │ │ │
│ │ │ ┌──────────────┐ │
│ Deep focus, │ │ │ ⏱ 25:00 │ │
│ zero distraction. │ │ │ Focus Mode │ │
│ │ │ │ ────────── │ │
│ Block distractions, plan your day with │ │ │ [Start] │ │
│ AI, and track focus sessions in one app. │ │ └──────────────┘ │
│ │ │ ╱ ╲ │
│ [🍎 Download on the App Store] │ │ ╱ 🔥 Streak: 12d ╲ │ ← floating card
│ [▶ Get it on Google Play ] │ │ │
│ │ │ ⏱ 2h 14m │ ← floating card
│ ⭐ 4.8 — Rated by 62,000+ users │ │ focus today │
└──────────────────────────────────────────┘ └────────────────────────┘
[LOGOS STRIP]
Loved by teams at:
[Notion] [Linear] [Figma] [Vercel] [Stripe] [GitHub] ← greyscale
[FEATURE CARDS — 3 cols]
┌──────────────────────────┐ ┌──────────────────────────┐ ┌──────────────────────────┐
│ [🧠] │ │ [⏱] │ │ [📊] │
│ AI Daily Planner │ │ Focus Timer │ │ Progress Analytics │
│ │ │ │ │ │
│ Tell Focusly your goals; │ │ Pomodoro + custom │ │ See your weekly trends, │
│ it builds a prioritized │ │ sessions with ambient │ │ streaks, and productivity │
│ daily plan for you. │ │ noise and blocker. │ │ score over time. │
└──────────────────────────┘ └──────────────────────────┘ └──────────────────────────┘
[SCREENSHOTS — dark zinc-900 background]
See it in action
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ [Phone 1]│ │ [Phone 2]│ │ [Phone 3]│ │ [Phone 4]│
│ │ │ │ │ │ │ │
│Daily Plan│ │Focus Timer│ │Analytics │ │Integrations
└──────────┘ └──────────┘ └──────────┘ └──────────┘
[TESTIMONIALS — 3 cols]
┌──────────────────────────┐ ┌──────────────────────────┐ ┌──────────────────────────┐
│ [●] Maria G. │ │ [●] Tomas V. │ │ [●] Ren C. │
│ Indie Dev │ │ CTO │ │ Designer │
│ ★★★★★ │ │ ★★★★★ │ │ ★★★★★ │
│ "I've shipped 40% more │ │ "Our whole eng team runs │ │ "Best focus app I've │
│ since using Focusly." │ │ on this now." │ │ tried in 5 years." │
└──────────────────────────┘ └──────────────────────────┘ └──────────────────────────┘
[CTA BAND — violet-600]
Download Focusly free today.
No subscription required. iOS and Android.
[🍎 App Store] [▶ Google Play]
[FOOTER — 4 cols]
⚡ Focusly Product Company Legal
"Deep focus for Features About Privacy
modern teams." Pricing Blog Terms
Changelog Careers Cookies
© 2026 Focusly, Inc.Mobile App Landing Page
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Related Layouts
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
AI Tool Landing Page
A conversion-focused AI tool landing page with a live demo embed, before/after comparison, feature grid, social proof metrics, and a playground CTA section.
--ai-tool--demo--before-after
Medium
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
Developer Tool Landing Page
A developer-focused tool landing page featuring a live terminal demo, install command, code snippet hero, integration logos, and a docs-first CTA section.
--developer-tool--cli--terminal
Medium
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium