The homepage Lighthouse perf score dropped to 0.94 in CI (threshold 0.95)
because Hero and ThreeAmWalkthrough each load a 1920×945 PNG screenshot
straight out of public/product/ — together ~1.2 MiB and the LCP element.
Other pages have no product imagery and pass with 1.0.
Adds a sharp-based generator (scripts/optimize-product-images.mjs, run via
`npm run optimize:images`) that emits 1280w and 1920w WebP variants beside
each source PNG. Lightbox.astro now wraps the trigger in a <picture> with
a WebP <source srcset> auto-derived from the PNG path (PNG kept as
fallback for the ~2% of clients without WebP), exposes a fetchpriority
prop, and points the dialog modal at the 1920w WebP. The Hero passes
fetchpriority="high" on the LCP image; index.astro injects a matching
<link rel="preload" as="image" imagesrcset> via a new BaseLayout head
slot so the WebP is discovered before the body parses.
Effect on the LCP image: 551 KiB PNG → 46 KiB WebP at 1280w (-92%).
Local Lighthouse perf: 0.95 → 1.00 across 3 runs on /index.html;
pricing/imprint stay 1.00; privacy unchanged at 0.98 (pre-existing CLS).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Per Hendrik's direction, no nJAMS references on the website. The
founder pedigree claim now stands on the years and the customer
segment ("15 years building integration monitoring for banks,
insurers, and logistics operators") without naming a prior product.
Changes:
- src/components/sections/SocialProofStrip.astro: drop the
' · ex-nJAMS' suffix from the founder attribution; collapse the
multi-step PENDING comment into a single-line founder-name TODO.
- src/components/sections/WhyUs.astro: drop the trademark-review
comment (no longer relevant — the body text never named the
prior product, only the comment did).
- OPERATOR-CHECKLIST.md: remove the 'Why us / nJAMS wording review'
pre-publish task. Also rename the adjacent 'MID-tier retention'
TODO to 'Starter-tier retention' to match the relaunched tier
taxonomy.
- docs/superpowers/specs/2026-04-25-cameleer-website-relaunch-design.md:
update §4, §6.2, §12 to reflect the removed wording. Only the
founder-name placeholder remains as a pre-publish blocker.
Historical specs / plans under docs/superpowers/{specs,plans}/
keep their original wording — they're records of past decisions
and are not on the website.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
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>
- 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) <noreply@anthropic.com>
H2 now echoes the Hero (intentional bookend pattern). Sub line
loses the 'No camels harmed' aside. Single primary CTA — no
secondary.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The decorative giant '03:00' watermark on card 2 plus its 'live'
ops-desk timestamp gimmick was the third repetition of the 3 AM
metaphor on the homepage — the post-launch review flagged that
five hits turns a sharp pain point into a slogan.
Card 2 reworded to lead with 'operated integration in production
for 15 years' — same pedigree claim, no second 3 AM reference.
The walkthrough section already does the 3 AM beat in full.
Card 1 unchanged.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 'no code changes / no SDK / no rewrite' line is already said
clearly in the Hero subhead and the WhyUs cards. Repeating it on
step 1 of HowItWorks adds nothing. Step 3's tail 'Nothing to
instrument. Nothing to maintain.' is two sentences saying the
same thing — both removed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Drop the rotating headline and its <script> block
- Replace with single category-defining H1: 'Ship Camel integrations.
Sleep through the night.'
- Add price microline under the CTAs (14-day trial · from €20/mo)
- Replace 'Sign in' secondary CTA with 'See it in action ↓' anchor
to #walkthrough
- Add three numbered annotation pins overlaid on the screenshot,
with a 3-up legend below the image (correlation ID, failure
context, error pinned)
The eyebrow pill is retained — the only surviving camel pun on
the homepage per the pun-budget decision in the spec.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces DualValueProps + ProductShowcase with a single before/after
split: a styled <pre> block (the 'without' state) next to the
existing /product/error-detail.png screenshot (the 'with' state).
Three short callouts below.
Section anchor #walkthrough is the target for the Hero's
'See it in action ↓' secondary CTA (added in Task 4).
The 'without' panel is implemented as a styled <pre> per the spec —
no asset production required. A future phase may swap to a recorded
terminal screencap; that swap is a one-component change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Founder pedigree quote plus design-partner mailto CTA.
Uses auth.salesEmail (not auth.salesMailto) so we can pass a subject.
Two PENDING gates documented in the component:
- [Founder Name] placeholder
- 'ex-nJAMS' wording subject to trademark clearance
Component is created but not yet wired into index.astro.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Lightbox.astro — reusable native HTMLDialogElement wrapper:
- Trigger: <button> wrapping the <img>, cursor: zoom-in, amber zoom-pill
badge fades in on hover/focus.
- Dialog: showModal() opens a full-viewport modal (≤1800x1200 cap) with
blurred amber-tinted backdrop.
- Close paths: native form[method=dialog] submit (Escape + close button),
click on backdrop, click on the image itself.
- Accessibility: aria-labelledby + visually-hidden heading avoids both
aria-label-misuse and no-redundant-role validator conflicts. Focus
returns to trigger on close (native HTMLDialogElement behavior).
- Motion: 220ms fade+scale open, disabled under prefers-reduced-motion.
- CSP: <script> is Astro-bundled to an external file — script-src 'self'
respected.
Hero and ProductShowcase now use <Lightbox> instead of a raw <img> for
the product screenshots. The existing frame styling (border, glow, ring
overlay) is untouched — the lightbox trigger is a block-level button
that fills the frame.
TopographicBg now actually reads:
- Per-line stroke width varies (triangle wave — contour-interval feel)
- Per-line opacity varies by vertical depth (darker mid-section, lighter
edges)
- One line in four rendered in cyan (echo of cross-route correlation)
- Radial-mask soft edge fade so lines dissolve into the section boundary
- Default opacity bumped from 0.12 to 0.35; section callers still scale it
down via the opacity prop, but the new internal variation makes the
atmosphere visible where before it was invisible
WhyUs second tile: 3-AM storytelling moment now lands typographically:
- Decorative 03:00 glyph (amber/4% alpha) in the top-right corner
- Eyebrow log-entry treatment: pulsing amber dot + mono 03:00:47.218
timestamp + OPS DESK label — reads like a product UI log row
- The rest of the tile unchanged
ProductShowcase figure: figcaption moved to last child (HTML spec
requires figcaption to be first or last in a figure; a div after it was
a validation error).
- DualValueProps: 110ms staggered rise-in on load (cubic-bezier ease),
reduced-motion users see cards pre-populated, no animation.
- All card sections (DualValueProps, HowItWorks, WhyUs, Pricing) gain a
subtle hover lift: -translate-y-0.5, amber/40 border, soft amber drop
shadow. 200ms ease-out — tactile but not noisy.
- Pricing MID tier now looks like the highlighted option: ring-2 accent,
amber-tinted drop shadow, lg:-translate-y-2 (sits above the others),
and a 'MOST POPULAR' ribbon pill. The 1px border swap was invisible.
Editorial section between DualValueProps and HowItWorks. Breaks the
identical-rectangle cascade with an asymmetric 8/4 grid: large
error-detail screenshot with subtle cyan/amber backlight on the left,
three numbered callout captions on the right.
The screenshot (cross-route correlation chain + circuit breaker +
fallback + Java stack trace) makes the 'deep tracing, replay, live
control' claims concrete in a way the abstract RouteDiagram never did.
Cyan kicker on this section (vs. amber elsewhere) signals 'this one is
different' and echoes the cross-route correlation color in the product.
- Hero restructured from stacked to 2-col grid on lg+ (copy left, product
screenshot right). Replaces the abstract RouteDiagram with the actual
exchange-detail view — the product doing the thing the copy promises.
- Kicker broken out of the shared uppercase-mono pattern: italic pill with
a soft amber fill/border, scaled up to 14px. The humor now wears a
different costume from the other section kickers.
- Hero brand mark scaled to 64px and given a slow 7s sway (reduced-motion
guarded) — living atmosphere, not ambient animation.
- H1 min-height raised to 2.5em to absorb the 2-line wrap of line 1 at
mobile sizes without layout shift on rotation.
- Amber radial glow behind the product shot + subtle bevel + frame ring.
- Footer placeholder 3-wavy-lines SVG replaced with real camel logo
(spec gap from earlier refresh — header got swapped, footer didn't).
- Screenshot assets imported under public/product/.
Tile 2 headline now 'Built by people who know what 3 AM looks like.'
Bodies soften 'bidirectional protocol / signed config' into plain-value
language. nJAMS-legacy trademark review note preserved.
Three tiles: ship-then-sleep, debug-in-daylight, keep-what-you-chose.
Drops -javaagent, nanosecond, and 45+ EIP node types from the landing
copy — those belong in docs.
All three lines render in the DOM; CSS drives the fade via data-active.
Reduced-motion users see the first line only (no interval, no fade).
Rotation pauses on hover and keyboard focus. aria-live=off on the
rotator so AT does not announce every swap; aria-hidden flips per-swap
to avoid duplicate heading announcements.
Also set vite.build.assetsInlineLimit=0 in astro.config.mjs so Astro
emits the rotator script as a same-origin external file (dist/assets/)
rather than inlining it — required for CSP script-src 'self' compliance.
- Remove Sitemap line from robots.txt (no @astrojs/sitemap installed; was
pointing to a 404 that would trip Google Search Console).
- Align Permissions-Policy across all three enforcement layers (middleware,
.htaccess, Cloudflare Transform Rule in OPERATOR-CHECKLIST) by dropping the
stray fullscreen=(self) from the middleware.
- Bump Lighthouse CI numberOfRuns from 1 to 3 to dampen CI-runner noise.
- Add CI guard that fails the build if any <TBD:...> marker survives into
dist/ — prevents a legally incomplete imprint from shipping by accident.
- Add SFTP_* secret null-guard before the rsync --delete step so a missing
secret fails loudly instead of targeting the SSH user's home root.
- Document the set:html compile-time-constant invariant in DualValueProps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- .htmlvalidate.json with relaxed rules for design-system inline styles
- linkinator.config.json skipping mail, external auth/platform origins
- Fix lint:html npm script quoting for Windows-shell compatibility
- Switch astro build.format to 'directory' so /pricing resolves without MultiViews
- trailingSlash: 'ignore' lets both /pricing and /pricing/ work naturally
- Add aria-label to both <nav> landmarks (Primary, Footer) to satisfy html-validate
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
