78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
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'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>
|
|
);
|
|
}
|