/* components.jsx — atomic shared components for the Ditto Vault landing page
Nav, footer, stat-row, partner-mark, etc. All Tailwind/shadcn-equivalent atoms.
Each component renders the same on desktop and mobile — layout decisions live
in the section files, atomic components stay viewport-agnostic.
*/
// ── Tiny SVG icon set ──────────────────────────────────────────────────────
// Only the marks we actually use. Strokes use currentColor so callers can
// recolor by setting `color:` on the parent.
const Icon = {
arrow: (p) => ,
arrowR: (p) => ,
arrowLong: (p) => ,
lock: (p) => ,
check: (p) => ,
dot: (p) => ,
github: (p) => ,
x: (p) => ,
ext: (p) => ,
};
// ── Top nav — floating pill, sticky, active-section aware ────────────────
// Active highlight is driven by `useActiveSection` in app.jsx; passed in as
// `active` here. Mobile rendering switches to a compact pill + a slide-down
// full-viewport menu panel.
const NAV_LINKS = [
{ id: "vault", label: "Vault" },
{ id: "onramp", label: "Onramp" },
{ id: "marketplace", label: "Marketplace" },
{ id: "dvn", label: "DVN" },
{ id: "roadmap", label: "Roadmap" },
];
function HamburgerIcon({ open }) {
// Two-line hamburger that morphs into an X. Pure SVG; rotates via CSS
// transforms (GPU-accelerated, no layout shift).
return (
);
}
function Nav({ active = null, mobile = false }) {
const [open, setOpen] = React.useState(false);
// Close menu on Escape / when window resizes past mobile breakpoint.
React.useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [open]);
if (mobile) {
return (
<>
);
}
// ── Ditto wordmark (white version, scaled by height) ─────────────────────
function DittoMark({ height = 22 }) {
return (
);
}
function DittoSymbol({ size = 24 }) {
return (
);
}
// ── Stat row — compact horizontal stat strip used in Sections 2 & 5 ──────
function StatRow({ items, mobile = false }) {
return (
{items.map((s, i) => (
{s.value}
{s.label}
))}
);
}
// ── Partner wordmark — generic styled wordmark, monochrome ───────────────
// We don't have real licensed logos here; we render the partner name in a
// neutral grotesk so it reads as an institutional wordmark next to the
// product ticker. Frontend can swap these for licensed SVGs.
function PartnerMark({ name, sub }) {
return (
{name}
{sub &&
{sub}
}
);
}
// ── Section header — big numeric anchor + heading + intro paragraph ──────
// The repeated mono "/ 02 / VAULT" eyebrow pattern across every section reads
// as AI scaffolding; replaced with a single large accent number that anchors
// the section visually without the tracked-uppercase label noise. `label` is
// still accepted for backward compat but no longer rendered.
function SectionHeader({ number, label, heading, body, headingWidth = "20ch" }) {
return (
{number && (
{String(number).padStart(2,"0")}
)}
{heading}
{body &&
{body}
}
);
}
// Compact eyebrow — for in-card labels, status strips, etc.
function Eyebrow({ children, accent = false }) {
return (
);
}
function DittoSymbol({ size = 24 }) {
return (
);
}
// ── Stat row — compact horizontal stat strip used in Sections 2 & 5 ──────
function StatRow({ items, mobile = false }) {
return (