Forem: Dev Maya

I built a startup waitlist landing page in Next.js 15 — here are all the decisions I made

Dev Maya — Mon, 11 May 2026 15:53:29 +0000

I've been building Next.js templates as a side project and selling them on Gumroad. This weekend I shipped the fourth one: Orbit, a startup launch and waitlist landing page.

Here's a breakdown of every technical decision I made.

Why Next.js 15 with CSS Modules (no Tailwind)

Most templates use Tailwind. That's fine for customization, but it adds a compilation step and a learning curve for buyers who just want clean CSS they can read and edit.

CSS Modules give you:

Locally scoped class names (no conflicts)
Standard CSS syntax (no utility memorization)
Zero runtime cost
Works with Next.js out of the box

The tradeoff is more verbose than Tailwind for repetitive utilities. Worth it for a product you're selling.

The bento grid — 1px gap trick

The features section uses CSS Grid with grid-template-columns: repeat(3, 1fr). The first card spans 2 columns via grid-column: span 2.

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border-subtle); /* gap IS the border */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bento .card:first-child {
  grid-column: span 2;
}

Instead of adding borders to each card, I set the grid's background to the border color and use 1px gaps. The cards themselves have no borders. This gives perfectly consistent grid lines with zero extra markup.

Count-up animation with IntersectionObserver

The metrics section triggers a count-up when the section enters the viewport:

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !started.current) {
    started.current = true
    const startTime = performance.now()

    const tick = (now: number) => {
      const progress = Math.min((now - startTime) / duration, 1)
      const eased = 1 - Math.pow(1 - progress, 3) // cubic ease-out
      setCount(Math.round(eased * end))
      if (progress < 1) requestAnimationFrame(tick)
    }

    requestAnimationFrame(tick)
  }
}, { threshold: 0.4 })

The started ref prevents re-triggering if the user scrolls away and back. Cubic ease-out feels much more natural than linear. No library — 30 lines of TypeScript.

Infinite logo marquee (CSS-only)

.row {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 24s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

The key: duplicate the logos array in the component and animate exactly -50% (half the total width). Seamless loop. Edge fade via mask-image on the parent:

.track {
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 12%, black 88%, transparent 100%
  );
}

Single content file

All editable content — name, copy, nav links, logos, features, metrics, testimonials, FAQ — lives in src/lib/constants.ts. The buyer touches one file and the whole page updates. No hunting through components.

Design tokens in globals.css

8 variables to rebrand the entire template:

:root {
  --color-accent: #f59e0b;   /* change this → full rebrand */
  --color-bg:     #09090b;
  --font-display: 'Sora', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --radius-lg:    16px;
}

Connecting the waitlist form

The form ships with a simulated delay. Replace it with your stack:

/* ConvertKit */
await fetch(`https://api.convertkit.com/v3/forms/${FORM_ID}/subscribe`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ api_key: KEY, email }),
})

/* Loops */
await fetch('https://app.loops.so/api/v1/contacts/create', {
  method: 'POST',
  headers: { Authorization: `Bearer ${KEY}`, 'Content-Type': 'application/json' },
  body: JSON.stringify({ email }),
})

Live demo: https://orbit-landing-iota.vercel.app/

The template is available on Gumroad for $29: https://devmaya.gumroad.com/l/orbit

Building an AI tool landing page with Next.js 14 — chat mockup, FAQ accordion, and zero dependencies

Dev Maya — Thu, 07 May 2026 00:01:15 +0000

Building an AI tool landing page with Next.js 14

Every AI tool launching right now needs a landing page. Most of them look identical — dark mode, purple gradients, floating blobs. I wanted to build something different.

This is what I learned building Forge, an AI tool landing page template in Next.js 14.

🔗 Live demo: https://forge-ai-template.vercel.app/

Design decisions

I deliberately went against the grain:

Light mode with clean whites and indigo accents (#4f46e5)
Space Grotesk — geometric but warm, not cold like Inter
Grid background in the hero with CSS mask-image (no canvas, no JS)
Chat interface as the hero mockup instead of a generic screenshot

The goal was to feel like a well-funded AI startup, not another side project.

The hero grid background

One of my favorite CSS tricks in this project:

.grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    black,
    transparent 70%
  );
  opacity: 0.4;
}

The mask-image fades the grid out toward the bottom — no JavaScript, no SVG, no library. Just CSS.

The AI chat mockup

The entire chat window is pure HTML/CSS. No canvas, no external library:

.window {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.05),
    0 20px 60px rgba(0,0,0,0.08);
}

The "thinking" animation on the AI response uses staggered delays:

@keyframes thinking {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%       { transform: translateY(-4px); opacity: 1; }
}

.thinkDot:nth-child(2) { animation-delay: 0.2s; }
.thinkDot:nth-child(3) { animation-delay: 0.4s; }

Three dots, staggered delays, zero JavaScript. Clean.

The FAQ accordion

This is the only component that needs 'use client' in the entire project. Everything else is server components.

'use client'
import { useState } from 'react'

export default function FAQ() {
  const [open, setOpen] = useState<number | null>(0)

  return (
    <div>
      {siteConfig.faq.map((item, i) => (
        <div key={i}>
          <button onClick={() => setOpen(open === i ? null : i)}>
            {item.question}
          </button>
          {open === i && <div>{item.answer}</div>}
        </div>
      ))}
    </div>
  )
}

Simple, accessible, no animation library needed.

Single config file pattern

Everything the buyer needs to edit lives in src/lib/config.ts:

export const siteConfig = {
  name: 'YourAI',
  tagline: 'The AI that actually understands your code',
  steps: [
    { number: '01', title: 'Connect your repo', description: '...' },
    { number: '02', title: 'Ask in plain English', description: '...' },
    { number: '03', title: 'Ship production code', description: '...' },
  ],
  features: [...],
  pricing: [...],
  faq: [...],
}

Brand name, steps, features, pricing, FAQ — all in one place. Change the file, the whole site updates. No hunting through components.

Architecture overview

src/
├── app/
│   ├── globals.css      # CSS variables & base styles
│   ├── layout.tsx       # Root layout + metadata
│   └── page.tsx         # Assembles all sections
├── components/
│   ├── sections/        # Navbar, Hero, Features, Pricing, FAQ...
│   └── ui/              # ChatMockup
└── lib/
    └── config.ts        # ← Edit this to customize everything

The only 'use client' boundary is FAQ.tsx. Every other section is a server component — better performance, simpler mental model.

Sections included

Sticky navbar with blur on scroll
Hero with animated chat mockup + grid background
Social proof bar (stats)
How it works (3 steps with dashed connector)
Features grid (dark background section)
Pricing table (3 tiers, featured plan)
FAQ accordion (interactive)
CTA banner
Footer

Lessons learned

Keep 'use client' boundaries minimal. The FAQ is the only interactive element that truly needs client-side state. Everything else benefits from being a server component.

CSS variables pay for themselves. Having all colors in :root meant changing the entire indigo palette took 2 lines.

The config file is the product. Buyers don't care about the components — they care about how fast they can make it theirs. A single file with clear comments is worth more than any design decision.

🔗 Live demo: https://forge-ai-template.vercel.app
🛒 Available on Gumroad: https://devmaya.gumroad.com/l/njzbkz

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

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.