first commit
This commit is contained in:
30
src/components/sections/AboutCTA.tsx
Normal file
30
src/components/sections/AboutCTA.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AboutCTA() {
|
||||
return (
|
||||
<div className="we-container">
|
||||
<div className="we-cta reveal">
|
||||
<div className="we-cta-inner">
|
||||
<h2 className="we-cta-title">
|
||||
Ready to Start<br />
|
||||
<em>Your Journey?</em>
|
||||
</h2>
|
||||
<p className="we-cta-sub">
|
||||
Join our Women Entrepreneurship program and become part of <br />
|
||||
India's fastest-growing logistics network.
|
||||
</p>
|
||||
<div className="we-cta-btns">
|
||||
<Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
|
||||
Apply Now
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
96
src/components/sections/AboutHero.tsx
Normal file
96
src/components/sections/AboutHero.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from "react";
|
||||
|
||||
export default function AboutHero() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.about-us-hero {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-us-hero .about-us-hero-bg {
|
||||
min-height: fit-content;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-us-hero .e-con-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.about-us-hero-content {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about-us-hero-eyebrow {
|
||||
margin: 0 0 18px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.about-us-hero-title {
|
||||
margin: 0 0 22px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(44px, 8vw, 96px);
|
||||
font-weight: 900;
|
||||
line-height: 0.98;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about-us-hero-text {
|
||||
text-align: center;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(17px, 2vw, 22px);
|
||||
line-height: 1.65;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-us-hero-content {
|
||||
padding: 115px 20px 70px;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-63 miletruth-hero about-us-hero">
|
||||
<div className="elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="86f3204" data-element_type="container" data-e-type="container">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(hsla(0, 0%, 0%, 0.9), rgba(0, 0, 0, 0.9)), url('/images/about-bg.png')",
|
||||
backgroundSize: "cover",
|
||||
borderRadius: "20px"
|
||||
}}
|
||||
className="elementor-element elementor-element-0b7a484 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child about-us-hero-bg"
|
||||
data-id="0b7a484"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div className="e-con-inner">
|
||||
<div className="about-us-hero-content">
|
||||
<br /> <br />
|
||||
<h3 className="about-us-hero-title" style={{ color: "white", lineHeight: 1.2 }}>
|
||||
The Operators Building <br /> <span style={{ color: "#C01227" }}>Doormile</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
120
src/components/sections/BlogGrid.tsx
Normal file
120
src/components/sections/BlogGrid.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function BlogGrid() {
|
||||
const blogs = [
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "How AI Is Transforming Last-Mile EV Delivery",
|
||||
excerpt: "Machine learning and real-time data are reshaping how fleets plan, dispatch, and adapt — making every kilometre smarter than the last.",
|
||||
category: "Technology",
|
||||
image: "/images/blog-post-pic-17.png",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "The EV Paradox: Solving Range Anxiety for Urban Fleets",
|
||||
excerpt: "Electric vehicles promise sustainability, but battery constraints introduce a new routing challenge. Here's how MileTruth™ AI solves it before dispatch.",
|
||||
category: "EV Fleet",
|
||||
image: "/images/blog-post-pic-18-840x840.jpg",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "42% Less Distance: Insights from Our Hyderabad Hub",
|
||||
excerpt: "A detailed look at how Doormile's MileTruth routing engine delivered measurable efficiency gains — fewer vehicles, less fuel, and zero SLA misses.",
|
||||
category: "Case Study",
|
||||
image: "/images/blog-post-pic-15.png",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "MileTruth™ AI — 10 Stages to Smarter Dispatch",
|
||||
excerpt: "From order ingestion to final route output in under 45ms — a technical walkthrough of the ten-stage pipeline at the heart of our routing engine.",
|
||||
category: "MileTruth",
|
||||
image: "/images/blog-post-pic-31.png",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "Why Mathematical Precision Beats Heuristics in Routing",
|
||||
excerpt: "Most routing tools guess. We calculate. Powered by Google OR-Tools, MileTruth evaluates six parallel strategy universes to select the optimal route every time.",
|
||||
category: "Technology",
|
||||
image: "/images/blog-post-pic-14.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "Fleet Reduction Without Compromising Delivery Volume",
|
||||
excerpt: "Deploying 37% fewer vehicles while handling the same order volumes isn't a trade-off — it's the result of smarter routing intelligence applied at every dispatch.",
|
||||
category: "Fleet Management",
|
||||
image: "/images/blog-post-pic-8.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "Building a Greener City: The Future of Urban Logistics",
|
||||
excerpt: "Cities are demanding cleaner delivery. We explore how AI-powered EV fleets and optimised routing create a path to zero-emission last-mile logistics at city scale.",
|
||||
category: "Sustainability",
|
||||
image: "/images/blog-post-pic-6.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "How Doormile Maintains 99.9% SLA Compliance at Scale",
|
||||
excerpt: "Hitting SLA targets 99.9% of the time isn't luck — it's the product of ETA pre-validation, real-time rebalancing, and a routing engine built with delivery reliability as its first constraint.",
|
||||
category: "Operations",
|
||||
image: "/images/blog-post-pic-4.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
title: "Battery Simulation: The Secret to EV Route Pre-Validation",
|
||||
excerpt: "Before a single rider leaves the hub, MileTruth™ simulates every route against real charge capacity — eliminating mid-route failures and protecting your fulfillment rate.",
|
||||
category: "EV Fleet",
|
||||
image: "/images/blog-post-pic-3.jpeg",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="elementor-element elementor-element-c70681e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="c70681e" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-3dec5cf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3dec5cf" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-aa12479 elementor-widget elementor-widget-logico_blog_listing" data-id="aa12479" data-element_type="widget" data-e-type="widget" data-widget_type="logico_blog_listing.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="archive-listing">
|
||||
<div className="archive-listing-wrapper grid-listing columns-3">
|
||||
|
||||
{blogs.map((blog, i) => (
|
||||
<div key={i} className="standard-blog-item-wrapper post grid-item grid-blog-item-wrapper type-post status-publish format-standard has-post-thumbnail hentry">
|
||||
<div className="blog-item">
|
||||
<div className="post-meta-header">
|
||||
<span className="post-meta-item post-meta-item-date">{blog.date}</span>
|
||||
</div>
|
||||
<h5 className="post-title">
|
||||
<a href="#">{blog.title}</a>
|
||||
</h5>
|
||||
<div className="post-content">{blog.excerpt}</div>
|
||||
<div className="post-labels">
|
||||
<div className="post-categories">
|
||||
<a className="post-category-item" href="#">{blog.category}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="post-media-wrapper">
|
||||
<div className="post-media">
|
||||
<a href="#">
|
||||
<Image
|
||||
src={blog.image}
|
||||
alt={blog.title}
|
||||
width={400}
|
||||
height={280}
|
||||
style={{ objectFit: "cover", width: "100%", height: "auto" }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
src/components/sections/BlogsHero.tsx
Normal file
78
src/components/sections/BlogsHero.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function BlogsHero() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@media (max-width: 1024px) {
|
||||
.blog-hero-section {
|
||||
margin-top: 110px !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor elementor-2259 blog-hero-section">
|
||||
<div className="elementor-element elementor-element-8d7898b e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="8d7898b" data-element_type="container" data-e-type="container">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "url(/images/home2-banner-1.jpg)",
|
||||
backgroundPosition: "center center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
className="elementor-element elementor-element-830d027 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="830d027"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div className="e-con-inner">
|
||||
<div
|
||||
className="elementor-element elementor-element-069b2a1 elementor-absolute elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-logico_heading"
|
||||
data-id="069b2a1"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Articles</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-91be79f elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
|
||||
data-id="91be79f"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<nav className="breadcrumbs">
|
||||
<Link href="/">Home</Link>
|
||||
<span className="delimiter">/</span>
|
||||
<span className="current">Blogs</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-b9167b2 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block"
|
||||
data-id="b9167b2"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="block-decoration animation-enable block-decoration-style-1">
|
||||
<div className="block-decoration-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
151
src/components/sections/CompetitiveEdge.tsx
Normal file
151
src/components/sections/CompetitiveEdge.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import React from "react";
|
||||
|
||||
export default function CompetitiveEdge() {
|
||||
return (
|
||||
<section id="comparison" className="comparison-section">
|
||||
<div className="container">
|
||||
<div className="comparison-layout">
|
||||
{/* Comparison matrix Table */}
|
||||
<div className="table-wrapper">
|
||||
<table className="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Capability</th>
|
||||
<th className="col-highlight">Doormile</th>
|
||||
<th>Aggregators</th>
|
||||
<th>Local Couriers</th>
|
||||
<th>Software Platforms</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<rect x="1" y="3" width="15" height="13"></rect>
|
||||
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"></circle>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"></circle>
|
||||
</svg>
|
||||
Owned fleet control
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Yes</td>
|
||||
<td className="no-text">No</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
|
||||
<path d="M12 6v6l4 2"></path>
|
||||
</svg>
|
||||
Dynamic routing & dispatch
|
||||
</td>
|
||||
<td className="col-highlight"><span className="advanced-badge">✓ Advanced</span></td>
|
||||
<td className="partial-text">Basic</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Advanced</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
||||
</svg>
|
||||
EV-aware planning
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="no-text">No</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
Documentation & proof trail
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="partial-text">Partial</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Yes</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
Real-time tracking
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="partial-text">Yes</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Yes</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
Verified handling
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Partial</td>
|
||||
<td className="no-text">No</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h38s-3-2-3-9"></path>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
||||
</svg>
|
||||
Hyperlocal learning
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="no-text">No</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="22" y1="12" x2="18" y2="12"></line>
|
||||
<line x1="6" y1="12" x2="2" y2="12"></line>
|
||||
<line x1="12" y1="6" x2="12" y2="2"></line>
|
||||
<line x1="12" y1="22" x2="12" y2="18"></line>
|
||||
</svg>
|
||||
SLA accountability
|
||||
</td>
|
||||
<td className="col-highlight"><span className="advanced-badge">✓ High</span></td>
|
||||
<td className="no-text">Low</td>
|
||||
<td className="partial-text">Medium</td>
|
||||
<td className="no-text">Low</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Strategic Moat Side cards */}
|
||||
<div className="moat-panel">
|
||||
<div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="section-header">
|
||||
<span className="section-tag">Competitive Edge</span>
|
||||
<h3 className="logico-title" style={{ marginTop: "10px", marginBottom: "15px" }}>Where Doormile Sits And Why It Wins</h3>
|
||||
<p className="section-desc">A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
126
src/components/sections/ConnectedLogistics.tsx
Normal file
126
src/components/sections/ConnectedLogistics.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ConnectedLogistics() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
|
||||
{/* Image side */}
|
||||
<div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="96343ba" data-element_type="container">
|
||||
<div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<Image
|
||||
fetchPriority="high"
|
||||
priority
|
||||
width={578}
|
||||
height={790}
|
||||
src="/images/home2-pic-3.png"
|
||||
className="attachment-full size-full wp-image-4481"
|
||||
alt="Connected Logistics"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
objectFit: "cover",
|
||||
borderRadius: "25px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content side */}
|
||||
<div className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="71c3e1d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
|
||||
|
||||
<div className="elementor-element elementor-element-0136e6e elementor-widget elementor-widget-logico_heading" data-id="0136e6e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Connected Logistics /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3 className="logico-title">Smart logistics solutions we deliver for modern supply chains</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List items */}
|
||||
<div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Real-Time Visibility</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>See every shipment, every vehicle, every handoff—live. No blind spots.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-da9d310 elementor-widget elementor-widget-logico_heading" data-id="da9d310" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Dynamic Route Adjustment</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-3888a1e elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="3888a1e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>AI continuously optimizes routes based on traffic, weather, and real-world conditions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Proactive Delay Prevention</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Detect SLA risks hours before they become problems. Act, don't react.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Execution Intelligence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Learn from every delivery. Get smarter with every mile traveled.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-c0a45e4 elementor-widget elementor-widget-logico_button" data-id="c0a45e4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<Link href="/solutions" className="logico-alter-button">Explore more</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Absolutely Positioned Block Decoration Badge */}
|
||||
<div
|
||||
className="elementor-element elementor-element-0efc59e elementor-absolute elementor-widget elementor-widget-logico_block_decoration"
|
||||
data-id="0efc59e"
|
||||
data-element_type="widget"
|
||||
data-settings='{"_position":"absolute"}'
|
||||
data-widget_type="logico_block_decoration.default"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="block-decoration animation-enable block-decoration-style-1">
|
||||
<div className="block-decoration-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
282
src/components/sections/ContactForm.tsx
Normal file
282
src/components/sections/ContactForm.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ContactForm() {
|
||||
const socialIconSpacing = {
|
||||
"--grid-column-gap": "52px",
|
||||
"--grid-row-gap": "18px",
|
||||
columnGap: "52px",
|
||||
rowGap: "18px",
|
||||
} as React.CSSProperties;
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
});
|
||||
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.fullName || !formData.email || !formData.subject || !formData.message) {
|
||||
setFormStatus("error");
|
||||
return;
|
||||
}
|
||||
|
||||
setFormStatus("submitting");
|
||||
try {
|
||||
console.log("Contact form submitted:", formData);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
setFormStatus("success");
|
||||
setFormData({ fullName: "", email: "", subject: "", message: "" });
|
||||
} catch {
|
||||
setFormStatus("error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="elementor elementor-6585">
|
||||
<div className="elementor-element elementor-element-3cd920c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="3cd920c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-b29b8fc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b29b8fc" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-ef6fa6d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ef6fa6d" data-element_type="container" data-e-type="container">
|
||||
{/* Left Dark Panel */}
|
||||
<div className="elementor-element elementor-element-9990148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9990148" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-8899bdf elementor-absolute elementor-widget elementor-widget-image" data-id="8899bdf" data-element_type="widget" data-e-type="widget" data-settings="{"_position":"absolute"}" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<Image width={965} height={474} src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a0e7516 elementor-widget elementor-widget-logico_heading" data-id="a0e7516" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ get in touch /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-51cdf4f elementor-widget elementor-widget-logico_heading" data-id="51cdf4f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">
|
||||
We are always ready to help you and answer your questions
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-670d1b2 elementor-widget elementor-widget-text-editor" data-id="670d1b2" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Connecting businesses with fast, secure, smart deliveries.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-2631b42 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="2631b42" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Call Center</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Tel : +91 86886 97941</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Our Location</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-645be8d e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="645be8d" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>
|
||||
<a href="mailto:care@doormile.com">care@doormile.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Social network</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">Facebook</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-64ac94e" href="https://x.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">X</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">LinkedIn</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-b0d5e1f" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">YouTube</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right White Form Card */}
|
||||
<div className="elementor-element elementor-element-a5c503d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a5c503d" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="elementor-element elementor-element-535776a elementor-widget elementor-widget-logico_heading" data-id="535776a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Get in Touch</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-0e6fedf elementor-widget elementor-widget-logico_wpforms" data-id="0e6fedf" data-element_type="widget" data-e-type="widget" data-widget_type="logico_wpforms.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-wpforms-widget">
|
||||
<div className="wpforms-container wpforms-render-modern" id="wpforms-369-contact">
|
||||
<form id="wpforms-form-369-contact" className="wpforms-validate wpforms-form" onSubmit={handleSubmit}>
|
||||
<div className="wpforms-field-container" style={{ marginTop: "30px" }}>
|
||||
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
||||
<div className="logico-label-wrapper" >
|
||||
<div className="logico-label-placeholder" >
|
||||
<div className="logico-label-placeholder-text">Full name</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="contact-field-name" >Full name</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="contact-field-name"
|
||||
className="wpforms-field-large"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
||||
<div className="logico-label-wrapper">
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Email</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="contact-field-email">Email</label>
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
id="contact-field-email"
|
||||
className="wpforms-field-large"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
||||
<div className="logico-label-wrapper">
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Subject</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="contact-field-subject">Subject</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="contact-field-subject"
|
||||
className="wpforms-field-large"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field wpforms-field-wrapper logico-form-field" style={{ marginBottom: "20px" }}>
|
||||
<div className="logico-label-wrapper">
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Message</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="contact-field-message">Message</label>
|
||||
</div>
|
||||
<textarea
|
||||
id="contact-field-message"
|
||||
className="wpforms-field-large"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wpforms-submit-container" style={{ marginTop: "30px" }}>
|
||||
<button
|
||||
type="submit"
|
||||
id="wpforms-submit-369-contact"
|
||||
className="logico-alter-button wpforms-submit"
|
||||
disabled={formStatus === "submitting"}
|
||||
>
|
||||
{formStatus === "submitting" ? "Sending..." : "Send a message"}
|
||||
</button>
|
||||
{formStatus === "success" && (
|
||||
<div style={{ color: "#4caf50", marginTop: "10px", fontSize: "14px" }}>
|
||||
Message sent successfully!
|
||||
</div>
|
||||
)}
|
||||
{formStatus === "error" && (
|
||||
<div style={{ color: "#f44336", marginTop: "10px", fontSize: "14px" }}>
|
||||
Something went wrong. Please try again.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
src/components/sections/ContactMap.tsx
Normal file
24
src/components/sections/ContactMap.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
export default function ContactMap() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-7304a53 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="7304a53" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5a3eed4 elementor-widget elementor-widget-google_maps" data-id="5a3eed4" data-element_type="widget" data-e-type="widget" data-widget_type="google_maps.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-custom-embed" style={{ width: "100%", height: "450px" }}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.1918122409634!2d78.35579498480733!3d17.45053110831999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb93b8c5a049b3%3A0x6f4b5999fccad985!2sJayabheri%20Enclave%2C%20Gachibowli%2C%20Hyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1778663239768!5m2!1sen!2sin"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Doormile Location Map"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
src/components/sections/ContactsHero.tsx
Normal file
50
src/components/sections/ContactsHero.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ContactsHero() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-a9e42ed e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="a9e42ed" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5c0e23d e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="5c0e23d" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-401ea82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="401ea82" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-ea205b5 elementor-widget elementor-widget-logico_page_title_line" data-id="ea205b5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_page_title_line.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h1 className="page-title logico-title-h2">Contacts</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-3d13f28 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
|
||||
data-id="3d13f28"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<nav className="breadcrumbs">
|
||||
<Link href="/">Home</Link>
|
||||
<span className="delimiter">/</span>
|
||||
<span className="current">Contacts</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-e657a3d elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block"
|
||||
data-id="e657a3d"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="block-decoration animation-enable block-decoration-style-1">
|
||||
<div className="block-decoration-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
206
src/components/sections/EVLogisticSection.tsx
Normal file
206
src/components/sections/EVLogisticSection.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function EVLogisticSection() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(1);
|
||||
|
||||
const toggleAccordion = (index: number) => {
|
||||
setOpenIndex((prev) => (prev === index ? null : index));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="elementor-63 miletruth-hero about-us-hero" style={{ position: "relative", zIndex: 1 }}>
|
||||
<div
|
||||
style={{ marginBottom: "180px" }}
|
||||
className="elementor-element ev-log elementor-element-ead59d3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
|
||||
data-id="ead59d3"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-f35119c elementor-widget__width-initial elementor-absolute elementor-widget elementor-widget-image"
|
||||
data-id="f35119c"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<Image
|
||||
src="/images/ev.jpeg"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-56ecbb3 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="56ecbb3"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div className="e-con-inner">
|
||||
<div
|
||||
className="elementor-element elementor-element-47f8cbe e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="47f8cbe"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-cd6daaf elementor-widget elementor-widget-logico_heading"
|
||||
data-id="cd6daaf"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ features /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-1b3f232 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading"
|
||||
data-id="1b3f232"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Logistics Built for Electric Vehicles</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-9b7e9c9 elementor-widget__width-initial elementor-widget elementor-widget-accordion"
|
||||
data-id="9b7e9c9"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-accordion">
|
||||
|
||||
{/* Accordion 1 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 1 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 1}
|
||||
onClick={() => toggleAccordion(1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 1 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 1 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">01. Battery-First Planning</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 1 ? "block" : "none" }}
|
||||
>
|
||||
<p>Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 2 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 2 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 2}
|
||||
onClick={() => toggleAccordion(2)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 2 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 2 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">02. Energy-Aware Routing</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 2 ? "block" : "none" }}
|
||||
>
|
||||
<p>Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 3 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 3 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 3}
|
||||
onClick={() => toggleAccordion(3)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 3 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 3 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">03. Smart Charging Integration</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 3 ? "block" : "none" }}
|
||||
>
|
||||
<p>Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accordion 4 */}
|
||||
<div className="elementor-accordion-item">
|
||||
<div
|
||||
className={`elementor-tab-title ${openIndex === 4 ? "elementor-active" : ""}`}
|
||||
role="button"
|
||||
aria-expanded={openIndex === 4}
|
||||
onClick={() => toggleAccordion(4)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<span className="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span className="elementor-accordion-icon-closed" style={{ display: openIndex === 4 ? "none" : "inline" }}>
|
||||
<i className="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span className="elementor-accordion-icon-opened" style={{ display: openIndex === 4 ? "inline" : "none" }}>
|
||||
<i className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span className="elementor-accordion-title">04. Carbon Footprint Tracking</span>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-tab-content elementor-clearfix"
|
||||
role="region"
|
||||
style={{ display: openIndex === 4 ? "block" : "none" }}
|
||||
>
|
||||
<p>Real-time emissions monitoring and sustainability reports for every delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
src/components/sections/EVSection.tsx
Normal file
273
src/components/sections/EVSection.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function EVSection() {
|
||||
const [hasMounted, setHasMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setHasMounted(true);
|
||||
}, []);
|
||||
|
||||
const renderAnimatedText = () => {
|
||||
const lines = [
|
||||
{ text: "Built for Electric.", highlight: true },
|
||||
{ text: "Not Adapted.", highlight: false }
|
||||
];
|
||||
|
||||
return lines.map((line, lineIdx) => {
|
||||
const words = line.text.split(/\s+/);
|
||||
return (
|
||||
<div key={lineIdx} style={{ display: "block" }}>
|
||||
{words.map((word, wordIdx) => {
|
||||
const letters = word.split("");
|
||||
return (
|
||||
<span key={wordIdx} className="word" style={{ display: "inline-block", marginRight: "0.2em", whiteSpace: "nowrap" }}>
|
||||
{letters.map((letter, letterIdx) => {
|
||||
const delay = (lineIdx * 0.2) + (wordIdx * 0.1) + (letterIdx * 0.03);
|
||||
return (
|
||||
<span
|
||||
key={letterIdx}
|
||||
className={`letter ${hasMounted ? "animated" : ""}`}
|
||||
style={{
|
||||
["--delay" as any]: `${delay}s`,
|
||||
}}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{/* Non-breaking space */}
|
||||
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.logico-title .word {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
.letter {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
.letter.animated {
|
||||
animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* Parallax placeholder background */}
|
||||
<div
|
||||
className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="7da6646"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
data-settings="{"background_background":"classic"}"
|
||||
style={{
|
||||
backgroundPosition: "center center",
|
||||
backgroundImage: "url(/images/home4-banner-4.png)",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="elementor-element elementor-element-8b5d6e6 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8b5d6e6" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-1f766ea e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="1f766ea" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-3b61435 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3b61435" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="elementor-element elementor-element-c364d1c elementor-widget elementor-widget-text-editor" data-id="c364d1c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>01</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-239afbb elementor-widget elementor-widget-logico_heading" data-id="239afbb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h5 className="logico-title">EV Logistics</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Cleaner miles, lower costs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-5aea22e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5aea22e" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-b6e14bd e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b6e14bd" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
|
||||
|
||||
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ EV-Native Design /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading logico_heading_animation" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title" data-animate="true">
|
||||
{renderAnimatedText()}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image" data-id="1a450c2" data-element_type="widget" data-e-type="widget" data-settings="{"_position":"absolute"}" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img loading="lazy" decoding="async" width="965" height="474" src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="Map Grid" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Boxes */}
|
||||
<div className="elementor-element elementor-element-6b51278 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6b51278" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Battery-Aware Routing</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Battery level, health, and degradation are first-class inputs to route optimization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-e34beb2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e34beb2" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-27ba815 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="27ba815" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Charging Integration</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Seamlessly integrate charging stops without compromising delivery windows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Energy-Optimized Paths</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Factor in elevation, speed limits, and weather for maximum efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Predictable Operations</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
EVs become predictable assets, not operational risks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-e70d3b7 elementor-widget elementor-widget-logico_button" data-id="e70d3b7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<Link href="/solutions" className="logico-alter-button">Explore more</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
205
src/components/sections/HowItWorksHero.tsx
Normal file
205
src/components/sections/HowItWorksHero.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HowItWorksHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
setActiveSlide(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.howits-hero-custom-bg.elementor-repeater-item-3264830,
|
||||
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 40px) !important;
|
||||
max-width: none !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
height: 620px !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
padding-left: 48px !important;
|
||||
padding-right: 48px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 24px) !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
min-height: 560px !important;
|
||||
height: 560px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
min-height: 560px !important;
|
||||
padding-left: 22px !important;
|
||||
padding-right: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
|
||||
max-width: 100% !important;
|
||||
font-size: clamp(38px, 11vw, 48px) !important;
|
||||
line-height: 1.05 !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-content-slider-widget">
|
||||
<div className="content-slider-wrapper">
|
||||
<div className="content-slider-container">
|
||||
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
|
||||
|
||||
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", minHeight: "680px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 0 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
opacity: activeSlide === 0 ? 1 : 0,
|
||||
visibility: activeSlide === 0 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 0 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard howits-hero-custom-bg">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">One Journey. Complete<br />Control.</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>See how Doormile connects first, mid, and last mile into a seamless delivery experience powered by MileTruth™ AI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 1 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
opacity: activeSlide === 1 ? 1 : 0,
|
||||
visibility: activeSlide === 1 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 1 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard howits-hero-custom-bg">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">A New Freight<br />Experience</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>See how Doormile connects first, mid, and last mile into a seamless delivery experience powered by MileTruth™ AI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress indicators */}
|
||||
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
|
||||
<div className="slider-footer-content">
|
||||
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
/
|
||||
<span className="slider-progress-all">02</span>
|
||||
</div>
|
||||
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
type="button"
|
||||
role="button"
|
||||
className={`owl-dot ${activeSlide === 0 ? "active" : ""}`}
|
||||
onClick={() => handleDotClick(0)}
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="button"
|
||||
className={`owl-dot ${activeSlide === 1 ? "active" : ""}`}
|
||||
onClick={() => handleDotClick(1)}
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
150
src/components/sections/IndexHero.tsx
Normal file
150
src/components/sections/IndexHero.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function IndexHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
setActiveSlide(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-content-slider-widget">
|
||||
<div className="content-slider-wrapper">
|
||||
<div className="content-slider-container">
|
||||
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
|
||||
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 0 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
opacity: activeSlide === 0 ? 1 : 0,
|
||||
visibility: activeSlide === 0 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 0 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">ONE CONNECTED SYSTEM.<br />ONE PROMISE KEPT.</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Stop managing three separate logistics services. Doormile unifies first, mid and last mile into a single intelligent delivery system powered by MileTruth™ AI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 1 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
opacity: activeSlide === 1 ? 1 : 0,
|
||||
visibility: activeSlide === 1 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 1 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">AI-POWERED<br />CONNECTED LOGISTICS</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Behind every successful business is a strong supply chain. Logistics turns plans into reality.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation controls */}
|
||||
<div className="owl-nav">
|
||||
<button
|
||||
type="button"
|
||||
className="owl-next"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Next"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="owl-prev"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Previous"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Slider Progress Controls */}
|
||||
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
|
||||
<div className="slider-footer-content">
|
||||
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "35px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{ fontSize: "16px", fontWeight: 600, color: "#FFFFFF", marginBottom: "4px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
{" / "}
|
||||
<span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
|
||||
</div>
|
||||
{/* Progress Line */}
|
||||
<div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
left: activeSlide === 0 ? "0" : "50%",
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
background: "#c01227",
|
||||
transition: "left 0.3s ease"
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Dots are hidden to match production */}
|
||||
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "none" }}>
|
||||
<button type="button" className={`owl-dot ${activeSlide === 0 ? "active" : ""}`} onClick={() => handleDotClick(0)}><span></span></button>
|
||||
<button type="button" className={`owl-dot ${activeSlide === 1 ? "active" : ""}`} onClick={() => handleDotClick(1)}><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
226
src/components/sections/IndustrySolutions.tsx
Normal file
226
src/components/sections/IndustrySolutions.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function IndustrySolutions() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
|
||||
|
||||
<div className="elementor-element elementor-element-f64bd88 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f64bd88" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5ed2dbb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ed2dbb" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Industry Solutions /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="1487241" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Smart solutions built exclusively for your industry</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-4af73cb e-con-full elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4af73cb" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-46f2f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_button" data-id="46f2f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-6829276 e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="6829276" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* Card 1: FMCG */}
|
||||
<Link
|
||||
className="elementor-element elementor-element-b891c78 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="b891c78"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
data-settings="{"background_background":"classic"}"
|
||||
href="/solutions"
|
||||
style={{ textDecoration: "none", position: "relative" }}
|
||||
>
|
||||
<div className="elementor-element elementor-element-324d615 elementor-widget elementor-widget-image" data-id="324d615" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img loading="lazy" decoding="async" src="/images/tab-pic-1.jpeg" className="attachment-full size-full wp-image-4777" alt="FMCG Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "218/222", borderRadius: "20px 20px 0 0" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-210395f elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="210395f" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ae37a4f elementor-widget elementor-widget-logico_heading" data-id="ae37a4f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
<span className="title-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
FMCG
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-883bc91 elementor-widget elementor-widget-text-editor" data-id="883bc91" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>High volume, tight margins, zero tolerance for stockouts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover content list */}
|
||||
<div className="hover-list-content">
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">CHALLENGES</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>Unpredictable demand spikes</span></li>
|
||||
<li><span>Fresh product expiry constraints</span></li>
|
||||
<li><span>Multi-stop route complexity</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>AI-driven demand-responsive routing</span></li>
|
||||
<li><span>Freshness-aware delivery prioritization</span></li>
|
||||
<li><span>Dynamic batch optimization</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Card 2: Pharmaceutical */}
|
||||
<Link
|
||||
className="elementor-element elementor-element-9b933db e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="9b933db"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
data-settings="{"background_background":"classic"}"
|
||||
href="/solutions"
|
||||
style={{ textDecoration: "none", position: "relative" }}
|
||||
>
|
||||
<div className="elementor-element elementor-element-7d2d322 elementor-widget elementor-widget-image" data-id="7d2d322" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img loading="lazy" decoding="async" src="/images/tab-pic-2.jpeg" className="attachment-full size-full wp-image-4791" alt="Pharma Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "218/215", borderRadius: "20px 20px 0 0" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-df092c4 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="df092c4" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-4c372aa elementor-widget elementor-widget-logico_heading" data-id="4c372aa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
<span className="title-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
Pharmaceutical
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9f3d9b6 elementor-widget elementor-widget-text-editor" data-id="9f3d9b6" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Temperature-sensitive, compliance-critical, life-saving.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover content list */}
|
||||
<div className="hover-list-content">
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">CHALLENGES</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>Cold chain integrity requirements</span></li>
|
||||
<li><span>Regulatory compliance tracking</span></li>
|
||||
<li><span>Critical delivery time windows</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>Real-time temperature monitoring</span></li>
|
||||
<li><span>Chain-of-custody documentation</span></li>
|
||||
<li><span>Priority override for critical shipments</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Card 3: Enterprise & B2B */}
|
||||
<Link
|
||||
className="elementor-element elementor-element-280b0dc e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="280b0dc"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
data-settings="{"background_background":"classic"}"
|
||||
href="/solutions"
|
||||
style={{ textDecoration: "none", position: "relative" }}
|
||||
>
|
||||
<div className="elementor-element elementor-element-6421147 elementor-widget elementor-widget-image" data-id="6421147" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img loading="lazy" decoding="async" src="/images/tab-pic-3.jpeg" className="attachment-full size-full wp-image-4805" alt="Enterprise Logistics" style={{ width: "100%", height: "auto", objectFit: "cover", aspectRatio: "221/222", borderRadius: "20px 20px 0 0" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-89bf910 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="89bf910" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-92524cd elementor-widget elementor-widget-logico_heading" data-id="92524cd" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
<span className="title-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
Enterprise & B2B
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-dfc8e7c elementor-widget elementor-widget-text-editor" data-id="dfc8e7c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>High-value shipments with complex delivery requirements.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover content list */}
|
||||
<div className="hover-list-content">
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">CHALLENGES</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>Appointment scheduling coordination</span></li>
|
||||
<li><span>White-glove delivery standards</span></li>
|
||||
<li><span>Multi-location routing complexity</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="list-section">
|
||||
<h4 className="list-section-title">DOORMILE SOLUTIONS</h4>
|
||||
<ul className="hover-items-list">
|
||||
<li><span>Automated appointment optimization</span></li>
|
||||
<li><span>Service level guarantee tracking</span></li>
|
||||
<li><span>Enterprise integration APIs</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
200
src/components/sections/IntelligenceGrid.tsx
Normal file
200
src/components/sections/IntelligenceGrid.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React from "react";
|
||||
|
||||
export default function IntelligenceGrid() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container">
|
||||
<section id="hero" className="roadmap-hero-section">
|
||||
{/* Concentric crimson vector curves background */}
|
||||
<div className="crimson-arc-bg"></div>
|
||||
<div className="crimson-arc-bg inner"></div>
|
||||
|
||||
<div className="container">
|
||||
{/* Screen Header Bar */}
|
||||
<div className="screen-header-bar"></div>
|
||||
|
||||
{/* Content Titles */}
|
||||
<div className="vision-tag-top">VISION / 2030</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.roadmap-hero-section .intelligence-grid-title {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.roadmap-hero-section .intelligence-grid-title-highlight {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title intelligence-grid-title">The <span className="intelligence-grid-title-highlight">Intelligence Grid</span> Behind Every Urban Mile</h3>
|
||||
<p className="vision-main-subtitle">
|
||||
From Hyderabad EV pilot to nationwide AI logistics intelligence by 2030
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Timeline Track Widget */}
|
||||
<div className="roadmap-track-container">
|
||||
<span className="roadmap-track-label">ROADMAP TO 2030</span>
|
||||
<div className="timeline-horizontal-wrapper">
|
||||
<div className="timeline-horizontal-line"></div>
|
||||
<div className="timeline-horizontal-fill"></div>
|
||||
|
||||
{/* Nodes aligned above card columns */}
|
||||
<div className="node-dots-row">
|
||||
<div className="node-dot-item dot-active" style={{ left: "12.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-active" style={{ left: "37.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-active" style={{ left: "62.5%" }}>
|
||||
<div className="node-pulse-inner"></div>
|
||||
</div>
|
||||
<div className="node-dot-item dot-vision-active" style={{ left: "87.5%" }}>
|
||||
<div className="node-pulse-crown"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="roadmap-complete-pct">75% COMPLETE →</span>
|
||||
</div>
|
||||
|
||||
{/* 4-Column Card Grid Side-by-Side */}
|
||||
<div className="roadmap-grid-container">
|
||||
|
||||
{/* Card 1: 2026 */}
|
||||
<div className="roadmap-col-card" data-card="2026">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2026</span>
|
||||
<div className="card-icon-badge">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M4.5 16.5c-1.5 1.5-2.5 3.5-2.5 5.5C4 22 6 21 7.5 19.5" />
|
||||
<path d="M12 12l9-9-9 9z" />
|
||||
<path d="M12 12c-2.3 2.3-3.4 5.3-3.5 8.5l12-12c-3.2-.1-6.2-1.2-8.5-3.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill yellow">Pilot Phase</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Hyderabad Pilot</h5>
|
||||
<p className="card-text">
|
||||
Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
50-80 orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg>
|
||||
1 city
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
|
||||
10+ women partners
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2: 2027 */}
|
||||
<div className="roadmap-col-card" data-card="2027">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2027</span>
|
||||
<div className="card-icon-badge">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="16"></line>
|
||||
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill green">Multi-City</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Multi-City Scale</h5>
|
||||
<p className="card-text">
|
||||
Expand to Bengaluru and Chennai, securing key B2B enterprise traction.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
300-500 orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg>
|
||||
3 cities
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
50+ EVs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: 2028 */}
|
||||
<div className="roadmap-col-card" data-card="2028">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2028</span>
|
||||
<div className="card-icon-badge">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill blue">Platform</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>Platform Expansion</h5>
|
||||
<p className="card-text">
|
||||
Scale to 5+ cities. Launch developer API marketplace and Series A readiness.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
1,200+ orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg>
|
||||
5+ cities
|
||||
</div>
|
||||
<div className="card-stat-pill-mini">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
||||
API marketplace
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 4: 2030 */}
|
||||
<div className="roadmap-col-card glowing-vision-card" data-card="2030">
|
||||
<div className="card-top-row">
|
||||
<span className="year-num">2030</span>
|
||||
<div className="card-icon-badge translucent-white">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z" />
|
||||
<path d="M3 20h18" strokeWidth="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span className="phase-badge-pill white-pill">Vision State</span>
|
||||
<h5 className="card-heading" style={{ color: "white" }}>AI Pulse Layer</h5>
|
||||
<p className="card-text">
|
||||
Nationwide AI logistics grid reaching 15+ cities, empowering female micro-entrepreneurs.
|
||||
</p>
|
||||
<div className="card-pills-stack">
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
5,000+ orders/day
|
||||
</div>
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<span className="currency-symbol" style={{ marginRight: "4px" }}>Rs</span> 65 Cr+ revenue
|
||||
</div>
|
||||
<div className="card-stat-pill-mini translucent-crimson">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginRight: "4px" }}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
2,000+ women partners
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/components/sections/MarqueeTicker.tsx
Normal file
46
src/components/sections/MarqueeTicker.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
export default function MarqueeTicker() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-b62c0b3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="b62c0b3" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-592e9e8 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="592e9e8" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-ab41b28 elementor-widget elementor-widget-logico_marquee" data-id="ab41b28" data-element_type="widget" data-e-type="widget" data-widget_type="logico_marquee.default">
|
||||
<div className="elementor-widget-container">
|
||||
|
||||
{/* Custom smooth pure CSS scrolling Marquee */}
|
||||
<div className="logico-ticker-wrapper" style={{ overflow: "hidden", position: "relative", width: "100%" }}>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@keyframes cssMarquee {
|
||||
0% { transform: translate3d(0, 0, 0); }
|
||||
100% { transform: translate3d(-33.33%, 0, 0); }
|
||||
}
|
||||
.marquee-container-css {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: cssMarquee 25s linear infinite;
|
||||
}
|
||||
.marquee-container-css:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
`}} />
|
||||
<div className="marquee-container-css">
|
||||
{/* Repeat the item to ensure infinite seamless scrolling */}
|
||||
{[...Array(9)].map((_, i) => (
|
||||
<div key={i} className="ticker" style={{ display: "inline-flex", alignItems: "center", whiteSpace: "nowrap", paddingRight: "50px" }}>
|
||||
<span className="ticker-text">
|
||||
<p style={{ margin: 0, display: "inline" }}>30% More Cost Efficient</p>
|
||||
</span>
|
||||
<span className="separator" style={{ marginLeft: "25px", display: "inline-flex", alignItems: "center" }}>
|
||||
<i className="fontello icon-half-logo"></i>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
src/components/sections/MileTruthHero.tsx
Normal file
203
src/components/sections/MileTruthHero.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
interface CounterProps {
|
||||
from: number;
|
||||
to: number;
|
||||
duration?: number;
|
||||
decimals?: number;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
function Counter({ from, to, duration = 2000, decimals = 0, suffix = "" }: CounterProps) {
|
||||
const [value, setValue] = useState(from);
|
||||
|
||||
useEffect(() => {
|
||||
let startTimestamp: number | null = null;
|
||||
const step = (timestamp: number) => {
|
||||
if (!startTimestamp) startTimestamp = timestamp;
|
||||
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
||||
const currentValue = progress * (to - from) + from;
|
||||
setValue(currentValue);
|
||||
if (progress < 1) {
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
};
|
||||
window.requestAnimationFrame(step);
|
||||
}, [from, to, duration]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{value.toFixed(decimals)}
|
||||
{suffix}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MileTruthHero() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.miletruth-hero-container {
|
||||
position: relative;
|
||||
min-height: 680px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.miletruth-video-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
}
|
||||
.miletruth-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 1;
|
||||
}
|
||||
.miletruth-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.miletruth-hero-container {
|
||||
min-height: 520px;
|
||||
}
|
||||
.miletruth-hero-container .content-slider-item-heading {
|
||||
font-size: clamp(32px, 9vw, 42px) !important;
|
||||
line-height: 1.1 !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-63 miletruth-hero">
|
||||
<div className="elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="86f3204" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-0b7a484 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child miletruth-hero-container" data-id="0b7a484" data-element_type="container" data-e-type="container">
|
||||
{/* Background Video — falls back to static poster (no local mp4 yet) */}
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
poster="/images/home3-slide-1.jpg"
|
||||
className="miletruth-video-bg"
|
||||
/>
|
||||
|
||||
|
||||
{/* Dark tint overlay to maintain text legibility */}
|
||||
<div className="miletruth-overlay"></div>
|
||||
|
||||
<div className="e-con-inner miletruth-content">
|
||||
<div className="logico-content-slider-widget">
|
||||
<div className="content-slider-wrapper">
|
||||
<div className="content-slider-container">
|
||||
<div className="content-slider owl-carousel owl-theme">
|
||||
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
|
||||
<div className="slide-content" style={{ paddingLeft: 0, paddingRight: 0 }}>
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">The Only AI Built<br />Exclusively for Logistics</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Optimizes every stage of the delivery journey for maximum efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metric Stats Bar */}
|
||||
<div className="elementor-element elementor-element-8e5c81e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="8e5c81e" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-628123a e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="628123a" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* SLA Compliance */}
|
||||
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-counter">
|
||||
<div className="elementor-counter-title">SLA Compliance</div>
|
||||
<div className="elementor-counter-number-wrapper">
|
||||
<span className="elementor-counter-number">
|
||||
{mounted ? <Counter from={1} to={99.9} decimals={1} suffix=" %" /> : "1 %"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Distance Saved */}
|
||||
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-counter">
|
||||
<div className="elementor-counter-title">Distance Saved</div>
|
||||
<div className="elementor-counter-number-wrapper">
|
||||
<span className="elementor-counter-number">
|
||||
{mounted ? <Counter from={1} to={42} decimals={0} suffix=" %" /> : "1 %"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fewer Vehicles */}
|
||||
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-counter">
|
||||
<div className="elementor-counter-title">Fewer Vehicles</div>
|
||||
<div className="elementor-counter-number-wrapper">
|
||||
<span className="elementor-counter-number">
|
||||
{mounted ? <Counter from={1} to={37} decimals={0} suffix=" %" /> : "1 %"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dispatch Latency */}
|
||||
<div className="elementor-element elementor-element-a1cf3d4 elementor-widget elementor-widget-counter" data-id="a1cf3d4" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-counter">
|
||||
<div className="elementor-counter-title">Dispatch Latency</div>
|
||||
<div className="elementor-counter-number-wrapper">
|
||||
<span className="elementor-counter-number">
|
||||
{mounted ? <Counter from={1} to={45} decimals={0} suffix=" ms" /> : "1 ms"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
101
src/components/sections/Miles3.tsx
Normal file
101
src/components/sections/Miles3.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React from "react";
|
||||
import FirstMileIcon from "../icons/FirstMileIcon";
|
||||
import MidMileIcon from "../icons/MidMileIcon";
|
||||
import LastMileIcon from "../icons/LastMileIcon";
|
||||
|
||||
export default function Miles3() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-c36a604 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="c36a604" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-77d1265 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="77d1265" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-b147420 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b147420" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5bc90f3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5bc90f3" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-176d17f elementor-widget elementor-widget-logico_heading" data-id="176d17f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ How It Works /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-63a9de5 elementor-widget elementor-widget-logico_heading" data-id="63a9de5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Doormile connects first, mid, and last mile into a seamless delivery experience</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-4add972 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="4add972" data-element_type="container" data-e-type="container">
|
||||
{/* First Mile */}
|
||||
<div className="elementor-element elementor-element-e1670a9 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e1670a9" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-74687fb elementor-view-default elementor-widget elementor-widget-icon" data-id="74687fb" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<FirstMileIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-d310968 elementor-widget elementor-widget-logico_heading" data-id="d310968" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">First Mile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9989187 elementor-widget elementor-widget-text-editor" data-id="9989187" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Orders are picked up from warehouses with live tracking and quality checks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mid Mile */}
|
||||
<div className="elementor-element elementor-element-97a7e5b e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="97a7e5b" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fd9c57e elementor-view-default elementor-widget elementor-widget-icon" data-id="fd9c57e" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<MidMileIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-c582715 elementor-widget elementor-widget-logico_heading" data-id="c582715" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Mid Mile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-3ae1ce0 elementor-widget elementor-widget-text-editor" data-id="3ae1ce0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Smooth inter-city delivery through strategically located hubs with live tracking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last Mile */}
|
||||
<div className="elementor-element elementor-element-86fb82f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="86fb82f" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fbb1628 elementor-view-default elementor-widget elementor-widget-icon" data-id="fbb1628" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<LastMileIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-fb01b90 elementor-widget elementor-widget-logico_heading" data-id="fb01b90" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Last Mile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-1057c22 elementor-widget elementor-widget-text-editor" data-id="1057c22" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Packages are delivered to customers with real-time updates and proof of delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
src/components/sections/OurTeam.tsx
Normal file
97
src/components/sections/OurTeam.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function OurTeam() {
|
||||
const teamMembers = [
|
||||
{
|
||||
name: "Ratan Kumar",
|
||||
position: "COO & Operational Specialist",
|
||||
image: "/images/Investor.png",
|
||||
},
|
||||
{
|
||||
name: "Fazul Ilahi",
|
||||
position: "CTO & Technology Specialist",
|
||||
image: "/images/Fazul.png",
|
||||
},
|
||||
{
|
||||
name: "Parthiban",
|
||||
position: "CGO & Growth Specialist",
|
||||
image: "/images/Parthi.png",
|
||||
},
|
||||
{
|
||||
name: "Aravinth",
|
||||
position: "CFO & Finance Specialist",
|
||||
image: "/images/Aravinth.png",
|
||||
},
|
||||
{
|
||||
name: "Suriya Kumar",
|
||||
position: "Engineering Head & AI Specialist",
|
||||
image: "/images/Suriya.png",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="elementor-element elementor-element-c2c601a e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="c2c601a" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-3306a27 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3306a27" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/Team /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ alignSelf: "flex-start", width: "100%" }} className="elementor-element elementor-element-c46350e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="c46350e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title" style={{ textAlign: "left" }}>Meet our best crew</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-ac909e5 elementor-widget elementor-widget-logico_team_listing" data-id="ac909e5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_team_listing.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-team-listing-widget">
|
||||
<div className="archive-listing">
|
||||
<div className="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
|
||||
|
||||
{teamMembers.map((member, i) => (
|
||||
<div key={i} className="team-item-wrapper post-2866 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div className="team-item">
|
||||
<div className="team-item-media">
|
||||
<div className="post-media">
|
||||
<a href="#">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
width={300}
|
||||
height={300}
|
||||
style={{ objectFit: "cover", width: "100%", height: "auto" }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team-item-content">
|
||||
<div className="post-title"><a href="#">{member.name}</a></div>
|
||||
<div className="team-item-position" dangerouslySetInnerHTML={{ __html: member.position }}></div>
|
||||
<div className="team-item-socials">
|
||||
<ul className="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" rel="noreferrer" className="fab fa-facebook-f"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" rel="noreferrer" className="fab fa-x-twitter"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" rel="noreferrer" className="fab fa-linkedin-in"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" rel="noreferrer" className="fab fa-youtube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
432
src/components/sections/SolutionCard1.tsx
Normal file
432
src/components/sections/SolutionCard1.tsx
Normal file
@@ -0,0 +1,432 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function SolutionCard1() {
|
||||
const [activeTabFmcg, setActiveTabFmcg] = useState<"challenges" | "solutions">("challenges");
|
||||
const [activeTabPharma, setActiveTabPharma] = useState<"challenges" | "solutions">("challenges");
|
||||
const [activeTabB2b, setActiveTabB2b] = useState<"challenges" | "solutions">("challenges");
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Alternate tabs style: full-width blue tabs, larger size and font */
|
||||
.solution-freight-tabs-alt {
|
||||
width: 100%;
|
||||
margin: 18px 0 28px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* Centered, non-full-width tabs */
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__nav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
width: auto;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: linear-gradient(180deg, #f9ccd1, #f9ccd1);
|
||||
color: #111;
|
||||
padding: 12px 36px;
|
||||
display: inline-block;
|
||||
min-width: 180px;
|
||||
text-align: center;
|
||||
border-radius: 6px 6px 0 0;
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
box-shadow: none;
|
||||
transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button h6 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button:hover {
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(180deg, #f9ccd1, #f9ccd1);
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button.active {
|
||||
background: #C01227;
|
||||
color: #ffffff;
|
||||
border-color: #C01227;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__content {
|
||||
margin-top: 2px;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-top: none;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
background: #ffffff00;
|
||||
max-width: 620px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .point-box li::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #C01227;
|
||||
left: 6px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button {
|
||||
padding: 10px 18px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__content {
|
||||
max-width: 100%;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button {
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.solution-freight-tabs-alt .solution-freight-tabs__button h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.solution-freight-tabs__button {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.point-box li {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.solution-freight-tabs__button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.solution-freight-tabs__panel p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.point-box li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Point Box List Styling */
|
||||
.point-box {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.point-box li {
|
||||
position: relative;
|
||||
margin: 0 0 20px 0;
|
||||
padding-left: 32px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.point-box li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.point-box li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
color: #C01227;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.point-box li.spacer {
|
||||
height: 12px;
|
||||
margin: 10px 0 0;
|
||||
padding-left: 32px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.point-box li.spacer::before {
|
||||
content: none;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-61">
|
||||
|
||||
{/* FMCG Section */}
|
||||
<div style={{ marginTop: "0px" }} className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child elementor-image-section" data-id="96343ba" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default" style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div className="elementor-widget-container" style={{ margin: 0, width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<Image
|
||||
src="/images/tab-pic-1-solution.jpeg"
|
||||
alt="FMCG Solutions"
|
||||
width={578}
|
||||
height={790}
|
||||
priority
|
||||
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child section-2-content" data-id="71c3e1d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
|
||||
<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={{ margin: 0 }}>
|
||||
<h3 className="logico-title">FMCG</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container" style={{ margin: 0, fontSize: "20px", lineHeight: 1.7 }}>
|
||||
<p>FMCG logistics demands speed, precision, and continuous fulfillment across high-volume delivery networks. Businesses must balance tight delivery timelines, inventory movement, and operational efficiency without compromising product availability.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FMCG Tabs */}
|
||||
<div className="solution-freight-tabs-alt">
|
||||
<div className="solution-freight-tabs__nav" role="tablist" aria-label="FMCG Details">
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabFmcg === "challenges" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabFmcg === "challenges"}
|
||||
onClick={() => setActiveTabFmcg("challenges")}
|
||||
>
|
||||
<h6>Challenges</h6>
|
||||
</button>
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabFmcg === "solutions" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabFmcg === "solutions"}
|
||||
onClick={() => setActiveTabFmcg("solutions")}
|
||||
>
|
||||
<h6>Solutions</h6>
|
||||
</button>
|
||||
</div>
|
||||
<div className="solution-freight-tabs__content">
|
||||
{activeTabFmcg === "challenges" ? (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>Unpredictable demand spikes create delivery pressure and reduce operational efficiency during peak periods.</li>
|
||||
<li>Fresh product expiry constraints require faster, precisely timed deliveries to maintain product quality.</li>
|
||||
<li>Multi-stop route complexity increases travel time, operational costs, and delivery coordination challenges.</li>
|
||||
<li>Inventory stockout risks increase when delivery delays disrupt fast-moving product distribution.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>AI-driven demand-responsive routing adapts delivery plans instantly based on real-time order demand.</li>
|
||||
<li>Freshness-aware delivery prioritization ensures perishable products are delivered at the right time.</li>
|
||||
<li>Dynamic batch optimization intelligently groups orders to maximize delivery efficiency and reduce costs.</li>
|
||||
<li>Real-time inventory visibility helps prevent stockouts and improves fulfillment accuracy across delivery zones.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pharma Section */}
|
||||
<div style={{ marginTop: "20px" }} className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child elementor-image-section" data-id="96343ba" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default" style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div className="elementor-widget-container" style={{ margin: 0, width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<Image
|
||||
src="/images/tab-pic-2-solution.jpeg"
|
||||
alt="Pharma Solutions"
|
||||
width={578}
|
||||
height={790}
|
||||
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ paddingRight: "60px", paddingLeft: "0px" }} className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="71c3e1d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
|
||||
<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={{ margin: 0 }}>
|
||||
<h3 className="logico-title">Pharma</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container" style={{ margin: 0, fontSize: "20px", lineHeight: 1.7 }}>
|
||||
<p>Pharma logistics requires precision, compliance, and real-time monitoring to ensure every shipment reaches safely and on time. From temperature-sensitive medicines to emergency deliveries, operational reliability is critical at every stage.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pharma Tabs */}
|
||||
<div className="solution-freight-tabs-alt">
|
||||
<div className="solution-freight-tabs__nav" role="tablist" aria-label="Pharma Details">
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabPharma === "challenges" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabPharma === "challenges"}
|
||||
onClick={() => setActiveTabPharma("challenges")}
|
||||
>
|
||||
<h6>Challenges</h6>
|
||||
</button>
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabPharma === "solutions" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabPharma === "solutions"}
|
||||
onClick={() => setActiveTabPharma("solutions")}
|
||||
>
|
||||
<h6>Solutions</h6>
|
||||
</button>
|
||||
</div>
|
||||
<div className="solution-freight-tabs__content">
|
||||
{activeTabPharma === "challenges" ? (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>Cold chain integrity requirements demand precise temperature-controlled delivery management throughout transit.</li>
|
||||
<li>Regulatory compliance tracking ensures every delivery meets industry standards and operational guidelines.</li>
|
||||
<li>Critical delivery time windows require highly accurate scheduling and real-time route coordination.</li>
|
||||
<li>Emergency and high-priority medical shipments require instant dispatch coordination and zero-delay execution.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>Real-time temperature monitoring ensures sensitive shipments remain within safe delivery conditions at all times.</li>
|
||||
<li>Chain-of-custody documentation provides complete shipment visibility and compliance tracking throughout transit.</li>
|
||||
<li>Priority override for critical shipments enables faster response and immediate routing for urgent deliveries.</li>
|
||||
<li>Automated compliance alerts help teams proactively identify temperature deviations and delivery risks in real time.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise & B2B Section */}
|
||||
<div style={{ marginTop: "20px" }} className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child elementor-image-section" data-id="96343ba" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default" style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div className="elementor-widget-container" style={{ margin: 0, width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<Image
|
||||
src="/images/tab-pic-3-solution.jpeg"
|
||||
alt="Enterprise & B2B Solutions"
|
||||
width={578}
|
||||
height={790}
|
||||
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child section-2-content" data-id="71c3e1d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
|
||||
<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={{ margin: 0 }}>
|
||||
<h3 className="logico-title">Enterprise & B2B</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container" style={{ margin: 0, fontSize: "20px", lineHeight: 1.7 }}>
|
||||
<p>Enterprise and B2B logistics require precision, coordination, and reliability to manage high-value shipments at scale. Complex delivery expectations, appointment scheduling, and service-level commitments demand intelligent operational control.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise & B2B Tabs */}
|
||||
<div className="solution-freight-tabs-alt">
|
||||
<div className="solution-freight-tabs__nav" role="tablist" aria-label="B2B Details">
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabB2b === "challenges" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabB2b === "challenges"}
|
||||
onClick={() => setActiveTabB2b("challenges")}
|
||||
>
|
||||
<h6>Challenges</h6>
|
||||
</button>
|
||||
<button
|
||||
className={`solution-freight-tabs__button ${activeTabB2b === "solutions" ? "active" : ""}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTabB2b === "solutions"}
|
||||
onClick={() => setActiveTabB2b("solutions")}
|
||||
>
|
||||
<h6>Solutions</h6>
|
||||
</button>
|
||||
</div>
|
||||
<div className="solution-freight-tabs__content">
|
||||
{activeTabB2b === "challenges" ? (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>Appointment scheduling coordination requires precise timing and seamless delivery planning across multiple customer locations.</li>
|
||||
<li>White-glove delivery standards demand high-quality handling, accuracy, and premium customer service execution.</li>
|
||||
<li>Multi-location routing complexity increases operational challenges in managing efficient large-scale deliveries.</li>
|
||||
<li>Strict SLA commitments increase pressure on teams to maintain timely and error-free deliveries across multiple locations.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="solution-freight-tabs__panel active" role="tabpanel">
|
||||
<ul className="point-box">
|
||||
<li>Automated appointment optimization streamlines delivery scheduling for faster and more efficient operations.</li>
|
||||
<li>Service level guarantee tracking ensures every delivery meets committed SLA and customer expectations.</li>
|
||||
<li>Enterprise integration APIs enable seamless connectivity across logistics, warehouse, and business systems.</li>
|
||||
<li>Real-time SLA monitoring helps teams proactively manage delays and maintain enterprise delivery commitments.</li>
|
||||
<li className="spacer" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
204
src/components/sections/SolutionsHero.tsx
Normal file
204
src/components/sections/SolutionsHero.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
export default function SolutionsHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleDotClick = (index: number) => {
|
||||
setActiveSlide(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.howits-hero-custom-bg.elementor-repeater-item-3264830,
|
||||
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 40px) !important;
|
||||
max-width: none !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
height: 620px !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
padding-left: 48px !important;
|
||||
padding-right: 48px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 24px) !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
min-height: 560px !important;
|
||||
height: 560px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
min-height: 560px !important;
|
||||
padding-left: 22px !important;
|
||||
padding-right: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
|
||||
max-width: 100% !important;
|
||||
font-size: clamp(38px, 11vw, 48px) !important;
|
||||
line-height: 1.05 !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-content-slider-widget">
|
||||
<div className="content-slider-wrapper">
|
||||
<div className="content-slider-container">
|
||||
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
|
||||
|
||||
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", minHeight: "680px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 0 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
opacity: activeSlide === 0 ? 1 : 0,
|
||||
visibility: activeSlide === 0 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 0 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard howits-hero-custom-bg">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">Solutions for Every Industry</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Discover how Doormile's connected logistics platform serves diverse industries with tailored solutions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<div
|
||||
className={`owl-item ${activeSlide === 1 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
opacity: activeSlide === 1 ? 1 : 0,
|
||||
visibility: activeSlide === 1 ? "visible" : "hidden",
|
||||
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
|
||||
zIndex: activeSlide === 1 ? 2 : 1
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard howits-hero-custom-bg">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">One Platform. All Verticals.</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Doormile adapts to the unique challenges of your vertical—not the other way around.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress indicators */}
|
||||
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
|
||||
<div className="slider-footer-content">
|
||||
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
/
|
||||
<span className="slider-progress-all">02</span>
|
||||
</div>
|
||||
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
type="button"
|
||||
role="button"
|
||||
className={`owl-dot ${activeSlide === 0 ? "active" : ""}`}
|
||||
onClick={() => handleDotClick(0)}
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="button"
|
||||
className={`owl-dot ${activeSlide === 1 ? "active" : ""}`}
|
||||
onClick={() => handleDotClick(1)}
|
||||
>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
115
src/components/sections/StatsBar.tsx
Normal file
115
src/components/sections/StatsBar.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function StatsBar() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-9b26234 e-con-full e-grid cut-corner-no sticky-container-off e-con e-parent" data-id="9b26234" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* Stat Card 1 */}
|
||||
<div className="elementor-element elementor-element-ca6bc63 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="ca6bc63" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-cc55905 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="cc55905" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-3fb5639 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="3fb5639" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
99.2% <br />
|
||||
<span style={{ fontSize: "20px" }}>On-Time Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-94c3ff1 elementor-widget elementor-widget-logico_button" data-id="94c3ff1" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<Link href="/solutions" className="logico-small-button">
|
||||
Connected Miles
|
||||
<svg viewBox="0 0 13 20">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Card 2 */}
|
||||
<div className="elementor-element elementor-element-4c0903b e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="4c0903b" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-c8adeeb elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="c8adeeb" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-5e64d7b elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="5e64d7b" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
3x Faster <br />
|
||||
<span style={{ fontSize: "20px" }}>Faster Response</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-20db156 elementor-widget elementor-widget-logico_button" data-id="20db156" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<Link href="/miletruth" className="logico-small-button">
|
||||
MileTruth™ AI
|
||||
<svg viewBox="0 0 13 20">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Card 3 */}
|
||||
<div className="elementor-element elementor-element-f003242 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="f003242" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-d58ef3c elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="d58ef3c" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-d00253e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="d00253e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">
|
||||
40% <br />
|
||||
<span style={{ fontSize: "20px" }}>Cost Reduction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-3481e66 elementor-widget elementor-widget-logico_button" data-id="3481e66" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<Link href="/solutions" className="logico-small-button">
|
||||
SLA Protection
|
||||
<svg viewBox="0 0 13 20">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
148
src/components/sections/TheDoormileWay.tsx
Normal file
148
src/components/sections/TheDoormileWay.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import React from "react";
|
||||
|
||||
export default function TheDoormileWay() {
|
||||
return (
|
||||
<div className="elementor-61">
|
||||
{/* Approach title container */}
|
||||
<div className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="88745f4" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-343b363 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="343b363" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Doormile Approach /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">The Doormile Way</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-4c3e632 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4c3e632" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5ba6bbf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ba6bbf" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9363070 elementor-widget elementor-widget-logico_heading" data-id="9363070" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title"> Smarter, Faster, Connected Logistics</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-e7609a5 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e7609a5" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-c134b96 elementor-widget elementor-widget-text-editor" data-id="c134b96" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>
|
||||
<strong>
|
||||
We connect first mile and last mile into one seamless system, reducing delays and improving efficiency. With real-time tracking and digital workflows,
|
||||
<br /> every delivery is faster, reliable, and fully transparent.
|
||||
</strong>
|
||||
</p>
|
||||
<p>Seamless logistics powered by real-time tracking, digital processes, and reliable delivery execution.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid of features */}
|
||||
<div className="elementor-element elementor-element-5041fcc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="5041fcc" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-2d7c3ee e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2d7c3ee" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* Feature 1 */}
|
||||
<div className="elementor-element elementor-element-d11b050 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d11b050" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-3a6f50f elementor-view-default elementor-widget elementor-widget-icon" data-id="3a6f50f" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-light-delivery"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-1025248 elementor-widget elementor-widget-logico_heading" data-id="1025248" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">End-to-End Protection</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-c7c19bd elementor-widget elementor-widget-text-editor" data-id="c7c19bd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>End-to-end visibility ensures every shipment stays secure and on schedule.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="elementor-element elementor-element-2c82e54 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="2c82e54" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-f51735e elementor-view-default elementor-widget elementor-widget-icon" data-id="f51735e" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-light-container"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-c682633 elementor-widget elementor-widget-logico_heading" data-id="c682633" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Proactive delay prevention</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-74d14e3 elementor-widget elementor-widget-text-editor" data-id="74d14e3" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Real-time monitoring helps prevent delays before they impact deliveries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="elementor-element elementor-element-08b9b20 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="08b9b20" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-612c459 elementor-view-default elementor-widget elementor-widget-icon" data-id="612c459" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-light-directions"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-aa49275 elementor-widget elementor-widget-logico_heading" data-id="aa49275" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Single owner, single promise</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-74cfdf7 elementor-widget elementor-widget-text-editor" data-id="74cfdf7" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>One unified system manages the entire delivery process seamlessly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 4 */}
|
||||
<div className="elementor-element elementor-element-04989ee e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="04989ee" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-11a657e elementor-view-default elementor-widget elementor-widget-icon" data-id="11a657e" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-wrapper">
|
||||
<div className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-light-storage"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-b317d31 elementor-widget elementor-widget-logico_heading" data-id="b317d31" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Dynamic AI-driven adjustments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-8fe5662 elementor-widget elementor-widget-text-editor" data-id="8fe5662" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>AI-powered routing adapts instantly to improve speed and efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
src/components/sections/TheProblem.tsx
Normal file
106
src/components/sections/TheProblem.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import React from "react";
|
||||
|
||||
export default function TheProblem() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-30fd9d1 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent section-shrink-custom" data-id="30fd9d1" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-03db5d7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="03db5d7" data-element_type="container" data-e-type="container">
|
||||
|
||||
<div className="elementor-element elementor-element-3fe4ca3 elementor-widget elementor-widget-logico_heading" data-id="3fe4ca3" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ The Problem /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-ffd1f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="ffd1f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Fragmented Logistics is Broken</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid of Problem boxes */}
|
||||
<div className="elementor-element elementor-element-e09c20e e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="e09c20e" data-element_type="container" data-e-type="container">
|
||||
|
||||
{/* Box 1 */}
|
||||
<div className="elementor-element elementor-element-81a7690 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="81a7690" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-air-delivery"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>73%</p>
|
||||
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>of delays happen at handoffs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Box 2 */}
|
||||
<div className="elementor-element elementor-element-0f4aa27 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0f4aa27" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-container"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>3x</p>
|
||||
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>higher risk of missed SLAs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Box 3 */}
|
||||
<div className="elementor-element elementor-element-6cfd203 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6cfd203" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-trolley"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>2.5x</p>
|
||||
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>more time spent on coordination</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Box 4 */}
|
||||
<div className="elementor-element elementor-element-0d343e1 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0d343e1" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-supply-chain"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>28%</p>
|
||||
<span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>increase in operational costs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
201
src/components/sections/WomenSection.tsx
Normal file
201
src/components/sections/WomenSection.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function WomenSection() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container">
|
||||
<div
|
||||
className="elementor-element elementor-element-13a7637 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block"
|
||||
data-id="13a7637"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="block-decoration animation-enable block-decoration-style-1">
|
||||
<div className="block-decoration-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ backgroundImage: "url(/images/bg-header-women.png)" }}
|
||||
className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="7da6646"
|
||||
data-element_type="container"
|
||||
data-e-type="container"
|
||||
/>
|
||||
|
||||
<div className="elementor-element elementor-element-8b5d6e6 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8b5d6e6" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-1f766ea e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="1f766ea" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-3b61435 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3b61435" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="elementor-element elementor-element-c364d1c elementor-widget elementor-widget-text-editor" data-id="c364d1c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>01</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-239afbb elementor-widget elementor-widget-logico_heading" data-id="239afbb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h5 className="logico-title">Empowering Women</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Doormile empowers women in last-mile delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-5aea22e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5aea22e" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="elementor-element elementor-element-46b9ffa elementor-widget elementor-widget-logico_button" data-id="46b9ffa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<a href="#" className="logico-small-button">
|
||||
Explore more
|
||||
<svg viewBox="0 0 13 20">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-b6e14bd e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b6e14bd" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Success Stories /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Women Leading the Way</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<Image
|
||||
src="/images/bg-map-women.png"
|
||||
alt="Women Map"
|
||||
width={626}
|
||||
height={692}
|
||||
style={{ maxWidth: "100%", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
|
||||
<div
|
||||
className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image"
|
||||
data-id="1a450c2"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<Image
|
||||
src="/images/bg-map.png"
|
||||
alt="World Map"
|
||||
width={965}
|
||||
height={474}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 1 */}
|
||||
<div className="elementor-element elementor-element-6b51278 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="6b51278" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Women Entrepreneurship</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Empowering women to lead, manage, and grow in modern logistics operations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-e34beb2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e34beb2" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="elementor-element elementor-element-27ba815 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="27ba815" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Leadership in Logistics</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Creating opportunities for women to drive innovation in last-mile delivery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Stronger Together</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Building a future where women power smarter, faster, and reliable logistics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
173
src/components/sections/Workflow2.tsx
Normal file
173
src/components/sections/Workflow2.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function Workflow2() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
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",
|
||||
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",
|
||||
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;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<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-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>
|
||||
</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-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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
173
src/components/sections/Workflow3.tsx
Normal file
173
src/components/sections/Workflow3.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user