From e3383471d1cb679ab65efcf0e5fba6929815b679 Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Sat, 25 Apr 2026 02:26:46 +0200 Subject: [PATCH 01/14] docs(specs): cameleer website relaunch design (2026-04-25) Structural relaunch of the homepage to address the conversion gaps identified in the post-launch design review: - Single H1 (kill the rotating one) - New social proof strip (founder quote + design-partner CTA) - 3 AM walkthrough section with before/after split (replaces DualValueProps + ProductShowcase) - Pricing tier rename: Trial / Starter / Scale / Enterprise - Pricing teaser slimmed to 2 cards on the homepage - Pun budget cut from 5+ to 1 (eyebrow pill survives) Static stack, hosting, and security posture unchanged from the 2026-04-24 spec. Co-Authored-By: Claude Opus 4.7 (1M context) --- ...-04-25-cameleer-website-relaunch-design.md | 417 ++++++++++++++++++ 1 file changed, 417 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md diff --git a/docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md b/docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md new file mode 100644 index 0000000..2446edd --- /dev/null +++ b/docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md @@ -0,0 +1,417 @@ +# Cameleer website — relaunch design spec + +**Date**: 2026-04-25 +**Status**: Approved for implementation planning +**Project**: `cameleer-website` +**Supersedes (homepage composition only)**: `2026-04-24-cameleer-website-design.md` §6 (homepage layout) and `2026-04-24-cameleer-website-copy-refresh-design.md` §2 (rotating hero) +**Preserved from prior specs**: architecture, hosting, security posture, auth flow, audience model, tech stack, brand mark, design tokens + +--- + +## 1. Overview + +The current marketing site, while well-crafted at the component level, is strategically under-powered: a rotating H1 fails the 5-second test, the page leans 5+ camel puns deep, "3 AM" is repeated to slogan-status, there's no social proof anywhere, the screenshot is unannotated, and the homepage shows four pricing tiers (two of which say "Contact"). This spec rebuilds the homepage composition and copy to address those gaps. + +**Three goals:** + +1. Pass the 5-second test for two audiences in parallel (DevOps Engineers + IT Managers). +2. Carry the page on credible trust anchors despite having zero customer logos to ship. +3. Ship within the same static-only Astro 5 stack — no new dependencies, no backend, no forms, no analytics. + +The pricing page (`/pricing.astro`) gets a tier-naming refresh; everything else outside the homepage stays as-is. + +--- + +## 2. Non-goals (preserved from prior spec) + +These remain explicitly **out of scope** — same list as `2026-04-24-cameleer-website-design.md` §3: + +- Blog, docs, features page, about page, changelog, case studies (Docs/Changelog nav stubs deferred to a future phase — see §10) +- Contact forms, newsletter signup, lead-capture, email automation +- Interactive product demos, video players +- Analytics, tracking pixels, cookie consent banners +- Custom sign-up or sign-in forms (all auth redirects to Logto) +- Backend code on the marketing host +- Customer logos, attributed customer quotes (no customers ready to publish yet — see §4) + +--- + +## 3. Audiences (unchanged) + +Same two-audience model as the prior spec. Every section continues to label its primary audience lean: + +| Audience | Role | What they need from the page | +|----------|------|------------------------------| +| **Managers** (amber) | Integration leads, architects who sign the check | Business outcomes, risk reduction, pedigree, pricing clarity | +| **Engineers** (cyan) | Camel developers, DevOps, SREs | Capability, mechanism, coverage, zero-friction mechanics | + +The relaunch's H1 leans Manager-outcome on purpose — the IT Manager is the check-signer, "sleep through the night" speaks to both audiences (one runs the pager, one carries the cost of a bad pager night). + +--- + +## 4. Trust anchors (the social proof problem) + +The original site shipped with no social proof. This relaunch can't fix that with logos or attributed customer quotes — **none are ready to publish**. The two anchors we *can* lean on: + +1. **Founder pedigree** (nJAMS lineage). Subject to trademark clearance — same gating as `WhyUs.astro`'s existing comment. Until cleared, the wording is held in a `` HTML comment. +2. **Design-partner program**. Reframes the pre-customer state as a feature ("hand-picked early partners"), with a `mailto:` CTA to `PUBLIC_SALES_EMAIL` that the visitor can use to apply. + +Both anchors live in a new dedicated **Social Proof Strip** section (§6.2) immediately below the hero. + +--- + +## 5. Page structure — final 7 sections + +| # | Section | Status | Source files | +|---|---------|--------|--------------| +| 1 | **Hero** | Rebuilt-in-place | `Hero.astro` | +| 2 | **Social proof strip** | NEW | `SocialProofStrip.astro` (new) | +| 3 | **3 AM walkthrough** | Replaces DualValueProps + ProductShowcase | `ThreeAmWalkthrough.astro` (new); old files deleted | +| 4 | **How it works** | Rebuilt-in-place | `HowItWorks.astro` | +| 5 | **Why Cameleer** | Rebuilt-in-place | `WhyUs.astro` | +| 6 | **Pricing teaser** | Rebuilt-in-place | `PricingTeaser.astro` | +| 7 | **Final CTA** | Rebuilt-in-place | `FinalCTA.astro` | + +Order is deliberate — see §11 for the rationale (proof-first arc: hero → who built it → product walkthrough → how → why → pricing → close). + +--- + +## 6. Section content + +### 6.1 Hero (rebuilt) + +**Audience lean**: Manager-outcome, with engineer-readable proof on the right. + +**Layout**: existing 5/7 grid retained — left column copy, right column screenshot. + +**Left column copy:** + +- **Eyebrow pill** (mono, accent, italic — kept from current): `✦ Your camels called. They want a GPS.` — this is the *only* surviving camel pun on the homepage. +- **H1** (single, no rotator): **Ship Camel integrations. Sleep through the night.** +- **Sub** (~18px, muted): "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." +- **Primary CTA**: `Start free trial` (existing `CTAButtons` primary, no changes). +- **Secondary CTA**: `See it in action ↓` — anchor link to `#walkthrough`. New, replaces the existing `Sign in` button which moves to top-right nav only. +- **Microline** (mono, muted, ~12px) under CTAs: `14-day trial · from €20/mo · no credit card`. + +**Right column**: + +- Existing `Lightbox` of `/product/exchange-detail.png` is retained. +- Three numbered annotation pins overlaid on the image via positioned absolute spans (no PNG re-bake). Pins coordinate with three short callout labels rendered *below* the image (not on it): + 1. **Correlation ID** — "Click to follow one exchange across services." + 2. **Failure in context** — "Circuit breaker tripped. Fallback ran. Tried `backend:80`." + 3. **Full error pinned** — "Exception, stack trace, headers, payload — all here." +- The pin-to-callout mapping is achieved with `aria-describedby` so screen-readers reach the explanation. +- The hero-mark sway and topographic background are retained. + +**Hero rotator removed.** The three rotating lines are not rehomed — the eyebrow pill carries the brand voice, the H1 carries the product claim. This is a deliberate reduction in pun count from 5+ to 1. + +### 6.2 Social proof strip (NEW) + +**Audience lean**: Both — managers see pedigree, engineers see honest framing. + +**Component**: `SocialProofStrip.astro` (new, in `src/components/sections/`). + +**Layout**: full-width section, dark, no card-style border. Visually quieter than the surrounding sections so it reads as a *trust line*, not a feature block. Vertical padding ~py-16. + +**Content** (single content column, `max-w-3xl mx-auto px-6`): + +- **Eyebrow** (mono, amber, ~12px): `// Built by people who've done this before` +- **Quote block** (italic, ~17px, max 62ch, accent-colored 3px left border, padding-left ~20px): + > *"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."* +- **Attribution** (~13px, muted, mono): `— [Founder Name], co-founder · ex-nJAMS` +- **Below attribution** (~24px gap, then a single `mailto:`-styled CTA in mono+cyan): `Apply to the design-partner program →` + +**`` gates** (do not ship without resolving): + +- `[Founder Name]` is a placeholder. +- `ex-nJAMS` mention is gated on trademark clearance (same as `WhyUs.astro`'s existing §10 caveat). +- Either gate may be deferred by removing the affected line — the section still works as "pedigree quote, design-partner CTA" without the nJAMS-specific phrase. + +**Design-partner CTA target**: built inline in `SocialProofStrip.astro` using `auth.salesEmail` (not `auth.salesMailto`, which has no subject helper): + +```astro +href={`mailto:${auth.salesEmail}?subject=${encodeURIComponent('Design partner enquiry — Cameleer')}`} +``` + +No body — let the applicant introduce themselves. + +### 6.3 3 AM walkthrough (replaces DualValueProps + ProductShowcase) + +**Audience lean**: Engineer-pain on the left, Engineer-resolution on the right; Manager reads the contrast. + +**Component**: `ThreeAmWalkthrough.astro` (new). Old `DualValueProps.astro` and `ProductShowcase.astro` are deleted. + +**Section id**: `walkthrough` (anchor target for the hero secondary CTA). + +**Layout**: a two-column responsive split that collapses to stacked at `md` and below. Below the split, a single row of three short callouts. + +**Header block**: + +- **Eyebrow** (mono, cyan): `// When something breaks` +- **H2**: **The 3 AM page. With and without Cameleer.** +- **Sub** (one line): "Same Camel app. Same failed exchange. Different night." + +**Split — left column ("Without Cameleer")**: + +- Container: rounded card, `bg-bg`, dashed border, mono font. +- Top tag (`text-text-faint`, mono, uppercase, tracking): `Without Cameleer · 03:12 AM`. +- Body: a styled `
` block with realistic Camel-ish log content. Approximate content (final wording in implementation):
+  ```
+  $ kubectl logs camel-router-7d4f8c
+  ... [stack-trace excerpt — Camel-style line refs] ...
+
+  $ 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]
+
+  ~47 min later: someone wakes up an SRE.
+  ```
+- Tone: muted/red-tinged for the stack trace lines, neutral muted for the rest, accent (sad amber) on the "47 min" closer.
+
+**Split — right column ("With Cameleer")**:
+
+- Container: rounded card, `bg-bg-elevated`, accent-tinted border, retains the same `box-shadow` glow as the existing showcase.
+- Top tag (mono, accent): `With Cameleer · 30 sec`.
+- Body: existing `Lightbox` of `/product/error-detail.png` (or a tighter crop — implementation may use the existing image). No annotation pins here — the hero already does the annotated-image pattern; this section is about the *contrast*, not the deep-dive.
+- Below the image, a single line: `▸ Open exchange order-842 → see the failure pinned → click Replay after fix.`
+
+**Below the split — three short callouts** (3-up grid at `lg`, stacks below):
+
+1. **Cross-service correlation** — "Every exchange carries its correlation ID forward. One click jumps to what the downstream route did with the same message."
+2. **Runtime detail, not guesswork** — "Circuit breaker tripped. Fallback path ran. Request tried `backend:80`. The pieces a 3 AM page actually needs — already captured."
+3. **The whole story of a failure** — "Exception class, message, stack trace, headers, payload — all pinned to the exchange. No log-grepping tour."
+
+(These three are the existing `ProductShowcase.astro` callouts, kept verbatim. They earn their place after the dramatic split — they explain *what* you saw on the right.)
+
+**Asset note**: the "Without Cameleer" content is implemented as a styled `
` block within the Astro component — no PNG asset required, no Photoshop, no licensing. A future phase may swap to a recorded terminal screenshot if it tests better; the swap is a one-component change.
+
+### 6.4 How it works (rebuilt-in-place)
+
+**Audience lean**: Engineer.
+
+Same 3-step layout, same component. Slim the copy:
+
+| Step | Title | Body (final) |
+|------|-------|--------------|
+| 01 | Point us at your Camel app | Drop it in, or connect one you already run. No code changes. |
+| 02 | We take it from there | Every route, every processor, every exchange — discovered and traced automatically. Sensitive fields are masked by default. |
+| 03 | Watch it run | Browse executions, tap live traffic, replay failed exchanges, follow flows across services. |
+
+**Cuts**: the redundant "No SDK. Nothing to rewrite." line on step 1 (already said in Hero), and the duplicate "Nothing to instrument. Nothing to maintain." at the end of step 3 (two consecutive sentences saying the same thing).
+
+### 6.5 Why Cameleer (rebuilt-in-place)
+
+**Audience lean**: Manager.
+
+Same 2-card layout. Two changes:
+
+1. **Cut the giant `03:00` decorative watermark** on card 2. The 3 AM beat is now told in the walkthrough; repeating it as a wall-decal here is the "five hits on one metaphor" the roast flagged.
+2. **Reword card 2** to remove the second 3 AM reference. New body (replacing both paragraphs):
+
+   - **H3**: **Built by people who've operated integration in production for 15 years.**
+   - **P1**: "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."
+   - **P2**: "Cameleer is what we'd build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform."
+
+   The "3 AM" phrasing is dropped; the pedigree claim is now told once in §6.2 (with the founder face) and again here (with the philosophy). Two distinct beats, not the same beat twice.
+
+Card 1 (Generic APMs) stays as-is.
+
+### 6.6 Pricing teaser (rebuilt-in-place)
+
+**Audience lean**: Both.
+
+**Tier rename across both `index.astro` and `/pricing.astro`**:
+
+| Old name | New name | Price (unchanged) | Homepage teaser? |
+|----------|----------|--------------------|-------------------|
+| Trial | **Trial** | Free · 14 days | ✓ |
+| MID | **Starter** | 20 € /mo | ✓ (highlight) |
+| HIGH | **Scale** | Contact | — link only |
+| BUSINESS | **Enterprise** | Contact | — link only |
+
+The first tier keeps the name **Trial** (not "Free") because it's time-limited; the price column shows "Free" but the tier name stays honest about the 14-day cap.
+
+**Homepage teaser layout**: 2 cards (Trial + Starter), Starter retains the `★ MOST POPULAR` ribbon.
+
+**CTA labels** on the two cards:
+
+- Trial card: `Start free trial` → `auth.signUpUrl`
+- Starter card: `Start on Starter` → `auth.signUpUrl` (was: `Start on MID`)
+
+**Below the cards**: a single line link: `See all plans (Scale, Enterprise) →` to `/pricing`. Replaces the inline "See full comparison →" link in the heading area.
+
+**`/pricing.astro` page**: identical structure to today, but tier names updated to the renamed taxonomy and CTA labels updated accordingly.
+
+### 6.7 Final CTA (rebuilt-in-place)
+
+- **H2**: **Ship integrations. Sleep through the night.** (echoes H1 — bookend pattern, intentional repetition).
+- **Sub**: "14-day free trial. Your first Camel app, hosted, traced, and running in under ten minutes. No code changes."
+- **CTA**: `Start free trial` (single, primary). `CTAButtons` rendered with `showSecondary={false}`.
+
+**Cut**: the entire `Your camels called. Time to ride.` line and the `No camels harmed.` aside.
+
+---
+
+## 7. Navigation (unchanged)
+
+`SiteHeader.astro` keeps its current structure: Logo · Pricing · `[Sign in]` · `[Start free trial]`.
+
+Docs / Changelog nav stubs are deferred to a follow-up phase. A "coming soon" stub page is worse than no nav entry. When real Docs or a real Changelog exists, this nav grows.
+
+---
+
+## 8. Voice and pun budget
+
+**One camel pun on the homepage.** The eyebrow pill `Your camels called. They want a GPS.` is retained — it sits under the H1 (doesn't compete), it's witty without being a punchline, and it gives the brand voice one signature beat.
+
+**Removed from the homepage:**
+
+- `Camel integrations, minus the baggage.` (rotator line 2)
+- `Your camels, our caravan. You just ride.` (rotator line 3)
+- `Your camels called. Time to ride.` (FinalCTA H2 — replaced)
+- `No camels harmed.` (FinalCTA sub — removed)
+
+**3 AM mentions** are now told as one beat in §6.3 (the walkthrough) and one micro-mention in the H1 sub. The `03:00` decorative watermark on `WhyUs.astro` card 2 is cut. Three references → two. Slogan-status → narrative status.
+
+---
+
+## 9. Component-level changes
+
+**New files:**
+
+- `src/components/sections/SocialProofStrip.astro`
+- `src/components/sections/ThreeAmWalkthrough.astro`
+
+**Deleted files:**
+
+- `src/components/sections/DualValueProps.astro`
+- `src/components/sections/ProductShowcase.astro`
+
+**Modified files:**
+
+- `src/components/sections/Hero.astro` — rotator removed, eyebrow + H1 + sub + secondary CTA + microline + annotation pins
+- `src/components/sections/HowItWorks.astro` — body copy slimmed (steps 1, 3)
+- `src/components/sections/WhyUs.astro` — `03:00` watermark removed, card 2 reworded, founder/3-AM language refactored
+- `src/components/sections/PricingTeaser.astro` — tier renaming + 2-card homepage layout + "See all plans" link
+- `src/components/sections/FinalCTA.astro` — H2 + sub + single-CTA reworked
+- `src/components/CTAButtons.astro` — accept new optional `secondaryLabel`/`secondaryHref` overrides for hero's `See it in action ↓` (already supported by existing prop interface — no API change required)
+- `src/pages/index.astro` — section order updated, deleted/new components wired
+- `src/pages/pricing.astro` — tier renaming applied to the full table
+
+**Unchanged:**
+
+- `src/components/SiteHeader.astro`
+- `src/components/SiteFooter.astro`
+- `src/components/Lightbox.astro`
+- `src/components/RouteDiagram.astro`
+- `src/components/TopographicBg.astro`
+- `src/config/auth.ts`
+- `src/middleware.ts`
+- `tailwind.config.mjs` (no new tokens needed)
+- `astro.config.mjs`
+
+**Also modified:**
+
+- `src/styles/global.css` — add `html { scroll-behavior: smooth; }` plus a `@media (prefers-reduced-motion: reduce)` override resetting it to `auto`. Required for the hero secondary CTA's anchor scroll to feel natural.
+
+---
+
+## 10. Asset deliverables
+
+**No new image assets required for v1 of the relaunch.** Specifically:
+
+- The "Without Cameleer" panel in §6.3 is a styled `
` block. No screenshot needed.
+- The "With Cameleer" panel reuses the existing `/product/error-detail.png`.
+- Hero annotation pins are HTML/CSS overlays on the existing `/product/exchange-detail.png` — no PNG re-bake.
+
+**Future enhancement candidates** (not blocking this relaunch):
+
+- Replace the `
` "without" panel with a recorded terminal screencap (PNG/SVG).
+- Re-bake `/product/exchange-detail.png` with annotations baked in if HTML overlays prove brittle on responsive breakpoints.
+
+---
+
+## 11. Why this order works (proof-first arc)
+
+The H1 makes a strong claim ("30-second answer at 3 AM"). The page below has to deliver proof in order:
+
+1. **Hero** — claim + annotated screenshot (claim + a thumbnail of the proof).
+2. **Social proof strip** — *who* is making this claim, why you should believe them.
+3. **3 AM walkthrough** — *show* the 30-second answer side-by-side with the alternative.
+4. **How it works** — by now the visitor wants to know "ok how do I get this".
+5. **Why Cameleer** — manager-voiced reassurance: "purpose-built, not generic."
+6. **Pricing teaser** — clarity, two cards, no contact-sales wall.
+7. **Final CTA** — the bookend.
+
+A traditional SaaS layout (features → benefits → how → pricing) would put proof in third-party logos before the product walkthrough. We don't have those, so the walkthrough *is* the proof, and the strip + Why Cameleer carry the credibility load.
+
+---
+
+## 12. Validation
+
+**CI gates that must pass on the branch before merge** (existing infrastructure):
+
+- `npm run test` — vitest passes (auth config + middleware tests; the relaunch shouldn't touch these).
+- `npm run build` — Astro static build completes with no errors.
+- `npm run lint:html` — html-validate passes on `dist/`.
+- `npm run lint:links` — linkinator passes on `dist/` (the new `#walkthrough` anchor is internal — link-checker should accept it).
+- `npm run lh` — Lighthouse CI ≥ 0.95 on all 4 categories.
+
+**Manual QA checklist** (operator runs before publish):
+
+- [ ] Hero secondary CTA "See it in action ↓" scrolls smoothly to `#walkthrough` (requires adding `html { scroll-behavior: smooth; }` to `src/styles/global.css`, with a `@media (prefers-reduced-motion: reduce)` override that sets it back to `auto` — see §9).
+- [ ] At `<= md` breakpoint, the walkthrough split stacks with no horizontal scroll.
+- [ ] Annotation pins on the hero screenshot remain positioned correctly across the breakpoints we currently support.
+- [ ] `prefers-reduced-motion: reduce` disables the hero-mark sway and any tile-rise animations (existing handling preserved).
+- [ ] Tab focus order on the homepage is: nav → hero primary → hero secondary → social-proof CTA → walkthrough CTA targets … → final CTA.
+- [ ] All `mailto:` links open with the correct subject (design-partner CTA + sales contacts).
+- [ ] Trademark `` gate in `SocialProofStrip.astro` and `WhyUs.astro` is reviewed before publish.
+- [ ] Founder name placeholder is filled in `SocialProofStrip.astro` before publish.
+
+**Pre-publish blockers** (recorded in code as `` HTML comments):
+
+1. `[Founder Name]` placeholder in `SocialProofStrip.astro` — must be replaced with a real name.
+2. nJAMS / `ex-nJAMS` wording — must clear trademark review (existing pattern from `WhyUs.astro`).
+
+These are deliberately surfaced as code-level TODOs rather than spec-level open questions so the operator can't accidentally publish with the placeholders intact.
+
+---
+
+## 13. Out-of-scope future enhancements
+
+Listed here so they aren't lost — none are part of this spec:
+
+- Customer logo strip in the social-proof section once at least one named pilot agrees to publish.
+- Attributed customer quote + concrete metric (replaces the founder quote when available).
+- Competitive comparison table (cut from this relaunch — revisit after a clear competitive narrative emerges with real customers).
+- Docs and Changelog nav entries (gated on real content existing).
+- Cloudflare Web Analytics opt-in (pending DSGVO review and a need that isn't met by Cloudflare's own zone analytics).
+- Recorded terminal screencap for the "Without Cameleer" panel.
+- A second variant of the H1 (or different secondary CTA) once enough traffic exists for an honest A/B test.
+
+---
+
+## 14. Decision log (for future reference)
+
+Decisions made during the brainstorming session that aren't otherwise visible in the document:
+
+| Decision | Choice | Why |
+|----------|--------|-----|
+| Relaunch ambition | Structural relaunch (composition + copy, not full reposition) | Static stack works; the gap is composition, not infrastructure |
+| H1 voice | Manager-outcome ("Sleep through the night") | Check-signer audience; "sleep" works for both engineers and managers |
+| Hero rotator | Killed | Two of three rotator lines were vibe-only — coin-flip on the 5-second test |
+| Trust anchor | Founder quote + design-partner CTA | No customer logos available; pedigree + honest pre-customer framing |
+| Comparison table | Cut | Not enough competitive narrative to build it honestly today |
+| Tier names | Trial / Starter / Scale / Enterprise | Procurement-friendly, no internally-coded labels |
+| Hero secondary CTA | `See it in action ↓` to `#walkthrough` | Low-commitment escape hatch; keeps visitor on-page |
+| 3 AM walkthrough | Before/after split with real-feeling content | Strongest dramatic contrast; no competitor exposure |
+| "Without Cameleer" image format | Styled `
` block | No asset production blocking the relaunch |
+| Nav additions (Docs/Changelog) | Deferred | Stub pages worse than no entry; revisit when real content exists |
+| Pun budget | 1 (eyebrow pill) | Cut from 5+ to 1; voice survives, novelty tax doesn't |
-- 
2.49.1


From ad4288c3ede6e8b62e58706382beabd67fc15f80 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:31:33 +0200
Subject: [PATCH 02/14] docs(plans): cameleer website relaunch implementation
 plan

Twelve atomic tasks, each ending with its own commit:
  1. Add scroll-behavior:smooth to global.css
  2. Create SocialProofStrip.astro
  3. Create ThreeAmWalkthrough.astro
  4. Rebuild Hero.astro
  5. Slim HowItWorks.astro
  6. Refresh WhyUs.astro
  7. Rebuild FinalCTA.astro
  8. Refresh PricingTeaser.astro
  9. Refresh /pricing.astro tier names
 10. Wire new sections into index.astro
 11. Delete DualValueProps + ProductShowcase
 12. Run full quality gates

Order is build-safe: each task leaves the build green.

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 .../2026-04-25-cameleer-website-relaunch.md   | 1131 +++++++++++++++++
 1 file changed, 1131 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-25-cameleer-website-relaunch.md

diff --git a/docs/superpowers/plans/2026-04-25-cameleer-website-relaunch.md b/docs/superpowers/plans/2026-04-25-cameleer-website-relaunch.md
new file mode 100644
index 0000000..eab9359
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-25-cameleer-website-relaunch.md
@@ -0,0 +1,1131 @@
+# 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 `
-- 
2.49.1


From 0ad067847c032c2bbe8ca298579754de617f2022 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:34:58 +0200
Subject: [PATCH 07/14] refactor(how-it-works): slim repetitive 'no SDK'
 boilerplate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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) 
---
 src/components/sections/HowItWorks.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/HowItWorks.astro b/src/components/sections/HowItWorks.astro
index 6e8c198..7fd8049 100644
--- a/src/components/sections/HowItWorks.astro
+++ b/src/components/sections/HowItWorks.astro
@@ -10,7 +10,7 @@ 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. No SDK. Nothing to rewrite.',
+    body: 'Drop it in, or connect one you already run. No code changes.',
   },
   {
     n: '02',
@@ -20,7 +20,7 @@ const steps: Step[] = [
   {
     n: '03',
     title: 'Watch it run',
-    body: 'Browse executions, tap live traffic, replay failed exchanges, follow flows across services. Nothing to instrument. Nothing to maintain.',
+    body: 'Browse executions, tap live traffic, replay failed exchanges, follow flows across services.',
   },
 ];
 ---
@@ -29,7 +29,7 @@ const steps: Step[] = [
     

       
For engineers

       
How it works

-      
Three steps. No code changes. Nothing to maintain.

+      
Three steps. Nothing to maintain.

     

     
    
       {steps.map((step) => (
-- 
2.49.1


From b1b6b52f3ff4d4c89fb88c73258dfbfe084fe90d Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:35:24 +0200
Subject: [PATCH 08/14] refactor(why-us): drop 03:00 watermark, reword card 2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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) 
---
 src/components/sections/WhyUs.astro | 33 +++++++----------------------
 1 file changed, 8 insertions(+), 25 deletions(-)

diff --git a/src/components/sections/WhyUs.astro b/src/components/sections/WhyUs.astro
index d4ffc88..a5fc5ff 100644
--- a/src/components/sections/WhyUs.astro
+++ b/src/components/sections/WhyUs.astro
@@ -20,31 +20,14 @@
           So when you ask "why did this exchange fail?", 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.
         
    
       
-      
    
-        
-        
    
-          
    
-            
-            03:00:47.218
-            ·
-            ops desk
-          
    
-          
    Built by people who know what 3 AM looks like.
    
-          
    
-            We spent years building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing. We know what integration teams actually need then, and what they never use.
-          
    
-          
    
-            Cameleer is what we would build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
-          
    
-        
    
+      
    
+        
    Built by people who've operated integration in production for 15 years.
    
+        
    
+          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.
+        
    
+        
    
+          Cameleer is what we'd build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
+        
    
       
    
     
    
   
-- 
2.49.1


From 04b930de629e415fe22d029b0837f93597633c33 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:35:41 +0200
Subject: [PATCH 09/14] refactor(final-cta): bookend the hero, drop camel pun
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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) 
---
 src/components/sections/FinalCTA.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/FinalCTA.astro b/src/components/sections/FinalCTA.astro
index 86eecdc..c18e0e7 100644
--- a/src/components/sections/FinalCTA.astro
+++ b/src/components/sections/FinalCTA.astro
@@ -6,13 +6,13 @@ import TopographicBg from '../TopographicBg.astro';
   
   
    
     
    
-      Your camels called. Time to ride.
+      Ship integrations. Sleep through the night.
     
    
     
    
-      14-day free trial. Your first Camel app, hosted, traced, and running in under ten minutes. No code changes. No camels harmed.
+      14-day free trial. Your first Camel app, hosted, traced, and running in under ten minutes. No code changes.
     
    
     
    
-      
+      
     
    
   
    
 
-- 
2.49.1


From 5f06e5ccadf3a2a91c8532ecda155a49d6e12499 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:36:07 +0200
Subject: [PATCH 10/14] refactor(pricing-teaser): rename tiers, show only 2
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tier rename: MID → Starter (Scale 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) 
---
 src/components/sections/PricingTeaser.astro | 28 +++++++--------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/sections/PricingTeaser.astro b/src/components/sections/PricingTeaser.astro
index d23a65a..2db9f40 100644
--- a/src/components/sections/PricingTeaser.astro
+++ b/src/components/sections/PricingTeaser.astro
@@ -21,27 +21,13 @@ const tiers: Tier[] = [
     cta: 'Start free trial',
   },
   {
-    name: 'MID',
+    name: 'Starter',
     price: '20 € /mo',
     sub: '2 environments · 10 apps · 7-day retention',
     href: auth.signUpUrl,
-    cta: 'Start on MID',
+    cta: 'Start on Starter',
     highlight: true,
   },
-  {
-    name: 'HIGH',
-    price: 'Contact',
-    sub: 'Unlimited envs · 50 apps · 90-day retention · Debugger, Replay',
-    href: auth.salesMailto,
-    cta: 'Talk to sales',
-  },
-  {
-    name: 'BUSINESS',
-    price: 'Contact',
-    sub: 'Unlimited everything · 365-day retention · all features',
-    href: auth.salesMailto,
-    cta: 'Talk to sales',
-  },
 ];
 ---
 
    
@@ -51,15 +37,14 @@ const tiers: Tier[] = [
       
    Start free. Grow when you need to.
    
       
    
         No credit card. No sales call. Just a working trial in ten minutes.
-        See full comparison →
       
    
     
-    
    
+    
    
       {tiers.map((tier) => (
         
    
           {tier.highlight && (
@@ -85,5 +70,10 @@ const tiers: Tier[] = [
         
    
       ))}
     
    
+    
    
+      
+        See all plans (Scale, Enterprise) →
+      
+    
    
   
    
 
    
-- 
2.49.1


From 21c11223698157bb9356032b90ea587fcfc85ab1 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:36:43 +0200
Subject: [PATCH 11/14] 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 reference the new neighbour
names. Footer note 'HIGH and BUSINESS' updated to 'Scale and
Enterprise'.

Verified: dist/ contains no remaining MID/HIGH/BUSINESS strings.

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 src/pages/pricing.astro | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 3491dba..fb6cea8 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -33,7 +33,7 @@ const tiers: FullTier[] = [
     cta: 'Start free trial',
   },
   {
-    name: 'MID',
+    name: 'Starter',
     price: '20 €',
     priceNote: 'per month',
     envs: '2 environments',
@@ -41,28 +41,28 @@ const tiers: FullTier[] = [
     retention: '7-day retention',
     features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
     href: auth.signUpUrl,
-    cta: 'Start on MID',
+    cta: 'Start on Starter',
     highlight: true,
   },
   {
-    name: 'HIGH',
+    name: 'Scale',
     price: 'Contact',
     priceNote: 'sales',
     envs: 'Unlimited environments',
     apps: '50 apps',
     retention: '90-day retention',
-    features: ['Everything in MID', 'Live debugger', 'Exchange replay', 'Live tap'],
+    features: ['Everything in Starter', 'Live debugger', 'Exchange replay', 'Live tap'],
     href: auth.salesMailto,
     cta: 'Talk to sales',
   },
   {
-    name: 'BUSINESS',
+    name: 'Enterprise',
     price: 'Contact',
     priceNote: 'sales',
     envs: 'Unlimited environments',
     apps: 'Unlimited apps',
     retention: '365-day retention',
-    features: ['Everything in HIGH', 'Priority support', 'SLA', 'Dedicated success contact'],
+    features: ['Everything in Scale', 'Priority support', 'SLA', 'Dedicated success contact'],
     href: auth.salesMailto,
     cta: 'Talk to sales',
   },
@@ -117,7 +117,7 @@ const tiers: FullTier[] = [
           ))}
         
         
    
-          Prices in EUR, excluding VAT. Billed monthly. Annual billing available for HIGH and BUSINESS — talk to sales.
+          Prices in EUR, excluding VAT. Billed monthly. Annual billing available for Scale and Enterprise — talk to sales.
         
    
       
     
-- 
2.49.1


From 9cded54ce3c5cc06abbeb2d85da07ffe7f7c591d Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:37:17 +0200
Subject: [PATCH 12/14] feat(homepage): wire SocialProofStrip +
 ThreeAmWalkthrough
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  + <meta description> updated to lead with the new H1.

Verified: dist/index.html contains the #walkthrough anchor target.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/index.astro | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index e74a383..dfecb9a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,22 +3,22 @@ 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 DualValueProps from '../components/sections/DualValueProps.astro';
-import ProductShowcase from '../components/sections/ProductShowcase.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 — Run Apache Camel without running Apache Camel"
-  description="The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night."
+  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 />
-    <DualValueProps />
-    <ProductShowcase />
+    <SocialProofStrip />
+    <ThreeAmWalkthrough />
     <HowItWorks />
     <WhyUs />
     <PricingTeaser />
-- 
2.49.1


From 8dec3e792a844df3342cc51abaafeabb8f2ba1b5 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 02:37:33 +0200
Subject: [PATCH 13/14] chore(sections): delete retired DualValueProps +
 ProductShowcase
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/sections/DualValueProps.astro  | 62 -------------
 src/components/sections/ProductShowcase.astro | 91 -------------------
 2 files changed, 153 deletions(-)
 delete mode 100644 src/components/sections/DualValueProps.astro
 delete mode 100644 src/components/sections/ProductShowcase.astro

diff --git a/src/components/sections/DualValueProps.astro b/src/components/sections/DualValueProps.astro
deleted file mode 100644
index d1d4580..0000000
--- a/src/components/sections/DualValueProps.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-interface Tile {
-  outcome: string;
-  capability: string;
-}
-
-// tile.capability is a compile-time constant defined below — never feed
-// user-supplied or CMS content into set:html further down (XSS risk).
-const tiles: Tile[] = [
-  {
-    outcome: 'Ship integrations, then sleep.',
-    capability:
-      'Every route, every processor, every exchange — traced automatically. When something breaks at 3 AM, the answer is already waiting for you. So you do not have to be.',
-  },
-  {
-    outcome: 'Debug in daylight.',
-    capability:
-      'Replay the exact exchange that failed. Follow a single request across services. See payloads before and after each processor. The pieces your ops team needs at 3 AM, captured already — so 3 AM stays quiet.',
-  },
-  {
-    outcome: 'Keep what you built. Keep what you chose.',
-    capability:
-      'You picked Apache Camel on purpose — open, portable, yours. Cameleer runs and understands your Camel apps as they are. No code changes, no SDK, no rewrite, no lock-in.',
-  },
-];
----
-<section class="border-b border-border">
-  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
-    <div class="grid md:grid-cols-3 gap-6 md:gap-8">
-      {tiles.map((tile, i) => (
-        <div
-          class="tile rounded-lg border border-border bg-bg-elevated p-7 md: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)]"
-          style={`--tile-delay:${i * 110}ms`}
-        >
-          <h2 class="text-xl md:text-2xl font-bold text-text mb-3 leading-snug">
-            {tile.outcome}
-          </h2>
-          <p class="text-text-muted leading-relaxed" set:html={tile.capability.replace(/`([^`]+)`/g, '<code class="font-mono text-accent bg-bg border border-border rounded px-1 py-0.5 text-sm">$1</code>')}></p>
-        </div>
-      ))}
-    </div>
-  </div>
-</section>
-
-<style>
-  @keyframes tile-rise {
-    from { opacity: 0; transform: translateY(18px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-  .tile {
-    opacity: 0;
-    animation: tile-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    animation-delay: var(--tile-delay, 0ms);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .tile {
-      opacity: 1;
-      animation: none;
-      transition: none;
-    }
-  }
-</style>
diff --git a/src/components/sections/ProductShowcase.astro b/src/components/sections/ProductShowcase.astro
deleted file mode 100644
index 863ae1a..0000000
--- a/src/components/sections/ProductShowcase.astro
+++ /dev/null
@@ -1,91 +0,0 @@
----
-import TopographicBg from '../TopographicBg.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 — 610 ms later.',
-  },
-  {
-    title: 'Runtime detail, not guesswork.',
-    body: 'Circuit breaker tripped. Fallback path ran. The request tried to reach backend:80. The kind of 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. No SSH into the pod.',
-  },
-];
----
-<section class="relative overflow-hidden border-b border-border bg-bg">
-  <TopographicBg opacity={0.14} lines={7} />
-  <div class="relative 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 it breaks</p>
-      <h2 class="text-hero font-bold text-text mb-5">
-        When something breaks, the answer is already waiting.
-      </h2>
-      <p class="text-lg text-text-muted leading-relaxed">
-        Follow a single exchange from ingestion to failure. See the route it took, the fallback that ran, the stack trace, the correlated downstream work — in one place. Without writing a line of tracing code.
-      </p>
-    </div>
-
-    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
-      <figure class="lg:col-span-8 relative">
-        <div class="showcase-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
-          <Lightbox
-            src="/product/error-detail.png"
-            alt="Cameleer Mission Control — complex fulfillment route with circuit breaker, fallback, correlated audit route, and full error context"
-            width={1920}
-            height={945}
-            loading="lazy"
-          />
-          <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
-        </div>
-        <div aria-hidden="true" class="showcase-shot-glow"></div>
-        <figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
-      </figure>
-
-      <ul class="lg:col-span-4 space-y-7 lg:pt-4">
-        {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>
-  </div>
-</section>
-
-<style>
-  .showcase-shot {
-    box-shadow:
-      0 1px 0 rgba(240, 180, 41, 0.08) inset,
-      0 40px 80px -30px rgba(0, 0, 0, 0.7),
-      0 15px 35px -15px rgba(0, 0, 0, 0.5);
-  }
-  .showcase-shot-glow {
-    position: absolute;
-    inset: -5% -8% -5% -8%;
-    background: radial-gradient(
-      55% 55% at 45% 50%,
-      rgba(92, 200, 255, 0.10),
-      rgba(240, 180, 41, 0.08) 40%,
-      transparent 75%
-    );
-    filter: blur(50px);
-    z-index: -1;
-  }
-</style>
-- 
2.49.1


From 203e4bfb412ac9ed2fe123cb9440311f44d24ae3 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 07:59:30 +0200
Subject: [PATCH 14/14] perf: replace 1.5 MB cameleer-logo.svg refs with
 optimised PNGs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Inkscape-exported cameleer-logo.svg in public/ is 1.5 MB —
loaded eagerly in the SiteHeader (32×32) and Hero (64×64), it was
the dominant hit on the homepage's largest-contentful-paint. The
relaunch's added above-the-fold DOM nudged Lighthouse perf from
0.95 to 0.92 and tipped CI's >=0.95 threshold red.

Switch all four SVG references to the pre-optimised PNG icons that
already ship in public/icons/:
  - SiteHeader (32-displayed): /icons/cameleer-48.png   (4.4 KB)
  - Hero       (64-displayed): /icons/cameleer-192.png  (36 KB)
  - SiteFooter (24-displayed): /icons/cameleer-32.png   (2.4 KB)
  - BaseLayout favicon link: drop the SVG, keep the existing
    32 PNG fallback (already declared on the next line).

Local Lighthouse (http-server, no gzip) before: perf 0.72,
LCP 10.0s. After: perf 0.94, LCP 1.6s. CI on Linux + LH static
server should comfortably clear the 0.95 gate.

The SVG file itself is left in place — unreferenced, but kept in
case any external link still points at it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/SiteFooter.astro    | 2 +-
 src/components/SiteHeader.astro    | 2 +-
 src/components/sections/Hero.astro | 2 +-
 src/layouts/BaseLayout.astro       | 1 -
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
index ca8434d..90d02be 100644
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -5,7 +5,7 @@ const year = new Date().getFullYear();
   <div class="max-w-content mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
     <div class="flex items-center gap-3">
       <img
-        src="/cameleer-logo.svg"
+        src="/icons/cameleer-32.png"
         width="24"
         height="24"
         alt=""
diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index c056cf4..f36ebcb 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -5,7 +5,7 @@ import CTAButtons from './CTAButtons.astro';
   <div class="max-w-content mx-auto px-6 h-16 flex items-center justify-between gap-6">
     <a href="/" class="flex items-center gap-2 group" aria-label="Cameleer home">
       <img
-        src="/cameleer-logo.svg"
+        src="/icons/cameleer-48.png"
         width="32"
         height="32"
         alt=""
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 8db0127..f2e28ab 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -22,7 +22,7 @@ const pins: Pin[] = [
     <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"
+          src="/icons/cameleer-192.png"
           width="64"
           height="64"
           alt=""
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3a0de31..998a47a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -31,7 +31,6 @@ const ogUrl = new URL(ogImage, Astro.site ?? 'https://www.cameleer.io').toString
     <meta name="description" content={description} />
     <link rel="canonical" href={canonical} />
 
-    <link rel="icon" type="image/svg+xml" href="/cameleer-logo.svg" />
     <link rel="icon" type="image/png" sizes="32x32" href="/icons/cameleer-32.png" />
     <link rel="apple-touch-icon" href="/icons/cameleer-180.png" />
 
-- 
2.49.1