# Homepages

## Homepages

**Files:** `src/pages/[...lang]/index.astro`, `home-2.astro`, `home-3.astro`, `src/content/homepage/english/` · **Skill level:** Beginner to edit, light code to reorder

Taskly ships three homepages. They are built from the same section components and the same section files; each one picks a different look with the `layout` field of its sections and changes some copy with named blocks.

### The Three Homepages
<div class="border border-dark">
  ![Home 2: split hero](/images/taskly/home-2.jpg)
</div>

| URL         | Route file        | Content file                             | Look | Header (`headerLayout`) | Footer (`footerLayout`) |
| ----------- | ----------------- | ---------------------------------------- | ---- | ----------------------- | ----------------------- |
| `/`         | `index.astro`     | `src/content/homepage/english/-index.md` | Centered hero on a cream fade with the coded dashboard, two review comments pinned on it | `default`: floating white bar | `wordmark`: ink, your site name across the bottom |
| `/home-2/`  | `home-2.astro`    | `src/content/homepage/english/home-2.md` | White split hero with a rating, and a collage of product cards on a lilac block | `bar`: full-width white bar | `newsletter`: cream, a signup card and one row per link group |
| `/home-3/`  | `home-3.astro`    | `src/content/homepage/english/home-3.md` | Sign-up hero in a cream card with an email field, a dashboard with side cards, and a dark logo band | `islands`: logo, menus, and buttons in separate boxes | `tiles`: white, pastel cards and the latest release |

Every other page uses the `default` header and footer. Change a homepage's header or footer with `headerLayout` or `footerLayout` in its content file (both languages); they are described in [Header](/taskly/customization/header/) and [Footer & CTA](/taskly/customization/footer/).

<div class="border border-dark">
  ![Home 3: sign-up hero](/images/taskly/home-3.jpg)
</div>

### Sections Of Each Homepage
Top to bottom. The call to action above the footer (`ctaSection`) comes after each list.

| `/`                                   | `/home-2/`                               | `/home-3/`                              |
| ------------------------------------- | ---------------------------------------- | --------------------------------------- |
| Hero (`default`)                      | Hero (`split`)                           | Hero (`signup`, with the logos inside)  |
| Logos (`default`)                     | Logos (`boxed`)                          | Intro statement                         |
| Why (`default`)                       | Why (`simple`)                           | Bento grid                              |
| Features (`default`)                  | Stats panel                              | Steps                                   |
| Integrations (`tiles`)                | Solution tabs                            | Feature rows (`alternating`)            |
| Overview                              | Feature rows (`alternating`)             | Control panel                           |
| Testimonials (`columns`, three reviews) | Integrations (`chips`)                 | Testimonials (`marquee`)                |
| Pricing (`default`)                   | Pricing (`default`, highlighted plan)    | Comparison (old way vs new way)         |
| FAQ (`split`)                         | Proof (numbers and a quote)              | Integrations (`cloud`)                  |
|                                       | FAQ (`centered`)                         | FAQ (`split`)                           |
|                                       | Latest posts                             |                                         |

Each homepage content file lists the blocks it renders in the comments at its top.

### Change The Text Of One Homepage
Because the homepages share section files, an edit to `src/content/sections/english/hero-section.md` changes the hero on all three (unless a homepage overrides that field). To change one homepage only, add or edit a named block in its content file:

```yaml
# src/content/homepage/english/home-3.md
heroSection:
  layout: "signup"
  title: "One calm *home* for remote team work"
  description: "Plan projects, share updates, and keep everyone moving."
```

Remember the merge rules: only the keys you write change, and a list (`items`, `plans`, `rows`) replaces the whole list. See [How Taskly Works](/taskly/getting-started/how-taskly-works/#4-how-overrides-merge).

### Change The Layout Of A Section
Set `layout` in the homepage's block:

```yaml
# src/content/homepage/english/-index.md
testimonialsSection:
  layout: "marquee"   # columns | marquee
```

Some layouts read extra fields from the section file, for example the `split` hero reads `rating` and `visual`, and the `signup` hero reads `pill`, `signup`, and `visual`. They are already filled in with sample content. Compare all layouts at `/elements/`, and see [Section Layouts](/taskly/customization/section-layouts/).

### Reorder, Add, Or Remove Sections
Edit the route file. Each line is one section, in display order:

```astro
<Base {...data} homepage>
  <LayoutVariants section="hero" content={data?.heroSection} />
  <LayoutVariants section="logos" content={data?.logosSection} />
  <FeaturesSection content={data?.featuresSection} />
  <PricingSection content={data?.pricingSection} />
</Base>
```

- **Move** a line to move the section. Keep the hero first: the header floats over it.
- **Delete** a line (and its import, if no other line uses it) to remove the section from that homepage.
- **Add** a section from another page: import its component at the top, add a line such as `<StepsSection content={data?.stepsSection} />`, and add a `stepsSection:` block to the content file if you want different copy.
- To hide a section without touching code, add its block with `enable: false`.

`<LayoutVariants section="…">` renders the section like its own component would. Keep those lines as they are, or replace one with the plain component (`<HeroSection content={data?.heroSection} />`): the result is the same in your builds.

### Keep Only One Homepage
Most sites need one homepage. To make the look of `/home-2/` or `/home-3/` your main page, copy its section lines into `index.astro` and its named blocks, `headerLayout`, and `footerLayout` into `-index.md` (in both languages). Then delete the routes and content files you no longer need, and remove the **Home** menu and the **Homepages** footer column from the menu files. The [Prompt Library](/taskly/ai-customization/prompt-library/) has a prompt for this.

<Aside type="caution">
  `metaTitle` and `metaDescription` in the homepage files are the title and
  description search engines show for your site. Write your own; the theme
  name is in the shipped `-index.md`, which also sets `disableTagline: true`
  so the tagline isn't added after a title that already says it.
</Aside>

### Do It With AI
```text
On /home-2/, use the "split" FAQ layout, move the pricing section above the stats panel, and
remove the latest posts. Edit src/pages/[...lang]/home-2.astro for the order and
src/content/homepage/english/home-2.md and french/home-2.md for the layout. Remove unused imports
and run npm run astro-check.
```