/* global React */ /* HomeExtras — three additions to bring the home page to 10/10: 1. WhatWeAre — differentiation positioning ("This / Not this") 2. ROICalculator — interactive sliders + computed value 3. Pricing — three-shape pricing teaser */ // ============================================================ // 1. WhatWeAre — differentiation positioning // ============================================================ function WhatWeAre() { const isThis = [ "Custom software, AI systems, and products — built around how you actually run", "Connects to the tools you already use — SysPro, Sage, SAP B1, Pastel, and more", "Built specifically for SA mid-market manufacturers, retailers, and distributors", "Per-customer AI memory — your context, never shared, never cross-trained", "Live in five weeks. Stephan replies personally.", "Quoted upfront before any work starts — no surprise overages, no retainer trap.", ]; const isNot = [ "An ERP add-on, plugin, module, or 'gap-filler'", "A consulting agency selling time and materials", "A platform migration disguised as 'transformation'", "A multi-tenant model trained across all customers", "An SDR funnel that takes three weeks to reach an engineer", "A usage-based contract that punishes you for adopting it", ]; return (
Where we stand The shape of the thing — and what it isn't.

The clearest way to explain VSG is to draw the line. Same product category, very different shape.

This is us
    {isThis.map((s, i) => (
  • + {s}
    • ))}
This isn't us
    {isNot.map((s, i) => (
  • — {s}
    • ))}
); } // ============================================================ // 2. ROICalculator — interactive // ============================================================ function Slider({ label, value, min, max, step = 1, onChange, format = (v) => v }) { const pct = ((value - min) / (max - min)) * 100; return (
{label}
{format(value)}
onChange(Number(e.target.value))} style={{ position: "absolute", inset: 0, width: "100%", opacity: 0, cursor: "pointer", margin: 0, zIndex: 2, }} />
{format(min)} {format(max)}
); } function ROICalculator() { const [suppliers, setSuppliers] = React.useState(140); const [hoursPerBuyer, setHoursPerBuyer] = React.useState(11); const [buyers, setBuyers] = React.useState(3); const [hourlyCost, setHourlyCost] = React.useState(420); // Compute. These are illustrative formulas — operator-realistic, not over-claimed. // Hours back / week = hoursPerBuyer × buyers × adoption(0.7) — assume ACE handles ~70% routine const adoption = 0.7; const hoursBack = hoursPerBuyer * buyers * adoption; const weeklyValue = hoursBack * hourlyCost; const annualValue = weeklyValue * 48; // working weeks const monthlyValue = annualValue / 12; return (
Quick estimate What VSG Source might save your team.

Most procurement teams spend a week's worth of work per month on the planning grid, supplier follow-up, and RFQ admin VSG Source handles automatically. Move the sliders to match your operation.

`${v} hrs`} /> `R${v}`} />
Hours back / week
{Math.round(hoursBack)} hrs
Annual value
R{(annualValue / 1000).toFixed(0)}k
Assumes ~70% of routine email handled by ACE · {suppliers} suppliers · {Math.round(monthlyValue / 1000)}k / month
); } // ============================================================ // 3. Pricing — three shapes // ============================================================ function Pricing({ onBookDemo }) { const tiers = [ { name: "Source", sub: "VSG Source — Procurement", from: "Flat monthly", blurb: "Per-mailbox flat fee. Scales with active supplier volume. Implementation included in year one.", bullets: ["VSG ACE tenant included", "First-class ERP connector", "Quarterly tuning, no extra charge", "Cancel with 60 days' notice"], cta: "See Source", href: "source.html", }, { name: "Source + Pace", sub: "Both products, bundled", from: "Bundle", blurb: "Both products on the same ACE tenant. Source feeds inbound risk signals straight into Pace's plan.", bullets: ["Both products on one tenant", "Bundle discount applied", "Priority on Pace early access", "Design-partner conversion"], cta: "Talk to us", href: null, featured: true, }, { name: "Services", sub: "Custom · Automation · Bespoke", from: "Fixed scope", blurb: "Fixed-price sprints, fixed-price projects, or annual partnership. No retainer trap.", bullets: ["Two-week sprint format", "Scope-priced projects", "Source code, in your repo", "Phone number, not a portal"], cta: "Explore services", href: "services.html", }, ]; return (
Pricing One number. No surprises.

Flat monthly per product, scaled to your supplier count. No per-seat, no per-token, no overages. Services are quoted scope-by-scope before we start.

{tiers.map((t, i) => (
{t.featured && ( Most picked )}
{t.name}
{t.sub}
{t.from}

{t.blurb}

    {t.bullets.map((b, j) => (
  • {b}
    • ))}
{t.href ? ( {t.cta} → ) : ( )}
))}
Indicative ranges · final quote inside the first call
); } Object.assign(window, { WhatWeAre, ROICalculator, Pricing });