# Introduction

Homio is an Astro and Tailwind CSS theme for home-services companies: cleaning first, plus handyman and repairs, window cleaning, and carpet cleaning. It ships over 30 page types, including 4 homepages, in English and French, in light and dark mode.

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

Most changes in Homio are edits to plain text files, not code: your business details, text, photos, buttons, menus, prices, service areas, and the layout of every section that has more than one. Your company name, phone, email, address, and opening hours are set once and reused on every page. When you do want to change code, the theme ships instruction files that tell AI coding tools how it is built.

### What Is Included
- **4 homepages**: the main homepage (`/`), a cleaning company (`/home-cleaning/`), commercial cleaning (`/home-commercial/`), and a handyman business (`/home-handyman/`)
- **Services**: an overview grouped by trade and one page per service (10 sample services, from standard and deep cleaning to handyman work, windows, carpets, gutters, and pressure washing), each with what is and is not included, add-ons, and an estimator
- **Instant estimator**: prices by bedrooms and bathrooms, by the hour, or per item, with add-ons, visit-frequency discounts (weekly, every 2 weeks, monthly), and minimum charges. The result carries over to the booking form
- **Pricing**: plans, a visit-frequency toggle, add-ons, trade rates, and the estimator on one page, all from one price file
- **Booking request**: a **multi-step booking form** on `/book/` with a postal-code check against your service areas, date limits, and a saved draft
- **Service areas**: an overview with an area finder and one page per area, with postal codes, neighborhoods, and local notes
- **Trust pages**: Reviews with a rating summary, Projects with before/after photos, the Re-clean guarantee, How it works, and an FAQ
- **Company**: about, team, careers with one page per open role, industries served, contact, gift cards, and referral
- **Content**: a blog with categories, tags, an author box, related posts, a table of contents, and an RSS feed
- **Legal**: privacy policy, terms and conditions, cookie policy, cancellation policy, and a 404 page per language
- **Section layouts**: many sections have more than one look, chosen with one line, and `/elements/` previews them all
- **Header and footer**: four header layouts with a services mega menu, four footer layouts, and a **Call / Get a price** bar on phones
- **Built in**: light and dark mode, cookie consent, SEO (sitemap, `robots.txt`, structured data for your business, services, areas, and prices, generated Open Graph images), `llms.txt` and Markdown copies of pages, and forms that send to Formsubmit, Formspree, or Netlify Forms

<Aside type="note" title="What Homio is not">
  Homio is a static marketing site. It has no customer accounts, no online
  payments, and no live calendar: the booking form sends a request by email or
  as a form submission to a service you choose, and you confirm the visit
  yourself. The estimator shows a price from the rates you set, not a live
  quote. There is no site search, and right-to-left languages are not
  supported.
</Aside>

### Choose Your Path
Every guide in these docs starts with the plain-language task, then shows the exact file and setting. Pick the path that matches how you like to work:

<CardGrid>
  <LinkCard
    title="I don't code"
    description="Follow the Quick Start, then the Beginner Guide. You only edit text files."
    href="/homio/getting-started/quick-start/"
  />
  <LinkCard
    title="I want AI to help"
    description="Use Claude, Cursor, Copilot, Gemini, Windsurf, or Codex with ready-made prompts."
    href="/homio/ai-customization/ai-overview/"
  />
  <LinkCard
    title="I'm a developer"
    description="Learn the architecture, then use the Customization reference."
    href="/homio/getting-started/how-homio-works/"
  />
  <LinkCard
    title="I'm ready to launch"
    description="Set your URL and business details, connect the forms, and deploy."
    href="/homio/deployment/"
  />
</CardGrid>

### The Files You Will Edit Most
| What you want to change                                        | Where it lives                                         |
| -------------------------------------------------------------- | ------------------------------------------------------ |
| Company name, phone, email, address, opening hours             | `[business]` in `src/config/config.toml`               |
| Site name, URL, forms, estimator and booking settings          | `src/config/config.toml`                               |
| Prices, visit frequencies, add-ons, and estimator rates        | `src/content/pricing/english/-index.md`                |
| Services and what each one includes                            | `src/content/services/english/`                        |
| Service areas and their postal codes                           | `src/content/areas/english/`                           |
| Header and footer links                                        | `src/config/menu.en.json`, `src/config/menu.fr.json`   |
| Colors and type scale                                          | `src/styles/theme.css`                                 |
| Fonts                                                          | `src/config/fonts.json`                                |
| Text and images of a section                                   | `src/content/sections/english/` (and `french/`)        |
| Text and section settings of one page                          | `src/content/<page>/english/-index.md`                 |
| Button labels and other small interface text                   | `src/i18n/en.json`, `src/i18n/fr.json`                 |

<Aside type="tip">
  Content files list their options in comments, so the file itself tells you
  what you can change. Open `src/content/sections/english/hero-section.md` to
  see an example. Sample facts that you must replace are marked `# sample`.
</Aside>

#### Links

- [Live Preview](https://homio-astro.pages.dev/) (the demo turns on the floating "Change layout" button; it is off in your copy)
- [Layout Gallery](https://homio-astro.pages.dev/elements/): every layout of the sections that have more than one, and the page header. In your copy, run `npm run dev` and open `http://localhost:4321/elements/`
- [Support](https://getastrothemes.com/contact/)