107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection";
|
|
import WorkflowScene from "./WorkflowScene";
|
|
|
|
/* Cyan / Teal — matches the Optimization Engine scene palette. */
|
|
const THEME: EVCardsTheme = {
|
|
accent: "#00E5FF",
|
|
accent2: "#14B8A6",
|
|
glow: "rgba(0,229,255,0.18)",
|
|
};
|
|
|
|
/**
|
|
* Workflow 1 — Performance (hybrid split-screen).
|
|
*
|
|
* • Left — the PRODUCTION Optimization Engine Three.js scene (depot, trucks,
|
|
* route optimization, shaders, particles).
|
|
* • Right — a COMPACT DASHBOARD: a quick KPI row over short feature cards,
|
|
* sitting on the animated network backdrop (cyan/teal). Surfaces the
|
|
* key metrics fast, keeps copy short and reads well on mobile.
|
|
*/
|
|
const METRICS: EVStat[] = [
|
|
{ value: 42, suffix: "%", label: "Distance Saved" },
|
|
{ value: 28, suffix: "%", label: "Faster Routes" },
|
|
{ value: 31, suffix: "%", label: "Lower Cost" },
|
|
{ value: 99.9, decimals: 1, suffix: "%", label: "On-Time" },
|
|
];
|
|
|
|
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="3 11 22 2 13 21 11 13 3 11" />),
|
|
title: "Route Optimization",
|
|
desc: "AI selects the most efficient path across every zone.",
|
|
},
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
|
|
<polyline points="16 17 22 17 22 11" />
|
|
</>,
|
|
),
|
|
title: "Distance Reduction",
|
|
desc: "Same volume delivered with a leaner, better-used fleet.",
|
|
},
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<path d="M12 14l4-4" />
|
|
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
|
</>,
|
|
),
|
|
title: "Fleet Efficiency",
|
|
desc: "Higher utilisation and lower operating cost.",
|
|
},
|
|
{
|
|
icon: ico(
|
|
<>
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
|
<polyline points="9 12 11 14 15 10" />
|
|
</>,
|
|
),
|
|
title: "SLA Performance",
|
|
desc: "Real-time correction keeps deliveries on time.",
|
|
},
|
|
];
|
|
|
|
const BADGES: EVBadge[] = [
|
|
{ value: "-42%", label: "DISTANCE SAVED" },
|
|
{ value: "-37%", label: "FEWER VEHICLES" },
|
|
];
|
|
|
|
export default function Workflow1() {
|
|
return (
|
|
<EVSection
|
|
ariaLabel="Workflow 1 — Performance"
|
|
gapTop
|
|
gapBottom
|
|
bannerImage="/images/mile-1.png"
|
|
cardTitle="OPTIMIZE EVERY MILE"
|
|
cardSubtitle="Cut travel distance, reduce operating cost, and improve fleet productivity across every route."
|
|
eyebrow="/ Performance /"
|
|
titleLead="SMARTER ROUTES. "
|
|
titleAccent="LOWER COSTS."
|
|
mediaSlot={<WorkflowScene variant="optimization" ariaLabel="Live route optimization engine" />}
|
|
metrics={METRICS}
|
|
features={FEATURES}
|
|
cardsHeading="Performance Insight"
|
|
cardsTheme={THEME}
|
|
badges={BADGES}
|
|
/>
|
|
);
|
|
}
|