App Landing Template
A dark-themed landing page for iOS and Android apps. The demo showcases PocketHabit, a habit tracker — replace the name, store links, and screenshots with your own app details.
What's included
- Hero with phone mockup — CSS-only device frame showing an in-app UI preview (no image assets required)
- App Store and Google Play buttons — styled download badges with accessible labels
- Screenshot gallery — three placeholder panels you can swap for real PNGs or WebP images
- Feature highlights — offline-first, widgets, and no-account-required selling points
- Privacy policy link — footer slot for your legal page (required for store submissions)
- Dark theme — matches common indie app branding; tweak CSS variables for your palette
Who this template fits
Mobile indie developers launching on iOS, Android, or both benefit from store badges above the fold and a screenshot gallery that mirrors App Store browsing behavior. The dark theme matches common utility and productivity apps without looking like a generic Bootstrap landing page.
If your app is web-only or still in waitlist mode, use the Waitlist or SaaS layouts until store URLs exist. Switch to this template the week before TestFlight or Play Console production release.
Customization tips
Update the href attributes on store buttons to your real App Store and Play Store URLs. Replace the CSS phone mockup content with a screenshot <img> if you prefer a photographic preview.
Swap the gradient screenshot placeholders in the gallery section with actual app captures — 9:16 aspect ratio works best. Change the accent color via --accent and --accent2 in the :root block to match your app icon.
Add Open Graph meta tags in <head> for better link previews when you share on social platforms or Product Hunt. Include a 1200×630 image of your app for best results. Our SEO handbook covers structured data for software apps.
Store submission checklist
- Footer includes a working Privacy Policy URL (required by both stores)
- Store badge links open the correct regional listing — test on iOS and Android
- Screenshots use your real UI, not placeholder gradients, before public launch
- Support email in footer matches the address in App Store Connect / Play Console
- Page loads over HTTPS on your marketing domain
- Analytics script does not block first paint — defer non-critical JS
FAQ
Can I use one page for both stores?
Yes. Keep both badges in the hero. Hide the Play badge with CSS if you are iOS-only until Android ships — do not link to a dead URL.
How do I add real screenshots?
Replace each .shot div with <img src="shot-1.webp" alt="PocketHabit daily streak screen" loading="lazy" width="280" height="498">. Compress images with Squoosh or similar; aim under 80 KB each.
Where should I host?
Cloudflare Pages is the default — free SSL and fast global CDN. Connect a custom domain with our domain guide.
Common mistakes to avoid
Linking store badges before your app is approved creates a broken first impression on launch day. Use a waitlist CTA until Apple or Google confirms live status, then swap badges in one deploy. Screenshots with lorem ipsum text survive internal reviews but fail public trust — users assume the app is unfinished.
App founders also forget deep links: your marketing domain should redirect /ios and /android paths to the correct store listing so printed QR codes and podcast show notes stay valid after you change slug URLs in the consoles. Document those redirects in your deploy repo so you do not hunt DNS records during a launch livestream. Test store links from both Wi-Fi and cellular before paying for ads.
License
This template is released under the MIT License. Use it for any app launch, client project, or portfolio site. No royalties, no usage limits. Customize and ship.