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