// Votula brand kit — the marks and motifs from brand.html as reusable pieces.
// Everything here is geometry only; colour comes from the tone prop or CSS vars.
const { useId, useState, useEffect, useRef } = React;
/* ── Mark A · Sunset V ───────────────────────────────────────
A setting sun cut by the horizon. The V is the first letter of
the name and an arrow down into the water.
Tones: brand yellow sun, salt V, lagoon horizon (on black)
solid one flat colour (on yellow, or single-colour print)
light all salt
------------------------------------------------------------- */
function Mark({ size = 40, tone = "brand", color, title }) {
const clip = useId().replace(/:/g, "");
const sun = tone === "brand" ? "#FFD200" : color || (tone === "light" ? "#FBF7EC" : "#06090E");
const vee = tone === "brand" ? "#FBF7EC" : sun;
const bar = tone === "brand" ? "#12D8B0" : sun;
return (
);
}
/* Horizontal lockup. Clear space equals the height of the sun disc. */
function Lockup({ markSize = 34, type = 24, tone = "brand", sub, href = "index.html", stacked = false }) {
const ink = tone === "brand" || tone === "light" ? "var(--salt)" : "var(--black)";
const Tag = href ? "a" : "div";
return (
VOTULA
{sub && (
{sub}
)}
);
}
/* ── Double wave rule ────────────────────────────────────────
Replaces the horizontal divider. Lagoon over Danube blue.
------------------------------------------------------------- */
function wavePath(y, width = 1200, seg = 30) {
let d = `M0 ${y} q${seg / 2} -${Math.round(seg * 0.55)} ${seg} 0`;
for (let x = seg; x < width; x += seg) d += ` t${seg} 0`;
return d;
}
function WaveRule({ height = 22, opacity = 0.9 }) {
return (
);
}
/* ── Chain strip ─────────────────────────────────────────────
Progress, timelines, steps. The last block stays dashed until
it is confirmed.
------------------------------------------------------------- */
function ChainStrip({ steps, confirmed = steps.length - 1 }) {
return (
{steps.map((s, i) => {
const isPending = i > confirmed;
return (
);
})}
);
}
/* ── Sunset hero background ──────────────────────────────────
Heat at the top, ledger at the bottom. Exactly one sun.
`full` = the landing hero ramp; otherwise a shorter interior band.
------------------------------------------------------------- */
function SunsetBackdrop({ full = false, sunTop = "34%", sunLeft = "50%", sunWidth = "min(560px, 70vw)", sunOpacity = 1 }) {
return (
{full && (
)}
);
}
/* ── Interior page hero ──────────────────────────────────────
A shorter sunset band. Still exactly one sun, still ledger at
the bottom — but the heat stops short of yellow so the page
below it can carry the accent.
------------------------------------------------------------- */
function PageHero({ eyebrow, title, lede, actions, aside }) {
return (
{/* Sun pushed right and dimmed: the headline and buttons live on the
left, and nothing should have to read over the disc. */}
{/* Wide column on the left: the headline needs the room more than the
aside card does. */}
{eyebrow}
{title}
{lede &&
{lede}
}
{actions &&
{actions}
}
{aside &&
{aside}
}
);
}
/* ── Section header ──────────────────────────────────────── */
function SectionHead({ index, title, note, tone = "lagoon" }) {
const cls = tone === "yellow" ? "eyebrow eyebrow--yellow" : tone === "sunset" ? "eyebrow eyebrow--sunset" : "eyebrow";
return (
{index} — {title.eyebrow}
{title.head}
{note &&
{note}
}
);
}
/* ── Parameter table ─────────────────────────────────────────
Protocol values are data, so they are set in the mono face and
right-aligned in every column but the first. Wide tables scroll
inside their own box rather than pushing the page sideways.
------------------------------------------------------------- */
function ParamTable({ title, cols, rows, note }) {
return (
{title}
{cols.map(c =>
{c}
)}
{rows.map(r => (
{r.map((cell, i) => (
{cell}
))}
))}
{note && (
{note}
)}
);
}
/* ── Module chips ────────────────────────────────────────────
One kernel layer: its name, what it is for, and the contracts
that live in it. Contract names are data, so: mono.
------------------------------------------------------------- */
function LayerCard({ name, note, modules, colour, badge }) {
return (
{name}
{note}
{badge && {badge}}
{modules.map(m => {m})}
);
}
/* ── Copy block ──────────────────────────────────────────────
A block of text somebody needs to paste somewhere else — the
billing details, mainly. Mono, selectable, and one button away
from the clipboard.
------------------------------------------------------------- */
function CopyBlock({ text, tone = "dark" }) {
const [copied, setCopied] = useState(false);
const timer = useRef(null);
useEffect(() => () => clearTimeout(timer.current), []);
const copy = async () => {
try {
await navigator.clipboard.writeText(text);
} catch (e) {
// No clipboard API, or no permission in this context: fall back to
// a hidden textarea, which works everywhere that matters.
const ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); } catch (_) { /* nothing left to try */ }
ta.remove();
}
setCopied(true);
clearTimeout(timer.current);
timer.current = setTimeout(() => setCopied(false), 2200);
};
return (
{text}
);
}
/* ── Record rows ─────────────────────────────────────────────
A certified fact and its value. Definition list, because that
is what it is.
------------------------------------------------------------- */
function RecordList({ rows }) {
return (
{rows.map(([k, v]) => (
{k}
{v}
))}
);
}
/* ── Stat ────────────────────────────────────────────────── */
function Stat({ label, value, unit, note }) {
return (