AI services homepage templateFree9 sections

Switchyard:forest green model railway AI services homepage template for Astro, HubSpot and WordPress

A forest green homepage that uses a model railway switchyard as its picture of AI operations: many incoming rails pass through precise points and leave as orderly routes. Four photographs show the yard, a turnout, a dispatch cabin and a hand setting the points, each tied to one part of the story.

Open live demo Downloads

Sections: 9, 3 with their own script
Editable fields: 105 in HubSpot and WordPress
Typefaces: Inter
Image files: 4
Downloads: Astro 403 KB, HubSpot 1.3 MB, WordPress 990 KB
Look: Dark and light sections
Collections: AI services, Consulting, Business
Framer: Coming soon

Switchyard AI services homepage template, first screen on a 1440 pixel wide desktop

Switchyard AI services homepage template, first screen on a 390 pixel wide phone

Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Railfold, a fictional company that builds and runs AI systems for other businesses.

Download Switchyard

Free: a short form (first name and work email) once, then every zip downloads straight away. Free to use and adapt for personal and commercial sites. Each zip holds one folder, switchyard, with a README; the install steps below are condensed from it.

Astro

switchyard-astro.zip · 403 KB

Download zip

An Astro project: one component per section, design tokens in global.css, images in public/assets.

Needs Node 22.12 or newer.

Unzip switchyard-astro.zip; it holds one folder, switchyard.
In that folder run npm install (Node 22.12 or newer).
Run npm run dev and open http://localhost:4321.
Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
Run npm run build; the static site is written to dist/.

What is where

src/pages/index.astro: the page head and the sections in order.
src/components: one file per section (9 in all), each with its markup, styles and script.
src/styles/global.css: design tokens (colors, type, spacing) and base styles.
public/assets: the images.
CLAUDE.md and AGENTS.md: notes that tell Claude Code or Codex how the project is organized.

Make it yours

Repeated items (cards, steps, questions) share the same markup: copy one to add another.
Remove a section by deleting its tag and its import in src/pages/index.astro.
Reuse a section elsewhere by copying its component file and global.css; a section depends on nothing else.
Set the title, meta description and JSON-LD block in src/pages/index.astro before publishing.
The header links scroll to sections of this page; "Bring us the mess" and the other calls to action scroll to the contact form.
The contact form validates, shows a thank-you message and sends nothing. Replace the submit handler in the script of the contact section with a request to your form service (its action is /contact).

HubSpot

switchyard-hubspot.zip · 1.3 MB

Download zip

A HubSpot CMS theme: one module per section, each with its own fields, plus Home and Page templates.

Needs a free HubSpot account and Node.js 20 or newer for the HubSpot CLI.

Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
Run hs account auth and paste a personal access key with Design Manager ticked.
Unzip switchyard-hubspot.zip, then from the folder that holds switchyard run hs cms upload switchyard switchyard.
In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Switchyard and click Set as active theme.
Choose the template Switchyard - Home.

Change the content

Each of the 9 sections is a module with its own fields, 105 in all. Click a section in the page editor and its fields open on the left, grouped by item.
A field left empty removes its element; an empty image field shows the template's own image.
Sections are rows: drag, clone or delete them, and add one back from the theme's modules.
Header and footer are global content: what you change there changes on every page.
The template Switchyard - Page has the same header and footer and an empty area for other modules.

What the fields do not cover

More items than the template has (a fourth plan, an extra question) needs an edit in modules/<name>.module/module.html and fields.json.
Icons and drawings are inline SVG in module.html; colors, fonts and spacing are variables at the top of css/styles.css.
No blog templates and no 404, password or search pages of its own: HubSpot uses its defaults.
HubSpot takes no WebP in a theme, so the images are PNG and JPEG. Fonts load from Google Fonts.

How it was checked

Uploaded with the HubSpot CLI and rendered through HubSpot's theme preview in Chromium: every file uploads without an error and the homepage matches the static version pixel for pixel at 1440px and 390px.
Not checked: the page editor itself, publishing a page, and browsers other than Chromium.

WordPress

switchyard-wordpress.zip · 990 KB

Download zip

A WordPress block theme: one block per section with its fields in the editor, plus page, post, blog and 404 templates.

Needs WordPress 6.6 or newer and PHP 7.4 or newer.

In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
Choose switchyard-wordpress.zip, then Install Now and Activate.
Open the site: the homepage shows the template, whatever Settings > Reading says.
Edit each section in Appearance > Editor > Templates > Front Page, in the Block tab on the right, then Save.

Change the content

Each of the 9 sections is a block with its own fields, 105 in all, listed in the Block tab and grouped by item. The page updates as you type.
Links: signup or /signup is a page of your site, #pricing jumps to a section, and full addresses, mailto: and tel: work as written.
A field left empty removes its element; clear every field of a card and the card goes.
Move sections with the arrows in the toolbar, or add one back from the block inserter under "Switchyard". The same blocks work on any page.

What the fields do not cover

More items than the template has needs an edit in sections/<name>.php (markup) and inc/sections.php (fields).
Icons are inline SVG; colors, fonts and spacing are variables at the top of css/styles.css.
The theme prints the page title; leave the meta description and structured data to an SEO plugin.
Functions and blocks are prefixed switchyard_ and switchyard/.

How it was checked

Installed from the zip in WordPress Playground on WordPress 7.1.3 with PHP 8.3 and on WordPress 6.6.10 with PHP 7.4: no PHP warnings, and the homepage matches the static version pixel for pixel at 1440px and 390px.
Not checked: a real hosting account, browsers other than Chromium, other plugins and multisite.

Framer

Framer version coming soon. It will be listed here next to the other three downloads.

The 9 sections of Switchyard

In page order. In HubSpot each one is a module and in WordPress a block, 105 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.

Header

Railfold wordmark with its folded-rail symbol, three anchor links and an outlined "Bring us the mess" button
11 fields · has its own script
Hero

Cream headline, wide model switchyard photo and a three-part strip with two statements and a lime button
8 fields
Connection

"Keep the speed. Strengthen the operation." with short copy beside a turnout and signal photo on ivory
5 fields
Operating layer

Four ruled columns: Understand, Coordinate, Deliver and Recover, each with a short line
12 fields
Standard

"Six conditions. One working operation." in a two-column ruled grid, closed by the agentic line
21 fields
Capability

Dispatch cabin photo over four numbered rows, customer experience to research, that expand with arrows
22 fields · has its own script
How we work

Green band with a hand setting model points beside "One process. Built to keep working." and three steps
9 fields
CTA

"The next connection is yours" with boxed first name, last name and work email fields and a lime button
11 fields · has its own script
Footer

Large Railfold wordmark and tagline, People. Intelligence. Operations. and a back-to-top link
6 fields

Design notes

The first screen is deep forest green. "AI moves fast. We build what holds." sits at the top left in large cream Inter at a light weight, and a wide overhead photo of a model switchyard, ivory rails with lime freight wagons, crosses the middle. A three-part strip closes the hero: two short statements split by a rule and a square lime "Bring us the mess" button.

The middle of the page is one long ivory field. The connection section pairs its copy with a turnout and signal photo, then four ruled steps, the six conditions in a two-column ruled grid and "Pass all six. Then call it agentic." follow. A dispatch cabin photo heads the four numbered capability rows. The page goes back to green for a photo of a hand setting the points beside three steps, the contact form with a lime button, and a footer with a back-to-top link.

The imagery is the unusual part: every photo comes from the same miniature railway world, with soft masked edges so each one melts into the green or ivory behind it. The wordmark uses a small folded-rail symbol drawn in SVG.

Shape and spacing

Square corners on buttons, inputs and panels, fine sage rules, 90% containers up to 1740px with 5% gutters, and layouts that stack below 900px.

Images

4 generated images as WebP (the overhead switchyard, a turnout with a green signal, a dispatch cabin with a lime wagon, a hand setting the points). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterAll text; headings at weight 450 with tight tracking for a light, calm grotesk look, body and labels at 400 to 600

Loaded from Google Fonts.

Colors

Forest #104735Hero, process, contact and footer backgrounds
Ivory #F5F3E7The long middle field and text on green
Deep teal ink #102E31Headings and body text on ivory
Lime #D6EF63Call-to-action buttons, step numbers on green, matching the lime wagons in the photos
Sage #91A69AThin rules between rows and columns

What works on the page

Below 1100px the navigation moves into a menu button that opens by click, touch or keyboard and closes with Escape or a link.
The four capability rows expand with their arrow buttons; the customer experience row holds the longest copy, the others reveal their client problem.
The contact form checks all three fields and the email format, then animates to a thank-you that says the demo has not sent your details.
A back-to-top link in the footer, smooth anchor scrolling, and no animation under reduced-motion settings.

Who Switchyard fits

An AI operations or automation firm that explains its work as routing and coordination, where the railway yard tells the story.

A company that wants warm, crafted photography instead of glowing networks or screenshots.

A firm in logistics, transport or field operations that wants a homepage with a clear physical metaphor.

Anyone who wants a green and ivory page that changes background between sections to give the story rhythm.

See the whole page as one image (1080 by 3209 pixels, 195 KB)

The full Switchyard homepage template from header to footer at 1440 pixels wide

Questions about Switchyard

Can I replace the model railway photos?

The four photos are WebP files in the assets folder: a 1800 by 600 hero and three 1000 by 667 images. CSS masks fade their edges into the green or ivory behind them, so images shot on a similar background blend best. They keep their aspect ratio at every width.

Do the capability rows open?

The four rows expand with their arrow buttons by click, touch or keyboard. The first row holds the longer customer experience copy; the other three reveal their client problem. With JavaScript off, all the expanded text stays readable.

How do I change the green and lime?

They are custom properties at the top of the stylesheet: forest, ivory, ink, lime and two rule colors. Change forest and lime and the hero, process band, contact area, footer and buttons follow.

What does the contact form do?

The form validates the three fields and the email format, then shows a thank-you message, and sends nothing. It keeps action="/contact" for your own form handler.

Is Railfold a real company?

Railfold, its folded-rail symbol and all copy are placeholders for an AI services firm. Replace the name, symbol and words with your own. Free to use and adapt for personal and commercial sites.