AI services homepage templateFree8 sections

Pit Stop:motorsport navy editorial AI services homepage template for Astro, HubSpot and WordPress

A motorsport homepage: the hero is an overhead photo of a silver race car and a crew in acid yellow suits, with navy serif type on the empty concrete beside it. A thin yellow lane stripe runs down the right edge of every section, tying three pit lane photos into one track.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 103 in HubSpot and WordPress
Typefaces: Libre Caslon Display, DM Sans
Image files: 3
Downloads: Astro 474 KB, HubSpot 2.1 MB, WordPress 1.7 MB
Look: Light background
Collections: AI services, Consulting, Agency
Framer: Coming soon

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

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

Download Pit Stop

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

Astro

pit-stop-astro.zip · 474 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 pit-stop-astro.zip; it holds one folder, pit-stop.
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

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

Change the content

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

pit-stop-wordpress.zip · 1.7 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 pit-stop-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, 103 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 "Pit Stop". 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 pit_stop_ and pit-stop/.

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 Pit Stop

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

Header

Quillon wordmark, The connection, What becomes possible, Our benchmark and an outlined Bring us the mess button
11 fields · has its own script
Hero

Overhead pit stop photo with "Speed needs a steady operation.", the intro, a navy button and a small note
8 fields
Connection

Gloved hands photo beside "The connection is the capability." and an Intelligence, Systems, People diagram
8 fields
Possibilities

Four ruled problem rows with yellow squares and arrows, such as "We see the risk too late." and its answer
11 fields
Standard

Navy panel: "Six conditions. One working operation." in two columns with yellow numbers and a yellow closing line
22 fields
Continuity

"The work moves. The context stays.", four steps, the departing car panorama and four placeholder companies
17 fields
CTA

"The next connection is yours." at left and a first name, last name and work email form at right
12 fields · has its own script
Footer

Navy footer with the Quillon wordmark, serif tagline, four links, copyright and Back to top
14 fields

Design notes

The first screen is a full-bleed overhead photo of a pit stop: a silver open-wheel car on the right and five crew in acid yellow suits, each doing a different job. The empty concrete on the left holds the navy serif headline "Speed needs a steady operation.", a short intro, a navy rectangular button and a small note.

The page continues on pale concrete gray. A close-up of gloved hands with a metal tool and a radio sits beside the connection heading, over an Intelligence, Systems, People diagram with arrows. Four problem rows with yellow squares lead to a navy benchmark panel with yellow numbers, then a continuity section with four steps above a wide photo of the car leaving the garage and four placeholder companies below. The form and a navy footer close the page.

The yellow lane stripe on the right edge is drawn separately in each section, so it reads as one line from top to bottom. The three photos follow the same race: the stop, the tools, the departure. Libre Caslon Display gives the headlines a refined, magazine feel against the sporty imagery.

Shape and spacing

Square corners, rectangular navy buttons, thin rules between rows, desktop gutters of 4.85% and 6% on a phone.

Images

3 generated images as WebP (the overhead pit stop, gloved hands with a tool and radio, the car leaving the garage). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

Libre Caslon DisplayHeadlines, section headings and the footer tagline
DM SansBody copy, navigation, buttons, labels and the Quillon wordmark (weights 400 to 600)

Loaded from Google Fonts.

Colors

Navy #09264BHeadings, text, buttons, the benchmark panel and the footer
Concrete #E4E5E6Main page background
Acid yellow #F4ED45The lane stripe, row squares, benchmark numbers and closing line
Off-white #F6F6F2Text on navy and light surfaces
Rule blue #8290A1Thin divider lines

What works on the page

On phones a menu button opens the navigation below the header, and Escape closes it.
Header links and the hero button jump to their sections; Back to top sits in the footer.
The form checks required fields and the email format, then shows an animated thank-you saying no details were sent.
Transitions run at 320ms and turn off under reduced-motion settings; the page stays readable with JavaScript off.

Who Pit Stop fits

An AI operations firm that wants a strong sports metaphor for speed backed by a steady team.

A company that values teamwork and precision and wants real-world photography with people in it.

A brand with navy and a bright accent color, since the yellow stripe and squares swap easily.

A consultancy that wants serif headlines with an energetic photo instead of an abstract illustration.

See the whole page as one image (1080 by 3262 pixels, 204 KB)

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

Questions about Pit Stop

How does the yellow lane stripe work?

Each section draws its own stripe on the right edge with CSS, lined up so they read as one continuous line. Change the acid yellow custom property (#F4ED45) and the stripe, squares and numbers all change together.

Can I replace the race car photos?

The three photos are WebP files: the hero at 1536 by 1024, the tool close-up at 1280 by 768 and the panorama at 1920 by 640. Keep open space on the left of the hero image, because the headline sits there on desktop; on phones the copy stacks above the photo.

Which fonts does Pit Stop load?

Libre Caslon Display for headings and DM Sans for text, both from Google Fonts. Local serif and sans-serif fallbacks are set in case the fonts do not load.

Does the contact form send anything?

The form validates the required fields and email, then shows a thank-you that says no details were sent. Hook it up to HubSpot forms, a WordPress form plugin or a /contact endpoint on your host.

Are Quillon, Redgate Motors and the other names real?

Every company name, the copy and the domain are fictional placeholders. Free to use and adapt for personal and commercial sites.