Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update about page

Browse Source
This commit is contained in:
Aravind R
2026-06-02 14:10:44 +05:30
parent a59a5e79dc
commit bae2fa0daa
24 changed files with 1903 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
src/components/sections/Workflow1.tsx
View File

@@ -1,173 +1,224 @@
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import OptimizationSection from "../optimization/OptimizationSection";
export default function Workflow1() {
const [activeSlide, setActiveSlide] = useState(0);
const slides = [
{
title: "Performance",
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
title: "PERFORMANCE",
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",
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;
}
`}} />
<section className="dm-wf1" aria-label="Workflow 1 — Impact of Optimisation & Performance">
<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="{&quot;background_background&quot;:&quot;classic&quot;}">
<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>
{/* ── Top sub-section: the full interactive "Impact of Optimisation" experience ── */}
<OptimizationSection />
{/* ── Bottom sub-section: Performance content, flush + colour-matched to the
optimisation section above so the whole workflow reads as one container ── */}
<div className="dm-wf1-card">
{/* 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.28, ease: "easeInOut" }}
className="dm-workflow-text"
>
{slides[activeSlide].text}
</motion.p>
</AnimatePresence>
</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="{&quot;background_background&quot;:&quot;classic&quot;}">
<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 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 1 = ONE container:
├─ Impact of Optimisation (full interactive OptimizationSection)
└─ Performance (content card, flush + colour-matched)
The Performance card is pulled up to butt against the optimisation
card's flat bottom and shares its dark-navy surface, so the two
read as a single continuous container with no gap / no break.
============================================================ */
.dm-wf1 {
position: relative;
margin: 0 auto 24px;
}
/* Performance card — aligned to the optimisation card (40px side insets),
navy-matched, flat top, rounded bottom, pulled up to close the seam. */
.dm-wf1-card {
position: relative;
z-index: 2;
margin: -28px 40px 0;
background: linear-gradient(180deg, #030a18 0%, #06101f 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-top: none;
border-radius: 0 0 35px 35px;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
padding: 48px 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: 110px; width: 100%; }
.dm-workflow-text {
font-family: var(--font-manrope), system-ui, sans-serif;
font-size: 16px;
line-height: 1.65;
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 optimisation card ── */
@media (max-width: 1024px) {
.dm-wf1-card {
margin: -20px 20px 0;
border-radius: 0 0 42px 42px;
padding: 44px 44px;
gap: 44px;
}
.dm-workflow-title { font-size: 32px; }
}
@media (max-width: 768px) {
.dm-wf1-card {
margin: -14px 10px 0;
border-radius: 0 0 28px 28px;
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-container { min-height: auto; }
}
`;