/* global React */ const { useState, useEffect, useMemo } = React; const H = window.HEXA || {}; /* ============================================================ HEXA-V — shared bits ============================================================ */ // Wordmark — uses two hex glyphs as the "V" mark (placeholder until final logo) const Wordmark = ({ size = 22 }) =>
HEXA·V
; // Customer descriptors — anonymised, no fake names. const CustomerLogos = () => { const logos = [ "8-figure kitchen brand", "Top-500 outdoor seller", "7-figure beauty brand", "6-figure pet supplies", "8-figure home goods", "Top-100 sporting goods", "7-figure supplements", "Multi-brand aggregator", "6-figure baby brand", "Top-500 apparel seller"]; return (
{logos.map((l, i) =>
{l}
)}
); }; // Sparkline path util const sparkPath = (values, w, h, pad = 4) => { const min = Math.min(...values); const max = Math.max(...values); const r = max - min || 1; const step = (w - pad * 2) / (values.length - 1); return values.map((v, i) => { const x = pad + i * step; const y = h - pad - (v - min) / r * (h - pad * 2); return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`; }).join(" "); }; const Sparkline = ({ values, w = 120, h = 36, color = "var(--accent)" }) => ; const useTicker = (base, jitter = 0.02, interval = 1200) => { const [v, setV] = useState(base); useEffect(() => { const id = setInterval(() => { const delta = (Math.random() - 0.4) * base * jitter; setV((prev) => Math.max(0, prev + delta)); }, interval); return () => clearInterval(id); }, [base, jitter, interval]); return v; }; const fmt = (n, d = 0) => n.toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d }); const usd = (n) => "$" + fmt(n, 0); // Integration icon grid (placeholders, mono) const Integrations = () => { const items = [ "Seller Console", "Seller Central", "Marketplace Ads", "Vendor Portal", "Shopify", "QuickBooks", "Xero", "Slack", "ShipStation", "Klaviyo", "Helium 10", "Zapier", "Google Sheets", "Notion", "Webhooks", "Data Export"]; return (
{items.map((name, i) =>
{name.slice(0, 2).toUpperCase()}
{name}
{i % 3 === 0 ? "Native" : i % 3 === 1 ? "Connected" : "OAuth"}
)}
); }; // Pricing — Advisor / Co-Pilot / Autopilot with real CTA URLs const PricingGrid = ({ accentMiddle = true }) => { const tiers = [ { level: "L1", name: "ADVISOR", tag: "Suggests only", price: 19, priceNote: "first month", priceAfter: "$39 / mo after", blurb: "Bids stay where you put them. We tell you which six moves would have made the most money this week.", bullets: [ "Weekly PPC move shortlist", "Keyword harvest opportunities", "Profit-per-SKU dashboard", "Featured Offer & supply alerts", "1 user seat · email + Slack"], cta: "Start at $19", href: H.SIGNUP_URL || "#" }, { level: "L2", name: "CO-PILOT", tag: "Queues for approval", price: 79, priceNote: "per month", blurb: "Agent drafts the bid changes; you tap approve in Slack or in-app. Bulk approve in one click.", bullets: [ "Everything in Advisor", "Bid + budget action queue", "One-click approvals (web + Slack)", "Auto-pause guardrails (you set the rules)", "3 user seats · role-based"], cta: "Try Co-Pilot →", href: H.SIGNUP_URL || "#", featured: true }, { level: "L3", name: "AUTOPILOT", tag: "Acts inside your rails", price: 199, priceNote: "per month", blurb: "Agent moves bids inside your floor/cap/daypart rules. You set rails once; it ships hourly.", bullets: [ "Everything in Co-Pilot", "Autonomous bidding inside your guardrails", "Auto-negation + dayparting", "Weekly written debrief", "Unlimited seats · priority support"], cta: "Try Autopilot →", href: H.SIGNUP_URL || "#" }]; return (
{tiers.map((t, i) => { const featured = accentMiddle && t.featured; return (
{featured &&
}
{t.level}
{t.name}
{featured && MOST PICKED}
“{t.tag}”
${t.price}
/{t.priceNote === "first month" ? "FIRST MO" : "MO"}
{t.priceAfter &&
then {t.priceAfter}
}
{t.blurb}
    {t.bullets.map((b, j) =>
  • ▸{b}
    • )}
{t.cta}
); })}
); }; /* ============================================================ New homepage sections for Direction A ============================================================ */ // "Our customers do more, with less, faster" const MoreLessFaster = () =>
// RESULTS · MEDIAN · TRAILING 60 DAYS

Our customers do more, with less, faster.

Numbers below are the median across active tenants in their first sixty days on HEXA-V. Not the highlight reel; we don't quote outliers and we don't claim recoveries over 40%.

{[ { v: "−18%", l: "median ACoS reduction", c: "good" }, { v: "+8%", l: "unit margin recovered", c: "good" }, { v: "≈6 min", l: "median deploy time", c: "fg" }, { v: "47s", l: "data refresh interval", c: "fg" }]. map((s, i) =>
{s.v}
{s.l}
)}
{/* Quote strip */}
{[ { q: "Co-Pilot showed us the bid math we were missing. Cut wasted spend in the first week.", who: "Operator · 8-figure kitchen brand" }, { q: "Profit OS caught a $0.43 fulfilment fee creep we had been eating for two months.", who: "Founder · 7-figure beauty brand" }, { q: "Started on Advisor at $19. Upgraded inside ten days.", who: "Head of marketplace · top-500 outdoor seller" }]. map((t, i) =>
“

{t.q}

— {t.who}
)}
; // Founder section — honest, personal const FounderNote = () =>
{/* avatar placeholder — geometric, not a fake face */}
FOUNDER · HEXA-V
Hanora Labiba Nismara
NOTE FROM THE BUILDER

I built this after watching sellers lose thousands
to bad PPC data.

HEXA-V is what I wish existed when I was running a brand. The dashboards I paid for showed me yesterday's numbers in a chart and called it insight. They didn't tell me which bid to move, which keyword was bleeding, or what my real margin per unit was after fees, returns and FX.

So I built the thing I needed: a console that does the math, queues the action, and lets me approve or autopilot — depending on how much I trust it that week. Three altitudes. No drama.

We're small, we're independent, and we don't sell your data. If something in here is wrong, my inbox is at the bottom of every page.

; /* IntersectionObserver — fires .is-visible on .snap-in elements when they enter viewport */ function initSnapIn() { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("is-visible"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); document.querySelectorAll(".snap-in").forEach(el => io.observe(el)); } /* Run after React paints */ if (typeof window !== "undefined") { const _orig = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16)); _orig(() => _orig(() => initSnapIn())); document.addEventListener("DOMContentLoaded", initSnapIn); } Object.assign(window, { Wordmark, CustomerLogos, Sparkline, useTicker, fmt, usd, sparkPath, Integrations, PricingGrid, MoreLessFaster, FounderNote, initSnapIn });