File size: 4,751 Bytes
fcf8749 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | import './Features.css'
const features = [
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 3L4 7.5V16.5L12 21L20 16.5V7.5L12 3Z" stroke="currentColor" strokeWidth="1.5"/>
<path d="M7 10.5L10.5 14L17 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
),
color: '#f97316',
colorBg: 'rgba(249,115,22,0.1)',
title: 'Fair Allocation Engine',
desc: 'Gini coefficient–based scoring ensures no driver is systematically overloaded or underutilized. Every allocation is measurably fair.',
badge: 'Gini ≤ 0.15 guaranteed',
},
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" strokeWidth="1.5"/>
</svg>
),
color: '#10b981',
colorBg: 'rgba(16,185,129,0.1)',
title: 'Driver Wellness Engine',
desc: 'Real-time wellness scores track hours worked, rest since last break, illness flags, and max difficulty tolerance. Prevent burnout before it happens.',
badge: 'Burnout prevention',
},
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="currentColor" strokeWidth="1.5"/>
<path d="M8 12h8M12 8v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
</svg>
),
color: '#3b82f6',
colorBg: 'rgba(59,130,246,0.1)',
title: 'Carbon Estimation',
desc: 'Per-route CO₂ estimates included in every allocation response. Track fleet carbon footprint and surface eco-routing options.',
badge: 'CO₂ per km',
},
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
</svg>
),
color: '#f59e0b',
colorBg: 'rgba(245,158,11,0.1)',
title: 'Explainable Decisions',
desc: 'Every allocation comes with a human-readable explanation. Dispatchers can understand, appeal, or override any AI decision — full transparency.',
badge: '100% explained',
},
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5"/>
<path d="M12 5v2M12 17v2M5 12H3M21 12h-2M7.05 7.05l-1.41-1.41M17.37 17.37l-1.41-1.41M7.05 16.95l-1.41 1.41M17.37 6.63l-1.41 1.41" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
</svg>
),
color: '#ec4899',
colorBg: 'rgba(236,72,153,0.1)',
title: 'Night Safety Routing',
desc: 'Flag routes as night-safety sensitive and automatically filter assignments based on driver preferences and safety policies.',
badge: 'Driver-first',
},
{
icon: (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
),
color: '#06b6d4',
colorBg: 'rgba(6,182,212,0.1)',
title: 'Drop-in Integration',
desc: 'One API key, one endpoint, consistent JSON response envelope. No SDKs required — works with any language or logistics stack in minutes.',
badge: 'REST · JSON',
},
]
export default function Features() {
return (
<section className="features" id="features">
<div className="container">
<div className="section-header">
<div className="tag">Features</div>
<h2 className="section-title">Everything your routing brain needs</h2>
<p className="section-sub">
Built for logistics teams that want fairness, transparency, and driver wellbeing —
without the ML team.
</p>
</div>
<div className="features__grid">
{features.map(f => (
<div key={f.title} className="feature-card">
<div className="feature-card__icon" style={{ color: f.color, background: f.colorBg }}>
{f.icon}
</div>
<div className="feature-card__badge" style={{ color: f.color, borderColor: f.color + '33', background: f.color + '11' }}>
{f.badge}
</div>
<h3 className="feature-card__title">{f.title}</h3>
<p className="feature-card__desc">{f.desc}</p>
</div>
))}
</div>
</div>
</section>
)
}
|