207 lines
9.0 KiB
TypeScript
207 lines
9.0 KiB
TypeScript
import React from 'react';
|
|
|
|
export default function PillarsSection() {
|
|
return (
|
|
<section className="pillars-section">
|
|
<div className="flagship-container">
|
|
<div className="pillars-header">
|
|
<div>
|
|
<div className="font-label-caps text-dim-cyan pill-label">
|
|
ENGINEERED ARCHITECTURE
|
|
</div>
|
|
<h2 className="font-headline-xl text-ink m-0">
|
|
Built for extreme lean angles & split-second decisions.
|
|
</h2>
|
|
</div>
|
|
<p className="font-body-md pillars-desc">
|
|
A bespoke telemetry suite connecting ECU sensors, gyroscopes, and track positioning straight to riders
|
|
and crew chiefs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bento-grid">
|
|
{/* Pillar 1: Live Cockpit & Handlebar HUD */}
|
|
<div className="bento-card col-span-12 lg:col-span-7">
|
|
<div>
|
|
<div className="icon-box text-cyan-accent">
|
|
<span className="material-symbols-outlined bento-icon">
|
|
dashboard_customize
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-dim-cyan">01 / REAL-TIME STREAM</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
Live Cockpit & Handlebar HUD
|
|
</h3>
|
|
<p className="font-body-md bento-desc">
|
|
Real-time pitch, roll, yaw, throttle position, braking pressure, and predictive apex speeds delivered
|
|
at 60fps to your handlebar display or phone mount without visual drag.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bento-inner-card bento-inner-inset">
|
|
<div className="bento-inner-header">
|
|
<span className="font-code-mono text-xs sm:text-sm text-muted">
|
|
PITCH / ROLL / THROTTLE METRICS
|
|
</span>
|
|
<span className="font-code-mono text-xs sm:text-sm text-green-accent whitespace-nowrap">
|
|
60 FPS BUFFER
|
|
</span>
|
|
</div>
|
|
<div className="bento-stats-grid-3">
|
|
<div className="bento-stat-box">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
THROTTLE
|
|
</span>
|
|
<span className="font-headline-md text-sm sm:text-headline-md text-cyan-accent block mt-2px">
|
|
94%
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
FRONT BRAKE
|
|
</span>
|
|
<span className="font-headline-md text-sm sm:text-headline-md text-ink block mt-2px">
|
|
18.4 BAR
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
LEAN BIAS
|
|
</span>
|
|
<span className="font-headline-md text-sm sm:text-headline-md text-green-accent block mt-2px">
|
|
R 48.2°
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pillar 2: Ride Intelligence & Session Replay */}
|
|
<div className="bento-card col-span-12 lg:col-span-5">
|
|
<div>
|
|
<div className="icon-box text-green-accent">
|
|
<span className="material-symbols-outlined bento-icon">
|
|
analytics
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-green-accent">02 / DEEP TELEMETRY</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
Ride Intelligence & Session Replay
|
|
</h3>
|
|
<p className="font-body-md bento-desc-short">
|
|
Multi-layer track analysis with sector split times, deceleration zones, elevation profiles, and 3D
|
|
GPS satellite trace replays after every canyon run or track session.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bento-inner-card">
|
|
<div className="font-code-mono text-xs sm:text-sm bento-flex-between text-muted mb-8px">
|
|
<span>SECTOR 1 (-0.18s)</span>
|
|
<span>SECTOR 2 (-0.24s)</span>
|
|
</div>
|
|
<div className="bento-progress-bar-container">
|
|
<div className="bento-progress-bar-fill w-35 bg-cyan-accent" />
|
|
<div className="bento-progress-bar-fill w-35 bg-green-accent" />
|
|
<div className="bento-progress-bar-fill w-30 bg-surface-bright" />
|
|
</div>
|
|
<div className="bento-flex-between items-center mt-10px">
|
|
<span className="font-label-caps text-muted">
|
|
OPTIMAL LAP
|
|
</span>
|
|
<span className="font-code-mono text-green-accent text-[15px]">
|
|
1:34.288
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pillar 3: Club Telemetry & Fleet Beacon */}
|
|
<div className="bento-card col-span-12 lg:col-span-5">
|
|
<div>
|
|
<div className="icon-box text-blue-accent">
|
|
<span className="material-symbols-outlined bento-icon">
|
|
emergency
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-blue-accent">03 / SAFETY & SQUAD</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
Club Telemetry & Fleet Beacon
|
|
</h3>
|
|
<p className="font-body-md bento-desc-short">
|
|
Live pack radar tracking, automatic crash detection beacon with SOS emergency dispatch, and
|
|
competitive leaderboards with verified telemetry data.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bento-inner-card bento-flex-row items-center gap-1rem">
|
|
<div className="bento-icon-box text-danger-accent">
|
|
<span className="material-symbols-outlined">satellite</span>
|
|
</div>
|
|
<div className="bento-text-col">
|
|
<span className="font-headline-sm text-sm sm:text-base text-ink">
|
|
Automated SOS Crash Beacon
|
|
</span>
|
|
<span className="font-body-sm text-xs sm:text-sm">Accelerometer impact trigger <150ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pillar 4: Zero-Friction Hardware & Security */}
|
|
<div className="bento-card col-span-12 lg:col-span-7">
|
|
<div>
|
|
<div className="icon-box text-dim-cyan">
|
|
<span className="material-symbols-outlined bento-icon">
|
|
memory
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-dim-cyan">04 / HARDWARE AGNOSTIC</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
Zero-Friction Hardware & Security
|
|
</h3>
|
|
<p className="font-body-md bento-desc">
|
|
Encrypted zero-knowledge ride logs, offline Bluetooth / CAN-bus hardware sync, and end-to-end
|
|
authenticated APIs compatible with Yamaha, Ducati, BMW, Kawasaki, KTM, and Honda.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bento-stats-grid-auto">
|
|
<div className="bento-stat-box text-center">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
OBD-II CAN
|
|
</span>
|
|
<span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
|
|
500 kbps
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box text-center">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
BLUETOOTH
|
|
</span>
|
|
<span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
|
|
BLE 5.3
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box text-center">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
ENCRYPTION
|
|
</span>
|
|
<span className="font-code-mono text-sm sm:text-base text-green-accent block mt-2px">
|
|
AES-256
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box text-center">
|
|
<span className="font-label-caps text-[10px] sm:text-xs text-muted block">
|
|
LOCAL CACHE
|
|
</span>
|
|
<span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
|
|
Offline 100%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|