landing-page-guide

Name: landing-page-guide
Author: bear2u

Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.

TL;DR

Comprehensive guide for building high-converting landing pages in Next.js 14+ with ShadCN UI, following 11 essential elements.

What Is It

Framework for creating effective landing pages using Next.js and React
Includes 11 essential elements for high conversion rates
Requires ShadCN UI components and App Router architecture
Enables SEO-optimized, accessible, and conversion-focused designs

Key Features

Mandatory inclusion of 11 essential elements
Built for Next.js 14+ App Router with ShadCN UI
Includes SEO, accessibility, and performance best practices
Structured component flow ensures logical page flow
Mobile-first responsive design with WCAG compliance
Type-safe, performance-optimized with minimal bundle size

How to Use

1.Use when creating landing, marketing, or product pages
2.Follow the 11 essential elements framework exactly
3.Implement components in order: Header → Hero → Media → Benefits → Testimonials → FAQ → Final CTA → Footer
4.Ensure all elements are present with proper metadata and accessibility

Guardrails & Gotchas

Critical: All 11 elements must be included in every landing page. No exceptions.
Must use Next.js 14+ App Router with TypeScript, Tailwind CSS, and ShadCN UI
Never skip any of the 11 essential elements
Always include proper SEO metadata and accessibility standards