253 lines
9.6 KiB
TypeScript
253 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import LogisticsBrainSection from "../logisticsbrain/LogisticsBrainSection";
|
|
|
|
export default function Workflow2() {
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
const [paused, setPaused] = useState(false);
|
|
|
|
const slides = [
|
|
{
|
|
title: "INNOVATION",
|
|
text: "Our Parallel Universe Engine simultaneously evaluates multiple routing strategies to identify the most efficient delivery plan for every dispatch window. By simulating different route combinations in real time, the system ensures faster, smarter, and more cost-effective logistics decisions. This enables businesses to maintain high operational accuracy while adapting dynamically to changing delivery conditions."
|
|
},
|
|
{
|
|
title: "INNOVATION",
|
|
text: "The platform solves the EV routing challenge through intelligent battery-aware simulations and advanced optimization logic powered by Google OR-Tools. It balances delivery efficiency, charging constraints, and SLA priorities to maximize fleet performance without compromising reliability. This creates a scalable and future-ready logistics system designed for both traditional and EV fleets."
|
|
},
|
|
{
|
|
title: "INNOVATION",
|
|
text: "With sub-45ms inference latency and real-time ETA validation, the engine delivers instant routing decisions with exceptional precision. Multiple strategy universes are benchmarked in parallel to consistently select the best-performing route configuration. The result is highly reliable, SLA-first delivery operations with improved customer experience and operational consistency."
|
|
}
|
|
];
|
|
|
|
// Always begin the storytelling sequence from slide 1 (01/03) on mount — never
|
|
// preserve a previous slide index across remounts / route changes back to MileTruth.
|
|
useEffect(() => {
|
|
setActiveSlide(0);
|
|
}, []);
|
|
|
|
// Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any
|
|
// manual selection resets the timer; pauses while the user hovers the card.
|
|
useEffect(() => {
|
|
if (paused) return;
|
|
const id = setTimeout(() => {
|
|
setActiveSlide((prev) => (prev + 1) % slides.length);
|
|
}, 4000);
|
|
return () => clearTimeout(id);
|
|
}, [activeSlide, paused, slides.length]);
|
|
|
|
return (
|
|
<section className="dm-wf2" aria-label="Workflow 2 — How Our Logistics Brain Works & Innovation">
|
|
|
|
{/* ── Top sub-section: the complete "How Our Logistics Brain Works" experience ── */}
|
|
<LogisticsBrainSection connected />
|
|
|
|
{/* ── Bottom sub-section: Innovation content, flush + colour-matched to the
|
|
logistics-brain card above so the whole workflow reads as one container ── */}
|
|
<div className="dm-wf2-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
|
|
{/* Left Column: Overlapping Chevron Graphic */}
|
|
<div className="dm-workflow-left">
|
|
<svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">
|
|
<path
|
|
d="M 30,20 C 22,20 16,26 16,34 L 78,85 C 81,88 81,92 78,95 L 16,146 C 16,154 22,160 30,160 L 130,160 C 138,160 145,154 148,146 L 204,95 C 207,92 207,88 204,85 L 148,34 C 145,26 138,20 130,20 Z"
|
|
stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.25"
|
|
/>
|
|
<path
|
|
d="M 110,100 C 102,100 96,106 96,114 L 158,165 C 161,168 161,172 158,175 L 96,226 C 96,234 102,240 110,240 L 210,240 C 218,240 225,234 228,226 L 284,175 C 287,172 287,168 284,165 L 228,114 C 225,106 218,100 210,100 Z"
|
|
stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Right Column: Quotes & Text Content */}
|
|
<div className="dm-workflow-right">
|
|
<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-quote">
|
|
<rect x="2" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
|
|
<rect x="16" y="2" width="9" height="20" rx="1.5" transform="skewX(-12)" fill="#C01227" />
|
|
</svg>
|
|
|
|
<h3 className="dm-workflow-title">{slides[activeSlide].title}</h3>
|
|
|
|
<div className="dm-workflow-text-container">
|
|
<AnimatePresence mode="wait">
|
|
<motion.p
|
|
key={activeSlide}
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -12 }}
|
|
transition={{ duration: 0.7, ease: "easeInOut" }}
|
|
className="dm-workflow-text"
|
|
>
|
|
{slides[activeSlide].text}
|
|
</motion.p>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<div className="dm-workflow-nav">
|
|
<span className="dm-workflow-counter">0{activeSlide + 1}/03</span>
|
|
<div className="dm-workflow-bars">
|
|
{slides.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
type="button"
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
className={`dm-workflow-bar ${index === activeSlide ? "is-active" : ""}`}
|
|
onClick={() => setActiveSlide(index)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const styles = `
|
|
/* ============================================================
|
|
Workflow 2 = ONE container:
|
|
├─ How Our Logistics Brain Works (full LogisticsBrainSection)
|
|
└─ Innovation (content card, flush + colour-matched)
|
|
The Innovation card is pulled up to butt against the logistics-brain
|
|
card's flat bottom and shares its dark red/black surface, so the two
|
|
read as a single continuous container with no gap / no break — the
|
|
same connected storytelling structure used in Workflow 1
|
|
(Impact of Optimisation → Performance).
|
|
============================================================ */
|
|
.dm-wf2 {
|
|
position: relative;
|
|
margin: 0 auto 0;
|
|
}
|
|
|
|
/* Cancel the global "section { padding: 6rem 0 }" (consolidated into /public/css/site.css): both
|
|
this wrapper and the nested .dm-lb are sections, so that 96px top+bottom stacked
|
|
into large empty bands above / between the workflows. These are full-bleed pinned
|
|
experiences whose cards butt together via their own insets — no section padding. */
|
|
.dm-wf2, .dm-wf2 .dm-lb { padding-top: 0; padding-bottom: 0; }
|
|
|
|
/* Innovation card — aligned to the logistics-brain card (20px side insets),
|
|
red/black-matched, flat top, rounded bottom, pulled up to close the seam. */
|
|
.dm-wf2-card {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin: 0 20px 0;
|
|
background: radial-gradient(120% 100% at 50% 0%, #12090c 0%, #0a070a 55%, #060507 100%);
|
|
border: 1px solid rgba(192, 18, 39, 0.16);
|
|
border-top: none;
|
|
border-radius: 0 0 28px 28px;
|
|
/* No shadow: this card is flush under the logistics-brain card and merges with it as one
|
|
continuous container — a shadow here would re-introduce a dark band at the seam. */
|
|
box-shadow: none;
|
|
padding: 36px 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 40px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dm-workflow-left {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 440px;
|
|
}
|
|
.dm-workflow-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.dm-workflow-right {
|
|
flex: 1.2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
.dm-workflow-quote { margin-bottom: 5px; }
|
|
|
|
.dm-workflow-title {
|
|
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
|
font-size: 38px;
|
|
font-weight: 700;
|
|
color: #F8FAFC !important;
|
|
letter-spacing: -0.015em;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dm-workflow-text-container { min-height: 150px; width: 100%; }
|
|
.dm-workflow-text {
|
|
font-family: var(--font-manrope), system-ui, sans-serif;
|
|
font-size: 21px;
|
|
line-height: 1.75;
|
|
letter-spacing: 0.01em;
|
|
color: #A3A3A3;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.dm-workflow-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
align-self: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
.dm-workflow-counter {
|
|
font-family: var(--font-space-grotesk), sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #737373;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.dm-workflow-bars { display: flex; gap: 8px; }
|
|
.dm-workflow-bar {
|
|
width: 40px;
|
|
height: 3px;
|
|
border: none;
|
|
padding: 0;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.dm-workflow-bar.is-active { background: #C01227; }
|
|
.dm-workflow-bar:hover { background: rgba(255, 255, 255, 0.35); }
|
|
.dm-workflow-bar.is-active:hover { background: #C01227; }
|
|
|
|
/* ── Responsive — keep insets/radius aligned to the logistics-brain card ── */
|
|
@media (max-width: 1024px) {
|
|
.dm-wf2-card {
|
|
padding: 44px 44px;
|
|
gap: 44px;
|
|
}
|
|
.dm-workflow-title { font-size: 32px; }
|
|
.dm-workflow-text { font-size: 19px; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.dm-wf2-card {
|
|
margin: 0 10px 0;
|
|
border-radius: 0 0 20px 20px;
|
|
padding: 36px 28px;
|
|
gap: 36px;
|
|
flex-direction: column;
|
|
}
|
|
.dm-workflow-left { max-width: 280px; }
|
|
.dm-workflow-right { width: 100%; }
|
|
.dm-workflow-title { font-size: 28px; }
|
|
.dm-workflow-text { font-size: 17px; }
|
|
.dm-workflow-text-container { min-height: auto; }
|
|
}
|
|
`;
|