fix how to work , about,blog
This commit is contained in:
@@ -4,93 +4,47 @@ 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);
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
color: #fff !important;
|
||||
padding: 60px 40px !important;
|
||||
z-index: 2;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
margin: 0 !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
font-size: clamp(34px, 5.5vw, 68px) !important;
|
||||
font-weight: 850 !important;
|
||||
line-height: 1.1 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: -1.5px !important;
|
||||
color: #ffffff !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<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 className="custom-standard-hero-container">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%), url('/images/about-bg.png')"
|
||||
}}
|
||||
className="custom-standard-hero-card"
|
||||
>
|
||||
<div className="about-us-hero-content">
|
||||
<h3 className="about-us-hero-title">
|
||||
The Operators Building <br /> <span style={{ color: "#C01227" }}>Doormile</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,66 +1,67 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function BlogGrid() {
|
||||
const blogs = [
|
||||
{
|
||||
date: "Apr.06/2025",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
date: "Apl.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",
|
||||
@@ -70,43 +71,175 @@ export default function BlogGrid() {
|
||||
|
||||
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">
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.custom-blog-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: 40px !important;
|
||||
width: 100% !important;
|
||||
max-width: 1200px !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 40px 20px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.custom-blog-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.custom-blog-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-blog-card {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
height: 100% !important;
|
||||
background: #ffffff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
border-radius: 28px !important;
|
||||
padding: 28px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.custom-blog-card:hover {
|
||||
transform: translateY(-8px) !important;
|
||||
box-shadow: 0 20px 40px rgba(192, 18, 39, 0.12) !important;
|
||||
border-color: rgba(192, 18, 39, 0.2) !important;
|
||||
}
|
||||
|
||||
.custom-blog-date {
|
||||
font-size: 12px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #94a3b8 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 1px !important;
|
||||
margin-bottom: 8px !important;
|
||||
display: block !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-divider {
|
||||
width: 100% !important;
|
||||
height: 1px !important;
|
||||
background: rgba(0, 0, 0, 0.08) !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.custom-blog-title {
|
||||
font-size: 20px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #1e293b !important;
|
||||
line-height: 1.35 !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: -0.4px !important;
|
||||
margin: 0 0 12px 0 !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
transition: color 0.2s ease !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-card:hover .custom-blog-title {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
|
||||
.custom-blog-excerpt {
|
||||
font-size: 13.5px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #64748b !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 0 24px 0 !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 3 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
overflow: hidden !important;
|
||||
text-transform: none !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-img-container {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
aspect-ratio: 4 / 3 !important;
|
||||
border-radius: 20px !important;
|
||||
overflow: hidden !important;
|
||||
margin-top: auto !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.custom-blog-badge {
|
||||
position: absolute !important;
|
||||
top: 14px !important;
|
||||
left: 14px !important;
|
||||
z-index: 5 !important;
|
||||
background: #c01227 !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 9px !important;
|
||||
font-weight: 800 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 1.2px !important;
|
||||
padding: 4px 10px !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 4px 10px rgba(192, 18, 39, 0.2) !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
`}} />
|
||||
<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">
|
||||
<div className="custom-blog-grid">
|
||||
|
||||
{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>
|
||||
<ScrollReveal key={i} delay={(i % 3) * 0.08} duration={0.8} yOffset={35}>
|
||||
<div className="custom-blog-card">
|
||||
{/* Text Block at Top */}
|
||||
<div className="flex flex-col">
|
||||
{/* Date */}
|
||||
<span className="custom-blog-date">
|
||||
{blog.date}
|
||||
</span>
|
||||
|
||||
{/* Thin divider line */}
|
||||
<div className="custom-blog-divider" />
|
||||
|
||||
{/* Bold Title */}
|
||||
<h3 className="custom-blog-title">
|
||||
{blog.title}
|
||||
</h3>
|
||||
|
||||
{/* Description Excerpt */}
|
||||
<p className="custom-blog-excerpt">
|
||||
{blog.excerpt}
|
||||
</p>
|
||||
</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>
|
||||
|
||||
{/* Image at Bottom */}
|
||||
<div className="custom-blog-img-container">
|
||||
<Image
|
||||
src={blog.image}
|
||||
alt={blog.title}
|
||||
fill
|
||||
style={{ objectFit: "cover" }}
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
/>
|
||||
{/* Category Badge overlay */}
|
||||
<span className="custom-blog-badge">
|
||||
{blog.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -4,75 +4,42 @@ 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 className="custom-standard-hero-container">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "url(/images/home2-banner-1.jpg)",
|
||||
backgroundPosition: "center center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover"
|
||||
}}
|
||||
className="custom-standard-hero-card"
|
||||
>
|
||||
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
|
||||
|
||||
{/* Title / Heading for Blogs */}
|
||||
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
|
||||
<h1 style={{ fontFamily: "var(--font-manrope), sans-serif", fontSize: "clamp(34px, 5.5vw, 68px)", fontWeight: 850, textTransform: "uppercase", letterSpacing: "-1.5px", margin: 0 }}>
|
||||
Our <span style={{ color: "#C01227" }}>Blogs</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-91be79f elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
|
||||
style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
|
||||
<Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
|
||||
<span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
|
||||
<span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Blogs</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal, Magnetic } from "@/animations/Reveal";
|
||||
|
||||
export default function ConnectedLogistics() {
|
||||
return (
|
||||
@@ -9,97 +12,115 @@ export default function ConnectedLogistics() {
|
||||
|
||||
{/* 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",
|
||||
}}
|
||||
/>
|
||||
<ScrollReveal delay={0.1} duration={0.9} yOffset={30} className="w-full h-full">
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
</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>
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={20}>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.2} duration={0.85} yOffset={25}>
|
||||
<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>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* 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>
|
||||
{/* Staggered List items */}
|
||||
<ScrollReveal delay={0.25} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
<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 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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.35} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
<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 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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.45} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
<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 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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.55} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
<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 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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.65} duration={0.8} yOffset={20}>
|
||||
<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">
|
||||
<Magnetic>
|
||||
<Link href="/solutions" className="logico-alter-button">Explore more</Link>
|
||||
</Magnetic>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function ContactForm() {
|
||||
const socialIconSpacing = {
|
||||
@@ -63,9 +64,11 @@ export default function ContactForm() {
|
||||
</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>
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={25}>
|
||||
<h3 className="logico-title">
|
||||
We are always ready to help you and answer your questions
|
||||
</h3>
|
||||
</ScrollReveal>
|
||||
</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">
|
||||
|
||||
@@ -3,48 +3,42 @@ 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">
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.contacts-hero-custom {
|
||||
background-color: #1f1f1f !important;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%), url('/images/home2-slide-1.jpg') !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
}
|
||||
`}} />
|
||||
<div className="custom-standard-hero-container">
|
||||
<div className="custom-standard-hero-card contacts-hero-custom">
|
||||
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
|
||||
<div className="elementor-element elementor-element-ea205b5 elementor-widget elementor-widget-logico_page_title_line" style={{ textAlign: "center", zIndex: 5 }}>
|
||||
<div className="elementor-widget-container">
|
||||
<h1 className="page-title logico-title-h2">Contacts</h1>
|
||||
<h1 className="page-title logico-title-h2" style={{ color: "#fff", fontSize: "clamp(34px, 5.5vw, 68px)", fontWeight: 850, textTransform: "uppercase", letterSpacing: "-1.5px", margin: 0 }}>
|
||||
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
|
||||
className="elementor-element elementor-element-3d13f28 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
|
||||
style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
|
||||
<Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
|
||||
<span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
|
||||
<span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Contacts</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal, SlideReveal } from "@/animations/Reveal";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
export default function EVSection() {
|
||||
const [hasMounted, setHasMounted] = useState(false);
|
||||
const headingContainerRef = useRef<HTMLDivElement>(null);
|
||||
const bannerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setHasMounted(true);
|
||||
// 1. Heading Scroll-Triggered Animation (Up & Down, Replay)
|
||||
const headingEl = headingContainerRef.current;
|
||||
if (headingEl) {
|
||||
const trigger = ScrollTrigger.create({
|
||||
trigger: headingEl,
|
||||
start: "top 88%",
|
||||
onEnter: () => {
|
||||
headingEl.classList.add("animated");
|
||||
},
|
||||
onEnterBack: () => {
|
||||
headingEl.classList.add("animated");
|
||||
},
|
||||
onLeave: () => {
|
||||
headingEl.classList.remove("animated");
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
headingEl.classList.remove("animated");
|
||||
},
|
||||
});
|
||||
|
||||
return () => trigger?.kill();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// 2. Banner Native Background Parallax (GSAP ScrollTrigger)
|
||||
const banner = bannerRef.current;
|
||||
if (!banner) return;
|
||||
|
||||
const parallaxTrigger = ScrollTrigger.create({
|
||||
trigger: banner,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
onUpdate: (self) => {
|
||||
// Subtle background offset to create beautiful native parallax depth
|
||||
const yOffset = self.progress * 120;
|
||||
gsap.set(banner, {
|
||||
backgroundPosition: `center ${yOffset}px`,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return () => parallaxTrigger?.kill();
|
||||
}, []);
|
||||
|
||||
const renderAnimatedText = () => {
|
||||
@@ -16,6 +67,8 @@ export default function EVSection() {
|
||||
{ text: "Not Adapted.", highlight: false }
|
||||
];
|
||||
|
||||
let letterCount = 0;
|
||||
|
||||
return lines.map((line, lineIdx) => {
|
||||
const words = line.text.split(/\s+/);
|
||||
return (
|
||||
@@ -25,13 +78,15 @@ export default function EVSection() {
|
||||
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);
|
||||
const delay = `${letterCount / 50}s`;
|
||||
letterCount++;
|
||||
return (
|
||||
<span
|
||||
key={letterIdx}
|
||||
className={`letter ${hasMounted ? "animated" : ""}`}
|
||||
className="letter"
|
||||
style={{
|
||||
["--delay" as any]: `${delay}s`,
|
||||
animationDelay: delay,
|
||||
["--delay" as any]: delay,
|
||||
}}
|
||||
>
|
||||
{letter}
|
||||
@@ -54,38 +109,40 @@ export default function EVSection() {
|
||||
.logico-title .word {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.1em;
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
.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);
|
||||
|
||||
/* Native, scroll-triggered heading reveal matching WordPress/Elementor */
|
||||
.logico_heading_animation .word .letter {
|
||||
opacity: 0 !important;
|
||||
transform: translateY(120%) !important;
|
||||
animation: none !important;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.logico_heading_animation.animated .word .letter {
|
||||
opacity: 0 !important;
|
||||
transform: translateY(120%) !important;
|
||||
animation: fadeIn 0.35s forwards, logico_heading_animation 0.7s cubic-bezier(.26, -.14, 0, 1.01) forwards !important;
|
||||
}
|
||||
`}} />
|
||||
|
||||
<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 */}
|
||||
{/* Background Banner with Native GSAP Background Scroll Parallax */}
|
||||
<div
|
||||
ref={bannerRef}
|
||||
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",
|
||||
backgroundPosition: "center 0px",
|
||||
backgroundImage: "url(/images/home4-banner-4.png)",
|
||||
backgroundSize: "cover"
|
||||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat"
|
||||
}}
|
||||
></div>
|
||||
|
||||
@@ -116,15 +173,17 @@ export default function EVSection() {
|
||||
<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>
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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 ref={headingContainerRef} 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()}
|
||||
@@ -133,11 +192,12 @@ export default function EVSection() {
|
||||
</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" />
|
||||
<img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" style={{ objectFit: "cover", width: "100%", height: "auto" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SlideReveal direction="right" delay={0.15} duration={0.9}>
|
||||
<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">
|
||||
@@ -261,6 +321,7 @@ export default function EVSection() {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</SlideReveal>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,13 @@ export default function HowItWorksHero() {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
height: 800px !important;
|
||||
min-height: 800px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 40px) !important;
|
||||
@@ -98,7 +105,7 @@ export default function HowItWorksHero() {
|
||||
<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-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import gsap from "gsap";
|
||||
import { ShimmerText } from "@/animations/Reveal";
|
||||
|
||||
export default function IndexHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
useEffect(() => {
|
||||
@@ -18,6 +21,36 @@ export default function IndexHero() {
|
||||
setActiveSlide(index);
|
||||
};
|
||||
|
||||
// GSAP slide transition effect
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
// Find the currently active slide inside the container
|
||||
const activeItem = containerRef.current.querySelector(".owl-item.active");
|
||||
if (!activeItem) return;
|
||||
|
||||
const heading = activeItem.querySelector(".heading-content");
|
||||
const text = activeItem.querySelector(".text-content");
|
||||
|
||||
if (heading && text) {
|
||||
// Clear previous animations if any
|
||||
gsap.killTweensOf([heading, text]);
|
||||
|
||||
// Premium elegant reveal with cubic elastic feel
|
||||
gsap.fromTo(
|
||||
heading,
|
||||
{ y: 55, opacity: 0, scale: 0.95 },
|
||||
{ y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
|
||||
);
|
||||
|
||||
gsap.fromTo(
|
||||
text,
|
||||
{ y: 30, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
|
||||
);
|
||||
}
|
||||
}, [activeSlide]);
|
||||
|
||||
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">
|
||||
@@ -25,7 +58,7 @@ export default function IndexHero() {
|
||||
<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="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag" ref={containerRef}>
|
||||
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
@@ -45,7 +78,10 @@ export default function IndexHero() {
|
||||
<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>
|
||||
<span className="heading-content block">
|
||||
ONE CONNECTED SYSTEM.<br />
|
||||
<ShimmerText className="font-extrabold">ONE PROMISE KEPT.</ShimmerText>
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
@@ -75,7 +111,10 @@ export default function IndexHero() {
|
||||
<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>
|
||||
<span className="heading-content block">
|
||||
<ShimmerText className="font-extrabold">AI-POWERED</ShimmerText><br />
|
||||
CONNECTED LOGISTICS
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function IndustrySolutions() {
|
||||
return (
|
||||
@@ -16,52 +17,24 @@ export default function IndustrySolutions() {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-element elementor-element-1487241 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading animated logico_heading_animation"
|
||||
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-settings='{"_animation":"logico_heading_animation"}'
|
||||
data-widget_type="logico_heading.default"
|
||||
style={{marginLeft: "50px"}}
|
||||
>
|
||||
<div className="elementor-widget-container" style={{animationDelay: "0.1s", margin: "30px 0 0 0"}}>
|
||||
<h3 className="logico-title animated-ready" style={{ fontSize: "clamp(36px, 5.5vw, 62px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", paddingRight: "clamp(20px, 8vw, 120px)" }}>
|
||||
{(() => {
|
||||
const lines = [
|
||||
"Smart solutions built",
|
||||
"exclusively for your",
|
||||
"industry"
|
||||
];
|
||||
let letterCount = 0;
|
||||
return lines.map((line, lineIdx) => (
|
||||
<React.Fragment key={lineIdx}>
|
||||
{line.split(" ").map((word, wordIdx, arr) => {
|
||||
const letters = word.split("").map((char, charIdx) => {
|
||||
const delay = `${(letterCount * 0.02).toFixed(2)}s`;
|
||||
letterCount++;
|
||||
return (
|
||||
<span
|
||||
key={charIdx}
|
||||
className="letter"
|
||||
style={{ animationDelay: delay }}
|
||||
>
|
||||
{char}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<React.Fragment key={wordIdx}>
|
||||
<span className="word">
|
||||
{letters}
|
||||
</span>
|
||||
{wordIdx < arr.length - 1 && " "}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
{lineIdx < lines.length - 1 && <br />}
|
||||
</React.Fragment>
|
||||
));
|
||||
})()}
|
||||
<div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
|
||||
<h3 className="logico-title" style={{ fontSize: "clamp(36px, 5.5vw, 62px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", paddingRight: "clamp(20px, 8vw, 120px)" }}>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
|
||||
<span className="block">Smart solutions built</span>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15} duration={0.8} yOffset={25}>
|
||||
<span className="block">exclusively for your</span>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.25} duration={0.8} yOffset={25}>
|
||||
<span className="block" style={{ color: "#c01227" }}>industry</span>
|
||||
</ScrollReveal>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,67 +45,237 @@ export default function MileTruthHero() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.miletruth-hero-container {
|
||||
position: relative;
|
||||
min-height: 680px;
|
||||
/* ── Hero wrapper: column layout, zero gap between hero + stats ── */
|
||||
.miletruth-hero .elementor-element-86f3204 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.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;
|
||||
|
||||
/* ── Hero slider card ── */
|
||||
.miletruth-hero-container {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.3) 100%), url('/images/miletruth-bg.png') !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
min-height: 773px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 25px 25px 0 0;
|
||||
margin-top: 20px;
|
||||
padding: 100px 40px;
|
||||
}
|
||||
.miletruth-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 1;
|
||||
.miletruth-hero-container::before {
|
||||
display: none !important;
|
||||
}
|
||||
.miletruth-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding: 0 40px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.miletruth-hero-container {
|
||||
min-height: 520px;
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
color: rgba(255, 255, 255, 0.96) !important;
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||||
font-size: clamp(34px, 5.5vw, 72px) !important;
|
||||
font-weight: 850 !important;
|
||||
line-height: 1.05 !important;
|
||||
letter-spacing: -1.5px !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: center !important;
|
||||
display: block;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text {
|
||||
margin-top: 22px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
color: rgba(255, 255, 255, 0.72) !important;
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||||
font-size: clamp(16px, 1.8vw, 20px) !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 auto !important;
|
||||
max-width: 800px;
|
||||
}
|
||||
.miletruth-hero .slide-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.miletruth-hero .slide-content-inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1500px;
|
||||
padding: 0 32px;
|
||||
text-align: center;
|
||||
}
|
||||
/* The "logico" slider reveal animation leaves these at opacity:0 until
|
||||
its JS runs (absent in this rebuild), hiding the heading + subtitle.
|
||||
Force them visible. */
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .logico-content-wrapper-1,
|
||||
.miletruth-hero .logico-content-wrapper-2 {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
Stats bar — dark rounded card overlapping the hero bottom
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.miletruth-hero .elementor-element-8e5c81e {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
margin: -25px 0 0 0 !important;
|
||||
background-color: #1F1F1F !important;
|
||||
border-radius: 25px !important;
|
||||
padding: 80px 0 !important;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
|
||||
width: 100% !important;
|
||||
max-width: 1440px !important;
|
||||
height: auto !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 0 40px !important;
|
||||
flex-grow: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 4-col grid for counter widgets — rows size to content (not 1fr of the
|
||||
container) so the counters aren't parked at the top of a tall row. */
|
||||
.miletruth-hero .elementor-element-628123a {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
grid-template-rows: auto !important;
|
||||
height: auto !important;
|
||||
gap: 40px !important;
|
||||
width: 100% !important;
|
||||
justify-items: start !important;
|
||||
align-items: start !important;
|
||||
align-content: start !important;
|
||||
}
|
||||
|
||||
/* Counter: title on top, number below, left-aligned */
|
||||
.miletruth-hero .elementor-counter {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Counter title — above the number */
|
||||
.miletruth-hero .elementor-counter-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.3em !important;
|
||||
color: #FFFFFF !important;
|
||||
margin-bottom: 12px !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
/* Counter number wrapper — centered */
|
||||
.miletruth-hero .elementor-counter-number-wrapper {
|
||||
font-family: var(--font-space-grotesk), "Space Grotesk", var(--font-manrope), "Manrope", sans-serif !important;
|
||||
font-size: clamp(48px, 6.5vw, 100px) !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1em !important;
|
||||
color: #C01227 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.miletruth-hero .elementor-counter-number {
|
||||
color: #C01227 !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
}
|
||||
.miletruth-hero .elementor-counter-number-suffix {
|
||||
color: #C01227 !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1200px) {
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 60px !important;
|
||||
}
|
||||
.miletruth-hero-container .content-slider-item-heading {
|
||||
font-size: clamp(32px, 9vw, 42px) !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.miletruth-hero-container {
|
||||
min-height: 600px;
|
||||
padding: 120px 0;
|
||||
}
|
||||
.miletruth-hero .elementor-element-8e5c81e {
|
||||
padding: 80px
|
||||
0 !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-628123a {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 50px 40px !important;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 50px !important;
|
||||
line-height: 1.1 !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 40px !important;
|
||||
line-height: 1.12 !important;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.miletruth-hero-container {
|
||||
min-height: 500px;
|
||||
padding: 100px 0;
|
||||
}
|
||||
.miletruth-hero .elementor-element-86f3204 {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.miletruth-hero .elementor-element-8e5c81e {
|
||||
padding: 60px 0 !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-628123a {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 36px !important;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="elementor-63 miletruth-hero">
|
||||
{/* Parent wrapper matching reference elementor-element-86f3204 */}
|
||||
<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>
|
||||
|
||||
{/* Hero slider card — NOT using custom-standard-hero-container/card
|
||||
because this hero has a unique structure: hero + stats bar in a
|
||||
single column with -25px overlap and no overflow:hidden */}
|
||||
<div className="miletruth-hero-container">
|
||||
<div className="e-con-inner miletruth-content">
|
||||
<div className="logico-content-slider-widget">
|
||||
<div className="content-slider-wrapper">
|
||||
@@ -133,7 +303,7 @@ export default function MileTruthHero() {
|
||||
</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="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">
|
||||
|
||||
@@ -144,36 +314,39 @@ export default function MileTruthHero() {
|
||||
<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 %"}
|
||||
{mounted ? <Counter from={1} to={99.9} decimals={1} suffix="" /> : "1"}
|
||||
</span>
|
||||
<span className="elementor-counter-number-suffix"> %</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-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5-2" 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 %"}
|
||||
{mounted ? <Counter from={1} to={42} decimals={0} suffix="" /> : "1"}
|
||||
</span>
|
||||
<span className="elementor-counter-number-suffix"> %</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-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5-3" 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 %"}
|
||||
{mounted ? <Counter from={1} to={37} decimals={0} suffix="" /> : "1"}
|
||||
</span>
|
||||
<span className="elementor-counter-number-suffix"> %</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,8 +359,9 @@ export default function MileTruthHero() {
|
||||
<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"}
|
||||
{mounted ? <Counter from={1} to={45} decimals={0} suffix="" /> : "45"}
|
||||
</span>
|
||||
<span className="elementor-counter-number-suffix">ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,177 @@ import LastMileIcon from "../icons/LastMileIcon";
|
||||
|
||||
export default function Miles3() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* =====================================================================
|
||||
How It Works · "Doormile connects first, mid, and last mile" section
|
||||
Self-contained recreation of the original Elementor design
|
||||
(source: public/css/sections/section-miles3.css + kit-5 typography).
|
||||
Explicit flex/grid values because the Elementor framework reads them
|
||||
from CSS custom properties that aren't set in this rebuild.
|
||||
===================================================================== */
|
||||
|
||||
/* Section shell — dark card fully inset from the edges. The page body is
|
||||
white, so margins expose a white gutter on all sides and all four
|
||||
corners are rounded, matching the reference. */
|
||||
.elementor-element-c36a604 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin: 20px 20px 0 20px;
|
||||
background-color: #1F1F1F;
|
||||
border-radius: 25px 25px 0 0;
|
||||
padding: 150px 0 0 0;
|
||||
}
|
||||
/* Boxed inner — centered, original content width */
|
||||
.elementor-element-c36a604 > .e-con-inner {
|
||||
width: 100%;
|
||||
max-width: 1630px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Outer content wrapper — full width, stacks header then grid */
|
||||
.elementor-element-77d1265 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 1630px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Header row + its inner column (eyebrow + heading, top-left) */
|
||||
.elementor-element-b147420 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.elementor-element-5bc90f3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Eyebrow: "/ How It Works /" */
|
||||
.elementor-element-176d17f .logico-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 2.1429em;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main heading (h3 kit typography, white)
|
||||
NOTE: theme-core sets ".logico-front-end h3:not([class*=logico-title-h])
|
||||
{ color: var(--logico-dark-text-color) }" at specificity (0,2,1), which
|
||||
renders this <h3 class="logico-title"> dark. We prefix .logico-front-end
|
||||
(-> (0,3,0)) to win, and force -webkit-text-fill-color (it had inherited
|
||||
the dark currentColor). */
|
||||
.elementor-element-63a9de5 > .elementor-widget-container {
|
||||
margin: 18px 0 0 0;
|
||||
}
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 60px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 3-column card grid.
|
||||
Original column-gap is 120px, but at laptop widths (1280–1500) that
|
||||
squeezes columns so descriptions wrap to 3 lines. Reduced to 60px so
|
||||
columns stay wide enough for ~2-line descriptions like the reference,
|
||||
while keeping the 70px row-gap. */
|
||||
.elementor-element-4add972 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow: row;
|
||||
gap: 70px 60px;
|
||||
width: 100%;
|
||||
margin: 55px 0 0 0;
|
||||
}
|
||||
/* Each card stacks: truck / title / description, left-aligned */
|
||||
.elementor-element-4add972 > .e-con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Truck illustrations — exact original heights + baseline padding */
|
||||
.elementor-element-4add972 .elementor-icon-wrapper {
|
||||
text-align: start;
|
||||
}
|
||||
.elementor-element-4add972 .elementor-icon svg {
|
||||
width: auto;
|
||||
}
|
||||
.elementor-element-74687fb > .elementor-widget-container { padding: 22px 0 0 0; }
|
||||
.elementor-element-74687fb .elementor-icon svg { height: 139px; }
|
||||
.elementor-element-fd9c57e .elementor-icon svg { height: 158px; }
|
||||
.elementor-element-fbb1628 > .elementor-widget-container { padding: 25px 0 0 0; }
|
||||
.elementor-element-fbb1628 .elementor-icon svg { height: 128px; }
|
||||
|
||||
/* Card titles (First / Mid / Last Mile) */
|
||||
.elementor-element-d310968 > .elementor-widget-container,
|
||||
.elementor-element-c582715 > .elementor-widget-container,
|
||||
.elementor-element-fb01b90 > .elementor-widget-container {
|
||||
margin: 25px 0 20px 0;
|
||||
}
|
||||
.elementor-element-d310968 .logico-title,
|
||||
.elementor-element-c582715 .logico-title,
|
||||
.elementor-element-fb01b90 .logico-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.03em;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Card descriptions */
|
||||
.elementor-element-9989187 p,
|
||||
.elementor-element-3ae1ce0 p,
|
||||
.elementor-element-1057c22 p {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6667em;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---- Responsive (grid breakpoints mirror the original section-miles3
|
||||
cascade: 3-col@120gap >1200, 3-col@40gap ≤1200, 2-col ≤1020, 1-col
|
||||
≤480). The ≤1200 step is what keeps columns wide enough at laptop
|
||||
widths so descriptions stay ~2 lines and trucks stay proportionate. */
|
||||
@media (max-width: 1200px) {
|
||||
.elementor-element-4add972 { gap: 70px 40px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 100px 0 0 0; }
|
||||
.elementor-element-77d1265 { padding: 0 30px; }
|
||||
.elementor-element-4add972 { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 0 0; }
|
||||
.elementor-element-77d1265 { padding: 0 22px; }
|
||||
.elementor-element-4add972 { grid-template-columns: 1fr; gap: 56px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(30px, 9vw, 44px); }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<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">
|
||||
@@ -97,5 +268,6 @@ export default function Miles3() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -35,6 +35,13 @@ export default function SolutionsHero() {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
height: 800px !important;
|
||||
min-height: 800px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
width: calc(100% - 40px) !important;
|
||||
@@ -97,7 +104,7 @@ export default function SolutionsHero() {
|
||||
<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-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal, CountUp, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
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">
|
||||
<StaggerChildren stagger={0.15} duration={0.7} yOffset={30} className="elementor-element elementor-element-9b26234 e-con-full e-grid cut-corner-no sticky-container-off e-con e-parent">
|
||||
|
||||
{/* 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"}">
|
||||
@@ -18,7 +21,7 @@ export default function StatsBar() {
|
||||
<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 />
|
||||
<CountUp end={99.2} decimals={1} suffix="%" duration={2.2} /> <br />
|
||||
<span style={{ fontSize: "20px" }}>On-Time Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +56,7 @@ export default function StatsBar() {
|
||||
<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 />
|
||||
<CountUp end={3} suffix="x Faster" duration={1.8} /> <br />
|
||||
<span style={{ fontSize: "20px" }}>Faster Response</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +91,7 @@ export default function StatsBar() {
|
||||
<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 />
|
||||
<CountUp end={40} suffix="%" duration={2} /> <br />
|
||||
<span style={{ fontSize: "20px" }}>Cost Reduction</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +113,6 @@ export default function StatsBar() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</StaggerChildren>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
export default function TheDoormileWay() {
|
||||
return (
|
||||
@@ -7,37 +10,54 @@ export default function TheDoormileWay() {
|
||||
<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>
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
|
||||
<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>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
|
||||
<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"
|
||||
style={{
|
||||
WebkitTextStroke: "4px #c01227",
|
||||
color: "#fff",
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<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>
|
||||
<ScrollReveal delay={0.2} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.3} duration={0.8} yOffset={25}>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +66,7 @@ export default function TheDoormileWay() {
|
||||
{/* 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">
|
||||
<StaggerChildren stagger={0.12} duration={0.7} yOffset={35} className="elementor-element elementor-element-2d7c3ee e-con-full e-grid cut-corner-no sticky-container-off e-con e-child">
|
||||
|
||||
{/* 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">
|
||||
@@ -140,7 +160,7 @@ export default function TheDoormileWay() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function TheProblem() {
|
||||
return (
|
||||
@@ -6,96 +9,108 @@ export default function TheProblem() {
|
||||
<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>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={20}>
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
|
||||
<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>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* 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>
|
||||
<ScrollReveal delay={0.1} duration={0.7} yOffset={35} className="w-full">
|
||||
<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>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* 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>
|
||||
<ScrollReveal delay={0.2} duration={0.7} yOffset={35} className="w-full">
|
||||
<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>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* 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>
|
||||
<ScrollReveal delay={0.3} duration={0.7} yOffset={35} className="w-full">
|
||||
<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>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* 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>
|
||||
<ScrollReveal delay={0.4} duration={0.7} yOffset={35} className="w-full">
|
||||
<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>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
281
src/components/sections/WhyChooseDoormile.tsx
Normal file
281
src/components/sections/WhyChooseDoormile.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal } from "../../animations/Reveal";
|
||||
|
||||
type Stage = {
|
||||
img: string;
|
||||
label: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
points: string[];
|
||||
};
|
||||
|
||||
const STAGES: Stage[] = [
|
||||
{
|
||||
img: "/images/first-mile-approach.jpg",
|
||||
label: "01 / First Mile",
|
||||
title: "Origin to Hub",
|
||||
desc: "We collect freight directly from your facility, optimise vehicle assignment in real time, and consolidate loads for maximum efficiency before they reach the hub.",
|
||||
points: ["AI-scheduled pickups", "Dynamic load consolidation", "Yard & dock management"],
|
||||
},
|
||||
{
|
||||
img: "/images/mid-mile-approach.jpg",
|
||||
label: "02 / Mid Mile",
|
||||
title: "Hub to Hub Transit",
|
||||
desc: "Freight moves between hubs on optimised line-haul routes. Real-time tracking, cross-docking, and SLA monitoring keep every shipment on schedule.",
|
||||
points: ["Optimised line-haul routing", "Cross-docking & sortation", "Live SLA monitoring"],
|
||||
},
|
||||
{
|
||||
img: "/images/last-mile-approach.jpg",
|
||||
label: "03 / Last Mile",
|
||||
title: "Hub to Doorstep",
|
||||
desc: "The final and most complex phase. We optimise multi-stop routes, deliver within precise windows, and capture digital proof of delivery at every door.",
|
||||
points: ["Multi-stop route optimisation", "Precise delivery windows", "Digital proof of delivery"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function WhyChooseDoormile() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* =====================================================================
|
||||
"Why Businesses Choose Doormile" — First / Mid / Last Mile stage cards.
|
||||
Dark rounded card on the white page (consistent with the Miles3
|
||||
section), each stage shown with a photo, numbered red label, title,
|
||||
description and a red-checkmark feature list.
|
||||
Card titles are <h3>; theme-core forces a dark color on bare headings
|
||||
(.logico-front-end h3:not([class*=logico-title-h]) @ (0,2,1)), so the
|
||||
white title rule is prefixed to outrank it.
|
||||
===================================================================== */
|
||||
.wcd-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin: -250px 20px 20px 20px; /* Snug pull-up overlap to touch Miles3 columns without covering their text! */
|
||||
background-color: #1F1F1F;
|
||||
border-radius: 0 0 25px 25px;
|
||||
padding: 50px 0 110px;
|
||||
}
|
||||
.wcd-inner {
|
||||
width: 100%;
|
||||
max-width: 1630px;
|
||||
margin: 0 auto;
|
||||
padding: 0 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Centered header block (eyebrow + heading) with a faint map backdrop */
|
||||
.wcd-head {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 0 70px;
|
||||
}
|
||||
@keyframes wcd-float {
|
||||
0% { transform: translateX(-50%) translateY(0px) scale(1); }
|
||||
50% { transform: translateX(-50%) translateY(-12px) scale(1.02); }
|
||||
100% { transform: translateX(-50%) translateY(0px) scale(1); }
|
||||
}
|
||||
.wcd-head::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 75%; /* Shifted down to the bottom of the header block to overlap the top of the cards */
|
||||
transform: translateX(-50%);
|
||||
width: min(1180px, 95%);
|
||||
aspect-ratio: 2 / 1;
|
||||
background: url('/images/bg-map.png') center / contain no-repeat;
|
||||
opacity: 0.06; /* Elegant faint visibility */
|
||||
filter: invert(1); /* Invert dark map dots to white/light-gray to make them visible on the #1F1F1F background */
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: wcd-float 20s ease-in-out infinite; /* Premium floating map animation */
|
||||
}
|
||||
.wcd-card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.wcd-eyebrow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 2.1429em;
|
||||
letter-spacing: 0.5px;
|
||||
color: #FFFFFF;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
.logico-front-end .wcd-section h2.wcd-heading {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(34px, 4.4vw, 60px);
|
||||
font-weight: 500;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wcd-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wcd-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
.wcd-card:hover {
|
||||
border-color: #c01227 !important;
|
||||
box-shadow: 0 10px 30px rgba(192, 18, 39, 0.25) !important;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.wcd-card-media {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wcd-card-media img {
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
.wcd-card:hover .wcd-card-media img {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
.wcd-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
}
|
||||
.wcd-card-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: #c01227;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.logico-front-end .wcd-section h3.wcd-card-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
.wcd-card-desc {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0 0 34px;
|
||||
}
|
||||
.wcd-card-points {
|
||||
list-style: none;
|
||||
margin: auto 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.wcd-card-points li {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.wcd-card-points li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.18em;
|
||||
width: 14px;
|
||||
height: 9px;
|
||||
border-left: 2px solid #c01227;
|
||||
border-bottom: 2px solid #c01227;
|
||||
transform: rotate(-45deg) scale(1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.wcd-card:hover .wcd-card-points li::before {
|
||||
transform: rotate(-45deg) scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.wcd-section { margin: -150px 15px 15px 15px; padding: 40px 0 80px; }
|
||||
.wcd-inner { padding: 0 30px; }
|
||||
.wcd-grid { grid-template-columns: 1fr; gap: 24px; }
|
||||
.wcd-card-body { padding: 32px; }
|
||||
.logico-front-end .wcd-section h3.wcd-card-title { font-size: 28px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wcd-section { margin: -100px 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
|
||||
.wcd-inner { padding: 0 20px; }
|
||||
.wcd-card-body { padding: 24px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="wcd-section">
|
||||
<div className="wcd-inner">
|
||||
<ScrollReveal delay={0.1}>
|
||||
<div className="wcd-head">
|
||||
<div className="wcd-eyebrow">/ Why Businesses Choose Doormile /</div>
|
||||
<h2 className="wcd-heading">The connected approach delivers measurable advantages</h2>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="wcd-grid">
|
||||
{STAGES.map((stage, index) => (
|
||||
<ScrollReveal
|
||||
key={stage.label}
|
||||
delay={index * 0.15}
|
||||
duration={0.8}
|
||||
yOffset={50}
|
||||
className="wcd-card-wrapper"
|
||||
>
|
||||
<article className="wcd-card" style={{ height: "100%" }}>
|
||||
<div className="wcd-card-media">
|
||||
<Image
|
||||
src={stage.img}
|
||||
alt={stage.title}
|
||||
fill
|
||||
sizes="(max-width: 1020px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="wcd-card-body">
|
||||
<div className="wcd-card-label">{stage.label}</div>
|
||||
<h3 className="wcd-card-title">{stage.title}</h3>
|
||||
<p className="wcd-card-desc">{stage.desc}</p>
|
||||
<ul className="wcd-card-points">
|
||||
{stage.points.map((point) => (
|
||||
<li key={point}>{point}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user