Mobile app landing page template for iOS and Android apps with App Store and Google Play download
Full landing page template for iOS and Android mobile apps. Hero with an iPhone phone mockup showing a live voice recording screen, App Store and Google Play download buttons, and a star rating. Three feature phone screens showing note history, weekly usage insights, and AI chat search. A product feature section with four feature highlights. A voice transcription section. Three App Store user review cards. A stats row with user count, rating, languages, and data ownership. An App Store and Google Play CTA section. Built for voice journaling apps, AI note-taking apps, iOS app launches, and mobile productivity tools. Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
A complete mobile app marketing page for iOS and Android consumer products. The nav shows only the logo, a Get the app button, and a hamburger menu on all screen sizes — no text links on desktop or mobile. The hero is centered with a headline, an App Store download button, a 4.9 star rating, and an iPhone phone mockup showing a voice recording screen with an animated waveform, a live transcript, and a pulsing record button. Below the hero, a press logo strip shows six publication wordmarks. Three phone mockups in a row show the main product features: a note history screen with tagged voice entries and timestamps, a weekly insights screen with a usage chart and pattern summary, and an AI chat screen where users search their past recordings. A product feature section centers a phone showing the weekly digest screen, with four feature highlights around it covering auto-titling, action extraction, on-device processing, and weekly digests. A feature section shows a two-column layout with product copy on the left and an animated voice waveform card on the right showing a transcript quote and on-device transcription speed. Three App Store review cards show star ratings, review titles, and user quotes. A stats row shows four numbers: 380k weekly users, 4.9 App Store rating, 14 supported languages, and 100% user data ownership. The final CTA section has a gradient background, the app icon, a headline, body copy, and App Store and Google Play download buttons. The five-column footer links to The app, Company, Support, and Legal pages.
Common questions about this template
How do I change the phone mockup screen content?
The main hero phone screen is .screen-voice inside .phone. It has a .prompt div for the header text, a .wave div with 14 animated CSS bar spans for the waveform, and a .transcript div for the scrolling quote text. Ask Claude Code or Bolt to update the prompt text and transcript content to match your own app. The waveform colours are set by the --coral, --o (orange), and --violet CSS variables at the top of the style block — change those three to retheme the animation.
How do I update the three feature phone screens?
Each of the three feature screens is a .feat div with a .p phone frame and a .sc screen div inside. The three screen types are .sc-timeline (note list), .sc-insight (pattern card with bar chart), and .sc-chat (AI chat). Ask your coding tool to update the .item entries in the timeline, the .row values in the insight card, and the .msg divs in the chat. The bar heights in .sc-insight .bars are set by inline style='height:XX%' on each span — update those percentages to change the chart shape.
How do I update the App Store and Google Play download badges?
The App Store badge is an <a class='badge'> with the Apple SVG and a .t span containing 'Download on the' and 'App Store'. The Google Play badge uses the same .badge structure with a different SVG. Ask Claude Code or Bolt to add actual href links to both badges pointing to your App Store and Google Play product URLs. You can also remove one badge entirely if your app is iOS-only or Android-only.
Which tools can I use to build with this template?
Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
Use this AI coding template for
- ·Full landing pages for iOS apps, Android apps, and mobile AI tools that need a hero with an iPhone phone mockup, voice recording screen, App Store and Google Play download buttons, and feature phone mockups
- ·Vibe coding projects for voice journaling apps, AI note-taking tools, and consumer mobile SaaS products in Claude Code, Bolt, or Lovable that need a polished multi-section mobile app marketing page
- ·Mobile app landing pages that need to show App Store and Google Play download badges, star ratings, user review cards, and an on-device feature like voice transcription or offline AI
Works with every vibe coding tool
More vibe coding hero templates
View allAI builder hero template for prompt-driven SaaS landing pages
Dark gradient SaaS hero template for AI and startup landing pages
3D rotating image carousel for SaaS and AI product hero sections
Mosaic image grid hero template for SaaS and agency landing pages
Liquid gradient scroll chapter template
AI hardware product hero template for device launch pages and consumer technology product lines
Other templates you might like