Listening Infrastructure
A candy-pink page: a white radio telescope dish sweeps in from the lower left under indigo serif type and acid-yellow buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Optical Connection:dark cinematic optical AI services homepage template for Astro, HubSpot and WordPress
An AI services homepage built on dark optical photography. A clear glass slab gathers peach light into parallel beams across the first screen, and the light returns through the page as rays, a glowing hand and a thin beam under the form.
- Sections
- 9, 3 with their own script
- Editable fields
- 104 in HubSpot and WordPress
- Typefaces
- Inter
- Image files
- 4
- Downloads
- Astro 285 KB, HubSpot 1.4 MB, WordPress 1.1 MB
- Look
- Dark background
- Collections
- AI services, Tech
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Lumentry, a fictional company that builds and runs AI systems for other businesses.
Download Optical Connection
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, optical-connection, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip optical-connection-astro.zip; it holds one folder, optical-connection.
- 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/.
More from the Astro README
What is where
- src/pages/index.astro: the page head and the sections in order.
- src/components: one file per section (9 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).
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 optical-connection-hubspot.zip, then from the folder that holds optical-connection run hs cms upload optical-connection optical-connection.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Optical Connection and click Set as active theme.
- Choose the template Optical Connection - Home.
More from the HubSpot README
Change the content
- Each of the 9 sections is a module with its own fields, 104 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 Optical Connection - 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.
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 optical-connection-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.
More from the WordPress README
Change the content
- Each of the 9 sections is a block with its own fields, 104 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 "Optical Connection". 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 optical_connection_ and optical-connection/.
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 9 sections of Optical Connection
In page order. In HubSpot each one is a module and in WordPress a block, 104 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Lumentry text wordmark over a thin ivory rule, three anchor links and an outlined "Bring us the mess" button
11 fields · has its own script -
Hero
Glass slab photograph with "Give intelligence a working direction.", intro, peach button and a two-line closing note
8 fields -
Contrast and connection
"AI moves fast." with two numbered columns, "The connection is the capability." and four verbs on a rule
13 fields -
Standard
Ivory band with "Six conditions. One working operation." and six conditions joined by peach SVG curves
21 fields -
Possibilities
Four numbered accordion rows; the first opens to "Keep the relationship." and a three-step line diagram
18 fields · has its own script -
How we work and continuity
"Built with your team. Operated for continuity." with three numbered steps over a glowing hand photo
7 fields -
Examples
Three placeholder examples in ruled columns: Sablewood, Corvin Labs and "The lab"
6 fields -
Contact
Deep cherry contact area with "The next connection is yours." and a form with ivory-outlined dark fields
14 fields · has its own script -
Footer
Oversized Lumentry wordmark, the tagline, a fine divider and small labels with the placeholder domain
6 fields
Design notes
The first screen is a near-black photograph of a tall glass slab with warm peach light passing through it toward the lower right. The large ivory headline "Give intelligence a working direction." sits at upper right with a short paragraph, a pale peach button and a two-line closing note.
The page continues on dark grounds: the contrast and connection copy sit over light sweeping across a textured surface, with four verbs on a bottom rule. An ivory band breaks the dark for the six conditions, then four accordion rows return to near-black, followed by the steps over a photo of a hand touching a glowing junction, three example companies, the contact form on deep cherry and an oversized wordmark in the footer.
The benchmark is the unusual part: six peach curves, drawn in SVG, run in from each outer edge and meet the grid's middle rule. The open accordion row also shows a three-step line diagram (Understand, Connect, Resolve) on a thin gold line.
Shape and spacing
Square controls, fine ivory dividers at 55% opacity, primary content at 82% of the page width with a wider contrast block; the menu collapses below 1000px and layouts stack at 600px.
Images
4 generated photographs as WebP (the glass slab hero, light sweeping a dark surface, a hand touching a glowing junction, a thin light beam under the form). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- InterAll text: headings, body, navigation, labels and buttons (weights 400 and 500)
Loaded from Google Fonts.
Colors
- Near-black
#100907Main page background - Cherry
#1B0C0ADeep red-brown sections and the contact area - Ivory
#F4EEE4Text on dark and fine dividers - Benchmark ivory
#F1E9DDBackground of the six conditions band - Peach
#FFD3B8Buttons and the benchmark curves - Gold
#CFAA71The step diagram line in the open accordion
What works on the page
- Below 1000px the links move into a menu that opens and closes by click, touch or keyboard and closes with Escape.
- The four problem rows are animated accordions; the first starts open and shows the three-step diagram.
- The contact form validates the names and email, then shows an animated thank-you that says this demo sent nothing.
- Animation runs at 320ms and is removed under reduced-motion settings; accordion text stays readable without JavaScript.
Who Optical Connection fits
An AI studio or lab that wants a dark, cinematic first impression with real photography rather than a dashboard mock-up.
A team with warm brand colors, since peach, copper and cherry carry the whole palette.
Anyone who wants a single typeface: everything is set in Inter, so swapping in a brand font is one change.
A firm with two or three client examples to show, since the examples row is already laid out.
See the whole page as one image (1080 by 3278 pixels, 173 KB)
Questions about Optical Connection
Can I make Optical Connection lighter?
The dark look comes from both the colors and the photographs. Change the near-black and cherry custom properties at the top of the stylesheet for the backgrounds, but the four images are dark by design, so a light version also needs new photographs.
How are the curves in the benchmark made?
The six peach curves are SVG, so they stay sharp at any size and scale to the grid edges on phones. Their color follows the peach value in the stylesheet.
How do I replace the photographs?
Put your own WebP files in the assets folder with the same names: hero, contrast, continuity and contact. They use object-fit cover and are never stretched, so wide landscape images fit best.
What happens when someone submits the form?
The form checks the required names and the email, then shows an animated thank-you that says no information was sent or stored. Connect your own submission service to the /contact action before launch.
Are the company names real?
Lumentry, Sablewood and Corvin Labs are fictional placeholders, and "The lab" is a generic label. Replace them with your own brand and client work.
More AI services templates like Optical Connection
Same content, different designs. Optical Connection is listed in AI website templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Human Horizon
Near-black AI services homepage opening on a giant black and white eye, with electric cyan serif headlines and fine rules.
- Astro
- HubSpot
- WordPress
- Framer soon
Control Tower
A dark navy page: an air traffic control tower at peach dusk, pale citrine serif headlines and a gold wayfinding line.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.