/* global React */ const { useState } = React; /* ============================================================= LOGO MARK ============================================================= */ function LogoMark({ size = 24, color = "currentColor", accent = "var(--accent)" }) { return ( {/* two input vectors converging on a node */} {/* convergence node */} {/* small gap, then the aligned output vector */} {/* filled triangle arrowhead */} ); } /* ============================================================= HERO VISUAL — big-picture: complexity → clarity Left: scattered vectors pointing in different directions Center: VECTORSWIFT.CORE convergence Right: aligned vectors, all pointing the same way ============================================================= */ function HeroVisual() { const [hover, setHover] = useState(null); const cx = 380; const cy = 320; // LEFT — chaotic inputs. Short labeled arrows at random-ish angles. // Labels are right-aligned at (s.x - 10) so origin x must leave room for // the longest label (~"WORKFLOWS" ≈ 90px wide at our font size). const inputs = [ { x: 150, y: 80, angle: 26, label: "TEAMS" }, { x: 130, y: 170, angle: -8, label: "TOOLS" }, { x: 160, y: 250, angle: 14, label: "DATA" }, { x: 124, y: 340, angle: -22, label: "POLICY" }, { x: 154, y: 430, angle: 6, label: "WORKFLOWS" }, { x: 132, y: 520, angle: -16, label: "VENDORS" }, ]; // RIGHT — aligned outcomes, all flowing one direction const outputs = [ { label: "STRATEGY", y: 110 }, { label: "TRAINED TEAMS", y: 188 }, { label: "SECURE SYSTEMS", y: 266 }, { label: "AUTOMATIONS", y: 344 }, { label: "MEASURED IMPACT", y: 422 }, { label: "ADOPTION", y: 500 }, ]; return (
setHover(null)}> {/* axis labels */} COMPLEXITY CLARITY {/* vertical zone guides */} {/* CONVERGENCE CORE */} VECTORSWIFT CORE {/* INPUTS → CORE — splines from chaotic origins */} {inputs.map((s, i) => { const sx = s.x + 56; const sy = s.y; const c1x = sx + 100; const c1y = sy + (s.angle * 1.5); const c2x = cx - 110; const c2y = cy; const d = `M ${sx} ${sy} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${cx - 22} ${cy}`; const isHover = hover === `in-${i}`; return ( ); })} {/* LEFT — chaotic vectors */} {inputs.map((s, i) => { const rad = (s.angle * Math.PI) / 180; const x2 = s.x + Math.cos(rad) * 56; const y2 = s.y + Math.sin(rad) * 56; const isHover = hover === `in-${i}`; return ( setHover(`in-${i}`)} style={{ cursor: "default" }}> {/* tiny origin dot */} {/* directional vector */} {/* label */} {s.label} ); })} {/* CORE → outputs (clean parallel) */} {outputs.map((n, i) => { const tx = 560; const ty = n.y; const d = `M ${cx + 22} ${cy} C ${cx + 110} ${cy}, ${tx - 100} ${ty}, ${tx} ${ty}`; const isHover = hover === `out-${i}`; return ( setHover(`out-${i}`)}> ); })} {/* RIGHT — aligned outcome labels */} {outputs.map((n, i) => ( {n.label} ))} {/* baseline tick scale at bottom */} {Array.from({length: 31}).map((_, i) => ( ))} INPUT CONVERGE OUTPUT {/* corner brackets */}
); } /* ============================================================= SERVICE ICONS — simple, readable abstract marks ============================================================= */ function SvcIcon({ kind }) { const stroke = "rgba(236,232,223,0.9)"; const accent = "var(--accent)"; const ink = "var(--ink)"; const label = "rgba(236,232,223,0.85)"; const props = { width: 120, height: 100, viewBox: "0 0 120 100", fill: "none" }; if (kind === "training") { // Knowledge transfer — person node out to many endpoints return ( ); } if (kind === "custom") { // Modular composition — building blocks return ( ); } if (kind === "doc") { // Documents — clean, not over-detailed return ( {/* lock badge */} ); } if (kind === "strategy") { // Roadmap curve with milestones return ( NOW Q1 Q2 Q3 ); } return null; } /* ============================================================= INDUSTRY MARKER — distinct geometric glyphs ============================================================= */ function IndMarker({ kind }) { const s = "rgba(236,232,223,0.9)"; const acc = "var(--accent)"; const props = { width: 64, height: 64, viewBox: "0 0 64 64", fill: "none" }; if (kind === "legal") { return ( ); } if (kind === "retail") { return ( {/* shopping bag silhouette with handles + accent tag */} ); } if (kind === "enterprise") { return ( ); } if (kind === "gov") { return ( ); } return null; } /* ============================================================= PROCESS DIAGRAM — clean, readable, big-picture ============================================================= */ function ProcessFlow() { return ( {[80, 600, 1120].map((x, i) => ( ))} ); } /* ============================================================= TRUST MARKERS ============================================================= */ function TrustMark({ n }) { const acc = "var(--accent)"; const s = "rgba(236,232,223,0.92)"; const map = { 0: , 1: , 2: , 3: , 4: , }; return {map[n]}; } /* ============================================================= CTA BG — flowing field ============================================================= */ function CTABg() { return ( {Array.from({length: 8}).map((_, i) => ( ))} ); } /* ============================================================= ARROWS ============================================================= */ function ArrowEast({ size = 14 }) { return ( ); } function ArrowNE({ size = 14 }) { return ( ); } Object.assign(window, { LogoMark, HeroVisual, SvcIcon, IndMarker, ProcessFlow, TrustMark, CTABg, ArrowEast, ArrowNE });