Marketing landing: rebuild to WorkClaw structure 1:1 (Clawmates-branded)

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]>

frontend/src/components/marketing/Faq.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Minus, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 import { useState } from "react";
 
 const FAQS: { q: string; a: string }[] = [
@@ -26,50 +26,52 @@ const FAQS: { q: string; a: string }[] = [
   },
 ];
 
-/** FAQ accordion on WorkClaw's solid-blue field: one open at a time, the
- *  "+" toggles to "–", white rounded rows. */
+/** FAQ on WorkClaw's textured field (faq-bg): white rounded rows, one open at
+ *  a time, the "+" rotates 45° to an ×. First item open by default. */
 export function Faq() {
   const [open, setOpen] = useState<number | null>(0);
   return (
-    <section
-      id="faq"
-      className="w-full bg-marketing-blue px-4 py-[80px] sm:py-[112px]"
-    >
-      <h2 className="text-center text-[clamp(30px,5vw,48px)] font-extrabold tracking-[-1.5px] text-marketing-ink">
-        Questions, <span className="text-white">answered</span>.
-      </h2>
-      <div className="mx-auto flex w-[min(880px,94%)] flex-col gap-4 pt-12">
-        {FAQS.map((item, i) => (
-          <div key={item.q} className="rounded-2xl bg-white shadow-sm">
-            <button
-              type="button"
-              aria-expanded={open === i}
-              onClick={() => setOpen(open === i ? null : i)}
-              className="flex w-full items-center justify-between gap-4 px-7 py-5 text-left text-lg font-bold text-marketing-ink"
-            >
-              {item.q}
-              {open === i ? (
-                <Minus
-                  aria-hidden
-                  size={20}
-                  className="shrink-0 text-marketing-slate"
-                />
-              ) : (
-                <Plus
-                  aria-hidden
-                  size={20}
-                  className="shrink-0 text-marketing-slate"
-                />
-              )}
-            </button>
-            {open === i && (
-              <p className="px-7 pb-6 text-sm leading-relaxed text-marketing-slate">
-                {item.a}
-              </p>
-            )}
-          </div>
-        ))}
-      </div>
-    </section>
+    <div id="faq">
+      <section className="relative flex w-full justify-center overflow-hidden bg-[url('/images/marketing/faq-bg.svg')] bg-cover bg-center bg-no-repeat px-4 py-[72px] sm:px-6 sm:py-[99px]">
+        <div className="relative flex w-full max-w-[804px] flex-col gap-4">
+          {FAQS.map((item, i) => {
+            const isOpen = open === i;
+            return (
+              <button
+                key={item.q}
+                type="button"
+                aria-expanded={isOpen}
+                onClick={() => setOpen(isOpen ? null : i)}
+                className="flex w-full flex-col items-start rounded-[16px] bg-white p-6 text-left transition-shadow sm:p-8"
+              >
+                <div className="flex w-full items-center justify-between">
+                  <span className="pr-4 text-[18px] leading-none font-bold tracking-[-0.46px] text-black sm:text-[23px]">
+                    {item.q}
+                  </span>
+                  <div
+                    className="shrink-0 transition-transform duration-300 ease-out"
+                    style={{ transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
+                  >
+                    <Plus aria-hidden className="h-4 w-4 text-black" />
+                  </div>
+                </div>
+                <div
+                  className="w-full overflow-hidden transition-all duration-300 ease-out"
+                  style={{
+                    maxHeight: isOpen ? 320 : 0,
+                    opacity: isOpen ? 1 : 0,
+                    marginTop: isOpen ? 24 : 0,
+                  }}
+                >
+                  <p className="text-[15px] leading-[1.6] font-normal text-[#0a0f1e]/75 sm:text-[17px]">
+                    {item.a}
+                  </p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+    </div>
   );
 }