113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection";
|
|
import WorkflowScene from "./WorkflowScene";
|
|
|
|
/* Red / Crimson — matches the Routing Engine (logistics brain) scene. */
|
|
const THEME: EVCardsTheme = {
|
|
accent: "#E2354A",
|
|
accent2: "#C01227",
|
|
glow: "rgba(226,53,74,0.2)",
|
|
};
|
|
|
|
/**
|
|
* Workflow 2 — Innovation (hybrid split-screen).
|
|
*
|
|
* • Left — the PRODUCTION Routing Engine Three.js scene (city nodes,
|
|
* buildings, multi-route generation, constraint evaluation).
|
|
* • Right — a COMPACT DASHBOARD: a quick KPI row over short feature cards,
|
|
* sitting on the animated network backdrop (red/crimson). Surfaces
|
|
* the key metrics fast and keeps the section tight on mobile.
|
|
*/
|
|
const METRICS: EVStat[] = [
|
|
{ value: 45, suffix: "ms", label: "Inference" },
|
|
{ value: 12, suffix: "+", label: "Strategies" },
|
|
{ value: 99.9, decimals: 1, suffix: "%", label: "SLA Met" },
|
|
{ value: 24, suffix: "/7", label: "Adaptive" },
|
|
];
|
|
|
|
const ico = (path: React.ReactNode) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
{path}
|
|
</svg>
|
|
);
|
|
|
|
const FEATURES: EVFeature[] = [
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2" />
|
|
<polyline points="2 17 12 22 22 17" />
|
|
<polyline points="2 12 12 17 22 12" />
|
|
</>,
|
|
),
|
|
title: "Generate Routes",
|
|
desc: "Many strategies explored per dispatch window.",
|
|
},
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
|
<polyline points="22 4 12 14.01 9 11.01" />
|
|
</>,
|
|
),
|
|
title: "Check Constraints",
|
|
desc: "Battery, capacity, distance and time validated.",
|
|
},
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<line x1="6" y1="20" x2="6" y2="14" />
|
|
<line x1="12" y1="20" x2="12" y2="4" />
|
|
<line x1="18" y1="20" x2="18" y2="10" />
|
|
</>,
|
|
),
|
|
title: "Score & Compare",
|
|
desc: "Plans ranked by total cost in parallel.",
|
|
},
|
|
{
|
|
icon: ico(<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />),
|
|
title: "Select Best Plan",
|
|
desc: "SLA-first plan locked in and dispatched.",
|
|
},
|
|
];
|
|
|
|
const BADGES: EVBadge[] = [
|
|
{ value: "45ms", label: "INFERENCE" },
|
|
{ value: "100%", label: "SLA-FIRST" },
|
|
];
|
|
|
|
export default function Workflow2() {
|
|
return (
|
|
<EVSection
|
|
ariaLabel="Workflow 2 — Innovation"
|
|
gapBottom
|
|
bannerImage="/images/mid-mile-approach.jpg"
|
|
cardTitle="CHOOSE THE BEST PLAN"
|
|
cardSubtitle="Analyze thousands of route possibilities and automatically select the most efficient delivery strategy."
|
|
eyebrow="/ Innovation /"
|
|
titleLead="MANY STRATEGIES. "
|
|
titleAccent="ONE BEST PLAN."
|
|
mediaSlot={
|
|
<WorkflowScene
|
|
variant="logistics"
|
|
ariaLabel="Live multi-route logistics brain"
|
|
/>
|
|
}
|
|
metrics={METRICS}
|
|
features={FEATURES}
|
|
cardsHeading="AI Decision Engine"
|
|
cardsTheme={THEME}
|
|
badges={BADGES}
|
|
/>
|
|
);
|
|
}
|