index pages are updated
This commit is contained in:
687
includes/comparision.php
Normal file
687
includes/comparision.php
Normal file
@@ -0,0 +1,687 @@
|
||||
|
||||
<style>
|
||||
/* ── ALL STYLES SCOPED UNDER .dm-compare-section ── */
|
||||
|
||||
.dm-compare-section *,
|
||||
.dm-compare-section *::before,
|
||||
.dm-compare-section *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dm-compare-section {
|
||||
--dm-red: #c01227;
|
||||
--dm-red-light: #fdf0f2;
|
||||
--dm-red-border: rgba(192, 18, 39, 0.12);
|
||||
--dm-red-hover: rgba(192, 18, 39, 0.025);
|
||||
--dm-green: #1dab6e;
|
||||
--dm-green-light: #edfaf4;
|
||||
--dm-dark: #1a1e2e;
|
||||
--dm-muted: #8d93a8;
|
||||
--dm-white: #ffffff;
|
||||
--dm-border: rgba(0, 0, 0, 0.07);
|
||||
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 50px 40px 0px;
|
||||
position: relative;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.dm-compare-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px);
|
||||
background-size: 70px 70px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
z-index: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.dm-compare-section .dm-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-red);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 1px;
|
||||
background: var(--dm-red);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(36px, 5vw, 62px);
|
||||
font-weight: 800;
|
||||
color: var(--dm-dark);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 0.65s ease 0.12s, transform 0.65s ease 0.12s;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em {
|
||||
font-style: normal;
|
||||
color: var(--dm-red);
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 3px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--dm-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.85s;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
color: var(--dm-muted);
|
||||
line-height: 1.7;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.65s ease 0.26s, transform 0.65s ease 0.26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.dm-compare-section.dm-in-view .dm-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title em::after { transform: scaleX(1); }
|
||||
.dm-compare-section.dm-in-view .dm-section-sub { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 50px rgba(0,0,0,0.09);
|
||||
background: var(--dm-white);
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.75s cubic-bezier(.16,1,.3,1) 0.35s,
|
||||
transform 0.75s cubic-bezier(.16,1,.3,1) 0.35s;
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-wrap { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── COLUMN HEADERS ── */
|
||||
.dm-compare-section .dm-col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-col-headers::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; left: 50%;
|
||||
width: 1px;
|
||||
background: var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 26px 40px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional {
|
||||
background: #f7f8fa;
|
||||
color: var(--dm-muted);
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-bottom: 1px solid var(--dm-red-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
animation: dm-shimmer 3s ease-in-out infinite 1.2s;
|
||||
}
|
||||
@keyframes dm-shimmer {
|
||||
0% { left: -100%; }
|
||||
50% { left: 140%; }
|
||||
100% { left: 140%; }
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon { background: #ececee; }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon { background: rgba(192,18,39,0.15); }
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon svg { stroke: var(--dm-muted); }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon svg { stroke: var(--dm-red); }
|
||||
|
||||
/* ── ROWS ── */
|
||||
.dm-compare-section .dm-compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.55s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.68s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.81s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.94s; }
|
||||
|
||||
.dm-compare-section .dm-compare-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--dm-red-hover);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover::before { opacity: 1; }
|
||||
|
||||
/* ── CELLS ── */
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 28px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-right {
|
||||
border-left: 1px solid var(--dm-border);
|
||||
background: rgba(253,248,248,0.4);
|
||||
}
|
||||
|
||||
/* ── ICONS ── */
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
flex-shrink: 0;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell-icon { transform: scale(1.18) rotate(-5deg); }
|
||||
.dm-compare-section .dm-cell-icon.dm-bad { background: var(--dm-red-light); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good { background: var(--dm-green-light); }
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 15px; height: 15px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-cell-icon.dm-bad svg { stroke: var(--dm-red); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good svg { stroke: var(--dm-green); }
|
||||
|
||||
.dm-compare-section .dm-cell-text {
|
||||
font-weight: 500;
|
||||
color: var(--dm-dark);
|
||||
transition: color 0.2s;
|
||||
margin: 0;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-left .dm-cell-text { color: var(--dm-muted); }
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell.dm-right .dm-cell-text { color: var(--dm-dark); }
|
||||
|
||||
/* ── FOOTER BAR ── */
|
||||
.dm-compare-section .dm-compare-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 22px 40px;
|
||||
font-size: 12px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-muted);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell.dm-right {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-left: 1px solid var(--dm-red-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dm-red);
|
||||
flex-shrink: 0;
|
||||
animation: dm-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dm-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.55); }
|
||||
}
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1360px;
|
||||
padding: 60px 52px 50px;
|
||||
background:#1f1f1f;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
letter-spacing: -1.1px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 30px 44px;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 2.8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 30px 44px;
|
||||
gap: 18px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 24px 44px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 1.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1780px;
|
||||
padding: 72px 64px 60px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(46px, 5vw, 76px);
|
||||
letter-spacing: -1.3px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 17px;
|
||||
margin-top: 22px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 32px 52px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 34px 52px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 26px 52px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1760px;
|
||||
padding: 80px 72px 50px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(52px, 5vw, 84px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 18.5px;
|
||||
margin-top: 26px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 70px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 36px 60px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 38px 60px;
|
||||
gap: 22px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 28px 60px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2.2px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 680px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px; }
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── SECTION HTML ── -->
|
||||
<section class="dm-compare-section" id="dm-compare">
|
||||
|
||||
<div class="dm-section-header">
|
||||
<div class="dm-eyebrow">Why It Matters</div>
|
||||
<h2 class="dm-section-title" style="color:white;">Two Approaches.<br><em>One Clear Winner.</em></h2>
|
||||
<p class="dm-section-sub">See how the Doormile way eliminates the friction that traditional logistics creates at every step.</p>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-wrap">
|
||||
|
||||
<div class="dm-col-headers">
|
||||
<div class="dm-col-head dm-traditional">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</div>
|
||||
Traditional Approach
|
||||
</div>
|
||||
<div class="dm-col-head dm-doormile">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-rows-wrap">
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">First mile ignores last mile SLA</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Every mile protects the final delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Reactive problem discovery</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Proactive delay prevention</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Multiple vendors, no accountability</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Single owner, single promise</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Static plans break at first variance</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Dynamic AI-driven adjustments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-footer">
|
||||
<div class="dm-footer-cell">Outdated · Fragmented · Reactive</div>
|
||||
<div class="dm-footer-cell dm-right">
|
||||
<span class="dm-dot"></span>
|
||||
Unified · Intelligent · Proactive
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('dm-compare');
|
||||
if (!section) return;
|
||||
function activate() { section.classList.add('dm-in-view'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) { activate(); io.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
io.observe(section);
|
||||
} else {
|
||||
setTimeout(activate, 300);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
685
includes/comparision2.php
Normal file
685
includes/comparision2.php
Normal file
@@ -0,0 +1,685 @@
|
||||
|
||||
<style>
|
||||
/* ── ALL STYLES SCOPED UNDER .dm-compare-section ── */
|
||||
|
||||
.dm-compare-section *,
|
||||
.dm-compare-section *::before,
|
||||
.dm-compare-section *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dm-compare-section {
|
||||
--dm-red: #c01227;
|
||||
--dm-red-light: #fdf0f2;
|
||||
--dm-red-border: rgba(192, 18, 39, 0.12);
|
||||
--dm-red-hover: rgba(192, 18, 39, 0.025);
|
||||
--dm-green: #1dab6e;
|
||||
--dm-green-light: #edfaf4;
|
||||
--dm-dark: #1a1e2e;
|
||||
--dm-muted: #8d93a8;
|
||||
--dm-white: #ffffff;
|
||||
--dm-border: rgba(0, 0, 0, 0.07);
|
||||
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 50px 40px 0px;
|
||||
position: relative;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.dm-compare-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px);
|
||||
background-size: 70px 70px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
z-index: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.dm-compare-section .dm-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-red);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 1px;
|
||||
background: var(--dm-red);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(36px, 5vw, 62px);
|
||||
font-weight: 800;
|
||||
color: var(--dm-dark);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 0.65s ease 0.12s, transform 0.65s ease 0.12s;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em {
|
||||
font-style: normal;
|
||||
color: var(--dm-red);
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 3px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--dm-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.85s;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
color: var(--dm-muted);
|
||||
line-height: 1.7;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.65s ease 0.26s, transform 0.65s ease 0.26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.dm-compare-section.dm-in-view .dm-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title em::after { transform: scaleX(1); }
|
||||
.dm-compare-section.dm-in-view .dm-section-sub { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 50px rgba(0,0,0,0.09);
|
||||
background: var(--dm-white);
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.75s cubic-bezier(.16,1,.3,1) 0.35s,
|
||||
transform 0.75s cubic-bezier(.16,1,.3,1) 0.35s;
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-wrap { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── COLUMN HEADERS ── */
|
||||
.dm-compare-section .dm-col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-col-headers::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; left: 50%;
|
||||
width: 1px;
|
||||
background: var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 26px 40px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional {
|
||||
background: #f7f8fa;
|
||||
color: var(--dm-muted);
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-bottom: 1px solid var(--dm-red-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
animation: dm-shimmer 3s ease-in-out infinite 1.2s;
|
||||
}
|
||||
@keyframes dm-shimmer {
|
||||
0% { left: -100%; }
|
||||
50% { left: 140%; }
|
||||
100% { left: 140%; }
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon { background: #ececee; }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon { background: rgba(192,18,39,0.15); }
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon svg { stroke: var(--dm-muted); }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon svg { stroke: var(--dm-red); }
|
||||
|
||||
/* ── ROWS ── */
|
||||
.dm-compare-section .dm-compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.55s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.68s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.81s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.94s; }
|
||||
|
||||
.dm-compare-section .dm-compare-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--dm-red-hover);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover::before { opacity: 1; }
|
||||
|
||||
/* ── CELLS ── */
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 28px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-right {
|
||||
border-left: 1px solid var(--dm-border);
|
||||
background: rgba(253,248,248,0.4);
|
||||
}
|
||||
|
||||
/* ── ICONS ── */
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
flex-shrink: 0;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell-icon { transform: scale(1.18) rotate(-5deg); }
|
||||
.dm-compare-section .dm-cell-icon.dm-bad { background: var(--dm-red-light); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good { background: var(--dm-green-light); }
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 15px; height: 15px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-cell-icon.dm-bad svg { stroke: var(--dm-red); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good svg { stroke: var(--dm-green); }
|
||||
|
||||
.dm-compare-section .dm-cell-text {
|
||||
font-weight: 500;
|
||||
color: var(--dm-dark);
|
||||
transition: color 0.2s;
|
||||
margin: 0;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-left .dm-cell-text { color: var(--dm-muted); }
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell.dm-right .dm-cell-text { color: var(--dm-dark); }
|
||||
|
||||
/* ── FOOTER BAR ── */
|
||||
.dm-compare-section .dm-compare-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 22px 40px;
|
||||
font-size: 12px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-muted);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell.dm-right {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-left: 1px solid var(--dm-red-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dm-red);
|
||||
flex-shrink: 0;
|
||||
animation: dm-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dm-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.55); }
|
||||
}
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1260px;
|
||||
padding: 60px 52px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
letter-spacing: -1.1px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 30px 44px;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 2.8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 30px 44px;
|
||||
gap: 18px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 24px 44px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 1.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1480px;
|
||||
padding: 72px 64px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(46px, 5vw, 76px);
|
||||
letter-spacing: -1.3px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 17px;
|
||||
margin-top: 22px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 32px 52px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 34px 52px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 26px 52px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1760px;
|
||||
padding: 80px 72px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(52px, 5vw, 84px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 18.5px;
|
||||
margin-top: 26px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 70px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 36px 60px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 38px 60px;
|
||||
gap: 22px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 28px 60px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2.2px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 680px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px; }
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── SECTION HTML ── -->
|
||||
<section class="dm-compare-section" id="dm-compare">
|
||||
|
||||
<div class="dm-section-header">
|
||||
<div class="dm-eyebrow">Why It Matters</div>
|
||||
<h2 class="dm-section-title">Traditional Approach<br><em>The Doormile Way</em></h2>
|
||||
<p class="dm-section-sub">See how the Doormile way eliminates the friction that traditional logistics creates at every step.</p>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-wrap">
|
||||
|
||||
<div class="dm-col-headers">
|
||||
<div class="dm-col-head dm-traditional">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</div>
|
||||
Traditional Approach
|
||||
</div>
|
||||
<div class="dm-col-head dm-doormile">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-rows-wrap">
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">3+ vendors to manage</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Single integrated partner</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Fragmented tracking</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Unified timeline view</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Blame games on delays</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Clear accountability</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Reactive problem solving</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">AI-powered predictions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-footer">
|
||||
<div class="dm-footer-cell">Outdated · Fragmented · Reactive</div>
|
||||
<div class="dm-footer-cell dm-right">
|
||||
<span class="dm-dot"></span>
|
||||
Unified · Intelligent · Proactive
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('dm-compare');
|
||||
if (!section) return;
|
||||
function activate() { section.classList.add('dm-in-view'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) { activate(); io.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
io.observe(section);
|
||||
} else {
|
||||
setTimeout(activate, 300);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
969
includes/connected-log.php
Normal file
969
includes/connected-log.php
Normal file
@@ -0,0 +1,969 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* ══════════════════════════════════════════════
|
||||
ALL STYLES SCOPED TO .cs-section
|
||||
══════════════════════════════════════════════ */
|
||||
.cs-section *,
|
||||
.cs-section *::before,
|
||||
.cs-section *::after { box-sizing: border-box; }
|
||||
|
||||
.cs-section {
|
||||
--cs-red: #c01227;
|
||||
--cs-red-light: #fdf0f2;
|
||||
--cs-red-mid: rgba(192,18,39,0.12);
|
||||
--cs-green: #15a056;
|
||||
--cs-blue: #1e6ef5;
|
||||
--cs-dark: #111827;
|
||||
--cs-mid: #374151;
|
||||
--cs-muted: #9ca3af;
|
||||
--cs-border: rgba(0,0,0,0.07);
|
||||
--cs-white: #ffffff;
|
||||
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 40px 108px;
|
||||
position: relative;
|
||||
font-family: 'Barlow', sans-serif;
|
||||
color: var(--cs-dark);
|
||||
}
|
||||
|
||||
/* subtle grid bg */
|
||||
.cs-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
|
||||
background-size: 72px 72px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.cs-header {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--cs-red);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .55s ease, transform .55s ease;
|
||||
}
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px; height: 1px;
|
||||
background: var(--cs-red);
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(38px, 5.5vw, 68px);
|
||||
font-weight: 900;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -1.5px;
|
||||
color: var(--cs-dark);
|
||||
margin: 0 0 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity .65s ease .12s, transform .65s ease .12s;
|
||||
}
|
||||
.cs-title em {
|
||||
font-style: normal;
|
||||
color: var(--cs-red);
|
||||
position: relative;
|
||||
}
|
||||
.cs-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--cs-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform .85s cubic-bezier(.16,1,.3,1) .9s;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--cs-muted);
|
||||
line-height: 1.75;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .65s ease .26s, transform .65s ease .26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.cs-section.cs-live .cs-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.cs-section.cs-live .cs-title { opacity: 1; transform: translateY(0); }
|
||||
.cs-section.cs-live .cs-title em::after { transform: scaleX(1); }
|
||||
.cs-section.cs-live .cs-subtitle { opacity: 1; transform: translateY(0);display:inline-block }
|
||||
|
||||
/* ── MAIN CARD SHELL ── */
|
||||
.cs-card-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--cs-white);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 60px rgba(0,0,0,0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(44px);
|
||||
transition: opacity .8s cubic-bezier(.16,1,.3,1) .3s,
|
||||
transform .8s cubic-bezier(.16,1,.3,1) .3s;
|
||||
}
|
||||
.cs-section.cs-live .cs-card-shell { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── MILESTONE CARDS ROW ── */
|
||||
.cs-milestones {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.cs-mile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition:
|
||||
opacity .55s ease,
|
||||
transform .55s cubic-bezier(.16,1,.3,1),
|
||||
background .3s;
|
||||
}
|
||||
.cs-mile:not(:last-child) { border-right: 1px solid var(--cs-border); }
|
||||
|
||||
.cs-section.cs-live .cs-mile:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.5s; }
|
||||
.cs-section.cs-live .cs-mile:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.64s; }
|
||||
.cs-section.cs-live .cs-mile:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.78s; }
|
||||
|
||||
/* image layer (revealed on hover) */
|
||||
.cs-mile-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0;
|
||||
transform: scale(1.06);
|
||||
transition: opacity .5s ease, transform .6s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
.cs-mile-img::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(253, 253, 253, 0.85) 0%, rgba(17,24,39,0.9) 100%);
|
||||
}
|
||||
.cs-mile:hover .cs-mile-img { opacity: 1; transform: scale(1); }
|
||||
|
||||
/* content */
|
||||
.cs-mile-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 36px 32px 34px;
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.cs-mile-icon {
|
||||
width: 56px; height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 22px;
|
||||
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
|
||||
}
|
||||
.cs-mile:hover .cs-mile-icon {
|
||||
transform: scale(1.1) rotate(-6deg);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.28);
|
||||
}
|
||||
.cs-mile-icon svg {
|
||||
width: 24px; height: 24px;
|
||||
stroke: #fff; fill: none;
|
||||
stroke-width: 1.9;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* tag */
|
||||
.cs-mile-tag {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color .3s;
|
||||
}
|
||||
.cs-mile-tag::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 20px; height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: width .4s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.cs-mile:hover .cs-mile-tag::before { width: 34px; }
|
||||
|
||||
.cs-mile-name {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -.4px;
|
||||
margin: 0 0 10px;
|
||||
transition: color .3s;
|
||||
}
|
||||
.cs-mile-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
color: var(--cs-muted);
|
||||
margin: 0;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
/* hover → text goes white */
|
||||
.cs-mile:hover .cs-mile-tag,
|
||||
.cs-mile:hover .cs-mile-name { color: rgba(255,255,255,.95); }
|
||||
.cs-mile:hover .cs-mile-desc { color: rgba(255,255,255,.72); }
|
||||
|
||||
/* active (first) mile */
|
||||
.cs-mile.cs-active { background: var(--cs-red-light); }
|
||||
|
||||
/* pulsing badge */
|
||||
.cs-active-badge {
|
||||
position: absolute;
|
||||
top: 20px; right: 20px;
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--cs-red);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
animation: cs-ring 2.4s ease-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
.cs-active-badge svg {
|
||||
width: 13px; height: 13px;
|
||||
stroke: #fff; fill: none;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
@keyframes cs-ring {
|
||||
0% { box-shadow: 0 0 0 0 rgba(192,18,39,.45); }
|
||||
65% { box-shadow: 0 0 0 11px rgba(192,18,39,.0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(192,18,39,.0); }
|
||||
}
|
||||
|
||||
/* arrow connector between cards */
|
||||
.cs-arrow {
|
||||
position: absolute;
|
||||
top: 50%; right: 0px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
width: 26px; height: 26px;
|
||||
background: var(--cs-white);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--cs-border);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cs-arrow svg {
|
||||
width: 10px; height: 10px;
|
||||
stroke: var(--cs-red); fill: none;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* ── TRACKER STRIP ── */
|
||||
.cs-tracker {
|
||||
border-top: 1px solid var(--cs-border);
|
||||
padding: 26px 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
background: #fafbfc;
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
transition: opacity .6s ease 1s, transform .6s ease 1s;
|
||||
}
|
||||
.cs-section.cs-live .cs-tracker { opacity: 1; transform: translateY(0); }
|
||||
|
||||
.cs-track-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 14px;
|
||||
background: var(--cs-red-light);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cs-track-icon svg {
|
||||
width: 22px; height: 22px;
|
||||
stroke: var(--cs-red); fill: none;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.cs-track-info { flex-shrink: 0; }
|
||||
.cs-track-id {
|
||||
font-size: 11px; color: var(--cs-muted);
|
||||
letter-spacing: .4px; margin-bottom: 3px;
|
||||
}
|
||||
.cs-track-name {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 17px; font-weight: 700;
|
||||
color: var(--cs-dark); letter-spacing: -.3px;
|
||||
}
|
||||
|
||||
.cs-track-progress { flex: 1; min-width: 0; }
|
||||
.cs-track-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--cs-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cs-bar-bg {
|
||||
width: 100%; height: 6px;
|
||||
background: #e9eaec;
|
||||
border-radius: 6px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
.cs-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, var(--cs-blue) 0%, var(--cs-red) 55%, var(--cs-green) 100%);
|
||||
width: 0%;
|
||||
transition: width 1.7s cubic-bezier(.16,1,.3,1) 1.15s;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.cs-section.cs-live .cs-bar-fill { width: 68%; }
|
||||
|
||||
.cs-bar-dot {
|
||||
position: absolute;
|
||||
top: 50%; right: -5px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--cs-red);
|
||||
animation: cs-dotpulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes cs-dotpulse {
|
||||
0%,100% { box-shadow: 0 0 0 3px rgba(192,18,39,.25); }
|
||||
50% { box-shadow: 0 0 0 7px rgba(192,18,39,.0); }
|
||||
}
|
||||
|
||||
.cs-track-status { flex-shrink: 0; text-align: right; }
|
||||
.cs-status-label {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 22px; font-weight: 800;
|
||||
color: var(--cs-green); display: block;
|
||||
letter-spacing: -.3px;
|
||||
}
|
||||
.cs-status-eta { font-size: 12px; color: var(--cs-muted); margin-top: 2px; }
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 1560px;
|
||||
padding: 108px 52px 120px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 82px 82px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(42px, 5.5vw, 74px);
|
||||
letter-spacing: -1.6px;
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 560px;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 40px 36px 38px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 3.2px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 26px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 28px 40px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 1.6px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-bar-fill {
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 1780px;
|
||||
padding: 120px 64px 136px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 92px 92px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(48px, 5.2vw, 80px);
|
||||
letter-spacing: -1.8px;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 18px;
|
||||
max-width: 600px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 10px 70px rgba(0,0,0,0.11);
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 44px 40px 42px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 28px;
|
||||
margin: 0 0 13px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 32px 44px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 11px;
|
||||
letter-spacing: 1.8px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 2060px;
|
||||
padding: 136px 80px 156px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 104px 104px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 92px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(54px, 5vw, 88px);
|
||||
letter-spacing: -2px;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 19.5px;
|
||||
max-width: 660px;
|
||||
line-height: 1.82;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 36px;
|
||||
box-shadow: 0 12px 80px rgba(0,0,0,0.11);
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 50px 46px 48px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 32px;
|
||||
letter-spacing: -.5px;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
top: 26px;
|
||||
right: 26px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 36px 52px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 13px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cs-bar-fill {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cs-bar-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 860px) {
|
||||
.cs-section { padding: 60px 20px 70px; }
|
||||
.cs-milestones { grid-template-columns: 1fr; }
|
||||
.cs-mile:not(:last-child) { border-right: none; border-bottom: 1px solid var(--cs-border); }
|
||||
.cs-arrow { display: none; }
|
||||
.cs-tracker { flex-wrap: wrap; gap: 18px; }
|
||||
.cs-track-progress { order: 3; width: 100%; flex: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ══ HTML ══ -->
|
||||
<section class="cs-section" id="cs-connected">
|
||||
|
||||
<header class="cs-header">
|
||||
<div class="cs-eyebrow">Connected System</div>
|
||||
<h2 class="cs-title">Every Mile <em>Protects</em> the Next</h2>
|
||||
<p class="cs-subtitle">Doormile doesn't hand off — it connects. Decisions in the first mile protect the last mile SLA. One delivery timeline. One connected system.</p>
|
||||
</header>
|
||||
|
||||
<div class="cs-card-shell">
|
||||
|
||||
<div class="cs-milestones">
|
||||
|
||||
<!-- FIRST MILE -->
|
||||
<div class="cs-mile cs-active">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-active-badge">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="cs-arrow">
|
||||
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#2563eb,#1d4ed8);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/>
|
||||
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||||
<line x1="12" y1="12" x2="12" y2="16"/>
|
||||
<line x1="10" y1="14" x2="14" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">First Mile</div>
|
||||
<h3 class="cs-mile-name">Origin & Pickup</h3>
|
||||
<p class="cs-mile-desc">Intelligent pickup scheduling that anticipates downstream requirements and SLA windows.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MID MILE -->
|
||||
<div class="cs-mile">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1553413077-190dd305871c?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-arrow">
|
||||
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#c01227,#8b0e1c);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2"/>
|
||||
<path d="M16 8h4l3 5v3h-7V8z"/>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"/>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">Mid Mile</div>
|
||||
<h3 class="cs-mile-name">Transit & Hubs</h3>
|
||||
<p class="cs-mile-desc">Dynamic routing through sortation centers with real-time optimization and rerouting.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LAST MILE -->
|
||||
<div class="cs-mile">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1615460549969-36fa19521a4f?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#15a056,#0d7a3e);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">Last Mile</div>
|
||||
<h3 class="cs-mile-name">Final Delivery</h3>
|
||||
<p class="cs-mile-desc">SLA-aware delivery windows protected by upstream intelligence and predictive ETA.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /cs-milestones -->
|
||||
|
||||
<!-- Tracker Strip -->
|
||||
<div class="cs-tracker">
|
||||
|
||||
<div class="cs-track-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-info">
|
||||
<div class="cs-track-id">Shipment #DME-2847</div>
|
||||
<div class="cs-track-name">Mumbai → Delhi Express</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-progress">
|
||||
<div class="cs-track-labels">
|
||||
<span>First Mile</span>
|
||||
<span>Mid Mile</span>
|
||||
<span>Last Mile</span>
|
||||
</div>
|
||||
<div class="cs-bar-bg">
|
||||
<div class="cs-bar-fill">
|
||||
<span class="cs-bar-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-status">
|
||||
<span class="cs-status-label">On Time</span>
|
||||
<div class="cs-status-eta">ETA: 4:30 PM</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div><!-- /cs-card-shell -->
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var el = document.getElementById('cs-connected');
|
||||
if (!el) return;
|
||||
function activate() { el.classList.add('cs-live'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) { if (e.isIntersecting) { activate(); io.unobserve(e.target); } });
|
||||
}, { threshold: 0.12 });
|
||||
io.observe(el);
|
||||
}
|
||||
setTimeout(activate, 380);
|
||||
})();
|
||||
</script>
|
||||
184
includes/ev-design.php
Normal file
184
includes/ev-design.php
Normal file
@@ -0,0 +1,184 @@
|
||||
<style>
|
||||
/* ─── EV SECTION BASE ─── */
|
||||
.ev-section {
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 60px;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
.ev-section { max-width: 1360px; padding: 50px 52px; gap: 72px; background-color: #1f1f1f;border-radius: 20px; }
|
||||
.ev-section .ev-badge { font-size: 15px; padding: 9px 18px; margin-bottom: 22px; }
|
||||
.ev-section .ev-heading { font-size: 64px; margin-bottom: 22px; }
|
||||
.ev-section .ev-subtext { font-size: 19px; max-width: 560px; margin-bottom: 44px; }
|
||||
.ev-section .ev-grid { gap: 22px; max-width: 980px; }
|
||||
.ev-section .ev-card { padding: 24px; border-radius: 16px; }
|
||||
.ev-section .ev-card h3 { font-size: 19px; }
|
||||
.ev-section .ev-card p { font-size: 14.5px; }
|
||||
.ev-section .right-card { padding: 34px; border-radius: 22px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.4rem; }
|
||||
.ev-section .ev-stat-label { font-size: 14px; }
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
.ev-section { max-width: 1780px; padding: 112px 64px; gap: 88px; }
|
||||
.ev-section .ev-badge { font-size: 16px; padding: 10px 20px; margin-bottom: 26px; }
|
||||
.ev-section .ev-heading { font-size: 76px; margin-bottom: 26px; }
|
||||
.ev-section .ev-subtext { font-size: 20px; max-width: 620px; margin-bottom: 50px; line-height: 1.65; }
|
||||
.ev-section .ev-grid { gap: 26px; max-width: 1060px; }
|
||||
.ev-section .ev-card { padding: 28px; border-radius: 18px; }
|
||||
.ev-section .ev-card h3 { font-size: 21px; }
|
||||
.ev-section .ev-card p { font-size: 15.5px; }
|
||||
.ev-section .right-card { padding: 40px; border-radius: 26px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.55rem; }
|
||||
.ev-section .ev-stat-label { font-size: 15px; }
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
.ev-section { max-width: 2100px; padding: 50px 80px; gap: 108px; }
|
||||
.ev-section .ev-badge { font-size: 18px; padding: 12px 24px; margin-bottom: 30px; }
|
||||
.ev-section .ev-heading { font-size: 92px; margin-bottom: 30px; line-height: 1.05; }
|
||||
.ev-section .ev-subtext { font-size: 22px; max-width: 700px; margin-bottom: 58px; line-height: 1.68; }
|
||||
.ev-section .ev-grid { gap: 30px; max-width: 1200px; }
|
||||
.ev-section .ev-card { padding: 32px; border-radius: 20px; }
|
||||
.ev-section .ev-card h3 { font-size: 24px; }
|
||||
.ev-section .ev-card p { font-size: 17px; }
|
||||
.ev-section .right-card { padding: 48px; border-radius: 30px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.75rem; }
|
||||
.ev-section .ev-stat-label { font-size: 16px; }
|
||||
}
|
||||
|
||||
/* ─── RIGHT CARD OVERLAY ─── */
|
||||
.right-card {
|
||||
position: relative;
|
||||
color: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255,255,255,0.9) 30%,
|
||||
rgba(255,255,255,0.6) 55%,
|
||||
rgba(255,255,255,0.2) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
}
|
||||
.right-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="ev-section">
|
||||
|
||||
<!-- LEFT CONTENT -->
|
||||
<div>
|
||||
|
||||
<span class="ev-badge" style="background:rgb(255,235,238);color:#c01227;padding:8px 16px;border-radius:20px;font-size:14px;display:inline-block;margin-bottom:20px;">
|
||||
EV-Native Design
|
||||
</span>
|
||||
|
||||
<h1 class="ev-heading" style="font-size:56px;font-weight:700;color:white;line-height:1.1;margin-bottom:20px;">
|
||||
Built for Electric.<br>
|
||||
<span style="color:#c01227;">Not Adapted.</span>
|
||||
</h1>
|
||||
|
||||
<p class="ev-subtext" style="font-size:18px;color:white;max-width:520px;margin-bottom:40px;line-height:1.6;">
|
||||
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="ev-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;">
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Battery-Aware Routing</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Battery level, health, and degradation are inputs to route optimization.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Charging Integration</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Integrate charging stops without compromising delivery windows.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Energy-Optimized Paths</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Consider elevation, speed limits, and weather for efficiency.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Predictable Operations</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">EVs become predictable assets, not operational risks.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="right-card" style="background:#fff;padding:30px;border-radius:20px;width:920px;box-shadow:0 20px 40px rgba(0,0,0,0.08);background-image:url('/logistic/assets/images/ev-design1.jpeg');background-size:cover;background-position:center;">
|
||||
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;">
|
||||
<h4 style="margin:0;">Fleet Status</h4>
|
||||
<span style="color:#19a463;font-size:14px;">● 12 vehicles active</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-001</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Route A</p>
|
||||
</div>
|
||||
<div style="color:#19a463;font-weight:bold;">85% <span style="margin-left:10px;color:#221f1f;">15 min</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-002</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Route B</p>
|
||||
</div>
|
||||
<div style="color:#19a463;font-weight:bold;">62% <span style="margin-left:10px;color:#221f1f;">42 min</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-003</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Charging</p>
|
||||
</div>
|
||||
<div style="color:#f59e0b;font-size:1.1rem;font-weight:bold;">28% <span style="margin-left:10px;color:#221f1f;">Charging</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;margin-top:30px;text-align:center;">
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">40%</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Lower Fuel Costs</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">Zero</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Tailpipe Emissions</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">98%</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Fleet Uptime</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">3x</p>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Longer Asset Life</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
139
includes/ev-logistics.php
Normal file
139
includes/ev-logistics.php
Normal file
@@ -0,0 +1,139 @@
|
||||
<link rel="stylesheet" href="/logistic/assets/css/custom-widget-accordion.min.css" type="text/css" media="all" />
|
||||
|
||||
<style>
|
||||
/* EV Section Column Layout */
|
||||
.elementor-element-b8da0f5 > .e-con-inner {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 40px !important;
|
||||
justify-content: space-between !important;
|
||||
paddiing
|
||||
}
|
||||
.elementor-element-aef73c1 {
|
||||
flex: 1 1 45% !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.elementor-element-89d7623 {
|
||||
flex: 1 1 55% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element-b8da0f5 > .e-con-inner {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
.elementor-element-aef73c1, .elementor-element-89d7623 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accordion icon styling */
|
||||
.elementor-element-155d377 .elementor-accordion-icon-closed i {
|
||||
color: #000000 !important;
|
||||
}
|
||||
.elementor-element-155d377 .elementor-tab-title.elementor-active .elementor-accordion-icon-opened i {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="elementor-element elementor-element-b8da0f5 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent accordion" data-id="b8da0f5" data-element_type="container">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-aef73c1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="aef73c1" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-e2a1b94 elementor-widget elementor-widget-image" data-id="e2a1b94" data-element_type="widget" data-widget_type="image.default">
|
||||
<div class="elementor-widget-container">
|
||||
<img width="995" height="475" src="/logistic/assets/images/ev.jpeg" class="attachment-full size-full wp-image-ev" alt="Electric Truck Charging" style="border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; height: auto;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-89d7623 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="89d7623" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-54d05ac elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-settings="{"_animation":"logico_heading_animation"}" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Logistics Built for Electric Vehicles
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-155d377 elementor-widget elementor-widget-accordion" data-id="155d377" data-element_type="widget" data-widget_type="accordion.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-accordion">
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2241" class="elementor-tab-title" data-tab="1" role="button" aria-controls="elementor-tab-content-2241" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">01. Battery-First Planning </span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2241" class="elementor-tab-content elementor-clearfix" data-tab="1" role="region" aria-labelledby="elementor-tab-title-2241">
|
||||
<p>
|
||||
Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2242" class="elementor-tab-title" data-tab="2" role="button" aria-controls="elementor-tab-content-2242" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">02. Energy-Aware Routing</span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2242" class="elementor-tab-content elementor-clearfix" data-tab="2" role="region" aria-labelledby="elementor-tab-title-2242">
|
||||
<p>
|
||||
Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2243" class="elementor-tab-title" data-tab="3" role="button" aria-controls="elementor-tab-content-2243" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">03. Smart Charging Integration</span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2243" class="elementor-tab-content elementor-clearfix" data-tab="3" role="region" aria-labelledby="elementor-tab-title-2243">
|
||||
<p>
|
||||
Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2244" class="elementor-tab-title" data-tab="4" role="button" aria-controls="elementor-tab-content-2244" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">04. Carbon Footprint Tracking</a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2244" class="elementor-tab-content elementor-clearfix" data-tab="4" role="region" aria-labelledby="elementor-tab-title-2244">
|
||||
<p>
|
||||
Real-time emissions monitoring and sustainability reports for every delivery.<br />
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
548
includes/footer.php
Normal file
548
includes/footer.php
Normal file
@@ -0,0 +1,548 @@
|
||||
<?php
|
||||
// Footer - included at the bottom of every page
|
||||
?>
|
||||
<footer data-wpr-lazyrender="1" itemtype="https://schema.org/WPFooter" itemscope="itemscope" id="colophon" role="contentinfo">
|
||||
<div class='footer-width-fixer'>
|
||||
<div data-elementor-type="wp-post" data-elementor-id="4656" class="elementor elementor-4656">
|
||||
<div class="elementor-element elementor-element-02db03e e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="02db03e" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-23f3ff1 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="23f3ff1" data-element_type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-1a0e2f2 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="1a0e2f2" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-aeddc72 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="aeddc72" data-element_type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="elementor-element elementor-element-07f2076 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="07f2076" data-element_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-10f51d7 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="10f51d7" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">Special service for our customers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-0272ea2 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="0272ea2" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p>Pacific hake false trevally queen parrotfish black prickleback moss</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-f009d7c elementor-widget elementor-widget-logico_button" data-id="f009d7c" 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-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-003117e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="003117e" data-element_type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="elementor-element elementor-element-41796f6 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="41796f6" data-element_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-c837bd1 elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="c837bd1" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">Logistic for different ways in India
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-b243ea7 elementor-widget elementor-widget-logico_button" data-id="b243ea7" 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/about-us/" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-97ed6ea e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="97ed6ea" data-element_type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-8748c8c e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8748c8c" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-9b55011 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9b55011" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-7018b0d elementor-widget elementor-widget-logico_heading" data-id="7018b0d" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h2 class="logico-title">Have any questions?
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-6c7ad70 elementor-widget elementor-widget-logico_heading" data-id="6c7ad70" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Call us <span style="color: #c01227">+1 800 65 78 963</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-307ee85 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="307ee85" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-122ac89 elementor-widget elementor-widget-logico_button" data-id="122ac89" 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/contacts/" target="_blank" class="logico-alter-button">
|
||||
Contact us </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-30014a2 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="30014a2" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-720670a elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="720670a" data-element_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>
|
||||
<div class="elementor-element elementor-element-9dccabb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9dccabb" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-7b9becf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="7b9becf" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-4b6e2f2 elementor-widget elementor-widget-image" 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="/logistic/assets/images/logo2-light-x2.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>
|
||||
</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" data-id="7eaa169" data-element_type="widget" data-widget_type="social-icons.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-social-icons-wrapper elementor-grid" role="list">
|
||||
<span class="elementor-grid-item" role="listitem">
|
||||
<a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com/" target="_blank">
|
||||
<span class="elementor-screen-only">Facebook-f</span>
|
||||
<svg aria-hidden="true" class="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg> </a>
|
||||
</span>
|
||||
<span class="elementor-grid-item" role="listitem">
|
||||
<a class="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-64ac94e" href="https://x.com/" target="_blank">
|
||||
<span class="elementor-screen-only">X-twitter</span>
|
||||
<svg aria-hidden="true" class="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg> </a>
|
||||
</span>
|
||||
<span class="elementor-grid-item" role="listitem">
|
||||
<a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com/" target="_blank">
|
||||
<span class="elementor-screen-only">Linkedin-in</span>
|
||||
<svg aria-hidden="true" class="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg> </a>
|
||||
</span>
|
||||
<span class="elementor-grid-item" role="listitem">
|
||||
<a class="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-b0d5e1f" href="https://www.youtube.com/" target="_blank">
|
||||
<span class="elementor-screen-only">Youtube</span>
|
||||
<svg aria-hidden="true" class="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg> </a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-974f0d4 elementor-widget elementor-widget-logico_heading" data-id="974f0d4" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">since 2000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-f5be2e3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5be2e3" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-0fccf6d elementor-widget elementor-widget-logico_heading" data-id="0fccf6d" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">Contacts
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-9c5368c elementor-widget elementor-widget-text-editor" data-id="9c5368c" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-c3dfeca elementor-widget elementor-widget-text-editor" data-id="c3dfeca" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p><a href="tel:+13685678954">+1 (368) 567 89 54</a> <br /><a href="tel:+8003508431">+ 800 350 84 31</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-31bb06d elementor-widget elementor-widget-text-editor" data-id="31bb06d" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p><a href="/cdn-cgi/l/email-protection#9ae9efeaeaf5e8eedaf6f5fdf3f9f5b4f9f5f7"><span class="__cf_email__" data-cfemail="d5a6a0a5a5baa7a195b9bab2bcb6bafbb6bab8">[email protected]</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-6beb353 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="6beb353" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-4cf9442 elementor-widget elementor-widget-logico_heading" data-id="4cf9442" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">Company
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-ef3b579 elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="ef3b579" data-element_type="widget" data-widget_type="logico_custom_navigation_menu.default">
|
||||
<div class="elementor-widget-container">
|
||||
<ul class="logico-custom-menu-widget">
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/about/" target="_blank">About</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Expertise</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Sustainability</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">News & Media</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Case Studies</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/contacts/" target="_blank">Contacts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-e6b41e8 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e6b41e8" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-79565ee elementor-widget elementor-widget-logico_heading" data-id="79565ee" 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-c6646ab elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="c6646ab" data-element_type="widget" data-widget_type="logico_custom_navigation_menu.default">
|
||||
<div class="elementor-widget-container">
|
||||
<ul class="logico-custom-menu-widget">
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Air Freight</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Sea Freight</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Land Transport</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Groupage</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Consultancy</a></li>
|
||||
<li><a href="https://demo.artureanec.com/themes/logico-rounded/blog-classic/" target="_blank">Value Added Services</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-b2496e1 e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="b2496e1" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-c971d77 elementor-widget elementor-widget-text-editor" data-id="c971d77" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p>©<a href="https://demo.artureanec.com/themes/logico/">Logico</a> 2026. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-a557a1b elementor-widget elementor-widget-text-editor" data-id="a557a1b" data-element_type="widget" data-widget_type="text-editor.default">
|
||||
<div class="elementor-widget-container">
|
||||
<p>Terms of use Privacy Environmental Policy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- #page -->
|
||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="speculationrules">
|
||||
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/themes/logico-rounded/*"},{"not":{"href_matches":["/themes/logico-rounded/wp-*.php","/themes/logico-rounded/wp-admin/*","/themes/logico-rounded/wp-content/uploads/*","/themes/logico-rounded/wp-content/*","/themes/logico-rounded/wp-content/plugins/*","/themes/logico-rounded/wp-content/themes/logico-child/*","/themes/logico-rounded/wp-content/themes/logico/*","/themes/logico-rounded/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch,
|
||||
.no-prefetch a"}}]},"eagerness":"conservative"}]}
|
||||
</script>
|
||||
</div>
|
||||
<!-- /.body-container -->
|
||||
<div class="footer-scroll-top"></div>
|
||||
<script type='text/javascript'>
|
||||
(function() {
|
||||
var c = document.body.className;
|
||||
c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
|
||||
document.body.className = c;
|
||||
})();
|
||||
</script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.32.4" id="elementor-webpack-runtime-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.32.4" id="elementor-frontend-modules-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
|
||||
<script type="text/javascript" id="elementor-frontend-js-before">
|
||||
/* <![CDATA[ */
|
||||
var elementorFrontendConfig = {
|
||||
"environmentMode": {
|
||||
"edit": false,
|
||||
"wpPreview": false,
|
||||
"isScriptDebug": false
|
||||
},
|
||||
"i18n": {
|
||||
"shareOnFacebook": "Share on Facebook",
|
||||
"shareOnTwitter": "Share on Twitter",
|
||||
"pinIt": "Pin it",
|
||||
"download": "Download",
|
||||
"downloadImage": "Download image",
|
||||
"fullscreen": "Fullscreen",
|
||||
"zoom": "Zoom",
|
||||
"share": "Share",
|
||||
"playVideo": "Play Video",
|
||||
"previous": "Previous",
|
||||
"next": "Next",
|
||||
"close": "Close",
|
||||
"a11yCarouselPrevSlideMessage": "Previous slide",
|
||||
"a11yCarouselNextSlideMessage": "Next slide",
|
||||
"a11yCarouselFirstSlideMessage": "This is the first slide",
|
||||
"a11yCarouselLastSlideMessage": "This is the last slide",
|
||||
"a11yCarouselPaginationBulletMessage": "Go to slide"
|
||||
},
|
||||
"is_rtl": false,
|
||||
"breakpoints": {
|
||||
"xs": 0,
|
||||
"sm": 480,
|
||||
"md": 481,
|
||||
"lg": 841,
|
||||
"xl": 1440,
|
||||
"xxl": 1600
|
||||
},
|
||||
"responsive": {
|
||||
"breakpoints": {
|
||||
"mobile": {
|
||||
"label": "Mobile Portrait",
|
||||
"value": 480,
|
||||
"default_value": 767,
|
||||
"direction": "max",
|
||||
"is_enabled": true
|
||||
},
|
||||
"mobile_extra": {
|
||||
"label": "Mobile Landscape",
|
||||
"value": 660,
|
||||
"default_value": 880,
|
||||
"direction": "max",
|
||||
"is_enabled": true
|
||||
},
|
||||
"tablet": {
|
||||
"label": "Tablet Portrait",
|
||||
"value": 840,
|
||||
"default_value": 1024,
|
||||
"direction": "max",
|
||||
"is_enabled": true
|
||||
},
|
||||
"tablet_extra": {
|
||||
"label": "Tablet Landscape",
|
||||
"value": 1020,
|
||||
"default_value": 1200,
|
||||
"direction": "max",
|
||||
"is_enabled": true
|
||||
},
|
||||
"laptop": {
|
||||
"label": "Laptop",
|
||||
"value": 1200,
|
||||
"default_value": 1366,
|
||||
"direction": "max",
|
||||
"is_enabled": true
|
||||
},
|
||||
"widescreen": {
|
||||
"label": "Widescreen",
|
||||
"value": 2400,
|
||||
"default_value": 2400,
|
||||
"direction": "min",
|
||||
"is_enabled": false
|
||||
}
|
||||
},
|
||||
"hasCustomBreakpoints": true
|
||||
},
|
||||
"version": "3.32.4",
|
||||
"is_static": false,
|
||||
"experimentalFeatures": {
|
||||
"e_font_icon_svg": true,
|
||||
"additional_custom_breakpoints": true,
|
||||
"container": true,
|
||||
"nested-elements": true,
|
||||
"home_screen": true,
|
||||
"global_classes_should_enforce_capabilities": true,
|
||||
"e_variables": true,
|
||||
"cloud-library": true,
|
||||
"e_opt_in_v4_page": true,
|
||||
"import-export-customization": true
|
||||
},
|
||||
"urls": {
|
||||
"assets": "https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-content\/plugins\/elementor\/assets\/",
|
||||
"ajaxurl": "https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-admin\/admin-ajax.php",
|
||||
"uploadUrl": "https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-content\/uploads"
|
||||
},
|
||||
"nonces": {
|
||||
"floatingButtonsClickTracking": "6eedf2dbaf"
|
||||
},
|
||||
"swiperClass": "swiper",
|
||||
"settings": {
|
||||
"page": [],
|
||||
"editorPreferences": []
|
||||
},
|
||||
"kit": {
|
||||
"active_breakpoints": ["viewport_mobile", "viewport_mobile_extra", "viewport_tablet", "viewport_tablet_extra", "viewport_laptop"],
|
||||
"viewport_mobile": 480,
|
||||
"viewport_mobile_extra": 660,
|
||||
"viewport_tablet": 840,
|
||||
"viewport_tablet_extra": 1020,
|
||||
"viewport_laptop": 1200,
|
||||
"lightbox_enable_counter": "yes",
|
||||
"lightbox_enable_fullscreen": "yes",
|
||||
"lightbox_enable_zoom": "yes",
|
||||
"lightbox_enable_share": "yes",
|
||||
"lightbox_title_src": "title",
|
||||
"lightbox_description_src": "description"
|
||||
},
|
||||
"post": {
|
||||
"id": 61,
|
||||
"title": "Logistic%20%E2%80%93%20Logico",
|
||||
"excerpt": "",
|
||||
"featuredImage": false
|
||||
}
|
||||
};
|
||||
//# sourceURL=elementor-frontend-js-before
|
||||
/* ]]> */
|
||||
</script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.32.4" id="elementor-frontend-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/logico-plugin/inc/js/lib/slick.min.js?ver=6.9.1" id="slick-slider-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.4.1-wc.10.2.3" id="jquery-cookie-js" data-wp-strategy="defer"></script>
|
||||
<script data-minify="1" type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/cache/min/1/themes/logico-rounded/wp-content/themes/logico/js/woo.js?ver=1762595741" id="logico-woocommerce-scripts-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=10.2.3" id="sourcebuster-js-js"></script>
|
||||
<script type="text/javascript" id="wc-order-attribution-js-extra">
|
||||
/* <![CDATA[ */
|
||||
var wc_order_attribution = {
|
||||
"params": {
|
||||
"lifetime": 1.0000000000000000818030539140313095458623138256371021270751953125e-5,
|
||||
"session": 30,
|
||||
"base64": false,
|
||||
"ajaxurl": "https://demo.artureanec.com/themes/logico-rounded/wp-admin/admin-ajax.php",
|
||||
"prefix": "wc_order_attribution_",
|
||||
"allowTracking": true
|
||||
},
|
||||
"fields": {
|
||||
"source_type": "current.typ",
|
||||
"referrer": "current_add.rf",
|
||||
"utm_campaign": "current.cmp",
|
||||
"utm_source": "current.src",
|
||||
"utm_medium": "current.mdm",
|
||||
"utm_content": "current.cnt",
|
||||
"utm_id": "current.id",
|
||||
"utm_term": "current.trm",
|
||||
"utm_source_platform": "current.plt",
|
||||
"utm_creative_format": "current.fmt",
|
||||
"utm_marketing_tactic": "current.tct",
|
||||
"session_entry": "current_add.ep",
|
||||
"session_start_time": "current_add.fd",
|
||||
"session_pages": "session.pgs",
|
||||
"session_count": "udata.vst",
|
||||
"user_agent": "udata.uag"
|
||||
}
|
||||
};
|
||||
//# sourceURL=wc-order-attribution-js-extra
|
||||
/* ]]> */
|
||||
</script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=10.2.3" id="wc-order-attribution-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/lib/jquery.validate.min.js?ver=1.21.0" id="wpforms-validation-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/lib/mailcheck.min.js?ver=1.1.2" id="wpforms-mailcheck-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/lib/punycode.min.js?ver=1.0.0" id="wpforms-punycode-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/js/share/utils.min.js?ver=1.9.8.2" id="wpforms-generic-utils-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/js/frontend/wpforms.min.js?ver=1.9.8.2" id="wpforms-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/js/frontend/wpforms-modern.min.js?ver=1.9.8.2" id="wpforms-modern-js"></script>
|
||||
<script type="text/javascript" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/plugins/wpforms-lite/assets/js/frontend/fields/address.min.js?ver=1.9.8.2" id="wpforms-address-field-js"></script>
|
||||
<script type='text/javascript'>
|
||||
/* <![CDATA[ */
|
||||
var wpforms_settings = {
|
||||
"val_required": "This field is required.",
|
||||
"val_email": "Please enter a valid email address.",
|
||||
"val_email_suggestion": "Did you mean {suggestion}?",
|
||||
"val_email_suggestion_title": "Click to accept this suggestion.",
|
||||
"val_email_restricted": "This email address is not allowed.",
|
||||
"val_number": "Please enter a valid number.",
|
||||
"val_number_positive": "Please enter a valid positive number.",
|
||||
"val_minimum_price": "Amount entered is less than the required minimum.",
|
||||
"val_confirm": "Field values do not match.",
|
||||
"val_checklimit": "You have exceeded the number of allowed selections: {#}.",
|
||||
"val_limit_characters": "Limit is {limit} characters. Characters remaining: {remaining}.",
|
||||
"val_limit_words": "Limit is {limit} words. Words remaining: {remaining}.",
|
||||
"val_min": "Please enter a value greater than or equal to {0}.",
|
||||
"val_max": "Please enter a value less than or equal to {0}.",
|
||||
"val_recaptcha_fail_msg": "Google reCAPTCHA verification failed, please try again later.",
|
||||
"val_turnstile_fail_msg": "Cloudflare Turnstile verification failed, please try again later.",
|
||||
"val_inputmask_incomplete": "Please fill out the field in required format.",
|
||||
"uuid_cookie": "",
|
||||
"locale": "en",
|
||||
"country": "",
|
||||
"country_list_label": "Country list",
|
||||
"wpforms_plugin_url": "https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-content\/plugins\/wpforms-lite\/",
|
||||
"gdpr": "",
|
||||
"ajaxurl": "https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-admin\/admin-ajax.php",
|
||||
"mailcheck_enabled": "1",
|
||||
"mailcheck_domains": [],
|
||||
"mailcheck_toplevel_domains": ["dev"],
|
||||
"is_ssl": "1",
|
||||
"currency_code": "USD",
|
||||
"currency_thousands": ",",
|
||||
"currency_decimals": "2",
|
||||
"currency_decimal": ".",
|
||||
"currency_symbol": "$",
|
||||
"currency_symbol_pos": "left",
|
||||
"val_requiredpayment": "Payment is required.",
|
||||
"val_creditcard": "Please enter a valid credit card number.",
|
||||
"css_vars": ["field-border-radius", "field-border-style", "field-border-size", "field-background-color", "field-border-color", "field-text-color", "field-menu-color", "label-color", "label-sublabel-color", "label-error-color", "button-border-radius", "button-border-style", "button-border-size", "button-background-color", "button-border-color", "button-text-color", "page-break-color", "background-image", "background-position", "background-repeat", "background-size", "background-width", "background-height", "background-color", "background-url", "container-padding", "container-border-style", "container-border-width", "container-border-color", "container-border-radius", "field-size-input-height", "field-size-input-spacing", "field-size-font-size", "field-size-line-height", "field-size-padding-h", "field-size-checkbox-size", "field-size-sublabel-spacing", "field-size-icon-size", "label-size-font-size", "label-size-line-height", "label-size-sublabel-font-size", "label-size-sublabel-line-height", "button-size-font-size", "button-size-height", "button-size-padding-h", "button-size-margin-top", "container-shadow-size-box-shadow"],
|
||||
"isModernMarkupEnabled": "1",
|
||||
"formErrorMessagePrefix": "Form error message",
|
||||
"errorMessagePrefix": "Error message",
|
||||
"submitBtnDisabled": "Submit button is disabled during form submission.",
|
||||
"readOnlyDisallowedFields": ["captcha", "content", "divider", "hidden", "html", "entry-preview", "pagebreak", "payment-total"],
|
||||
"error_updating_token": "Error updating token. Please try again or contact support if the issue persists.",
|
||||
"network_error": "Network error or server is unreachable. Check your connection or try again later.",
|
||||
"token_cache_lifetime": "86400",
|
||||
"hn_data": {
|
||||
"4533": 2
|
||||
},
|
||||
"address_field": {
|
||||
"list_countries_without_states": ["GB", "DE", "CH", "NL"]
|
||||
}
|
||||
}
|
||||
/* ]]> */
|
||||
</script>
|
||||
<script>
|
||||
window.lazyLoadOptions = {
|
||||
elements_selector: "iframe[data-lazy-src]",
|
||||
data_src: "lazy-src",
|
||||
data_srcset: "lazy-srcset",
|
||||
data_sizes: "lazy-sizes",
|
||||
class_loading: "lazyloading",
|
||||
class_loaded: "lazyloaded",
|
||||
threshold: 300,
|
||||
callback_loaded: function(element) {
|
||||
if (element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible") {
|
||||
if (element.classList.contains("lazyloaded")) {
|
||||
if (typeof window.jQuery != "undefined") {
|
||||
if (jQuery.fn.fitVids) {
|
||||
jQuery(element).parent().fitVids()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('LazyLoad::Initialized', function(e) {
|
||||
var lazyLoadInstance = e.detail.instance;
|
||||
if (window.MutationObserver) {
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
var image_count = 0;
|
||||
var iframe_count = 0;
|
||||
var rocketlazy_count = 0;
|
||||
mutations.forEach(function(mutation) {
|
||||
for (var i = 0; i < mutation.addedNodes.length; i++) {
|
||||
if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
|
||||
continue
|
||||
}
|
||||
if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
|
||||
continue
|
||||
}
|
||||
images = mutation.addedNodes[i].getElementsByTagName('img');
|
||||
is_image = mutation.addedNodes[i].tagName == "IMG";
|
||||
iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
|
||||
is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
|
||||
rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');
|
||||
image_count += images.length;
|
||||
iframe_count += iframes.length;
|
||||
rocketlazy_count += rocket_lazy.length;
|
||||
if (is_image) {
|
||||
image_count += 1
|
||||
}
|
||||
if (is_iframe) {
|
||||
iframe_count += 1
|
||||
}
|
||||
}
|
||||
});
|
||||
if (image_count > 0 || iframe_count > 0 || rocketlazy_count > 0) {
|
||||
lazyLoadInstance.update()
|
||||
}
|
||||
});
|
||||
25299
includes/head.php
Normal file
25299
includes/head.php
Normal file
File diff suppressed because it is too large
Load Diff
60
includes/header-img.php
Normal file
60
includes/header-img.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<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="{"items":1,"nav":false,"navText":"","dots":true,"progress":true,"dotsContainer":".owl-dots-cbfd9b2","autoplayHoverPause":false,"autoplay":false,"autoplaySpeed":5000,"autoplayTimeout":5000,"loop":true,"dragEndSpeed":1200,"navSpeed":1200,"dotsSpeed":1200,"pullDrag":false,"freeDrag":false,"callbacks":false,"animateOut":"fadeOut","rtl":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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
381
includes/header.php
Normal file
381
includes/header.php
Normal file
@@ -0,0 +1,381 @@
|
||||
<?php
|
||||
// Header - included at the top of every page
|
||||
?>
|
||||
|
||||
<div class="body-overlay"></div>
|
||||
<!-- Page Pre Loader -->
|
||||
<!-- <div class="page-loader-container">
|
||||
<div class="page-loader">
|
||||
<div class="page-loader-inner"><img width="152" height="116" src="/logistic//assets/images/preloader.png" alt="Page Loader Image" class="page-loader-logo" /></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="body-container">
|
||||
<div id="page" class="hfeed site">
|
||||
|
||||
<header id="masthead" itemscope="itemscope" itemtype="https://schema.org/WPHeader">
|
||||
<p class="main-title bhf-hidden" itemprop="headline"><a href="/logistic/index.php" title="Logico" rel="home">Logico</a></p>
|
||||
<div data-elementor-type="wp-post" data-elementor-id="5180" class="elementor elementor-5180">
|
||||
<div class="elementor-element elementor-element-466de1b e-con-full sticky-container-on e-flex cut-corner-no e-con e-parent" data-id="466de1b" data-element_type="container" data-settings="{"position":"absolute"}">
|
||||
<div class="elementor-element elementor-element-e052838 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e052838" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-d681ece e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d681ece" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-472172e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="472172e" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-2f31137 elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-logico_slide_sidebar" data-id="2f31137"
|
||||
data-element_type="widget" data-widget_type="logico_slide_sidebar.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-slide-sidebar-widget">
|
||||
<div class="dropdown-trigger" data-id="2f31137"><span class="dropdown-trigger-icon"></span></div>
|
||||
</div>
|
||||
<div class="slide-sidebar-wrapper slide-sidebar-position-left" id="side-panel-2f31137">
|
||||
<div class="slide-sidebar-close"></div>
|
||||
<div class="slide-sidebar">
|
||||
<div class="slide-sidebar-content">
|
||||
<div id="block-37" class="widget widget_block">
|
||||
<div class="widget-wrapper">
|
||||
<div 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="/logistic//assets/images/logo2-light-x2.png" alt="" class="wp-image-5851"
|
||||
style="width:150px" srcset="/logistic//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"
|
||||
sizes="(max-width: 305px) 100vw, 305px" /></figure>
|
||||
|
||||
|
||||
|
||||
<div style="height:46px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
||||
|
||||
<div class="wp-block-title">
|
||||
<h6 class="wp-block-heading has-text-font-font-family" style="font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;text-transform:none">Our Location</h6>
|
||||
</div>
|
||||
|
||||
|
||||
<p>USA, New York - 1060<br>Str. First Avenue 1</p>
|
||||
|
||||
|
||||
|
||||
<div style="height:3px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
||||
|
||||
<div class="wp-block-title">
|
||||
<h6 class="wp-block-heading has-text-font-font-family" style="font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;text-transform:none">Call Center</h6>
|
||||
</div>
|
||||
|
||||
|
||||
<p>+ 1-800 100 975 20 34<br>+ (123) 1800-234-567</p>
|
||||
|
||||
|
||||
|
||||
<div style="height:3px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
||||
|
||||
<div class="wp-block-title">
|
||||
<h6 class="wp-block-heading has-text-font-font-family" style="font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;text-transform:none">Email</h6>
|
||||
</div>
|
||||
|
||||
|
||||
<p><a href="/cdn-cgi/l/email-protection#620e0d050b010d220f030b0e4c010d"><span class="__cf_email__" data-cfemail="aac6c5cdc3c9c5eac7cbc3c684c9c5">[email protected]</span></a></p>
|
||||
|
||||
|
||||
|
||||
<div style="height:3px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
||||
|
||||
<div class="wp-block-title">
|
||||
<h6 class="wp-block-heading has-text-font-font-family" style="font-size:18px;font-style:normal;font-weight:700;letter-spacing:0px;text-transform:none">Social network</h6>
|
||||
</div>
|
||||
|
||||
|
||||
<ul class="wp-block-social-links has-icon-color is-style-logos-only has-background is-layout-flex wp-block-social-links-is-layout-flex" style="background-color:#1f1f1f">
|
||||
<li style="color:#ffffff;" class="wp-social-link wp-social-link-facebook has-white-color wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>
|
||||
|
||||
<li style="color:#ffffff;" class="wp-social-link wp-social-link-x has-white-color wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://x.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg><span class="wp-block-social-link-label screen-reader-text">X</span></a></li>
|
||||
|
||||
<li style="color:#ffffff;" class="wp-social-link wp-social-link-linkedin has-white-color wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li>
|
||||
|
||||
<li style="color:#ffffff;" class="wp-social-link wp-social-link-youtube has-white-color wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg><span class="wp-block-social-link-label screen-reader-text">YouTube</span></a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div style="height:137px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
|
||||
|
||||
|
||||
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
|
||||
<div class="wp-block-button is-style-simple is-style-theme"><a class="wp-block-button__link wp-element-button" href="https://demo.artureanec.com/themes/logico-rounded/contacts/" style="border-radius:10px">Get in touch</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-846e53d elementor-widget elementor-widget-site-logo" data-id="846e53d" data-element_type="widget" data-settings="{"align":"left","width":{"unit":"px","size":153,"sizes":[]},"width_tablet":{"unit":"px","size":"","sizes":[]},"width_mobile":{"unit":"px","size":"","sizes":[]},"align_laptop":"left","width_laptop":{"unit":"px","size":"","sizes":[]},"width_tablet_extra":{"unit":"px","size":"","sizes":[]},"width_mobile_extra":{"unit":"px","size":"","sizes":[]},"space":{"unit":"%","size":"","sizes":[]},"space_laptop":{"unit":"px","size":"","sizes":[]},"space_tablet_extra":{"unit":"px","size":"","sizes":[]},"space_tablet":{"unit":"%","size":"","sizes":[]},"space_mobile_extra":{"unit":"px","size":"","sizes":[]},"space_mobile":{"unit":"%","size":"","sizes":[]},"image_border_radius":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"image_border_radius_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"image_border_radius_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"image_border_radius_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"image_border_radius_mobile_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"image_border_radius_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding_laptop":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding_tablet_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding_tablet":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding_mobile_extra":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_padding_mobile":{"unit":"px","top":"","right":"","bottom":"","left":"","isLinked":true},"caption_space":{"unit":"px","size":0,"sizes":[]},"caption_space_laptop":{"unit":"px","size":"","sizes":[]},"caption_space_tablet_extra":{"unit":"px","size":"","sizes":[]},"caption_space_tablet":{"unit":"px","size":"","sizes":[]},"caption_space_mobile_extra":{"unit":"px","size":"","sizes":[]},"caption_space_mobile":{"unit":"px","size":"","sizes":[]}}"
|
||||
data-widget_type="site-logo.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="hfe-site-logo">
|
||||
<a data-elementor-open-lightbox="" class='elementor-clickable' href="/logistic/index.php">
|
||||
<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="/logistic/assets/images/logo2-light-x2.png" alt="logo2-light-x2" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-e44ee7e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e44ee7e" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-0b7bf6f logico-breakpoint-laptop elementor-widget__width-auto elementor-widget elementor-widget-logico_navigation_menu" data-id="0b7bf6f" data-element_type="widget" data-widget_type="logico_navigation_menu.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="header-menu-container">
|
||||
<nav>
|
||||
<ul id="menu-main-menu" class="main-menu">
|
||||
<li id="menu-item-10508" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10508<?php if(isset($current_page) && $current_page === 'home') echo ' active'; ?>"><a href="index.php">Home</a>
|
||||
<!-- <ul class="sub-menu">
|
||||
<li id="menu-item-10528" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-10528"><a href="https://demo.artureanec.com/themes/logico-rounded/">Transportation</a></li>
|
||||
<li id="menu-item-10531" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-61 current_page_item menu-item-10531"><a href="https://demo.artureanec.com/themes/logico-rounded/home-2/" aria-current="page">Logistic</a></li>
|
||||
<li id="menu-item-10532" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10532"><a href="https://demo.artureanec.com/themes/logico-rounded/home-3/">Ship Freight</a></li>
|
||||
<li id="menu-item-10529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10529"><a href="https://demo.artureanec.com/themes/logico-rounded/home-4/">Air Freight</a></li>
|
||||
<li id="menu-item-10533" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10533"><a href="https://demo.artureanec.com/themes/logico-rounded/home-5/">Railway Freight</a></li>
|
||||
<li id="menu-item-10534" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10534"><a href="https://demo.artureanec.com/themes/logico-rounded/home-6/">Truck Freight</a></li>
|
||||
<li id="menu-item-10530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10530"><a href="https://demo.artureanec.com/themes/logico-rounded/intro/">Intro</a></li>
|
||||
<li id="menu-item-10523" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10523"><a href="https://demo.artureanec.com/themes/logico/intro/">Angular Version</a></li>
|
||||
</ul> -->
|
||||
</li>
|
||||
<li id="menu-item-10509" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10509<?php if(isset($current_page) && $current_page === 'how-its-works') echo ' active'; ?>"><a href="how-its-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-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>
|
||||
<li id="menu-item-10545" class="menu-item menu-item-type-post_type menu-item-object-team menu-item-10545"><a href="https://demo.artureanec.com/themes/logico-rounded/team/samuel-peterson/">Single Team</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="menu-item-10514" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10514"><a href="#">Career</a>
|
||||
<ul class="sub-menu">
|
||||
<li id="menu-item-10546" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10546"><a href="https://demo.artureanec.com/themes/logico-rounded/career-page/">Career</a></li>
|
||||
<li id="menu-item-10547" class="menu-item menu-item-type-post_type menu-item-object-vacancy menu-item-10547"><a href="https://demo.artureanec.com/themes/logico-rounded/careers/cdl-a-truck-driver-2/">Single Vacancy</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="menu-item-10515" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10515"><a href="#">Galleries</a>
|
||||
<ul class="sub-menu">
|
||||
<li id="menu-item-10548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10548"><a href="https://demo.artureanec.com/themes/logico-rounded/gallery-grid/">Gallery Grid</a></li>
|
||||
<li id="menu-item-10549" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10549"><a href="https://demo.artureanec.com/themes/logico-rounded/gallery-masonry/">Gallery Masonry</a></li>
|
||||
<li id="menu-item-10550" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-10550"><a href="https://demo.artureanec.com/themes/logico-rounded/portfolio/cargo-delivery-by-sea/">Single Gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="menu-item-10538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10538"><a href="https://demo.artureanec.com/themes/logico-rounded/our-garage/">Our Garage</a></li>
|
||||
<li id="menu-item-10540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10540"><a href="https://demo.artureanec.com/themes/logico-rounded/request-quote/">Request Quote</a></li>
|
||||
<li id="menu-item-10537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10537"><a href="https://demo.artureanec.com/themes/logico-rounded/calculator/">Calculator</a></li>
|
||||
<li id="menu-item-10541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10541"><a href="https://demo.artureanec.com/themes/logico-rounded/certifications-and-documents/">Certifications</a></li>
|
||||
<li id="menu-item-10539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10539"><a href="https://demo.artureanec.com/themes/logico-rounded/pricing-plans/">Pricing Plans</a></li>
|
||||
<li id="menu-item-10542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10542"><a href="https://demo.artureanec.com/themes/logico-rounded/faq/">FAQ</a></li>
|
||||
<li id="menu-item-10543" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10543"><a href="https://demo.artureanec.com/themes/logico-rounded/typography/">Typography</a></li>
|
||||
<li id="menu-item-10516" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10516"><a href="https://demo.artureanec.com/themes/logico-rounded/404/">Page 404</a></li> -->
|
||||
<!-- </ul> -->
|
||||
</li>
|
||||
<li id="menu-item-10510" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10510<?php if(isset($current_page) && $current_page === 'miletruth') echo ' active'; ?>"><a href="miletruth.php">MileTruth<superscript>™</superscript> AI</a>
|
||||
<!-- <ul class="sub-menu"> -->
|
||||
|
||||
<!-- <li id="menu-item-10551" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10551"><a href="https://demo.artureanec.com/themes/logico-rounded/services-page/">Services</a></li>
|
||||
<li id="menu-item-10552" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10552"><a href="https://demo.artureanec.com/themes/logico-rounded/services-page/air-freight-service/">Single Service</a></li> -->
|
||||
<!-- </ul> -->
|
||||
</li>
|
||||
<li id="menu-item-10511" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10511<?php if(isset($current_page) && $current_page === 'solutions') echo ' active'; ?>"><a href="#">Solutions</a>
|
||||
<ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10556"><a href="">Use Cases</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-product menu-item-10557"><a href="">Connected Logistics</a></li>
|
||||
<!-- <li id="menu-item-10553" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10553"><a href="https://demo.artureanec.com/themes/logico-rounded/cart/">Cart</a></li>
|
||||
<li id="menu-item-10554" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10554"><a href="https://demo.artureanec.com/themes/logico-rounded/checkout/">Checkout</a></li>
|
||||
<li id="menu-item-10555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10555"><a href="https://demo.artureanec.com/themes/logico-rounded/my-account/">My account</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li id="menu-item-10512" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512<?php if(isset($current_page) && ($current_page === 'about' || $current_page === 'women')) echo ' active'; ?>"><a href="">About</a>
|
||||
<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></li>
|
||||
<li id="menu-item-10559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10559"><a href="women.php">Women Entrepreneurship</a></li>
|
||||
<!-- <li id="menu-item-10560" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-10560"><a href="https://demo.artureanec.com/themes/logico-rounded/transportation-services-in-los-angeles-region/">Single Post</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li id="menu-item-10535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10535<?php if(isset($current_page) && $current_page === 'blogs') echo ' active'; ?>"><a href="blogs.php">Blogs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="menu-trigger" data-id="0b7bf6f">
|
||||
<span class="menu-trigger-icon">
|
||||
<span class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mobile-header-menu-container" id="mobile-header-0b7bf6f">
|
||||
<div class="mobile-header-row">
|
||||
|
||||
<!-- Icons Block -->
|
||||
<div class="header-icons-container">
|
||||
<div class="header-icon mini-cart"><a href="https://demo.artureanec.com/themes/logico-rounded/cart/" 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="search-trigger-icon"></span></a>
|
||||
<div
|
||||
class="header-icon login-logout"><a href="https://demo.artureanec.com/themes/logico-rounded/my-account/" title="Login/Register" class="link-login"></a></div>
|
||||
<div class="header-icon menu-close"><span class="menu-close-icon"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Menu Block -->
|
||||
<nav>
|
||||
<ul id="menu-main-menu-1" class="main-menu">
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-10508"><a href="#">Home</a>
|
||||
<!-- <ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-10528"><a href="https://demo.artureanec.com/themes/logico-rounded/">Transportation</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-61 current_page_item menu-item-10531"><a href="https://demo.artureanec.com/themes/logico-rounded/home-2/" aria-current="page">Logistic</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10532"><a href="https://demo.artureanec.com/themes/logico-rounded/home-3/">Ship Freight</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10529"><a href="https://demo.artureanec.com/themes/logico-rounded/home-4/">Air Freight</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10533"><a href="https://demo.artureanec.com/themes/logico-rounded/home-5/">Railway Freight</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10534"><a href="https://demo.artureanec.com/themes/logico-rounded/home-6/">Truck Freight</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10530"><a href="https://demo.artureanec.com/themes/logico-rounded/intro/">Intro</a></li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10523"><a href="https://demo.artureanec.com/themes/logico/intro/">Angular Version</a></li>
|
||||
</ul> -->
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10509"><a href="how-its-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-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>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-team menu-item-10545"><a href="https://demo.artureanec.com/themes/logico-rounded/team/samuel-peterson/">Single Team</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10514"><a href="#">Career</a>
|
||||
<ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10546"><a href="https://demo.artureanec.com/themes/logico-rounded/career-page/">Career</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-vacancy menu-item-10547"><a href="https://demo.artureanec.com/themes/logico-rounded/careers/cdl-a-truck-driver-2/">Single Vacancy</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10515"><a href="#">Galleries</a>
|
||||
<ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10548"><a href="https://demo.artureanec.com/themes/logico-rounded/gallery-grid/">Gallery Grid</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10549"><a href="https://demo.artureanec.com/themes/logico-rounded/gallery-masonry/">Gallery Masonry</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-10550"><a href="https://demo.artureanec.com/themes/logico-rounded/portfolio/cargo-delivery-by-sea/">Single Gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10538"><a href="https://demo.artureanec.com/themes/logico-rounded/our-garage/">Our Garage</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10540"><a href="https://demo.artureanec.com/themes/logico-rounded/request-quote/">Request Quote</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10537"><a href="https://demo.artureanec.com/themes/logico-rounded/calculator/">Calculator</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10541"><a href="https://demo.artureanec.com/themes/logico-rounded/certifications-and-documents/">Certifications</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10539"><a href="https://demo.artureanec.com/themes/logico-rounded/pricing-plans/">Pricing Plans</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10542"><a href="https://demo.artureanec.com/themes/logico-rounded/faq/">FAQ</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10543"><a href="https://demo.artureanec.com/themes/logico-rounded/typography/">Typography</a></li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10516"><a href="https://demo.artureanec.com/themes/logico-rounded/404/">Page 404</a></li>
|
||||
</ul> -->
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10510"><a href="miletruth.php">MileTruth<superscript>™</superscript> AI</a>
|
||||
<!-- <ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10551"><a href="https://demo.artureanec.com/themes/logico-rounded/services-page/">Services</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10552"><a href="https://demo.artureanec.com/themes/logico-rounded/services-page/air-freight-service/">Single Service</a></li>
|
||||
</ul> -->
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10511"><a href="#">Solutions</a>
|
||||
<ul class="sub-menu">
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10556"><a href="">Use Cases</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-product menu-item-10557"><a href="">Connected Logistics</a></li>
|
||||
<!-- <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10553"><a href="https://demo.artureanec.com/themes/logico-rounded/cart/">Cart</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10554"><a href="https://demo.artureanec.com/themes/logico-rounded/checkout/">Checkout</a></li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10555"><a href="https://demo.artureanec.com/themes/logico-rounded/my-account/">My account</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512"><a href="#">About</a>
|
||||
<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></li>
|
||||
<li id="menu-item-10559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10559"><a href="women.php">Women Entrepreneurship</a></li>
|
||||
<!-- <li id="menu-item-10560" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-10560"><a href="https://demo.artureanec.com/themes/logico-rounded/transportation-services-in-los-angeles-region/">Single Post</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10535"><a href="blogs.php">Blogs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-mobile-contacts">
|
||||
<div class="contact-item contact-item-phone"><span class="contact-item-label">Phone</span>
|
||||
<div class="contact-item-value">
|
||||
<p>+ 1-800 100 975 20 34<br />+ (123) 1800-234-5678</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item contact-item-email"><span class="contact-item-label">Email</span>
|
||||
<div class="contact-item-value">
|
||||
<p><a href="/cdn-cgi/l/email-protection#3f535058565c507f525e5653115c5052"><span class="__cf_email__" data-cfemail="4e222129272d210e232f2722602d2123">[email protected]</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-mobile-socials">
|
||||
<ul class="mobile-menu-socials wrapper-socials">
|
||||
<li><a class="fab fa-facebook-f" href="https://www.facebook.com/" target="_blank"></a></li>
|
||||
<li><a class="fab fa-x-twitter" href="https://x.com/" target="_blank"></a></li>
|
||||
<li><a class="fab fa-linkedin-in" href="https://www.linkedin.com/" target="_blank"></a></li>
|
||||
<li><a class="fab fa-youtube" href="https://www.youtube.com/" target="_blank"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-mobile-button"><a class="logico-alter-button" href="/contacts/" target="_blank">Get in Touch</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
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 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">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-search-widget">
|
||||
<div class="search-trigger" data-id="18fc20a"><span class="search-trigger-icon"></span></div>
|
||||
</div>
|
||||
<div class="site-search" id="site-search-18fc20a">
|
||||
<div class="site-search-close"></div>
|
||||
<form name="search_form" method="get" action="https://demo.artureanec.com/themes/logico-rounded/" class="search-form" id="search-87"><span class="search-form-icon" onclick="javascript:document.getElementById("search-87").submit();"></span>
|
||||
<div class="logico-form-field">
|
||||
<div class="logico-label-wrapper">
|
||||
<div class="logico-label-placeholder">
|
||||
<div class="logico-label-placeholder-text">Search</div>
|
||||
</div><label>Search</label></div><input type="text" name="s" value="" title="Search" class="search-form-field"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="elementor-element elementor-element-7a36700 elementor-widget elementor-widget-logico_login_logout" data-id="7a36700" data-element_type="widget" data-widget_type="logico_login_logout.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-login-logout-widget">
|
||||
<div class="login-logout"><a href="https://demo.artureanec.com/themes/logico-rounded/my-account/" title="Login/Register" class="link-login"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-f961133 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="f961133" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-cabdb09 elementor-widget elementor-widget-logico_header_button" data-id="cabdb09" data-element_type="widget" data-widget_type="logico_header_button.default">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
145
includes/our-team.php
Normal file
145
includes/our-team.php
Normal file
@@ -0,0 +1,145 @@
|
||||
<?php
|
||||
/**
|
||||
* Modular Team Section Component
|
||||
* Usage: include 'includes/our-team.php';
|
||||
* Depends on: head.php being included in the parent page for global styles.
|
||||
*/
|
||||
?>
|
||||
<style>
|
||||
/* Scope safety: ensured by wrapping elementor-63 container below */
|
||||
.elementor-element-bf5fff2 {
|
||||
--margin-top: 100px !important; /* Slightly reduced for about page */
|
||||
--margin-bottom: 80px !important;
|
||||
}
|
||||
.elementor-element-57c7653 .logico-title {
|
||||
font-size: 50px !important; /* Adjusted for better visibility */
|
||||
line-height: 1.2 !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
/* Fix for overlapping text seen in screenshot */
|
||||
.elementor-element-bf5fff2 {
|
||||
clear: both;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="elementor elementor-63">
|
||||
<div class="elementor-element elementor-element-bf5fff2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="bf5fff2" data-element_type="container">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-5a54148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5a54148" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-94ebf2e elementor-widget elementor-widget-logico_heading" data-id="94ebf2e" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">/ team /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-57c7653 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="57c7653" data-element_type="widget" data-settings="{"_animation":"logico_heading_animation"}" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Meet our the best crew</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-138c81a elementor-widget elementor-widget-logico_team_listing" data-id="138c81a" data-element_type="widget" data-widget_type="logico_team_listing.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-team-listing-widget">
|
||||
<div class="archive-listing" data-ajax='{"post_type":"team","post_status":"publish","ignore_sticky_posts":true,"suppress_filters":true,"orderby":"post__in","order":"desc","link_base":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/home-3","post__in":["2807","2850","2855"],"posts_per_page":3,"columns_number":3,"paged":1}' data-widget='{"item_class":"team-item-wrapper","columns_number":3,"listing_type":"grid","show_media":"yes","show_title":"yes","show_position":"yes","show_socials":"yes","show_pagination":""}'>
|
||||
<div class="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
|
||||
<div class="team-item-wrapper post-2807 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-1" title="team-pic-1" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samuel Peterson</a>
|
||||
</div>
|
||||
<div class="team-item-position">CEO Logico</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Andrew McDickens</a>
|
||||
</div>
|
||||
<div class="team-item-position">Manager</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2855 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-3" title="team-pic-3" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samantha Powers</a>
|
||||
</div>
|
||||
<div class="team-item-position">HR Specialist</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
98
includes/our_office.php
Normal file
98
includes/our_office.php
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
<style>
|
||||
/* Our Office Component Styles */
|
||||
.offices-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.offices-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
padding: 80px 32px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.offices-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.offices-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 26px;
|
||||
}
|
||||
.office-card {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 18px rgba(17,20,25,0.07);
|
||||
transition: transform 0.42s ease, box-shadow 0.42s ease;
|
||||
}
|
||||
.office-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(192,32,42,0.14); }
|
||||
.map-container { height: 220px; overflow: hidden; }
|
||||
.card-body { padding: 28px 30px 32px; }
|
||||
.card-tag { font-size: 0.67rem; color: #C0202A; margin-bottom: 8px; }
|
||||
.card-city { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; }
|
||||
.card-desc { font-size: 0.92rem; color: #4d5261; line-height: 1.72; }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.offices-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.offices-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="offices-section-wrapper">
|
||||
<section class="offices-section">
|
||||
<header class="offices-header">
|
||||
<div class="offices-eyebrow">Where We Are</div>
|
||||
<h2 class="offices-title">Our Offices</h2>
|
||||
<p class="offices-subtitle">Strategically located to serve businesses across India</p>
|
||||
</header>
|
||||
|
||||
<div class="offices-grid">
|
||||
<!-- Coimbatore -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d62617.64038696284!2d76.92516!3d11.01680!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1700000000000" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Headquarters</p>
|
||||
<h4 class="card-city">Coimbatore</h4>
|
||||
<p class="card-desc">Our innovation hub where MileTruth™ AI was born</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Bengaluru -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d124416.29!2d77.5007!3d12.9716!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfc3e8517e4fe0!2sBengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1700000000001" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Technology Center</p>
|
||||
<h4 class="card-city">Bengaluru</h4>
|
||||
<p class="card-desc">Engineering excellence and product development</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Hyderabad -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d121684.68!2d78.3674!3d17.3850!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1700000000002" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Operations Hub</p>
|
||||
<h4 class="card-city">Hyderabad</h4>
|
||||
<p class="card-desc">Scaling logistics operations across India</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
95
includes/our_values.php
Normal file
95
includes/our_values.php
Normal file
@@ -0,0 +1,95 @@
|
||||
|
||||
<style>
|
||||
/* Our Values Component Styles */
|
||||
.values-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.values-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
padding: 80px 32px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.values-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.values-eyebrow {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.values-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.value-card {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 24px;
|
||||
padding: 48px 36px;
|
||||
box-shadow: 0 2px 12px rgba(17,20,25,0.06);
|
||||
transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.value-card:hover { transform: translateY(-10px); }
|
||||
.card-icon-wrap { width: 72px; height: 72px; margin-bottom: 32px; background: rgba(192, 32, 42, 0.08); border-radius: 50%; }
|
||||
.card-icon-wrap svg { width: 36px; height: 36px; margin: 18px; }
|
||||
.card-label { font-size: 0.68rem; color: #C0202A; margin-bottom: 10px; }
|
||||
.card-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 14px; }
|
||||
.card-desc { font-size: 0.95rem; line-height: 1.75; color: #4a4f5a; }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.values-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.values-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="values-section-wrapper">
|
||||
<section class="values-section">
|
||||
<header class="values-header">
|
||||
<div class="values-eyebrow">Who We Are</div>
|
||||
<h2 class="values-title">Our Values</h2>
|
||||
<p class="values-subtitle">The principles that drive everything we do</p>
|
||||
</header>
|
||||
|
||||
<div class="values-grid">
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><circle cx="18" cy="18" r="10" stroke="#C0202A" stroke-width="2.2"/><circle cx="18" cy="18" r="5.5" stroke="#C0202A" stroke-width="2.2"/></svg></div>
|
||||
<p class="card-label">01 / Purpose</p>
|
||||
<h4 class="card-title">Mission-Driven</h4>
|
||||
<p class="card-desc">Transforming logistics with transparency and accountability at every mile.</p>
|
||||
</article>
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><circle cx="13" cy="13" r="4.5" stroke="#C0202A" stroke-width="2.2"/><circle cx="24" cy="13" r="4.5" stroke="#C0202A" stroke-width="2.2"/></svg></div>
|
||||
<p class="card-label">02 / Culture</p>
|
||||
<h4 class="card-title">People First</h4>
|
||||
<p class="card-desc">Empowering delivery partners and supporting women entrepreneurs.</p>
|
||||
</article>
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><path d="M18 4l2.5 7.7H28l-6.5 4.7 2.5 7.7L18 20l-6 4.4 2.5-7.7L8 12.7h7.5z" stroke="#C0202A" stroke-width="2.1" stroke-linejoin="round"/></svg></div>
|
||||
<p class="card-label">03 / Standards</p>
|
||||
<h4 class="card-title">Excellence</h4>
|
||||
<p class="card-desc">Setting new standards in logistics technology and service delivery.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
710
includes/problem.php
Normal file
710
includes/problem.php
Normal file
@@ -0,0 +1,710 @@
|
||||
|
||||
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--red: #c01227;
|
||||
--red-light: #fff0ee;
|
||||
--dark: #1a1e2e;
|
||||
--mid: #3d4259;
|
||||
--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);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ─── SECTION WRAPPER ─── */
|
||||
.problem-section {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
padding: 50px 40px 50px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Decorative dashed grid lines (Logico style) */
|
||||
.problem-section::before {
|
||||
content: '';
|
||||
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);
|
||||
background-size: 80px 80px;
|
||||
pointer-events: none;
|
||||
border-radius: 24px;
|
||||
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
|
||||
}
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 70px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
font-weight: 800;
|
||||
color: var(--dark);
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1px;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
|
||||
}
|
||||
|
||||
.section-title em {
|
||||
font-style: normal;
|
||||
color: var(--red);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
margin-top: 22px;
|
||||
font-size: 16px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ─── 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); }
|
||||
|
||||
/* ─── STAT CARDS ─── */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
padding: 36px 28px 32px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--card-shadow);
|
||||
cursor: default;
|
||||
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),
|
||||
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; }
|
||||
|
||||
.in-view .stat-card {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
transform: translateY(-6px) scale(1.01) !important;
|
||||
}
|
||||
|
||||
/* Corner accent stripe */
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
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);
|
||||
}
|
||||
|
||||
.stat-card:hover::before,
|
||||
.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%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stat-card:hover::after { opacity: 1; }
|
||||
|
||||
/* ─── ICON ─── */
|
||||
.card-icon-wrap {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 16px;
|
||||
background: var(--red-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 28px;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1), background 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .card-icon-wrap {
|
||||
transform: rotate(-6deg) scale(1.1);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
stroke: var(--red);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: stroke 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .card-icon-wrap svg { stroke: #fff; }
|
||||
|
||||
/* ─── NUMBER COUNTER ─── */
|
||||
.card-number {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
color: var(--dark);
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 14.5px;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Progress bar accent */
|
||||
.card-bar {
|
||||
margin-top: 28px;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: #ebebed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, var(--red), #ff7b6e);
|
||||
width: 0%;
|
||||
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; }
|
||||
|
||||
/* ─── FLOATING BADGE ─── */
|
||||
.float-badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
background: var(--red-light);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .float-badge { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.problem-section {
|
||||
max-width: 1560px;
|
||||
padding: 60px 52px 60px;
|
||||
}
|
||||
|
||||
.problem-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 78px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 12px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(44px, 5.5vw, 78px);
|
||||
letter-spacing: -1.2px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 580px;
|
||||
margin-top: 25px;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 22px;
|
||||
padding: 40px 32px 36px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 60px;
|
||||
letter-spacing: -2.2px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 41px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
margin-top: 30px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.float-badge {
|
||||
font-size: 11px;
|
||||
letter-spacing: 2.2px;
|
||||
padding: 4px 12px;
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.problem-section {
|
||||
max-width: 1780px;
|
||||
padding: 72px 64px 72px;
|
||||
}
|
||||
|
||||
.problem-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 13px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(50px, 5.2vw, 84px);
|
||||
letter-spacing: -1.4px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 18px;
|
||||
max-width: 640px;
|
||||
margin-top: 28px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 24px;
|
||||
padding: 44px 36px 40px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 64px;
|
||||
letter-spacing: -2.4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 16.5px;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
margin-top: 34px;
|
||||
height: 3.5px;
|
||||
}
|
||||
|
||||
.float-badge {
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 2.4px;
|
||||
padding: 5px 13px;
|
||||
top: 23px;
|
||||
right: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
/* Section wrapper — wider container, more breathing room */
|
||||
.problem-section {
|
||||
max-width: 2000px;
|
||||
padding: 80px 72px 80px;
|
||||
}
|
||||
|
||||
/* Grid lines scale up */
|
||||
.problem-section::before {
|
||||
background-size: 110px 110px;
|
||||
}
|
||||
|
||||
/* Header spacing */
|
||||
.section-header {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
/* Eyebrow */
|
||||
.eyebrow {
|
||||
font-size: 15px;
|
||||
letter-spacing: 4px;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
/* Section title */
|
||||
.section-title {
|
||||
font-size: clamp(56px, 5vw, 88px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
/* Subtitle */
|
||||
.section-subtitle {
|
||||
font-size: 19px;
|
||||
max-width: 680px;
|
||||
margin-top: 30px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Stat cards grid — wider gaps */
|
||||
.cards-grid {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* Individual cards — more internal space */
|
||||
.stat-card {
|
||||
border-radius: 24px;
|
||||
padding: 48px 38px 42px;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.card-icon-wrap {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
/* Number counter */
|
||||
.card-number {
|
||||
font-size: 68px;
|
||||
letter-spacing: -2.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
/* Card label */
|
||||
.card-label {
|
||||
font-size: 17px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.card-bar {
|
||||
margin-top: 36px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Floating badge */
|
||||
.float-badge {
|
||||
font-size: 12px;
|
||||
letter-spacing: 2.5px;
|
||||
padding: 5px 14px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
<div class="cards-grid">
|
||||
|
||||
<!-- Card 1 -->
|
||||
<div class="stat-card">
|
||||
<span class="float-badge">Critical</span>
|
||||
<div class="card-icon-wrap">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="73">0</span><span class="suffix">%</span>
|
||||
</div>
|
||||
<div class="card-label">of delays happen at handoffs between logistics segments</div>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
|
||||
<polyline points="16 7 22 7 22 13"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="40">0</span><span class="suffix">%</span>
|
||||
</div>
|
||||
<div class="card-label">of all shipments require manual intervention to complete delivery</div>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="2" data-decimals="1" data-step="0.1">0</span><span class="suffix">x</span>
|
||||
</div>
|
||||
<div class="card-label">more time wasted on coordination across fragmented logistics providers</div>
|
||||
<div class="card-bar"><div class="card-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
84
includes/testimonials.php
Normal file
84
includes/testimonials.php
Normal file
@@ -0,0 +1,84 @@
|
||||
<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="{"background_background":"classic"}">
|
||||
<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>
|
||||
</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="{"items":1,"itemsWidescreen":1,"itemsLaptop":1,"itemsTabletExtra":1,"itemsTablet":1,"itemsMobileExtra":1,"itemsMobile":1,"nav":false,"dots":true,"progress":true,"autoplayHoverPause":false,"autoplay":false,"autoplaySpeed":300,"autoplayTimeout":5000,"loop":true,"dragEndSpeed":500,"navSpeed":500,"dotsSpeed":500,"dotsContainer":".owl-dots-1632aa3","rtl":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>
|
||||
</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="{"_position":"absolute"}" 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">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
100
includes/title_widget.php
Normal file
100
includes/title_widget.php
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
<!-- Animated Title Component -->
|
||||
<style>
|
||||
/* Scoped Styles for Animated Title */
|
||||
.title-widget-wrapper {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.logico-animated-title {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
color: #111419;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
max-width: 650px; /* Constrain width to force multi-line like the example */
|
||||
}
|
||||
|
||||
/* Animation States */
|
||||
.animated-ready .word {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
display: inline-block;
|
||||
transition: all 0.8s cubic-bezier(0.2, 0.6, 0.4, 1);
|
||||
}
|
||||
|
||||
.animated-ready.is-animated .word {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Staggering words */
|
||||
.animated-ready.is-animated .word:nth-child(1) { transition-delay: 0.1s; }
|
||||
.animated-ready.is-animated .word:nth-child(2) { transition-delay: 0.2s; }
|
||||
.animated-ready.is-animated .word:nth-child(3) { transition-delay: 0.3s; }
|
||||
.animated-ready.is-animated .word:nth-child(4) { transition-delay: 0.4s; }
|
||||
.animated-ready.is-animated .word:nth-child(5) { transition-delay: 0.5s; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logico-animated-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="title-widget-wrapper">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 id="animated-title-main" class="logico-title animated-ready logico-animated-title">
|
||||
<!-- Text will be split by JS -->
|
||||
Why MileTruth™ is Different
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const titleEl = document.getElementById('animated-title-main');
|
||||
if (!titleEl) return;
|
||||
|
||||
// Split title into words for staggering
|
||||
const text = titleEl.innerText;
|
||||
const words = text.split(' ');
|
||||
titleEl.innerHTML = ''; // Clear original text
|
||||
|
||||
words.forEach(word => {
|
||||
const wordSpan = document.createElement('span');
|
||||
wordSpan.className = 'word';
|
||||
wordSpan.style.marginRight = '12px'; // Re-add space
|
||||
wordSpan.innerText = word;
|
||||
titleEl.appendChild(wordSpan);
|
||||
});
|
||||
|
||||
// Trigger animation after a slight delay
|
||||
setTimeout(() => {
|
||||
titleEl.classList.add('is-animated');
|
||||
}, 300);
|
||||
|
||||
// Re-trigger if scrolled into view (basic Intersection Observer)
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-animated');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
observer.observe(titleEl);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
97
includes/vision.php
Normal file
97
includes/vision.php
Normal file
@@ -0,0 +1,97 @@
|
||||
|
||||
<style>
|
||||
/* Vision & Mission Component Styles */
|
||||
.vm-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.vm-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
padding: 80px 32px 90px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.vm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.vm-card {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 28px;
|
||||
padding: 52px 48px 44px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(17,20,25,0.06);
|
||||
transition: transform 0.44s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.44s ease;
|
||||
}
|
||||
.vm-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 30px 64px rgba(192,32,42,0.13);
|
||||
}
|
||||
.vm-icon-wrap {
|
||||
width: 68px; height: 68px;
|
||||
margin-bottom: 36px;
|
||||
background: rgba(192,32,42,0.08);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.vm-icon-wrap svg { width: 34px; height: 34px; }
|
||||
.vm-tag {
|
||||
font-size: 0.67rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.vm-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.vm-title em { font-style: italic; color: #C0202A; }
|
||||
.vm-body {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
color: #4d5261;
|
||||
line-height: 1.8;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.vm-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="vm-section-wrapper">
|
||||
<section class="vm-section">
|
||||
<div class="vm-grid">
|
||||
<article class="vm-card">
|
||||
<div class="vm-icon-wrap">
|
||||
<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="18" cy="18" rx="14" ry="9" stroke="#C0202A" stroke-width="2.1"/><circle cx="18" cy="18" r="4" stroke="#C0202A" stroke-width="2.1"/><circle cx="18" cy="18" r="1.4" fill="#C0202A"/></svg>
|
||||
</div>
|
||||
<p class="vm-tag">Vision</p>
|
||||
<h3 class="vm-title">Our <em>Vision</em></h3>
|
||||
<p class="vm-body">To become India's most trusted connected logistics platform, where every package travels on a single, transparent timeline.</p>
|
||||
</article>
|
||||
<article class="vm-card">
|
||||
<div class="vm-icon-wrap">
|
||||
<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 28 L14 22 Q16 14 24 8 Q30 6 30 6 Q28 12 22 20 L16 26 Z" stroke="#C0202A" stroke-width="2.1" stroke-linejoin="round"/><circle cx="19" cy="17" r="2.4" fill="#C0202A" opacity="0.35"/></svg>
|
||||
</div>
|
||||
<p class="vm-tag">Mission</p>
|
||||
<h3 class="vm-title">Our <em>Mission</em></h3>
|
||||
<p class="vm-body">To eliminate the chaos of fragmented logistics by unifying first, mid, and last miles with MileTruth™ AI.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
484
includes/why_miletruth.php
Normal file
484
includes/why_miletruth.php
Normal file
@@ -0,0 +1,484 @@
|
||||
<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>
|
||||
|
||||
<!-- ══ SECTION HTML ══ -->
|
||||
<div class="mt-section" id="mt-miletruth">
|
||||
|
||||
<!-- Stats Banner -->
|
||||
<div class="mt-banner">
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="4" data-suffix="-6hrs">0</span>
|
||||
<span class="mt-stat-label">Advance Warning</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="98" data-suffix="%">0</span>
|
||||
<span class="mt-stat-label">ETA Accuracy</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="50" data-suffix="+">0</span>
|
||||
<span class="mt-stat-label">Data Variables</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="30" data-suffix="%">0</span>
|
||||
<span class="mt-stat-label">Exception Reduction</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="mt-body">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mt-header">
|
||||
<div class="mt-eyebrow">AI Intelligence</div>
|
||||
<h2 class="mt-title">Why <em>MileTruth</em><sup>™</sup> is Different</h2>
|
||||
<p class="mt-desc">Unlike generic AI tools, MileTruth™ is trained exclusively on logistics data — millions of deliveries, routes, exceptions, and outcomes. It thinks like a logistics expert because it was built to be one.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Cards -->
|
||||
<div class="mt-grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Predictive Delay Detection</h5>
|
||||
<p class="mt-card-desc">AI analyses 50+ variables to predict delays 4–6 hours before they occur, giving you time to act.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 2 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/>
|
||||
<path d="M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Smart Route Optimisation</h5>
|
||||
<p class="mt-card-desc">Real-time traffic, weather, and capacity data feed into dynamic routing that adapts on the fly.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Accurate ETA Predictions</h5>
|
||||
<p class="mt-card-desc">Machine learning models trained on millions of deliveries provide 98% accurate arrival times.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Exception Management</h5>
|
||||
<p class="mt-card-desc">Automatic escalation protocols trigger when deliveries deviate from expected patterns.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 5 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<line x1="18" y1="20" x2="18" y2="10"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4"/>
|
||||
<line x1="6" y1="20" x2="6" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Performance Analytics</h5>
|
||||
<p class="mt-card-desc">Deep insights into carrier performance, route efficiency, and cost optimisation opportunities.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 6 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Automated Recommendations</h5>
|
||||
<p class="mt-card-desc">AI suggests carrier selection, consolidation opportunities, and capacity planning adjustments.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /mt-grid -->
|
||||
|
||||
</div><!-- /mt-body -->
|
||||
</div><!-- /mt-section -->
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('mt-miletruth');
|
||||
if (!section) return;
|
||||
|
||||
var fired = false;
|
||||
|
||||
function activate() {
|
||||
if (fired) return;
|
||||
fired = true;
|
||||
section.classList.add('mt-live');
|
||||
animateCounters();
|
||||
}
|
||||
|
||||
/* ── counter animation ── */
|
||||
function animateCounters() {
|
||||
section.querySelectorAll('.mt-stat-num[data-target]').forEach(function (el) {
|
||||
var target = parseInt(el.dataset.target, 10);
|
||||
var suffix = el.dataset.suffix || '';
|
||||
var start = performance.now();
|
||||
var dur = 1600;
|
||||
|
||||
function tick(now) {
|
||||
var p = Math.min((now - start) / dur, 1);
|
||||
var ease = 1 - Math.pow(2, -10 * p);
|
||||
var val = Math.round(ease * target);
|
||||
el.textContent = val + suffix;
|
||||
if (p < 1) requestAnimationFrame(tick);
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
});
|
||||
}
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) { if (e.isIntersecting) { activate(); io.unobserve(e.target); } });
|
||||
}, { threshold: 0.1 });
|
||||
io.observe(section);
|
||||
}
|
||||
|
||||
setTimeout(activate, 380);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user