cameleer-website/docs/superpowers/specs/2026-04-24-cameleer-website-copy-refresh-design.md

# Cameleer website — copy + brand refresh spec

**Date**: 2026-04-24
**Status**: Approved for implementation planning
**Project**: `cameleer-website`
**Supersedes sections of**: `2026-04-24-cameleer-website-design.md` — copy, logo, and tone only. Architecture, auth flow, hosting, and tech stack from the original spec remain in force.

---

## 1. Overview

The current marketing site sells Cameleer as **"zero-code observability for Apache Camel"**. This underrepresents the product: Cameleer is a **hosted runtime platform for Apache Camel** — the place you actually run your integrations, with deep tracing, replay, and live control baked in. Comparable to Mulesoft CloudHub in category, for teams who chose Apache Camel specifically to stay open and avoid vendor lock-in.

This spec refreshes the homepage copy, tone, and brand mark to match that positioning. Three goals:

1. Reposition from "observability tool" to "hosted Camel runtime with observability baked in".
2. Lighten the tone — less technical jargon, more outcome-focused language, two strategic humor pops.
3. Replace the placeholder topographic-wave icon with the real Cameleer product logo (camel + cameleer figure + compass rose on desert waves, amber).

No architecture changes. No new pages. No new dependencies. Pure content + asset refresh.

---

## 2. Positioning

### 2.1 New thesis

**Run Apache Camel without running Apache Camel.**

Cameleer is 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.

### 2.2 Rotating Hero positioning lines

Three lines rotate slowly in the Hero subline area:

1. **Run Apache Camel without running Apache Camel.**
2. **Camel integrations, minus the baggage.**
3. **Your camels, our caravan. You just ride.**

**Rotation behavior:**
- Fade swap every ~10 seconds (8s static + 2s fade).
- Paused on hover and on focus within the Hero.
- If `prefers-reduced-motion: reduce` is set — render the first line only, no rotation, no JS.
- Initial render shows line 1 so the critical content is meaningful without JS.
- Implementation: small inline `<script type="module">` in the Hero component. No third-party animation library.

**Accessibility:**
- The rotating container is the H1 — it is the primary page heading and the accessibility name of the document. Use `aria-live="off"` on the rotation wrapper so assistive technology does not announce every swap (announcing a different H1 every 10 seconds is hostile). All three lines render in the DOM; only one is visible. Visually-hidden siblings should have `aria-hidden="true"` to avoid duplicate heading announcements.
- Tab-focus anywhere inside the Hero pauses rotation (same pause rule as hover).

### 2.3 Terms to avoid on landing page

Remove from all landing page copy:

- `-javaagent`, `java agent`, `Docker`, `ByteBuddy`, `Spring Boot`, `Quarkus`, `JAR`
- `Prometheus`, `OpenTelemetry`, `CDI`, `JMX`
- "nanosecond", "45+ EIP node types" (acceptable in headings-off detail, not in headlines/H2s)
- "zero-code instrumentation" → replace with "no code changes"

Keep (audience vocabulary):

- Apache Camel, routes, processors, exchanges
- Replay, trace, correlation ID
- EIP — allowed once as a credibility signal, not a feature

Out-of-scope for this spec: the `/install` or `/docs` routes where `-javaagent` snippets belong. The existing homepage's bash snippet moves off the homepage — see §4.3.

---

## 3. Brand mark refresh

### 3.1 Assets to import

From `C:/Users/Hendrik/Documents/projects/design-system/assets/` into `cameleer-website/public/`:

- `cameleer-16.png` → `public/icons/cameleer-16.png`
- `cameleer-32.png` → `public/icons/cameleer-32.png`
- `cameleer-48.png` → `public/icons/cameleer-48.png`
- `cameleer-180.png` → `public/icons/cameleer-180.png` (Apple touch)
- `cameleer-192.png` → `public/icons/cameleer-192.png` (PWA/Android)
- `cameleer-512.png` → `public/icons/cameleer-512.png` (PWA/Android)
- `cameleer-logo.svg` → `public/cameleer-logo.svg` (vector, used in header)
- `cameleer-logo.png` → `public/cameleer-logo.png` (raster fallback for OG)

The SVG is 1.5 MB (not SVGO'd). It's used only in the header at ~32px. If the unminified size becomes a concern, run it through SVGO at build time — not in this spec's scope. For now, ship as-is and measure.

### 3.2 Header icon swap

`src/components/SiteHeader.astro`:

- Remove the inline 3-wavy-lines SVG.
- Replace with `<img src="/cameleer-logo.svg" width="32" height="32" alt="" decoding="async">`.
- Keep the existing `<a href="/" aria-label="Cameleer home">` wrapper and the "Cameleer" wordmark beside it.
- Keep the `group-hover:text-accent` transition on the wordmark only.

### 3.3 Favicon chain

Update `src/layouts/BaseLayout.astro` `<head>`:

- Primary: `<link rel="icon" href="/cameleer-logo.svg" type="image/svg+xml">`
- Fallback: `<link rel="icon" href="/icons/cameleer-32.png" sizes="32x32" type="image/png">`
- Apple: `<link rel="apple-touch-icon" href="/icons/cameleer-180.png">`
- Remove the existing `public/favicon.svg` (placeholder topographic lines).

### 3.4 Hero brand mark

In the Hero section, add a distinct small mark (48–64px) next to or just above the rotating positioning line. Amber on transparent. Tasteful, not a watermark. The mark anchors the camel/desert/GPS humor visually — the humor lands harder when the camel is literally present.

### 3.5 OG image

Replace `public/og-image.svg` content with a new design built around the real logo + the new thesis "Run Apache Camel without running Apache Camel." Same dimensions (1200×630), same solid dark background. Exact layout is a creative execution task, not spec'd here.

---

## 4. Section-by-section copy changes

Each section below lists the current headline → new headline and notes on body copy changes. Specific body copy wording is implementation detail — the writer should follow the tone and term-use rules in §2.

### 4.1 Hero (`src/components/sections/Hero.astro`)

**Kicker** (small uppercase line above headline):
- Current: `Observability · Apache Camel`
- New: `Your camels called. They want a GPS.`

**Headline** (H1):
- Current: `See every route. / Reach into every flow.`
- New: `Run Apache Camel without running Apache Camel.` (the primary of three rotating lines)
- The H1 is the rotation target — it's the single most important piece of copy on the page and what gets indexed/shared.

**Subline**:
- Current: "Zero-code tracing, processor-level detail, and live control for Apache Camel — from a single `-javaagent` flag."
- New: "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."
- Static — does not rotate.

**`-javaagent` code inline**: removed from Hero.

**CTAButtons**: unchanged.

**RouteDiagram**: unchanged (visual, not copy).

### 4.2 DualValueProps (`src/components/sections/DualValueProps.astro`)

Current three tiles lead with outcomes but bodies are tech-heavy. Rewrite bodies to be outcome- and feeling-led. No humor in this section.

Tile 1 — **Ship integrations, then sleep.**
Body reframe: you can see every route, every processor, every exchange, without writing a single line of tracing code. When something breaks, you know where and why.

Tile 2 — **Debug in daylight, not at 3 AM.**
Body reframe: replay failed exchanges, follow a single request across services, capture exactly what went wrong — with the pieces ops actually needs at 3 AM already captured so you don't need to be up at 3 AM.

Tile 3 — **Own your stack. No lock-in.**
Body reframe: you chose Apache Camel on purpose — open, portable, standard. Cameleer runs and observes your Camel apps as they are. No SDK, no code changes, no rewrite.

All three tile bodies: strip `-javaagent`, `45+ EIP`, "nanosecond". Keep them plain, outcome-first, ~2-3 sentences each.

### 4.3 HowItWorks (`src/components/sections/HowItWorks.astro`)

Section kicker unchanged: `For engineers`. Section H2 unchanged: `How it works`.

Three steps:

01 — **Point us at your Camel app**
Body: drop your app in, or connect an existing one. No code changes, no SDK, nothing to rewrite.
**Remove** the `java -javaagent:...` bash snippet entirely. The install detail belongs in docs, not on the landing page.

02 — **We take it from there**
Body: every route, processor, exchange, and dependency is discovered and traced automatically. Sensitive fields are masked by default.

03 — **Watch it run**
Body: browse executions, tap live traffic, replay failed exchanges, follow flows across services. Nothing to instrument, nothing to maintain.

Subtitle under "How it works" — current: "Three steps. No code changes. Works across Camel 4.x." — softens to: "Three steps. No code changes. Nothing to maintain."

### 4.4 WhyUs (`src/components/sections/WhyUs.astro`)

Section unchanged structurally. Kicker `Why Cameleer` and H2 stay. Body softening only:

Tile 1 — headline stays: "Generic APMs do not understand Camel. Cameleer does."
Body: rewrite to drop "45+ Apache Camel EIP node types", "bidirectional protocol", "signed config changes". Translate to plain value: "Most monitoring tools see your app as a Java process and a pile of HTTP calls. Cameleer understands that you're running a Camel app — it speaks choices, splits, multicasts, error handlers, and every EIP pattern as first-class citizens. When you ask 'why did this exchange fail?', you get an answer, not a log tail."

Tile 2 — headline tweak: "Built by people who know what 3 AM looks like."
Body: keep the nJAMS-legacy story but warmer. "The Cameleer team 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'd build today, purpose-built for Apache Camel."

Retain the trademark review note (nJAMS legacy).

### 4.5 PricingTeaser (`src/components/sections/PricingTeaser.astro`)

Kicker `Pricing` unchanged. H2 `Start free. Grow when you need to.` unchanged.

Subline current: "No credit card for the trial. See full comparison →"
Subline new: "No credit card. No sales call. Just a working trial in ten minutes."

Tier cards and prices unchanged.

### 4.6 FinalCTA (`src/components/sections/FinalCTA.astro`)

**Headline:**
- Current: `Start seeing your routes.`
- New: `Your camels called. Time to ride.`

**Subline:**
- Current: "14-day free trial. Your first app, instrumented and live in under 10 minutes."
- New: "14-day free trial. Your first Camel app, hosted, traced, and running in under ten minutes. No code changes. No camels harmed."

**CTAButtons**: unchanged.

---

## 5. Files touched

- `src/components/SiteHeader.astro` — logo swap (§3.2)
- `src/layouts/BaseLayout.astro` — favicon chain + OG image reference (§3.3)
- `src/components/sections/Hero.astro` — kicker, rotating H1, subline, brand mark (§4.1, §3.4, §2.2)
- `src/components/sections/DualValueProps.astro` — three tile copy rewrites (§4.2)
- `src/components/sections/HowItWorks.astro` — step copy rewrites + bash snippet removal (§4.3)
- `src/components/sections/WhyUs.astro` — tile body softening (§4.4)
- `src/components/sections/PricingTeaser.astro` — subline tweak (§4.5)
- `src/components/sections/FinalCTA.astro` — headline + subline (§4.6)
- `public/cameleer-logo.svg`, `public/cameleer-logo.png` — new assets (§3.1)
- `public/icons/cameleer-{16,32,48,180,192,512}.png` — new assets (§3.1)
- `public/favicon.svg` — deleted (§3.3)
- `public/og-image.svg` — redesigned around new thesis (§3.5)

---

## 6. Out of scope

- Docs/install page creation — the `-javaagent` snippet moves off the homepage but this spec does not create its new home. Follow-up.
- Logo SVG optimization (1.5 MB ship-as-is; measure before optimizing).
- A/B testing the positioning lines. Rotation serves all three; we read analytics separately if/when added.
- Pricing page (`/pricing`), imprint, privacy copy changes — this spec is homepage-only.
- i18n — English only. No translation work.

---

## 7. Open questions / risks

**Trademark — nJAMS legacy wording**: §4.4 Tile 2 mentions "the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing." This is legacy nJAMS muscle memory, not new IP. Hendrik's trademark review gate from the original spec's §10 still applies before go-live.

**Positioning tension with docs**: once the landing page stops saying "`-javaagent`", SEO signals around that specific technical term weaken. Acceptable trade-off for the target audience (SMB+ Camel-chooser decision-makers), but if engineer-skewed traffic matters for discovery, consider a technical sub-page (`/how-it-runs`) or docs page carrying those keywords.

**Logo SVG weight**: 1.5 MB is large for a ~32px header render. If Lighthouse performance regresses, swap the header to reference `cameleer-logo.png` or an SVGO-minified copy.

**SEO title/description**: the BaseLayout `<title>` + meta description currently read "Zero-code observability for Apache Camel." These should update to match the new thesis ("Run Apache Camel without running Apache Camel."). Include this in the Hero section implementation task.