A composable landing page component system built with Next.js and Framer Motion — enabling the marketing team to self-serve new campaign pages without engineering involvement.
Marketing team shipped 8 independent campaign landing pages in the first month without writing a single line of code.
The hero image is loaded from the MDX coverImage field. Replace the demo URL with your own gameplay capture, PixiJS canvas screenshot, or rendered artwork.
8 in first month
Pages shipped
Zero per page
Eng involvement
0.7 seconds
Avg LCP
The Problem
Every new campaign required a developer to build a new landing page from scratch. The marketing team was bottlenecked — engineers were spending 2–3 days per page on work that didn't require code.
The Solution: Page Sections as Components
I built a library of self-contained Section components — Hero, Features, Testimonials, Pricing, CTA, FAQ, LogoBar. Each section accepts a strongly typed config prop and renders itself completely.
A landing page is then just an ordered JSON array of { type: string, config: object } entries. The root page component maps over the array and renders the correct section for each entry.
Every section has a built-in Framer Motion variants definition. Animations are enabled by default — the marketing team doesn't need to think about them. Sections reveal on scroll via useInView, with configurable delay and stagger values in the config.
Responsive by Default
Every section is built mobile-first with Tailwind breakpoints. The marketing team writes content, not breakpoints. A single layout config value ("2-col", "3-col", "centered") handles all responsive behaviour at the section level.
Performance
All pages are statically generated at build time — zero server compute per request.
Images are handled by next/image with automatic AVIF/WebP conversion and lazy loading.
Average LCP across all campaign pages: 0.7 seconds.
Result
In the first month after launch, the marketing team self-served 8 campaign pages for different product features, pricing tiers, and regional audiences. Zero engineering tickets were opened for landing page work that month.
Doodle concept visual
