# Cameleer Website Relaunch — 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:** Rebuild the Cameleer homepage composition + copy on the existing static Astro 5 stack to fix conversion gaps identified in the post-launch design review (single H1, social proof strip, before/after walkthrough, simplified pricing teaser, fewer puns). **Architecture:** Pure content + structural change. No new dependencies, no backend, no analytics, no forms. Two new section components replace two retired ones; five existing sections rebuilt-in-place; tier names refreshed across `index.astro` and `/pricing.astro`. One CSS line added (`scroll-behavior: smooth`) for the new in-page anchor CTA. **Tech Stack:** Astro 5, Tailwind CSS, vitest (existing), html-validate, linkinator, Lighthouse CI. No new libraries. **Spec:** `docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md` --- ## File structure **New files:** - `src/components/sections/SocialProofStrip.astro` — founder quote + design-partner CTA (new section, sits between Hero and walkthrough) - `src/components/sections/ThreeAmWalkthrough.astro` — before/after split with 3 callouts (replaces DualValueProps + ProductShowcase) **Deleted files:** - `src/components/sections/DualValueProps.astro` - `src/components/sections/ProductShowcase.astro` **Modified files:** - `src/components/sections/Hero.astro` — kill rotator, single H1, microline, secondary CTA, annotation pin overlay - `src/components/sections/HowItWorks.astro` — slim copy on steps 1, 3 - `src/components/sections/WhyUs.astro` — drop `03:00` watermark, reword card 2 - `src/components/sections/PricingTeaser.astro` — rename tiers, 2 cards on homepage, "See all plans" link - `src/components/sections/FinalCTA.astro` — H2 + sub + single CTA reword - `src/pages/index.astro` — section imports/order updated - `src/pages/pricing.astro` — tier names refreshed - `src/styles/global.css` — add `html { scroll-behavior: smooth }` plus reduced-motion override **Unchanged (do not touch):** - `src/components/SiteHeader.astro`, `SiteFooter.astro`, `CTAButtons.astro`, `Lightbox.astro`, `TopographicBg.astro`, `RouteDiagram.astro` - `src/middleware.ts`, `src/middleware.test.ts` - `src/config/auth.ts` (existing tests cover this — must stay green) - `astro.config.mjs`, `tailwind.config.mjs`, `package.json` --- ## Working assumptions - Branch `relaunch-2026-04-25` is checked out (already created). - Spec doc is committed at `e338347` (already done). - `npm ci` has been run; `node_modules/` is present. - Tailwind tokens used in this plan all exist in `tailwind.config.mjs` — verified: `bg`, `bg-elevated`, `border`, `border-strong`, `accent`, `accent-muted`, `cyan`, `text`, `text-muted`, `text-faint`, `font-sans`, `font-mono`, `text-hero`, `max-w-content`, `max-w-prose`. - The CTAButtons component API is unchanged — it already accepts `secondaryLabel`, `secondaryHref`, `showSecondary` props. --- ## Task 1: Add `scroll-behavior: smooth` to global.css **Files:** - Modify: `src/styles/global.css` **Why first:** Foundational and tiny; the new hero anchor CTA needs it. Keep separate so the diff is reviewable on its own. - [ ] **Step 1.1: Read the file** Use the Read tool on `src/styles/global.css` (required by edit hooks). - [ ] **Step 1.2: Insert the smooth-scroll rule into the `html` block** The existing `html` block at line 16-21: ```css html { @apply bg-bg text-text font-sans; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ``` Replace with (adds the one new property): ```css html { @apply bg-bg text-text font-sans; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } ``` - [ ] **Step 1.3: Verify the build still works** Run: `npm run build` Expected: `✔ Completed in …ms` with no errors and `dist/` populated. - [ ] **Step 1.4: Commit** ```bash git add src/styles/global.css git commit -m "feat(styles): enable smooth in-page anchor scrolling Adds html { scroll-behavior: smooth } with a prefers-reduced-motion override. Required for the relaunch hero's 'See it in action' anchor CTA to feel natural. Co-Authored-By: Claude Opus 4.7 (1M context) " ``` --- ## Task 2: Create `SocialProofStrip.astro` **Files:** - Create: `src/components/sections/SocialProofStrip.astro` **Spec reference:** §6.2 of the design spec. **Why now:** Add the new component before any consumer references it. Astro is happy with unimported components, so the build stays green throughout. - [ ] **Step 2.1: Create the file with the full component body** Write the full content below to `src/components/sections/SocialProofStrip.astro`: ```astro --- import { getAuthConfig } from '../../config/auth'; const auth = getAuthConfig(); // PENDING — must be filled in before publish: // 1. [Founder Name] placeholder below. // 2. The "ex-nJAMS" mention is gated on Hendrik's trademark review // (same pattern as WhyUs.astro §10 caveat). If the review is not // cleared by publish time, drop the " · ex-nJAMS" suffix from the // attribution line. const founderName = '[Founder Name]'; const designPartnerSubject = 'Design partner enquiry — Cameleer'; const designPartnerHref = `mailto:${auth.salesEmail}?subject=${encodeURIComponent(designPartnerSubject)}`; ---

// Built by people who've done this before

“We spent 15 years building integration monitoring for banks that couldn’t afford downtime. Cameleer is what we’d build today — purpose-built for Apache Camel, no retrofit.”

— {founderName}, co-founder · ex-nJAMS
Apply to the design-partner program
``` - [ ] **Step 2.2: Verify the build** Run: `npm run build` Expected: build succeeds. The component isn't imported yet, so it produces no output but must still type-check. - [ ] **Step 2.3: Commit** ```bash git add src/components/sections/SocialProofStrip.astro git commit -m "feat(sections): add SocialProofStrip component Founder pedigree quote plus design-partner mailto CTA. Uses auth.salesEmail (not auth.salesMailto) so we can pass a subject. Two PENDING gates documented in the component: - [Founder Name] placeholder - 'ex-nJAMS' wording subject to trademark clearance Component is created but not yet wired into index.astro. Co-Authored-By: Claude Opus 4.7 (1M context) " ``` --- ## Task 3: Create `ThreeAmWalkthrough.astro` **Files:** - Create: `src/components/sections/ThreeAmWalkthrough.astro` **Spec reference:** §6.3 of the design spec. - [ ] **Step 3.1: Create the file with the full component body** Write the full content below to `src/components/sections/ThreeAmWalkthrough.astro`: ```astro --- import Lightbox from '../Lightbox.astro'; interface Callout { title: string; body: string; } const callouts: Callout[] = [ { title: 'Cross-service correlation.', body: 'Every exchange carries its correlation ID forward. One click jumps to what the downstream route did with the same message.', }, { title: 'Runtime detail, not guesswork.', body: 'Circuit breaker tripped. Fallback path ran. Request tried backend:80. The pieces a 3 AM page actually needs — already captured.', }, { title: 'The whole story of a failure.', body: 'Exception class, message, stack trace, headers, payload — all pinned to the exchange. No log-grepping tour.', }, ]; ---

// When something breaks

The 3 AM page. With and without Cameleer.

Same Camel app. Same failed exchange. Different night.

Without Cameleer · 03:12 AM 
$ kubectl logs camel-router-7d4f8c
ERROR org.apache.camel.CamelExecutionException
  at org.apache.camel.processor.SendProcessor.process
  at org.apache.camel.processor.Pipeline.process
  ...

$ grep "order-842" *.log
router-3.log: WARN  exchange order-842 stuck in saga-fulfillment
router-3.log: ERROR processor backend:80 → connect timeout

$ ssh prod-integration-3
prod-integration-3 $ kubectl logs ...

> slack #integration-team
  "anyone know why order-842 is stuck??"
  [3 of 4 reactions, no answer]

~47 min later: someone wakes up an SRE.
With Cameleer · 30 sec
▸ Open exchange order-842 → see the failure pinned → click Replay after fix.
    {callouts.map((c, i) => (

  • {c.title}

    {c.body}

    • ))}
``` - [ ] **Step 3.2: Verify the build** Run: `npm run build` Expected: build succeeds. Linkinator hasn't run yet — anchor target `#walkthrough` will validate when this section is wired into index.astro (Task 10). - [ ] **Step 3.3: Commit** ```bash git add src/components/sections/ThreeAmWalkthrough.astro git commit -m "feat(sections): add ThreeAmWalkthrough component Replaces DualValueProps + ProductShowcase with a single before/after split: a styled 
 block (the 'without' state) next to the
existing /product/error-detail.png screenshot (the 'with' state).
Three short callouts below.

Section anchor #walkthrough is the target for the Hero's
'See it in action ↓' secondary CTA (added in Task 4).

The 'without' panel is implemented as a styled 
 per the spec —
no asset production required.  A future phase may swap to a recorded
terminal screencap; that swap is a one-component change.

Co-Authored-By: Claude Opus 4.7 (1M context) "
```

---

## Task 4: Rebuild `Hero.astro`

**Files:**
- Modify: `src/components/sections/Hero.astro`

**Spec reference:** §6.1 of the design spec.

**Changes:**
1. Remove the rotator (3 spans inside H1, the wrapper styles `.hero-rotator` / `.hero-line`, the `