Updated Doormile website
This commit is contained in:
R-Bharathraj
573
includes/sections/misc/why_miletruth.php
Normal file
573
includes/sections/misc/why_miletruth.php
Normal file
@@ -0,0 +1,573 @@
|
||||
|
||||
<style>
|
||||
/* ══════════════════════════════════════════
|
||||
MILETRUTH SHOWCASE — FULL REDESIGN
|
||||
══════════════════════════════════════════ */
|
||||
#mts-root {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
/* background: #f8f7f5; */
|
||||
padding: 100px 0 80px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#mts-root::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #c01227 0%, #ff4d6d 50%, #c01227 100%);
|
||||
}
|
||||
|
||||
.mts-wrap {
|
||||
max-width: 1260px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* ── INTRO ROW ── */
|
||||
.mts-intro {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: end;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.mts-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
color: #c01227;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mts-heading {
|
||||
font-size: clamp(2rem, 3.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: #0f0f0f;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.mts-heading span {
|
||||
color: #c01227;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mts-heading span::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #c01227;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mts-sub {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
line-height: 1.75;
|
||||
margin: 0 0 32px;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
/* Stats pills */
|
||||
.mts-pills {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mts-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e4e0;
|
||||
border-radius: 50px;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.mts-pill:hover {
|
||||
border-color: #c01227;
|
||||
box-shadow: 0 4px 20px rgba(192,18,39,0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.mts-pill-num {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
color: #c01227;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mts-pill-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.3;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
/* ── MAIN BENTO GRID ── */
|
||||
.mts-bento {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Base card */
|
||||
.mts-card {
|
||||
background: #f8f7f5;
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #eee;
|
||||
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mts-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
|
||||
border-color: rgba(192,18,39,0.2);
|
||||
}
|
||||
|
||||
/* Large hero card — spans 2 rows */
|
||||
.mts-card--hero {
|
||||
grid-row: 1 / 3;
|
||||
background: #0f0f12;
|
||||
border-color: #1e1e24;
|
||||
padding: 52px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 460px;
|
||||
}
|
||||
|
||||
.mts-card--hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -80px; right: -80px;
|
||||
width: 280px; height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(192,18,39,0.25) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mts-card--hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -40px; left: -40px;
|
||||
width: 200px; height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(192,18,39,0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mts-hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(192,18,39,0.15);
|
||||
border: 1px solid rgba(192,18,39,0.3);
|
||||
border-radius: 50px;
|
||||
padding: 6px 14px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #ff4d6d;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
width: fit-content;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.mts-hero-badge::before {
|
||||
content: '';
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d6d;
|
||||
animation: blink 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.mts-hero-num {
|
||||
font-size: 8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(255,255,255,0.08);
|
||||
line-height: 0.8;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -6px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mts-hero-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 16px;
|
||||
letter-spacing: -0.5px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mts-hero-desc {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255,255,255,0.5);
|
||||
line-height: 1.75;
|
||||
margin: 0 0 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mts-hero-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: gap 0.3s;
|
||||
}
|
||||
|
||||
.mts-hero-link::after {
|
||||
content: '→';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #c01227;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
transition: background 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.mts-card--hero:hover .mts-hero-link::after {
|
||||
background: #ff4d6d;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Standard cards */
|
||||
.mts-card-no {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
color: #c01227;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mts-card-icon-wrap {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: #fff5f6;
|
||||
border: 1px solid rgba(192,18,39,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.35s;
|
||||
}
|
||||
|
||||
.mts-card:hover .mts-card-icon-wrap {
|
||||
background: #c01227;
|
||||
border-color: #c01227;
|
||||
}
|
||||
|
||||
.mts-card-icon-wrap svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #c01227;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: stroke 0.35s;
|
||||
}
|
||||
|
||||
.mts-card:hover .mts-card-icon-wrap svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.mts-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #111;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.mts-card-text {
|
||||
font-size: 0.875rem;
|
||||
color: #888;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Accent card — wide bottom-right */
|
||||
.mts-card--accent {
|
||||
background: linear-gradient(135deg, #c01227 0%, #8b0c1b 100%);
|
||||
border-color: #c01227;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 32px 36px;
|
||||
}
|
||||
|
||||
.mts-card--accent .mts-card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mts-card--accent .mts-card-text {
|
||||
color: rgba(255,255,255,0.65);
|
||||
}
|
||||
|
||||
.mts-card--accent .mts-card-icon-wrap {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
flex-shrink: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.mts-card--accent:hover .mts-card-icon-wrap {
|
||||
background: rgba(255,255,255,0.25);
|
||||
border-color: rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.mts-card--accent .mts-card-icon-wrap svg {
|
||||
stroke: #fff;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mts-card--accent:hover .mts-card-icon-wrap svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.mts-card--accent:hover {
|
||||
box-shadow: 0 20px 60px rgba(192,18,39,0.3);
|
||||
}
|
||||
|
||||
/* Ghost number decoration on small cards */
|
||||
.mts-card::after {
|
||||
content: attr(data-num);
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 16px;
|
||||
font-size: 5.5rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,0.04);
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
letter-spacing: -4px;
|
||||
}
|
||||
|
||||
.mts-card--hero::after { display: none; }
|
||||
.mts-card--accent::after { color: rgba(255,255,255,0.08); }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 1024px) {
|
||||
.mts-bento {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
.mts-card--hero {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: auto;
|
||||
min-height: 380px;
|
||||
}
|
||||
.mts-intro {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
#mts-root { padding: 60px 0 50px; }
|
||||
.mts-wrap { padding: 0 20px; }
|
||||
.mts-bento {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mts-card--hero {
|
||||
grid-column: auto;
|
||||
min-height: 340px;
|
||||
}
|
||||
.mts-card--accent {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.mts-hero-num { font-size: 5rem; }
|
||||
.mts-pills { gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="mts-root">
|
||||
<div class="mts-wrap">
|
||||
|
||||
<!-- Intro Row -->
|
||||
<div class="mts-intro">
|
||||
<div>
|
||||
<div class="mts-label">AI Intelligence</div>
|
||||
<h2 class="mts-heading">Why <span>MileTruth™</span><br>is Different</h2>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mts-sub">Unlike generic AI tools, MileTruth™ is trained exclusively on logistics data — millions of deliveries, routes, exceptions, and outcomes.</p>
|
||||
<div class="mts-pills">
|
||||
<div class="mts-pill">
|
||||
<span class="mts-pill-num" data-target="98" data-suffix="%">0%</span>
|
||||
<span class="mts-pill-text">ETA Accuracy</span>
|
||||
</div>
|
||||
<div class="mts-pill">
|
||||
<span class="mts-pill-num" data-target="50" data-suffix="+">0+</span>
|
||||
<span class="mts-pill-text">Data Variables</span>
|
||||
</div>
|
||||
<div class="mts-pill">
|
||||
<span class="mts-pill-num" data-target="30" data-suffix="%">0%</span>
|
||||
<span class="mts-pill-text">Fewer Exceptions</span>
|
||||
</div>
|
||||
<div class="mts-pill">
|
||||
<span class="mts-pill-num">4–6</span>
|
||||
<span class="mts-pill-text">Hours Ahead</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid -->
|
||||
<div class="mts-bento">
|
||||
|
||||
<!-- HERO CARD -->
|
||||
<div class="mts-card mts-card--hero">
|
||||
<div>
|
||||
<div class="mts-hero-badge">Live AI · Always On</div>
|
||||
<div class="mts-hero-num">01</div>
|
||||
<h3 class="mts-hero-title">Predictive Delay<br>Detection</h3>
|
||||
<p class="mts-hero-desc">AI analyses 50+ variables — traffic, weather, carrier patterns, and historical exceptions — to predict delays 4–6 hours before they occur, giving your team time to act before customers notice.</p>
|
||||
</div>
|
||||
<a href="#" class="mts-hero-link">Explore Feature</a>
|
||||
</div>
|
||||
|
||||
<!-- CARD 2 -->
|
||||
<div class="mts-card" data-num="02">
|
||||
<div class="mts-card-no">02</div>
|
||||
<div class="mts-card-icon-wrap">
|
||||
<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="mts-card-title">Smart Route Optimisation</h5>
|
||||
<p class="mts-card-text">Real-time traffic, weather, and capacity data feed into dynamic routing that adapts on the fly.</p>
|
||||
</div>
|
||||
|
||||
<!-- CARD 3 -->
|
||||
<div class="mts-card" data-num="03">
|
||||
<div class="mts-card-no">03</div>
|
||||
<div class="mts-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>
|
||||
<h5 class="mts-card-title">Accurate ETA Predictions</h5>
|
||||
<p class="mts-card-text">Machine learning models trained on millions of deliveries provide 98% accurate arrival times.</p>
|
||||
</div>
|
||||
|
||||
<!-- CARD 4 — ACCENT -->
|
||||
<div class="mts-card mts-card--accent" data-num="04">
|
||||
<div class="mts-card-icon-wrap">
|
||||
<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mts-card-title" style="color: white;">Exception Management</h5>
|
||||
<p class="mts-card-text" style="color: white;">Automatic escalation protocols trigger when deliveries deviate from expected patterns.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 5 -->
|
||||
<div class="mts-card" data-num="05">
|
||||
<div class="mts-card-no">05</div>
|
||||
<div class="mts-card-icon-wrap">
|
||||
<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="mts-card-title">Performance Analytics</h5>
|
||||
<p class="mts-card-text">Deep insights into carrier performance, route efficiency, and cost optimisation opportunities.</p>
|
||||
</div>
|
||||
|
||||
<!-- CARD 6 -->
|
||||
<!-- <div class="mts-card" data-num="06">
|
||||
<div class="mts-card-no">06</div>
|
||||
<div class="mts-card-icon-wrap">
|
||||
<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="mts-card-title">Automated Recommendations</h5>
|
||||
<p class="mts-card-text">AI suggests carrier selection, consolidation opportunities, and capacity planning adjustments.</p>
|
||||
</div> -->
|
||||
|
||||
</div><!-- /bento -->
|
||||
|
||||
</div><!-- /wrap -->
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('mts-root');
|
||||
if (!section) return;
|
||||
|
||||
var fired = false;
|
||||
|
||||
function activate() {
|
||||
if (fired) return;
|
||||
fired = true;
|
||||
animateCounters();
|
||||
}
|
||||
|
||||
function animateCounters() {
|
||||
section.querySelectorAll('[data-target]').forEach(function (el) {
|
||||
var target = parseInt(el.dataset.target, 10);
|
||||
var suffix = el.dataset.suffix || '';
|
||||
var start = performance.now();
|
||||
var dur = 1800;
|
||||
|
||||
(function tick(now) {
|
||||
var p = Math.min((now - start) / dur, 1);
|
||||
var ease = 1 - Math.pow(2, -10 * p);
|
||||
el.textContent = Math.round(ease * target) + suffix;
|
||||
if (p < 1) requestAnimationFrame(tick);
|
||||
})(start);
|
||||
});
|
||||
}
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
if (entries[0].isIntersecting) { activate(); io.disconnect(); }
|
||||
}, { threshold: 0.15 });
|
||||
io.observe(section);
|
||||
} else {
|
||||
setTimeout(activate, 500);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user