AI Section Refresh — Design Spec

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

1. Apply a single visual language — the existing devops/index.html.haml template — across all eight AI pages.
2. Adopt a three-tier template system (Approach B): a light hub, a medium mini-hub, and full secondary pages.
3. Make the consulting-vs-managed distinction visible through visual signalling (eyebrow labels, card grouping, copy treatment) rather than navigation splits or new URLs.
4. Keep all existing URLs and page filenames intact. Add no new pages.
5. 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

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.

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:

1. Hero — .container.inner + %h2 + %p.center positioning + .flex-container with one CTA ("Talk to Us"). Sharp positioning sentence drawn from Overall AI Offering.docx.
2. 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.
3. Trust bar — .svc-trust-bar unchanged. AWS competencies + ISO 27001.
4. FAQ — = partial "faq_artificialintelligence.html.haml" (already exists; content reviewed and updated to match buyer objections).
5. Contact form — inbuilt_contact_form.html.haml partial.

Mini-Hub Template — /artificialintelligence/aifactory/

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

Sections, in order:

1. 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.
2. 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.
3. 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.
4. Trust bar — .svc-trust-bar unchanged.
5. Section CTA — .section-cta with one button.
6. FAQ — = partial "faq_ai_factory.html.haml".
7. Crosslinks — .svc-crosslink-section linking to the three consulting siblings.
8. Contact form — partial.

Secondary Page Template

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

Shared sections, in order:

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

Content Sources

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

Process per page:

1. Extract source content (pandoc for .docx, pdftotext for .pdf) into a scratch buffer for reference.
2. 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.
3. Write copy that fits each section's role: hero positioning, six capability cards, three deliverables columns, four-step cycle, FAQ.
4. Build locally and visually verify before moving to the next page.

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.