---
title: "Landing page"
description: "Build your home page in content/index.md with the hero, feature grid, FAQ, and CTA components."
canonical_url: "https://docs-template.comark.dev/writing/landing-page"
---
# Landing page

> Build your home page in content/index.md with the hero, feature grid, FAQ, and CTA components.

`content/index.md` is your site's home page. It renders full-width without the docs sidebar, so it gets its own set of section components on top of the regular [Markdown](https://docs-template.comark.dev/writing/markdown) and Nuxt UI components.

Start from this playground's own [`index.md`](https://github.com/comarkdown/comark-docs/blob/main/playground/content/index.md) — it's a working example of everything below.

## Frontmatter

```md [content/index.md]
---
title: A Nuxt layer for content-driven documentation
description: Markdown served at request time, ISR-cached, revalidated on push.
navigation: false
---
```

Set `navigation: false` so the landing page doesn't appear in the docs sidebar. `title` and `description` (or `seo.title` / `seo.description`) feed the meta tags and the OG image.

<note>
The landing components below are only available in `content/index.md`. Docs pages have their own set — see [Components](https://docs-template.comark.dev/writing/components).
</note>

## Hero

Use Nuxt UI's [`UPageHero`](https://ui.nuxt.com/docs/components/page-hero) with the `u-` prefix:

```mdc
::u-page-hero
#title
Docs that ship without a redeploy.

#description
Write Markdown, push, done.

#links
  :::u-button
  ---
  to: /getting-started/introduction
  size: lg
  trailing-icon: i-lucide-arrow-right
  ---
  Get started
  :::
::
```

## Hero demo

`::landing-hero-demo` renders a fake editor with a `source.md` tab (highlighted Markdown) and a `preview` tab (the same Markdown rendered live):

```mdc
::landing-hero-demo
---
playground: https://comark.dev/playground
source: |
  # Hello world

  Write **Markdown**, see it rendered.
---
::
```

| Prop         | Type                | Purpose                                                           |
| ------------ | ------------------- | ----------------------------------------------------------------- |
| `source`     | `string` (required) | Markdown shown in the source tab and rendered in the preview tab. |
| `playground` | `string`            | URL for the "Open in playground" header button.                   |

## Feature grid

`::landing-features` is a centered section wrapping a grid of `:::landing-feature-card` tiles:

```mdc
::landing-features
#headline
Features

#title
Everything a docs site needs

#default
  :::landing-feature-card{icon="i-lucide-zap"}
  #title
  Instant content

  #description
  Content pushes go live in production without a redeploy.
  :::

  :::landing-feature-card{icon="i-lucide-git-branch" color="var(--ui-primary)"}
  #title
  Versioned previews

  #description
  Preview any branch at `/tree/branch` or commit at `/blob/sha`.
  :::
::
```

**`landing-features`** — props: `id` (optional anchor). Slots: `headline`, `title`, `description`, and the default slot for the cards.

**`landing-feature-card`** — props:

| Prop    | Type     | Purpose                              |
| ------- | -------- | ------------------------------------ |
| `icon`  | `string` | Icon shown above the title.          |
| `to`    | `string` | Makes the card a link.               |
| `color` | `string` | CSS color for the card's hover glow. |

Slots: `title`, `description`.

## Tabs

`::landing-tabs` renders a two-column section: a vertical tab list on one side and one panel per tab on the other. Panels fill the dynamic `code-0`, `code-1`, ... slots, in the same order as `items`:

~~~mdc
::landing-tabs
---
items:
  - icon: i-lucide-file-text
    title: Write Markdown
    description: Plain files in your repo.
  - icon: i-lucide-rocket
    title: Push to deploy
    description: Live without a rebuild.
---
#headline
Workflow

#title
From commit to page

#code-0
```md [content/index.md]
# Hello
```

#code-1
```bash [Terminal]
git push
```
::
~~~

| Prop      | Type                                          | Purpose                 |
| --------- | --------------------------------------------- | ----------------------- |
| `items`   | `{ icon?, title, description? }[]` (required) | One entry per tab.      |
| `reverse` | `boolean`                                     | Flips the column order. |

Slots: `headline`, `title`, `description`, `code-0` … `code-n`.

## Logo stack

`::landing-stack` renders an eyebrow label above a grid of linked logos:

```mdc
::landing-stack
---
items:
  - icon: i-simple-icons-nuxt
    label: Nuxt
    to: https://nuxt.com
  - icon: i-simple-icons-vercel
    label: Vercel
    to: https://vercel.com
---
Built with
::
```

The default slot is the label text, rendered as `// Built with //`.

## FAQ

`::landing-faq` renders an accordion and emits matching [FAQPage JSON-LD](https://developers.google.com/search/docs/appearance/structured-data/faqpage) so the questions can appear in search results:

```mdc
::landing-faq
---
items:
  - label: Do I need to redeploy when content changes?
    content: No. Content is fetched at request time and revalidated on push.
  - label: Can I preview a branch?
    content: Yes, any branch renders at /tree/branch-name.
---
#headline
FAQ

#title
Frequently asked questions
::
```

Props: `items` (`{ label, content }[]`, required; `content` is parsed as Markdown) and `id` (optional anchor). Slots: `headline`, `title`.

## Call to action

`::landing-cta` closes the page with a bordered panel:

```mdc
::landing-cta
#title
Ready to ship docs faster?

#description
Install the layer and push your first page.

#links
  :::u-button{to="/getting-started/installation" size="lg"}
  Get started
  :::
::
```

Props: `id` (optional anchor). Slots: `title`, `description`, `links`.

## Structured data

Beyond the FAQ JSON-LD, the landing page can emit a [schema.org SoftwareApplication](https://schema.org/SoftwareApplication) identity. Configure it once in `app.config.ts` under [`docs.schemaOrg`](https://docs-template.comark.dev/getting-started/configuration#appconfigts-all-keys); nothing is emitted when unset.


## Sitemap

See the full [sitemap](https://docs-template.comark.dev/sitemap.md) for all pages.