Landing pages
The boilerplate includes professional landing page templates that you can customize for your product or service. These templates are built with modern design principles and conversion optimization in mind.
Accessing the templates
View the working landing page templates at /templates/landing-pages in your application.
What's included
The landing page templates feature:
- Hero sections - Eye-catching headers with CTAs
- Feature showcases - Highlight your product's key features
- Social proof - Testimonials and customer quotes
- Call-to-action sections - Drive conversions
- Mobile responsive - Looks great on all devices
- Dark mode support - Respects user preferences
- Easy customization - YAML-based configuration
Template configuration
Landing page templates are configured using YAML files in the content/sample-landing/ directory. The configuration system allows you to customize content without touching Vue components.
Example configuration
The sample landing page (content/sample-landing/0.index.yml) demonstrates a complete landing page configuration:
title: Transform Your Email Marketing with SendWave
description: Create stunning email campaigns that convert...
hero:
links:
- label: Start free trial
to: '#'
size: xl
sections:
- title: Design Beautiful Campaigns in Minutes
description: Our intuitive drag-and-drop editor...
features:
- name: Drag & Drop Editor
description: Build stunning emails...
icon: i-lucide-mouse-pointer-click
Customizing a landing page
To create your own landing page:
1. Copy the sample configuration
cp content/sample-landing/0.index.yml content/my-landing.yml
2. Update the content
Edit content/my-landing.yml with your own:
- Hero title and description
- Call-to-action buttons
- Feature sections
- Testimonials
- Icons (using Lucide icons via
i-lucide-*)
3. Create a route
Create a page that uses your configuration:
<script setup lang="ts">
// app/pages/my-product.vue
const { data: page } = await useAsyncData('my-landing', () =>
queryContent('/my-landing').findOne()
)
</script>
<template>
<LandingPage :page="page" />
</template>
Sections and components
Landing pages are composed of reusable sections:
Hero section
The top section with headline, description, and primary CTAs. Supports multiple button styles and configurations.
Feature sections
Showcase your product's key features with icons, titles, and descriptions. Can be displayed horizontally or vertically.
Testimonials
Display social proof with customer quotes, names, roles, and avatars. Supports multiple layouts including grids and carousels.
CTA sections
Drive conversions with prominent call-to-action sections. Place them strategically throughout your landing page.
Best practices
Content
- Headlines - Clear, benefit-focused, concise
- Descriptions - Explain value proposition in simple terms
- CTAs - Use action-oriented language ("Start free trial" vs "Learn more")
- Social proof - Include real testimonials when possible
- Features - Focus on benefits, not just features
Design
- Visual hierarchy - Guide visitors' attention with size and placement
- White space - Don't overcrowd sections
- Images - Use high-quality, relevant images
- Icons - Consistent icon style throughout
- Mobile-first - Test on mobile devices
Optimization
- Above the fold - Most important content visible without scrolling
- Fast loading - Optimize images and assets
- Clear CTAs - Make buttons stand out
- Trust signals - Badges, logos, testimonials
- A/B testing - Test different headlines and CTAs
Available icons
The templates use Lucide icons via the iconify collection. Reference them in your YAML:
icon: i-lucide-check-circle
icon: i-lucide-arrow-right
icon: i-lucide-star
Browse all available icons at lucide.dev.
Creating multiple landing pages
You can create different landing pages for:
- Different products or services
- Specific marketing campaigns
- Regional variations
- A/B test variations
- Seasonal promotions
Each landing page gets its own YAML file and route, allowing you to manage multiple pages efficiently.