);
}
```
```tsx
// src/components/faq.tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
const faqs = [
{ q: "How long does setup take?", a: "Most teams ship their first page in under 2 hours." },
{ q: "Can I use my own domain?", a: "Yes. Custom domains are supported on all plans." },
{ q: "Is it mobile responsive?", a: "Every component is mobile-first and tested on real devices." },
{ q: "Do you support A/B testing?", a: "Pro plans include built-in variant support for headlines, CTAs, and layouts." },
{ q: "What about SEO?", a: "Meta tags, OG images, and structured data are included by default." },
];
export function FAQ() {
return (
Frequently asked questions
{faqs.map((faq, i) => (
{faq.q}{faq.a}
))}
);
}
```
**Verify**: All sections render in correct order: Hero, Social Proof, Features, Pricing, FAQ, CTA, Footer. No horizontal scroll on mobile. All text is readable.
**If failed**: Check for missing `overflow-hidden` on container elements. Ensure grid columns collapse to single column on mobile (`grid-cols-1`).
### Step 5: Performance Optimization
**Duration**: 30-45 minutes
**Tool**: Code editor + Lighthouse
Optimize for Core Web Vitals before deployment. [src4]
```tsx
// src/app/layout.tsx — critical performance setup
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
// Next.js font optimization — eliminates FOUT and render-blocking requests
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
export const metadata: Metadata = {
title: "Your Product | Landing Page",
description: "Benefit-driven meta description under 155 characters for search results.",
openGraph: {
title: "Your Product | Landing Page",
description: "Benefit-driven meta description.",
url: "https://yourdomain.com",
siteName: "Your Product",
images: [{ url: "/og-image.png", width: 1200, height: 630 }],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Your Product | Landing Page",
description: "Benefit-driven meta description.",
images: ["/og-image.png"],
},
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{/* Preload hero image for LCP optimization */}
{/* DNS prefetch for third-party origins */}
{children}
);
}
```
```bash
# Image optimization checklist
# Convert all images to WebP (50-80% smaller than JPEG/PNG)
npx sharp-cli --input public/hero.png --output public/hero.webp --format webp --quality 80
# Check bundle size
npx next build
# Verify: First Load JS should be under 100 KB for landing pages
```
**Verify**: Run Lighthouse audit (`npx lighthouse https://localhost:3000 --only-categories=performance`). Target scores: Performance > 90, LCP < 2.5s, CLS < 0.1, INP < 200ms.
**If failed**: If LCP > 2.5s, check hero image size (must be under 200 KB as WebP). If CLS > 0.1, add explicit width/height to all images. If JS bundle > 100 KB, audit imports with `npx next build --analyze`.
### Step 6: Deploy and Verify
**Duration**: 10-20 minutes
**Tool**: Vercel CLI or dashboard
```bash
# Option 1: Vercel (recommended for Next.js)
npm i -g vercel
vercel --prod
# Option 2: Netlify
npm run build
npx netlify deploy --prod --dir=.next
# Option 3: Cloudflare Pages
npm run build
npx wrangler pages deploy .next --project-name=my-landing-page
```
```bash
# Post-deploy verification
# 1. Test Core Web Vitals
npx lighthouse https://yourdomain.com --only-categories=performance --output=json --output-path=./lighthouse-report.json
# 2. Test mobile rendering (Chrome DevTools or real device)
# 3. Test all CTA links point to correct destinations
# 4. Verify OG image renders (use https://opengraph.dev)
# 5. Submit to Google Search Console
```
**Output files**:
- Live URL at your deployment platform (e.g., `https://my-landing-page.vercel.app`)
- Source code in Git repository with all components
- Lighthouse performance report (JSON)
**Verify**: Page loads in under 2 seconds on 4G mobile. All CTA buttons work. OG image renders correctly when shared on social media.
**If failed**: If deploy fails, check `next.config.js` for output mode compatibility with your platform. Vercel auto-detects Next.js; Netlify needs `@netlify/plugin-nextjs`.
## Output Schema
```json
{
"output_type": "landing_page",
"format": "deployed URL + git repository",
"columns": [
{"name": "url", "type": "string", "description": "Live deployed URL", "required": true},
{"name": "repository", "type": "string", "description": "Git repository URL with source code", "required": true},
{"name": "framework", "type": "string", "description": "Framework used (Next.js, Astro, Framer, etc.)", "required": true},
{"name": "sections", "type": "array", "description": "List of sections included (hero, features, pricing, etc.)", "required": true},
{"name": "lcp_score", "type": "number", "description": "Largest Contentful Paint in seconds", "required": true},
{"name": "cls_score", "type": "number", "description": "Cumulative Layout Shift score", "required": true},
{"name": "lighthouse_score", "type": "number", "description": "Overall Lighthouse performance score", "required": true}
],
"expected_row_count": "1",
"sort_order": "N/A",
"deduplication_key": "url"
}
```
## Quality Benchmarks
| Quality Metric | Minimum Acceptable | Good | Excellent |
|---------------|-------------------|------|-----------|
| Lighthouse Performance score | > 70 | > 85 | > 95 |
| LCP (Largest Contentful Paint) | < 4.0s | < 2.5s | < 1.5s |
| CLS (Cumulative Layout Shift) | < 0.25 | < 0.1 | < 0.05 |
| INP (Interaction to Next Paint) | < 500ms | < 200ms | < 100ms |
| Mobile responsiveness | Readable on 375px | No horizontal scroll | Perfect on all breakpoints |
| First Load JS bundle size | < 200 KB | < 100 KB | < 60 KB |
| Image optimization | JPEG/PNG with dimensions | WebP with srcset | AVIF + WebP fallback |
**If below minimum**: Review Step 5 — most performance issues come from unoptimized images (convert to WebP, add width/height), render-blocking CSS (inline critical path), or oversized JS bundles (code-split with dynamic imports).
## Error Handling
| Error | Likely Cause | Recovery Action |
|-------|-------------|----------------|
| `npm create-next-app` fails | Node.js version < 18 | Upgrade Node.js: `nvm install 18 && nvm use 18` |
| shadcn/ui components unstyled | Tailwind not configured for component paths | Add `"./node_modules/@/components/**/*.tsx"` to content array in tailwind.config.ts |
| Images cause CLS on load | Missing width/height attributes | Add explicit `width` and `height` props to all `` or `` elements |
| LCP > 4s on mobile | Hero image too large or not preloaded | Convert to WebP (< 200 KB), add `` in head, use `priority` prop on next/image |
| Vercel deploy fails | Build errors in TypeScript | Run `npx tsc --noEmit` locally to find type errors before deploying |
| v0 generates broken code | Prompt too vague or complex | Break into smaller prompts — generate one section at a time, not the full page |
| Framer/Webflow page slow | Too many animations or unoptimized assets | Disable entrance animations on mobile, compress images, remove unused interactions |
| OG image not rendering | Missing or incorrect meta tags | Verify with https://opengraph.dev — check URL, image dimensions (1200x630), and HTTPS |
## Cost Breakdown
| Component | Free Tier | Paid Tier | At Scale |
|-----------|-----------|-----------|----------|
| Framework (Next.js) | $0 (open source) | N/A | N/A |
| UI library (shadcn/ui) | $0 (open source) | N/A | N/A |
| Hosting (Vercel) | $0 (hobby, 100 GB BW) | $20/mo (pro) | $150+/mo (enterprise) |
| AI generation (v0) | $0 (10 gen/day) | $20/mo (premium) | $50/mo (team) |
| No-code (Framer) | $0 (framer.com domain) | $15/mo (custom domain) | $30/mo (pro) |
| No-code (Webflow) | $0 (webflow.io domain) | $18/mo (custom domain) | $36/mo (CMS) |
| A/B testing | $0 (Vercel Flags or manual) | $49/mo (Unbounce) | $200+/mo (Optimizely) |
| **Total for single page** | **$0** | **$15-40/mo** | **$100-400/mo** |
## Anti-Patterns
### Wrong: Deploying AI-generated code without review
v0 and bolt.new produce visually appealing UI scaffolding, but the generated code often includes unnecessary dependencies, missing accessibility attributes, and placeholder text that looks real. Deploying without review means broken forms, inaccessible elements, and bloated bundles. [src3]
### Correct: Use AI for scaffolding, then manually review
Generate sections one at a time with v0 or bolt.new. Copy the output into your project. Review for: accessibility (aria labels, alt text), performance (unnecessary client-side imports), and correctness (real URLs, working forms). Remove all placeholder content.
### Wrong: Building custom components before checking existing libraries
Developers spend hours building custom accordion, modal, or pricing table components when shadcn/ui, Headless UI, or Radix already provide accessible, tested versions. Custom components introduce accessibility bugs and maintenance burden. [src7]
### Correct: Start with shadcn/ui or equivalent component library
Install shadcn/ui components (`npx shadcn@latest add accordion button card`). Customize with Tailwind classes. Only build custom components when no existing primitive fits your exact interaction pattern.
### Wrong: Optimizing for desktop first
Over 60% of web traffic is mobile. Desktop-first pages break on mobile with horizontal scroll, tiny tap targets, and slow loading over cellular connections. [src4]
### Correct: Mobile-first development
Start with `grid-cols-1` and `px-4`. Add responsive breakpoints up: `sm:grid-cols-2`, `lg:grid-cols-3`. Test on a real mobile device (not just Chrome DevTools) before shipping. Use `min-width` media queries, never `max-width`.
## When This Matters
Use this recipe when an agent needs to produce a working, deployed landing page — not a wireframe, mockup, or content strategy document. It requires a clear value proposition (headline copy) and brand assets as inputs. The output is a live URL with source code, ready for A/B testing and conversion optimization.
## Related Units
- [Landing Page Copywriting Framework](/software/landing-pages/landing-page-copywriting-framework/2026) — conversion copy structure for headlines and CTAs
- [Landing Page A/B Testing Setup](/software/landing-pages/landing-page-ab-testing-setup/2026) — set up variant testing after initial deploy
- [MVP Technical Architecture Selection](/software/mvp-development/mvp-technical-architecture-selection/2026) — when the page grows beyond a single landing page
- [Startup Launch Sequence](/business/startup-marketing/startup-launch-sequence/2026) — launch campaign using the landing page
- [Brand Messaging Framework](/business/brand-strategy/brand-messaging-framework/2026) — develop the value proposition that drives hero copy