# Sections

## Sections

**Files:** `src/content/sections/english/` (and `french/`), page content files · **Skill level:** Beginner to edit, light code to add or move

A **section** is one full-width block of a page: a hero, a pricing table, an FAQ. Each section is two files that share a name:

```text
src/layouts/components/sections/PricingSection.astro   ← how it looks (component)
src/content/sections/english/pricing-section.md        ← what it says (content)
src/content/sections/french/pricing-section.md
```

[How Taskly Works](/taskly/getting-started/how-taskly-works/) explains the idea in full. This page is the practical reference.

### Change A Section Everywhere
Edit its file in `src/content/sections/english/` (and `french/`). The comments in each file list every option and its allowed values.

Each section checks its content against its schema (in `src/sections.schema.ts`) when the page renders. A wrong value, such as `layout: "boxd"` or `rating: "five"`, shows an error in `npm run dev` and stops `npm run build`, with the field name. A misspelled **key** is not an error: it is ignored, so a change that does nothing usually means a typo in the key.

### Hide A Section
- **Everywhere:** set `enable: false` at the top of its section file.
- **On one page:** add its block to that page's file with `enable: false`:

  ```yaml
  logosSection:
    enable: false
  ```

- **On one page, for good:** delete its line in the page's route file in `src/pages/[...lang]/`.

### Change A Section On One Page
Add a **named block** to the page's content file, with only the keys you want to change. The block name is in the table below. Remember the merge rules: objects merge key by key, lists replace the whole list, and `""` clears a value.

```yaml
# src/content/features/english/-index.md
faqSection:
  title: "Questions about features"
  layout: "centered"
```

Copy the block name exactly. A block with a wrong name, for example `faq:` instead of `faqSection:`, is ignored without an error. `npm run astro-check` checks the values inside a correctly named block in the page files that have a schema (every page except `contact/` and `pricing/`, whose blocks are checked when the page renders).

<Aside type="caution">
  A block only works on pages whose route renders that section. Each page file
  lists the blocks it reads in the comments at its top.
</Aside>

### Every Section
| Section file (`sections/english/`) | Page block              | Used on                                          |
| ---------------------------------- | ----------------------- | ------------------------------------------------ |
| `hero-section.md`                  | `heroSection`           | `/`, `/home-2/`, `/home-3/`                      |
| `logos-section.md`                 | `logosSection`          | `/`, `/home-2/`, `/about/`, `/pricing/`, and inside the `signup` hero |
| `why-section.md`                   | `whySection`            | `/`, `/home-2/`                                  |
| `features-section.md`              | `featuresSection`       | `/`, `/features/`                                |
| `integrations-section.md`          | `integrationsSection`   | `/`, `/home-2/`, `/home-3/`                      |
| `overview-section.md`              | `overviewSection`       | `/`, `/about/`                                   |
| `testimonials-section.md`          | `testimonialsSection`   | `/`, `/home-3/`, `/about/`, `/testimonials/`, `/solutions/`, solution pages |
| `pricing-section.md`               | `pricingSection`        | `/`, `/home-2/`, `/pricing/`                     |
| `faq-section.md`                   | `faqSection`            | the homepages, `/features/`, `/pricing/`, `/faq/`, solution pages |
| `stats-panel-section.md`           | `statsPanelSection`     | `/home-2/`                                       |
| `solution-tabs-section.md`         | `solutionTabsSection`   | `/home-2/`                                       |
| `feature-rows-section.md`          | `featureRowsSection`    | `/home-2/`, `/home-3/`, solution pages           |
| `proof-section.md`                 | `proofSection`          | `/home-2/`, `/pricing/`                          |
| `latest-posts-section.md`          | `latestPostsSection`    | `/home-2/`                                       |
| `intro-section.md`                 | `introSection`          | `/home-3/`                                       |
| `bento-section.md`                 | `bentoSection`          | `/home-3/`                                       |
| `steps-section.md`                 | `stepsSection`          | `/home-3/`, solution pages                       |
| `control-panel-section.md`         | `controlPanelSection`   | `/home-3/`                                       |
| `comparison-section.md`            | `comparisonSection`     | `/home-3/`, `/solutions/`, solution pages        |
| `call-to-action.md`                | `ctaSection`            | every page except the auth screens               |
| `feature-collage-section.md`       | `featureCollageSection` | `/features/`                                     |
| `feature-summary-section.md`       | `featureSummarySection` | `/features/`                                     |
| `benefits-section.md`              | `benefitsSection`       | `/features/`, `/careers/`                        |
| `numbers-section.md`               | `numbersSection`        | `/features/`                                     |
| `plan-compare-section.md`          | `planCompareSection`    | `/pricing/`                                      |
| `mission-section.md`               | `missionSection`        | `/about/`                                        |
| `stats-section.md`                 | `statsSection`          | `/about/`                                        |
| `company-values-section.md`        | `companyValuesSection`  | `/about/`, `/careers/`                           |
| `team-section.md`                  | `teamSection`           | `/about/`                                        |
| `contact-cards-section.md`         | `contactCardsSection`   | `/contact/`                                      |
| `contact-message-section.md`       | `contactMessageSection` | `/contact/`                                      |
| `demo-form-section.md`             | `demoFormSection`       | `/request-demo/`                                 |
| `demo-reasons-section.md`          | `demoReasonsSection`    | `/request-demo/`                                 |
| `integrations-catalog-section.md`  | `integrationsCatalogSection` | `/integrations/`                            |
| `integration-detail-section.md`    | none (shared labels)    | every `/integrations/<entry>/` page              |
| `blog-posts-section.md`            | `blogPostsSection`      | `/blog/` and its category, tag, and page lists   |
| `related-articles-section.md`      | `relatedArticlesSection`| under every blog post                            |
| `release-notes-section.md`         | `releaseNotesSection`   | `/changelog/` and its tag and page lists         |
| `help-categories-section.md`       | `helpCategoriesSection` | `/help/`                                         |
| `popular-articles-section.md`      | `popularArticlesSection`| `/help/`                                         |
| `solutions-list-section.md`        | `solutionsListSection`  | `/solutions/`                                    |
| `templates-catalog-section.md`     | `templatesCatalogSection` | `/templates/`                                  |
| `template-detail-section.md`       | none (shared labels)    | every `/templates/<entry>/` page                 |
| `careers-list-section.md`          | `careersListSection`    | `/careers/`                                      |
| `career-detail-section.md`         | none (shared labels)    | every `/careers/<entry>/` page                   |
| `status-section.md`                | `statusSection`         | `/status/`                                       |
| `not-found-section.md`             | none                    | the 404 page                                     |

The component of each file has the same name in PascalCase in `src/layouts/components/sections/`: `stats-panel-section.md` is `StatsPanelSection.astro`, and `call-to-action.md` is `CallToAction.astro`.

### The Page Header
Inner pages start with the cream **page header** (`src/layouts/components/ui/PageHeader.astro`). It has no section file: its title is the page's `title`, and the rest comes from the page's `pageHeader:` block:

```yaml
title: "Simple plans for *every* team"
pageHeader:
  tag: { label: "Plans", color: "sun" }
  description: "Start free, then pick the plan that fits."
  breadcrumb: true          # breadcrumb links above the title (off by default)
  layout: "default"         # default | split (see Section Layouts)
  primaryButton: { enable: true, label: "Start free", url: "/signup/", variant: "dark" }
  secondaryButton: { enable: true, label: "Talk to sales", url: "/contact/", variant: "fill-white" }
```

Breadcrumb labels come from the menu names, so they are translated with your menus.

### Shared Pieces That Are Not Sections
`src/content/widgets/english/` (and `french/`) holds the content of parts that appear inside sections or on every page:

- `dashboard-mockup.md`: the sample data of the coded product dashboard in the hero, the overview, and the stats panel
- `announcement-bar.md`: the strip above the header ([Header](/taskly/customization/header/))
- `cookie-consent.md`: the cookie banner ([Cookies & Analytics](/taskly/customization/cookies-analytics/))
- `layout-gallery.md`: the title and labels of the `/elements/` page

### Notes And Comment Pins
Two small decorations make the mockups feel like a design review:

- **Annotations** (`ui/Annotation.astro`): a DM Mono label in a bordered chip, with a dashed line and a dot pointing at the product. Their text comes from `note` and `notes` fields, for example `notes` in `hero-section.md` or `note` on a features card.
- **Comment pins** (`ui/CommentPin.astro`): an initial avatar and a speech-bubble chip, like a comment left on a design. They come from `comment` and `comments` fields with a `name`, a short `text`, and a pastel `color`.

Delete the field to hide the decoration. Keep the text short: they sit in fixed spots and are hidden on phones (the two hero comments, pinned on the dashboard, show from tablet width; most others from large screens).

### Add A New Section
Follow the "Add a new section" recipe in `SKILLS.md`, by hand or with an AI assistant:

1. Create `src/layouts/components/sections/<Name>Section.astro`, starting from a similar section.
2. Create `src/content/sections/english/<name>-section.md` and `french/<name>-section.md`, with comments listing every option.
3. Add a schema to `src/sections.schema.ts` and register it in `sectionsSchema` as `<name>Section`, so pages can override it.
4. Add a line for it to a route in `src/pages/[...lang]/`.
5. Run `npm run astro-check` and open the page.

### Do It With AI
```text
On the about page, hide the overview section, and change the team section title to "[TITLE]".
Use named blocks in src/content/about-us/english/-index.md and french/-index.md (block names from
sectionsSchema in src/sections.schema.ts). Don't edit the section files, so other pages keep
their defaults.
```