update miletruth page
This commit is contained in:
@@ -158,10 +158,6 @@ export default function BlogGrid() {
|
||||
color: #64748b !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 0 24px 0 !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 3 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
text-transform: none !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,17 @@ import Link from "next/link";
|
||||
export default function BlogsHero() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.blogs-hero-title {
|
||||
color: #ffffff !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
font-size: clamp(34px, 5.5vw, 68px) !important;
|
||||
font-weight: 850 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: -1.5px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
`}} />
|
||||
<div className="custom-standard-hero-container">
|
||||
<div
|
||||
style={{
|
||||
@@ -18,7 +29,7 @@ export default function BlogsHero() {
|
||||
|
||||
{/* Title / Heading for Blogs */}
|
||||
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
|
||||
<h1 style={{ fontFamily: "var(--font-manrope), sans-serif", fontSize: "clamp(34px, 5.5vw, 68px)", fontWeight: 850, textTransform: "uppercase", letterSpacing: "-1.5px", margin: 0 }}>
|
||||
<h1 className="blogs-hero-title">
|
||||
Our <span style={{ color: "#C01227" }}>Blogs</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -74,7 +74,15 @@ export default function IndexHero() {
|
||||
zIndex: activeSlide === 0 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
|
||||
<div
|
||||
className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard"
|
||||
style={{
|
||||
backgroundImage: "url('/images/home-bg-1.png')",
|
||||
backgroundPosition: "center center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
>
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
@@ -107,7 +115,15 @@ export default function IndexHero() {
|
||||
zIndex: activeSlide === 1 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
|
||||
<div
|
||||
className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard"
|
||||
style={{
|
||||
backgroundImage: "url('/images/home-bg-1.png')",
|
||||
backgroundPosition: "center center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
>
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
|
||||
@@ -1,170 +1,261 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
export default function Workflow2() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
title: "Innovation",
|
||||
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",
|
||||
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",
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
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-section" aria-label="Doormile Innovation Workflow">
|
||||
<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">
|
||||
{/* Top-Left Chevron Outline (Low Opacity) */}
|
||||
<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"
|
||||
/>
|
||||
{/* Bottom-Right Chevron Outline (High Opacity) */}
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<Image
|
||||
width={1733}
|
||||
height={773}
|
||||
src="/images/miletruth-2.png"
|
||||
className="attachment-full size-full wp-image-5026"
|
||||
alt="Workflow 2"
|
||||
/>
|
||||
<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 }}>
|
||||
Our Competitive Edge
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Column: Quotes & Text Content */}
|
||||
<div className="dm-workflow-right">
|
||||
{/* Slanted red quotes block */}
|
||||
<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>
|
||||
|
||||
{/* Heading */}
|
||||
<h3 className="dm-workflow-title">
|
||||
{slides[activeSlide].title}
|
||||
</h3>
|
||||
|
||||
{/* Slide Paragraph with premium fade-in transition */}
|
||||
<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="{"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">
|
||||
<Image
|
||||
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-2" 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>
|
||||
{/* Right-aligned Navigation (Counter + Indication lines) */}
|
||||
<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 = `
|
||||
.dm-workflow-section {
|
||||
max-width: 1700px;
|
||||
margin: 20px auto;
|
||||
padding: 0 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dm-workflow-card {
|
||||
position: relative;
|
||||
background: #181818;
|
||||
border-radius: 50px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow:
|
||||
0 10px 40px -10px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
padding: 40px 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Left Column - Graphic */
|
||||
.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));
|
||||
}
|
||||
|
||||
/* Right Column - Text & Slide Content */
|
||||
.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; /* Prevent layout shift when swapping slide texts */
|
||||
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;
|
||||
}
|
||||
|
||||
/* Navigation footer */
|
||||
.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 design */
|
||||
@media (max-width: 1024px) {
|
||||
.dm-workflow-card {
|
||||
padding: 50px 50px;
|
||||
gap: 50px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.dm-workflow-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dm-workflow-card {
|
||||
flex-direction: column;
|
||||
padding: 40px 30px;
|
||||
gap: 40px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.dm-workflow-left {
|
||||
max-width: 280px;
|
||||
}
|
||||
.dm-workflow-right {
|
||||
width: 100%;
|
||||
}
|
||||
.dm-workflow-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
.dm-workflow-text-container {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user