AI services homepage templateFree8 sections

Harnessed Wind:bold burgundy editorial AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage about harnessing wind. A vermilion parafoil fills the sky on the first screen, held by fine lines to a control bar, and the page follows the lines down to a rigging junction and a hand on the grip, in bold burgundy serif on warm ivory.

Open live demo Downloads

Sections: 8, 3 with their own script
Editable fields: 105 in HubSpot and WordPress
Typefaces: DM Serif Display, DM Sans
Image files: 4
Downloads: Astro 221 KB, HubSpot 1.3 MB, WordPress 1.0 MB
Look: Light background
Collections: AI services, Agency, One page
Framer: Coming soon

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

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

Download Harnessed Wind

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

Astro

harnessed-wind-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 harnessed-wind-astro.zip; it holds one folder, harnessed-wind.
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

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

Change the content

Each of the 8 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 Harnessed Wind - 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

harnessed-wind-wordpress.zip · 1.0 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 harnessed-wind-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, 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 "Harnessed Wind". 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 harnessed_wind_ and harnessed-wind/.

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 Harnessed Wind

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

Sailward serif wordmark, three small anchor links and an outlined "Bring us the mess" button on the pale sky
11 fields · has its own script
Hero

Red parafoil kite photograph with "Let possibility fly. Keep the work grounded.", intro and a burgundy button
7 fields
Contrast and connection

"Fast by nature." and "Steady by design." with the connection heading beside a rigging junction photo
13 fields
Standard

Burgundy band with "Six conditions. One working operation." in two columns with large vermilion numbers
21 fields
Possibilities

Four accordion rows pairing a serif problem with its category; the first opens with a small kite photo
20 fields · has its own script
How we work and examples

"Built around your operation." with three steps and three placeholder examples beside a hand on a grip
16 fields
Contact

Sea-glass panel with "The next connection is yours." and an underlined first name, last name and email form
11 fields · has its own script
Footer

Compact burgundy footer with the wordmark, tagline, "People. Intelligence. Operations." and the domain
6 fields

Design notes

The first screen is a pale sea-glass sky with a big red parafoil kite on the right, its fine lines running down to a control bar. The heavy burgundy serif headline "Let possibility fly. Keep the work grounded." fills the left half, with a short intro and a burgundy button.

The page continues on warm ivory. Two short contrast columns and "The connection is the capability." sit beside a close-up of a black rigging junction with red cords, above four ruled verbs. A burgundy band holds the six conditions with large vermilion numbers, then four accordion rows, three steps and three example companies next to a hand gripping a control bar, a sea-glass contact panel and a burgundy footer.

The photographs follow one line from sky to hand: the wing, the junction, the grip, plus a small kite inside the first open accordion row. Fine red curves trail across the edge of the benchmark band.

Shape and spacing

3px button corners, fine rules between rows, 5.8% side gutters and spacing from 28 to 58px; the contact form uses underlined fields.

Images

4 generated photographs as WebP (the red parafoil hero, a rigging junction, a hand on a control grip, a small kite shown in the first open accordion row). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

DM Serif DisplayWordmark, headlines, section headings, problem statements and the large numbers
DM SansBody copy, navigation, category labels, buttons and form fields

Loaded from Google Fonts.

Colors

Burgundy #510719Headings, buttons, the benchmark band and the footer
Warm ivory #F5F1E5Page background and text on burgundy
Sea-glass #BFE5E5The sky tone and the contact panel
Vermilion #F0442CNumbers, plus markers and the red curves

What works on the page

On phones an expandable menu opens by touch or keyboard and closes with Escape.
The four problem rows are accordions with a red plus, all closed at first; the first opens to an Understand, Connect, Resolve sequence and the small kite photo.
The contact form requires all three fields, checks the email and then shows a thank-you saying the details were not sent.
Transitions run at 320ms and are disabled under reduced-motion settings; the content stays readable without JavaScript.

Who Harnessed Wind fits

An AI agency that wants a bright, optimistic page with big confident type and strong color.

A firm whose message is control over fast change, since the kite and the grip say it without words.

A business with a red, burgundy or warm palette that wants an outdoor, open-air feel instead of an office scene.

A team with a few client examples and a short method to show, already laid out beside the grip photo.

See the whole page as one image (1080 by 3172 pixels, 178 KB)

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

Questions about Harnessed Wind

Can I replace the kite photographs?

Save your own images in the assets folder as hero.webp, junction.webp, grip.webp and small-kite.webp. The hero needs open sky on the left for the headline; the other three sit in their own space on phones.

What opens in the possibility rows?

Each of the four rows opens with a click, a tap or the keyboard. The first holds the longest copy, a three-step sequence and the small kite photo; the other three hold a short outcome line.

How do I change the burgundy and vermilion?

The four colors are custom properties at the top of the stylesheet. The kite photos are red, so keep a warm accent or replace the images if you move to a cool palette.

Which fonts does Harnessed Wind load?

DM Serif Display for the bold headings and DM Sans for text, both free from Google Fonts with system fallbacks.

Does the form send messages?

The form validates the fields and shows a thank-you, but it sends and stores nothing. Connect a form service to the /contact action to receive enquiries.