AI services homepage templateFree9 sections

Backstage:theatrical oxblood AI services homepage template for Astro, HubSpot and WordPress

A homepage set in a theater, seen from the wings: fly ropes, a red velvet curtain and one technician at a control station behind an empty stage. The idea is the work behind what everyone sees, and three theater photographs, condensed headings and thin amber cue lines carry it down the page.

Open live demo Downloads

Sections: 9, 2 with their own script
Editable fields: 91 in HubSpot and WordPress
Typefaces: Antonio, Inter
Image files: 3
Downloads: Astro 567 KB, HubSpot 2.1 MB, WordPress 1.5 MB
Look: Dark and light sections
Collections: AI services, Agency
Framer: Coming soon

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

Backstage 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: Wingside, a fictional company that builds and runs AI systems for other businesses.

Download Backstage

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, backstage, with a README; the install steps below are condensed from it.

Astro

backstage-astro.zip · 567 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 backstage-astro.zip; it holds one folder, backstage.
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

backstage-hubspot.zip · 2.1 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 backstage-hubspot.zip, then from the folder that holds backstage run hs cms upload backstage backstage.
In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Backstage and click Set as active theme.
Choose the template Backstage - Home.

Change the content

Each of the 9 sections is a module with its own fields, 91 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 Backstage - 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

backstage-wordpress.zip · 1.5 MB

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 backstage-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, 91 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 "Backstage". 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 backstage_ and backstage/.

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 Backstage

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

Header

Wingside. wordmark, three anchor links and an outlined "Bring us the mess" button over the hero photo
11 fields · has its own script
Hero

Full-bleed theater wings photo, condensed ivory headline, intro, ivory button and the speed and strength line
8 fields
Connection

"Possibility moves. Your business holds." in two labeled columns, then "The connection is the capability."
8 fields
Operating layer

Lighting desk photo beside "Keep the speed" copy, then four amber cue squares from Understand to Recover
9 fields
Possibilities

Four quoted client problems in static ruled rows, each paired with its category in oxblood
11 fields
How we work

Shallow edge-to-edge auditorium photo with "One process. Built to keep working." across the bottom
3 fields
Standard

Oxblood panel with the six conditions in a three-by-two ruled grid and the agentic line
22 fields
CTA

"The next connection is yours" with boxed fields, an oxblood submit bar and People. Intelligence. Operations.
13 fields · has its own script
Footer

Soot-black strip with the Wingside. wordmark, tagline, a copyright line and the domain
6 fields

Design notes

The first screen is a full-bleed photo from the wings of a theater: dark fly tower and oxblood curtain at the center, a small technician and a warm, gilded auditorium to the right. "AI moves fast. We build what holds." is set very large in condensed ivory Antonio in the dark upper left, with the intro and an ivory button below it.

The middle is a continuous ivory field in oxblood type. The connection section sets "Possibility moves. Your business holds." over two labeled columns, then a photo of hands at a lighting desk sits beside "Keep the speed. Strengthen the operation." with four amber cue squares on a line. Four static problem rows follow, then a shallow edge-to-edge auditorium photo with "One process. Built to keep working." An oxblood panel holds the six conditions, and the page ends with the contact form and a soot-black footer.

The cue lines are the unusual part: fine amber vertical and horizontal lines, like marks on a stage manager's script, tie the sections together on the right edge and under the four steps. Each section is numbered like a program, from 01 The connection to 04 The next connection.

Shape and spacing

Square corners on photos, buttons and fields, fine oxblood rules at 43% and ivory rules at 50% opacity, and a shared inset of about 5.7% of the width on desktop.

Images

3 generated images as WebP (the theater wings hero, hands at a lighting desk, an empty auditorium from the stage). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

AntonioCondensed editorial headings, step names and condition names (weight 400)
InterBody copy, navigation, small labels, buttons and the Wingside wordmark (weights 400 to 600)

Loaded from Google Fonts.

Colors

Ivory #F8F5EBThe middle field and contact area, and text on photos and the oxblood panel
Oxblood #590914Headings and text on ivory, the benchmark panel and the submit button
Soot #0E100FThe footer and the dark header gradient over the hero
Amber #D18728Cue lines and the four squares on the step line

What works on the page

The header sits over the hero on a fading dark gradient; on tablets and phones it becomes a menu button that opens by touch, Enter or Space and closes with Escape.
The four cues and the problem rows are static labels, so all text is visible at once.
The contact form uses native required and email checks, then animates to a thank-you that says no details have been sent, and moves focus to it.
Smooth anchor scrolling and transitions turn off under reduced-motion settings.

Who Backstage fits

An AI services firm that wants a dramatic, cinematic first screen that people remember.

A firm whose pitch is the hidden work behind a smooth result, where the backstage photos make the point.

A creative or events-minded agency that wants warm photography and condensed headlines over a tech look.

Anyone who wants a dark opening, a light middle and a dark close, with a deep red panel for the key list.

See the whole page as one image (1080 by 3222 pixels, 213 KB)

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

Questions about Backstage

Can I change the theater photos?

The three photos are WebP files: backstage.webp at 1672 by 941, lighting-desk.webp at 1440 by 810 and auditorium.webp at 2048 by 683. All use object-fit: cover, so any photo with a dark, calm area at the upper left works for the hero headline.

Which fonts does Backstage use?

Antonio at weight 400 for the condensed headings and Inter at 400 to 600 for body text, navigation and the wordmark, both from Google Fonts. Local system fonts are set as fallbacks.

How do I change the oxblood and amber?

The four colors are custom properties at the top of the stylesheet: ivory, oxblood, soot and amber. Change oxblood and the headings, the benchmark panel and the submit button follow.

Does the form send anything?

The form validates and shows a thank-you message, and sends nothing; the message says it is a demo. It keeps action="/contact" for your own form handler.

Is Wingside a real company?

Wingside, wingside.example and every line of copy are placeholders. Replace them with your own name and words. Free to use and adapt for personal and commercial sites.