# Footer & CTA Band

## Footer & CTA Band

**Files:** `src/config/config.toml`, `src/i18n/en.json`, `src/config/menu.en.json`, `src/config/social.json`, `src/content/sections/english/call-to-action.md` · **Skill level:** Beginner

The footer closes every page with your links, contact details, opening hours, social links, and the legal row. Homio has four footer layouts. Above the footer, a page can also show a **CTA band**: a closing call to action with a button and your phone.

<div class="border border-dark">
  ![Homio default footer](/images/homio/footer.jpg)
</div>

### Choose A Footer Layout
```toml
# src/config/config.toml
[settings.layout]
  # default | mint panel: headline + button, newsletter, services, contact and hours, brand and link columns, legal pill
  # minimal | deep green: logo and one-line statement, two link columns and socials, legal row
  # large   | sage panel: newsletter tab, big claim with phone and email, link columns, gift card, areas row, legal row
  # columns | deep green: logo and text, link and contact columns split by hairlines, button, centred copyright
  footer = "default"
```

| Layout    | What it shows                                                                                         | Demo page          |
| --------- | ----------------------------------------------------------------------------------------------------- | ------------------ |
| `default` | A mint panel. On top, a headline with the main button, and the newsletter signup. Then the Services column in two columns beside your address, phone, email, and opening hours with the "Open now" line. Under the logo and description, the other link columns and the social icons. The copyright, legal links, language switch, and light/dark button sit in a white pill at the bottom | `/`, inner pages   |
| `minimal` | A deep green block: logo and a one-line statement, the first two link columns and the social links, then a row with the copyright, the legal links, and the language switch. The shortest footer, with no newsletter | `/home-commercial/`, `/book/` |
| `large`   | A sage panel with the newsletter in a tab cut into its top edge. A big claim with your phone and email and the main button, the link columns, and a sunflower gift card box. Then your service areas beside the social icons, and the legal row | `/home-cleaning/`  |
| `columns` | A deep green block: logo and description, up to three link columns and a contact column divided by thin lines, the main button with the language and light/dark switches, and the copyright centered under a line | `/home-handyman/`  |

**One page, another layout.** Add `footerLayout` to the page's frontmatter. It wins over the config:

```yaml
---
title: "Book a visit"
footerLayout: "minimal" # default | minimal | large | columns
---
```

`/book/` uses `minimal` this way, so the booking form stays the focus.

### Footer Text
The headings and short texts are UI strings in `src/i18n/en.json` and `fr.json`, under `footer`:

| Key                   | Shipped English text                                       | Used by                     |
| --------------------- | ---------------------------------------------------------- | --------------------------- |
| `footer.description`  | "Cleaning, repairs, and home care with prices you see before we arrive." | `default` (under the logo), `minimal` (the statement), `columns`, and `large` when `footer.largeText` is empty |
| `footer.ctaTitle`     | "Get a price for your home"                                | `default`: the headline above the main button. `""` hides the headline and its button |
| `footer.largeTitle`, `footer.largeText` | "Trusted cleaners, ready when you are", "Easy, no-fuss cleaning for busy homes." | `large`: the big claim and the line under it |
| `footer.giftTitle`, `footer.giftText`, `footer.giftLink` | "Gift cards", ...                     | `large`: the gift card box, linking to `/gift-cards/` |
| `footer.hours`, `footer.contact`, `footer.areas`, `footer.socialsTitle` | "Opening hours", "Contact", "Service areas", "Socials" | Column headings |
| `footer.copyright`    | "© \{year\} \{brand\}. All rights reserved."               | Every layout                |

`[settings] footerDescription` in `config.toml` replaces `footer.description` in every language: use it only on a single-language site.

The address, phone, email, and hours come from `[business]` in `config.toml`. See [Business Info](/homio/customization/business-info/).

### Copyright
```toml
[settings.copyright]
  enable = true
  text   = "" # `{year}` and `{brand}` are replaced with the build year and `site.title`
```

Leave `text` empty to use `footer.copyright` from the i18n files. `{year}` becomes the year of the build, so the notice stays current, and `{brand}` becomes `[site] title`.

### Footer Links
The link columns come from the `footer` list in `src/config/menu.en.json` and `menu.fr.json`. The last column (Legal) always goes in the bottom row, and a column with `"source": "areas"` lists your service areas. See [Menus](/homio/customization/menus/#footer-menus).

### Newsletter
The `default` and `large` footers show a Mailchimp signup form. It posts to `[settings.subscription] formAction` in `config.toml`, which ships as a placeholder: until you set it, `npm run dev` shows a warning inside the form. `[settings.subscription] enable = false` hides every signup form. The heading is `subscription.title` in the i18n files.

### Social Links
The social icons in the `default`, `minimal`, and `large` footers come from `src/config/social.json`:

```json
{
  "main": [
    {
      "enable": true,
      "label": "facebook",
      "icon": "/images/icons/facebook.svg",
      "url": "https://www.facebook.com"
    }
  ]
}
```

The shipped links point to the networks' home pages. Replace each `url` with your own profile, and set `enable` to `false` on networks you don't use. `icon` is an SVG in `src/assets/images/icons/`; `label` is the name screen readers hear.

### The CTA Band Above The Footer
The CTA band is a closing section with a title, a line of text, the main button, and your phone with the "Open now" line. It is the section `call-to-action.md`, and it is **off by default**: the `default` footer already starts with a headline and button. Pages that want the band turn it on with a `ctaSection` block.

```yaml
# src/content/sections/english/call-to-action.md (trimmed)
enable: false # a page block with `enable: true` shows it
eyebrow: ""
title: "Come home to a clean house this week"
description: "Pick a service, see your price, choose a time. It takes about a minute."
button:
  enable: true
  label: "Book a visit"
  url: "/book/"
  variant: "fill-white"
phone: true # the phone and open-now line from [business]
image: "/images/services/handyman-at-work.jpg" # `default` layout: 4:3 photo; empty hides it
imageAlt: "A handyman fitting a kitchen cabinet door"
options:
  layout: "default" # default | split | band | newsletter | slanted
```

Turn it on for one page in its frontmatter. The block must include `enable: true`, because the section file ships with `false`:

```yaml
ctaSection:
  enable: true
  title: "Ready for a clean home?"
  options:
    layout: "band"
```

The about, areas, careers, FAQ, guarantee, how it works, projects, referral, reviews, gift card, services, and team pages ship with it on, and so do the handyman and commercial homepages.

| Layout       | What it looks like                                                                                   |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| `default`    | With an `image`: a white section with the title, text, sunflower button, and phone beside a framed photo. With `image: ""`: a full sunflower block with the same copy |
| `split`      | Copy on the left, a recap ticket on the right ("Standard clean · 2 bed, 1 bath", three check rows, and a price) with the buttons in its footer. Shows `secondaryButton` |
| `band`       | A full-width brand-green band: label, title, text, a sunflower call pill, an outline button, and the photo to the page edge |
| `newsletter` | Copy on the left, the newsletter signup on the right. Shows `default` instead when `[settings.subscription]` is off |
| `slanted`    | A deep green block, the copy at the top and the photo under it with a slanted top edge (the handyman homepage) |

The `split` layout's ticket reads `ticket:` in the section file. Its price is computed from your rate card (`quote:` with a service id, home size, and frequency), so it follows your pricing; remove `quote` and set `total` to type a price instead. See [Pricing & Estimator](/homio/customization/pricing-estimator/).

The title is plain text in one color: Markdown emphasis such as `*word*` shows as plain text.

### Files For Developers
`src/layouts/components/global/Footer.astro` picks the layout and draws `default`. The others are in `src/layouts/components/global/footer/`: `FooterMinimal.astro`, `FooterLarge.astro`, and `FooterColumnsBlock.astro`, with `FooterLegal.astro` (the bottom row), `FooterSocials.astro`, and `FooterLanguages.astro`. The CTA band is `src/layouts/components/sections/CallToAction.astro`, with its layouts in `sections/call-to-action/`.

### Do It With AI
```text
Set the footer to the [default | minimal | large | columns] layout in [settings.layout] of
src/config/config.toml. Rewrite footer.description, footer.ctaTitle, footer.largeTitle, and
footer.largeText in src/i18n/en.json and fr.json for my business: [ONE LINE ABOUT US]. Put my
social profiles in src/config/social.json: [URLS], and disable the networks I didn't list.
```

```text
Show the CTA band on [PAGE URL] with the [default | split | band | newsletter | slanted] layout:
add a ctaSection block with enable: true and options.layout to the page's content file in
english/ and french/. Title "[TITLE]", button "[LABEL]" to [URL]. Keep the other fields from
src/content/sections/english/call-to-action.md.
```