# Pages

## Pages

**Files:** `src/pages/[...lang]/`, `src/content/<page>/english/` · **Skill level:** Beginner to edit, light code to add

Every page has a **route** (which sections it shows) and a **content file** (its title, SEO fields, page header, and named blocks). The comments at the top of each content file list the blocks the page renders, top to bottom.

### Every Page And Its Files
| URL                   | Route (`src/pages/[...lang]/`) | Content file (`src/content/…/english/`) |
| --------------------- | ------------------------------ | --------------------------------------- |
| `/`                   | `index.astro`                  | `homepage/-index.md`                    |
| `/home-2/`            | `home-2.astro`                 | `homepage/home-2.md`                    |
| `/home-3/`            | `home-3.astro`                 | `homepage/home-3.md`                    |
| `/features/`          | `features.astro`               | `features/-index.md`                    |
| `/pricing/`           | `pricing.astro`                | `pricing/-index.md`                     |
| `/integrations/`      | `integrations/index.astro`     | `integrations/-index.md`                |
| `/integrations/<entry>/` | `integrations/[single].astro` | `integrations/<entry>.md`              |
| `/solutions/`         | `solutions/index.astro`        | `solutions/-index.md`                   |
| `/solutions/<entry>/` | `solutions/[single].astro`     | `solutions/<entry>.md`                  |
| `/templates/`         | `templates/index.astro`        | `templates/-index.md`                   |
| `/templates/<entry>/` | `templates/[single].astro`     | `templates/<entry>.md`                  |
| `/about/`             | `about.astro`                  | `about-us/-index.md`                    |
| `/testimonials/`      | `testimonials.astro`           | `testimonials/-index.md`                |
| `/careers/`           | `careers/index.astro`          | `careers/-index.md`                     |
| `/careers/<entry>/`   | `careers/[single].astro`       | `careers/<entry>.md`                    |
| `/contact/`           | `contact.astro`                | `contact/-index.md`                     |
| `/request-demo/`      | `request-demo.astro`           | `request-demo/-index.md`                |
| `/blog/`              | `blog/index.astro`             | `blog/-index.md`                        |
| `/blog/<post>/`       | `blog/[single].astro`          | `blog/<post>.md`                        |
| `/blog/category/<name>/`, `/blog/tag/<name>/`, `/blog/page/<n>/` | `blog/category/`, `blog/tag/`, `blog/page/` | `blog/-index.md` |
| `/changelog/`         | `changelog/index.astro`        | `changelog/-index.md`                   |
| `/changelog/<release>/` | `changelog/[single].astro`   | `changelog/<release>.md`                |
| `/changelog/tag/<tag>/`, `/changelog/page/<n>/` | `changelog/tag/`, `changelog/page/` | `changelog/-index.md` |
| `/help/`              | `help.astro`                   | `help/-index.md`                        |
| `/faq/`               | `faq.astro`                    | `faq/-index.md`                         |
| `/status/`            | `status.astro`                 | `status/-index.md`                      |
| `/login/`, `/signup/`, `/forgot-password/` | `login.astro`, `signup.astro`, `forgot-password.astro` | `auth/login.md`, `auth/signup.md`, `auth/forgot-password.md` |
| `/privacy-policy/`, `/terms-conditions/`, `/cookie-policy/` | `[page].astro` | `pages/<slug>.md`      |
| `/elements/`          | `elements.astro`               | `widgets/layout-gallery.md`             |
| 404                   | `404.astro`                    | `sections/not-found-section.md`         |

Every route builds every language: `/fr/pricing/` reads `src/content/pricing/french/-index.md`.

### Common Page Fields
Every page content file accepts these frontmatter fields (the `page` schema in `src/content.config.ts`; `src/content/_file_format.md` explains them):

```yaml
---
title: "Simple plans for *every* team"   # page header title; *word* sets the serif pill
metaTitle: "Pricing"                      # browser tab and search result title
description: "..."                        # summary, and fallback meta description
metaDescription: "..."                    # search result and social description
image: "/images/..."                      # social preview image (optional)
draft: false                              # true hides the page from the built site
robots: ""                                # for example "noindex, nofollow"
excludeFromSitemap: false
excludeFromSearch: false                  # leave the page out of site search
excludeFromAi: false                      # leave it out of llms.txt and the .md copies
disableTagline: false                     # true drops the tagline from the title
headerLayout: "default"                   # default | bar | islands (see Header)
footerLayout: "default"                   # default | wordmark | newsletter | tiles (see Footer & CTA)
---
```

### Highlights Of Some Pages
- **Features:** a product collage under the page header (`featureCollageSection`), a statement with numbers, benefits, the feature cards, numbers on a cream panel, and an FAQ.
- **Pricing:** the plan cards sit inside the page header, followed by logos, the plan comparison table, proof, and an FAQ. See [Pricing](/taskly/customization/pricing/).
- **Contact:** two cards with small coded visuals (a booking card and a support chat), then the message form beside a review. Form delivery: [Forms](/taskly/customization/forms/).
- **Request a demo:** a centered form card, then alternating reasons with visuals.
- **About:** mission card, logos, stats, values, overview, team photos, and three reviews.
- **Help center:** a search box in the page header, category cards with article links, a list of popular articles, and a help card. The article links ship as `#` placeholders: point them at your documentation.
- **FAQ:** the grouped FAQ with a topic list. See [Section Layouts](/taskly/customization/section-layouts/#faq-faq-sectionmd).
- **Status:** see [Collections](/taskly/customization/collections/#status-page).
- **Log in, sign up, forgot password:** static screens without the site header and footer. The forms post to `form.action` in each file, which ships as `"#"`: connect them to your app or delete the pages. `providers` lists the social sign-in buttons, and `aside` fills the colored panel beside the form.
- **Text pages:** see below.

### Add A Text Page
Privacy, terms, imprint, or any long-form page: create a Markdown file in `src/content/pages/english/` (and `french/`). `src/pages/[...lang]/[page].astro` renders it at `/<file name>/`, so no route is needed.

```md
---
title: "Imprint"
description: "Company details and contact."
date: 2026-10-01                     # shown as "Last updated"
contentPage:
  notice: ""                         # optional callout above the text
  options:
    numbered: false                  # true numbers the headings
---

## Company

Acme Inc., ...
```

Text pages get a "Last updated" pill and an "On this page" card built from the `##` and `###` headings. The shipped legal pages carry a `notice` that says they are sample text: replace the text, then remove the notice.

### Add A Page Made Of Sections
<Steps>

1. Copy a route that looks close, for example `src/pages/[...lang]/features.astro`, to `src/pages/[...lang]/<slug>.astro`. Don't use the name of a section file.
2. Add a collection for its content in `src/content.config.ts`, like the `features` entry (`schema: page`), and create `src/content/<slug>/english/-index.md` and `french/-index.md`.
3. In the route, change the collection name in `getEntryCTM(...)` and keep the sections you want, each with `content={data?.<blockName>}`.
4. Fill the content file: `title`, meta fields, `pageHeader`, and a named block for each section whose copy differs from the section file.
5. Add the page to `src/config/menu.en.json` and `menu.fr.json`, then run `npm run astro-check`.

</Steps>

### Remove A Page
Delete its route file and its content files (both languages), and remove its links from the menu files. To hide a page without deleting it, set `draft: true` in its content file: it still shows in `npm run dev`, but it is not built. On the status page, `draft: true` also removes the status link from the footer.

<Aside type="caution">
  Search the project for links to a page before you delete it (for example
  `/request-demo/` is linked from buttons in several section files).
</Aside>

### Do It With AI
```text
Create a /security/ page from existing sections: PageHeader, benefitsSection (security
practices), numbersSection (uptime figures I give you: [FIGURES]), and faqSection. Follow the
"Add a new page" skill in SKILLS.md: route, collection in src/content.config.ts, and content files
in english/ and french/ with named blocks. Add it to the footer "Company" column in both menu
files. Run npm run astro-check.
```