const { motion } = window.Motion || window; const BRAND = "#FD765E"; const LIME = "#E2FFAB"; // Theme-aware tokens (resolved via CSS custom properties; see ). // We keep JS constants pointing to var(...) so existing inline styles flip with the theme. const BG = "var(--bg)"; const TEXT = "var(--fg)"; const MUTED = "var(--fg-2)"; const TERTIARY = "var(--fg-3)"; const SOFT = "var(--brand-soft)"; const RING = "var(--brand-ring)"; const FONT = "Aeonik, 'Helvetica Neue', Helvetica, Arial, sans-serif"; // Theme hook — persists in localStorage, applies data-theme on . function useTheme() { const [theme, setTheme] = React.useState(() => { if (typeof window === "undefined") return "dark"; try {window.localStorage.removeItem("zc-theme");} catch (e) {} return "dark"; }); React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); try {window.localStorage.setItem("zc-theme", theme);} catch (e) {} }, [theme]); return [theme, setTheme]; } function ThemeStyles() { return ( ); } function ThemeToggle({ theme, onToggle }) { const isDark = theme === "dark"; return ( ); } function Button({ children, className = "", variant = "default", style = {}, ...props }) { const variantClass = variant === "ghost" ? "bg-transparent" : variant === "outline" ? "border bg-transparent" : ""; return ( ); } function Card({ children, className = "", style = {} }) { return (
{children}
); } function CardContent({ children, className = "" }) { return
{children}
; } const fadeUp = { hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0 } }; function Icon({ name = "check", size = 22, className = "", style = {} }) { const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, style, "aria-hidden": true }; const icons = { arrow: , shield: , bolt: , wallet: , lock: , dollar: , link: , chart: , refresh: , building: , support: , check: , menu: }; return icons[name] || icons.check; } function ZerocapLogoMark({ className = "", style = {} }) { return ( ); } function Logo() { return (
Zerocap Connect
by Zerocap
); } function PrimaryButton({ children, className = "" }) { return ( ); } const trustBadges = [ { icon: "shield", label: "Institutional-grade compliance" }, { icon: "bolt", label: "Fast crypto processing" }, { icon: "wallet", label: "Simple checkout experience" }, { icon: "support", label: "Dedicated coverage" }]; const features = [ { icon: "wallet", title: "Crypto deposits and withdrawals", body: "Zerocap Connect lets financial service providers offer crypto deposit and withdrawal functionality to their clients — without the operational headache." }, { icon: "link", title: "Lightweight API and branded widget", body: "Embedded via a lightweight API and self-branded funding widget, Zerocap Connect abstracts away the full complexity of crypto rails while preserving your existing client experience." }, { icon: "shield", title: "Custody, liquidity, trading and settlement", body: "Custody, liquidity, trading, and settlement are handled behind the scenes, so your operations team never has to manage wallets, keys, or on-chain risk." }, { icon: "building", title: "Per-account wallet structure", body: "Your firm receives a structured wallet hierarchy that lets you allocate, attribute, and reconcile deposits at the account level — under your own onboarding and labelling. No pooled wallets, no reconciliation headaches." }, { icon: "refresh", title: "Streaming pricing and real-time conversion", body: "Streaming pricing and real-time conversion ensure clean execution on every deposit, with complete transaction auditability across all flows." }, { icon: "check", title: "No duplicate onboarding for your clients", body: "Your clients are onboarded by your firm under your licences. They do not onboard with Zerocap, never see the Zerocap brand, and never interact with Zerocap directly." }]; const keyFeatures = [ ["Plug-and-Play Integration", "Deployable widget with configurable branding (including white-label mode)"], ["Supported Assets", "BTC, ETH, USDT (ERC20/TRC20), USDC"], ["Supported Fiat Currencies", "USD, EUR, GBP, AUD, JPY"], ["Streaming Conversion Rates", "Real-time indicative quotes for 12 symbols, refreshed every 30 seconds"], ["Conversion Model", "Choose between spread-based pricing or midpoint + fixed monthly fee"], ["Institutional Limits", "Agreed per client integration"], ["Compliance Layer", "AML/CTF-aligned settlement routing via Zerocap Treasury infrastructure"], ["Custody Architecture", "Dedicated Fireblocks workspace and Zerocap Gas Station for ERC20/TRC20 fees"], ["Admin Portal", "Real-time visibility into customer deposits, withdrawals, and transaction history"]]; const provenExcellenceStats = [ { value: 25, decimals: 0, prefix: "US$", suffix: "B+", label: "cumulative institutional spot volume" }, { value: 12, decimals: 0, prefix: "", suffix: "+", label: "institutional counterparties globally" }, { value: 50, decimals: 0, prefix: "", suffix: "+", label: "jurisdictions of institutional clients" }, { value: 5, decimals: 0, prefix: "", suffix: "+ yrs", label: "regulated operations in Australia", sub: "AFSL CAR · AUSTRAC DCE" }]; function CountUp({ value, decimals = 0, prefix = "", suffix = "", duration = 1400 }) { const ref = React.useRef(null); const [display, setDisplay] = React.useState(0); const startedRef = React.useRef(false); React.useEffect(() => { const el = ref.current; if (!el) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) {setDisplay(value);return;} const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting && !startedRef.current) { startedRef.current = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setDisplay(value * eased); if (p < 1) requestAnimationFrame(tick);else setDisplay(value); }; requestAnimationFrame(tick); } }); }, { threshold: 0.3 }); io.observe(el); return () => io.disconnect(); }, [value, duration]); const formatted = display.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); return {prefix}{formatted}{suffix}; } const vendorItems = ["Wallet infrastructure for your firm and your accounts", "Principal-to-principal crypto conversion at institutional rates", "Fiat settlement to your firm’s operating account", "Institutional custody via dedicated Fireblocks workspace"]; const customerItems = ["Pay in crypto", "Convert into preferred asset", "Receive stablecoin payouts", "Simple checkout flow"]; const footerServices = ["OTC Crypto Trading", "Crypto Market Making & Liquidity", "Digital Asset Custody", "Treasury & Lending"]; const footerInsights = ["Articles", "Snippets", "Weekly Crypto Market Wrap"]; const footerCompany = ["About", "Letter of Authorization", "Privacy Policy", "Wholesale Client Notice", "Wholesale Investor Certificate", "Glossary"]; function BitGoLogo({ className = "" }) { return ( BitGo ); } function FireblocksLogo({ className = "" }) { return (
Fireblocks
); } function ChainalysisLogo({ className = "" }) { return ( Chainalysis ); } function FPMarketsLogo({ className = "" }) { return ( fpmarkets ); } function ICMarketsLogo({ className = "" }) { return ( IC Markets Global ); } const infrastructurePartners = [ { name: "BitGo", Logo: BitGoLogo, className: "h-10 w-auto max-w-[190px]" }, { name: "Fireblocks", Logo: FireblocksLogo, className: "h-10 w-auto max-w-[230px]" }, { name: "Chainalysis", Logo: ChainalysisLogo, className: "h-10 w-auto max-w-[220px]" }, { name: "FP Markets", Logo: FPMarketsLogo, className: "h-12 w-auto max-w-[260px]" }, { name: "IC Markets Global", Logo: ICMarketsLogo, className: "h-16 w-auto max-w-[320px]" }]; const fiatOptions = [ { code: "EUR", symbol: "€" }, { code: "USD", symbol: "$" }, { code: "AUD", symbol: "A$" }]; const cryptoOptions = [ { code: "BTC", icon: "₿", mockPriceEUR: 66858.43 }, { code: "ETH", icon: "Ξ", mockPriceEUR: 3100.25 }, { code: "USDC", icon: "$", mockPriceEUR: 0.92 }, { code: "USDT", icon: "₮", mockPriceEUR: 0.92 }]; const paymentMethods = [ { id: "card", label: "Card Payment", time: "1–3 minutes", fee: 0.025 }, { id: "bank", label: "Bank Transfer", time: "5–30 minutes", fee: 0.005 }, { id: "wallet", label: "Wallet Balance", time: "Instant", fee: 0.001 }]; const flows = { deposits: { eyebrow: "Deposits", title: "Crypto in, fiat settled to your firm.", intro: "Your client deposits crypto into a wallet your firm controls. Zerocap converts on a principal-to-principal basis and settles fiat to your firm’s operating account.", steps: [ { number: "1", title: "Your client deposits crypto with your firm", body: "Your client sends BTC, ETH, USDT or USDC into a wallet your firm controls, hosted on Zerocap Connect infrastructure and attributed at the account level. Your firm onboards and KYCs the client; we host the infrastructure." }, { number: "2", title: "Conversion runs principal-to-principal", body: "Your firm transacts with Zerocap on a principal-to-principal basis to convert crypto to AUD or USD at streaming institutional rates." }, { number: "3", title: "Settlement to your firm", body: "Fiat settles to your firm’s operating account. Any onward payment to your client is made by your firm under your own licences." }], widgetSteps: [ { label: "Step 1", title: "Firm-controlled wallet", detail: "BTC / ETH / USDT / USDC · attributed at account level" }, { label: "Step 2", title: "Principal-to-principal conversion", detail: "Crypto → AUD / USD · streaming institutional rates" }, { label: "Step 3", title: "Your firm’s operating account", detail: "Fiat settled to your firm · onward payment under your licences" }] }, withdrawals: { eyebrow: "Withdrawals", title: "Crypto out, on your firm’s instruction.", intro: "Where your client requests a crypto withdrawal, the movement runs between wallets in your firm’s account hierarchy on Zerocap Connect, on your firm’s instruction routed via your API integration.", steps: [ { number: "1", title: "Your client requests withdrawal", body: "Your client raises a withdrawal request with your firm, under your KYC, transaction monitoring, and client-money framework." }, { number: "2", title: "Your firm instructs via API", body: "Your firm sends the withdrawal instruction to Zerocap Connect through your API integration, referencing the originating wallet in your firm’s account hierarchy." }, { number: "3", title: "Movement between your firm’s wallets", body: "The movement runs between wallets in your firm’s account hierarchy on Zerocap Connect, with a full audit trail back to your client account." }], widgetSteps: [ { label: "Step 1", title: "Client request to your firm", detail: "Raised under your KYC & client-money framework" }, { label: "Step 2", title: "API instruction to Zerocap Connect", detail: "Routed via your API integration" }, { label: "Step 3", title: "Firm-hierarchy wallet movement", detail: "Between wallets in your firm’s account hierarchy" }] } }; function BackgroundSystem() { return (
); } function FeaturePixelIcon({ type }) { const r = 3,s = 9; const grids = { // Crypto deposits/withdrawals — coin circle with currency symbol inside wallet: [ [3, 0], [4, 0], [5, 0], [2, 1], [6, 1], [1, 2], [7, 2], [1, 3], [7, 3], [1, 4], [7, 4], [2, 5], [6, 5], [3, 6], [4, 6], [5, 6], // inner stem + top/bottom bars (₿-like) [4, 2], [4, 3], [4, 4], [3, 2], [5, 2], [3, 4], [5, 4]], // Lightweight API / widget — hub-and-spoke network node link: [ [4, 4], [4, 1], [4, 2], [4, 3], [4, 5], [4, 6], [4, 7], [1, 4], [2, 4], [3, 4], [5, 4], [6, 4], [7, 4], [3, 0], [4, 0], [5, 0], [3, 8], [4, 8], [5, 8], [0, 3], [0, 4], [0, 5], [8, 3], [8, 4], [8, 5]], // Custody / liquidity / settlement — shield with lock inside shield: [ [3, 0], [4, 0], [5, 0], [2, 1], [6, 1], [1, 2], [7, 2], [1, 3], [7, 3], [1, 4], [7, 4], [2, 5], [6, 5], [3, 6], [5, 6], [4, 7], // lock shackle arch [3, 2], [5, 2], [3, 3], [5, 3], // lock body [3, 4], [4, 4], [5, 4], [3, 5], [4, 5], [5, 5]], // Unique wallet UUID attribution — key icon building: [ // Key head (circle) [3, 0], [4, 0], [2, 1], [5, 1], [2, 2], [5, 2], [3, 3], [4, 3], // keyhole [3, 1], [4, 1], // shaft [5, 2], [6, 2], [7, 2], [8, 2], // teeth [6, 3], [8, 3]], // Streaming pricing / real-time conversion — circular arrows refresh: [ // top arc (left→right) [2, 0], [3, 0], [4, 0], [5, 0], [6, 0], [1, 1], [7, 1], [1, 2], // arrowhead top-right (pointing down) [7, 0], [8, 1], [7, 2], // bottom arc (right→left) [2, 7], [3, 7], [4, 7], [5, 7], [6, 7], [1, 6], [7, 6], [7, 5], // arrowhead bottom-left (pointing up) [1, 7], [0, 6], [2, 5]], // Reliance KYC / compliance — badge circle with checkmark check: [ [3, 0], [4, 0], [5, 0], [2, 1], [6, 1], [1, 2], [7, 2], [1, 3], [7, 3], [1, 4], [7, 4], [2, 5], [6, 5], [3, 6], [4, 6], [5, 6], // checkmark ✓ inside [2, 4], [3, 5], [4, 4], [5, 3], [6, 2]] }; const pts = grids[type] || grids.check; return ( ); } function FeatureCard({ feature, idx = 0 }) { return (

{feature.title}

{feature.body}

 ); } const GROUP_ICONS = [ // Integration — plug / link , // Coverage — globe , // Pricing & limits — tag , // Operations — sliders ]; const ASSET_CHIPS = { "Supported Assets": [ { ticker: "BTC", label: "Bitcoin", bg: "#F7931A", fg: "#fff", icon: }, { ticker: "ETH", label: "Ethereum", bg: "#627EEA", fg: "#fff", icon: }, { ticker: "USDT", label: "Tether", bg: "#26A17B", fg: "#fff", icon: }, { ticker: "USDC", label: "USD Coin", bg: "#2775CA", fg: "#fff", icon: }], "Supported Fiat Currencies": [ { ticker: "USD", label: "US Dollar", bg: "#1a3a6c", fg: "#fff", icon: }, { ticker: "EUR", label: "Euro", bg: "#003399", fg: "#FFD700", icon: }, { ticker: "GBP", label: "British Pound", bg: "#CF142B", fg: "#fff", icon: }, { ticker: "AUD", label: "Australian Dollar", bg: "#00843D", fg: "#fff", icon: }, { ticker: "JPY", label: "Japanese Yen", bg: "#BC002D", fg: "#fff", icon: }] }; function AssetChips({ chips }) { return (
{chips.map(({ ticker, label, bg, fg, icon }) =>
{icon} {ticker}
)}
); } function KeyFeaturesSection() { const groupedFeatures = [ { group: "Integration", items: keyFeatures.slice(0, 1) }, { group: "Coverage", items: keyFeatures.slice(1, 3) }, { group: "Pricing & limits", items: keyFeatures.slice(3, 7) }, { group: "Operations", items: keyFeatures.slice(7, 10) }]; const [openIdx, setOpenIdx] = React.useState(0); return (
{/* Dot-pixel watermark — matches the FeaturePixelIcon / IndustryIcon grid style */}
{/* 3×2 pixel cluster replacing the single dot */}

Key features

Zerocap Connect product specifications

Core integration, asset, conversion, compliance, custody, and reporting capabilities for financial service providers.
{groupedFeatures.map((section, gIdx) => { const isOpen = openIdx === gIdx; return (
{section.items.map(([label, value], rIdx) =>
{String(rIdx + 1).padStart(2, "0")}
{label}
{value} {ASSET_CHIPS[label] && }
)}
); })}
); } function FlowOfFundsSection() { const [activeTab, setActiveTab] = React.useState("deposits"); const [activeStep, setActiveStep] = React.useState(0); const current = flows[activeTab]; const total = current.steps.length; const handleTab = (key) => {setActiveTab(key);setActiveStep(0);}; const goPrev = () => setActiveStep((s) => Math.max(0, s - 1)); const goNext = () => setActiveStep((s) => Math.min(total - 1, s + 1)); return (

Flow of funds

How the integration works.

Your firm uses Zerocap Connect to offer crypto deposits, withdrawals, and conversion to your clients under your own licences and KYC framework.

{[["deposits", "Deposits"], ["withdrawals", "Withdrawals"]].map(([key, label]) => )}

{current.eyebrow}

{current.title}

{current.intro}

{current.steps.map((step, idx) => { const state = idx < activeStep ? "done" : idx === activeStep ? "active" : "upcoming"; return (
setActiveStep(idx)}>
{step.number}

{step.title}

{step.body}

); })}
{current.steps.map((_, idx) =>

Flow visualiser

Zerocap swap engine

{activeTab === "deposits" ? "Deposit flow" : "Withdrawal flow"}
{current.widgetSteps.map((step, index) => { const state = index < activeStep ? "done" : index === activeStep ? "active" : "upcoming"; return (

{step.label}

{step.title}

{step.detail}

{index < current.widgetSteps.length - 1 &&
↓
} ); })}

Note

Throughout this flow, the end-client relationship is your firm’s — including KYC, transaction monitoring, client communications, and client money obligations.

); } function TrustBadgeMarquee() { const marqueeItems = [...trustBadges, ...trustBadges, ...trustBadges, ...trustBadges]; return (
{marqueeItems.map((badge, index) =>
{badge.label}
)}
); } const partnerSlides = [ { name: "Zerocap", src: "https://zerocap.com/wp-content/uploads/2026/05/Full-Logo_Dark-scaled.png" }, { name: "Lockup White", src: "https://zerocap.com/wp-content/uploads/2026/05/Lockup_White_785px-scaled.png" }, { name: "Chainalysis", src: "https://zerocap.com/wp-content/uploads/2026/05/Chainalysis_idaup1d4Il_1.png" }, { name: "FP Markets", src: "https://zerocap.com/wp-content/uploads/2026/05/FP_Markets_idsTf7GgKr_0.png" }, { name: "IC Markets", src: "https://zerocap.com/wp-content/uploads/2026/05/IC_Markets_idGyGc4Msn_0.png" }]; function LogoMarquee() { const items = [...partnerSlides, ...partnerSlides, ...partnerSlides, ...partnerSlides, ...partnerSlides, ...partnerSlides]; return (
{items.map((slide, i) =>
{slide.name}
)}
); } function SwapWidget() { return (
{/* Fictitious broker-branded application chrome */}

Illustrative — shown inside a broker-branded integration.

); } const brokerWidgetStyles = { window: { width: "100%", maxWidth: "470px", margin: "0 auto", background: "linear-gradient(145deg, rgba(34,34,34,0.94) 0%, rgba(18,18,18,0.96) 55%, rgba(26,26,26,0.94) 100%)", color: "#ffffff", borderRadius: "20px", fontFamily: FONT, boxShadow: "0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.10)", backdropFilter: "blur(18px) saturate(140%)", WebkitBackdropFilter: "blur(18px) saturate(140%)", overflow: "hidden" }, titleBar: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 18px", borderBottom: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.02)" }, brokerBrand: { display: "flex", alignItems: "center", gap: "9px" }, brokerMark: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: "26px", height: "26px", borderRadius: "7px", background: "linear-gradient(135deg,#3b82f6,#1e3a8a)", color: "#fff", fontSize: "12px", fontWeight: 800, letterSpacing: "0.02em" }, brokerName: { fontSize: "14px", fontWeight: 700, color: "#e8e8e8" }, titleNav: { display: "flex", gap: "14px", fontSize: "12px", color: "#7d7d7d" }, titleNavActive: { color: "#ffffff", fontWeight: 600 }, body: { padding: "20px" }, panelHead: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "18px" }, panelTitle: { margin: 0, fontSize: "16px", fontWeight: 700 }, tabs: { display: "flex", gap: "6px", background: "rgba(255,255,255,0.05)", borderRadius: "10px", padding: "3px" }, activeTab: { background: "#2a2a2a", color: BRAND, padding: "7px 14px", borderRadius: "8px", fontSize: "13px", fontWeight: 600 }, tab: { color: "#8f8f8f", padding: "7px 14px", borderRadius: "8px", fontSize: "13px" }, field: { border: "1px solid rgba(255,255,255,0.08)", borderRadius: "12px", padding: "4px 16px", marginBottom: "12px" }, fieldRow: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderBottom: "1px solid rgba(255,255,255,0.06)" }, fieldLabel: { color: "#9a9a9a", fontSize: "13px" }, fieldValue: { fontSize: "14px", fontWeight: 600, color: "#ededed" }, assetPill: { display: "inline-flex", alignItems: "center", gap: "8px", background: "#262626", border: "1px solid rgba(255,255,255,0.06)", borderRadius: "9px", padding: "7px 13px", fontSize: "14px", fontWeight: 700 }, assetDot: { width: "22px", height: "22px", borderRadius: "50%", background: "#2775CA", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, addressBox: { background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: "12px", padding: "16px", marginBottom: "16px" }, addressRow: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "10px" }, address: { fontFamily: "'SF Mono', ui-monospace, Menlo, monospace", fontSize: "15px", letterSpacing: "0.04em", color: "#ffffff" }, copyBtn: { fontSize: "12px", fontWeight: 600, color: BRAND, border: `1px solid ${BRAND}`, borderRadius: "7px", padding: "5px 11px" }, addressNote: { margin: "12px 0 0", fontSize: "11px", color: "#8f8f8f" }, flowRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px", background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: "10px", padding: "12px 10px", marginBottom: "16px" }, flowNode: { flex: 1, textAlign: "center", fontSize: "11px", fontWeight: 600, color: "#cfcfcf" }, flowArrow: { color: BRAND, fontSize: "13px" }, poweredBy: { textAlign: "center", color: "#8f8f8f", fontSize: "11px", margin: 0 }, caption: { textAlign: "center", color: "#7d7d7d", fontSize: "12px", fontStyle: "italic", marginTop: "14px", marginBottom: 0 } }; const swapWidgetStyles = { wrapper: { width: "100%", maxWidth: "460px", background: "linear-gradient(145deg, rgba(40,40,40,0.92) 0%, rgba(20,20,20,0.95) 50%, rgba(28,28,28,0.92) 100%)", color: "#ffffff", borderRadius: "22px", padding: "18px", fontFamily: FONT, boxShadow: "0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.10)", backdropFilter: "blur(18px) saturate(140%)", WebkitBackdropFilter: "blur(18px) saturate(140%)", position: "relative", overflow: "hidden" }, header: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "22px" }, tabs: { display: "flex", gap: "8px" }, tab: { background: "transparent", color: "#8f8f8f", border: "none", padding: "10px 14px", borderRadius: "10px", cursor: "pointer", fontSize: "15px" }, activeTab: { background: "#242424", color: BRAND, border: "none", padding: "10px 14px", borderRadius: "10px", cursor: "pointer", fontSize: "15px" }, settingsButton: { background: "transparent", color: "#8f8f8f", border: "none", fontSize: "18px", cursor: "pointer" }, quoteBox: { border: "1px solid rgba(255,255,255,0.08)", borderRadius: "10px", overflow: "hidden", marginBottom: "10px" }, row: { minHeight: "76px", padding: "20px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px" }, divider: { height: "1px", background: "rgba(255,255,255,0.08)" }, label: { margin: 0, color: "#9a9a9a", fontSize: "14px" }, amountInput: { marginTop: "6px", width: "150px", background: "transparent", border: "none", outline: "none", color: "#ffffff", fontSize: "24px", fontWeight: 700 }, receiveAmount: { margin: "6px 0 0", fontSize: "24px", fontWeight: 700, color: "#a6a6a6" }, assetSelect: { background: "#262626", color: "#ffffff", border: "1px solid rgba(255,255,255,0.05)", borderRadius: "10px", padding: "14px 16px", fontSize: "16px", fontWeight: 700, cursor: "pointer" }, rateRow: { display: "flex", justifyContent: "space-between", color: "#8f8f8f", fontSize: "12px", padding: "0 18px 24px" }, section: { marginBottom: "22px" }, sectionTitle: { color: "#9a9a9a", fontSize: "14px", marginBottom: "10px" }, paymentSelect: { width: "100%", background: "#262626", color: "#ffffff", border: "1px solid rgba(255,255,255,0.05)", borderRadius: "10px", padding: "18px", fontSize: "16px", cursor: "pointer" }, feeRow: { borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: "18px", marginBottom: "22px", display: "flex", justifyContent: "space-between", color: "#ffffff", fontSize: "14px" }, buyButton: { width: "100%", background: BRAND, color: "#000000", border: "none", borderRadius: "9px", padding: "16px", fontSize: "16px", fontWeight: 600, cursor: "pointer" }, poweredBy: { textAlign: "center", color: "#8f8f8f", fontSize: "10px", marginTop: "12px", marginBottom: 0 } }; const industries = [ { id: "cfd", name: "CFD Platforms", desc: "Execute crypto-backed CFD positions with institutional settlement infrastructure and real-time streaming liquidity.", icon: "cfd" }, { id: "gaming", name: "Gaming Platforms", desc: "Move player funds quickly and compliantly across borders and around the clock.", icon: "gaming" }, { id: "marketplace", name: "Marketplaces & Platforms", desc: "Power global payments, payouts, and creator earnings with infrastructure built for scale, speed, and compliance.", icon: "marketplace" }, { id: "fintech", name: "FinTechs", desc: "Add new financial capabilities as your roadmap evolves, with infrastructure designed for speed, compliance, and scale.", icon: "fintech" }, { id: "brokerage", name: "Brokerages & Trading Platforms", desc: "Launch digital asset trading without rebuilding your platform.", icon: "brokerage" }, { id: "bank", name: "Banks & Institutions", desc: "Digital money infrastructure banks can trust.", icon: "bank" }, { id: "payments", name: "Payments & PSPs", desc: "Real-time global payments and settlement, built into your existing stack.", icon: "payments" }]; function IndustryIcon({ type }) { const r = 3,s = 9; const grids = { cfd: [ [1, 1], [1, 2], [1, 3], [1, 4], [1, 5], [3, 0], [3, 1], [3, 2], [3, 3], [3, 4], [3, 5], [3, 6], [5, 2], [5, 3], [5, 4], [5, 5], [5, 6], [7, 0], [7, 1], [7, 2], [7, 3], [7, 4], [7, 5], // wick tops [1, 0], [3, 7], [5, 1], [7, 6]], gaming: [ [3, 0], [4, 0], [5, 0], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [1, 2], [2, 2], [3, 2], [4, 2], [5, 2], [6, 2], [7, 2], [0, 3], [1, 3], [3, 3], [4, 3], [5, 3], [7, 3], [8, 3], [1, 4], [2, 4], [3, 4], [5, 4], [6, 4], [7, 4], [2, 5], [3, 5], [5, 5], [6, 5], [4, 1], [4, 3] // d-pad centre ], marketplace: [ [1, 0], [2, 0], [3, 0], [5, 0], [6, 0], [7, 0], [1, 1], [3, 1], [5, 1], [7, 1], [1, 2], [2, 2], [3, 2], [5, 2], [6, 2], [7, 2], [1, 4], [2, 4], [3, 4], [5, 4], [6, 4], [7, 4], [1, 5], [3, 5], [5, 5], [7, 5], [1, 6], [2, 6], [3, 6], [5, 6], [6, 6], [7, 6]], fintech: [ [4, 0], [3, 1], [4, 1], [5, 1], [6, 1], [2, 2], [4, 2], [2, 3], [4, 3], [3, 4], [4, 4], [5, 4], [6, 4], [4, 5], [7, 5], [4, 6], [7, 6], [3, 7], [4, 7], [5, 7], [6, 7], [4, 8]], brokerage: [ [0, 7], [1, 7], [0, 6], [1, 6], [3, 7], [4, 7], [3, 6], [4, 6], [3, 5], [4, 5], [6, 7], [7, 7], [6, 6], [7, 6], [6, 5], [7, 5], [6, 4], [7, 4], [6, 3], [7, 3], [0, 5], [2, 4], [5, 2], [8, 1]], bank: [ [4, 0], [3, 1], [4, 1], [5, 1], [1, 2], [2, 2], [3, 2], [4, 2], [5, 2], [6, 2], [7, 2], [2, 3], [4, 3], [6, 3], [2, 4], [4, 4], [6, 4], [2, 5], [4, 5], [6, 5], [2, 6], [4, 6], [6, 6], [1, 7], [2, 7], [3, 7], [4, 7], [5, 7], [6, 7], [7, 7]], payments: [ [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [7, 1], [1, 2], [7, 2], [1, 3], [2, 3], [3, 3], [4, 3], [5, 3], [6, 3], [7, 3], [1, 4], [7, 4], [1, 5], [2, 5], [3, 5], [7, 5], [1, 6], [7, 6], [1, 7], [2, 7], [3, 7], [4, 7], [5, 7], [6, 7], [7, 7]] }; const pts = grids[type] || grids.fintech; return ( ); } function IndustrySlider() { const trackRef = React.useRef(null); const [activeIdx, setActiveIdx] = React.useState(0); const cardW = 320; const gap = 20; function scrollTo(idx) { const clamped = Math.max(0, Math.min(idx, industries.length - 1)); setActiveIdx(clamped); if (trackRef.current) { trackRef.current.scrollTo({ left: clamped * (cardW + gap), behavior: "smooth" }); } } React.useEffect(() => { const el = trackRef.current; if (!el) return; function onScroll() { const idx = Math.round(el.scrollLeft / (cardW + gap)); setActiveIdx(Math.max(0, Math.min(idx, industries.length - 1))); } el.addEventListener("scroll", onScroll, { passive: true }); return () => el.removeEventListener("scroll", onScroll); }, []); return (
{/* Header row */}

Industries

The operating system
for digital money

{/* Card track — bleeds past container edge */}
{industries.map((ind, i) =>
setActiveIdx(i)} style={{ flexShrink: 0, width: cardW, scrollSnapAlign: "start", borderRadius: "20px", border: `1px solid ${activeIdx === i ? "rgba(253,118,94,0.35)" : "rgba(255,255,255,0.08)"}`, background: activeIdx === i ? "rgba(253,118,94,0.06)" : "rgba(255,255,255,0.03)", padding: "28px", cursor: "pointer", transition: "border-color 0.25s, background 0.25s" }}>
{ind.name}
{ind.desc}
)}
{/* Dot pagination */}
{industries.map((_, i) =>
); } function LinkedInIcon({ className = "" }) { return ; } function XIcon({ className = "" }) { return ; } function validatePageData() { return { hasBrandColour: BRAND === "#FD765E", hasGuidelineLime: LIME === "#E2FFAB", hasTertiaryColour: TERTIARY === "#979797", hasFourTrustBadges: trustBadges.length === 4, hasSixFeatures: features.length === 6, hasTenKeyFeatures: keyFeatures.length === 10, hasKeyFeaturesSection: typeof KeyFeaturesSection === "function", hasFlowOfFundsSection: typeof FlowOfFundsSection === "function", hasGroupedKeyFeatures: keyFeatures.length === 10, hasGatewayFeatureTitles: ["Crypto deposits and withdrawals", "Lightweight API and branded widget", "Custody, liquidity, trading and settlement", "Per-account wallet structure", "Streaming pricing and real-time conversion", "No duplicate onboarding for your clients"].every((title) => features.some((feature) => feature.title === title)), hasFourProvenExcellenceStats: provenExcellenceStats.length === 4 && typeof CountUp === "function", hasFiveInfrastructurePartners: Array.isArray(partnerSlides) && partnerSlides.length === 2, hasInfrastructurePartnerLogos: partnerSlides.every((p) => p.name && p.src), hasSwapWidget: typeof SwapWidget === "function", hasTrustBadgeMarquee: typeof TrustBadgeMarquee === "function", hasLogoMarquee: typeof LogoMarquee === "function", hasDarkProvenExcellence: true, hasDarkFooter: true, hasGatewayName: true, noExternalUiImportsRequired: typeof Button === "function" && typeof Card === "function" && typeof CardContent === "function" }; } const pageDataTests = validatePageData(); if (typeof console !== "undefined") { Object.entries(pageDataTests).forEach(([testName, passed]) => console.assert(passed, `Gateway landing page data test failed: ${testName}`)); } function GatewayLandingPage() { return ( <>
Get started

Institutional crypto custody, conversion, and settlement infrastructure for licensed financial firms.

Zerocap Connect provides the wallet, conversion, and settlement infrastructure that lets regulated brokers and financial services firms offer crypto to their clients — under their own licences, their own KYC, and their own client relationships. We are the institutional layer underneath your platform.

Talk to Sales

Zerocap Connect

Everything needed to collect, convert, and settle crypto flows.

Designed for firms that need wallet infrastructure, conversion, treasury visibility, and institutional execution under one roof.

{features.map((feature, i) => )}

Backed by Zerocap.

{provenExcellenceStats.map((stat, index) =>
{stat.label}
{stat.sub &&
{stat.sub}
}
)}

Who it’s for

Built for licensed brokers and financial services firms.

{vendorItems.map((item) =>
{item}
)}

Infrastructure

Built on institutional infrastructure

Integrated with trusted institutional infrastructure providers across crypto and traditional finance.

{/* text + CTAs */}

Ready to integrate?

Speak with Zerocap about custody, conversion, and settlement infrastructure for your firm.

Institutional crypto custody, conversion, and settlement infrastructure for licensed financial services firms.

Locations

Australia

ACN 164 874 597

Melbourne

Melbourne, VIC 3004

Sydney

Sydney, NSW 2000

Services

{footerServices.map((item) =>

{item}

)}

Insights

{footerInsights.map((item) =>

{item}

)}

Company

{footerCompany.map((item) =>

{item}

)}

Have a question?

Media enquiries:

media@zerocap.com

Compliance enquiries:

compliance@zerocap.com

About this product: Zerocap Connect is offered by Zerocap Pty Ltd exclusively to financial services firms operating under their own regulatory licences. It is not available to retail customers, and is not intended to facilitate third-party payments or remittance services on behalf of any firm. Firms using this product are responsible for their own client onboarding, KYC, AML/CTF program, transaction monitoring, and client money obligations.

Zerocap Pty Ltd carries out regulated and unregulated activities.

Zerocap Gamma Ltd carries out unregulated activities.

Spot crypto-asset services and products offered by Zerocap are not regulated by ASIC. Zerocap Pty Ltd is registered with AUSTRAC as a DCE service provider.

Regulated services and products include structured products and funds available to Wholesale Clients only. Zerocap Pty Ltd is a Corporate Authorised Representative of AFSL 340799.

All material in this website is intended for illustrative purposes and general information only. It does not constitute financial advice nor does it take into account your investment objectives, financial situation or particular needs. Investments in digital assets can be risky and you may lose your investment.

© 2026 ZEROCAP.

ALL RIGHTS RESERVED.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

); } // ── Dot-matrix Globe (removed) ────────────────────────────────────────────── // GlobeCanvas removed per design update function GlobeCanvas({ mode = "hero" }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(null); const angleRef = React.useRef(0); const modeRef = React.useRef(mode); React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const isHero = modeRef.current === "hero"; const RADIUS = 520; const DOT_R = isHero ? 1.9 : 2.3; const SPACING = isHero ? 8 : 14; // hero: ~3× more dots const BRAND_R = 253,BRAND_G = 118,BRAND_B = 94; const dots = []; for (let lat = -90; lat <= 90; lat += SPACING) { const latRad = lat * Math.PI / 180; const cosLat = Math.cos(latRad); const sinLat = Math.sin(latRad); const count = Math.max(1, Math.round(cosLat * (360 / SPACING))); for (let i = 0; i < count; i++) { const lon = i / count * 2 * Math.PI; dots.push({ x0: cosLat * Math.cos(lon), y0: sinLat, z0: cosLat * Math.sin(lon) }); } } function resize() { if (isHero) { canvas.width = canvas.parentElement.offsetWidth; canvas.height = canvas.parentElement.offsetHeight; } else { const w = canvas.parentElement.offsetWidth; canvas.width = w; canvas.height = Math.round(w * 0.55); } } resize(); const ro = new ResizeObserver(resize); ro.observe(canvas.parentElement); function draw() { const W = canvas.width; const H = canvas.height; ctx.clearRect(0, 0, W, H); // Hero: globe centered on the right third, vertically centered // Footer: cropped rising-from-bottom const cx = isHero ? W * 0.72 : W / 2; const cy = isHero ? H * 0.52 : H + RADIUS * 0.28; const scale = isHero ? Math.min(W * 0.55, H * 0.9) / RADIUS : W * 0.46 / RADIUS; const a = angleRef.current; const cosA = Math.cos(a),sinA = Math.sin(a); const projected = dots.map(({ x0, y0, z0 }) => { const x = x0 * cosA + z0 * sinA; const y = y0; const z = -x0 * sinA + z0 * cosA; const depth = (z + 1) / 2; return { sx: cx + x * RADIUS * scale, sy: cy - y * RADIUS * scale, depth }; }); projected.sort((a, b) => a.depth - b.depth); const minA = isHero ? 0.03 : 0.06; const maxA = isHero ? 0.36 : 0.55; for (const { sx, sy, depth } of projected) { if (!isHero && sy > H + DOT_R) continue; const alpha = minA + depth * (maxA - minA); ctx.beginPath(); ctx.arc(sx, sy, DOT_R * (0.7 + depth * 0.5), 0, Math.PI * 2); ctx.fillStyle = `rgba(${BRAND_R},${BRAND_G},${BRAND_B},${alpha.toFixed(3)})`; ctx.fill(); } // Soft radial glow at globe center const glowR = RADIUS * scale * 1.1; const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR); const gi = isHero ? 0.06 : 0.10; grad.addColorStop(0, `rgba(${BRAND_R},${BRAND_G},${BRAND_B},${gi})`); grad.addColorStop(0.5, `rgba(${BRAND_R},${BRAND_G},${BRAND_B},${(gi * 0.4).toFixed(3)})`); grad.addColorStop(1, `rgba(${BRAND_R},${BRAND_G},${BRAND_B},0.00)`); ctx.globalCompositeOperation = 'screen'; ctx.beginPath(); ctx.ellipse(cx, cy, glowR, glowR, 0, 0, Math.PI * 2); ctx.fillStyle = grad; ctx.fill(); ctx.globalCompositeOperation = 'source-over'; angleRef.current += 0.0016; rafRef.current = requestAnimationFrame(draw); } rafRef.current = requestAnimationFrame(draw); return () => {cancelAnimationFrame(rafRef.current);ro.disconnect();}; }, []); if (mode === "hero") { return ( ); } // Footer fallback (kept for reference, no longer rendered) return (
); } ReactDOM.createRoot(document.getElementById('root')).render();