174 lines
9.7 KiB
TypeScript
174 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
export default function Workflow3() {
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
|
|
const slides = [
|
|
{
|
|
title: "Strategy",
|
|
text: "Our grading engine continuously evaluates fulfillment performance, SLA compliance, and route efficiency before every dispatch. By comparing legacy routing methods with unified optimization, the system ensures smarter and more reliable delivery planning. This helps businesses maintain operational consistency while improving overall delivery performance."
|
|
},
|
|
{
|
|
title: "Strategy",
|
|
text: "Every EV route is pre-validated against real battery capacity and charging feasibility before a rider leaves the hub. This reduces the risk of delivery interruptions, charging failures, or delayed orders during operations. The platform ensures reliable route execution while maximizing EV fleet efficiency and rider confidence."
|
|
},
|
|
{
|
|
title: "Strategy",
|
|
text: "The system provides actionable fleet insights and optimized workload distribution to improve both rider experience and operational productivity. Balanced route allocation helps reduce rider fatigue, improve retention, and maintain consistent delivery quality across zones. Managers gain better visibility into fleet performance, enabling faster and more informed decision-making."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
.miletruth-workflow-heading {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
color: #1c1c1c;
|
|
}
|
|
.testimonials-slider-container {
|
|
position: relative;
|
|
}
|
|
.testimonial-item {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
|
|
}
|
|
.testimonial-item.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
position: relative;
|
|
}
|
|
`}} />
|
|
|
|
<div className="elementor-63">
|
|
<div className="elementor-element elementor-element-285c828 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="285c828" data-element_type="container" data-e-type="container">
|
|
|
|
{/* Left Column: Image with overlay */}
|
|
<div className="elementor-element elementor-element-f3478fa e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f3478fa" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="elementor-element elementor-element-e8ee5be elementor-widget elementor-widget-logico_image_carousel" data-id="e8ee5be" data-element_type="widget" data-e-type="widget" data-widget_type="logico_image_carousel.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-image-carousel-widget">
|
|
<div className="image-slider">
|
|
<div className="image-item slider-item">
|
|
<div className="image-item-card with-height">
|
|
<img
|
|
loading="lazy"
|
|
decoding="async"
|
|
width="1733"
|
|
height="773"
|
|
src="/images/miletruth-3.png"
|
|
className="attachment-full size-full wp-image-5026"
|
|
alt="Workflow 3"
|
|
/>
|
|
<div className="image-title">
|
|
<div className="elementor-element elementor-element-7500280 elementor-widget elementor-widget-logico_heading" data-id="7500280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container" style={{ backgroundColor: "white", padding: "20px", borderRadius: "10px", opacity: 0.9 }}>
|
|
<h4 className="logico-title" style={{ color: "#C01227", margin: 0 }}>
|
|
Happier Riders. Higher Fulfillment
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Testimonial/Text Slider */}
|
|
<div className="elementor-element elementor-element-79ba100 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="79ba100" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
|
<div className="e-con-inner">
|
|
<div className="elementor-element elementor-element-9c38369 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9c38369" data-element_type="container" data-e-type="container">
|
|
|
|
{/* Secondary Image inside right col */}
|
|
<div className="elementor-element elementor-element-8f3f74d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8f3f74d" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-f5a66b2 elementor-widget elementor-widget-image" data-id="f5a66b2" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<img
|
|
loading="lazy"
|
|
decoding="async"
|
|
width="491"
|
|
height="373"
|
|
src="/images/home2-pic-2.png"
|
|
className="attachment-full size-full wp-image-4396"
|
|
alt="Decorative pic"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slider */}
|
|
<div className="elementor-element elementor-element-4071ec8 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4071ec8" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-0a76e77 elementor-widget elementor-widget-logico_testimonial_carousel" data-id="0a76e77" data-element_type="widget" data-e-type="widget" data-widget_type="logico_testimonial_carousel.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="logico-testimonial-carousel-widget">
|
|
<div className="testimonial-carousel-wrapper witch-icon">
|
|
<div className="testimonials-slider-container">
|
|
<div className="testimonials-slider">
|
|
{slides.map((slide, index) => (
|
|
<div
|
|
key={index}
|
|
className={`testimonial-item slider-item ${index === activeSlide ? "active" : ""}`}
|
|
>
|
|
<div className="testimonial-text">
|
|
<h4 className="miletruth-workflow-heading">{slide.title}</h4>
|
|
<p>{slide.text}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Slider Navigation Footer */}
|
|
<div className="slider-footer slider-footer-view-outside slider-footer-position-after slider-footer-width-full miletruth-workflow-progress">
|
|
<div className="slider-footer-content" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<div className="slider-pagination" style={{ display: "flex", alignItems: "center", gap: "15px" }}>
|
|
<div className="slider-progress-wrapper">
|
|
<span className="slider-progress-current">0{activeSlide + 1}</span>
|
|
/
|
|
<span className="slider-progress-all">03</span>
|
|
</div>
|
|
<div className="owl-dots owl-dots-workflow-3" style={{ display: "flex", gap: "8px" }}>
|
|
{slides.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
type="button"
|
|
role="button"
|
|
className={`owl-dot ${index === activeSlide ? "active" : ""}`}
|
|
onClick={() => setActiveSlide(index)}
|
|
style={{ width: "10px", height: "10px", borderRadius: "50%", padding: 0 }}
|
|
>
|
|
<span></span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|