| name | landing-page |
| description | Use when generating a Next.js landing page for a local service business or similar site — covers file structure, config conventions, Tailwind styling, and build verification requirements. |
Next.js Landing Page Generator
Overview
Generates a complete, production-ready Next.js landing page. Covers the full file set (12–19 files), enforces known conventions to avoid recurring build failures, and verifies a clean build before finishing.
Stack
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion (if needed)
Critical Conventions
| Rule | Details |
|---|
| Config file | next.config.mjs — NEVER next.config.ts or next.config.js |
| Component naming | Never use the same name for an imported component AND the page function |
| Tailwind classes | Verify every class exists in Tailwind before writing — no invented classes |
| Contrast | All text must meet WCAG AA (4.5:1 normal, 3:1 large). No low-opacity white on light bg |
| Dark mode | Check dark theme compatibility for every color decision |
Standard File Set
app/
layout.tsx
page.tsx
globals.css
components/
Navbar.tsx
Hero.tsx
Services.tsx
Testimonials.tsx
CallToAction.tsx
ContactForm.tsx
Footer.tsx
public/ # placeholder assets if needed
next.config.mjs
tailwind.config.ts
tsconfig.json
package.json
Sections to Include
- Navbar — logo, nav links, mobile hamburger menu (visible on all backgrounds)
- Hero — headline, subheadline, CTA button
- Services — 3–6 service cards with icons
- Testimonials — 2–3 customer quotes
- CTA — secondary conversion section
- Contact Form — name, email, message, submit
- Footer — links, copyright
UI/Styling Rules
- Apply fixes broadly — if one heading has a contrast issue, fix all headings in one pass
- Navbar text must be visible against ALL possible scroll states (transparent → solid)
- Use inline styles for critical visibility (e.g., hamburger icon color) when Tailwind conditionals are unreliable
- After generating all components, do a full visual audit for contrast, overflow, and sizing issues before finishing
Build Verification (Required)
After all files are written:
npm install
npm run build
Fix any TypeScript errors, missing imports, or build warnings before declaring done. A clean build with zero errors is the success criterion.
Common Mistakes
| Mistake | Fix |
|---|
next.config.ts | Rename to next.config.mjs |
import Hero from './Hero' then export default function Hero() | Rename page function to HeroPage or similar |
Low-opacity text (text-white/60) on white bg | Use solid colors with sufficient contrast |
| Navbar invisible on hero image | Force solid text color or add background on scroll |
| Invented Tailwind class | Replace with valid utility or inline style |
