Guides

Landing pages (SaaS-style)

Build marketing-style landing pages with built-in Barodoc components and a full-width layout

Barodoc ships reusable landing blocks in @barodoc/theme-docs so you can compose SaaS-style pages (hero, feature grid, CTA, footer) without copying HTML from the default home page.

Full-width layout

Standalone pages normally use a narrow reading column (max-width ~720px). For marketing landings, set pageLayout: landing in frontmatter so the page uses the theme’s full-width shell (header + banner, no sidebar). Use pageLayout (not layout) — Astro 5 reserves layout for Markdown in content collections.

---
title: Pricing
description: Plans and pricing
pageLayout: landing
---

You can either declare sections in YAML (VuePress-style, under landingPage:) or compose React components in MDX — or combine both (YAML blocks first, then optional Markdown body).

Declarative landing (frontmatter)

With pageLayout: landing, add a landingPage: object. The theme renders built-in sections in order for each block you define: hero → logoStrip → stats → features → testimonials → pricing → faq → cta → footer. No imports required.

For YAML-heavy pages, prefer .md so you avoid MDX parsing quirks (unquoted URLs like /docs/guides/landing can confuse the MDX compiler). For MDX, quote paths in YAML (href: "/docs/...") and use pageLayout: "landing" if the compiler mis-parses bare landing.

---
title: Pricing
pageLayout: landing
landingPage:
  hero:
    badge: New
    title: Simple
    titleHighlight: pricing
    subtitle: One plan for teams who ship docs.
    primaryCta: { label: Start, href: /docs/introduction }
    secondaryCta: { label: Contact, href: mailto:sales@example.com }
    snippet: "npx create-barodoc my-docs"
  stats:
    title: At a glance
    items:
      - { value: "99%", label: "Uptime story" }
      - { value: "24/7", label: "Static edge" }
  features:
    title: Why us
    items:
      - icon: "⚡"
        title: Fast
        description: Static output.
  cta:
    title: Ready?
    buttonLabel: Read the docs
    buttonHref: /docs/introduction
  footer:
    tagline: Built with Acme
    showLogo: true
    links:
      - { label: Privacy, href: /privacy }
---

• footer.links — omit to default to GitHub (from topbar.github) + Documentation (/docs/introduction). Set links: [] for no links.
• footer.showLogo — defaults to showing the site logo when logo is set in barodoc.config.json.

Optional Markdown below the frontmatter is rendered in a prose column under the blocks (omit the body for YAML-only pages).

Live demo: /yaml-landing-demo (.md + pageLayout + landingPage YAML).

Components (MDX)

Import from the same entry as other MDX components:

import {
  LandingHero,
  LandingLogoStrip,
  LandingStats,
  LandingFeatures,
  LandingTestimonials,
  LandingPricing,
  LandingFaq,
  LandingCta,
  LandingFooter,
} from "@barodoc/theme-docs";

LandingHero uses a copy-to-clipboard control for the snippet — add client:load when you use it in MDX:

<LandingHero
  client:load
  badge="New"
  title="Ship docs"
  titleHighlight="faster"
  subtitle="One stack for docs and marketing."
  primaryCta={{ label: "Get started", href: "/docs/introduction" }}
  secondaryCta={{ label: "Pricing", href: "/pricing" }}
  snippet="npx create-barodoc my-docs"
/>

<LandingFeatures
  title="Why us"
  subtitle="Short value prop."
  items={[
    {
      icon: "⚡",
      title: "Fast",
      description: "Static output, great DX.",
    },
  ]}
/>

Quick checklist

See also Standalone pages for routing, reserved slugs, and tabs.