Building a mobile app landing page template with Next.js 14 — design decisions and lessons learned

#css #typescript #react #nextjs

Building a mobile app landing page template with Next.js 14

Most mobile app landing pages I see fall into two categories: generic Bootstrap sites or over-engineered Webflow builds. Neither feels right for an indie developer launching something they care about.

So I built a template that sits in the middle — handcrafted, warm, and fast to customize.

Design direction

I deliberately went the opposite direction from my previous SaaS template (dark mode, purple gradients). This one is:

Light mode with warm cream tones (#faf7f2)
Serif typography — Playfair Display for headings, Epilogue for body
Orange accent (#f97316) instead of the typical blue or purple
Editorial feel — closer to a premium lifestyle brand than a typical dev tool

The goal was to make it feel like something a well-funded startup would ship, not a side project from a weekend.

The animated phone mockup

The hero needed something visual. For a mobile app template, the obvious choice is a phone mockup.

Instead of using a static PNG, I built the entire phone in pure HTML/CSS:

.phone {
  width: 280px;
  height: 560px;
  background: var(--ink);
  border-radius: 42px;
  border: 6px solid #2a2010;
  box-shadow: 0 40px 80px rgba(26,18,8,0.25);
}

The floating badges ("47 day streak", "5/6 done") are absolutely positioned divs with a staggered fadeUp animation. The entire phone floats up and down with a CSS keyframe:

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

No JavaScript, no library. Just CSS.

Single config file pattern

Same approach as my previous template — everything the buyer needs to change lives in src/lib/config.ts:

export const siteConfig = {
  name: 'YourApp',
  appStore: { label: 'App Store', href: '#', icon: '🍎' },
  playStore: { label: 'Google Play', href: '#', icon: '▶' },
  stats: [
    { value: '2.4M', label: 'Active users' },
    // ...
  ],
  features: [...],
  pricing: [...],
}

Brand name, store links, stats, features, pricing — all in one place.

Sections included

Sticky navbar with scroll blur
Hero with floating animated phone mockup + badges
Features grid (dark background section)
Screenshots (3 phone screens with staggered offset)
Pricing table (Free + Pro)
Testimonials
CTA banner
Footer

CSS Modules over Tailwind — again

For templates I keep choosing CSS Modules. The buyer doesn't need to configure anything. Styles are scoped and explicit. And honestly, it forces cleaner component boundaries.