214 lines
8.8 KiB
TypeScript
214 lines
8.8 KiB
TypeScript
import React from 'react';
|
|
import { FeaturesContent, DEFAULT_FEATURES } from '../../lib/cms';
|
|
|
|
interface PillarsSectionProps {
|
|
features?: FeaturesContent;
|
|
}
|
|
|
|
export default function PillarsSection({ features = DEFAULT_FEATURES }: PillarsSectionProps) {
|
|
const content = features || DEFAULT_FEATURES;
|
|
const item0 = content.items?.[0] || DEFAULT_FEATURES.items[0];
|
|
const item1 = content.items?.[1] || DEFAULT_FEATURES.items[1];
|
|
const item2 = content.items?.[2] || DEFAULT_FEATURES.items[2];
|
|
const item3 = content.items?.[3] || DEFAULT_FEATURES.items[3];
|
|
|
|
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">
|
|
{content.pillars_title || 'Built for extreme lean angles & split-second decisions.'}
|
|
</h2>
|
|
</div>
|
|
<p className="font-body-md pillars-desc">
|
|
{content.pillars_subtitle ||
|
|
'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">
|
|
{item0.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">
|
|
{item0.title}
|
|
</h3>
|
|
<p className="font-body-md bento-desc">
|
|
{item0.description}
|
|
</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">
|
|
{item1.icon || 'analytics'}
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-green-accent">02 / DEEP TELEMETRY</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
{item1.title}
|
|
</h3>
|
|
<p className="font-body-md bento-desc-short">
|
|
{item1.description}
|
|
</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">
|
|
{item2.icon || 'emergency'}
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-blue-accent">03 / SAFETY & SQUAD</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
{item2.title}
|
|
</h3>
|
|
<p className="font-body-md bento-desc-short">
|
|
{item2.description}
|
|
</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">
|
|
{item3.icon || 'memory'}
|
|
</span>
|
|
</div>
|
|
<span className="font-label-caps text-dim-cyan">04 / HARDWARE AGNOSTIC</span>
|
|
<h3 className="font-headline-lg bento-title">
|
|
{item3.title}
|
|
</h3>
|
|
<p className="font-body-md bento-desc">
|
|
{item3.description}
|
|
</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>
|
|
);
|
|
}
|