Doormile/doormile-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

index changes

Browse Source
This commit is contained in:
Kishore Kumar C
2026-04-17 12:47:41 +05:30
parent e49d5e7976
commit 786bd38286
64 changed files with 15844 additions and 8873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
includes/comparision.php
View File

@@ -317,14 +317,17 @@
@media (min-width: 1440px) {
.dm-compare-section {
max-width: 1360px;
padding: 60px 52px 50px;
background:#1f1f1f;
max-width: 1440px;
padding: 72px 52px;
background: #1f1f1f;
border-radius: 20px;
/* margin: 0px 50px; */
}
.dm-compare-section::before {
background-size: 80px 80px;
padding: 0px 20px;
}
.dm-compare-section .dm-section-header {
@@ -403,8 +406,10 @@
@media (min-width: 1920px) {
.dm-compare-section {
max-width: 1780px;
padding: 72px 64px 60px;
max-width: 1920px;
padding: 72px 52px;
background: #1f1f1f;
border-radius: 20px;
}
.dm-compare-section::before {
@@ -488,8 +493,9 @@
@media (min-width: 2560px) {
.dm-compare-section {
max-width: 1760px;
max-width: 2560px;
padding: 80px 72px 50px;
background: #1f1f1f;
}
.dm-compare-section::before {
@@ -575,9 +581,18 @@
}
}
@media (max-width: 1200px) {
.dm-compare-section { padding: 60px 16px 70px;background: #1f1f1f; }
.dm-compare-section .dm-col-head,
.dm-compare-section .dm-cell { padding: 20px 20px; }
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
.dm-compare-section .dm-col-head { font-size: 11px; letter-spacing: 1.5px; }
}
/* ── RESPONSIVE (MOBILE) ── */
@media (max-width: 680px) {
.dm-compare-section { padding: 60px 16px 70px; }
.dm-compare-section { padding: 60px 16px 70px;background: #1f1f1f; border-radius: 20px; }
.dm-compare-section .dm-col-head,
.dm-compare-section .dm-cell { padding: 20px 20px; }
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
@@ -586,6 +601,8 @@
</style>
<!-- ── SECTION HTML ── -->
<div class="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container">
<section class="dm-compare-section" id="dm-compare">
<div class="dm-section-header">
@@ -667,6 +684,8 @@
</div>
</section>
</div>
<script>
(function () {

1737
includes/connected-log.php
View File

File diff suppressed because it is too large Load Diff

2233
includes/contact.php Normal file
View File

File diff suppressed because it is too large Load Diff

121
includes/ev-section.php Normal file
View File

@@ -0,0 +1,121 @@
<!-- Modern EV-Native Design Section -->
<link rel="stylesheet" href="assets/css/ev-section.css">
<section class="ev-section">
<div class="ev-container">
<div class="ev-grid">
<!-- Left Column: Content -->
<div class="ev-content">
<span class="ev-badge">EV-Native Design</span>
<h2 class="ev-title">
BUILT FOR ELECTRIC.
<span class="accent">NOT ADAPTED.</span>
</h2>
<p class="ev-desc">
Most logistics software treats EVs as diesel trucks with a battery.
Doormile was built EV-first—understanding that electric fleets require
fundamentally different intelligence.
</p>
<div class="feature-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
<h3>Battery-Aware Routing</h3>
<p>Battery level, health, and degradation are inputs to route optimization.</p>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
</div>
<h3>Charging Integration</h3>
<p>Integrate charging stops without compromising delivery windows.</p>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h20"></path><path d="M5 20V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v12"></path><path d="M9 20v-4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4"></path></svg>
</div>
<h3>Energy-Optimized Paths</h3>
<p>Consider elevation, speed limits, and weather for maximum efficiency.</p>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<h3>Predictable Operations</h3>
<p>EVs become predictable assets, not operational risks.</p>
</div>
</div>
</div>
<!-- Right Column: Dashboard Card -->
<div class="ev-dashboard">
<div class="dashboard-card">
<div class="dashboard-header">
<h3 class="dashboard-title">FLEET STATUS</h3>
<div class="live-indicator">Dashboard Live</div>
</div>
<div class="van-display">
<img src="assets/images/ev-van-dashboard.png" alt="Electric Delivery Van" class="van-image">
<!-- Overlay Status Cards -->
<div class="overlay-card v-status-1">
<div class="status-circle active">85%</div>
<div class="info">
<h4>EV-001</h4>
<p>Route A • Active</p>
</div>
</div>
<div class="overlay-card v-status-2">
<div class="status-circle" style="border-color: #F59E0B; color: #F59E0B;">62%</div>
<div class="info">
<h4>EV-002</h4>
<p>Route B • 42 min left</p>
</div>
</div>
<div class="overlay-card v-status-3">
<div class="status-circle" style="border-color: #EF4444; color: #EF4444;">20%</div>
<div class="info">
<h4>EV-003</h4>
<p>Charging Required</p>
</div>
</div>
</div>
<!-- Metric Stats Bottom -->
<div class="stats-row">
<div class="stat-metric">
<span class="stat-value">40%</span>
<span class="stat-label">Lower Fuel Cost</span>
</div>
<div class="stat-metric">
<span class="stat-value">ZRO</span>
<span class="stat-label">Tailpipe Emissions</span>
</div>
<div class="stat-metric">
<span class="stat-value">98%</span>
<span class="stat-label">Fleet Uptime</span>
</div>
<div class="stat-metric">
<span class="stat-value">3x</span>
<span class="stat-label">Longer Asset Life</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

10
includes/footer.php
View File

@@ -83,8 +83,7 @@
<div class="button-widget">
<div class="button-container">
<a href="https://demo.artureanec.com/themes/logico-rounded/about-us/"
target="_blank" class="logico-small-button">
<a href="about-us.php" target="_blank" class="logico-small-button">
Discover<svg viewBox="0 0 13 20">
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
</svg> </a>
@@ -160,11 +159,10 @@
data-id="4b6e2f2" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<a href="https://demo.artureanec.com/themes/logico-rounded/">
<img width="400" height="76"
src="assets/images/logo2-light-x2.png"
<img width="400" height="76" src="assets/images/doormile-logo.png"
class="attachment-full size-full wp-image-5851" alt=""
srcset="https:///assets/images/logo2-light-x2.png sizes=" (max-width:
400px) 100vw, 400px" /> </a>
srcset="assets/images/doormile-logo.png sizes=" (max-width: 400px)
100vw, 400px" /> </a>
</div>
</div>
<div class="elementor-element elementor-element-7eaa169 elementor-shape-square e-grid-align-mobile-center elementor-grid-0 elementor-widget elementor-widget-social-icons"

4214
includes/head.php
View File

File diff suppressed because it is too large Load Diff

124
includes/header-img.php
View File

@@ -1,60 +1,72 @@
<div class="elementor-element elementor-element-da57c01 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="da57c01" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-cbfd9b2 elementor-widget elementor-widget-logico_content_slider" data-id="cbfd9b2" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
<div class="elementor-widget-container">
<div class="logico-content-slider-widget">
<div class="content-slider-wrapper">
<div class="content-slider-container">
<div class="content-slider owl-carousel owl-theme" data-slider-options="{&quot;items&quot;:1,&quot;nav&quot;:false,&quot;navText&quot;:&quot;&quot;,&quot;dots&quot;:true,&quot;progress&quot;:true,&quot;dotsContainer&quot;:&quot;.owl-dots-cbfd9b2&quot;,&quot;autoplayHoverPause&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:5000,&quot;autoplayTimeout&quot;:5000,&quot;loop&quot;:true,&quot;dragEndSpeed&quot;:1200,&quot;navSpeed&quot;:1200,&quot;dotsSpeed&quot;:1200,&quot;pullDrag&quot;:false,&quot;freeDrag&quot;:false,&quot;callbacks&quot;:false,&quot;animateOut&quot;:&quot;fadeOut&quot;,&quot;rtl&quot;:false}">
<div class="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
<div class="slide-content">
<div class="slide-content-inner">
<h1 class="content-slider-item-heading logico-content-wrapper-1">
<span class="heading-content">Transportation Services around the World</span>
</h1>
<div class="content-slider-item-text logico-content-wrapper-2">
<div class="text-content">
<p>Mummichog paradise fish! Triggerfish bango guppy opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid.</p>
</div>
</div>
<div class="content-slider-item-buttons logico-content-wrapper-3">
<a class="logico-alter-button" href="https://demo.artureanec.com/themes/logico-rounded/about-us/" target="_blank">Explore more</a>
</div>
</div>
</div>
</div>
<div class="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
<div class="slide-content">
<div class="slide-content-inner">
<h1 class="content-slider-item-heading logico-content-wrapper-1">
<span class="heading-content">A New Freight Experience</span>
</h1>
<div class="content-slider-item-text logico-content-wrapper-2">
<div class="text-content">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish!</p>
</div>
</div>
<div class="content-slider-item-buttons logico-content-wrapper-3">
<a class="logico-alter-button" href="https://demo.artureanec.com/themes/logico-rounded/about-us/" target="_blank">Explore more</a>
</div>
</div>
</div>
</div>
</div>
<div class="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-outside">
<div class="slider-footer-content">
<div class="slider-pagination">
<div class="slider-progress-wrapper">
<span class="slider-progress-current">01</span>
/<span class="slider-progress-all">01</span>
</div>
<div class="owl-dots owl-dots-cbfd9b2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-da57c01 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
data-id="da57c01" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-cbfd9b2 elementor-widget elementor-widget-logico_content_slider"
data-id="cbfd9b2" data-element_type="widget" data-e-type="widget"
data-widget_type="logico_content_slider.default">
<div class="elementor-widget-container">
<div class="logico-content-slider-widget">
<div class="content-slider-wrapper">
<div class="content-slider-container">
<div class="content-slider owl-carousel owl-theme"
data-slider-options="{&quot;items&quot;:1,&quot;nav&quot;:false,&quot;navText&quot;:&quot;&quot;,&quot;dots&quot;:true,&quot;progress&quot;:true,&quot;dotsContainer&quot;:&quot;.owl-dots-cbfd9b2&quot;,&quot;autoplayHoverPause&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:5000,&quot;autoplayTimeout&quot;:5000,&quot;loop&quot;:true,&quot;dragEndSpeed&quot;:1200,&quot;navSpeed&quot;:1200,&quot;dotsSpeed&quot;:1200,&quot;pullDrag&quot;:false,&quot;freeDrag&quot;:false,&quot;callbacks&quot;:false,&quot;animateOut&quot;:&quot;fadeOut&quot;,&quot;rtl&quot;:false}">
<div class="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
<div class="slide-content">
<div class="slide-content-inner">
<h1 class="content-slider-item-heading logico-content-wrapper-1">
<span class="heading-content">Transportation Services around the
World</span>
</h1>
<div class="content-slider-item-text logico-content-wrapper-2">
<div class="text-content">
<p>Mummichog paradise fish! Triggerfish bango guppy opah sunfish
bluntnose knifefish upside-down catfish cobia spookfish convict
cichlid.</p>
</div>
</div>
<div class="content-slider-item-buttons logico-content-wrapper-3">
<a class="logico-alter-button" href="about-us.php" target="_blank">Explore
more</a>
</div>
</div>
</div>
</div>
<div class="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
<div class="slide-content">
<div class="slide-content-inner">
<h1 class="content-slider-item-heading logico-content-wrapper-1">
<span class="heading-content">A New Freight Experience</span>
</h1>
<div class="content-slider-item-text logico-content-wrapper-2">
<div class="text-content">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon
armoured catfish gudgeon sawfish whitefish orbicular batfish
mummichog paradise fish!</p>
</div>
</div>
<div class="content-slider-item-buttons logico-content-wrapper-3">
<a class="logico-alter-button" href="about-us.php" target="_blank">Explore
more</a>
</div>
</div>
</div>
</div>
</div>
<div
class="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-outside">
<div class="slider-footer-content">
<div class="slider-pagination">
<div class="slider-progress-wrapper">
<span class="slider-progress-current">01</span>
/<span class="slider-progress-all">01</span>
</div>
<div class="owl-dots owl-dots-cbfd9b2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

45
includes/header.php
View File

@@ -44,9 +44,9 @@
class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
<figure class="wp-block-image size-full is-resized"><img
decoding="async" width="305" height="58"
src="assets/images/logo2-light-x2.png"
alt="" class="wp-image-5851" style="width:150px"
srcset="assets/images/logo2-light-x2.png 305w, 8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/09/logo2-light-x2-300x58.png 300w"
src="assets/images/doormile-logo.png" alt=""
class="wp-image-5851" style="width:150px"
srcset="assets/images/doormile-logo.png 305w, 8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/09/doormile-logo-300x58.png 300w"
sizes="(max-width: 305px) 100vw, 305px" />
</figure>
@@ -213,9 +213,13 @@
<div class="hfe-site-logo-set">
<div class="hfe-site-logo-container">
<img width="400" height="76"
class="hfe-site-logo-img elementor-animation-"
src="assets/images/logo2-light-x2.png"
alt="logo2-light-x2" />
class="hfe-site-logo-img logo-desktop elementor-animation-"
src="<?php echo isset($logo_src) ? $logo_src : 'assets/images/doormile-white.png'; ?>"
alt="doormile-logo" />
<img width="400" height="76"
class="hfe-site-logo-img logo-mobile elementor-animation-"
src="assets/images/doormile-black.png"
alt="doormile-logo" />
</div>
</div>
</a>
@@ -250,7 +254,7 @@
echo ' active'; ?>">
<a href="how-it-works.php">How It Works</a>
<!-- <ul class="sub-menu"> -->
<!-- <li id="menu-item-10536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10536"><a href="https://demo.artureanec.com/themes/logico-rounded/about-us/">About Us</a></li>
<!-- <li id="menu-item-10536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10536"><a href="about-us.php">About Us</a></li>
<li id="menu-item-10513" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10513"><a href="#">Team</a>
<ul class="sub-menu">
<li id="menu-item-10544" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10544"><a href="https://demo.artureanec.com/themes/logico-rounded/team-page/">Our Team</a></li>
@@ -313,7 +317,7 @@
<ul class="sub-menu">
<li id="menu-item-10558"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10558">
<a href="about.php">About Us</a>
<a href="about-us.php">About Us</a>
</li>
<li id="menu-item-10559"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10559">
@@ -345,15 +349,12 @@
<!-- Icons Block -->
<div class="header-icons-container">
<div class="header-icon mini-cart"><a
href="https://demo.artureanec.com/themes/logico-rounded/cart/"
<div class="header-icon mini-cart"><a href="#"
class="mini-cart-trigger"><i
class="mini-cart-count"></i></a></div><a
class="header-icon search-link"
href="https://demo.artureanec.com/themes/logico-rounded/search/"><span
class="header-icon search-link" href="#"><span
class="search-trigger-icon"></span></a>
<div class="header-icon login-logout"><a
href="https://demo.artureanec.com/themes/logico-rounded/my-account/"
<div class="header-icon login-logout"><a href="#"
title="Login/Register" class="link-login"></a></div>
<div class="header-icon menu-close"><span
class="menu-close-icon"></span></div>
@@ -381,7 +382,7 @@
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10509">
<a href="how-it-works.php">How It Works</a>
<!-- <ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10536"><a href="https://demo.artureanec.com/themes/logico-rounded/about-us/">About Us</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10536"><a href="about-us.php">About Us</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10513"><a href="#">Team</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10544"><a href="https://demo.artureanec.com/themes/logico-rounded/team-page/">Our Team</a></li>
@@ -443,7 +444,7 @@
<ul class="sub-menu">
<li id="menu-item-10558"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10558">
<a href="about.php">About Us</a>
<a href="about-us.php">About Us</a>
</li>
<li id="menu-item-10559"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10559">
@@ -498,15 +499,15 @@
<div class="elementor-element elementor-element-9984ace e-con-full elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child"
<!-- <div class="elementor-element elementor-element-9984ace e-con-full elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="9984ace" data-element_type="container"
style="display:flex;align-items:center;justify-content:flex-end;width:auto;max-width:140px;">
<!-- <div class="elementor-element elementor-element-2b96637 elementor-widget__width-inherit elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-text-editor"
<div class="elementor-element elementor-element-2b96637 elementor-widget__width-inherit elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-text-editor"
data-id="2b96637" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>+1 800 642 73 98</p>
</div>
</div> -->
</div>
<div class="elementor-element elementor-element-18fc20a elementor-widget elementor-widget-logico_search"
data-id="18fc20a" data-element_type="widget"
data-widget_type="logico_search.default">
@@ -548,7 +549,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
@@ -563,8 +564,8 @@
<div class="elementor-widget-container">
<div class="header-button-container"><a
href="https://demo.artureanec.com/themes/logico-rounded/contacts/"
target="_blank" class="header-button header-button-animation-fade">Track a
shipment</a></div>
target="_blank" class="header-button header-button-animation-fade">Request
Demo</a></div>
</div>
</div>
</div>

264
includes/problem.php
View File

@@ -1,7 +1,11 @@
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--red: #c01227;
@@ -11,12 +15,12 @@
--muted: #8d93a8;
--bg: #f3f4f7;
--white: #ffffff;
--card-shadow: 0 4px 30px rgba(0,0,0,0.07);
--card-shadow-hover: 0 16px 60px rgba(232,55,42,0.13);
--card-shadow: 0 4px 30px rgba(0, 0, 0, 0.07);
--card-shadow-hover: 0 16px 60px rgba(232, 55, 42, 0.13);
}
body {
font-family: 'Barlow', sans-serif;
font-family: "Manrope", Sans-serif;
background: var(--bg);
min-height: 100vh;
display: flex;
@@ -42,8 +46,8 @@
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
border-radius: 24px;
@@ -104,13 +108,14 @@
content: '';
position: absolute;
bottom: 4px;
left: 0; right: 0;
left: 0;
right: 0;
height: 3px;
background: var(--red);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.9s;
transition: transform 0.8s cubic-bezier(.16, 1, .3, 1) 0.9s;
}
.section-subtitle {
@@ -130,10 +135,24 @@
}
/* ─── IN-VIEW TRIGGERS ─── */
.in-view .eyebrow { opacity: 1; transform: translateY(0); }
.in-view .section-title { opacity: 1; transform: translateY(0); }
.in-view .section-title em::after { transform: scaleX(1); }
.in-view .section-subtitle { opacity: 1; transform: translateY(0); }
.in-view .eyebrow {
opacity: 1;
transform: translateY(0);
}
.in-view .section-title {
opacity: 1;
transform: translateY(0);
}
.in-view .section-title em::after {
transform: scaleX(1);
}
.in-view .section-subtitle {
opacity: 1;
transform: translateY(0);
}
/* ─── STAT CARDS ─── */
.cards-grid {
@@ -153,14 +172,22 @@
opacity: 0;
transform: translateY(50px) scale(0.97);
transition:
opacity 0.65s cubic-bezier(.16,1,.3,1),
transform 0.65s cubic-bezier(.16,1,.3,1),
opacity 0.65s cubic-bezier(.16, 1, .3, 1),
transform 0.65s cubic-bezier(.16, 1, .3, 1),
box-shadow 0.3s ease;
}
.stat-card:nth-child(1) { transition-delay: 0.1s; }
.stat-card:nth-child(2) { transition-delay: 0.25s; }
.stat-card:nth-child(3) { transition-delay: 0.4s; }
.stat-card:nth-child(1) {
transition-delay: 0.1s;
}
.stat-card:nth-child(2) {
transition-delay: 0.25s;
}
.stat-card:nth-child(3) {
transition-delay: 0.4s;
}
.in-view .stat-card {
opacity: 1;
@@ -176,30 +203,38 @@
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
}
.stat-card:hover::before,
.in-view .stat-card::before { transform: scaleX(1); }
.in-view .stat-card::before {
transform: scaleX(1);
}
/* Subtle radial glow on hover */
.stat-card::after {
content: '';
position: absolute;
top: -60px; left: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(232,55,42,0.06) 0%, transparent 70%);
top: -60px;
left: -60px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(232, 55, 42, 0.06) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.stat-card:hover::after { opacity: 1; }
.stat-card:hover::after {
opacity: 1;
}
/* ─── ICON ─── */
.card-icon-wrap {
@@ -211,7 +246,7 @@
align-items: center;
justify-content: center;
margin-bottom: 28px;
transition: transform 0.35s cubic-bezier(.16,1,.3,1), background 0.3s;
transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), background 0.3s;
}
.stat-card:hover .card-icon-wrap {
@@ -230,7 +265,9 @@
transition: stroke 0.3s;
}
.stat-card:hover .card-icon-wrap svg { stroke: #fff; }
.stat-card:hover .card-icon-wrap svg {
stroke: #fff;
}
/* ─── NUMBER COUNTER ─── */
.card-number {
@@ -273,12 +310,23 @@
border-radius: 3px;
background: linear-gradient(90deg, var(--red), #ff7b6e);
width: 0%;
transition: width 1.4s cubic-bezier(.16,1,.3,1);
transition: width 1.4s cubic-bezier(.16, 1, .3, 1);
}
.in-view .stat-card:nth-child(1) .card-bar-fill { width: 73%; transition-delay: 0.8s; }
.in-view .stat-card:nth-child(2) .card-bar-fill { width: 40%; transition-delay: 0.95s; }
.in-view .stat-card:nth-child(3) .card-bar-fill { width: 60%; transition-delay: 1.1s; }
.in-view .stat-card:nth-child(1) .card-bar-fill {
width: 73%;
transition-delay: 0.8s;
}
.in-view .stat-card:nth-child(2) .card-bar-fill {
width: 40%;
transition-delay: 0.95s;
}
.in-view .stat-card:nth-child(3) .card-bar-fill {
width: 60%;
transition-delay: 1.1s;
}
/* ─── FLOATING BADGE ─── */
.float-badge {
@@ -299,13 +347,16 @@
transition: opacity 0.3s, transform 0.3s;
}
.stat-card:hover .float-badge { opacity: 1; transform: translateY(0); }
.stat-card:hover .float-badge {
opacity: 1;
transform: translateY(0);
}
/* ─── LARGE DESKTOP (1440px+) ─── */
@media (min-width: 1440px) {
.problem-section {
max-width: 1560px;
max-width: 1400px;
padding: 60px 52px 60px;
}
@@ -585,18 +636,22 @@
}
</style>
</head>
<body>
<section class="problem-section" id="problem">
<div class="section-header">
<div class="eyebrow">The Problem</div>
<h2 class="section-title">Fragmented Logistics<br>is <em>Broken</em></h2>
<p class="section-subtitle">When first, mid, and last mile operate independently, nobody owns the outcome. Handoffs become failure points. Delays cascade.</p>
</div>
<section class="problem-section" id="problem">
<div class="section-header">
<div class="eyebrow">The Problem</div>
<h2 class="section-title">Fragmented Logistics<br>is <em>Broken</em></h2>
<p class="section-subtitle">When first, mid, and last mile operate independently, nobody owns the outcome.
Handoffs become failure points. Delays cascade.</p>
</div>
<div class="cards-grid">
<!-- Card 1 -->
<!-- <div class="cards-grid">
<div class="stat-card">
<span class="float-badge">Critical</span>
<div class="card-icon-wrap">
@@ -613,7 +668,7 @@
<div class="card-bar"><div class="card-bar-fill"></div></div>
</div>
<!-- Card 2 -->
<div class="stat-card">
<span class="float-badge">High Risk</span>
<div class="card-icon-wrap">
@@ -629,7 +684,7 @@
<div class="card-bar"><div class="card-bar-fill"></div></div>
</div>
<!-- Card 3 -->
<div class="stat-card">
<span class="float-badge">Inefficiency</span>
<div class="card-icon-wrap">
@@ -645,66 +700,69 @@
<div class="card-bar"><div class="card-bar-fill"></div></div>
</div>
</div>
</section>
</div> -->
<script>
// ─── INTERSECTION OBSERVER ───
const section = document.getElementById('problem');
<?php include 'includes/section2.php'; ?>
</section>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view');
startCounters();
observer.unobserve(entry.target);
}
<script>
// ─── INTERSECTION OBSERVER ───
const section = document.getElementById('problem');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view');
startCounters();
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
observer.observe(section);
// Auto-trigger since we're in a standalone demo
setTimeout(() => {
section.classList.add('in-view');
startCounters();
}, 300);
// ─── COUNTER ANIMATION ───
function startCounters() {
document.querySelectorAll('.counter').forEach(el => {
const target = parseFloat(el.dataset.target);
const decimals = parseInt(el.dataset.decimals || '0');
const step = parseFloat(el.dataset.step || '1');
const duration = 1800;
const startTime = performance.now();
function update(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
// Ease out expo
const ease = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
const current = ease * target;
el.textContent = decimals > 0 ? current.toFixed(decimals) : Math.floor(current);
if (progress < 1) requestAnimationFrame(update);
}
requestAnimationFrame(update);
});
}
// ─── PARALLAX TILT ON CARDS ───
document.querySelectorAll('.stat-card').forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
card.style.transform = `translateY(-6px) scale(1.01) rotateX(${-y * 5}deg) rotateY(${x * 5}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
}, { threshold: 0.2 });
observer.observe(section);
// Auto-trigger since we're in a standalone demo
setTimeout(() => {
section.classList.add('in-view');
startCounters();
}, 300);
// ─── COUNTER ANIMATION ───
function startCounters() {
document.querySelectorAll('.counter').forEach(el => {
const target = parseFloat(el.dataset.target);
const decimals = parseInt(el.dataset.decimals || '0');
const step = parseFloat(el.dataset.step || '1');
const duration = 1800;
const startTime = performance.now();
function update(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
// Ease out expo
const ease = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
const current = ease * target;
el.textContent = decimals > 0 ? current.toFixed(decimals) : Math.floor(current);
if (progress < 1) requestAnimationFrame(update);
}
requestAnimationFrame(update);
});
}
// ─── PARALLAX TILT ON CARDS ───
document.querySelectorAll('.stat-card').forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
card.style.transform = `translateY(-6px) scale(1.01) rotateX(${-y * 5}deg) rotateY(${x * 5}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
</script>
</script>
</body>
</html>
</html>

188
includes/section2.php Normal file
View File

@@ -0,0 +1,188 @@
<div class="elementor-element elementor-element-846ec29 e-grid e-con-full cut-corner-no sticky-container-off e-con e-parent"
data-id="846ec29" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-e51a21a e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="e51a21a" data-element_type="container" data-e-type="container"
data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="elementor-element elementor-element-b76ab0c elementor-widget elementor-widget-logico_heading"
data-id="b76ab0c" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<h2 class="logico-title">73%
</h2>
</div>
</div>
<div class="elementor-element elementor-element-7b9bdaf elementor-widget elementor-widget-text-editor"
data-id="7b9bdaf" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>of delays happen at handoffs</p>
</div>
</div>
<div class="elementor-element elementor-element-fa2a4fc elementor-widget-divider--view-line elementor-widget elementor-widget-divider"
data-id="fa2a4fc" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator"></span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-39ccb36 elementor-align-start elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
data-id="39ccb36" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Lack of clear ownership</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Poor communication</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Process gaps</span>
</li>
<!-- <li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Transportation</span>
</li> -->
</ul>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f21cefd e-con-full e-flex sticky-container-off e-con e-child"
data-id="f21cefd" data-element_type="container" data-e-type="container"
data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="elementor-element elementor-element-97b08df elementor-widget elementor-widget-logico_heading"
data-id="97b08df" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<h2 class="logico-title">40%
</h5>
</div>
</div>
<div class="elementor-element elementor-element-ca2e835 elementor-widget elementor-widget-text-editor"
data-id="ca2e835" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>of shipments require intervention</p>
</div>
</div>
<div class="elementor-element elementor-element-aaaed9e elementor-widget-divider--view-line elementor-widget elementor-widget-divider"
data-id="aaaed9e" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator"></span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-39ccb36 elementor-align-start elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
data-id="39ccb36" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Manual checks</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Data errors</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Process delays</span>
</li>
<!-- <li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Transportation</span>
</li> -->
</ul>
</div>
</div>
</div>
<div class="elementor-element elementor-element-c4c35c7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="c4c35c7" data-element_type="container" data-e-type="container"
data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="elementor-element elementor-element-29ec1ac elementor-widget elementor-widget-logico_heading"
data-id="29ec1ac" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<h2 class="logico-title">2.5x
</h5>
</div>
</div>
<div class="elementor-element elementor-element-157eebf elementor-widget elementor-widget-text-editor"
data-id="157eebf" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>more time spent on coordination</p>
</div>
</div>
<div class="elementor-element elementor-element-b431db1 elementor-widget-divider--view-line elementor-widget elementor-widget-divider"
data-id="b431db1" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
<div class="elementor-widget-container">
<div class="elementor-divider">
<span class="elementor-divider-separator"></span>
</div>
</div>
</div>
<div class="elementor-element elementor-element-39ccb36 elementor-align-start elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
data-id="39ccb36" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Manual follow-ups</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Team dependencies</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Communication gaps</span>
</li>
<!-- <li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-button-arrow-x-r-down"></i>
</span>
<span class="elementor-icon-list-text">Transportation</span>
</li> -->
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-6cc2123 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="6cc2123" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-79f02be elementor-widget__width-auto elementor-widget elementor-widget-text-editor" data-id="79f02be" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>2.750</p>
</div>
</div>
<div class="elementor-element elementor-element-6ed5790 elementor-widget__width-auto elementor-widget elementor-widget-text-editor" data-id="6ed5790" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>
People work<br/>in Logico
</p>
</div>
</div>
</div> -->
</div>
</div>

176
includes/services.php Normal file
View File

@@ -0,0 +1,176 @@
<div class="elementor-element elementor-element-30fd9d1 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent"
data-id="30fd9d1" data-element_type="container">
<div class="e-con-inner">
<div class="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">
<div class="elementor-element elementor-element-3fe4ca3 elementor-widget elementor-widget-logico_heading"
data-id="3fe4ca3" data-element_type="widget"
data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<div class="logico-title">/ services /
</div>
</div>
</div>
<div class="elementor-element elementor-element-ffd1f7d elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading"
data-id="ffd1f7d" data-element_type="widget"
data-settings="{&quot;_animation&quot;:&quot;logico_heading_animation&quot;}"
data-widget_type="logico_heading.default">
<div class="elementor-widget-container">
<h3 class="logico-title">Logistic services which we provide to our customers
</h3>
</div>
</div>
<div class="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">
<div class="elementor-element elementor-element-81a7690 elementor-view-default elementor-position-top elementor-mobile-position-top elementor-widget elementor-widget-icon-box"
data-id="81a7690" data-element_type="widget"
data-widget_type="icon-box.default">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<span class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"
style="width:80px; height:80px; display:block;"
xml:space="preserve" class="">
<g>
<path
d="M41.211 37.288a4.112 4.112 0 1 1 4.109-4.112 4.114 4.114 0 0 1-4.109 4.112zm0-6.724a2.612 2.612 0 1 0 2.609 2.612 2.613 2.613 0 0 0-2.609-2.612zM19.542 37.288a4.112 4.112 0 1 1 4.108-4.112 4.115 4.115 0 0 1-4.108 4.112zm0-6.724a2.612 2.612 0 1 0 2.608 2.612 2.614 2.614 0 0 0-2.608-2.612z"
fill="#000000" opacity="1"
data-original="#000000" class=""></path>
<path
d="M46.621 33.926H44.57a.75.75 0 0 1 0-1.5h1.839v-3.977a3.16 3.16 0 0 0-.4-1.536l-4.06-7.279a.4.4 0 0 0-.349-.205h-5.533v13h1.786a.75.75 0 0 1 0 1.5h-2.536a.75.75 0 0 1-.75-.75v-14.5a.75.75 0 0 1 .75-.75H41.6a1.9 1.9 0 0 1 1.66.974l4.059 7.28a4.662 4.662 0 0 1 .589 2.266v4.19a1.289 1.289 0 0 1-1.287 1.287zM16.183 33.926H8.992a.75.75 0 0 1-.75-.75v-5.768a.75.75 0 0 1 1.5 0v5.018h6.441a.75.75 0 0 1 0 1.5zM8.992 24.747a.75.75 0 0 1-.75-.75v-5.036a.75.75 0 0 1 1.5 0V24a.75.75 0 0 1-.75.747z"
fill="#000000" opacity="1"
data-original="#000000" class=""></path>
<path
d="M35.317 33.926H22.9a.75.75 0 0 1 0-1.5h11.667V12.805H9.742v3.089a.75.75 0 0 1-1.5 0v-3.227a1.364 1.364 0 0 1 1.363-1.362h25.1a1.364 1.364 0 0 1 1.362 1.362v20.509a.75.75 0 0 1-.75.75zM11.957 28.158H2.438a.75.75 0 0 1 0-1.5h9.519a.75.75 0 0 1 0 1.5z"
fill="#000000" opacity="1"
data-original="#000000" class=""></path>
<path
d="M19.542 24.747H6.259a.75.75 0 0 1 0-1.5h13.283a.75.75 0 0 1 0 1.5zM5.846 20.787H.659a.75.75 0 1 1 0-1.5h5.187a.75.75 0 0 1 0 1.5zM14.163 16.644H5.007a.75.75 0 1 1 0-1.5h9.156a.75.75 0 0 1 0 1.5z"
fill="#000000" opacity="1"
data-original="#000000" class=""></path>
</g>
</svg>
</div>
<div class="elementor-icon-box-content">
<div class="elementor-icon-box-title">
<span>
Expedited LTL </span>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-0f4aa27 elementor-view-default elementor-position-top elementor-mobile-position-top elementor-widget elementor-widget-icon-box"
data-id="0f4aa27" data-element_type="widget"
data-widget_type="icon-box.default">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<span class="elementor-icon">
<i aria-hidden="true" class="fontello icon-container"></i>
</span>
</div>
<div class="elementor-icon-box-content">
<div class="elementor-icon-box-title">
<span>
Truckload </span>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-6cfd203 elementor-view-default elementor-position-top elementor-mobile-position-top elementor-widget elementor-widget-icon-box"
data-id="6cfd203" data-element_type="widget"
data-widget_type="icon-box.default">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<span class="elementor-icon">
<i aria-hidden="true" class="fontello icon-trolley"></i>
</span>
</div>
<div class="elementor-icon-box-content">
<div class="elementor-icon-box-title">
<span>
Final mile </span>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-0d343e1 elementor-view-default elementor-position-top elementor-mobile-position-top elementor-widget elementor-widget-icon-box"
data-id="0d343e1" data-element_type="widget"
data-widget_type="icon-box.default">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<span class="elementor-icon">
<i aria-hidden="true"
class="fontello icon-supply-chain"></i> </span>
</div>
<div class="elementor-icon-box-content">
<div class="elementor-icon-box-title">
<span>
Brokerage </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-5a5c397 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="5a5c397" data-element_type="container">
<div class="elementor-element elementor-element-07cd509 elementor-widget__width-initial elementor-widget elementor-widget-text-editor"
data-id="07cd509" data-element_type="widget"
data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Reliable transportation solutions built for speed, scale, and
precision. From time-critical shipments to full-capacity movements
and final-stage delivery, every mile is managed with efficiency and
control. Flexible coordination ensures freight keeps moving
smoothly, even during peak demand</p>
</div>
</div>
<div class="elementor-element elementor-element-1808c14 elementor-widget__width-initial elementor-widget elementor-widget-logico_button"
data-id="1808c14" data-element_type="widget"
data-widget_type="logico_button.default">
<div class="elementor-widget-container">
<!-- <div class="button-widget">
<div class="button-container">
<a href="https://demo.artureanec.com/themes/logico-rounded/services-page/" target="_blank" class="logico-alter-button">
All services </a>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>

31
includes/stats_banner.php Normal file
View File

@@ -0,0 +1,31 @@
<div class="stats-bar">
<div class="stats-inner1">
<div class="stat-item reveal reveal-d1">
<div class="stat-num">99.2 <span>%</span></div>
<div class="stat-lbl">On-Time Delivery</div>
</div>
<div class="stat-item reveal reveal-d2">
<div class="stat-num">3<span>x</span></div>
<div class="stat-lbl">Faster Response</div>
</div>
<div class="stat-item reveal reveal-d3">
<div class="stat-num">40<span>%</span></div>
<div class="stat-lbl">Cost Reduction</div>
</div>
<!-- <div class="stat-item reveal reveal-d4">
<div class="stat-num">15 </div>
<div class="stat-lbl">Cities Covered</div>
</div> -->
</div>
</div>
<style>
.stats-inner1 {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
position: relative;
z-index: 2;
}
</style>

163
includes/testimonials.php
View File

@@ -1,77 +1,104 @@
<div class="elementor elementor-61">
<div class="elementor-element elementor-element-de254c2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="de254c2" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-d5b30d0 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d5b30d0" data-element_type="container">
<div class="elementor-element elementor-element-609bbad e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="609bbad" data-element_type="container">
<div class="elementor-element elementor-element-e6879ea elementor-widget elementor-widget-image" data-id="e6879ea" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="491" height="373" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/09/home2-pic-2.png" class="attachment-full size-full wp-image-4396" alt="" /> </div>
<div class="elementor-element elementor-element-de254c2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child"
data-id="de254c2" data-element_type="container"
data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="e-con-inner">
<div class="elementor-element elementor-element-d5b30d0 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="d5b30d0" data-element_type="container">
<div class="elementor-element elementor-element-609bbad e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="609bbad" data-element_type="container">
<div class="elementor-element elementor-element-e6879ea elementor-widget elementor-widget-image"
data-id="e6879ea" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img loading="lazy" decoding="async" width="491" height="373"
src="/assets/images/home2-pic-2.png" class="attachment-full size-full wp-image-4396"
alt="" />
</div>
</div>
</div>
<div class="elementor-element elementor-element-ebf6c8d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="ebf6c8d" data-element_type="container">
<div class="elementor-element elementor-element-1632aa3 elementor-widget elementor-widget-logico_testimonial_carousel"
data-id="1632aa3" data-element_type="widget"
data-widget_type="logico_testimonial_carousel.default">
<div class="elementor-widget-container">
<div class="logico-testimonial-carousel-widget">
<div class="testimonial-carousel-wrapper witch-icon">
<div class="testimonials-slider-container">
<div class="testimonials-slider owl-carousel owl-theme"
data-slider-options="{&quot;items&quot;:1,&quot;itemsWidescreen&quot;:1,&quot;itemsLaptop&quot;:1,&quot;itemsTabletExtra&quot;:1,&quot;itemsTablet&quot;:1,&quot;itemsMobileExtra&quot;:1,&quot;itemsMobile&quot;:1,&quot;nav&quot;:false,&quot;dots&quot;:true,&quot;progress&quot;:true,&quot;autoplayHoverPause&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:300,&quot;autoplayTimeout&quot;:5000,&quot;loop&quot;:true,&quot;dragEndSpeed&quot;:500,&quot;navSpeed&quot;:500,&quot;dotsSpeed&quot;:500,&quot;dotsContainer&quot;:&quot;.owl-dots-1632aa3&quot;,&quot;rtl&quot;:false}">
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon
armoured catfish gudgeon sawfish whitefish orbicular batfish
mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia
spookfish convict cichlid, "cat shark; saw shark trout cod."
Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon
armoured catfish gudgeon sawfish whitefish orbicular batfish
mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia
spookfish convict cichlid, "cat shark; saw shark trout cod."
Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon
armoured catfish gudgeon sawfish whitefish orbicular batfish
mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia
spookfish convict cichlid, "cat shark; saw shark trout cod."
Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-ebf6c8d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ebf6c8d" data-element_type="container">
<div class="elementor-element elementor-element-1632aa3 elementor-widget elementor-widget-logico_testimonial_carousel" data-id="1632aa3" data-element_type="widget" data-widget_type="logico_testimonial_carousel.default">
<div class="elementor-widget-container">
<div class="logico-testimonial-carousel-widget">
<div class="testimonial-carousel-wrapper witch-icon">
<div class="testimonials-slider-container">
<div class="testimonials-slider owl-carousel owl-theme" data-slider-options="{&quot;items&quot;:1,&quot;itemsWidescreen&quot;:1,&quot;itemsLaptop&quot;:1,&quot;itemsTabletExtra&quot;:1,&quot;itemsTablet&quot;:1,&quot;itemsMobileExtra&quot;:1,&quot;itemsMobile&quot;:1,&quot;nav&quot;:false,&quot;dots&quot;:true,&quot;progress&quot;:true,&quot;autoplayHoverPause&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:300,&quot;autoplayTimeout&quot;:5000,&quot;loop&quot;:true,&quot;dragEndSpeed&quot;:500,&quot;navSpeed&quot;:500,&quot;dotsSpeed&quot;:500,&quot;dotsContainer&quot;:&quot;.owl-dots-1632aa3&quot;,&quot;rtl&quot;:false}">
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
<div class="testimonial-item slider-item">
<div class="testimonial-text">
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
mackerel snake mackerel upside-down shark</p>
</div>
<div class="testimonial-author-info">
<div class="testimonial-author">Adrian Mitchel </div>
<div class="testimonial-company">SolarInc</div>
</div>
</div>
</div>
<div class="slider-footer slider-footer-view-outside slider-footer-position-after slider-footer-width-full">
<div class="slider-footer-content">
<div class="slider-pagination">
<div class="slider-progress-wrapper"><span class="slider-progress-current">01</span> /<span class="slider-progress-all">01</span></div>
<div class="owl-dots owl-dots-1632aa3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="slider-footer slider-footer-view-outside slider-footer-position-after slider-footer-width-full">
<div class="slider-footer-content">
<div class="slider-pagination">
<div class="slider-progress-wrapper"><span
class="slider-progress-current">01</span> /<span
class="slider-progress-all">01</span></div>
<div class="owl-dots owl-dots-1632aa3"></div>
</div>
</div>
</div>
</div>
<!-- <div class="elementor-element elementor-element-ab691ea elementor-absolute elementor-widget elementor-widget-logico_decorative_block" data-id="ab691ea" data-element_type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="logico_decorative_block.default">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="elementor-element elementor-element-ab691ea elementor-absolute elementor-widget elementor-widget-logico_decorative_block" data-id="ab691ea" data-element_type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="logico_decorative_block.default">
<div class="elementor-widget-container">
<div class="block-decoration animation-enable block-decoration-style-1">
<div class="block-decoration-item">
@@ -79,6 +106,6 @@
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>

321
includes/why_miletruth.php
View File

@@ -1,323 +1,4 @@
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700;800;900&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════
SCOPED TO .mt-section — NO GLOBALS
══════════════════════════════════════ */
.mt-section *, .mt-section *::before, .mt-section *::after { box-sizing: border-box; }
.mt-section {
--mt-red: #c01227;
--mt-red-dk: #8f0d1d;
--mt-red-light: #fdf0f2;
--mt-red-mid: rgba(192,18,39,0.1);
--mt-dark: #111827;
--mt-mid: #374151;
--mt-muted: #9ca3af;
--mt-border: rgba(0,0,0,0.07);
--mt-white: #ffffff;
--mt-bg: #f3f4f7;
width: 100%;
font-family: 'Barlow', sans-serif;
color: var(--mt-dark);
background: var(--mt-bg);
}
/* ══ STATS BANNER ══ */
.mt-banner {
background: linear-gradient(135deg, var(--mt-red) 0%, var(--mt-red-dk) 100%);
padding: 0px 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
position: relative;
overflow: hidden;
}
/* animated diagonal shine */
.mt-banner::before {
content: '';
position: absolute;
top: -80px; left: -120px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
pointer-events: none;
}
.mt-banner::after {
content: '';
position: absolute;
bottom: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
pointer-events: none;
}
.mt-stat {
padding: 36px 20px;
text-align: center;
position: relative;
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.mt-stat:not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 25%; bottom: 25%;
width: 1px;
background: rgba(255,255,255,0.2);
}
.mt-section.mt-live .mt-stat:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.1s; }
.mt-section.mt-live .mt-stat:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.22s; }
.mt-section.mt-live .mt-stat:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.34s; }
.mt-section.mt-live .mt-stat:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:.46s; }
.mt-stat-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(36px, 4.5vw, 54px);
font-weight: 700;
color: #fff;
line-height: 1;
letter-spacing: -1px;
display: block;
margin-bottom: 8px;
}
.mt-stat-label {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.72);
letter-spacing: .5px;
text-transform: uppercase;
}
/* ══ BODY SECTION ══ */
.mt-body {
max-width: 1100px;
margin: 0 auto;
padding: 88px 40px 20px;
position: relative;
}
/* grid background */
.mt-body::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.032) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.032) 1px, transparent 1px);
background-size: 68px 68px;
pointer-events: none;
mask-image: radial-gradient(ellipse 88% 80% at 50% 40%, black 30%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 88% 80% at 50% 40%, black 30%, transparent 100%);
}
/* ── HEADER ── */
.mt-header {
text-align: center;
margin-bottom: 64px;
position: relative;
z-index: 1;
}
.mt-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--mt-red);
margin-bottom: 18px;
opacity: 0;
transform: translateY(16px);
transition: opacity .55s ease .05s, transform .55s ease .05s;
}
.mt-eyebrow::before, .mt-eyebrow::after {
content: ''; display: block;
width: 28px; height: 1px;
background: var(--mt-red);
}
.mt-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(34px, 5vw, 60px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -1.2px;
color: var(--mt-dark);
margin: 0 0 18px;
opacity: 0;
transform: translateY(26px);
transition: opacity .65s ease .17s, transform .65s ease .17s;
}
.mt-title em { font-style: normal; color: var(--mt-red); }
.mt-title sup {
font-size: .45em;
font-weight: 700;
vertical-align: super;
color: var(--mt-red);
}
.mt-desc {
font-size: 15.5px;
color: var(--mt-muted);
line-height: 1.75;
max-width: 540px;
margin: 0 auto;
opacity: 0;
transform: translateY(16px);
transition: opacity .65s ease .3s, transform .65s ease .3s;
}
/* in-view header */
.mt-section.mt-live .mt-eyebrow { opacity: 1; transform: translateY(0); }
.mt-section.mt-live .mt-title { opacity: 1; transform: translateY(0); }
.mt-section.mt-live .mt-desc { opacity: 1; transform: translateY(0); display: inline-block; }
/* ── FEATURE GRID ── */
.mt-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.mt-card {
background: var(--mt-white);
border-radius: 20px;
padding: 34px 28px 30px;
position: relative;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0,0,0,0.065);
cursor: default;
opacity: 0;
transform: translateY(40px) scale(.98);
transition:
opacity .6s cubic-bezier(.16,1,.3,1),
transform .6s cubic-bezier(.16,1,.3,1),
box-shadow .3s ease;
}
/* staggered card reveals */
.mt-section.mt-live .mt-card:nth-child(1) { opacity:1; transform:translateY(0) scale(1); transition-delay:.42s; }
.mt-section.mt-live .mt-card:nth-child(2) { opacity:1; transform:translateY(0) scale(1); transition-delay:.54s; }
.mt-section.mt-live .mt-card:nth-child(3) { opacity:1; transform:translateY(0) scale(1); transition-delay:.66s; }
.mt-section.mt-live .mt-card:nth-child(4) { opacity:1; transform:translateY(0) scale(1); transition-delay:.78s; }
.mt-section.mt-live .mt-card:nth-child(5) { opacity:1; transform:translateY(0) scale(1); transition-delay:.90s; }
.mt-section.mt-live .mt-card:nth-child(6) { opacity:1; transform:translateY(0) scale(1); transition-delay:1.02s; }
/* top accent bar on hover */
.mt-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--mt-red), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.mt-card:hover::before { transform: scaleX(1); }
/* background glow */
.mt-card::after {
content: '';
position: absolute;
top: -40px; left: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(192,18,39,0.06) 0%, transparent 70%);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.mt-card:hover::after { opacity: 1; }
.mt-card:hover {
box-shadow: 0 16px 52px rgba(192,18,39,0.12);
transform: translateY(-5px) scale(1.01) !important;
}
/* icon */
.mt-card-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: var(--mt-red-light);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s;
}
.mt-card:hover .mt-card-icon {
transform: rotate(-8deg) scale(1.1);
background: var(--mt-red);
}
.mt-card-icon svg {
width: 22px; height: 22px;
stroke: var(--mt-red); fill: none;
stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
transition: stroke .3s;
}
.mt-card:hover .mt-card-icon svg { stroke: #fff; }
/* card text */
.mt-card-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -.3px;
color: var(--mt-dark);
margin: 0 0 10px;
}
.mt-card-desc {
font-size: 13.5px;
line-height: 1.65;
color: var(--mt-muted);
margin: 0;
}
/* card bottom tag */
.mt-card-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 18px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--mt-red);
opacity: 0;
transform: translateX(-6px);
transition: opacity .3s, transform .3s;
}
.mt-card-tag::after {
content: '';
display: block;
width: 16px; height: 1px;
background: var(--mt-red);
transition: width .35s cubic-bezier(.16,1,.3,1);
}
.mt-card:hover .mt-card-tag { opacity: 1; transform: translateX(0); }
.mt-card:hover .mt-card-tag::after { width: 26px; }
/* ── RESPONSIVE ── */
@media (max-width: 860px) {
.mt-banner { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
.mt-stat:nth-child(2)::after { display: none; }
.mt-grid { grid-template-columns: repeat(2, 1fr); }
.mt-body { padding: 60px 20px 70px; }
}
@media (max-width: 540px) {
.mt-grid { grid-template-columns: 1fr; }
.mt-banner { grid-template-columns: repeat(2, 1fr); }
}
</style>
<?php include("head.php"); ?>
<!-- ══ SECTION HTML ══ -->
<div class="mt-section" id="mt-miletruth">