AI Section Refresh — Design Spec

Date: 2026-04-15 Branch: homepage-refresh Status: Draft for review Owner: Arthur Marinis

Context

The artificialintelligence/ section of base2Services.com currently mixes consulting offerings (Data Integration, Data Readiness, Generative AI) with a managed-services cluster (AI Factory + Agentic Ops + Guardrails + MLOps), with no clear visual or structural distinction between the two. The hub page (/artificialintelligence/) reads as a service page rather than a routing surface; the AI Factory mini-hub (/artificialintelligence/aifactory/) is similarly heavy. Other recent pages on the site — devops, platform-engineering, infrastructure-lens, cloudmanagement, security — have moved to a consistent service-page template that the AI section has not yet adopted.

Web research on comparable AWS partners (Mission Cloud, Slalom, Rackspace FAIR, Mantel Group, Quantiphi, Accenture, Deloitte) confirms three current patterns: (1) hub pages are routers, not sales pages; (2) mini-hubs follow a stepped-framework layout with parallel sub-page structure; (3) a 6-card "What you get" grid on a hub or mini-hub now reads dated.

Goals

Apply a single visual language — the existing devops/index.html.haml template — across all eight AI pages.
Adopt a three-tier template system (Approach B): a light hub, a medium mini-hub, and full secondary pages.
Make the consulting-vs-managed distinction visible through visual signalling (eyebrow labels, card grouping, copy treatment) rather than navigation splits or new URLs.
Keep all existing URLs and page filenames intact. Add no new pages.
Defer testimonials and case studies on AI pages until written-up customer work exists.

Non-Goals

URL renames, new pages, or moving pages between directories.
AI case studies (separate workstream — customer write-ups pending).
New SVG icon library — reuse what devops, platform-engineering, infrastructure-lens already use.
Banner image changes beyond what's already in each page's frontmatter.
Refresh of pages outside artificialintelligence/.

Information Architecture

Role	Path	Template
Hub	`/artificialintelligence/`	Hub (light)
Mini-hub (managed cluster)	`/artificialintelligence/aifactory/`	Mini-hub (medium)
Secondary, managed	`/artificialintelligence/aifactory/agentic-ops/`	Full, managed variant
Secondary, managed	`/artificialintelligence/aifactory/guardrails/`	Full, managed variant
Secondary, managed	`/artificialintelligence/aifactory/mlops/`	Full, managed variant
Secondary, consulting	`/artificialintelligence/data/`	Full, consulting variant
Secondary, consulting	`/artificialintelligence/data/readiness.html`	Full, consulting variant
Secondary, consulting	`/artificialintelligence/generativeai/`	Full, consulting variant

Hub linking pattern

/artificialintelligence/ shows four offering cards: AI Factory (managed cluster, links to mini-hub) plus Data Integration, Data Readiness, and Generative AI (consulting). The AI Factory card is visually separated from the three consulting cards via an eyebrow label and grouping treatment.

/artificialintelligence/aifactory/ shows three service cards: Agentic Ops, Guardrails, MLOps.

To be deleted: artificialintelligence/indexold.html.haml (legacy, unlinked).

Hub Template — `/artificialintelligence/`

Reuses devops's CSS classes (.svc-wyg-grid, .svc-trust-bar, .svc-faq-section, etc.) but only the sections that earn their place on a router page.

Sections, in order:

Hero — .container.inner + %h2 + %p.center positioning + .flex-container with one CTA ("Talk to Us"). Sharp positioning sentence drawn from Overall AI Offering.docx.
Offering cards — .svc-wyg-grid styled, four cards, each a clickable link to a sub-page. Each card carries a small eyebrow label: "Managed Service" on AI Factory, "Consulting" on the three others. Same card chrome otherwise.
Trust bar — .svc-trust-bar unchanged. AWS competencies + ISO 27001.
FAQ — = partial "faq_artificialintelligence.html.haml" (already exists; content reviewed and updated to match buyer objections).
Contact form — inbuilt_contact_form.html.haml partial.

Dropped from the devops template on the hub: 6-card features grid (replaced by 4 offering cards), .svc-wyg-detail deliverables, "How it works" cycle, testimonials, .section-cta, case studies grid, crosslinks (the hub itself is the routing surface).

Mini-Hub Template — `/artificialintelligence/aifactory/`

Reuses devops's CSS. Heavier than the hub, lighter than a secondary page.

Sections, in order:

Hero — .container.inner + %h2 + %p.center framework positioning + .flex-container with two CTAs ("Talk to Us", "How AI Factory works" anchor). Copy drawn from AI Factory One Pager.docx, base2Services AI Factory.pdf, and alistair ai factory meeting.txt.
3 service cards — .svc-wyg-grid with three cards (parallel structure, same height, same CTA verb): Agentic Ops / Guardrails / MLOps. Each links to its sub-page. Cards carry the "Managed Service" eyebrow label.
How AI Factory works — devops's cycle SVG, but 3 sequential steps rather than a closed loop, showing how a customer moves between the three managed services.
Trust bar — .svc-trust-bar unchanged.
Section CTA — .section-cta with one button.
FAQ — = partial "faq_ai_factory.html.haml".
Crosslinks — .svc-crosslink-section linking to the three consulting siblings.
Contact form — partial.

Dropped from devops template: 6-card features grid, .svc-wyg-detail deliverables (those live on the three sub-pages), testimonials, case studies (no AI write-ups yet).

Secondary Page Template

Full devops template minus testimonials and case studies (until AI case studies exist).

Shared sections, in order:

Hero — .container.inner + %h2 + %p.center (×1–2) + .flex-container CTA. Eyebrow label above the H2 carries the consulting/managed signal.
.svc-what-you-get — 6-card grid (.svc-wyg-card.bg-green / .bg-blue alternating).
.svc-wyg-detail — 3-column deliverables (.svc-del-group ×3). Variant-specific.
How it works — .svc-cycle-wrapper with 4-step cycle.
Trust bar — .svc-trust-bar. Variant-specific badges where useful.
.section-cta — single CTA button.
FAQ — partial.
Crosslinks — .svc-crosslink-section to three sibling services.
Contact form — partial.

Variant — Managed (Agentic Ops, Guardrails, MLOps)

Eyebrow label: "Managed Service"
Hero copy emphasises "Fixed monthly fee. 24/7 included." (mirrors devops)
.svc-wyg-detail columns: Operations / Engineering / Compliance
"How it works" cycle verbs: Assess → Build → Operate → Improve
Trust bar: AWS competency + ISO 27001 + AWS SaaS
FAQ topics: SLAs, support model, fixed-fee scope, account access, exit
Crosslink set: the other two managed siblings + AI Factory mini-hub

Variant — Consulting (Data Integration, Data Readiness, Generative AI)

Eyebrow label: "Consulting Engagement"
Hero copy emphasises "Engagement-based. Fixed scope. Knowledge transfer."
.svc-wyg-detail columns: Discovery / Design / Delivery
"How it works" cycle verbs: Discover → Design → Build → Handover
Trust bar: AWS competency + ISO 27001 (+ AI/ML competency badge if available)
FAQ topics: engagement length, handover, IP ownership, ongoing support options
Crosslink set: the other two consulting siblings + AI Factory

Content Sources

Page	Primary source(s)
AI hub	`Overall AI Offering.docx`, `Exposure and Personas.docx` (extract via pandoc) + existing on-page copy as fallback
AI Factory mini-hub	`AI Factory One Pager.docx`, `base2Services AI Factory.pdf`, `alistair ai factory meeting.txt`
Agentic Ops	`alistair ai factory meeting.txt`, `exec meeting.txt`, existing on-page copy
Guardrails	Existing on-page copy (`aifactory/guardrails/index.html.haml`)
MLOps	`MLops as a Service.docx`, `ML Ops EBOOK.docx`, `Continuous MLOps Partnership Product Specification.docx`
Data Integration	Existing on-page copy (`data/index.html.haml`)
Data Readiness	Existing on-page copy (`data/readiness.html.haml`)
Generative AI	`Franchise Generative AI Portal.docx`, existing on-page copy

Source folder: C:\Users\amari\development\claude\base2services\research\AI

Process per page:

Extract source content (pandoc for .docx, pdftotext for .pdf) into a scratch buffer for reference.
Replace the page body with the new template HAML, preserving frontmatter (banner paths, meta_, service_, FAQ partial reference) except where positioning genuinely needs to change.
Write copy that fits each section's role: hero positioning, six capability cards, three deliverables columns, four-step cycle, FAQ.
Build locally and visually verify before moving to the next page.

Tone discipline: match devops/platform-engineering — short sentences, concrete verbs, "we do X" not "leveraging X", no marketing fluff. Australian English (organise, prioritise, recognise).

Existing FAQ Partial Inventory

Already present (reuse, review for buyer-objection focus): - _partials/faq_artificialintelligence.html.haml — hub - _partials/faq_ai_factory.html.haml — mini-hub - _partials/faq_agentic_ai.html.haml — Agentic Ops - _partials/faq_mlops.html.haml — MLOps

To create: - _partials/faq_guardrails.html.haml - _partials/faq_data_integration.html.haml - _partials/faq_data_readiness.html.haml - _partials/faq_generative_ai.html.haml

Open Items / Follow-Ups

AI case studies (separate workstream — customer write-ups pending). Once available, reintroduce .section-testimonials and .case-studies-grid on secondary and mini-hub pages.
Improvements to Guardrails, Data Integration, Data Readiness copy from authoritative source documents (currently using existing on-page copy as the source).
Potential AI/ML AWS competency badge — confirm whether base2Services holds one before adding to consulting trust bars.