Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update about page

Browse Source
This commit is contained in:
Aravind R
2026-06-02 14:10:44 +05:30
parent a59a5e79dc
commit bae2fa0daa
24 changed files with 1903 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
src/components/sections/CompetitiveEdge.tsx
View File

@@ -11,14 +11,22 @@ if (typeof window !== "undefined") {
export default function CompetitiveEdge() {
const sectionRef = useRef<HTMLDivElement>(null);
const tableWrapperRef = useRef<HTMLDivElement>(null);
const moatRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const section = sectionRef.current;
const tableWrapper = tableWrapperRef.current;
const moat = moatRef.current;
const header = headerRef.current;
if (!section || !tableWrapper || !moat) return;
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({
@@ -30,22 +38,16 @@ export default function CompetitiveEdge() {
});
entryTl
// 1. Reveal Table & Right panel
.fromTo([tableWrapper, moat], {
opacity: 0,
y: 45,
}, {
// 1. Reveal Header & Table
.to([header, tableWrapper], {
opacity: 1,
y: 0,
duration: 0.95,
stagger: 0.12,
stagger: 0.15,
ease: "power4.out",
})
// 2. Stagger slide up row items
.fromTo(section.querySelectorAll(".table-row-hover"), {
opacity: 0,
y: 20,
}, {
.to(rows, {
opacity: 1,
y: 0,
duration: 0.75,
@@ -53,10 +55,7 @@ export default function CompetitiveEdge() {
ease: "power3.out",
}, "-=0.6")
// 3. Pop checkmarks and badges cleanly
.fromTo(section.querySelectorAll(".yes-badge, .advanced-badge"), {
opacity: 0,
scale: 0.8,
}, {
.to(badges, {
opacity: 1,
scale: 1,
duration: 0.55,
@@ -73,143 +72,140 @@ export default function CompetitiveEdge() {
<div className="comparison-bg-dots" />
<div className="container">
<div className="comparison-layout">
{/* Comparison Matrix Table (69% 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">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
<path d="M12 6v6l4 2"></path>
</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>
{/* Section Header */}
<div className="comparison-header" ref={headerRef}>
<div className="advantage-badge">DoorMile Advantage</div>
<h2 className="moat-heading">WHERE DOORMILE SITS AND WHY IT 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>
{/* Moat Highlight Card (28% on Desktop) */}
<div className="moat-panel" ref={moatRef}>
<div className="moat-accent-line" />
<div className="advantage-badge">DoorMile Advantage</div>
<h3 className="moat-heading">WHERE DOORMILE SITS AND WHY IT WINS</h3>
<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>
@@ -229,9 +225,9 @@ export default function CompetitiveEdge() {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 900px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.03) 0%, transparent 70%);
width: 1000px;
height: 1000px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.035) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
@@ -250,23 +246,81 @@ export default function CompetitiveEdge() {
.comparison-section .container {
position: relative;
z-index: 2;
max-width: 1400px;
max-width: 1400px; /* Restored/Expanded for gorgeous wide balance on large screens */
margin: 0 auto;
padding: 0 40px;
}
/* Proportional flex layout scaling */
.comparison-layout {
/* Section Header Layout */
.comparison-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 32px;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Spacious table styling wrapper (69% width) */
/* DoorMile Advantage Badge */
.advantage-badge {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8102e;
background: rgba(200, 16, 46, 0.06);
padding: 6px 14px;
border-radius: 30px;
margin: 0 auto 24px auto;
border: 1.5px solid rgba(200, 16, 46, 0.15);
display: inline-block;
white-space: nowrap;
}
/* Centered heading with bottom accent underline */
.moat-heading {
font-family: 'Manrope', sans-serif;
font-size: clamp(2rem, 3.4vw, 3.2rem); /* Slightly enlarged for premium visual weight */
font-weight: 800;
line-height: 1.15;
color: #111111;
margin: 0 auto 20px auto;
letter-spacing: -0.03em;
text-transform: uppercase;
word-wrap: break-word;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
align-items: center;
}
/* Centered horizontal red underline accent decoration */
.moat-heading::after {
content: "";
display: block;
width: 72px;
height: 4px;
background: #c8102e;
margin-top: 18px;
border-radius: 2px;
}
.moat-desc {
font-family: 'Manrope', sans-serif;
font-size: 1.05rem;
line-height: 1.65;
color: #585c67;
margin: 16px auto 0 auto !important;
max-width: 760px !important;
text-align: center !important;
}
/* Spacious table styling wrapper (100% width on Desktop) */
.table-wrapper {
flex: 0 0 69%;
max-width: 69%;
width: 100%;
background: #ffffff;
border-radius: 24px;
border: 1px solid rgba(0, 0, 0, 0.05);
@@ -288,9 +342,9 @@ export default function CompetitiveEdge() {
/* Enlarge row paddings and metrics size */
.comparison-table th,
.comparison-table td {
padding: 22px 24px;
padding: 24px 28px;
border-bottom: 1px solid #f0f0f4;
font-size: 0.96rem;
font-size: 1rem;
color: #2b2b2b;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -303,7 +357,7 @@ export default function CompetitiveEdge() {
font-family: 'Manrope', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 0.8rem;
font-size: 0.85rem;
letter-spacing: 0.1em;
color: #8a8f9d;
background: rgba(15, 23, 42, 0.02);
@@ -315,7 +369,7 @@ export default function CompetitiveEdge() {
color: #ffffff !important;
text-align: center;
font-weight: 800;
font-size: 0.85rem;
font-size: 0.9rem;
letter-spacing: 0.1em;
border-left: 2.5px solid #c8102e;
border-right: 2.5px solid #c8102e;
@@ -327,7 +381,7 @@ export default function CompetitiveEdge() {
text-align: center;
color: #c8102e !important;
font-weight: 700;
background: linear-gradient(180deg, rgba(200, 16, 46, 0.02) 0%, rgba(200, 16, 46, 0.005) 100%) !important;
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;
@@ -340,17 +394,15 @@ export default function CompetitiveEdge() {
transition: background-color 0.3s ease;
}
.table-row-hover:hover {
background-color: #fafbfd;
.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.045) 0%, rgba(200, 16, 46, 0.015) 100%) !important;
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);
transform: scale(1.015);
z-index: 10;
}
/* Soft Breathing Box Shadow Red Glow Pulse Loop */
@@ -359,7 +411,7 @@ export default function CompetitiveEdge() {
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
}
50% {
box-shadow: inset 0 0 15px 1.5px rgba(200, 16, 46, 0.045);
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);
@@ -369,10 +421,10 @@ export default function CompetitiveEdge() {
.capability-cell {
display: flex;
align-items: center;
gap: 12px;
gap: 14px;
font-weight: 700;
color: #111111;
font-size: 1.05rem;
font-size: 1.1rem;
}
.capability-cell svg {
@@ -427,124 +479,11 @@ export default function CompetitiveEdge() {
font-weight: 500;
}
/* --- RIGHT SIDE ADVANTAGE CARD PANEL (Centered content alignment) --- */
.moat-panel {
flex: 0 0 28%;
max-width: 28%;
background: linear-gradient(135deg, #ffffff 0%, #fbfbfc 100%);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 24px;
padding: 40px 24px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.025), inset 0 1px 0 #ffffff;
display: flex;
flex-direction: column;
align-items: center; /* Centers items horizontally */
justify-content: center;
text-align: center; /* Centers all text */
position: relative;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
will-change: transform;
}
.moat-panel:hover {
transform: translateY(-5px);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.045);
}
.moat-accent-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #c8102e;
}
/* DoorMile Advantage Badge */
.advantage-badge {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8102e;
background: rgba(200, 16, 46, 0.06);
padding: 6px 14px;
border-radius: 30px;
margin: 0 auto 24px auto;
border: 1.5px solid rgba(200, 16, 46, 0.15);
display: inline-block;
white-space: nowrap;
}
/* Centered heading with bottom accent underline instead of left bar */
.moat-heading {
font-family: 'Manrope', sans-serif;
font-size: clamp(1.4rem, 2.3vw, 2.1rem);
font-weight: 800;
line-height: 1.25;
color: #111111;
margin: 0 auto 20px auto;
letter-spacing: -0.025em;
text-transform: uppercase;
word-wrap: break-word;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
align-items: center;
}
/* Centered horizontal red underline accent decoration */
.moat-heading::after {
content: "";
display: block;
width: 48px;
height: 3.5px;
background: #c8102e;
margin-top: 16px;
border-radius: 2px;
}
.moat-desc {
font-family: 'Manrope', sans-serif;
font-size: 0.98rem;
line-height: 1.62;
color: #585c67;
margin: 8px auto 0 auto;
max-width: 340px; /* Bounded width for beautiful block wrapping */
}
/* --- RESPONSIVE WORKFLOWS & BREAKPOINTS --- */
@media (max-width: 1200px) {
.comparison-section .container {
padding: 0 24px;
}
.comparison-layout {
gap: 24px;
}
}
@media (max-width: 1024px) {
.comparison-layout {
flex-direction: column-reverse;
gap: 40px;
}
.table-wrapper,
.moat-panel {
flex: 0 0 100%;
max-width: 100%;
}
.moat-panel {
padding: 48px;
}
.moat-heading {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
@@ -552,6 +491,10 @@ export default function CompetitiveEdge() {
padding: 80px 0;
}
.moat-heading {
font-size: 1.8rem;
}
/* Capability Matrix table gains responsive horizontal swipe scrolls */
.table-wrapper {
width: 100%;