designslife/WebForm-mw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual identity: Field Almanac — Fraunces+DM Sans, OKLCH cream/leaf/clay palette, paper texture, hand-drawn stage icons, draft auto-save, stage progress dots

Browse Source
This commit is contained in:
Joel Brock
2026-05-09 21:48:45 -07:00
parent dcdf315244
commit 656bf7fd0a
9 changed files with 776 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/SiteChrome.tsx
View File

@@ -2,22 +2,27 @@ 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">
<header className="border-b border-rule bg-paper/80 backdrop-blur-sm">
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 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"
className="group flex items-center gap-3.5 focus:outline-none"
aria-label="Food Co-op Initiative — fci.coop"
>
<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>
<div className="flex flex-col leading-none">
<span className="font-display text-base font-medium text-ink tracking-tight">
Food Co-op Initiative
</span>
<span className="mt-1 text-[11px] uppercase tracking-[0.18em] text-ink-mute">
Co-op Check-in
</span>
</div>
</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"
className="font-body text-sm text-ink-soft hover:text-leaf-700 transition-colors px-2 py-1"
>
fci.coop ↗
</Link>
@@ -29,14 +34,19 @@ export function SiteHeader() {
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.
<footer className="mt-auto border-t border-rule bg-paper-2/60">
<div className="mx-auto max-w-3xl px-4 py-7 sm:px-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-baseline sm:justify-between">
<p className="font-display text-sm italic text-ink-soft">
&ldquo;A grocery co-op begins with people who decide to feed each other well.&rdquo;
</p>
<p className="text-xs text-ink-mute">
Need a fresh link? Contact your engagement coordinator.
</p>
</div>
<p className="mt-4 text-xs text-ink-mute leading-relaxed">
Your responses go directly to your co-op&apos;s record. Nothing is shared with third
parties. This page is only reachable through a personalized link issued to you.
</p>
</div>
</footer>
@@ -44,34 +54,50 @@ export function SiteFooter() {
}
/**
* Inline SVG logo placeholder. Distinctive but neutral until the user supplies
* the actual fci.coop logo asset to drop into /public.
* "Sown" — a stylized geometric mark: a center point (the co-op) with six
* radiating sprouts (the six framework stages). Inscribed in a soft circle
* (the cooperative principle). Pure SVG, scales cleanly, no external asset.
*
* 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.
* Drawn at 40px; can be sized via className.
*/
function Logo() {
function Logo({ className = "" }: { className?: string }) {
return (
<svg
width="40"
height="40"
viewBox="0 0 40 40"
width="42"
height="42"
viewBox="0 0 42 42"
role="img"
aria-label="Food Co-op Initiative"
className="text-leaf-700"
aria-label="Food Co-op Initiative logo"
className={"text-leaf-700 " + className}
>
<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" />
{/* Outer cooperative ring */}
<circle cx="21" cy="21" r="19" stroke="currentColor" strokeWidth="1.2" fill="none" />
<circle cx="21" cy="21" r="19" fill="currentColor" opacity="0.06" />
{/* Six sprouts radiating from center, one per stage */}
<g stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" fill="none">
{/* North */}
<path d="M21 21 V8" />
<path d="M21 12 q-2.5 -1 -3.5 -3 q3 -.5 3.5 3 z" fill="currentColor" opacity="0.7" />
{/* NE */}
<path d="M21 21 L30 12" />
<path d="M27.3 14.7 q.7 -2.6 -.5 -4.7 q2.5 1.5 .5 4.7 z" fill="currentColor" opacity="0.6" />
{/* SE */}
<path d="M21 21 L30 30" />
<path d="M27.3 27.3 q2.6 .7 4.7 -.5 q-1.5 2.5 -4.7 .5 z" fill="currentColor" opacity="0.5" />
{/* South */}
<path d="M21 21 V34" />
<path d="M21 30 q2.5 1 3.5 3 q-3 .5 -3.5 -3 z" fill="currentColor" opacity="0.4" />
{/* SW */}
<path d="M21 21 L12 30" />
<path d="M14.7 27.3 q-2.6 .7 -4.7 -.5 q1.5 2.5 4.7 .5 z" fill="currentColor" opacity="0.5" />
{/* NW */}
<path d="M21 21 L12 12" />
<path d="M14.7 14.7 q-.7 -2.6 .5 -4.7 q-2.5 1.5 -.5 4.7 z" fill="currentColor" opacity="0.6" />
</g>
{/* Center seed */}
<circle cx="21" cy="21" r="2.2" fill="currentColor" />
</svg>
);
}