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

Dev Maya — Tue, 28 Apr 2026 13:22:45 +0000

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.

The result

npm install && npm run dev — that's all the buyer needs.

→ Live demo: https://bloom-app-template.vercel.app/
→ Available on Gumroad: devmaya.gumroad.com/l/qvqbcb

Happy to answer questions about any implementation detail in the comments.

How I built a production-ready SaaS landing page template with Next.js 14

Dev Maya — Tue, 28 Apr 2026 13:17:44 +0000

How I built a production-ready SaaS landing page template with Next.js 14

Every time I started a new SaaS project, I found myself rebuilding the same landing page from scratch. Navbar, hero, features, pricing, testimonials — the same structure, every time.

So I decided to build it once, properly, and make it reusable.

This is what I learned.

The goals

Zero extra dependencies — just Next.js 14, TypeScript and CSS Modules
One config file — all content editable in a single config.ts, no touching components
Premium design — dark mode, Stripe/Linear aesthetic, nothing generic
Deploy-ready — works on Vercel out of the box

Stack decisions

Why CSS Modules over Tailwind?

Tailwind is great, but for a template you're selling, CSS Modules are cleaner. The buyer doesn't need to install or configure anything extra. The styles are scoped, explicit, and easy to override.

Why a single config file?

The biggest friction for template buyers is figuring out where to change things. With a single src/lib/config.ts, the answer is always the same:

export const siteConfig = {
  name: 'YourApp',
  tagline: 'Your tagline here',
  features: [
    { icon: '⚡', title: 'Feature 1', description: '...' },
    // ...
  ],
  pricing: [...],
  testimonials: [...],
}

Change the file, the whole site updates. No hunting through components.

The dashboard preview in the hero

The most impactful design decision was putting a fake dashboard mockup in the hero section instead of a generic screenshot or illustration.

SaaS buyers respond to dashboards — it shows them exactly what kind of product the template is built for, and it looks premium without requiring real data.

The entire dashboard is pure HTML/CSS — no canvas, no charts library.

Sections included

Sticky navbar with blur backdrop on scroll
Hero with animated headline + dashboard preview + social proof
Logo strip
Features grid (6 cards)
Pricing table (3 tiers, featured plan highlighted)
Testimonials (3 cards)
CTA banner
Footer

Lessons learned

Design systems in CSS variables pay off. Having all colors in :root meant I could change the entire palette in 3 lines.

Animation delay on hero elements feels premium. Staggered animation-delay on each hero child gives a polished fade-up entrance that costs almost nothing to implement.

The config file is the product. Buyers don't care about the components — they care about how fast they can make it theirs.

The result

A fully responsive, dark-mode SaaS landing page that runs with npm install && npm run dev and deploys to Vercel in 2 minutes.

→ Live demo: https://nexus-saas-template-jm.vercel.app/
→ Available on Gumroad: https://devmaya.gumroad.com/l/qvqbcb

If you have questions about the implementation, drop them in the comments — happy to go deeper on any part.

DEV Community: Dev Maya

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

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

Design direction

The animated phone mockup

Single config file pattern

Sections included

CSS Modules over Tailwind — again

The result

How I built a production-ready SaaS landing page template with Next.js 14

How I built a production-ready SaaS landing page template with Next.js 14

The goals

Stack decisions

Why CSS Modules over Tailwind?

Why a single config file?

The dashboard preview in the hero

Sections included

Lessons learned

The result