feat: rebuild marketing site with full component suite and preview

marketing-site/components/Recipe.jsx

@@ -0,0 +1,120 @@
+function ShieldCheck() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
+        stroke="#1C5D4C"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m5.6 8 1.7 1.7L10.6 6"
+        stroke="#1C5D4C"
+        strokeWidth="1.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function Recipe() {
+  return (
+    <section className="section" id="recipe">
+      <div className="wrap">
+        <div className="recipe-head reveal">
+          <span className="spec">Read an actual recipe</span>
+          <h2>Every entry is a workflow you can run.</h2>
+          <p>
+            Here’s a real one from the founding library — the whole thing, exactly as it
+            appears in the guide. This is the format behind every workflow.
+          </p>
+        </div>
+
+        <div className="recipe reveal">
+          <div className="recipe-top">
+            <span className="recipe-id">
+              recipe <b>RE-04</b> · v1.2 · ~15 min
+            </span>
+            <span className="recipe-vert">Real Estate</span>
+          </div>
+          <div className="recipe-body">
+            <h3 className="recipe-title">
+              Draft a property-market brief with an AI agent — without leaking client data.
+            </h3>
+
+            <div className="row">
+              <div className="k">Problem</div>
+              <div className="v">
+                You need a sharp neighborhood market brief for a client meeting, fast — but
+                the listing sheet and client notes can’t go into a public model.{" "}
+                <span className="sub">
+                  Job: turn messy local data into a credible one-pager in minutes, safely.
+                </span>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Method</div>
+              <div className="v">
+                <ol className="steps">
+                  <li>Strip identifiers from the source data locally (a provided script does this).</li>
+                  <li>Prompt the agent with the anonymized sample and a fixed brief template.</li>
+                  <li>Review the draft against the checklist before anything leaves your machine.</li>
+                </ol>
+                <div className="term" role="img" aria-label="Sample terminal output from the workflow">
+                  <div className="term-bar">
+                    <i></i>
+                    <i></i>
+                    <i></i>
+                    <span>agent — property-brief · sample dataset (non-confidential)</span>
+                  </div>
+                  <pre>
+                    <span className="c-dim">{"$ "}</span>
+                    <span className="c-user">{"brief"}</span>
+                    {" --input "}
+                    <span className="c-key">{"sample_listings.csv"}</span>
+                    {" --template market-1pager\n\n"}
+                    <span className="c-dim">{"✓ redacted 3 fields (owner_name, phone, exact_address)\n✓ 41 comps in radius · median $/sqft computed\n\n"}</span>
+                    <span className="c-ok">{"MARKET BRIEF — Maple Heights (sample)\n"}</span>
+                    {" · Median list: $420/sqft  (▲ 4.1% QoQ)\n · Days on market: 22  (was 31)\n · Inventory: 1.8 mo — seller-leaning\n · Read: price to comp, expect <2 wks at ask\n\n"}
+                    <span className="c-dim">{"# cost this run: $0.03 · model: claude · 2,140 tokens"}</span>
+                  </pre>
+                </div>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Safeguards</div>
+              <div className="v">
+                <div className="guard">
+                  <ShieldCheck />
+                  <span>
+                    Redaction runs <b style={{ color: "var(--color-ink)" }}>on your machine</b> —
+                    raw client data never reaches the model.
+                  </span>
+                </div>
+                <div className="guard">
+                  <ShieldCheck />
+                  <span>
+                    A human review step is required before the brief is shared. The checklist
+                    is part of the recipe.
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Try it</div>
+              <div className="v">
+                Run the same brief on the included sample dataset (no real client data) in
+                about 15 minutes — then swap in your own, safely.{" "}
+                <span className="chip">◷ cost to try ≈ $0.03</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}