AI services homepage templateFree8 sections

Breakwater:petrol coastal editorial AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage built on one photograph: a curved concrete breakwater holding back white surf from still harbor water. The page then turns quiet and editorial, with large Caslon headings, fine rules and coral accents on cream and deep petrol.

Open live demo Downloads

Sections: 8, 3 with their own script
Editable fields: 94 in HubSpot and WordPress
Typefaces: Libre Caslon Text, DM Sans
Image files: 2
Downloads: Astro 382 KB, HubSpot 1.9 MB, WordPress 1.6 MB
Look: Dark and light sections
Collections: AI services, Consulting, Business
Framer: Coming soon

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

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

Download Breakwater

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

Astro

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

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

Change the content

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

breakwater-wordpress.zip · 1.6 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 breakwater-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, 94 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 "Breakwater". 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 breakwater_ and breakwater/.

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 Breakwater

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

Header

White Harbrook wordmark, three section links and an outlined "Bring us the mess" button over the photo
11 fields · has its own script
Hero

Aerial breakwater photo, eyebrow, "AI moves fast. We build what holds.", intro, coral button and a closing line
8 fields
Connection

"Keep the speed. Strengthen the operation." with Understand, Coordinate, Deliver, Recover linked by coral arrows
8 fields
Our benchmark

The six conditions in a ruled three by two grid with coral numbers and "Pass all six. Then call it agentic."
21 fields
Possibilities

Petrol band with four numbered problem areas; the first open beside the dock workers photo, the rest as accordions
24 fields · has its own script
Built for continuity

"The work moves. The context stays." and three static steps split by vertical dividers
6 fields
CTA

"The next connection is yours." with first name, last name and work email fields on one underlined row
10 fields · has its own script
Footer

Compact petrol band with the wordmark, tagline, harbrook.example and "People. Intelligence. Operations."
6 fields

Design notes

The first screen is one full-bleed aerial photograph: a concrete breakwater curves down the right side, with foaming surf on one side and dark, still water on the other. The three-line headline "AI moves fast. We build what holds." sits large and white in the calm water on the left, above a coral "Bring us the mess" pill button.

Below the photo the page changes to cream paper. The connection section pairs a serif heading with four process words joined by coral arrows (Understand, Coordinate, Deliver, Recover). The six conditions sit in a three by two grid with thin interior rules and coral numbers, then a deep petrol band holds the four possibilities, followed by three continuity steps, the contact form and a compact petrol footer.

The breakwater picture carries the whole story: motion on one side, a business holding steady on the other. The only other image is a harbor photo of two dock workers handling a mooring rope, placed beside the first possibility. Everything else is type, rules and arrows.

Shape and spacing

Pill buttons (100px radius), fine rules between rows and columns, underline-only form fields and side gutters of about 5.4% of the page width.

Images

2 generated photographs as WebP (the aerial breakwater, two dock workers with a mooring rope). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

Libre Caslon TextHeadline, section headings, condition names and process words (editorial serif)
DM SansBody copy, navigation, labels, buttons and the text-only Harbrook wordmark (weights 400 to 600)

Loaded from Google Fonts.

Colors

Petrol #00313DPossibilities band, footer and the gradient behind the header
Ink #073340Headings and body text on cream
Paper #EEEEE5Main page background
Coral #FF8669Buttons, arrows and section numbers
Coral text #B65039Accessible coral for small text on cream
Rule gray #8C9E9DFine dividing rules

What works on the page

Header links jump to sections on the same page; below 800px they fold into a Menu button that opens under the header and closes with Escape.
In What becomes possible the first row starts open and the other three open and close as accordions by click, touch or keyboard.
The contact form checks the required fields and the email format, then fades to a thank-you message and says the template has not sent your details.
Transitions run at 320ms and switch off under reduced-motion settings.

Who Breakwater fits

An AI consultancy that wants one strong photograph up front and a calm, text-led page after it.

A firm that sells reliability and steady operations, where the breakwater picture says the message before anyone reads.

A team with only two images to replace: one hero landscape and one people photo.

Anyone who likes classic serif headings with a warmer cream and coral palette instead of a dark tech look.

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

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

Questions about Breakwater

Can I replace the breakwater photo with my own image?

Swap breakwater.webp in the assets folder for a landscape image of about 1536 by 1024 pixels. The headline sits over the left side, so pick a picture with calm, dark space there; a petrol gradient at the top keeps the navigation readable.

What happens when someone submits the contact form?

The form checks the three fields and the email format, then fades to "Thank you. The next connection starts here." and a note that the template has not sent the details. Connect your own form service before going live.

Which fonts does Breakwater load?

Libre Caslon Text for headings and DM Sans for everything else, both from Google Fonts. Serif and sans-serif fallbacks take over if Google Fonts does not load.

How do I change the petrol and coral colors?

They are custom properties at the top of the stylesheet, with a separate darker coral for small text so it stays readable on cream. Change the hex values there and the bands, buttons, arrows and numbers follow.

Is Harbrook a real company?

Harbrook, harbrook.example and all the copy are placeholders for your own name and words. Free to use and adapt for personal and commercial sites.