cameleer-website/docs/superpowers/plans/2026-04-25-cameleer-website-relaunch.md

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:

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):

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

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) <noreply@anthropic.com>"

---

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:

---
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)}`;
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-16 md:py-20">
    <div class="max-w-3xl mx-auto">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">
        // Built by people who've done this before
      </p>
      <blockquote class="border-l-[3px] border-accent pl-5 max-w-[62ch]">
        <p class="text-lg md:text-xl text-text italic leading-relaxed mb-3">
          &ldquo;We spent 15 years building integration monitoring for banks that couldn&rsquo;t afford downtime. Cameleer is what we&rsquo;d build today &mdash; purpose-built for Apache Camel, no retrofit.&rdquo;
        </p>
        <footer class="text-sm font-mono text-text-muted">
          &mdash; <span class="text-text">{founderName}</span>, co-founder &middot; ex-nJAMS
        </footer>
      </blockquote>
      <a
        href={designPartnerHref}
        class="inline-flex items-center gap-2 mt-7 font-mono text-sm text-cyan hover:text-accent transition-colors"
      >
        Apply to the design-partner program <span aria-hidden="true">&rarr;</span>
      </a>
    </div>
  </div>
</section>

• 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

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) <noreply@anthropic.com>"

---

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:

---
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.',
  },
];
---
<section id="walkthrough" class="border-b border-border bg-bg">
  <div class="max-w-content mx-auto px-6 py-24 md:py-32">
    <div class="max-w-3xl mb-14 md:mb-20">
      <p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">// When something breaks</p>
      <h2 class="text-hero font-bold text-text mb-5">
        The 3 AM page. With and without Cameleer.
      </h2>
      <p class="text-lg text-text-muted leading-relaxed">
        Same Camel app. Same failed exchange. Different night.
      </p>
    </div>

    <div class="grid md:grid-cols-2 gap-6 md:gap-8 items-stretch">
      <!-- Left: Without Cameleer -->
      <div class="without-card relative rounded-lg border border-dashed border-border-strong bg-bg overflow-hidden">
        <div class="px-5 pt-5 pb-3 font-mono text-[11px] tracking-[0.2em] uppercase text-text-faint border-b border-border">
          Without Cameleer · 03:12 AM
        </div>
        <pre class="font-mono text-[13px] leading-[1.65] text-text-muted px-5 py-5 overflow-x-auto whitespace-pre"><code><span class="text-text">$</span> kubectl logs camel-router-7d4f8c
<span class="text-rose">ERROR</span> org.apache.camel.CamelExecutionException
  at org.apache.camel.processor.SendProcessor.process
  at org.apache.camel.processor.Pipeline.process
  ...

<span class="text-text">$</span> grep "order-842" *.log
router-3.log: <span class="text-accent">WARN</span>  exchange order-842 stuck in saga-fulfillment
router-3.log: <span class="text-rose">ERROR</span> processor backend:80 → connect timeout

<span class="text-text">$</span> ssh prod-integration-3
prod-integration-3 $ kubectl logs ...

&gt; <span class="text-cyan">slack #integration-team</span>
  "anyone know why order-842 is stuck??"
  <span class="text-text-faint">[3 of 4 reactions, no answer]</span>

<span class="text-accent">~47 min later: someone wakes up an SRE.</span></code></pre>
      </div>

      <!-- Right: With Cameleer -->
      <figure class="with-card relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
        <div class="px-5 pt-5 pb-3 font-mono text-[11px] tracking-[0.2em] uppercase text-accent border-b border-border">
          With Cameleer · 30 sec
        </div>
        <Lightbox
          src="/product/error-detail.png"
          alt="Cameleer Mission Control — failed exchange order-842 with full execution context"
          width={1920}
          height={945}
          loading="lazy"
          imgClass="block w-full h-auto"
        />
        <div class="px-5 py-4 font-mono text-[13px] leading-[1.6] text-text-muted border-t border-border">
          <span class="text-accent">▸</span> Open exchange <span class="text-text">order-842</span> → see the failure pinned → click <span class="text-text">Replay</span> after fix.
        </div>
        <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
      </figure>
    </div>

    <ul class="grid md:grid-cols-3 gap-6 md:gap-8 mt-14">
      {callouts.map((c, i) => (
        <li class="relative pl-10">
          <span
            class="absolute left-0 top-0 inline-flex items-center justify-center w-7 h-7 rounded-full border border-accent/40 bg-accent/10 text-accent font-mono text-xs"
            aria-hidden="true"
          >
            {String(i + 1).padStart(2, '0')}
          </span>
          <h3 class="text-text font-semibold mb-1.5">{c.title}</h3>
          <p class="text-text-muted leading-relaxed">{c.body}</p>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
  .with-card {
    box-shadow:
      0 1px 0 rgba(240, 180, 41, 0.08) inset,
      0 30px 60px -25px rgba(0, 0, 0, 0.7),
      0 12px 30px -12px rgba(0, 0, 0, 0.5);
  }
</style>

• 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

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 <pre> 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 <pre> 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) <noreply@anthropic.com>"

---

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 <script> block).
2. Replace with a single H1.
3. Add the price microline under the CTAs.
4. Pass new props to CTAButtons for the secondary CTA (See it in action ↓ → #walkthrough).
5. Add three positioned annotation pins on top of the existing screenshot, plus three short callout labels rendered below the image.

• Step 4.1: Read the current file

Use the Read tool on src/components/sections/Hero.astro (required by edit hooks).

• Step 4.2: Replace the file with the rebuilt version

Write the full content below to src/components/sections/Hero.astro:

---
import CTAButtons from '../CTAButtons.astro';
import TopographicBg from '../TopographicBg.astro';
import Lightbox from '../Lightbox.astro';

interface Pin {
  label: string;
  body: string;
  // Position percentages relative to the screenshot container.
  top: string;
  left: string;
}

const pins: Pin[] = [
  { label: '01', body: 'Correlation ID — click to follow one exchange across services.', top: '14%', left: '12%' },
  { label: '02', body: 'Failure in context — circuit breaker tripped, fallback ran, tried backend:80.', top: '46%', left: '52%' },
  { label: '03', body: 'Full error pinned — exception, stack trace, headers, payload.', top: '78%', left: '78%' },
];
---
<section class="relative overflow-hidden border-b border-border">
  <TopographicBg opacity={0.22} lines={11} />
  <div class="relative max-w-content mx-auto px-6 pt-16 pb-20 md:pt-24 md:pb-24 lg:pt-28">
    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
      <div class="lg:col-span-5">
        <img
          src="/cameleer-logo.svg"
          width="64"
          height="64"
          alt=""
          decoding="async"
          class="shrink-0 mb-5 hero-mark"
        />
        <p
          class="inline-flex items-center gap-2 mb-7 rounded-full border border-accent/30 bg-accent/[0.08] text-accent px-3.5 py-1 text-sm italic font-medium"
        >
          <span aria-hidden="true" class="text-base">✦</span>
          Your camels called. They want a GPS.
        </p>
        <h1 class="font-bold text-text mb-6 hero-h1">
          Ship Camel integrations. Sleep through the night.
        </h1>
        <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-8">
          Cameleer is the hosted runtime and observability platform for Apache Camel — auto-traced, replay-ready, cross-service correlated. The 3 AM page becomes a 30-second answer.
        </p>
        <CTAButtons
          size="lg"
          secondaryLabel="See it in action ↓"
          secondaryHref="#walkthrough"
        />
        <p class="mt-4 font-mono text-xs text-text-faint">
          14-day trial · from €20/mo · no credit card
        </p>
      </div>
      <div class="lg:col-span-7 relative">
        <div class="hero-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
          <Lightbox
            src="/product/exchange-detail.png"
            alt="Cameleer Mission Control — route execution detail with processor-level trace"
            width={1920}
            height={945}
            loading="eager"
          />
          <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
          {pins.map((pin) => (
            <span
              aria-hidden="true"
              class="hero-pin absolute inline-flex items-center justify-center w-7 h-7 rounded-full bg-accent text-bg font-mono text-xs font-bold pointer-events-none"
              style={`top:${pin.top};left:${pin.left}`}
            >
              {pin.label}
            </span>
          ))}
        </div>
        <ul class="hero-pin-legend mt-5 grid sm:grid-cols-3 gap-3 text-text-muted">
          {pins.map((pin) => (
            <li class="flex items-start gap-2 text-sm leading-snug">
              <span class="font-mono text-accent text-xs mt-0.5">{pin.label}</span>
              <span>{pin.body}</span>
            </li>
          ))}
        </ul>
        <div aria-hidden="true" class="hero-shot-glow"></div>
      </div>
    </div>
  </div>
</section>

<style>
  .hero-h1 {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .hero-shot {
    box-shadow:
      0 1px 0 rgba(240, 180, 41, 0.08) inset,
      0 30px 60px -20px rgba(0, 0, 0, 0.6),
      0 10px 25px -10px rgba(0, 0, 0, 0.5);
  }
  .hero-pin {
    box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
  }
  .hero-shot-glow {
    position: absolute;
    inset: 10% -5% 10% -5%;
    background: radial-gradient(60% 60% at 50% 50%, rgba(240, 180, 41, 0.18), transparent 70%);
    filter: blur(40px);
    z-index: -1;
  }
  @keyframes hero-mark-sway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-1.5deg); }
  }
  .hero-mark {
    animation: hero-mark-sway 7s ease-in-out infinite;
    transform-origin: 50% 90%;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-mark { animation: none; }
  }
</style>

• Step 4.3: Verify the build

Run: npm run build Expected: build succeeds. The rotator script and old [data-hero-rotator] selector are gone.

• Step 4.4: Commit

git add src/components/sections/Hero.astro
git commit -m "feat(hero): single H1, annotation pins, microline, anchor CTA

- Drop the rotating headline and its <script> block
- Replace with single category-defining H1: 'Ship Camel integrations.
  Sleep through the night.'
- Add price microline under the CTAs (14-day trial · from €20/mo)
- Replace 'Sign in' secondary CTA with 'See it in action ↓' anchor
  to #walkthrough
- Add three numbered annotation pins overlaid on the screenshot,
  with a 3-up legend below the image (correlation ID, failure
  context, error pinned)

The eyebrow pill is retained — the only surviving camel pun on
the homepage per the pun-budget decision in the spec.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 5: Slim HowItWorks.astro copy

Files:

• Modify: src/components/sections/HowItWorks.astro

Spec reference: §6.4. Cut the redundant "no SDK / nothing to instrument" repetition since it's already in the Hero sub.

• Step 5.1: Read the current file

Use the Read tool on src/components/sections/HowItWorks.astro.

• Step 5.2: Apply the edit

Replace the steps array (current lines 9-25) with the slimmed version:

const steps: Step[] = [
  {
    n: '01',
    title: 'Point us at your Camel app',
    body: 'Drop it in, or connect one you already run. No code changes.',
  },
  {
    n: '02',
    title: 'We take it from there',
    body: 'Every route, every processor, every exchange — discovered and traced automatically. Sensitive fields are masked by default.',
  },
  {
    n: '03',
    title: 'Watch it run',
    body: 'Browse executions, tap live traffic, replay failed exchanges, follow flows across services.',
  },
];

(Use the Edit tool — old_string is the existing steps array literal, new_string is the new one above.)

• Step 5.3: Verify the build

Run: npm run build Expected: build succeeds.

• Step 5.4: Commit

git add src/components/sections/HowItWorks.astro
git commit -m "refactor(how-it-works): slim repetitive 'no SDK' boilerplate

The 'no code changes / no SDK / no rewrite' line is already said
clearly in the Hero subhead and the WhyUs cards.  Repeating it on
step 1 of HowItWorks adds nothing.  Step 3's tail 'Nothing to
instrument. Nothing to maintain.' is two sentences saying the
same thing — both removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 6: Refresh WhyUs.astro (cut watermark, reword card 2)

Files:

• Modify: src/components/sections/WhyUs.astro

Spec reference: §6.5. Two changes: drop the giant 03:00 decorative watermark on card 2, and reword card 2 to remove the second 3 AM reference.

• Step 6.1: Read the current file

Use the Read tool on src/components/sections/WhyUs.astro.

• Step 6.2: Replace the file with the refreshed version

Write the full content below to src/components/sections/WhyUs.astro:

---
// Final nJAMS-legacy wording is subject to Hendrik's trademark review before go-live
// (see docs/superpowers/specs/2026-04-24-cameleer-website-design.md §10).
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-16">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Why Cameleer</p>
      <h2 class="text-hero font-bold text-text mb-4">
        A purpose-built tool, from the team that has built integration observability before.
      </h2>
    </div>
    <div class="grid md:grid-cols-2 gap-8 md:gap-12">
      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
        <h3 class="text-xl font-bold text-text mb-4">Generic APMs do not understand Camel. Cameleer does.</h3>
        <p class="text-text-muted leading-relaxed mb-4">
          Most monitoring tools see your app as a Java process and a pile of HTTP calls. Cameleer understands that you are running a Camel app — choices, splits, multicasts, error handlers, and every other EIP pattern as first-class citizens.
        </p>
        <p class="text-text-muted leading-relaxed">
          So when you ask &ldquo;why did this exchange fail?&rdquo;, you get an answer, not a log tail. And you can reach back into a running app to replay a message, deep-trace a correlation ID, or toggle recording — observability that does things, not just shows them.
        </p>
      </div>
      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
        <h3 class="text-xl font-bold text-text mb-4">Built by people who've operated integration in production for 15 years.</h3>
        <p class="text-text-muted leading-relaxed mb-4">
          We spent over a decade building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange is a regulatory event, not just an inconvenience.
        </p>
        <p class="text-text-muted leading-relaxed">
          Cameleer is what we'd build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
        </p>
      </div>
    </div>
  </div>
</section>

• Step 6.3: Verify the build

Run: npm run build Expected: build succeeds.

• Step 6.4: Commit

git add src/components/sections/WhyUs.astro
git commit -m "refactor(why-us): drop 03:00 watermark, reword card 2

The decorative giant '03:00' watermark on card 2 plus its 'live'
ops-desk timestamp gimmick was the third repetition of the 3 AM
metaphor on the homepage — the post-launch review flagged that
five hits turns a sharp pain point into a slogan.

Card 2 reworded to lead with 'operated integration in production
for 15 years' — same pedigree claim, no second 3 AM reference.
The walkthrough section already does the 3 AM beat in full.

Card 1 unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 7: Rebuild FinalCTA.astro

Files:

• Modify: src/components/sections/FinalCTA.astro

Spec reference: §6.7. Drop the camel pun, reword H2 to bookend the hero, single CTA.

• Step 7.1: Read the current file

Use the Read tool on src/components/sections/FinalCTA.astro.

• Step 7.2: Replace the file with the rebuilt version

Write the full content below to src/components/sections/FinalCTA.astro:

---
import CTAButtons from '../CTAButtons.astro';
import TopographicBg from '../TopographicBg.astro';
---
<section class="relative overflow-hidden">
  <TopographicBg opacity={0.18} lines={6} />
  <div class="relative max-w-content mx-auto px-6 py-24 md:py-32 text-center">
    <h2 class="text-display font-bold text-text mb-6">
      Ship integrations. Sleep through the night.
    </h2>
    <p class="text-lg md:text-xl text-text-muted max-w-prose mx-auto mb-10">
      14-day free trial. Your first Camel app, hosted, traced, and running in under ten minutes. No code changes.
    </p>
    <div class="flex justify-center">
      <CTAButtons size="lg" showSecondary={false} />
    </div>
  </div>
</section>

• Step 7.3: Verify the build

Run: npm run build Expected: build succeeds.

• Step 7.4: Commit

git add src/components/sections/FinalCTA.astro
git commit -m "refactor(final-cta): bookend the hero, drop camel pun

H2 now echoes the Hero (intentional bookend pattern).  Sub line
loses the 'No camels harmed' aside.  Single primary CTA — no
secondary.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 8: Refresh PricingTeaser.astro (rename tiers, 2 cards on homepage)

Files:

• Modify: src/components/sections/PricingTeaser.astro

Spec reference: §6.6. Rename to Trial / Starter / Scale / Enterprise, show only Trial + Starter on the homepage, replace the inline link with a "See all plans" line below.

• Step 8.1: Read the current file

Use the Read tool on src/components/sections/PricingTeaser.astro.

• Step 8.2: Replace the file with the rebuilt version

Write the full content below to src/components/sections/PricingTeaser.astro:

---
import { getAuthConfig } from '../../config/auth';

interface Tier {
  name: string;
  price: string;
  sub: string;
  href: string;
  cta: string;
  highlight?: boolean;
}

const auth = getAuthConfig();

const tiers: Tier[] = [
  {
    name: 'Trial',
    price: 'Free',
    sub: '14 days · 1 environment · 2 apps',
    href: auth.signUpUrl,
    cta: 'Start free trial',
  },
  {
    name: 'Starter',
    price: '20 € /mo',
    sub: '2 environments · 10 apps · 7-day retention',
    href: auth.signUpUrl,
    cta: 'Start on Starter',
    highlight: true,
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-12">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
      <h2 class="text-hero font-bold text-text mb-4">Start free. Grow when you need to.</h2>
      <p class="text-text-muted text-lg">
        No credit card. No sales call. Just a working trial in ten minutes.
      </p>
    </div>
    <div class="grid md:grid-cols-2 gap-5 lg:items-stretch max-w-3xl">
      {tiers.map((tier) => (
        <div
          class={`relative rounded-lg bg-bg-elevated p-6 flex flex-col transition-all duration-200 ease-out hover:-translate-y-0.5
            ${tier.highlight
              ? 'ring-2 ring-accent shadow-[0_20px_50px_-20px_rgba(240,180,41,0.35)] md:-translate-y-2 md:pt-8 md:pb-7'
              : 'border border-border hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]'}`}
        >
          {tier.highlight && (
            <span class="absolute -top-3 left-6 inline-flex items-center gap-1.5 rounded-full bg-accent text-bg px-3 py-0.5 text-[11px] font-bold tracking-wide font-mono">
              <span aria-hidden="true">★</span>
              MOST POPULAR
            </span>
          )}
          <div class="mb-4">
            <div class={`font-mono text-xs tracking-wider mb-2 ${tier.highlight ? 'text-accent' : 'text-text-muted'}`}>{tier.name.toUpperCase()}</div>
            <div class="text-2xl font-bold text-text">{tier.price}</div>
          </div>
          <p class="text-text-muted text-sm leading-relaxed flex-grow mb-5">{tier.sub}</p>
          <a
            href={tier.href}
            class={`inline-flex items-center justify-center rounded px-4 py-2 text-sm font-semibold transition-colors
              ${tier.highlight
                ? 'bg-accent text-bg hover:bg-accent-muted'
                : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
          >
            {tier.cta}
          </a>
        </div>
      ))}
    </div>
    <p class="mt-8 font-mono text-sm text-text-muted">
      <a href="/pricing" class="text-cyan hover:text-accent transition-colors">
        See all plans (Scale, Enterprise) →
      </a>
    </p>
  </div>
</section>

• Step 8.3: Verify the build

Run: npm run build Expected: build succeeds.

• Step 8.4: Commit

git add src/components/sections/PricingTeaser.astro
git commit -m "refactor(pricing-teaser): rename tiers, show only 2 cards

- Tier rename: MID → Starter (HIGH and Enterprise live on /pricing).
- Homepage shows Trial + Starter only.  Starter retains the
  ★ MOST POPULAR ribbon.
- 'See full comparison →' inline link replaced by a clearer
  'See all plans (Scale, Enterprise) →' line below the cards.
- Trial card price stays 'Free'; the tier name stays honest about
  the 14-day cap.

The full /pricing.astro page still shows all four renamed tiers —
updated separately in the next commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 9: Refresh pricing.astro page tier names

Files:

• Modify: src/pages/pricing.astro

Spec reference: §6.6. Rename all four tiers and update the CTA labels.

• Step 9.1: Read the current file

Use the Read tool on src/pages/pricing.astro.

• Step 9.2: Apply targeted edits

Use the Edit tool to make these four replacements (in order):

Edit 9.2.a — MID tier:

old_string:

    name: 'MID',
    price: '20 €',
    priceNote: 'per month',
    envs: '2 environments',
    apps: '10 apps',
    retention: '7-day retention',
    features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
    href: auth.signUpUrl,
    cta: 'Start on MID',

new_string:

    name: 'Starter',
    price: '20 €',
    priceNote: 'per month',
    envs: '2 environments',
    apps: '10 apps',
    retention: '7-day retention',
    features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
    href: auth.signUpUrl,
    cta: 'Start on Starter',

Edit 9.2.b — HIGH tier:

old_string:

    name: 'HIGH',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: '50 apps',
    retention: '90-day retention',
    features: ['Everything in MID', 'Live debugger', 'Exchange replay', 'Live tap'],

new_string:

    name: 'Scale',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: '50 apps',
    retention: '90-day retention',
    features: ['Everything in Starter', 'Live debugger', 'Exchange replay', 'Live tap'],

Edit 9.2.c — BUSINESS tier:

old_string:

    name: 'BUSINESS',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: 'Unlimited apps',
    retention: '365-day retention',
    features: ['Everything in HIGH', 'Priority support', 'SLA', 'Dedicated success contact'],

new_string:

    name: 'Enterprise',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: 'Unlimited apps',
    retention: '365-day retention',
    features: ['Everything in Scale', 'Priority support', 'SLA', 'Dedicated success contact'],

Edit 9.2.d — page meta description (if it references the old tier names):

Check the BaseLayout description prop for any mention of "MID/HIGH/BUSINESS" — if present, replace with the new names. In the existing pricing.astro the description mentions "20 €/month or enterprise plans" which is still accurate; only update if the actual file references old tier labels.

• Step 9.3: Verify the build

Run: npm run build Expected: build succeeds. dist/pricing/index.html should contain Starter, Scale, Enterprise (and no MID, HIGH, BUSINESS).

• Step 9.4: Sanity check the rendered output

Run: grep -E "MID|HIGH|BUSINESS" dist/pricing/index.html (use the Bash tool — this is a verification, not a forbidden grep). Expected: empty output. If anything is matched, find and rename it.

• Step 9.5: Commit

git add src/pages/pricing.astro
git commit -m "refactor(pricing-page): rename tiers Trial/Starter/Scale/Enterprise

Customer-facing tier names replace the internally-coded
MID/HIGH/BUSINESS labels.  Pricing structure (envs, apps,
retention, features) is unchanged.  CTA labels updated to match.

The 'Everything in X' feature lines are updated to reference the
new neighbour names.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 10: Wire new sections into index.astro

Files:

• Modify: src/pages/index.astro

Spec reference: §5 (final 7-section order). This is the task that makes the new structure live.

• Step 10.1: Read the current file

Use the Read tool on src/pages/index.astro.

• Step 10.2: Replace the file with the rebuilt version

Write the full content below to src/pages/index.astro:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';
import Hero from '../components/sections/Hero.astro';
import SocialProofStrip from '../components/sections/SocialProofStrip.astro';
import ThreeAmWalkthrough from '../components/sections/ThreeAmWalkthrough.astro';
import HowItWorks from '../components/sections/HowItWorks.astro';
import WhyUs from '../components/sections/WhyUs.astro';
import PricingTeaser from '../components/sections/PricingTeaser.astro';
import FinalCTA from '../components/sections/FinalCTA.astro';
---
<BaseLayout
  title="Cameleer — Ship Camel integrations. Sleep through the night."
  description="The hosted runtime and observability platform for Apache Camel. Auto-traced, replay-ready, cross-service correlated — so the 3 AM page becomes a 30-second answer."
>
  <SiteHeader />
  <main>
    <Hero />
    <SocialProofStrip />
    <ThreeAmWalkthrough />
    <HowItWorks />
    <WhyUs />
    <PricingTeaser />
    <FinalCTA />
  </main>
  <SiteFooter />
</BaseLayout>

• Step 10.3: Verify the build

Run: npm run build Expected: build succeeds with no warnings about missing components or unresolved imports.

• Step 10.4: Confirm the new section anchor renders

Run: grep -c 'id="walkthrough"' dist/index.html Expected: 1. The hero's secondary CTA #walkthrough link will now resolve.

• Step 10.5: Commit

git add src/pages/index.astro
git commit -m "feat(homepage): wire SocialProofStrip + ThreeAmWalkthrough

Updates the homepage section order to the proof-first arc:
  Hero → SocialProofStrip → ThreeAmWalkthrough → HowItWorks
  → WhyUs → PricingTeaser → FinalCTA

The retired DualValueProps and ProductShowcase imports are dropped
here; the unused .astro files themselves are deleted in Task 11.

Page <title> + <meta description> updated to lead with the new H1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 11: Delete retired components

Files:

• Delete: src/components/sections/DualValueProps.astro
• Delete: src/components/sections/ProductShowcase.astro

Why now: No consumers remain after Task 10. Removing them keeps the source tree honest.

• Step 11.1: Confirm no imports remain

Run: grep -rn "DualValueProps\|ProductShowcase" src/ (Bash tool). Expected: empty output. If anything matches, fix the consumer first.

• Step 11.2: Delete both files

Run: rm "src/components/sections/DualValueProps.astro" "src/components/sections/ProductShowcase.astro"

• Step 11.3: Verify the build

Run: npm run build Expected: build succeeds. dist/index.html does not regress; the new walkthrough renders in their place.

• Step 11.4: Commit

git add -A src/components/sections/
git commit -m "chore(sections): delete retired DualValueProps + ProductShowcase

These two sections were collapsed into ThreeAmWalkthrough.astro
(Task 3). No remaining consumers — removed from the tree.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"

---

Task 12: Run full quality gates

Files: none modified.

Why: The relaunch is complete. Run every gate the project ships with and record the result. Any failure here is a blocker for merge.

• Step 12.1: Run vitest

Run: npm run test Expected: all tests pass. The relaunch did not touch middleware.ts, auth.ts, or any tested file, so this should be green.

• Step 12.2: Run a clean build

Run: npm run build Expected: ✔ Completed, no warnings, dist/ populated.

• Step 12.3: Run html-validate

Run: npm run lint:html Expected: no errors. If errors appear, fix them and re-run from Step 12.2.

• Step 12.4: Run linkinator

Run: npm run lint:links Expected: no broken links. The new #walkthrough anchor must resolve. If linkinator fails on the in-page anchor (rare — most configs accept fragments), check linkinator.config.json and add the fragment to the skip list only if necessary.

• Step 12.5: Run Lighthouse CI

Run: npm run lh Expected: all 4 categories ≥ 0.95 (the project's existing CI threshold per README.md). If any score regresses below 0.95, investigate and fix before claiming done. Typical regressions to watch for:

• Performance: the new <pre> block in ThreeAmWalkthrough should not push LCP — but verify.

• Accessibility: pin labels (aria-hidden="true" on decorative pins) plus the aria-describedby linkage if any was added; also check tab order on the secondary anchor CTA.

• Step 12.6: Final report — write the summary

Compose a single-screen summary of what changed, where it landed, and any open items (PENDING gates: Founder name, nJAMS trademark). This goes in the final user-facing message, not into a file.

---

Self-review checklist (run by author after writing the plan)

Spec coverage:

• §6.1 Hero rebuild → Task 4 ✓
• §6.2 SocialProofStrip → Task 2 ✓
• §6.3 ThreeAmWalkthrough → Task 3 ✓
• §6.4 HowItWorks slim → Task 5 ✓
• §6.5 WhyUs refresh → Task 6 ✓
• §6.6 PricingTeaser refresh → Task 8 ✓
• §6.6 /pricing tier rename → Task 9 ✓
• §6.7 FinalCTA reword → Task 7 ✓
• §7 Nav unchanged → no task (correct — nothing to do)
• §9 scroll-behavior CSS → Task 1 ✓
• §9 deletions → Task 11 ✓
• §12 Validation → Task 12 ✓
• §12 PENDING gates → surfaced as code comments in Task 2 ✓

Placeholder scan: No "TBD" / "TODO" / "implement later" markers in any task body. The <!-- PENDING --> markers in SocialProofStrip.astro are intentional code comments per spec §12 — they survive into the shipped code as deliberate publish gates.

Type / name consistency: auth.salesEmail is used in Task 2 and matches the actual export in src/config/auth.ts. Lightbox is imported in both Hero and ThreeAmWalkthrough with consistent props. CTAButtons props (secondaryLabel, secondaryHref, showSecondary) match the existing component API.

Order safety: Each task leaves the build green. Tasks 2-3 add components without consumers; Tasks 4-9 modify existing components in place; Task 10 swaps the imports atomically; Task 11 deletes only after no consumers remain.