AI services homepage templateFree8 sections

Geological Folio:ice blue scientific engraving AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage drawn like a plate from an old geology book. A large engraved cutaway of mountains and folded rock sits under the headline, a yellow layer stands for the connection between fast AI and steady operations, and small line diagrams explain each kind of work.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 92 in HubSpot and WordPress
Typefaces: Inter
Image files: 2
Downloads: Astro 603 KB, HubSpot 2.0 MB, WordPress 1.6 MB
Look: Light background
Collections: AI services, Consulting, Tech
Framer: Coming soon

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

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

Download Geological Folio

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

Astro

geological-folio-astro.zip · 603 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 geological-folio-astro.zip; it holds one folder, geological-folio.
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

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

Change the content

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

geological-folio-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 geological-folio-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, 92 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 "Geological Folio". 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 geological_folio_ and geological-folio/.

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 Geological Folio

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

Header

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

"Fast intelligence. Solid operations." over the engraved cutaway, with intro, yellow button and a note on the left
8 fields
Connection

Three labeled layers beside a flat strata engraving, then Understand to Recover joined by yellow lines and nodes
15 fields
The Stratwell standard

Navy panel with the six conditions in ruled rows, yellow numbers and "Pass all six. Then call it agentic."
21 fields
Capability in the real world

Four kinds of work in a ruled two by two grid, each with its own navy line diagram and yellow nodes
10 fields
From process to operation

"Start with one process." and three yellow numbered circles on one line: choose, build, run it together
10 fields
CTA

"The next connection is yours." beside boxed first name, last name and work email fields and a yellow button
12 fields · has its own script
Footer

Stratwell wordmark, "The work beneath the work." and stratwell.example in one thin-ruled row
5 fields

Design notes

The first screen is pale ice blue with thin navy navigation and a centered, light, tightly spaced headline: "Fast intelligence. Solid operations." Beneath it a large engraved block of terrain bleeds off the right edge: snowy peaks on top, folded navy and white rock layers, one warm-yellow band and red seams near the bottom. A short intro, a square yellow button and a note sit in a narrow column on the left.

The connection section labels a flat, three-layer engraving (Your operation, Stratwell, AI) and links Understand, Coordinate, Deliver and Recover with yellow lines and small circular nodes. A full-width navy panel lists the six conditions in ruled rows with yellow numbers. Then a two by two grid of line diagrams covers the four kinds of work, a single horizontal route with three yellow numbered circles shows the process, and a two-column contact form closes over a thin-ruled footer.

The unusual part is the imagery: two engraved geology plates with paper grain, used once each instead of repeated. Everything else is drawn in SVG and CSS: converging paths for customer experience, a signal curve for retention, square nodes for process and a branching tree for research.

Shape and spacing

Square buttons and fields, fine navy rules at 50% opacity, containers at 91% of the page width (88% on phones) and steady 64, 48 and 40px spacing.

Images

2 generated engravings as WebP (the geological cutaway in the hero, the flat three-layer strata in the connection section). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterEverything: light, tightly tracked headlines, body copy, labels, navigation and buttons (weights 300 to 600)

Loaded from Google Fonts.

Colors

Ice blue #D3EFFAPage background and the type on the navy panel
Navy #102A50Text, engraving lines, diagram strokes and the standard panel
Yellow #F7DF60Buttons, connector lines, nodes, numbered circles and condition numbers
Vermilion #F06943Small accents such as the red node on the signal curve

What works on the page

Header links scroll to sections on the same page; on phones a Menu button opens and closes the links, including with Escape.
The contact form uses required fields and email validation, then an animated thank-you replaces it and says it is a demo that sends and stores nothing.
The diagrams, the six conditions and the process route are static, with no expanding rows or selectable steps.
Transitions run at 320ms and are turned off under reduced-motion settings.

Who Geological Folio fits

An AI or data consultancy that wants to look calm and scientific, with drawings instead of stock photos.

A firm that explains its work through layers and systems, where the strata picture does that job at a glance.

Teams that want simple line diagrams for each service already drawn in SVG and easy to recolor.

Anyone who wants a single-font page: Inter alone handles every heading and line of text.

See the whole page as one image (1080 by 3288 pixels, 224 KB)

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

Questions about Geological Folio

Are the geology pictures images or code?

The cutaway and the flat strata are two WebP engravings in the assets folder. The four capability diagrams, the yellow connectors, the nodes and the process route are inline SVG and CSS, so they scale cleanly and change color with the stylesheet.

Can I swap the engraving for my own artwork?

Replace geological-cutaway.webp with a picture of about 1440 by 960 pixels. The hero shows it whole with object-fit contain, so it never gets cropped or stretched; the strata image is cropped top and bottom inside a wide window.

How do I change the ice blue, navy and yellow?

All four colors are custom properties at the top of the stylesheet. The SVG diagrams and rules follow them, but the two engravings have their colors baked in, so they need replacing if you change the palette a lot.

Which fonts does Geological Folio use?

Only Inter, loaded from Google Fonts in weights 300 to 600, with Arial as the fallback. The light 300 weight gives the large headlines their thin, technical look.

Is Stratwell a real company?

Stratwell, stratwell.example and the copy are placeholders to replace with your own. The form sends nothing until you connect it. Free to use and adapt for personal and commercial sites.