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

399
src/components/sections/Workflow3.tsx
View File

@@ -1,173 +1,278 @@
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
export default function Workflow3() {
const [activeSlide, setActiveSlide] = useState(0);
const slides = [
{
title: "Strategy",
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",
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",
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;
}
`}} />
<section className="dm-workflow" aria-label="Workflow 3 — Happier Riders & Strategy">
<div className="dm-workflow__container">
<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-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>
{/* ── Top sub-section: Happier Riders banner ── */}
<div className="dm-workflow-banner">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className="dm-workflow-banner__img"
src="/images/miletruth-3.png"
alt="Happier Riders. Higher Fulfillment"
width={1733}
height={773}
loading="lazy"
decoding="async"
/>
<div className="dm-workflow-banner__caption">
<span className="dm-workflow-banner__title-text">Happier Riders. Higher Fulfillment</span>
</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-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>
{/* ── Bottom sub-section: Strategy content ── */}
<div className="dm-workflow-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>
<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>
</div>
</>
<style dangerouslySetInnerHTML={{ __html: styles }} />
</section>
);
}
const styles = `
/* ============================================================
Workflow = ONE container: image-title banner (top) flush with
the dark content card (bottom). Single overflow:hidden wrapper
rounds the whole stack — no gap, no separate backgrounds.
============================================================ */
.dm-workflow {
max-width: 100%;
margin: 24px auto;
padding: 0 40px;
box-sizing: border-box;
}
.dm-workflow__container {
position: relative;
border-radius: 40px;
overflow: hidden;
background: #181818;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 14px 50px -16px rgba(0, 0, 0, 0.55);
}
/* ── Banner (top) ── */
.dm-workflow-banner {
position: relative;
display: block;
width: 100%;
font-size: 0;
line-height: 0;
}
.dm-workflow-banner__img {
display: block;
width: 100%;
height: auto;
max-height: 380px;
object-fit: cover;
object-position: center;
}
.dm-workflow-banner__caption {
position: absolute;
left: 40px;
bottom: 32px;
background: rgba(255, 255, 255, 0.92);
padding: 16px 26px;
border-radius: 12px;
box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
line-height: normal;
}
.dm-workflow-banner__title-text {
display: block;
color: #C01227 !important;
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif !important;
font-size: clamp(20px, 2.4vw, 34px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: -0.01em;
text-transform: none !important;
}
/* ── Content card (bottom), flush under the banner ── */
.dm-workflow-card {
position: relative;
background: #181818;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 48px 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
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 ── */
@media (max-width: 1024px) {
.dm-workflow__container { border-radius: 32px; }
.dm-workflow-banner__img { max-height: 300px; }
.dm-workflow-banner__caption { left: 28px; bottom: 24px; padding: 13px 20px; }
.dm-workflow-card { padding: 44px 44px; gap: 44px; }
.dm-workflow-title { font-size: 32px; }
}
@media (max-width: 768px) {
.dm-workflow { padding: 0 16px; }
.dm-workflow__container { border-radius: 24px; }
.dm-workflow-banner__img { max-height: 220px; }
.dm-workflow-banner__caption { left: 16px; bottom: 16px; padding: 11px 16px; }
.dm-workflow-card {
flex-direction: column;
padding: 36px 28px;
gap: 36px;
}
.dm-workflow-left { max-width: 280px; }
.dm-workflow-right { width: 100%; }
.dm-workflow-title { font-size: 28px; }
.dm-workflow-text-container { min-height: auto; }
}
`;