R5: marketing landing — light-theme public site at /

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]>
2026-06-10 20:13:09 -05:00
parent 1bfbccf172
commit 200bb56299
8 changed files with 409 additions and 7 deletions
@@ -0,0 +1,68 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+const FAQS: { q: string; a: string }[] = [
+  {
+    q: "What is a claw?",
+    a: "A claw is an AI coworker — an agent with a job, a chat, and its own sandboxed computer. Your team talks to it like a teammate, and it uses tools to get work done.",
+  },
+  {
+    q: "How do you keep agents safe?",
+    a: "Every action that reaches outside the sandbox — sending an email, posting to Slack, a transaction — is intercepted and held until a human approves it, with the exact payload shown. Agent code runs in a locked-down container with no network.",
+  },
+  {
+    q: "Can I run it on my own infrastructure?",
+    a: "Yes. The same container images deploy to Kubernetes or to a single-node Docker Compose appliance you can run fully air-gapped, installed from a signed bundle that verifies offline.",
+  },
+  {
+    q: "Which tools can claws connect to?",
+    a: "Slack and email today, plus a growing app directory you connect with API keys or OAuth. Credentials are held by a separate secret broker the agent can never read.",
+  },
+  {
+    q: "How is my data protected?",
+    a: "Credentials are encrypted at rest in an isolated broker process; agent sandboxes have no egress; and in the air-gapped deployment nothing ever leaves your network.",
+  },
+];
+
+/** FAQ accordion (measured): one open at a time, chevron rotates. */
+export function Faq() {
+  const [open, setOpen] = useState<number | null>(0);
+  return (
+    <section id="faq" className="mx-auto w-[min(760px,92%)] py-16">
+      <h2 className="text-center text-[clamp(30px,5vw,48px)] font-extrabold tracking-[-1.5px]">
+        Questions, <span className="text-marketing-coral">answered</span>.
+      </h2>
+      <div className="flex flex-col gap-3 pt-10">
+        {FAQS.map((item, i) => (
+          <div
+            key={item.q}
+            className="rounded-2xl border border-marketing-border bg-white"
+          >
+            <button
+              type="button"
+              aria-expanded={open === i}
+              onClick={() => setOpen(open === i ? null : i)}
+              className="flex w-full items-center justify-between gap-4 px-6 py-4 text-left text-base font-semibold"
+            >
+              {item.q}
+              <ChevronDown
+                aria-hidden
+                size={18}
+                className={`shrink-0 text-marketing-slate transition-transform duration-normal ease-app ${
+                  open === i ? "rotate-180" : ""
+                }`}
+              />
+            </button>
+            {open === i && (
+              <p className="px-6 pb-5 text-sm leading-relaxed text-marketing-slate">
+                {item.a}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}