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.

Landing PagesMediumsaas
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