# Section Layouts

## Section Layouts

**Files:** section files in `src/content/sections/english/`, page content files · **Skill level:** Beginner

Nine sections can be drawn in more than one way. The content stays the same; one field picks the look:

```yaml
layout: "split"   # default | split | signup
```

- In the **section file**, it changes the section on every page that doesn't set its own.
- In a **page block**, it changes the section on that page only:

  ```yaml
  # src/content/homepage/english/-index.md
  heroSection:
    layout: "split"
  ```

The first value of each list is the default. Copy values exactly: a misspelled value shows an error in `npm run dev`.

### The Layout Gallery
<div class="border border-dark">
  ![The layout gallery at /elements/](/images/taskly/elements.jpg)
</div>

Open `/elements/` (and `/fr/elements/`) on your local site to see every layout below, one after the other, with the copy from your section files. Each preview is labeled with the section and the layout name ("Hero · split"). The page is not in the menus, is marked `noindex`, and is left out of the sitemap and site search. Delete `src/pages/[...lang]/elements.astro` before launch if you don't want it online.

### Hero (`hero-section.md`)
| Layout    | Looks like                                                                 | Used on    |
| --------- | -------------------------------------------------------------------------- | ---------- |
| `default` | Centered title with a rating badge, the dashboard below with two annotations and two comment pins on it | `/` |
| `split`   | On white: copy and rating stars on the left, a collage of product cards on a lilac block on the right | `/home-2/` |
| `signup`  | Centered title with a "New" pill and an email field, the dashboard with side cards, a dark logo band under it | `/home-3/` |

Layout-only fields: `default` reads `badge`, `comments`, `notes`; `split` reads `rating` and `visual` (comment, calendar, progress, chat); `signup` reads `pill`, `signup`, and `visual` (task, project). `showDashboard: false` hides the dashboard in `default` and `signup`. The email field of `signup` opens the sign-up page with the address filled in.

### Logos (`logos-section.md`)
| Layout    | Looks like                                       | Used on |
| --------- | ------------------------------------------------ | ------- |
| `default` | Open scrolling strip with a line above           | `/`, `/pricing/` |
| `boxed`   | The same strip inside a cream card               | `/home-2/` |
| `band`    | White logos on a dark band, no line              | inside the `signup` hero on `/home-3/` |

### Why (`why-section.md`)
| Layout    | Looks like                                              | Used on |
| --------- | ------------------------------------------------------- | ------- |
| `default` | Cream cards with an icon, text, and a small product card (`visual` of each item) | `/` |
| `simple`  | Outlined cards with a centered icon and text, no product card | `/home-2/` |

### Features (`features-section.md`)
| Layout    | Looks like                                              | Used on |
| --------- | ------------------------------------------------------- | ------- |
| `default` | Two colored cards side by side, then wide cards (`wide: true`) with the visual beside the text | `/`, `/features/` |
| `stacked` | Every card full width with the visual beside the text; on large screens the cards pin under the header and pile up while the page scrolls | gallery only |

### Feature Rows (`feature-rows-section.md`)
| Layout        | Looks like                                          | Used on |
| ------------- | --------------------------------------------------- | ------- |
| `alternating` | Big rows, a product card in a colored panel on one side; the sides swap every row | `/home-2/`, `/home-3/`, solution pages |
| `compact`     | A grid of outlined cards (three across on large screens), the visual cropped on top, then title, text, numbers, and a small button; the subtitle is hidden | gallery only |

### Integrations (`integrations-section.md`)
| Layout  | Looks like                                            | Used on |
| ------- | ----------------------------------------------------- | ------- |
| `tiles` | Icon tiles wired to your logo in the middle           | `/` |
| `chips` | Named pills in a cream band                           | `/home-2/` |
| `cloud` | A cream card with the title, button, and tilted pills; no tag | `/home-3/` |

### Testimonials (`testimonials-section.md`)
| Layout    | Looks like                                              | Used on |
| --------- | ------------------------------------------------------- | ------- |
| `columns` | Review cards in three columns                           | `/` and `/about/` (first three), `/testimonials/` (all) |
| `marquee` | Dark review cards scrolling sideways, with avatars and a rating beside the title (`rating`) | `/home-3/` |

### Pricing (`pricing-section.md`)
| Layout    | Looks like                                              | Used on |
| --------- | ------------------------------------------------------- | ------- |
| `default` | Plan cards side by side with the monthly / yearly switch | `/`, `/home-2/`, `/pricing/` |
| `compact` | One row per plan: name, description, and features on the left, price and button in a white panel on the right. Good for three or four plans | gallery only |

### FAQ (`faq-section.md`)
| Layout     | Looks like                                             | Used on |
| ---------- | ------------------------------------------------------ | ------- |
| `split`    | Intro and a help card beside the questions             | `/`, `/home-3/`, `/features/`, `/pricing/` |
| `centered` | Intro above one column of questions, the help card below | `/home-2/` |
| `grouped`  | Questions by topic (`groups`), with a topic list that stays in view on desktop | `/faq/` |

`split` and `centered` read `items`; `grouped` reads `groups` and `topicsLabel`. Both lists live in `faq-section.md`, so you can switch freely.

### Page Header (`pageHeader` block)
| Layout    | Looks like                                             | Used on |
| --------- | ------------------------------------------------------ | ------- |
| `default` | Centered tag, title, description, and buttons          | every inner page |
| `split`   | Text and buttons on the left, a visual on the right    | `/integrations/` |

The `split` visual is set with `pageHeader.visual`:

```yaml
pageHeader:
  layout: "split"
  visual:
    type: "tools"            # image | dashboard | tools
    # image:  src: "/images/..." and alt: "..."
    # tools:  a list of { name, icon, color } tiles around your logo
    tools:
      - { name: "Chatnest", icon: "MessageSquare", color: "lilac" }
```

### Other Layout Options
- **Auth screens** (`src/content/auth/english/*.md`): `options.layout: "default"` puts a colored panel beside the form; `"centered"` shows a single card.
- **Text pages** (`src/content/pages/english/*.md`): `contentPage.options.layout` has one value, `default`; `contentPage.options.numbered: true` numbers the headings.

<Aside type="note" title="About the &quot;Change layout&quot; button">
  The theme's live demo shows a floating "Change layout" button. It is a demo
  feature that only appears in builds with `PUBLIC_DEMO_MODE=true`; leave that
  variable unset. Use `/elements/` to compare layouts in your copy.
</Aside>

### Recipes By Product Type
- **A simple product site:** start from `/`, set the FAQ to `centered`, and keep pricing `default`.
- **A sign-up-first launch page:** use the `signup` hero, testimonials `marquee`, and integrations `cloud`, as on `/home-3/`.
- **Few plans, more detail:** pricing `compact`, with the comparison table on `/pricing/`.
- **Feature-heavy pages:** features `stacked` on `/features/`, or feature rows `compact` for a scannable grid.

### Do It With AI
```text
Set these layouts on the homepage (src/content/homepage/english/-index.md and french/-index.md,
add the blocks if missing): hero "[default | split | signup]", logos "[default | boxed | band]",
why "[default | simple]", integrations "[tiles | chips | cloud]", testimonials "[columns |
marquee]", FAQ "[split | centered | grouped]". Check that the fields each layout reads are filled
in the section files. Then tell me to compare the result with /elements/.
```