Page is now Hero → Hierarchy → Scale → Why → Use cases → FAQ → CTA → footer.
- Scale: per-tenant runtime / scale-to-zero / delegation hierarchy.
- WhyGoverned: humans-in-the-loop, single audit journal, delegation, no rogue access.
- UseCases: support / marketing / research / engineering / finance / data.
- FinalCta: dark ink band bookending the hero ("Build your agent company").
- Trim FAQ to 4 (keep the e2e-referenced Qs); repoint nav/footer anchors to
the live section ids. Refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Re-scanned the live workclaw.com (same content as our prior capture; they
redeployed but shipped no landing changes) and rebuilt our landing to mirror
its full structure section-for-section, keeping Clawmates branding and honest
claims (no borrowed customer logos, no unverified SOC 2).
Now matches the real layout: sticky pill nav (Product/Blog/Pricing/FAQ +
Sign In + dark Get Started) · light-blue hero with the claws-at-desk art ·
crew strip (honest stand-in for the customer-logo marquee) · "Multiply your
brainpower…" + four trait badges · One-click setup with the create-claw card
(Sandy Clawson) · Works where you do with the 13-app icon grid + Slack
conversation mockup · Always on (dark, moon + composite art) · Your work,
your way skills tiles · Enhanced security (hand-key + key-snap, 4 icon
columns) · FAQ on the textured field · two-tier footer (Build your AI crew
+ dark footer with socials).
- Pulled the WorkClaw assets the public capture missed (claws-at-desk,
support-claw, slack-convos/cards, always-composite, 13 app icons, security
icons, footer-team). Dropped WorkClaw's own logo mark for our PawPrint.
- Honest substitutions where WorkClaw's claims aren't ours: no SOC 2 (4th
security column is "Air-gappable"; trust pill is "Self-hostable &
air-gapped"), and the FAQ keeps our self-host/air-gap positioning.
- A11y: consolidated to AA-safe coral-strong (#d23a3a) for button fills and
small coral text; axe reports zero serious/critical.
- Regenerated the marketing visual baseline.
typecheck/lint/build green · p7-marketing (render + a11y) green · @visual
green · deployed via Compose and verified live on :3000.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Rebuilt the public landing to mirror WorkClaw's complete section layout
(verified against tools/wc-capture/out/shots/marketing.png), with original
"clawmates crew on a ship" copy and captured WorkClaw art wired as
swappable placeholders.
Sections (top to bottom): sticky pill nav (dark Get-started CTA) · hero
(dual CTA + trust row + crew banner) · crew strip · positioning headline +
four trait badges · One-click setup (periwinkle panel) · Works where you do
· Always on watch (dark panel) · Your work, your way (3 skill tiles) ·
Safety built into the hull (security columns) · FAQ on the blue field · Build
your AI crew CTA on the dotted field · dark footer.
- No SOC 2 / compliance claims (p7-marketing enforces this); honesty kept by
replacing WorkClaw's customer-logo marquee with our own crew strip.
- A11y: AA contrast fixes — text-xl coral CTAs (large-text bar), darker
coral-strong accent on periwinkle, deeper FAQ blue for white text.
- New tokens: marketing-blue, marketing-coral-strong.
- visual.spec marketing test scrolls + waits for lazy art before the shot;
regenerated the marketing baseline. (Deepest <img> — the security art —
renders for users but is blank only in Playwright's full-page capture.)
- Vendored the captured WorkClaw asset bundle under public/images/.
Built, typechecked, linted, p7-marketing + @visual green, deployed via
Compose and verified live on :3000.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
Side-by-side comparison surfaced that several restyle classes silently
generated NO CSS (confirmed against the compiled .next CSS) — invisible
to tests because unit tests assert class strings, not computed styles,
and visual baselines were captured from the broken build.
Root causes fixed:
- rounded-radius-button (51) / rounded-radius-squircle (3) generated
nothing → every pill/button/chip was border-radius:0. Tailwind v4 maps
--radius-button to 'rounded-button', not 'rounded-radius-button'.
Replaced with rounded-full / rounded-[17px].
- duration-normal/fast/slow (58) generated nothing → transitions had
easing but 0 duration (snapped). Replaced with the token-arbitrary
form duration-(--duration-normal). (Also fixed an over-replace that
double-wrapped var(--duration-normal) inside animate-[…] values.)
- HomeScreen.tsx was the OLD emoji version — the R3 rewrite was never
committed. Restored: brand Chrome/Slack squircle tiles, coral
GradientGlyph icons, 56px tiles with press-scale, and the frosted
glass dock (bg-white/[0.07] backdrop-blur-[40px] saturate-150).
Targeted gaps from the feedback:
- raised surface --color-surface-warm-muted #1f1f1f → #1a1a1a (composer,
chips, tabs)
- welcome chips: max-w-[422px] gap-3 → centered 2×2 grid
- composer input + rail nav labels → 14px
- DeviceSizeToggle: Full/Tablet/Phone text → lucide monitor/tablet/
smartphone icons (aria-label keeps the radio names)
- SW cache bumped v1→v2 so redeployed clients purge the stale bundle
- LeftRail drawer: ref-during-render → prev-state pattern (lint)
Compiled CSS now emits .rounded-full, transition-duration:var(--duration-
normal), border-radius:17px, and shadow-dock-capsule. Button/Avatar unit
tests updated to the real class names. 83 unit tests green.
Co-Authored-By: Claude Fable 5 <[email protected]>
A new (marketing) route group with its own LIGHT layout (slate palette +
marketing coral #E95656 + periwinkle cards on near-white), the inverse of
the dark app. The middleware rewrites '/' → /marketing for logged-out
visitors (keyed on the session cookie / Clerk __session); authed users
fall through to the workspace app unchanged.
Built to the measured marketing system with OUR copy and honest claims —
NO SOC 2 / compliance badges: floating white pill nav, the 75px/800/-3px
display hero with a single coral keyword span, dual pill CTAs (coral
primary / white-bordered secondary), trust badges ('free credits',
'no credit card', 'self-hostable & air-gapped'), periwinkle feature
cards, a structural-security section (approval-gated, broker-held creds,
air-gappable — our real differentiators), an interactive FAQ accordion,
CTA band, and footer.
E2E (p7-marketing): renders for logged-out visitors, FAQ accordion works,
asserts NO SOC 2 claim, and an axe pass (coral CTAs sized to clear the
AA large-text threshold). p0-shell updated: logged-out '/' now shows
marketing with a Sign-in link to /login.
Co-Authored-By: Claude Fable 5 <[email protected]>
