Build standalone CiviCRM check-in middleware

components/SiteChrome.tsx

@@ -0,0 +1,77 @@
+import Link from "next/link";
+
+export function SiteHeader() {
+  return (
+    <header className="border-b border-stone-200 bg-white">
+      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4 sm:px-6">
+        <Link
+          href="https://fci.coop"
+          className="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-500/40 rounded"
+        >
+          <Logo />
+          <span className="flex flex-col leading-tight">
+            <span className="font-semibold text-stone-900">Food Co-op Initiative</span>
+            <span className="text-xs text-stone-600">Co-op Check-in</span>
+          </span>
+        </Link>
+        <nav aria-label="Primary">
+          <Link
+            href="https://fci.coop"
+            className="text-sm font-medium text-stone-700 hover:text-leaf-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-500/40 rounded px-2 py-1"
+          >
+            fci.coop ↗
+          </Link>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+export function SiteFooter() {
+  return (
+    <footer className="mt-auto border-t border-stone-200 bg-stone-50">
+      <div className="mx-auto max-w-5xl px-4 py-6 sm:px-6 text-sm text-stone-600">
+        <p>
+          Securely connected to your co-op&apos;s record. Your data goes only to your CRM —
+          nothing is shared with third parties.
+        </p>
+        <p className="mt-1">
+          Questions? Contact your engagement coordinator for a fresh link or to update your records.
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+/**
+ * Inline SVG logo placeholder. Distinctive but neutral until the user supplies
+ * the actual fci.coop logo asset to drop into /public.
+ *
+ * Geometry: a stylized "co-op leaf" — three overlapping leaf shapes forming a
+ * loose cooperative motif. Pure CSS color so it adapts to dark/light themes.
+ */
+function Logo() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      role="img"
+      aria-label="Food Co-op Initiative"
+      className="text-leaf-700"
+    >
+      <circle cx="20" cy="20" r="19" fill="currentColor" opacity="0.08" />
+      <path
+        d="M20 6 C 24 12, 30 14, 30 20 C 30 26, 24 30, 20 30 C 16 30, 10 26, 10 20 C 10 14, 16 12, 20 6 Z"
+        fill="currentColor"
+        opacity="0.85"
+      />
+      <path
+        d="M20 11 C 22 15, 26 17, 26 20 C 26 23, 22 26, 20 26 C 18 26, 14 23, 14 20 C 14 17, 18 15, 20 11 Z"
+        fill="white"
+        opacity="0.9"
+      />
+      <circle cx="20" cy="20" r="2" fill="currentColor" />
+    </svg>
+  );
+}