104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<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="group flex items-center gap-3.5 focus:outline-none"
|
|
aria-label="Food Co-op Initiative — fci.coop"
|
|
>
|
|
<Logo />
|
|
<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="font-body text-sm text-ink-soft hover:text-leaf-700 transition-colors px-2 py-1"
|
|
>
|
|
fci.coop ↗
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export function SiteFooter() {
|
|
return (
|
|
<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">
|
|
“A grocery co-op begins with people who decide to feed each other well.”
|
|
</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's record. Nothing is shared with third
|
|
parties. This page is only reachable through a personalized link issued to you.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* "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.
|
|
*
|
|
* Drawn at 40px; can be sized via className.
|
|
*/
|
|
function Logo({ className = "" }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
width="42"
|
|
height="42"
|
|
viewBox="0 0 42 42"
|
|
role="img"
|
|
aria-label="Food Co-op Initiative logo"
|
|
className={"text-leaf-700 " + className}
|
|
>
|
|
{/* 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>
|
|
);
|
|
}
|