// shared-components.jsx // Logos, icons, nav, footer, mobile menu — shared between Veridyne + Keystone pages. // ─── Brand marks ─────────────────────────────────────────────────────────── // Veridyne symbol mark — official logo. The PNG is square with slate bg, // so we drop it in unwrapped and just round the corners. const VeridyneMark = ({ size = 32, alt = "Veridyne" }) => ( {alt} ); // Veridyne full lockup (symbol stacked over wordmark, transparent bg) const VeridyneLockup = ({ height = 64, alt = "Veridyne Solutions" }) => ( {alt} ); // Program marks — simple, universally-readable icons. // Keystone: filled trapezoid (literal architectural keystone). const KeystoneMark = ({ size = 16, color = "currentColor" }) => ( ); // Continuum: infinity loop — universal "continuous, ongoing". const ContinuumMark = ({ size = 16, color = "currentColor" }) => ( ); // Catalyst: lightning bolt — spark / transformation. const CatalystMark = ({ size = 16, color = "currentColor" }) => ( ); // Synapse: three connected nodes — neural / AI connection. const SynapseMark = ({ size = 16, color = "currentColor" }) => ( ); // Large architectural illustration — arch with 5 named program stones. // active: "veridyne" | "keystone" | "continuum" | "catalyst" | "synapse" // Each stone sits at an even index (0,2,4,6,8) across the 9-stone arch; // odd-index stones are neutral spacers. const KeystoneIllustration = ({ active = "veridyne" }) => { const PROG_STONES = [ { key: "veridyne", label: "VERIDYNE", color: "#B4632A", fill: "rgba(180,99,42,0.60)", dimFill: "rgba(180,99,42,0.07)", stroke: "rgba(180,99,42,0.90)", dimStroke: "rgba(180,99,42,0.30)", shadow: "rgba(180,99,42,0.45)", idx: 0 }, { key: "keystone", label: "KEYSTONE", color: "#9E7B3B", fill: "rgba(158,123,59,0.60)", dimFill: "rgba(158,123,59,0.07)", stroke: "rgba(158,123,59,0.90)",dimStroke: "rgba(158,123,59,0.30)", shadow: "rgba(158,123,59,0.45)",idx: 2 }, { key: "continuum", label: "CONTINUUM", color: "#6B7D5C", fill: "rgba(107,125,92,0.60)", dimFill: "rgba(107,125,92,0.07)", stroke: "rgba(107,125,92,0.90)",dimStroke: "rgba(107,125,92,0.30)", shadow: "rgba(107,125,92,0.45)",idx: 4 }, { key: "catalyst", label: "CATALYST", color: "#C87A3F", fill: "rgba(200,122,63,0.60)", dimFill: "rgba(200,122,63,0.07)", stroke: "rgba(200,122,63,0.90)",dimStroke: "rgba(200,122,63,0.30)", shadow: "rgba(200,122,63,0.45)",idx: 6 }, { key: "synapse", label: "SYNAPSE", color: "#7591BD", fill: "rgba(117,145,189,0.60)",dimFill: "rgba(117,145,189,0.07)", stroke: "rgba(117,145,189,0.90)",dimStroke:"rgba(117,145,189,0.30)", shadow: "rgba(117,145,189,0.45)",idx: 8 }, ]; const r1 = 100, r2 = 140, cx = 200, cy = 240; const geom = (i) => { const angleDeg = -180 + (i + 1) * 18; const a1 = (angleDeg - 8) * Math.PI / 180; const a2 = (angleDeg + 8) * Math.PI / 180; const midA = angleDeg * Math.PI / 180; const p1 = [cx + r1 * Math.cos(a1), cy + r1 * Math.sin(a1)]; const p2 = [cx + r2 * Math.cos(a1), cy + r2 * Math.sin(a1)]; const p3 = [cx + r2 * Math.cos(a2), cy + r2 * Math.sin(a2)]; const p4 = [cx + r1 * Math.cos(a2), cy + r1 * Math.sin(a2)]; return { d: `M ${p1[0].toFixed(2)} ${p1[1].toFixed(2)} L ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} L ${p3[0].toFixed(2)} ${p3[1].toFixed(2)} L ${p4[0].toFixed(2)} ${p4[1].toFixed(2)} Z`, outerX: cx + r2 * Math.cos(midA), outerY: cy + r2 * Math.sin(midA), }; }; const activeProg = PROG_STONES.find(p => p.key === active) || PROG_STONES[0]; const ag = geom(activeProg.idx); return ( ); }; // Service icons (line, architectural) const IconArch = () => ( ); const IconWorkshop = () => ( ); const IconReview = () => ( ); const IconSecurity = () => ( ); const IconAI = () => ( ); const IconMigrate = () => ( ); const IconFGA = () => ( ); // Hero-meta thin icons const IconCompass = () => ( ); const IconLayers = () => ( ); const IconClock = () => ( ); const IconRoute = () => ( ); const IconTarget = () => ( ); const IconGlobe = () => ( ); const IconBriefcase = () => ( ); const IconWhatsApp = () => ( ); const IconArrow = ({ size = 14 }) => ( ); const IconCheck = ({ size = 16 }) => ( ); const IconMail = () => ( ); const IconBlueprint = () => ( ); const IconDoc = () => ( ); const IconWrench = () => ( ); const IconClipboard = () => ( ); // ─── Brand Header (Nav) ──────────────────────────────────────────────────── // Section metadata for desktop nav + mobile menu — id (scroll-spy target), // label, optional subtitle (mobile cards), and a small icon SVG. const VERIDYNE_NAV = [ { id: "services", label: "Services", href: "#services", sub: "Six practices for Auth0 & Okta", Icon: () => ( ) }, { id: "programs", label: "Programs", href: "#programs", sub: "Keystone · Continuum · Catalyst · Synapse", Icon: () => ( ) }, { id: "approach", label: "Approach", href: "#approach", sub: "Our four-stage delivery framework", Icon: () => ( ) }, { id: "about", label: "About", href: "#about", sub: "How we think about identity", Icon: () => ( ) }, ]; // Tiny reusable icon factories for the program-page nav models. const _NavIco = { what: () => (), phases: () => (), engage: () => (), deliv: () => (), rhythm: () => (), catalog:() => (), format: () => (), coverage:() => (), }; const KEYSTONE_NAV = [ { id: "what", label: "What", href: "#what", sub: "The thesis", Icon: _NavIco.what }, { id: "phases", label: "Phases", href: "#phases", sub: "Five stages, in order", Icon: _NavIco.phases }, { id: "engagements", label: "Engagements", href: "#engagements", sub: "Foundation · Span · Vault · Review", Icon: _NavIco.engage }, { id: "deliverables", label: "Deliverables", href: "#deliverables", sub: "What lands in your repo", Icon: _NavIco.deliv }, ]; const CONTINUUM_NAV = [ { id: "what", label: "What", href: "#what", sub: "The thesis", Icon: _NavIco.what }, { id: "rhythm", label: "Rhythm", href: "#rhythm", sub: "Weekly cadence, quarterly review", Icon: _NavIco.rhythm }, { id: "levels", label: "Levels", href: "#levels", sub: "Block sizes from light to heavy", Icon: _NavIco.engage }, { id: "deliverables", label: "Deliverables", href: "#deliverables", sub: "Rolling artefacts you keep", Icon: _NavIco.deliv }, ]; const CATALYST_NAV = [ { id: "what", label: "What", href: "#what", sub: "The thesis", Icon: _NavIco.what }, { id: "formats", label: "Formats", href: "#formats", sub: "Half-day · Two-day · Intensive", Icon: _NavIco.format }, { id: "catalog", label: "Catalog", href: "#catalog", sub: "Workshops we run today", Icon: _NavIco.catalog }, { id: "deliverables", label: "Deliverables", href: "#deliverables", sub: "What your team walks away with", Icon: _NavIco.deliv }, ]; const SYNAPSE_NAV = [ { id: "what", label: "What", href: "#what", sub: "The thesis", Icon: _NavIco.what }, { id: "coverage", label: "Coverage", href: "#coverage", sub: "ChatGPT · Claude · Gemini · Local", Icon: _NavIco.coverage }, { id: "engagement", label: "Engagement", href: "#engagement", sub: "Flexible, weekly, on demand", Icon: _NavIco.engage }, { id: "deliverables", label: "Deliverables", href: "#deliverables", sub: "Models, playbooks, audit posture", Icon: _NavIco.deliv }, ]; // Centralized program registry — single source for color, mark, nav and copy. // Callers pass `program="keystone"|"continuum"|"catalyst"|"synapse"`; falsy // means the main Veridyne page. const PROGRAMS = { keystone: { name: "Keystone", sub: "by Veridyne", page: "keystone.html", Mark: () => , iconColor: "#b6924d", nav: KEYSTONE_NAV, cssVar: "--brass" }, continuum: { name: "Continuum", sub: "by Veridyne", page: "continuum.html", Mark: () => , iconColor: "#849575", nav: CONTINUUM_NAV, cssVar: "--sage" }, catalyst: { name: "Catalyst", sub: "by Veridyne", page: "catalyst.html", Mark: () => , iconColor: "#c87a3f", nav: CATALYST_NAV, cssVar: "--copper" }, synapse: { name: "Synapse", sub: "by Veridyne", page: "synapse.html", Mark: () => , iconColor: "#7591bd", nav: SYNAPSE_NAV, cssVar: "--indigo" }, }; // Back-compat: isKeystone={true} keeps working as program="keystone". function _resolveProgram(p) { if (!p) return null; return PROGRAMS[p] || null; } function BrandHeader({ active = "home", isKeystone = false, program: programProp, onMobileOpen }) { const programKey = programProp || (isKeystone ? "keystone" : null); const prog = _resolveProgram(programKey); const nav = prog ? prog.nav : VERIDYNE_NAV; const ids = React.useMemo(() => nav.map((n) => n.id), [programKey]); const activeId = useScrollSpy(ids); const linksRef = React.useRef(null); const [pill, setPill] = React.useState({ x: 0, w: 0, visible: false }); // Slide a pill behind whichever link is "active" (scroll-spy) or hovered. const positionPill = React.useCallback((id) => { const root = linksRef.current; if (!root) return; const el = root.querySelector(`[data-nav-id="${id}"]`); if (!el) { setPill((p) => ({ ...p, visible: false })); return; } const rRoot = root.getBoundingClientRect(); const rLink = el.getBoundingClientRect(); setPill({ x: rLink.left - rRoot.left, w: rLink.width, visible: true }); }, []); React.useEffect(() => { positionPill(activeId); }, [activeId, positionPill]); React.useEffect(() => { const onResize = () => positionPill(activeId); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [activeId, positionPill]); return ( ); } function MobileMenu({ open, onClose, isKeystone = false, program: programProp }) { if (!open) return null; const programKey = programProp || (isKeystone ? "keystone" : null); const prog = _resolveProgram(programKey); const sections = prog ? prog.nav : VERIDYNE_NAV; return (
{prog ? ( ) : ( )}
{prog ? prog.name : "Veridyne"} {prog ? prog.sub : "Solutions"}
Navigate
{sections.map((s, i) => ( {s.label} {s.sub} ))}
Programs
Reach us
); } // ─── Footer ──────────────────────────────────────────────────────────────── function Footer({ isKeystone = false, program: programProp }) { const programKey = programProp || (isKeystone ? "keystone" : null); const prog = _resolveProgram(programKey); const homeHref = prog ? "index.html" : "#top"; return ( ); } // ─── Contact form (shared) ───────────────────────────────────────────────── function ContactForm({ accent = "copper", initialTopic = "Architecture & Design" }) { const [data, setData] = React.useState({ name: "", email: "", company: "", topic: initialTopic, message: "" }); const [errors, setErrors] = React.useState({}); const [sent, setSent] = React.useState(false); // External CTAs can pre-select a topic via: // window.dispatchEvent(new CustomEvent('set-contact-topic', { detail: 'Continuum' })) React.useEffect(() => { const onTopic = (e) => { if (typeof e.detail === 'string') { setData((d) => ({ ...d, topic: e.detail })); } }; window.addEventListener('set-contact-topic', onTopic); return () => window.removeEventListener('set-contact-topic', onTopic); }, []); const set = (k) => (e) => { setData((d) => ({ ...d, [k]: e.target.value })); if (errors[k]) setErrors((er) => ({ ...er, [k]: null })); }; const submit = (e) => { e.preventDefault(); const er = {}; if (!data.name.trim()) er.name = "Required"; if (!/^\S+@\S+\.\S+$/.test(data.email)) er.email = "Email not valid"; if (!data.message.trim() || data.message.trim().length < 12) er.message = "Tell us a bit more"; setErrors(er); if (Object.keys(er).length) return; // Compose mailto so the message routes to solutions@veridyne.eu via the // user's mail client — honest no-backend approach. Subject carries the // topic; body composes the form fields in a readable layout. const subject = `[Veridyne \u00b7 ${data.topic}] inquiry from ${data.name}`; const bodyLines = [ `From: ${data.name} <${data.email}>`, data.company ? `Company: ${data.company}` : null, `Topic: ${data.topic}`, "", "\u2014", "", data.message, "", "\u2014 Sent via veridyne.eu contact form", ].filter(Boolean); const href = "mailto:solutions@veridyne.eu" + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(bodyLines.join("\n")); window.location.href = href; setSent(true); }; if (sent) { return (

Draft opened.

Your mail client should now have a pre-filled draft addressed to solutions@veridyne.eu. Review it, then hit Send from there — nothing has been sent yet.

Nothing happened? Email us directly at solutions@veridyne.eu.

); } return (
This opens a draft in your mail client — nothing is sent from this page. Fill it in below and we’ll prepare the message addressed to solutions@veridyne.eu. You review and send it from your own inbox, so you keep the copy.
{errors.name && {errors.name}}
{errors.email && {errors.email}}