--- name: landing-page-guide description: 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. --- # Landing Page Guide ## Overview This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. It provides complete implementation patterns for Next.js 14+ and React with ShadCN UI integration, ensuring every landing page includes proper SEO optimization, accessibility standards, and conversion-focused design. ## When to Use This Skill Use this skill when users request: - Creation of landing pages, marketing pages, or product pages - Next.js or React-based promotional websites - Pages that need to convert visitors into customers - Professional marketing pages with SEO optimization - Landing pages following industry best practices ## The 11 Essential Elements Framework Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages: 1. **URL with Keywords** - SEO-optimized, descriptive URL structure 2. **Company Logo** - Brand identity placed prominently (top-left) 3. **SEO-Optimized Title and Subtitle** - Clear value proposition with keywords 4. **Primary CTA** - Main call-to-action button in hero section 5. **Social Proof** - Reviews, ratings, user statistics 6. **Images or Videos** - Visual demonstration of product/service 7. **Core Benefits/Features** - 3-6 key advantages with icons 8. **Customer Testimonials** - 4-6 authentic reviews with photos 9. **FAQ Section** - 5-10 common questions with accordion UI 10. **Final CTA** - Bottom call-to-action for second chance conversion 11. **Contact Information/Legal Pages** - Footer with complete information **Critical:** All 11 elements must be included in every landing page. No exceptions. For detailed explanations of each element, refer to `references/11-essential-elements.md`. ## Technology Stack Requirements When creating landing pages, always use: ### Required Technologies - **Next.js 14+** with App Router - **TypeScript** for type safety - **Tailwind CSS** for styling - **ShadCN UI** for all UI components ### ShadCN UI Components to Install Before creating any landing page, ensure these components are installed: ```bash npx shadcn-ui@latest add button npx shadcn-ui@latest add card npx shadcn-ui@latest add accordion npx shadcn-ui@latest add badge npx shadcn-ui@latest add avatar npx shadcn-ui@latest add separator npx shadcn-ui@latest add input ``` ### Why ShadCN UI? - **Accessibility**: WCAG-compliant components - **Customizable**: Fully customizable with Tailwind CSS - **Type-safe**: Written in TypeScript - **Performance**: Copy only what you need, minimal bundle size - **Consistency**: Built-in design system ## Project Structure Create landing pages with this structure: ``` landing-page/ ├── app/ │ ├── layout.tsx # Root layout with metadata │ ├── page.tsx # Main landing page │ └── globals.css # Global styles ├── components/ │ ├── Header.tsx # Logo & Navigation (Element 2) │ ├── Hero.tsx # Title, CTA, Social Proof (Elements 3-5) │ ├── MediaSection.tsx # Images/Videos (Element 6) │ ├── Benefits.tsx # Core Benefits (Element 7) │ ├── Testimonials.tsx # Customer Reviews (Element 8) │ ├── FAQ.tsx # FAQ Accordion (Element 9) │ ├── FinalCTA.tsx # Bottom CTA (Element 10) │ └── Footer.tsx # Contact & Legal (Element 11) ├── public/ │ └── images/ # Optimized images └── package.json ``` ## Implementation Workflow ### Step 1: Setup Metadata (SEO) Always start with proper SEO metadata in `layout.tsx` or `page.tsx`: ```typescript import type { Metadata } from 'next' export const metadata: Metadata = { title: 'SEO Optimized Title with Keywords | Brand Name', description: 'Compelling description with main keywords', keywords: ['keyword1', 'keyword2', 'keyword3'], openGraph: { title: 'OG Title', description: 'OG Description', images: ['/og-image.jpg'], }, } ``` ### Step 2: Create Component Structure Build components in this order to ensure proper flow: 1. **Header** with logo (Element 2) 2. **Hero** section with title, subtitle, primary CTA, and social proof (Elements 3-5) 3. **MediaSection** with product images/videos (Element 6) 4. **Benefits** section with 3-6 feature cards (Element 7) 5. **Testimonials** with customer reviews (Element 8) 6. **FAQ** with accordion (Element 9) 7. **FinalCTA** at bottom (Element 10) 8. **Footer** with contact and legal links (Element 11) ### Step 3: Use ShadCN UI Components Map each section to appropriate ShadCN components: - **Hero CTA**: Use `Button` component with size="lg" - **Benefits**: Use `Card`, `CardHeader`, `CardTitle`, `CardContent` - **Testimonials**: Use `Card`, `Avatar`, `Badge` - **FAQ**: Use `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` - **Final CTA**: Use `Button` and `Card` - **Footer**: Use `Separator`, `Input` for newsletter ### Step 4: Implement Responsive Design Ensure mobile-first responsive design: - Use Tailwind responsive prefixes: `sm:`, `md:`, `lg:`, `xl:` - Test all breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl) - Minimum touch target size: 44x44px for buttons - Base font size: minimum 16px on mobile ### Step 5: Optimize Performance - Use Next.js `Image` component for all images - Add `priority` prop to above-the-fold images - Implement lazy loading for below-the-fold content - Use dynamic imports for heavy components if needed ### Step 6: Ensure Accessibility - Use semantic HTML5 elements (`
`, `
`, `
`, `