first commit
This commit is contained in:
173
src/components/sections/Workflow1.tsx
Normal file
173
src/components/sections/Workflow1.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function Workflow1() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
title: "Performance",
|
||||
text: "Our AI-powered routing system reduces unnecessary travel by selecting the most efficient delivery paths across the city. This helps lower fuel and battery consumption while improving delivery speed and operational efficiency. Businesses can complete more deliveries in less time with significantly reduced logistics costs."
|
||||
},
|
||||
{
|
||||
title: "Performance", // original code had only title in the first slide, but let's keep title for consistency
|
||||
text: "The optimization engine intelligently groups and balances deliveries, allowing the same order volume to be fulfilled with fewer vehicles. This improves fleet utilization, reduces maintenance and staffing costs, and increases overall delivery efficiency. Even with fewer vehicles, the platform maintains smooth and reliable operations."
|
||||
},
|
||||
{
|
||||
title: "Performance",
|
||||
text: "Real-time route optimization ensures predictable and on-time deliveries across all delivery zones. By reducing delays and improving route planning, businesses can maintain high customer satisfaction and strong SLA performance. The system delivers lower operational costs while consistently maintaining 100% order fulfillment."
|
||||
}
|
||||
];
|
||||
|
||||
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-1.png"
|
||||
className="attachment-full size-full wp-image-5026"
|
||||
alt="Workflow 1"
|
||||
/>
|
||||
<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 }}>
|
||||
The Impact of Optimisation
|
||||
</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-1" 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user