Homepage Lead-Gen Refresh Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Rewire the base2Services homepage on master to reflect the new "Platform Engineering for the AI Era" positioning — new hero with dual-interface visual, new service paths, new "How We Deliver" section, SecureCompass as the primary conversion path — while preserving all performance fixes from the 2026-04-08 spec.

Architecture: This is a content + front-end refresh of a single page (the homepage index.html.haml rendered by the home Awestruct layout). Work is done by adding new HAML partials in _partials/front_page/, adding new SCSS in scss/site/_front-page.scss, and editing index.html.haml to wire the new partials into the page. Old partials (event banner, services columns, three-button row, video) are unincluded but not deleted. Two existing partials (scroller_compliance and testimonials) get small copy edits only.

Tech Stack: Awestruct (Ruby static-site generator), HAML templates, SCSS compiled by Gulp, existing _front-page.scss + existing breakpoint mixin breakpoint(from-medium|from-large|from-xlarge). No new dependencies.

Spec: docs/superpowers/specs/2026-04-10-homepage-lead-gen-refresh-design.md

Notes for the implementer:

File Structure

Files to Create

Path Responsibility
_partials/front_page/hero_refresh.html.haml New hero section — kicker, headline, subheadline, inline dual-interface visual, two CTAs
_partials/front_page/proof_bar.html.haml Thin horizontal certification strip (ISO 27001 · CPS 234 · AWS Advanced · DevOps · SaaS)
_partials/front_page/service_paths.html.haml Platform Engineering L1/L2 primary card + Assessment + Cloud Management secondary cards
_partials/front_page/how_we_deliver.html.haml Three-card section: Agents find it · Engineers fix it · You see progress. Inline SVG icons.

Files to Modify

Path Change
index.html.haml Replace body content with new partial includes; update frontmatter title/description
_layouts/home.html.haml Update default %title and meta description to match new positioning
scss/site/_front-page.scss Append new styles for .hero-refresh, .proof-bar, .service-paths, .how-we-deliver
_partials/front_page/scroller_compliance.html.haml Change lines 2–4: keep H2 "Audited. Certified. Compliant.", change H3 sub to new copy
_partials/front_page/testimonials.html.haml Add section heading "What they shipped with us." above the existing scroller markup

Files Preserved Unchanged

Task 1: Add placeholder SCSS block + import check

Files: - Modify: scss/site/_front-page.scss (append to end of file)

Before writing any partials, add a single skeleton block at the end of _front-page.scss and rebuild the site to confirm SCSS compilation still works. This is a sanity check — it proves the build pipeline works before we start adding real markup that depends on CSS.

Open scss/site/_front-page.scss, scroll to the end, and append:

```scss

// ============================================================ // Homepage Lead-Gen Refresh (2026-04-10) // Spec: docs/superpowers/specs/2026-04-10-homepage-lead-gen-refresh-design.md // ============================================================

.homepage-refresh-scope { // Skeleton — real styles added in later tasks. // This block exists so we can verify the build before adding partials. display: block; } ```

Run: bundle exec rake clean build (or whatever the project's normal build command is — ask the user if unclear). Confirm the build succeeds without SCSS errors.

Expected: Build exits 0. No red Sass errors in the output.

bash git add scss/site/_front-page.scss git commit -m "style(homepage): add skeleton block for lead-gen refresh"

Task 2: Create the Proof Bar partial

Files: - Create: _partials/front_page/proof_bar.html.haml

Simplest partial first so we can validate the partial→include→render loop end-to-end before touching the hero.

Create the file with this exact content:

haml .proof-bar .proof-bar-inner %ul.proof-bar-list %li ISO 27001 %li CPS 234 %li AWS Advanced Partner %li DevOps Competency %li SaaS Competency

Append inside the // Homepage Lead-Gen Refresh comment block (after the skeleton .homepage-refresh-scope):

```scss

.proof-bar { background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 16px 20px;

.proof-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.proof-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 24px;

    li {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64748b;
        position: relative;

        &:not(:last-child)::after {
            content: "·";
            position: absolute;
            right: -14px;
            color: #cbd5e1;
        }
    }

    @include breakpoint(from-medium) {
        gap: 14px 32px;

        li {
            font-size: 13px;

            &:not(:last-child)::after {
                right: -18px;
            }
        }
    }
} } ```

Open index.html.haml. After the existing front matter block (line 7) and before #home-leadin.container (line 10), add:

```haml

= partial("front_page/proof_bar.html.haml") ```

Run the build. Open the rendered homepage in a browser (or read the generated HTML). Confirm: - No build errors - The proof bar renders with five items separated by dots - On mobile viewport (≤480px) the items wrap

Remove the line you added in step 3. We'll add it back properly in Task 7. Leaving it in index.html.haml now would cause duplication once we rewire the page.

bash git add _partials/front_page/proof_bar.html.haml scss/site/_front-page.scss git commit -m "feat(homepage): add proof bar partial"

Task 3: Create the How We Deliver partial

Files: - Create: _partials/front_page/how_we_deliver.html.haml

Simple three-card section. Inline SVG icons (no external requests, no emoji).

Create the file with this exact content:

haml .how-we-deliver .how-we-deliver-inner .how-we-deliver-header %p.eyebrow How we deliver %h2.heading No tickets. No reports. Just fixes. %p.subheading The Engagement Engineer + Agent Fleet model. .how-we-deliver-cards .hwd-card %div.hwd-icon{role: "img", "aria-label" => "Agent icon"} %svg{xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width" => "2", "stroke-linecap" => "round", "stroke-linejoin" => "round"} %rect{x: "3", y: "11", width: "18", height: "10", rx: "2"} %circle{cx: "12", cy: "5", r: "2"} %path{d: "M12 7v4"} %line{x1: "8", y1: "16", x2: "8", y2: "16"} %line{x1: "16", y1: "16", x2: "16", y2: "16"} %h3 Agents find it %p Continuous analysis of IAM, compliance, cost, pipelines, and deployments. .hwd-card %div.hwd-icon{role: "img", "aria-label" => "Engineer icon"} %svg{xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width" => "2", "stroke-linecap" => "round", "stroke-linejoin" => "round"} %path{d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"} %circle{cx: "12", cy: "7", r: "4"} %h3 Engineers fix it %p Your named Engagement Engineer acts before you raise a ticket. .hwd-card %div.hwd-icon{role: "img", "aria-label" => "Dashboard icon"} %svg{xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width" => "2", "stroke-linecap" => "round", "stroke-linejoin" => "round"} %line{x1: "18", y1: "20", x2: "18", y2: "10"} %line{x1: "12", y1: "20", x2: "12", y2: "4"} %line{x1: "6", y1: "20", x2: "6", y2: "14"} %h3 You see progress %p Benchmark score, PRs merged, trend lines for your board.

Append after the .proof-bar block:

```scss

.how-we-deliver { background: #0f172a; color: #e2e8f0; padding: 48px 20px;

.how-we-deliver-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.how-we-deliver-header {
    text-align: center;
    margin-bottom: 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;

    .eyebrow {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #2dd4bf;
        font-weight: 700;
        margin: 0 0 8px 0;
    }

    .heading {
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0 0 8px 0;
        line-height: 1.2;
    }

    .subheading {
        font-size: 14px;
        color: #94a3b8;
        margin: 0;
    }
}

.how-we-deliver-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    @include breakpoint(from-medium) {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.hwd-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 24px;

    .hwd-icon {
        width: 40px;
        height: 40px;
        color: #2dd4bf;
        margin-bottom: 14px;

        svg {
            width: 100%;
            height: 100%;
        }
    }

    h3 {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin: 0 0 8px 0;
    }

    p {
        font-size: 14px;
        line-height: 1.55;
        color: #94a3b8;
        margin: 0;
    }
} } ```

Same method as Task 2 Step 3 — add = partial("front_page/how_we_deliver.html.haml") temporarily after the front matter, rebuild, verify the section renders with three cards (stacked on mobile, three columns on ≥800px), then remove the temporary include.

bash git add _partials/front_page/how_we_deliver.html.haml scss/site/_front-page.scss git commit -m "feat(homepage): add how-we-deliver section partial"

Task 4: Create the Service Paths partial

Files: - Create: _partials/front_page/service_paths.html.haml

Hybrid layout: full-width dark Platform Engineering card with L1/L2 columns, then two equal white cards for Assessment + Cloud Management below.

Create the file with this exact content:

```haml .service-paths .service-paths-inner .service-paths-header %p.eyebrow Our services %h2.heading Three paths. One specialist team. %p.subheading Mix and match — start where your problem is most urgent. Every path leads to the same outcome: infrastructure your team can ship into, safely.

.service-primary
  .service-primary-badge Primary
  %p.eyebrow For AI-era engineering teams
  %h3.title Platform Engineering for the AI Era
  %p.desc Continuous infrastructure intelligence delivered as pull requests, Slack messages, and a benchmark score. Two levels — pick the one that matches your team.
  .service-primary-levels
    .level-card.level-1
      %p.level-label Level 1
      %p.level-name Infrastructure Lens
      %p.level-desc Intelligence and advisory. We identify what's wrong and what to change. Your team executes.
      %a.level-link{href: "/contact/"} Learn more →
    .level-card.level-2
      %p.level-label Level 2
      %p.level-name Full Platform Engineering
      %p.level-desc Intelligence + operations + execution. Findings arrive as merged PRs and incidents resolved before you're paged.
      %a.level-link{href: "/contact/"} Learn more →

.service-secondary
  .service-card.service-assessment
    %p.eyebrow Entry point
    %h3.title Compliance & Reliability Assessment
    %p.desc Fixed-price review of your AWS environment against APRA CPS234, PCI DSS, ISO 27001 and SOC 2. See exactly where you stand.
    .service-meta
      %span.meta-chip One week
      %span.meta-chip Fixed price
    %a.service-cta{href: "https://securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=service_paths", target: "_blank", rel: "noopener"} Start Your Assessment →
  .service-card.service-cloud
    %p.eyebrow 24/7 operations
    %h3.title Cloud Management
    %p.desc Monitoring, incident response, patching, cost optimisation. Follow-the-sun coverage on AWS at a fixed monthly fee.
    .service-meta
      %span.meta-chip AU · EU · US
      %span.meta-chip Fixed monthly
    %a.service-cta{href: "/cloudmanagement/"} Explore Cloud Management → ```

Append after the .how-we-deliver block:

```scss

.service-paths { background: #fff; padding: 56px 20px;

.service-paths-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.service-paths-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px auto;

    .eyebrow {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #0d9488;
        font-weight: 700;
        margin: 0 0 8px 0;
    }

    .heading {
        font-size: clamp(26px, 3.2vw, 36px);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #020c18;
        margin: 0 0 10px 0;
        line-height: 1.15;
    }

    .subheading {
        font-size: 15px;
        color: #475569;
        line-height: 1.55;
        margin: 0;
    }
}

// Primary: Platform Engineering (dark card)
.service-primary {
    background: #020c18;
    color: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    margin-bottom: 20px;
    position: relative;

    @include breakpoint(from-medium) {
        padding: 36px 40px;
    }

    .service-primary-badge {
        position: absolute;
        top: 20px;
        right: 24px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 700;
        color: #2dd4bf;
        background: rgba(45, 212, 191, 0.12);
        border: 1px solid rgba(45, 212, 191, 0.3);
        padding: 4px 12px;
        border-radius: 999px;
    }

    .eyebrow {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        color: #2dd4bf;
        margin: 0 0 6px 0;
    }

    .title {
        font-size: clamp(22px, 2.6vw, 30px);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0 0 10px 0;
        line-height: 1.2;
    }

    .desc {
        font-size: 14px;
        color: #94a3b8;
        line-height: 1.6;
        max-width: 620px;
        margin: 0 0 20px 0;
    }

    .service-primary-levels {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;

        @include breakpoint(from-medium) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .level-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid #1e293b;
        border-radius: 10px;
        padding: 20px;

        &.level-2 {
            background: rgba(13, 148, 136, 0.1);
            border-color: #2dd4bf;
        }

        .level-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #2dd4bf;
            margin: 0 0 6px 0;
        }

        .level-name {
            font-size: 17px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px 0;
        }

        .level-desc {
            font-size: 13px;
            color: #94a3b8;
            line-height: 1.55;
            margin: 0 0 14px 0;
        }

        .level-link {
            font-size: 13px;
            font-weight: 600;
            color: #2dd4bf;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

// Secondary: Assessment + Cloud Management (white cards)
.service-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    @include breakpoint(from-medium) {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

.service-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;

    .eyebrow {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 700;
        color: #0d9488;
        margin: 0 0 8px 0;
    }

    .title {
        font-size: 20px;
        font-weight: 800;
        color: #020c18;
        margin: 0 0 10px 0;
        line-height: 1.25;
    }

    .desc {
        font-size: 14px;
        color: #475569;
        line-height: 1.55;
        margin: 0 0 14px 0;
    }

    .service-meta {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .meta-chip {
        display: inline-block;
        font-size: 11px;
        color: #64748b;
        background: #f1f5f9;
        padding: 4px 10px;
        border-radius: 4px;
    }

    .service-cta {
        font-size: 13px;
        font-weight: 700;
        color: #0d9488;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
} } ```

Temporarily include in index.html.haml, rebuild, verify: - Header text renders - Dark Platform Engineering card with "Primary" badge in the corner - L1 and L2 columns side-by-side on ≥800px, stacked on mobile - Assessment + Cloud Management as two equal white cards - Assessment CTA link has target="_blank" and the UTM params - Cloud Management CTA links to /cloudmanagement/

Remove the temporary include.

bash git add _partials/front_page/service_paths.html.haml scss/site/_front-page.scss git commit -m "feat(homepage): add service paths partial with platform engineering primary"

Task 5: Create the Hero Refresh partial (structure + copy)

Files: - Create: _partials/front_page/hero_refresh.html.haml

Hero contains kicker, headline, subheadline, dual-interface visual, and CTAs. All single-column, stacked vertically in this order on every breakpoint. The dual-interface visual has two internal panels (Leadership / Engineer) side-by-side on ≥800px.

Create the file with this exact content:

```haml #home-banner-refresh.hero-refresh{role: "banner"} .hero-refresh-inner .hero-copy %p.hero-kicker AWS Advanced Partner · 15 years on AWS %h1.hero-headline The infrastructure layer for AI-era software teams. %p.hero-subheading Findings in your pull requests. Compliance in your dashboard. An engineer who knows your environment. For teams shipping regulated software on AWS.

.hero-dual-interface{role: "img", "aria-label" => "Illustration of a benchmark dashboard and an engineer receiving agent findings as pull requests and Slack messages"}
  -# Leadership view
  .dual-panel.panel-leadership
    %p.panel-label Leadership view
    .benchmark-row
      .benchmark-circle
        %span.benchmark-number 78
      .benchmark-text
        %span.benchmark-title Benchmark Score
        %span.benchmark-trend ↑ 12 this quarter
    .benchmark-metrics
      .metric
        %span.metric-label IAM
        %span.metric-value.ok 92
      .metric
        %span.metric-label Cost
        %span.metric-value.warn 71
      .metric
        %span.metric-label PCI
        %span.metric-value.ok 85
  -# Engineer view
  .dual-panel.panel-engineer
    %p.panel-label Engineer view
    .engineer-message.message-pr
      %p.message-source base2-agent · PR #247
      %p.message-body IAM: Lambda role has s3:* on arn:aws:s3:::*. Scoped to s3:GetObject.
      %p.message-status ✓ Ready to merge
    .engineer-message.message-slack
      %p.message-source #infra
      %p.message-body Cost anomaly: RDS +40% this week. Reserved instance expired.

.hero-ctas
  %a.hero-cta.primary{href: "https://securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=hero", target: "_blank", rel: "noopener"} Start Your Assessment
  %a.hero-cta.secondary{href: "/contact/"} Book a Call ```

Temporarily include = partial("front_page/hero_refresh.html.haml") at the top of index.html.haml, rebuild. Confirm the hero section appears as unstyled HTML (Task 6 adds styles). You should see all text elements in the source and nothing broken.

Remove the temporary include.

bash git add _partials/front_page/hero_refresh.html.haml git commit -m "feat(homepage): add hero refresh partial with dual interface"

Task 6: Style the Hero Refresh

Files: - Modify: scss/site/_front-page.scss (append)

Add all the CSS for the hero, including the dual-interface visual. Everything stacks on mobile; the two dual-interface panels go side-by-side on ≥800px.

Append after the .service-paths block:

```scss

// Hero refresh .hero-refresh { background: #020c18; color: #fff; padding: 56px 20px 48px; position: relative; overflow: hidden;

@include breakpoint(from-medium) {
    padding: 80px 32px 72px;
}

.hero-refresh-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

.hero-copy {
    margin-bottom: 28px;

    @include breakpoint(from-medium) {
        margin-bottom: 36px;
        text-align: center;
    }
}

.hero-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #2dd4bf;
    margin: 0 0 14px 0;
}

.hero-headline {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 14px 0;
    font-family: "HelveticaNeue", "Arial Black", "Arial", sans-serif;
}

.hero-subheading {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    color: #94a3b8;
    margin: 0;
    max-width: 640px;

    @include breakpoint(from-medium) {
        margin-left: auto;
        margin-right: auto;
    }
}

// Dual interface visual
.hero-dual-interface {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;

    @include breakpoint(from-medium) {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 36px;
    }
}

.dual-panel {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;

    @include breakpoint(from-medium) {
        padding: 20px;
    }
}

.panel-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    font-weight: 700;
    margin: 0 0 12px 0;
}

// Leadership panel
.panel-leadership {
    .benchmark-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 14px;
    }

    .benchmark-circle {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 4px solid #10b981;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .benchmark-number {
        font-size: 22px;
        font-weight: 800;
        color: #10b981;
        font-family: "HelveticaNeue", "Arial Black", sans-serif;
    }

    .benchmark-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .benchmark-title {
        font-size: 12px;
        color: #cbd5e1;
        font-weight: 600;
    }

    .benchmark-trend {
        font-size: 11px;
        color: #10b981;
    }

    .benchmark-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .metric {
        background: #1e293b;
        border-radius: 5px;
        padding: 8px 6px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .metric-label {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64748b;
        font-weight: 600;
    }

    .metric-value {
        font-size: 15px;
        font-weight: 700;

        &.ok { color: #10b981; }
        &.warn { color: #f59e0b; }
    }
}

// Engineer panel
.panel-engineer {
    .engineer-message {
        background: #1e293b;
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 8px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .message-source {
        font-size: 11px;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: #a78bfa;
    }

    .message-slack .message-source {
        color: #38bdf8;
    }

    .message-body {
        font-size: 11px;
        color: #cbd5e1;
        line-height: 1.5;
        margin: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .message-status {
        font-size: 11px;
        color: #10b981;
        font-weight: 600;
        margin: 6px 0 0 0;
    }
}

// CTAs
.hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @include breakpoint(from-medium) {
        flex-direction: row;
        justify-content: center;
        gap: 14px;
    }
}

.hero-cta {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.15s ease-out;

    &.primary {
        background: #0d9488;
        color: #fff;
        border: 1px solid #0d9488;

        &:hover {
            background: #0f766e;
            border-color: #0f766e;
            color: #fff;
        }
    }

    &.secondary {
        background: transparent;
        color: #e2e8f0;
        border: 1px solid #475569;

        &:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: #64748b;
            color: #fff;
        }
    }
} } ```

Temporarily include the hero partial in index.html.haml (at the top, before #home-leadin.container), rebuild, and open the homepage in a browser. Check:

Remove the temporary include.

Run a Lighthouse mobile audit on the page while the hero is temporarily included. Confirm the Performance score is still ≥58. If it's regressed, the likely culprit is additional CSS weight — investigate before proceeding.

Re-remove any temporary includes before committing.

bash git add scss/site/_front-page.scss git commit -m "style(homepage): add hero refresh styles with dual-interface visual"

Task 7: Wire the new homepage (index.html.haml)

Files: - Modify: index.html.haml

Replace the body content of the homepage with the new partials in the correct order, and drop the dropped sections. Update the frontmatter title and description.

Overwrite the file with this exact content:

```haml

layout: home description: Infrastructure intelligence for software teams on AWS. Findings in your pull requests, compliance in your dashboard, an engineer who knows your environment. AWS Advanced Partner. ISO 27001. APRA CPS234. title: Platform Engineering for the AI Era | base2Services change_frequency: weekly priority: 1 —

= partial("front_page/hero_refresh.html.haml")

= partial("front_page/proof_bar.html.haml")

= partial("front_page/service_paths.html.haml")

= partial("front_page/how_we_deliver.html.haml")

content.page{:role => "main"}

.container.compliance.page = partial("front_page/scroller_compliance.html.haml")

.container = partial("front_page/testimonials.html.haml")

.container = partial("front_page/articles.html.haml") ```

Note what's dropped compared to the old file: - #home-leadin.container with services_columns.html.haml - event.html.haml - outcomes.html.haml - The .flex-container three-button row (Book a Call · See How We Work · Why Choose Us) - .container.product.video with video.html.haml

The old banner was included by the layout (home.html.haml), not by index.html.haml. We need to prevent the layout from rendering it on the homepage.

Open _layouts/home.html.haml. Find lines around line 56:

haml -# BANNER = partial ("front_page/banner-aws-devops.html.haml")

Comment those lines out (HAML comment is -#):

haml -# BANNER (replaced by hero_refresh partial in index.html.haml) -# = partial ("front_page/banner-aws-devops.html.haml")

Find the %title tag around line 6. Currently:

haml %title #{page.title}

Leave this as-is — the new title in index.html.haml's frontmatter will be used. Just verify it renders correctly.

Find the meta description around line 8:

haml %meta{:content => "#{page.description}", :name => "description"}/

Leave this as-is — the new description in index.html.haml's frontmatter will be used.

No edits needed in Step 3. This is a verification step only. Confirm the layout reads page.title and page.description from the frontmatter.

Run the build. Open the homepage. Confirm (top to bottom):

  1. Hero with "The infrastructure layer for AI-era software teams." headline
  2. Proof bar with five items
  3. Service paths section with Platform Engineering primary card and Assessment/Cloud Management secondary cards
  4. How We Deliver with three cards
  5. Compliance scroller (still shows the old "Designed for compliance…" copy for now — that's Task 8)
  6. Testimonials section
  7. Articles section

Confirm NOT present: - Old banner image - Services columns section - Event banner - Three-button row - Outcomes section - Video section

In the browser, view page source and check the <head>:

Expected <title>: Platform Engineering for the AI Era | base2Services

Expected meta description: Infrastructure intelligence for software teams on AWS. Findings in your pull requests, compliance in your dashboard, an engineer who knows your environment. AWS Advanced Partner. ISO 27001. APRA CPS234.

bash git add index.html.haml _layouts/home.html.haml git commit -m "feat(homepage): wire new lead-gen refresh structure"

Task 8: Update compliance scroller heading copy

Files: - Modify: _partials/front_page/scroller_compliance.html.haml (lines 1–4)

Only the intro heading copy changes. Do not touch the logo list.

Open _partials/front_page/scroller_compliance.html.haml. Replace lines 1–4:

haml .text %h2.header.white.center.underline Audited. Certified. Compliant. %h3.title.white.center Designed for compliance, trusted by Software Product companies.

With:

haml .text %h2.header.white.center.underline Audited. Certified. Compliant. %h3.title.white.center The same standards your auditors look for. The same standards we hold ourselves to.

Leave lines 5+ (the .logos block and all stream items) untouched.

Rebuild. On the homepage, the compliance scroller should now show the new sub-heading text.

bash git add _partials/front_page/scroller_compliance.html.haml git commit -m "content(homepage): update compliance scroller sub-heading"

Task 9: Update testimonials section heading

Files: - Modify: _partials/front_page/testimonials.html.haml (top)

Add a new H2 section heading above the existing testimonials scroller.

Open _partials/front_page/testimonials.html.haml. The current file starts:

haml %div.testimonials-scroller-section -# %h2.section-title

Replace those two lines with:

haml %div.testimonials-scroller-section %h2.testimonials-heading What they shipped with us. -# %h2.section-title

The existing commented-out markup stays in place below.

Append to scss/site/_front-page.scss:

```scss

.testimonials-scroller-section { .testimonials-heading { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #020c18; letter-spacing: -0.02em; margin: 0 0 24px 0; } } ```

Rebuild. Confirm the new heading "What they shipped with us." appears above the testimonial cards on the homepage.

bash git add _partials/front_page/testimonials.html.haml scss/site/_front-page.scss git commit -m "content(homepage): add testimonials section heading"

Task 10: Full-page visual QA + Lighthouse check

No code changes. This task confirms the full homepage refresh works end-to-end before handover.

Run a clean build (bundle exec rake clean build or equivalent). Confirm zero build errors.

Open the homepage at 1280px width in Chrome. Confirm section-by-section:

  1. Hero: kicker, headline, subheading centred in a 960px max-width column; dual interface panels side-by-side; CTAs inline below, centred
  2. Proof bar: five items in a single horizontal row
  3. Service paths: Platform Engineering dark card full-width with L1/L2 side-by-side; Assessment + Cloud Management two cards side-by-side below
  4. How We Deliver: three cards side-by-side on dark slate background
  5. Compliance scroller: renders with new sub-heading
  6. Testimonials: renders with "What they shipped with us." heading
  7. Articles: renders as before

Resize browser to 768px. Confirm: - Hero headline still reads cleanly, no overflow - Dual interface panels transition (depending on breakpoint — they collapse to stacked below 800px) - Service paths L1/L2 stack to single column below 800px - All headings visible, no horizontal scroll

Using Chrome DevTools device emulation, set to iPhone SE (375×667). Confirm: - Hero stacks: kicker → headline → subheading → dual interface (panels stacked) → CTAs (stacked) - No horizontal scroll anywhere - Proof bar items wrap onto multiple lines - Platform Engineering card: L1 stacks above L2 - Assessment + Cloud Management stack vertically - How We Deliver cards stack vertically - All text readable at base mobile sizes

Click every link on the homepage in a real browser: - Hero "Start Your Assessment" → opens securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=hero in a new tab - Hero "Book a Call" → /contact/ - Platform Engineering L1 "Learn more" → /contact/ - Platform Engineering L2 "Learn more" → /contact/ - Assessment "Start Your Assessment" → securecompass.io?utm_source=base2services&utm_medium=homepage&utm_campaign=service_paths in a new tab - Cloud Management "Explore Cloud Management" → /cloudmanagement/

Run Lighthouse Mobile on the homepage (either via Chrome DevTools or PageSpeed Insights). Confirm:

If Performance drops below 58, identify the regression source (likely candidates: extra CSS weight, blocking SVG render, new font loading) and fix before closing the task.

Using VoiceOver (Mac) or NVDA (Windows) or Chrome's accessibility inspector: - The hero dual-interface should announce as an illustration via its aria-label, not as a table of numbers - Headings should read in logical order (H1 → H2 → H2 → H2…) - CTAs have accessible text ("Start Your Assessment", not "click here")

If any bugs were found and fixed in the QA tasks above, commit them with fix(homepage): .... If everything passes clean, no commit needed in this step.

bash git push origin master

(Or create a PR depending on project workflow — confirm with the user before pushing.)

Rollback Plan

If the refresh needs to be reverted quickly:

  1. Revert index.html.haml and _layouts/home.html.haml to the pre-refresh versions. The four new partials can stay on disk — they're harmless if not included.
  2. Revert the two copy-edit partials (scroller_compliance.html.haml, testimonials.html.haml).
  3. Revert scss/site/_front-page.scss — the appended block is clearly delimited by the comment header // Homepage Lead-Gen Refresh (2026-04-10).

The safest revert is a git revert of the commits from Task 7 onwards, which restores the old homepage without touching the new partial files (which remain available for a future reattempt).

Self-Review Notes

Spec coverage check:

Spec section Covered by
§ 1 Hero (all-in-one) Task 5 + Task 6
§ 2 Proof Bar Task 2
§ 3 Service Paths (hybrid A+B) Task 4
§ 4 How We Deliver Task 3
§ 5 Compliance (copy edit) Task 8
§ 6 Customer Evidence (heading edit) Task 9
§ 7 Resources / Articles (unchanged) Task 7 (via include only)
§ 8 Dropped Sections Task 7
Page title + meta description Task 7
SecureCompass link convention Tasks 4 + 5
Styling notes (breakpoints, colours) Tasks 2–6, 9
Performance floor (Lighthouse ≥58) Task 6 Step 3 + Task 10 Step 6
Testing / validation checklist Task 10
Rollback cheapness Rollback Plan section

All spec sections are mapped to at least one task.

Modular purchase model check: Task 4's subheading explicitly says "Mix and match — start where your problem is most urgent" and each of the three service paths (Platform Engineering L1/L2, Assessment, Cloud Management) has its own dedicated CTA rather than funnelling everyone to a single action. This satisfies the spec's modular-purchase requirement.

Type consistency check: CSS class names are consistent across tasks. The hero uses .hero-refresh throughout; the service paths use .service-paths, .service-primary, .service-secondary, .service-card, .level-card; how-we-deliver uses .how-we-deliver, .hwd-card. No duplicated or mismatched selectors between tasks.