AI services homepage templateFree8 sections

Human Handoff:tangerine campaign editorial AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage styled like a print campaign. Two monochrome hands pass an ivory block across a tangerine field under a giant italic headline, and the process diagram is a photo of four ivory blocks with live labels and arrows.

Open live demo Downloads

Sections: 8, 3 with their own script
Editable fields: 116 in HubSpot and WordPress
Typefaces: Bodoni Moda, DM Sans
Image files: 8
Downloads: Astro 221 KB, HubSpot 836 KB, WordPress 551 KB
Look: Light background
Collections: AI services, Agency, Business
Framer: Coming soon

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

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

Download Human Handoff

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

Astro

human-handoff-astro.zip · 221 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 human-handoff-astro.zip; it holds one folder, human-handoff.
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

human-handoff-hubspot.zip · 836 KB

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

Change the content

Each of the 8 sections is a module with its own fields, 116 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 Human Handoff - 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

human-handoff-wordpress.zip · 551 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 human-handoff-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, 116 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 "Human Handoff". 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 human_handoff_ and human-handoff/.

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 Human Handoff

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

Header

Black Relayhand wordmark on tangerine, three section links and an outlined square "Bring us the mess" button
13 fields · has its own script
Hero

Giant italic "AI in motion. Business in hand.", the two-hand handoff photo and a cream band with intro and black button
7 fields
The connection

"AI moves fast" versus "Your operation stays steady" and the photographed four-block Understand to Recover diagram
13 fields
Possibilities

Bordered accordion of four client problems; the first open with copy and a notebook photo, the rest behind plus controls
27 fields · has its own script
Our benchmark

"Pass all six. Then call it agentic." with a huge orange italic 6 beside a ruled two-column grid of the six conditions
22 fields
Built with your team

Orange band with a photo of hands writing in a notebook, "Built with your team." and three numbered steps
13 fields
CTA

Cream two-column band: "The next connection is yours." beside boxed name and work email fields and a black button
13 fields · has its own script
Footer

Orange band with the wordmark, italic tagline, relayhand.example, "People. Intelligence. Operations." and Back to top
8 fields

Design notes

The first screen is a flat tangerine field with a black Relayhand wordmark, a centered eyebrow and the two-line italic headline "AI in motion. Business in hand." set at about 156px. Below it a wide black and white photo shows a blurred hand on the left passing an ivory block to a steady hand on the right, and a cream band underneath holds the intro and a solid black "Bring us the mess" button.

The page then runs on warm cream with fine gray rules. The connection section sets "AI moves fast" against "Your operation stays steady" in two ruled columns above an orange strip of four ivory blocks. A bordered accordion lists four client problems, the benchmark pairs a huge orange italic 6 with a ruled grid of the six conditions, and a full-width orange band shows hands writing in a notebook beside three steps, before the cream contact form and an orange footer.

The photography is all hands and paper, with no faces, screens or machines. The process diagram is a real photograph of blank ivory blocks, with the words Understand, Coordinate, Deliver and Recover and the arrows added in HTML; on phones it rearranges into a two by two grid of cropped tiles joined by an SVG connector.

Shape and spacing

Square corners everywhere, outlined and solid black rectangular buttons, fine horizontal and vertical rules, gutters of 22 to 82px and fairly tight section spacing.

Images

8 generated photographs as WebP (the hero handoff, the four-block diagram, four single-block crops for the phone diagram, an open notebook with pen, two people's hands working in a notebook). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

Bodoni ModaItalic display headline, section headings, the large 6 and the footer tagline (italic 500 and 600)
DM SansBody copy, navigation, labels, buttons, form and the plain Relayhand wordmark (400 to 600)

Loaded from Google Fonts.

Colors

Tangerine #FD783AHero field, diagram strip, team band, the large 6 and the footer
Warm cream #FAF5ECMain page background and the hero action band
Ink #171714Headlines, text and the solid black buttons
Rule gray #9B9E96Fine rules and accordion borders

What works on the page

Header links jump to sections of the same page; below 850px a Menu button opens the links and closes with Escape. The footer has a Back to top link.
In What becomes possible the first problem starts open with the notebook photo; the other three open and close with plus controls by click, touch or keyboard.
The contact form uses required fields and email validation, then an animated thank-you replaces it and says no details have been sent.
Transitions run at 320ms and are turned off under reduced-motion settings.

Who Human Handoff fits

An AI agency that wants a bold, campaign-like page with one strong color instead of the usual dark tech look.

A firm whose message is about people staying in control, since every photo shows human hands at work.

A brand with orange or a warm accent in its identity, as the tangerine carries the hero, a mid-page band and the footer.

Anyone who wants a simple process diagram that still feels physical, with labels kept as editable text.

See the whole page as one image (1080 by 3379 pixels, 179 KB)

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

Questions about Human Handoff

Can I change the words on the four blocks in the diagram?

The labels and arrows are HTML laid over a photo of blank blocks, so you edit the words like any other text. The phone version uses four cropped tiles of the same photo with the labels added the same way.

How many images will I need to replace?

Eight WebP files sit in the assets folder, but four of them are crops of the block photo used only on phones. In practice you choose four pictures: the hero handoff, the blocks, the notebook and the team photo.

Can I use a color other than tangerine?

The orange is a custom property in the stylesheet, so the bands, the large 6 and the footer change with one hex value. The block photo has orange baked into its background, so swap that image too if you move far from orange.

Which fonts does Human Handoff use?

Bodoni Moda italic for the headings and DM Sans for text and controls, both from Google Fonts with local serif and sans-serif fallbacks.

Does the contact form send anything?

The form is a local demo: it checks the fields, shows a thank-you and states that no details were sent. Its action points to /contact, so connect your own form service there before launch.