Landing Layout

The Landing Layout is designed for documentation home pages and section introductions. It provides a visually appealing and informative entry point to your documentation.

Example Layouts

Minimal Landing Page

A clean, focused landing page with essential elements:

Full Documentation Landing Page

A comprehensive landing page with features and quick links:

Features

• Hero Section: Engaging introduction with clear call-to-action buttons
• Feature Highlights: Showcase key features with icons and descriptions
• Quick Navigation: Card-based navigation to important sections
• Search Integration: Built-in search functionality
• Responsive Design: Adapts to all screen sizes
• Brand Customization: Easy theming and styling options
• Visual Hierarchy: Clear content organization

Usage

To use the Landing Layout, specify it in your page’s frontmatter:

---
layout: LandingLayout
title: Documentation
description: Welcome to our documentation
slug: "landing"
hero:
  title: Welcome to Our Docs
  description: Everything you need to get started
  actions:
    - text: Get Started
      href: javascript:void(null);
      primary: true
    - text: View on GitHub
      href: javascript:void(null);
features:
  - title: Quick Setup
    description: Install and run in minutes
    icon: rocket
  - title: Comprehensive
    description: Full API documentation
    icon: book
  - title: Interactive
    description: Live code examples
    icon: code
quickLinks:
  - title: Installation
    description: Setup guides
    href: javascript:void(null);
  - title: Tutorials
    description: Step-by-step guides
    href: javascript:void(null);
---

Layout Structure

The Landing Layout uses a modular structure that can be customized to your needs:

┌──────────────────────────────┐
│           Header             │
├──────────────────────────────┤
│            Hero              │
│   • Title & Description      │
│   • Call-to-action Buttons   │
│   • Search Bar               │
├──────────────────────────────┤
│         Features Grid        │
│   • Feature Cards            │
│   • Icons & Descriptions     │
├──────────────────────────────┤
│       Quick Links Grid       │
│   • Navigation Cards         │
│   • Section Previews         │
├──────────────────────────────┤
│      Custom Content          │
│   • MDX Content              │
│   • Custom Components        │
└──────────────────────────────┘

Component Examples

Hero Section

The hero section is the first thing visitors see. Make it count with a clear value proposition:

<Hero
  title="Build Better Documentation"
  description="A complete solution for creating beautiful documentation sites"
  primaryAction={{
    text: "Get Started",
    href: "javascript:void(null);"
  }}
  secondaryAction={{
    text: "Learn More",
    href: "javascript:void(null);"
  }}
/>

Feature Cards

Highlight key features with visual cards:

<FeaturesGrid
  features={[
    {
      title: "Quick Setup",
      description: "Get started in minutes",
      icon: <RocketLaunchIcon />
    },
    {
      title: "Component Library",
      description: "Beautiful, accessible components",
      icon: <PuzzlePieceIcon />
    },
    {
      title: "MDX Support",
      description: "Write in Markdown and JSX",
      icon: <DocumentTextIcon />
    }
  ]}
/>

Quick Links

Help users find important content quickly:

<QuickLinksGrid
  links={[
    {
      title: "Installation",
      description: "Step-by-step setup guide",
      href: "javascript:void(null);"
    },
    {
      title: "Components",
      description: "UI component library",
      href: "javascript:void(null);"
    }
  ]}
/>

Best Practices

Visual Hierarchy

1. Clear Headlines

   • Use descriptive, action-oriented titles
   • Keep headlines concise and impactful
   • Maintain consistent heading levels

2. Content Organization

   • Most important information first
   • Logical grouping of related content
   • Progressive disclosure of details

3. Visual Elements

   • Use icons to enhance recognition
   • Maintain consistent spacing
   • Apply color purposefully

Navigation Design

1. Primary Actions

   • Make main actions prominent
   • Use clear, action-oriented labels
   • Limit primary actions (1-2 max)

2. Quick Links

   • Group by topic or user journey
   • Include brief descriptions
   • Use meaningful categories

3. Search Integration

   • Prominent search placement
   • Clear search input styling
   • Helpful placeholder text

Content Guidelines

1. Writing Style

   • Clear and concise language
   • Active voice
   • Consistent terminology

2. Documentation Structure

   • Logical content hierarchy
   • Progressive complexity
   • Clear next steps

3. Examples and Code

   • Relevant code samples
   • Live examples where possible
   • Copy-paste ready snippets

Customization

Theme Customization

Customize the look and feel using CSS variables:

.landing-page {
  --hero-bg: hsl(var(--background));
  --feature-card-bg: hsl(var(--card));
  --quick-link-hover: hsl(var(--muted));
}

Custom Components

Add your own components to extend functionality:

// src/components/CustomHero.tsx
export function CustomHero() {
  return (
    <div className="custom-hero">
      <h1>Welcome to Our Docs</h1>
      <p>Get started with our platform</p>
      <div className="actions">
        <Button>Get Started</Button>
        <Button variant="outline">Learn More</Button>
      </div>
    </div>
  )
}

Layout Variants

Create different layout variants for specific needs:

---
layout: LandingLayout
variant: minimal # or 'full', 'api', etc.
---

Mobile Responsiveness

The Landing Layout is fully responsive and adapts to different screen sizes:

• Desktop (≥1024px)

  • Full-width hero section
  • Three-column feature grid
  • Two-column quick links

• Tablet (≥768px)

  • Centered hero content
  • Two-column feature grid
  • Two-column quick links

• Mobile (<768px)

  • Stacked layout
  • Full-width cards
  • Optimized spacing

Related

• Documentation Layout
• API Layout
• Tutorial Layout