/*
* About module.
*
* This page is the old marketing site (wms-arka-com/index.html, the page that
* used to answer https://wms.arka.com) restyled as a module inside the app
* shell. Its content is that page and nothing else: hero, capabilities, the five
* optimization engines, beyond optimization, notification workflows, the
* real-time dashboard, authentication, how it works, integration, platform
* values, contact, footer — in the original order, with the original wording.
* Nothing about the audit module lives here; only what the marketing page said.
*
* Two things about the port are worth knowing:
*
* 1. The old page's two mock-ups are rebuilt as SVG at the same density —
* WorkflowVisual keeps the four nodes, the marching-ants connectors and the
* pulsing packets; DashboardVisual keeps the three stat tiles with their
* rails and the 24-hour throughput curve, whose path data is copied verbatim.
* What changed is the palette: cyan/blue-on-slate became this app's neutrals
* with green as the single accent. The mock-ups render twice, in the hero and
* in their own sections, exactly as they did on the old page.
* 2. Deliberately dropped, being chrome rather than content: the Privacy and
* Terms links (both pointed at a dead `href="#"`), the floating particles,
* and the SVG glow filters, which on a white theme only muddy the green.
*
* Jump targets are element ids driven by scrollIntoView, not `href="#..."`,
* because the hash is what ArkaApp routes on — an anchor would change modules.
*
* IIFE-wrapped and published on window.AboutModule for the same reason as
* AppShell.jsx — in-browser Babel gives every .jsx file the same global scope.
*/
(function () {
const { cn, PageContainer, PageHeader, Section, IconTile, Icons } = window.Shell;
/* The old page's nav, in its order. "Platform" is the values grid, as there. */
const SECTION_INDEX = [
{ id: 'capabilities', label: 'Capabilities' },
{ id: 'optimization', label: 'Optimization' },
{ id: 'beyond', label: 'Beyond' },
{ id: 'workflows', label: 'Workflows' },
{ id: 'dashboard', label: 'Dashboard' },
{ id: 'security', label: 'Security' },
{ id: 'how', label: 'How It Works' },
{ id: 'integration', label: 'Integration' },
{ id: 'platform', label: 'Platform' },
{ id: 'contact', label: 'Contact' },
];
const CAPABILITIES = [
{
icon: Icons.Warehouse,
title: 'Multi-warehouse support',
metric: 'Multi-site ready',
quote: 'One command layer across sites.',
desc: 'Operate multiple warehouses with unified visibility, consistent controls, and clean cross-site reporting.',
},
{
icon: Icons.Box,
title: 'Product & inventory tracking',
metric: 'Inventory control',
quote: 'Know what you have and where it is.',
desc: 'Track SKUs, bins, and inventory states with accuracy-focused tools built for speed at the edge.',
},
{
icon: Icons.Bolt,
title: 'Custom package management',
metric: 'Faster pack',
quote: 'Standardize pack-out quality.',
desc: 'Define packaging rules and handling constraints to reduce waste, improve speed, and keep ops consistent.',
},
{
icon: Icons.Bell,
title: 'Visual notification workflows',
metric: 'Workflow builder',
quote: 'Triggers + channels, no bottlenecks.',
desc: 'Build workflows visually: triggers, rules, and channels (email, Slack, webhooks) with audit trails.',
},
{
icon: Icons.Users,
title: 'User & admin management',
metric: 'RBAC',
quote: 'Right access, right scope.',
desc: 'Role-based access with admin tools and guardrails for teams that scale across warehouses.',
},
{
icon: Icons.Chart,
title: 'Real-time dashboard metrics',
metric: 'Live KPIs',
quote: 'Run the floor with live truth.',
desc: 'Utilization, throughput, accuracy, and exception queues—so teams act before issues cascade.',
},
{
icon: Icons.Lock,
title: 'Full authentication system',
metric: 'Auth built-in',
quote: 'Secure by default.',
desc: 'Authentication and session controls designed for operational environments and compliance needs.',
},
{
icon: Icons.Sparkle,
title: 'Light theme',
metric: 'Shift-ready',
quote: 'Comfort for long shifts.',
desc: 'A modern, clean interface optimized for both office and floor use.',
},
];
const OPTIMIZATION_ENGINES = [
{
title: 'CardStack Optimization',
desc: 'Groups items with similar dimensions so they can be safely stacked together. Reduces wasted vertical space without compromising item safety.',
},
{
title: 'Size Standardization',
desc: 'Categorizes inventory by weight and size class, then reorganizes zones so similar-sized goods stay together.',
},
{
title: 'Value Density Sorting',
desc: 'Moves highest-value inventory into secure, climate-controlled, or high-visibility zones while bulk goods go to open storage.',
},
{
title: 'Bin Packing',
desc: 'First-fit-decreasing packing that treats the warehouse like a puzzle, maximizing space while respecting weight and zone limits.',
},
{
title: 'Name Consolidation',
desc: 'Groups items with similar descriptions into the same zones so teams find what they need faster.',
},
];
const BEYOND_OPTIMIZATION = [
{
title: 'Multi-site inventory visibility',
desc: 'See stock levels across all locations in one view and spot shortages instantly.',
},
{
title: 'Capacity forecasting',
desc: '30-day utilization projections with alerts at 80% and 95% thresholds.',
},
{
title: 'Smart rebalancing',
desc: 'AI recommendations to redistribute inventory across sites with one-click approval and tracking.',
},
{
title: 'Priority transfer queue',
desc: 'Route urgent transfers ahead of routine ones with escalation controls and queue tracking.',
},
{
title: 'Aging alerts',
desc: 'Configurable thresholds flag inventory sitting too long to reduce spoilage and obsolescence.',
},
{
title: 'Site benchmarking',
desc: 'Daily metric snapshots, leaderboards, and trends to compare location performance.',
},
{
title: 'Transport calendar',
desc: 'Schedule cross-site shipments with conflict detection and consolidation tools.',
},
{
title: 'Version control',
desc: 'Every optimization run creates a snapshot with one-click rollback.',
},
];
const WORKFLOW_PIECES = [
'Triggers: low stock, SLA breach, receiving delays, anomalies',
'Rules: warehouse scope, product class, priority thresholds',
'Channels: email, Slack, webhooks, in-app alerts',
'Actions: create tasks, draft POs, escalate exceptions',
];
const DASHBOARD_METRICS = [
{ title: 'Utilization', desc: 'Capacity by warehouse, zone, and bin class.' },
{ title: 'Throughput', desc: 'Pick/pack/ship performance and SLA tracking.' },
{ title: 'Exceptions', desc: 'Backorders, mismatches, damaged goods, holds.' },
{ title: 'Inventory health', desc: 'Aging stock, cycle counts, accuracy deltas.' },
];
const SECURITY = [
{
icon: Icons.Lock,
title: 'Authentication',
desc: 'Secure sessions and consistent identity across modules.',
},
{
icon: Icons.Users,
title: 'Role-based access',
desc: 'Operators, managers, admins—scoped per warehouse and workflow.',
},
{
icon: Icons.Shield,
title: 'Auditability',
desc: 'Action logs and workflow history for traceability.',
},
];
const HOW_IT_WORKS = [
{
title: 'Import your inventory',
desc: 'Upload CSV or Excel files. We validate and map everything automatically.',
},
{
title: 'Configure your zones',
desc: 'Define storage areas by type with capacity limits: bulk, rack, cold storage, hazmat, outdoor.',
},
{
title: 'Run optimization',
desc: 'Pick one algorithm or run all five in sequence. Preview every move before applying.',
},
{
title: 'Monitor & adapt',
desc: 'Real-time dashboards, utilization charts, and automated alerts keep you ahead of problems.',
},
];
const INTEGRATION = [
'Full REST API with standard JSON responses.',
'Connect ERP, TMS, or order management systems.',
'User-scoped data isolation so every client sees only their operations.',
];
const VALUES = [
{ title: 'Operational clarity', desc: 'Every view drives a decision.' },
{ title: 'Automation first', desc: 'Humans approve; systems execute.' },
{ title: 'Auditability', desc: 'Trace every event end-to-end.' },
{ title: 'Extensible by design', desc: 'APIs and integrations with no lock-in.' },
{ title: 'Performance', desc: 'Fast UI, fast workflows, fast outcomes.' },
{ title: 'Secure defaults', desc: 'RBAC + auth and least privilege.' },
{ title: 'Multi-site reality', desc: 'Built for distributed operations.' },
{ title: 'Modern UX', desc: 'Light theme and clean flows.' },
];
const CONTACT_CHANNELS = [
{ label: 'General inquiries', value: 'wms@arka.com', href: 'mailto:wms@arka.com' },
{ label: 'Platform access', value: 'support@arka.com', href: 'mailto:support@arka.com' },
{ label: 'Headquarters', value: 'Austin, Texas' },
];
/* ---------- small pieces ---------- */
function Tile({ title, children }) {
return (
{title}
{children}
);
}
const PILL =
'inline-flex items-center gap-2 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-card-raised';
const EYEBROW = 'text-2xs font-bold uppercase tracking-widest';
/* ---------- the two mock-ups ---------- */
/**
* The chrome both mock-ups sit in.
*
* The old page framed each one as an application window — a titlebar carrying a
* name on the left and a scope on the right, over a darker body. Same frame
* here, with the titlebar as the raised step and the body as the plain card, so
* the mock reads as a screenshot of something rather than as another panel.
* `lights` draws the three window dots the workflow builder had; they are the
* one place the status tones appear purely as decoration.
*/
function MockWindow({ label, tag, lights, children }) {
return (
{lights && (
)}
{label}{tag}
{children}
);
}
/** One of the dashboard's three stat tiles: label, figure, rail, caption. */
function MockStat({ label, value, percent, delta, caption }) {
return (
{label}
{value}
{/* The rail is drawn on foreground/10 rather than on the border token,
which is a hairline colour and disappears as a filled track. */}
{delta && (
{delta}
)}
{caption}
);
}
/* The old throughput curve, copied verbatim so the shape is the same one —
an early climb, two dips, and a strong close. */
const THROUGHPUT_PATH =
'M10 95 C 80 35, 140 80, 210 55 C 280 30, 340 70, 410 50 C 480 30, 540 60, 610 35 C 680 10, 740 40, 820 22 C 860 14, 885 18, 890 20';
/**
* The throughput chart.
*
* Two passes over one path: a wide translucent green halo (the old version's
* glow, done with opacity rather than a blur filter, which on white smears into
* grey) and the readable ink-green line on top. No area fill — the old chart was
* a bare line, and a wash under it only dulls the one green element in the mock.
* The ten baseline ticks are the old hour markers.
*/
function ThroughputChart() {
return (
);
}
/**
* The real-time dashboard mock — the old page's hero visual, and the visual of
* its dashboard section. Same three figures (12 warehouses at 78% capacity,
* 4,218 orders in motion at +9%, 99.2% accuracy from 92% coverage) and the same
* 24-hour throughput panel beneath them.
*/
function DashboardVisual() {
return (
Throughputlast 24h
);
}
/** One node of the workflow diagram. Coordinates are in the 900×360 viewBox. */
function FlowNode({ x, y, w, h, eyebrow, title, sub, accent }) {
const cx = x + w / 2;
return (
{eyebrow}
{title}
{sub && (
{sub}
)}
);
}
/* Packets travelling a connector: a run of dots that pulse in sequence, which
is what the old page's animated dots along the trigger line did. `at` is the
fixed coordinate — the y of a horizontal run, the x of a vertical one. */
function FlowPackets({ from, to, at, vertical, step = 12, delay = 0 }) {
const dots = [];
for (let p = from, i = 0; p <= to; p += step, i++) {
dots.push(
);
}
return {dots};
}
/**
* The notification workflow builder.
*
* The original: TRIGGER → RULE → CHANNELS across the top, the rule branching
* down to the ACTION it fires, joined by marching-ants connectors with packets
* running along them. All of it is here; what changed is that the nodes are
* neutral cards with green reserved for the action they end at, and the glow
* filter is gone — on white it only smears the ink.
*/
function WorkflowVisual() {
return (
);
}
/* ---------- hero backdrop ---------- */
/**
* The old hero's technical grid. Drawn in foreground alphas rather than the
* border token, which is too faint to read as a pattern, and kept under 10%
* so it stays a texture instead of becoming graph paper.
*/
function HeroGrid() {
return (
);
}
/* ---------- section index ---------- */
/**
* The old page's nav. It highlighted whichever section you were in, so this one
* does too — the bottom margin keeps the marker on the heading you are reading
* rather than on the one about to enter from below.
*/
function SectionIndex() {
const [activeId, setActiveId] = React.useState(SECTION_INDEX[0].id);
React.useEffect(() => {
const els = SECTION_INDEX.map(s => document.getElementById(s.id)).filter(Boolean);
if (!els.length || typeof IntersectionObserver !== 'function') return;
const observer = new IntersectionObserver(
entries => {
const visible = entries
.filter(e => e.isIntersecting)
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
if (visible.length) setActiveId(visible[0].target.id);
},
{ rootMargin: '-72px 0px -55% 0px' }
);
els.forEach(el => observer.observe(el));
return () => observer.disconnect();
}, []);
return (
);
}
function jumpTo(id) {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
/* ---------- the page ---------- */
function AboutModule() {
return (
Contact
}
/>
{/* HERO — copy left, the dashboard mock right, as on the old page. */}
Warehouse management system
multi-warehouse • workflows • auth
Multi-warehouse
command & control
Full-scale WMS with smart optimization engines, inventory tracking, package
management, admin tooling, and visual notification workflows—delivered in a modern,
clean interface built for long shifts.
{/* Bare in the column, not in a card — on the old page these sat as
plain text beside the diagram, and a card this tall around four
lines reads as an empty box. */}
{WORKFLOW_PIECES.map(piece => (
•{piece}
))}
{/* Mock left, the four metric families right — the old page's order. */}
{DASHBOARD_METRICS.map(m => (
{m.desc}
))}
{SECURITY.map(s => (
{s.title}
{s.desc}
))}
{HOW_IT_WORKS.map((step, i) => (
Step {i + 1}
{step.title}
{step.desc}
))}
{INTEGRATION.map(point => (
{point}
))}
{/* The old page's values grid — its nav called this section "Platform". */}
{/* The old footer, minus its duplicate wordmark and its links. The
wms.arka.com link is deliberately gone: that domain now serves this
app, so the link pointed the reader back at the page they are on. */}
);
}
window.AboutModule = AboutModule;
})();