update miletruth page

2026-05-30 17:24:26 +05:30
parent 88722329d5
commit 8d74f7063e
23 changed files with 5373 additions and 158 deletions
--- a/src/components/optimization/constants.ts
+++ b/src/components/optimization/constants.ts
@@ -0,0 +1,118 @@
+/**
+ * Shared design tokens + KPI data for the AI Logistics Optimization section.
+ * Centralizing here keeps the 3D scene, overlay and metrics panel in sync.
+ */
+
+export const COLORS = {
+  bg: "#020617",
+  cyan: "#00E5FF",
+  green: "#22C55E",
+  red: "#EF4444",
+  amber: "#F59E0B",
+  ink: "#0B1220",
+  slate: "#64748B",
+  textDim: "rgba(226,232,240,0.66)",
+} as const;
+
+/** rgba helper used by inline styles + scoped CSS. */
+export function rgba(hex: string, alpha: number): string {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export type Kpi = {
+  key: string;
+  /** numeric value the counter animates between */
+  before: number;
+  after: number;
+  prefixBefore?: string;
+  prefixAfter?: string;
+  suffix?: string;
+  labelBefore: string;
+  labelAfter: string;
+  /** lower number is the better outcome (drives the up/down arrow) */
+  goodWhenLower: boolean;
+};
+
+export const KPIS: Kpi[] = [
+  {
+    key: "distance",
+    before: 312,
+    after: 182,
+    suffix: " km",
+    labelBefore: "Route Distance",
+    labelAfter: "Route Distance",
+    goodWhenLower: true,
+  },
+  {
+    key: "vehicles",
+    before: 8,
+    after: 5,
+    labelBefore: "Vehicles",
+    labelAfter: "Vehicles",
+    goodWhenLower: true,
+  },
+  {
+    key: "orders",
+    before: 59,
+    after: 59,
+    labelBefore: "Orders",
+    labelAfter: "Orders Fulfilled",
+    goodWhenLower: false,
+  },
+  {
+    key: "delayed",
+    before: 23,
+    after: 0,
+    labelBefore: "Delayed",
+    labelAfter: "Delayed",
+    goodWhenLower: true,
+  },
+  {
+    key: "cost",
+    before: 18,
+    after: 18,
+    prefixBefore: "+",
+    prefixAfter: "−",
+    suffix: "%",
+    labelBefore: "Cost Overrun",
+    labelAfter: "Cost Saved",
+    goodWhenLower: false,
+  },
+];
+
+/**
+ * Scroll-phase thresholds (normalized 0 → 1). The whole narrative is driven by
+ * a single scroll progress value shared between GSAP, R3F and Framer Motion.
+ */
+export const PHASES = {
+  chaos: 0.0,      // Stage 1 & 2: Network appears & vehicles active
+  scan: 0.28,       // Stage 3: AI scans routes
+  dissolve: 0.42,   // Stage 4 & 5: Optimize begins & bad routes dissolve
+  optimize: 0.56,   // Stage 6: Optimized routes appear
+  reorganize: 0.70, // Reassigning vehicles
+  metrics: 0.84,    // Stage 7: KPIs update & complete
+} as const;
+
+export type PhaseKey = keyof typeof PHASES;
+
+export function phaseFromProgress(p: number): PhaseKey {
+  if (p >= PHASES.metrics) return "metrics";
+  if (p >= PHASES.reorganize) return "reorganize";
+  if (p >= PHASES.optimize) return "optimize";
+  if (p >= PHASES.dissolve) return "dissolve";
+  if (p >= PHASES.scan) return "scan";
+  return "chaos";
+}
+
+export const PHASE_LABELS: Record<PhaseKey, string> = {
+  chaos: "Monitoring network",
+  scan: "AI SCANNING NETWORK",
+  dissolve: "AI OPTIMIZING ROUTES",
+  optimize: "AI OPTIMIZING ROUTES",
+  reorganize: "AI REASSIGNING VEHICLES",
+  metrics: "AI COMPLETE",
+};