584 lines
21 KiB
TypeScript
584 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
if (typeof window !== "undefined") {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
}
|
|
|
|
export default function CompetitiveEdge() {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const tableWrapperRef = useRef<HTMLDivElement>(null);
|
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const section = sectionRef.current;
|
|
const tableWrapper = tableWrapperRef.current;
|
|
const header = headerRef.current;
|
|
|
|
if (!section || !tableWrapper || !header) return;
|
|
|
|
const rows = section.querySelectorAll(".table-row-hover");
|
|
const badges = section.querySelectorAll(".yes-badge, .advanced-badge");
|
|
|
|
// Dynamic initial state settings via GSAP to prevent SSR flash
|
|
gsap.set([header, tableWrapper], { opacity: 0, y: 45 });
|
|
gsap.set(rows, { opacity: 0, y: 20 });
|
|
gsap.set(badges, { opacity: 0, scale: 0.8 });
|
|
|
|
// GSAP Timeline ScrollTrigger for viewport entrances
|
|
const entryTl = gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: "top 78%",
|
|
toggleActions: "play none none none",
|
|
}
|
|
});
|
|
|
|
entryTl
|
|
// 1. Reveal Header & Table
|
|
.to([header, tableWrapper], {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.95,
|
|
stagger: 0.15,
|
|
ease: "power4.out",
|
|
})
|
|
// 2. Stagger slide up row items
|
|
.to(rows, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.75,
|
|
stagger: 0.05,
|
|
ease: "power3.out",
|
|
}, "-=0.6")
|
|
// 3. Pop checkmarks and badges cleanly
|
|
.to(badges, {
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 0.55,
|
|
stagger: 0.03,
|
|
ease: "back.out(1.6)",
|
|
}, "-=0.45");
|
|
|
|
}, []);
|
|
|
|
return (
|
|
<section id="comparison" className="comparison-section" ref={sectionRef}>
|
|
{/* Visual background layers */}
|
|
<div className="comparison-bg-glow" />
|
|
<div className="comparison-bg-dots" />
|
|
|
|
<div className="container">
|
|
{/* Section Header */}
|
|
<div className="comparison-header" ref={headerRef}>
|
|
<div className="advantage-eyebrow-container">
|
|
<span className="advantage-eyebrow">/ DoorMile wins/</span>
|
|
</div>
|
|
<h2 className="moat-heading" data-text="WHERE DOORMILE WINS">WHERE DOORMILE WINS</h2>
|
|
<p className="moat-desc">
|
|
A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comparison Matrix Table (Full width on desktop) */}
|
|
<div className="table-wrapper" ref={tableWrapperRef}>
|
|
<table className="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Capability</th>
|
|
<th className="col-highlight">Doormile</th>
|
|
<th>Aggregators</th>
|
|
<th>Local Couriers</th>
|
|
<th>Software Platforms</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="1" y="3" width="15" height="13"></rect>
|
|
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
|
|
<circle cx="5.5" cy="18.5" r="2.5"></circle>
|
|
<circle cx="18.5" cy="18.5" r="2.5"></circle>
|
|
</svg>
|
|
Owned fleet control
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="no-text">No</td>
|
|
<td className="partial-text">Yes</td>
|
|
<td className="no-text">No</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
Dynamic routing & dispatch
|
|
</td>
|
|
<td className="col-highlight"><span className="advanced-badge">✓ Advanced</span></td>
|
|
<td className="partial-text">Basic</td>
|
|
<td className="no-text">No</td>
|
|
<td className="partial-text">Advanced</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
|
</svg>
|
|
EV-aware planning
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="no-text">No</td>
|
|
<td className="no-text">No</td>
|
|
<td className="no-text">No</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
|
</svg>
|
|
Documentation & proof trail
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="partial-text">Partial</td>
|
|
<td className="no-text">No</td>
|
|
<td className="partial-text">Yes</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
Real-time tracking
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="partial-text">Yes</td>
|
|
<td className="no-text">No</td>
|
|
<td className="partial-text">Yes</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
Verified handling
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="partial-text">Partial</td>
|
|
<td className="no-text">No</td>
|
|
<td className="no-text">No</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
Hyperlocal learning
|
|
</td>
|
|
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
|
<td className="no-text">No</td>
|
|
<td className="no-text">No</td>
|
|
<td className="no-text">No</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="22" y1="12" x2="18" y2="12"></line>
|
|
<line x1="6" y1="12" x2="2" y2="12"></line>
|
|
<line x1="12" y1="6" x2="12" y2="2"></line>
|
|
<line x1="12" y1="22" x2="12" y2="18"></line>
|
|
</svg>
|
|
SLA accountability
|
|
</td>
|
|
<td className="col-highlight"><span className="advanced-badge">✓ High</span></td>
|
|
<td className="no-text">Low</td>
|
|
<td className="partial-text">Medium</td>
|
|
<td className="no-text">Low</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
/* --- HIGH-IMPACT PREMIUM CAPABILITIES SECTION STYLE --- */
|
|
.comparison-section {
|
|
position: relative;
|
|
padding: 120px 0;
|
|
background-color: #fafafa;
|
|
overflow: hidden;
|
|
font-family: "Manrope", sans-serif;
|
|
}
|
|
|
|
/* Spotlight radial background glow */
|
|
.comparison-bg-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 1000px;
|
|
height: 1000px;
|
|
background: radial-gradient(circle, rgba(200, 16, 46, 0.035) 0%, transparent 70%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Subtle logistics dot grid overlay */
|
|
.comparison-bg-dots {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(#e2e4e8 1.5px, transparent 1.5px);
|
|
background-size: 32px 32px;
|
|
opacity: 0.45;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.comparison-section .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 1400px; /* Restored/Expanded for gorgeous wide balance on large screens */
|
|
margin: 0 auto;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
/* Section Header Layout */
|
|
.comparison-header {
|
|
text-align: left;
|
|
margin-bottom: 60px;
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.advantage-eyebrow-container {
|
|
width: 100%;
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.16);
|
|
padding-bottom: 16px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
/* DoorMile Advantage Eyebrow */
|
|
.advantage-eyebrow {
|
|
font-family: 'Manrope', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: #060606ff;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Outlined heading style with clean duplicate layering hack */
|
|
.moat-heading {
|
|
position: relative;
|
|
font-family: var(--font-syne), 'Syne', sans-serif !important;
|
|
font-size: clamp(2.4rem, 6.8vw, 6.6rem) !important;
|
|
font-weight: 800 !important;
|
|
line-height: 1.1 !important;
|
|
color: #fafafa !important; /* solid background color to cover inner overlapping outlines */
|
|
margin: 0 0 24px 0;
|
|
letter-spacing: -0.02em;
|
|
text-transform: uppercase;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
z-index: 1;
|
|
}
|
|
|
|
.moat-heading::after {
|
|
content: attr(data-text) !important;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
color: transparent !important;
|
|
-webkit-text-stroke: 2.2px #c8102e;
|
|
-webkit-text-fill-color: transparent !important;
|
|
pointer-events: none;
|
|
display: block !important; /* override any old display: none */
|
|
}
|
|
|
|
.moat-desc {
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 1.05rem;
|
|
line-height: 1.65;
|
|
color: #585c67;
|
|
margin: 16px 0 0 0 !important;
|
|
max-width: 820px !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
/* Spacious table styling wrapper (100% width on Desktop) */
|
|
.table-wrapper {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
|
|
overflow: hidden;
|
|
transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.table-wrapper:hover {
|
|
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.035), 0 1px 3px rgba(0, 0, 0, 0.01);
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Enlarge row paddings and metrics size */
|
|
.comparison-table th,
|
|
.comparison-table td {
|
|
padding: 24px 28px;
|
|
border-bottom: 1px solid #f0f0f4;
|
|
font-size: 1rem;
|
|
color: #2b2b2b;
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.comparison-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.comparison-table th {
|
|
font-family: 'Manrope', sans-serif;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.1em;
|
|
color: #8a8f9d;
|
|
background: rgba(15, 23, 42, 0.02);
|
|
}
|
|
|
|
/* High weight column header highlights */
|
|
th.col-highlight {
|
|
background: #c8102e !important;
|
|
color: #ffffff !important;
|
|
text-align: center;
|
|
font-weight: 800;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.1em;
|
|
border-left: 2.5px solid #c8102e;
|
|
border-right: 2.5px solid #c8102e;
|
|
box-shadow: 0 4px 20px rgba(200, 16, 46, 0.1);
|
|
}
|
|
|
|
/* High weight cells gradient & highlights */
|
|
td.col-highlight {
|
|
text-align: center;
|
|
color: #c8102e !important;
|
|
font-weight: 700;
|
|
background: linear-gradient(180deg, rgba(200, 16, 46, 0.025) 0%, rgba(200, 16, 46, 0.005) 100%) !important;
|
|
border-left: 2.5px solid rgba(200, 16, 46, 0.12);
|
|
border-right: 2.5px solid rgba(200, 16, 46, 0.12);
|
|
position: relative;
|
|
will-change: transform, box-shadow, background;
|
|
animation: doormile-glow-pulse 4s infinite ease-in-out;
|
|
}
|
|
|
|
/* Row Hover Enhancements: brighten row & trigger DoorMile glow expand */
|
|
.table-row-hover {
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.table-row-hover:hover td {
|
|
background-color: rgba(200, 16, 46, 0.01) !important;
|
|
}
|
|
|
|
.table-row-hover:hover td.col-highlight {
|
|
background: linear-gradient(180deg, rgba(200, 16, 46, 0.06) 0%, rgba(200, 16, 46, 0.02) 100%) !important;
|
|
border-left-color: rgba(200, 16, 46, 0.35);
|
|
border-right-color: rgba(200, 16, 46, 0.35);
|
|
box-shadow: inset 0 0 16px rgba(200, 16, 46, 0.04);
|
|
}
|
|
|
|
/* Soft Breathing Box Shadow Red Glow Pulse Loop */
|
|
@keyframes doormile-glow-pulse {
|
|
0% {
|
|
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
|
|
}
|
|
50% {
|
|
box-shadow: inset 0 0 18px 2px rgba(200, 16, 46, 0.05);
|
|
}
|
|
100% {
|
|
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
|
|
}
|
|
}
|
|
|
|
.capability-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
font-weight: 700;
|
|
color: #111111;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.capability-cell svg {
|
|
color: #c8102e;
|
|
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.table-row-hover:hover .capability-cell svg {
|
|
transform: scale(1.18) rotate(4deg);
|
|
}
|
|
|
|
/* Premium Badge styles */
|
|
.yes-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #c8102e;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
background: rgba(200, 16, 46, 0.05);
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(200, 16, 46, 0.1);
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.advanced-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(200, 16, 46, 0.075);
|
|
border: 1.5px solid #c8102e;
|
|
padding: 4px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
font-weight: 800;
|
|
color: #c8102e;
|
|
will-change: transform, opacity;
|
|
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.06);
|
|
}
|
|
|
|
.no-text {
|
|
color: #8e94a5;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.partial-text {
|
|
color: #4b5262;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* --- RESPONSIVE WORKFLOWS & BREAKPOINTS --- */
|
|
@media (max-width: 1200px) {
|
|
.comparison-section .container {
|
|
padding: 0 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.comparison-section {
|
|
padding: 56px 0;
|
|
}
|
|
|
|
.comparison-section .container {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.moat-heading {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
/* On phones the 5-column table can't fit, so transform each row into a
|
|
stacked card: capability as the card title, then one "label: value"
|
|
line per competitor. Column labels are injected via nth-of-type so no
|
|
markup changes are needed (every row has the same column order). */
|
|
@media (max-width: 600px) {
|
|
.table-wrapper {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
overflow: visible;
|
|
}
|
|
.comparison-table { min-width: 0; width: 100%; }
|
|
.comparison-table thead { display: none; }
|
|
.comparison-table tbody,
|
|
.comparison-table tr,
|
|
.comparison-table td { display: block; width: auto; }
|
|
|
|
.comparison-table tr {
|
|
background: #ffffff;
|
|
border: 1px solid rgba(0,0,0,0.07);
|
|
border-radius: 16px;
|
|
padding: 6px 16px 8px;
|
|
margin-bottom: 14px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
/* Capability = card title (icon + name), no label */
|
|
.comparison-table td.capability-cell {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 12px;
|
|
font-size: 1.02rem;
|
|
padding: 12px 0 12px;
|
|
border-bottom: 1.5px solid #eef0f4;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Value cells = "Label .... value" rows */
|
|
.comparison-table td:not(.capability-cell) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f4f5f7;
|
|
font-size: 0.95rem;
|
|
text-align: right;
|
|
}
|
|
.comparison-table tr td:last-child { border-bottom: none; }
|
|
|
|
.comparison-table td.col-highlight::before { content: "Doormile"; }
|
|
.comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
|
|
.comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
|
|
.comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
|
|
.comparison-table td:not(.capability-cell)::before {
|
|
font-weight: 700;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: #8a8f9d;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* Neutralise the desktop highlight column styling inside the card */
|
|
.comparison-table td.col-highlight {
|
|
background: transparent !important;
|
|
border-left: none;
|
|
border-right: none;
|
|
animation: none !important;
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
`}} />
|
|
</section>
|
|
);
|
|
}
|