152 lines
8.8 KiB
TypeScript
152 lines
8.8 KiB
TypeScript
import React from "react";
|
|
|
|
export default function CompetitiveEdge() {
|
|
return (
|
|
<section id="comparison" className="comparison-section">
|
|
<div className="container">
|
|
<div className="comparison-layout">
|
|
{/* Comparison matrix Table */}
|
|
<div className="table-wrapper">
|
|
<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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h32a2 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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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="no-text">No</td>
|
|
<td className="partial-text">Partial</td>
|
|
<td className="no-text">No</td>
|
|
</tr>
|
|
<tr className="table-row-hover">
|
|
<td className="capability-cell">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h38s-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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
|
<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>
|
|
|
|
{/* Strategic Moat Side cards */}
|
|
<div className="moat-panel">
|
|
<div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="section-header">
|
|
<span className="section-tag">Competitive Edge</span>
|
|
<h3 className="logico-title" style={{ marginTop: "10px", marginBottom: "15px" }}>Where Doormile Sits And Why It Wins</h3>
|
|
<p className="section-desc">A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|