// Iconography & diagram components — updated to use PNG icons from graphics/icons/ function IconLine({ children, color = "#3B82F6", size = 28 }) { return ( ); } const Icons = { tag: (c) => , cloud: (c) => , sheet: (c) => , percent: (c) => , bars: (c) => , invoice: (c) => , trend: (c) => , target: (c) => , layers: (c) => , shield: (c) => , scale: (c) => , filter: (c) => , settings: (c) => , code: (c) => , sheetBox: (c) => , dollar: (c) => , externalLink: (c) => , user: (c) => , cloudUpload: (c) => , wand: (c) => , alertTriangle: (c) => , clock: (c) => , lock: (c) => , database: (c) => , sliders: (c) => , barChart: (c) => , arrowUpRight: (c) => , grid: (c) => , bell: (c) => , eye: (c) => , users: (c) => , bolt: (c) => , refresh: (c) => , }; function PngIcon({ src, size = 22 }) { return ; } function CheckCircle({ color = "#5B7BFF", size = 15 }) { return ( ); } // ---- Operating-system diagram (hero) ---- function OperatingSystemDiagram() { const inputs = [ { label: "Usage Data", sub: "Real-time", src: "graphics/icons/ProblemLimitedIcon.png" }, { label: "Vendor Pricing", sub: "AWS, Azure", src: "graphics/icons/ProblemCustomerIcon.png" }, { label: "Contracts", sub: "Agreements", src: "graphics/icons/ProblemBillingIcon.png" }, ]; const outputs = [ { label: "Invoices", sub: "Accurate", src: "graphics/icons/ProblemBillingIcon.png" }, { label: "Margin Intelligence", sub: "Actionable", src: "graphics/icons/ProblemLimitedIcon.png" }, ]; const coreRows = [ { t: "Pricing Logic", s: "Pricing rules that adapt", src: null, svgI: "settings", c: "#5B7BFF" }, { t: "Discount Engine", s: "Automated discounts", src: "graphics/icons/ProblemMisappliedIcon.png", c: "#F59E0B" }, { t: "Billing System", s: "Accurate. Automated. Aligned.", src: "graphics/icons/ProblemBillingIcon.png", c: "#A855F7" }, { t: "Margin Intelligence Layer", s: "Real-time margin visibility", src: "graphics/icons/ProblemLimitedIcon.png", c: "#5B7BFF" }, ]; const Connector = ({ dir = "in" }) => ( ); return (
{/* INPUTS */}

Inputs

{inputs.map((inp) => (

{inp.label}

{inp.sub}

))}
{/* CENTER */}
moneta{" "} operating system
{coreRows.map((r) => (
{r.src ? : Icons[r.svgI](r.c)}

{r.t}

{r.s}

))}

Controls

{[ { label: "Margin Rules", sub: "Active", src: "graphics/icons/ProblemBLicon.png" }, { label: "Discount Policies", sub: "Enforced", src: "graphics/icons/ProblemMisappliedIcon.png" }, ].map((ctrl) => (

{ctrl.label}

{ctrl.sub}

))}
{/* OUTPUTS */}

Outputs

{outputs.map((out) => (

{out.label}

{out.sub}

))}
); } // ---- AWS / Azure logos ---- function AwsLogo() { return ( ); } function AzureLogo() { return ( Microsoft Azure ); } // ---- Trust Bar — uses PNG icons ---- function TrustBar() { return (

Multi-customer

Billing

Microsoft

Azure

Purpose-built for

Cloud Resellers

); } // ---- Solution vertical timeline — large PNG icons, centered line ---- function SolutionTimeline() { const TCOL = 28; // timeline column px — line and dot both centered here const items = [ { t: "Cloud Billing", b: "Consistent, customer-ready invoices aligned to pricing.", src: "graphics/icons/ProblemBillingIcon.png", c: "#3B82F6" }, { t: "Discounts", b: "Apply discount programs by customer and capture savings.", src: "graphics/icons/ProblemMisappliedIcon.png", c: "#22D3EE" }, { t: "Customer Pricing", b: "Set pricing with full visibility into cost, discounts, and margin.", src: null, svgI: "trend", c: "#5B7BFF" }, { t: "Margin Intelligence", b: "Track margin performance and identify where to adjust.", src: "graphics/icons/ProblemLimitedIcon.png", c: "#A855F7" }, ]; return (

moneta system

{/* Outer wrapper — single continuous line from first dot center to last dot center */}
); } // ---- Before → After results table ---- function ResultsList() { const rows = [ ["Unknown Margins", "Clear Profitability"], ["Manual Billing", "Automated Invoicing"], ["Missed Discounts", "Captured Savings"], ["Reactive Pricing", "Competitive Advantage"], ["Operational Bottlenecks", "Scalable Growth"], ["Ad Hoc FinOps", "Managed Service"], ]; return (
{rows.map(([a, b]) => (
{a} → {b}
))}

Built for AWS and Azure resellers — aligning multi-customer billing, pricing, and margin in a single system.

); } // ---- FinOps split: glassmorphism pipeline — Your Managed Service ---- function FinopsSplit() { const glass = { background: "rgba(255, 255, 255, 0.03)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", border: "1px solid rgba(255, 255, 255, 0.1)", }; // Abstract bar chart — no numbers, no labels const BarChartGraphic = () => ( ); // Downward trend — purely graphic const TrendGraphic = () => ( ); // Clean 3D server rack — no labels const ServerRackGraphic = () => ( ); const items = [ { t: "Customer Cost Visibility", b: "Clear cloud budgeting and reporting", g: }, { t: "Rate Reduction", b: "Reduce rates for customers", g: }, { t: "Infrastructure Efficiency", b: "Optimize resource usage and reduce waste", g: }, ]; return (
{/* Top glowing cloud icon */}
moneta
{/* Vertical pipeline line */}
{/* "Your Managed Service" glass card */}

Your Managed Service

{/* Distribution lines — single SVG so lines are guaranteed to connect. viewBox 0 0 600 44. Column centers (gap-3 = 12px assumed on 420px max): col width = (420-24)/3 = 132. centers at 66, 210, 354 → as % of 420 → 15.7%, 50%, 84.3% In viewBox 600: x = 94, 300, 506 */} {/* Three columns */}
{items.map((it) => (

{it.t}

{it.g}

{it.b}

))}
{/* Bottom anchor card */}

Deliver Cloud FinOps as a repeatable service that strengthens customer relationships and enables{" "} recurring services revenue.

); } // ---- Core System Layers — bordered card matching Platform.png, centered line ---- function CoreSystemLayers() { const TCOL = 24; // timeline column px const items = [ { t: "Pricing Layer", b: "Holds customer-specific pricing models and ensures pricing reflects agreements, cost structures, and strategy.", c: "#3B82F6" }, { t: "Discount Layer", b: "Applies cloud discount programs across customers and aligns discounts with both cost and pricing.", c: "#22D3EE" }, { t: "Billing Layer", b: "Generates customer-ready invoices directly from usage, pricing, and discount data — without reconciliation.", c: "#5B7BFF" }, { t: "Margin Intelligence Layer", b: "Provides visibility into margin performance across every customer, continuously updated as billing and pricing change.", c: "#A855F7" }, ]; return (
{/* Header */}

Core System Layers

{/* Timeline — line centered in TCOL column */}
    {items.map((it, idx) => (
  • {/* Dot column — centered at 50% = same as line center */}
    {/* Content */}

    {it.t}

    {it.b}

    {idx < items.length - 1 &&
    }
    • ))}
); } // ---- System Flow horizontal — no card, matches Platform.png ---- function SystemFlowHorizontal() { const steps = [ { t: "Cloud Data", sub: "(Continuous)", b: "Cloud billing data is continuously ingested across all customer accounts.", c: "#3B82F6" }, { t: "Pricing & Discounts", sub: "(Aligned)", b: "Pricing models and discount programs are applied automatically and aligned with cost.", c: "#22D3EE" }, { t: "Invoicing", sub: "(Automated)", b: "Accurate, customer-ready invoices are generated based on aligned billing and pricing.", c: "#5B7BFF" }, { t: "Margin Visibility", sub: "(Real-Time)", b: "Margin performance is updated in real time across every customer for complete visibility and control.", c: "#A855F7" }, ]; return (
{/* Line + dots. Dots use the same 4-col grid so they're always centered over titles. */}
{/* Base line with fade edges */}
{/* Flowing arrows — travel full width left to right, fade out at right edge */} {[0, 1, 2, 3, 4].map(j => ( ))} {/* Dots — same 4-col grid, each dot centered in its column */}
{steps.map((s) => (
))}
{/* Step descriptions */}
{steps.map((s, i) => (
0 ? "md:border-l md:border-line-soft md:pl-6" : ""}>

{s.t}

{s.sub}

{s.b}

))}
); } // ---- Why Moneta system diagram ---- function WhyMonetaDiagram({ onCta }) { const outcomes = [ { label: "Clear profitability", icon: "trend", c: "#3B82F6" }, { label: "Automated invoicing", icon: "invoice", c: "#22D3EE" }, { label: "Savings captured", icon: "shield", c: "#A855F7" }, ]; const steps = [ { label: "Billing", sub: "Accurate usage captured and billed on your terms.", c: "#3B82F6" }, { label: "Pricing", sub: "Flexible pricing models that reflect your strategy.", c: "#22D3EE" }, { label: "Discounts", sub: "Consistent discount management aligned to your goals.", c: "#5B7BFF" }, { label: "Margin", sub: "Stronger margins through visibility and control.", c: "#A855F7" }, ]; return (
{/* Unified card: system diagram left, outcomes panel right */}
{/* ── LEFT: system pipeline ── */}
{/* Header */}
moneta

The Billing Infrastructure for Cloud Resellers

{/* Flow line + step dots */}
{/* gradient track */}
{steps.map((s) => (

{s.label}

{s.sub}

))}

Continuously aligning billing, pricing, discounts, and margin.

{/* ── DIVIDER ── */}
{/* ── RIGHT: outcomes panel ── */}
{/* panel header */}

What You Gain

{/* outcome rows */}
{outcomes.map((o) => (
{Icons[o.icon](o.c)}
{o.label}
))}
{/* panel footer gradient accent */}
{/* CTA */}
); } // ---- Reconciliation Loop graphic ---- function ReconciliationLoop() { const [active, setActive] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setActive(a => (a + 1) % 4), 4000); return () => clearInterval(t); }, []); const steps = [ { label: "Cloud Billing", sub: "AWS · Azure", num: "01", icon: , color: "#38bdf8", stats: [{ k: "rows", v: "8.3T" }, { k: "providers", v: "2" }], }, { label: "Discounts", sub: "SPs · RIs · EDP · SPP · EA · CSP", num: "02", icon: , color: "#34d399", stats: [{ k: "applied", v: "$124K", vc: "#34d399" }, { k: "coverage", v: "93.5%" }], }, { label: "Customer Pricing", sub: "Rules & agreements", num: "03", icon: , color: "#a78bfa", stats: [{ k: "rules", v: "150" }, { k: "customers", v: "239" }], }, { label: "Margin Intelligence", sub: "By customer · By reseller", num: "04", icon: , color: "#f472b6", stats: [{ k: "blended", v: "17.5%", vc: "#34d399" }, { k: "margin $", v: "$90,150", vc: "#34d399" }], }, ]; return (
{/* Header row */}
Continuous Reconciliation Loop

Billing, pricing, discounts, and margin — aligned every cycle.

{/* Step nodes + connector line */}
{/* SVG connector line — matches return loop style exactly */} {steps.map((s, i) => (
{s.icon}
))}
{/* Cards row */}
{steps.map((s, i) => (
{s.label} {s.num}

{s.sub}

{s.stats.map(st => (
{st.k} {st.v}
))}
))}
{/* Footer */}
No manual reconciliation
{/* Curved return loop */}
{/* arrowhead + stem */}
); } // ---- Platform hero — Inputs / moneta cube / Outputs + Controls bar ---- function MonetaSystemHero() { const inputs = [ { label: "AWS Billing", sub: "2.48M line items", icon: "aws" }, { label: "Azure Billing", sub: "1.37M line items", icon: "azure" }, { label: "Customer Agreements", sub: "842 active", src: "graphics/icons/ProblemCustomerIcon.png" }, { label: "Pricing Rules", sub: "1.21K rules", svgI: "tag", c: "#3B82F6" }, { label: "Discount Programs", sub: "312 active", svgI: "percent", c: "#22D3EE" }, { label: "Usage Data", sub: "12.9B records", svgI: "trend", c: "#5B7BFF" }, { label: "Tax & Compliance", sub: "98% coverage", svgI: "shield", c: "#A855F7" }, ]; const outputs = [ { label: "Customer Invoices", sub: "$28.4M generated", svgI: "invoice", c: "#A855F7" }, { label: "Margin Reporting", sub: "31.8% avg. margin", svgI: "trend", c: "#22D3EE" }, { label: "Pricing Analytics", sub: "4.7K price changes",svgI: "tag", c: "#A855F7" }, { label: "Customer Cost Reporting", sub: "$18.7M analyzed", svgI: "cloud", c: "#3B82F6" }, { label: "FinOps Insights", sub: "126 recommendations", svgI: "target", c: "#22D3EE" }, { label: "Executive Dashboards", sub: "8 live dashboards", svgI: "sheetBox", c: "#5B7BFF" }, ]; const controls = [ { label: "Policies & Rules", sub: "1.21K active", svgI: "filter", c: "#3B82F6" }, { label: "Approvals", sub: "48 pending", svgI: "percent", c: "#22D3EE" }, { label: "Exceptions", sub: "23 requires review", svgI: "shield", c: "#5B7BFF" }, { label: "Audit & History", sub: "100% traceable", svgI: "clock", c: "#A855F7" }, ]; const wrapRef = React.useRef(null); const coreRef = React.useRef(null); const coreInnerRef = React.useRef(null); const logoRef = React.useRef(null); const inRefs = React.useRef([]); const outRefs = React.useRef([]); const [conn, setConn] = React.useState({ left: [], right: [], h: 0 }); const [coreTop, setCoreTop] = React.useState(null); const [bar, setBar] = React.useState(null); const [outH, setOutH] = React.useState(null); const inStackRef = React.useRef(null); React.useLayoutEffect(() => { const measure = () => { const wrap = wrapRef.current, coreCol = coreRef.current; if (!wrap || !coreCol || !inRefs.current[3]) return; const wrapBox = wrap.getBoundingClientRect(); const coreColBox = coreCol.getBoundingClientRect(); // align logo vertical center with the 4th input row (index 3) — the middle of 7 inputs const target = inRefs.current[3].getBoundingClientRect(); const targetMidY = target.top - wrapBox.top + target.height / 2; const innerH = coreInnerRef.current ? coreInnerRef.current.getBoundingClientRect().height : 0; const logoEl = logoRef.current; const logoOffsetFromInner = logoEl ? logoEl.getBoundingClientRect().top - coreInnerRef.current.getBoundingClientRect().top + logoEl.getBoundingClientRect().height / 2 : innerH / 2; const newTop = targetMidY - (coreColBox.top - wrapBox.top) - logoOffsetFromInner; if (Math.abs((coreTop || 0) - newTop) > 0.5) { setCoreTop(newTop); return; } const coreInner = coreInnerRef.current; if (!coreInner) return; const innerBox = coreInner.getBoundingClientRect(); const coreLeftX = innerBox.left - wrapBox.left; const coreRightX = innerBox.right - wrapBox.left; const logoBox = logoRef.current ? logoRef.current.getBoundingClientRect() : innerBox; const coreMidY = logoBox.top - wrapBox.top + logoBox.height / 2; const left = inRefs.current.map((el) => { if (!el) return null; const b = el.getBoundingClientRect(); return { x1: b.right - wrapBox.left, y1: b.top - wrapBox.top + b.height / 2, x2: coreLeftX, y2: coreMidY }; }).filter(Boolean); // outputs converge on the midpoint between the 3rd and 4th output rows (indices 2 and 3) const o3 = outRefs.current[2], o4 = outRefs.current[3]; let outTargetY = coreMidY; if (o3 && o4) { const b3 = o3.getBoundingClientRect(), b4 = o4.getBoundingClientRect(); const y3 = b3.top - wrapBox.top + b3.height / 2; const y4 = b4.top - wrapBox.top + b4.height / 2; outTargetY = (y3 + y4) / 2; } const right = outRefs.current.map((el) => { if (!el) return null; const b = el.getBoundingClientRect(); return { x1: coreRightX, y1: outTargetY, x2: b.left - wrapBox.left, y2: b.top - wrapBox.top + b.height / 2 }; }).filter(Boolean); setConn({ left, right, h: wrapBox.height }); // align the controls bar exactly under the inputs (left edge) and outputs (right edge) stacks const firstIn = inRefs.current[0], firstOut = outRefs.current[0]; if (firstIn && firstOut) { const inBox = firstIn.getBoundingClientRect(); const outBox = firstOut.getBoundingClientRect(); const barLeft = inBox.left - wrapBox.left; const barRight = outBox.right - wrapBox.left; setBar({ left: barLeft, width: barRight - barLeft }); } // make the outputs stack span the exact same vertical extent as the inputs stack, // so the top and bottom output cards line up with the top and bottom input cards if (inStackRef.current) { const h = inStackRef.current.getBoundingClientRect().height; if (outH == null || Math.abs(outH - h) > 0.5) setOutH(h); } }; measure(); window.addEventListener("resize", measure); const id = setTimeout(measure, 60); return () => { window.removeEventListener("resize", measure); clearTimeout(id); }; }, [coreTop]); const Row = ({ item, idx, side }) => (
{ (side === "in" ? inRefs : outRefs).current[idx] = el; }} className="relative flex items-center gap-3 rounded-xl px-3.5 py-2.5" style={{ background: "#0B0F1F", border: "1px solid rgba(91,123,255,0.22)" }} >
{item.icon === "aws" && } {item.icon === "azure" && } {item.src && } {item.svgI && Icons[item.svgI](item.c)}

{item.label}

{item.sub &&

{item.sub}

}
); return (
{/* connector overlay */}
{/* INPUTS */}

Inputs

{inputs.map((it, idx) => )}
{/* CORE — nexus engine */}
{/* Text */}

moneta

operating system

{/* Logo */} moneta {/* Status badge */} SYSTEM ACTIVE
{/* OUTPUTS — stack stretched to match inputs height so first/last cards align */}

Outputs

{outputs.map((it, idx) => )}
{/* CONTROLS bar — width/position measured to span inputs→outputs edges */}

Controls (Financial Control Plane)

{controls.map((c, i) => (
0 ? "1px solid rgba(255,255,255,0.06)" : "none", paddingLeft: i > 0 ? 20 : 0, paddingRight: i < controls.length - 1 ? 20 : 0, }}> {Icons[c.svgI](c.c)}

{c.label}

{c.sub}

))}
); } // ---- System Architecture pipeline — Ingest / Normalize / Process / Deliver / Analyze ---- function SystemArchitecturePipeline() { const stages = [ { n: "1", t: "Ingest", c: "#3B82F6", offset: 0, rows: [ { label: "Cloud Usage", sub: "AWS / Azure", icon: "cloudUpload" }, { label: "Customer Data", icon: "user" }, { label: "Agreements & Commitments", icon: "invoice" }, ], }, { n: "2", t: "Normalize", c: "#A855F7", offset: 26, rows: [ { label: "Data Validation & Mapping", icon: "shield" }, { label: "Standardization", icon: "trend" }, { label: "Enrichment", icon: "wand" }, ], }, { n: "3", t: "Process", c: "#3B82F6", offset: 0, emphasis: true, rows: [ { label: "Pricing Engine", sub: "Apply pricing rules", icon: "settings" }, { label: "Discount Engine", sub: "Allocate discounts", icon: "settings" }, { label: "Invoice Engine", sub: "Generate invoices", icon: "invoice" }, { label: "Margin Engine", sub: "Calculate margins", icon: "settings" }, ], }, { n: "4", t: "Deliver", c: "#A855F7", offset: 26, rows: [ { label: "Customer Invoices", icon: "invoice" }, { label: "Cost & Usage Reports", icon: "sheetBox" }, { label: "FinOps Deliverables", icon: "cloud" }, ], }, { n: "5", t: "Analyze", c: "#3B82F6", offset: 0, rows: [ { label: "Margin Reporting", icon: "invoice" }, { label: "Pricing Analytics", icon: "invoice" }, { label: "Executive Dashboards", icon: "sheetBox" }, ], }, ]; const Stage = ({ s, i }) => (
{s.n}

{s.t.toUpperCase()}

{s.rows.map((r) => (
{Icons[r.icon](s.c)}

{r.label}

{r.sub &&

{r.sub}

}
))}
); const FlowArrow = ({ extra }) => (
); return (
{/* Integrated header: narrative lead-in flows directly into the pipeline */}
System Architecture

One System. Every Piece in Sync.

moneta maintains a single, synchronized financial model for every customer. Changes in one area automatically propagate through the system — eliminating manual work and ensuring accuracy at scale.

{/* Five-stage flow — staggered heights, gradient connectors, emphasized Process core */}
{stages.map((s, i) => ( {i < stages.length - 1 && } ))}
{/* Continuous feedback loop — animated curve flowing right to left back into stage 1 */}
CONTINUOUS FEEDBACK & RECONCILIATION
); } // ---- Financial Control Plane — 6-card icon grid ---- function ControlPlaneCards() { const cards = [ { t: "Pricing Rules", b: "Define and enforce customer-specific pricing models.", icon: "tag", c: "#A855F7" }, { t: "Discount Rules", b: "Automate allocation and protect against missed savings.", icon: "percent", c: "#A855F7" }, { t: "Approval Policies", b: "Set approvals for exceptions, pricing changes, and credits.", icon: "shield", c: "#3B82F6" }, { t: "Exception Management",b: "Detect and resolve anomalies before they impact margin.", icon: "alertTriangle", c: "#5B7BFF" }, { t: "Audit & History", b: "Full audit trail for every transaction, change, and adjustment.", icon: "clock", c: "#3B82F6" }, { t: "Data Security", b: "Role-based access and encryption at every layer.", icon: "lock", c: "#A855F7" }, ]; return (
{cards.map((card) => (
{Icons[card.icon](card.c)}

{card.t}

{card.b}

))}
); } // ---- Automated Lifecycle — phased decision loop with central orchestration node ---- function AutomatedLifecycle() { const phases = [ { key: "foundation", label: "Data Foundation", c: "#3B82F6", steps: [ { n: 1, t: "Ingest Cloud Data", b: "Import usage, pricing, and discount data.", icon: "cloudUpload" }, { n: 2, t: "Normalize & Validate", b: "Ensure accuracy, map accounts, enrich data.", icon: "database" }, ], }, { key: "logic", label: "Decision Logic", c: "#5B7BFF", emphasis: true, steps: [ { n: 3, t: "Apply Pricing & Discounts", b: "Run pricing rules, allocate discounts, apply agreements.", icon: "sliders" }, { n: 4, t: "Generate Invoices", b: "Create accurate, customer-ready invoice data.", icon: "invoice" }, { n: 5, t: "Calculate Margins", b: "Track revenue, cost, and margin by customer.", icon: "dollar" }, ], }, { key: "delivery", label: "Intelligence Delivery", c: "#A855F7", steps: [ { n: 6, t: "Deliver Reports", b: "Provide cost, usage, and FinOps insights.", icon: "barChart" }, { n: 7, t: "Monitor Performance", b: "Analyze trends, identify risks, optimize pricing.", icon: "trend" }, { n: 8, t: "Update Dashboards", b: "Real-time visibility for operations and executive teams.", icon: "grid" }, ], }, ]; const Card = ({ s, c, emphasis }) => (
{Icons[s.icon](c)}
{s.n}

{s.t}

{s.b}

); const PhaseHeader = ({ phase }) => (

{phase.label}

); return (
{/* Orchestration label — the spine the three phases flow from */}

Orchestration Engine Coordinating every step in real time

{/* down-flow connector into the three phases */}
{/* Three phases — aligned tops, even columns */}
{phases.map((phase) => (
{phase.steps.map((s) => )}
))}
{/* persistent feedback loop beneath the workflow */}
CONTINUOUS MONITORING & OPTIMIZATION live
); } // ---- Living Financial Model — connected card grid ---- function LivingFinancialModel() { const [active, setActive] = React.useState(null); const cards = [ { label: "Cloud Usage", icon: "cloudUpload", c: "#3B82F6", desc: "Billing data ingested continuously across all accounts." }, { label: "Pricing Rules", icon: "tag", c: "#A855F7", desc: "Customer-specific pricing applied automatically." }, { label: "Discount Programs", icon: "percent", c: "#22D3EE", desc: "Discount allocation aligned to cost and agreements." }, { label: "Invoices", icon: "invoice", c: "#5B7BFF", desc: "Accurate invoices generated without manual work." }, { label: "Margins", icon: "dollar", c: "#A855F7", desc: "Real-time margin visibility across every customer." }, { label: "Reporting", icon: "barChart", c: "#34D399", desc: "Financial reporting updated as data changes." }, { label: "Customer Agreements", icon: "user", c: "#3B82F6", desc: "Agreements inform pricing, discounts, and billing." }, ]; const ensures = [ "No manual reconciliation", "Consistent, accurate billing", "Correct discount application", "Real-time margin visibility", "Confident pricing decisions", "Audit-ready operations", ]; // pulse animation cycles through each card index const [pulse, setPulse] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setPulse(p => (p + 1) % cards.length), 1800); return () => clearInterval(t); }, []); return (
{/* 4+3 card grid */}
{cards.slice(0, 4).map((card, i) => ( setActive(i)} onLeave={() => setActive(null)} /> ))}
{cards.slice(4).map((card, i) => ( setActive(i + 4)} onLeave={() => setActive(null)} /> ))}
{/* ensures panel — strict 3×2, centered */}

This Model Ensures:

{ensures.map((e) => (
{e}
))}
); } function CardItem({ card, active, onEnter, onLeave }) { return (
{Icons[card.icon](card.c)}

{card.label}

{card.desc}

); } // ---- What the System Enables — 5-card icon row ---- function SystemEnablesCards() { const cards = [ { t: "Operate Profitably", b: "Eliminate margin leaks and increase profitability.", icon: "shield", c: "#34D399" }, { t: "Price With Confidence", b: "Set and adjust pricing with complete visibility into your margins.", icon: "percent", c: "#A855F7" }, { t: "Deliver Cloud FinOps", b: "Provide structured FinOps as a managed service.", icon: "bell", c: "#3B82F6" }, { t: "Scale Without Complexity", b: "Add customers, pricing models, and volume without adding overhead.", icon: "layers", c: "#34D399" }, { t: "Financial Visibility Everywhere", b: "Real-time insights for operations, finance, and executive teams.", icon: "eye", c: "#22D3EE" }, ]; return (
{cards.map((card, i) => (
0 ? "1px solid #EDF1F7" : "none" }}>
{Icons[card.icon](card.c)}

{card.t}

{card.b}

))}
); } // ---- One System. Full Control. — closing band ---- function OneSystemFullControl({ onDemoClick }) { const checks = [ "End-to-end financial automation", "Built-in controls and governance", "Real-time margin visibility", "Deliver FinOps at scale", "Grow profitably with confidence", ]; return (
{/* Text + CTAs */}

One System. Full Control.
Stronger Cloud Financial Operations.

moneta is the operating system that maintains the financial state of your cloud business — from usage and pricing to invoices and margins. Built for AWS and Azure resellers.

{/* Checklist */}
    {checks.map((c) => (
  • {c}
    • ))}
); } Object.assign(window, { Icons, PngIcon, OperatingSystemDiagram, TrustBar, SolutionTimeline, ResultsList, FinopsSplit, CoreSystemLayers, SystemFlowHorizontal, WhyMonetaDiagram, ReconciliationLoop, MonetaSystemHero, SystemArchitecturePipeline, ControlPlaneCards, AutomatedLifecycle, LivingFinancialModel, SystemEnablesCards, OneSystemFullControl, });