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

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 <!-- PENDING --> 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 →

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

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 <pre> 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 <pre> 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 <pre> 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 <pre> "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 <!-- PENDING --> 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 <!-- PENDING --> 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 <pre> 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