AI services homepage templateFree8 sections

Continuity Splice:warm ivory cinematic serif AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage that uses a strip of 35mm film as its picture of continuity. A backlit amber film loop, its frames showing people at work and one silver splice, sweeps through the hero, and a close-up of that splice later labels the join between AI and the business. The rest is calm and editorial: ivory, chocolate serif type and one powder-blue panel.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 98 in HubSpot and WordPress
Typefaces: STIX Two Text, DM Sans
Image files: 4
Downloads: Astro 295 KB, HubSpot 1.4 MB, WordPress 1.1 MB
Look: Light background
Collections: AI services, Consulting, Business
Framer: Coming soon

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

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

Download Continuity Splice

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

Astro

continuity-splice-astro.zip · 295 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 continuity-splice-astro.zip; it holds one folder, continuity-splice.
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 (8 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

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

Change the content

Each of the 8 sections is a module with its own fields, 98 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 Continuity Splice - 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

continuity-splice-wordpress.zip · 1.1 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 continuity-splice-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 8 sections is a block with its own fields, 98 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 "Continuity Splice". 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 continuity_splice_ and continuity-splice/.

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 8 sections of Continuity Splice

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

Header

Serif Splicewell wordmark, three section links and an outlined "Bring us the mess" button above a thin rule
11 fields · has its own script
Hero

"The work moves. The context stays." with intro, blue button and the amber film loop of workplace frames
9 fields
Connection

A film strip with an AI and BUSINESS splice between two columns, then the four-step serif process line
16 fields
Standard

"Six conditions. One working operation." in a ruled 3 by 2 grid on a full-width powder-blue panel
23 fields
Possibilities

Two square sepia work photos beside four ruled rows pairing a business area with an outcome
15 fields
How we work

"One process. A stronger operation." with three steps joined by blue arrows
8 fields
CTA

"The next connection is yours." beside stacked fields for first name, last name and work email
10 fields · has its own script
Footer

Splicewell wordmark and tagline on the left, "People. Intelligence. Operations." and the domain on the right
6 fields

Design notes

The first screen is warm ivory with a large backlit amber film strip looping from the lower left up the right side. Its frames show people at work in sepia, and a silver splice clip joins two of them. The headline "The work moves. The context stays." sits at the left in dark chocolate STIX Two Text, with a short intro and a powder-blue "Bring us the mess" button.

The connection section places a short strip of film between two columns, AI moves fast and Your business holds, with the words AI and BUSINESS set in HTML inside its frames and a four-verb line in serif below. The six conditions fill a full-width powder-blue panel in a ruled 3 by 2 grid. Two square sepia photos sit beside four ruled outcome rows, then come three steps linked by blue arrows, a contact form with stacked fields and a compact footer.

The film carries the whole idea: frames are moments of work, and the splice is the point where new intelligence joins the existing operation without losing what came before. Because the splice labels are real text over a plain image, you can rename them without editing the picture. A soft ivory fade keeps the hero copy readable over the photo.

Shape and spacing

Square corners on buttons, fields and photos, with thin warm gray dividers. Containers are 90% wide up to 1720px, with about 5% side margins on desktop.

Images

4 generated images as WebP (the amber film loop, the silver splice strip, a customer service agent with a headset, three warehouse colleagues with a tablet). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

STIX Two TextThe wordmark, headings, condition names and the four process verbs
DM SansBody copy, navigation, labels, buttons and form fields

Loaded from Google Fonts.

Colors

Ivory #F5EFE6The main page background
Chocolate #2D1B13Headings and the wordmark
Body ink #34312BBody text
Action blue #B1D6EBButtons
Panel blue #CEE3F1The standard section background
Label blue #397B9CSection labels and the process arrows

What works on the page

Header links jump to sections on the page; on phones a Menu button opens them by touch or Enter and closes with Escape.
The form checks required fields and the email format, then animates to a thank-you that says the demo has not sent your details.
Conditions, outcome rows and steps are static as drawn, with no accordions, and everything stays readable without JavaScript.
The footer offers a way back to the top, and motion turns off under reduced-motion settings.

Who Continuity Splice fits

An AI consultancy that wants a warm, human page with people in it, instead of a dark tech look.

A firm whose message is about keeping context and history as systems change, which the film and splice show directly.

A team that likes editorial serif headings and a soft, light palette with one calm accent color.

A services company of almost any kind: swap the film frames and photos and the layout works as a classic homepage.

See the whole page as one image (1080 by 3233 pixels, 177 KB)

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

Questions about Continuity Splice

What is the image in the Continuity Splice hero?

It is a generated photograph of a backlit amber film loop whose frames show people at work, with a silver splice clip. It is a WebP file in the assets folder. You can replace it with your own image of the same proportions, or regenerate the frames with scenes from your business.

Can I change the AI and BUSINESS labels on the splice?

Those words are HTML text laid over a plain splice image, so you edit them like any other copy. The image itself has no text in it.

Are the people in the photos real?

They are generated images, and the Splicewell name, domain and copy are placeholders too. Replace them with your own team or customers when you adapt the page.

Which fonts does it use?

STIX Two Text for the serif headings and wordmark, and DM Sans for body copy and controls, both from Google Fonts with system fallbacks.

Does the contact form send anything?

The form validates the fields and shows a thank-you that says the demo has not sent your details. Point it at your own form service or the HubSpot or WordPress form tools to receive messages. Free to use and adapt for personal and commercial sites.