fix: repair responsive marketing layouts
This commit is contained in:
Developer
parent
87f2289fbc
commit
bbe6d612a7
|
|
@ -1 +1,802 @@
|
|||
export default function FeaturesPage() { return <section className="hero"><span className="eyebrow">The platform</span><h1>Every signal has a job.</h1><p>MotorSignal brings telemetry, route context, performance analysis, group rides, and secure cloud sync into one rider-focused system.</p><div className="section-grid"><article className="panel"><h3>Telemetry</h3><p>Live speed, GPS, lean angle, acceleration, braking, and ride state.</p></article><article className="panel"><h3>Performance</h3><p>Launch timing and ride metrics stay associated with the ride that produced them.</p></article><article className="panel"><h3>Community</h3><p>Plan routes, discover clubs, and ride with people who share your road.</p></article></div></section>; }
|
||||
'use client';
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function FeaturesPage() {
|
||||
useEffect(() => {
|
||||
let speed = 174;
|
||||
let lean = 52.8;
|
||||
let countdown = 8;
|
||||
|
||||
const speedEl = document.getElementById('speed-val');
|
||||
const leanEl = document.getElementById('lean-val');
|
||||
const countdownEl = document.getElementById('sos-countdown');
|
||||
|
||||
const i1 = setInterval(() => {
|
||||
if (speedEl) {
|
||||
const delta = Math.floor(Math.random() * 5) - 2;
|
||||
speed = Math.min(186, Math.max(162, speed + delta));
|
||||
speedEl.textContent = speed.toString();
|
||||
}
|
||||
if (leanEl) {
|
||||
const leanDelta = (Math.random() * 0.4 - 0.2).toFixed(1);
|
||||
lean = parseFloat((lean + parseFloat(leanDelta)).toFixed(1));
|
||||
leanEl.textContent = lean + '°';
|
||||
}
|
||||
}, 800);
|
||||
|
||||
const i2 = setInterval(() => {
|
||||
if (countdownEl) {
|
||||
countdown--;
|
||||
if (countdown < 0) countdown = 8;
|
||||
countdownEl.textContent = '00:0' + countdown + 's';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(i1);
|
||||
clearInterval(i2);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flagship-page text-on-surface bg-surface min-h-screen">
|
||||
<div className="flex flex-col w-full">
|
||||
{/* Top Ambient Telemetry Grid Aura */}
|
||||
<div className="relative w-full overflow-hidden bg-surface pb-space-3xl">
|
||||
<div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[1100px] h-[500px] bg-gradient-to-b from-primary-container/10 via-surface-tint/5 to-transparent blur-3xl pointer-events-none rounded-full"></div>
|
||||
<div className="absolute top-20 right-10 w-96 h-96 bg-secondary-fixed/5 blur-3xl pointer-events-none rounded-full"></div>
|
||||
{/* Editorial / Hero Container */}
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl relative z-10">
|
||||
{/* Eyebrow Pill */}
|
||||
<div className="inline-flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high shadow-sm mb-space-lg">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-container"></span>
|
||||
</span>
|
||||
<span className="font-label-caps text-label-caps text-primary uppercase tracking-widest">COMPREHENSIVE TELEMETRY STACK • 10HZ MULTI-GNSS & 6-AXIS IMU</span>
|
||||
</div>
|
||||
{/* Main Headline & Subheading */}
|
||||
<div className="flex flex-col gap-space-xl items-start mb-space-3xl">
|
||||
<div className="flex flex-col gap-space-md max-w-4xl">
|
||||
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight uppercase">
|
||||
Surgical data precision for every apex, straightaway, and canyon.
|
||||
</h1>
|
||||
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
||||
Explore the full spectrum of MotorSignal hardware integration, real-time cockpit intelligence, crash telemetry, and race-grade analysis calibrated for professional riders and trackside telemetry engineers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-space-sm pb-space-xs w-full max-w-sm">
|
||||
<div className="bg-surface-container-low p-space-md rounded-xl shadow-md">
|
||||
<div className="flex items-center justify-between font-code-mono text-code-mono text-outline mb-space-2xs">
|
||||
<span>HARDWARE LINK RATE</span>
|
||||
<span className="text-secondary-fixed">SYNCHRONIZED</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs">
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary">1000</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant">SAMPLES / SEC (IMU)</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-container-highest h-1.5 rounded-full mt-space-xs overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-primary-container to-secondary-container h-full w-[94%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Quick Fast Anchor Pills */}
|
||||
<div className="flex items-center gap-space-xs overflow-x-auto pb-space-sm scrollbar-none">
|
||||
<a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container-high hover:bg-surface-bright text-primary font-label-caps text-label-caps uppercase transition-all shadow-sm flex items-center gap-space-2xs" href="#cockpit">
|
||||
<span className="text-primary-container">01</span> Live Cockpit
|
||||
</a>
|
||||
<a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps uppercase transition-all shadow-sm flex items-center gap-space-2xs" href="#lap-analysis">
|
||||
<span className="text-outline">02</span> Lap Analysis & Sectors
|
||||
</a>
|
||||
<a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps uppercase transition-all shadow-sm flex items-center gap-space-2xs" href="#emergency">
|
||||
<span className="text-outline">03</span> Crash & SOS Beacon
|
||||
</a>
|
||||
<a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps uppercase transition-all shadow-sm flex items-center gap-space-2xs" href="#canbus">
|
||||
<span className="text-outline">04</span> CAN-bus & ECU Stream
|
||||
</a>
|
||||
<a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps uppercase transition-all shadow-sm flex items-center gap-space-2xs" href="#cloud-replay">
|
||||
<span className="text-outline">05</span> Cloud Sync & Replay
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* SECTION 1: LIVE COCKPIT HUD */}
|
||||
<section className="w-full bg-surface-container-lowest py-space-4xl relative" id="cockpit">
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col gap-space-md mb-space-2xl max-w-4xl">
|
||||
<div>
|
||||
<div className="flex items-center gap-space-xs mb-space-2xs">
|
||||
<span className="font-code-mono text-code-mono text-primary-container">01 // TACTICAL FLIGHT INTERFACE</span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-primary-container"></span>
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">
|
||||
Live Cockpit & Handlebar HUD
|
||||
</h2>
|
||||
</div>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant max-w-xl">
|
||||
Engineered for instant optical ingestion at 180+ mph. Crisp, high-contrast digital flight deck mounted directly to your top triple-clamp.
|
||||
</p>
|
||||
</div>
|
||||
{/* Cockpit Interactive Frame Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-lg mb-space-2xl">
|
||||
{/* Left: Major Telemetry Screen Preview (8 cols) */}
|
||||
<div className="lg:col-span-8 bg-surface-container-low rounded-xl p-space-lg shadow-xl relative overflow-hidden flex flex-col justify-between">
|
||||
<div className="absolute top-0 right-0 w-80 h-80 bg-primary-container/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
{/* Top Status Ribbon of HUD */}
|
||||
<div className="flex items-center justify-between pb-space-md mb-space-md bg-surface-container px-space-md py-space-xs rounded-lg">
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-secondary-fixed flex items-center gap-1">
|
||||
<span className="h-2 w-2 rounded-full bg-secondary-fixed animate-ping inline-block"></span>
|
||||
ACTIVE RECORDING
|
||||
</span>
|
||||
<span className="text-on-surface-variant">PORTIMAO CIRCUIT // S2 APEX 4</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-sm font-code-mono text-code-mono text-primary-fixed-dim">
|
||||
<span>LATENCY: 9.4ms</span>
|
||||
<span className="text-on-surface-variant">•</span>
|
||||
<span>10Hz GNSS LOCK (18 SATS)</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Central HUD Layout Simulation */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-space-md items-center py-space-lg">
|
||||
{/* Left Dial: Lean Angle */}
|
||||
<div className="bg-surface-container p-space-md rounded-xl flex flex-col items-center justify-center text-center relative shadow-sm">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase mb-space-xs">Lean Angle (Apex Peak)</span>
|
||||
{/* SVG Arc Lean Angle Dial */}
|
||||
<div className="relative w-44 h-44 flex items-center justify-center">
|
||||
<svg className="w-full h-full -rotate-90" viewBox="0 0 160 160">
|
||||
<circle className="text-surface-bright" cx="80" cy="80" fill="none" r="68" stroke="currentColor" strokeDasharray="213 427" strokeLinecap="round" strokeWidth="8"></circle>
|
||||
<circle className="text-primary-container" cx="80" cy="80" fill="none" r="68" stroke="currentColor" strokeDasharray="160 427" strokeLinecap="round" strokeWidth="9"></circle>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary" id="lean-val">52.8°</span>
|
||||
<span className="font-label-caps text-label-caps text-secondary-fixed uppercase tracking-wider">L PEAK PEGGED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-between font-code-mono text-code-mono text-on-surface-variant mt-space-2xs px-space-xs">
|
||||
<span>R 48.2°</span>
|
||||
<span className="text-primary">LIMIT: 65°</span>
|
||||
<span className="text-secondary-fixed">L 52.8°</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Center Speed & G-Force Primary Indicator */}
|
||||
<div className="bg-surface-container-high p-space-lg rounded-xl flex flex-col items-center justify-center text-center shadow-lg relative">
|
||||
<span className="font-label-caps text-label-caps text-primary-fixed uppercase tracking-widest mb-space-xs">Velocity Vector</span>
|
||||
<div className="flex items-baseline justify-center gap-space-2xs my-space-xs">
|
||||
<span className="font-display-hero text-display-hero text-on-surface tracking-tighter" id="speed-val">174</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">MPH</span>
|
||||
</div>
|
||||
{/* G-Force Crosshair Minimal Widget */}
|
||||
<div className="w-full mt-space-sm bg-surface-container p-space-sm rounded-lg flex items-center justify-between">
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant">LATERAL G</span>
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">+1.68 G</span>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-full bg-surface-bright relative flex items-center justify-center">
|
||||
<div className="w-px h-full bg-surface-container-highest absolute"></div>
|
||||
<div className="h-px w-full bg-surface-container-highest absolute"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-secondary-container absolute translate-x-2 -translate-y-1 shadow-sm"></div>
|
||||
</div>
|
||||
<div className="flex flex-col text-right">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant">DECEL G</span>
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">-1.32 G</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right: Throttle & Hydraulic Brake Line Pressure */}
|
||||
<div className="bg-surface-container p-space-md rounded-xl flex flex-col justify-between shadow-sm">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase mb-space-sm">Hydraulic & TPS Telemetry</span>
|
||||
{/* Throttle Bar */}
|
||||
<div className="mb-space-md">
|
||||
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
|
||||
<span>THROTTLE TPS</span>
|
||||
<span className="text-primary-container">88% OPEN</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-primary-fixed-dim to-primary-container w-[88%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Front Brake Line Pressure */}
|
||||
<div className="mb-space-md">
|
||||
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
|
||||
<span>FRONT BRAKE (BAR)</span>
|
||||
<span className="text-error">18.4 / 30 BAR</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-secondary-fixed to-error w-[61%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rear Brake Line Pressure */}
|
||||
<div>
|
||||
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
|
||||
<span>REAR TRAIL BRAKE</span>
|
||||
<span className="text-on-surface-variant">3.8 BAR</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-secondary-fixed-dim w-[16%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Bottom Live Sparkline Telemetry Wave */}
|
||||
<div className="mt-space-md pt-space-md bg-surface-container-lowest p-space-sm rounded-lg flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant">THROTTLE vs DECEL TIMELINE (LAST 800M)</span>
|
||||
<span className="font-code-mono text-code-mono text-outline">TURN 3 ENTRY > APEX 4 BRAKING DISCHARGE</span>
|
||||
</div>
|
||||
{/* Inline SVG Sparkline */}
|
||||
<svg className="w-64 h-8 text-primary-container" fill="none" viewBox="0 0 240 32">
|
||||
<path d="M0,28 L30,28 L45,4 L60,4 L90,26 L120,24 L140,2 L170,2 L190,22 L240,16" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right: Hardware Specs & Mount Imagery (4 cols) */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-space-md">
|
||||
{/* Cockpit Photo Card */}
|
||||
<div className="relative w-full h-56 rounded-xl overflow-hidden shadow-lg group">
|
||||
<div className="bg-cover bg-center w-full h-full transform group-hover:scale-105 transition-transform duration-500" data-alt="High-end sport motorcycle cockpit showing digital phone mount HUD displaying vibrant cyan speed and lean angle gauges at dusk on an asphalt race track, sharp reflections on windshield and carbon fiber handlebars." ></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-surface-container-lowest/30 to-transparent"></div>
|
||||
<div className="absolute bottom-3 left-3 right-3 flex items-center justify-between">
|
||||
<span className="px-space-xs py-1 rounded bg-surface-container-highest/80 font-label-caps text-label-caps text-primary uppercase backdrop-blur-md">CNC Billet Stem Mount</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">IP68 WATERPROOF</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Key Spec List */}
|
||||
<div className="bg-surface-container p-space-md rounded-xl flex-1 flex flex-col justify-between shadow-md">
|
||||
<h3 className="font-headline-sm text-headline-sm text-on-surface mb-space-xs">Engineered Cockpit Protocol</h3>
|
||||
<ul className="flex flex-col gap-space-sm font-body-sm text-body-sm text-on-surface-variant">
|
||||
<li className="flex items-start gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container text-base mt-0.5">bolt</span>
|
||||
<span><strong className="text-on-surface">60fps Fluid Refresh Rate:</strong> GPU-rendered zero-tearing UI on OLED mobile mounts with micro-second reactive vector dials.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-space-xs">
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-base mt-0.5">wifi_tethering</span>
|
||||
<span><strong className="text-on-surface">Bluetooth 5.3 LE Sub-15ms:</strong> Zero perceptible lag between physical handlebar movements and screen updates.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-fixed-dim text-base mt-0.5">wb_sunny</span>
|
||||
<span><strong className="text-on-surface">Dynamic Polarized Daylight Mode:</strong> High-luminescence inverted neon palette tuned for direct sunlight through helmet visors.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-space-sm mt-space-sm bg-surface-container-low px-space-sm py-2 rounded-lg flex items-center justify-between">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant">NATIVE MOUNT SUPPORT</span>
|
||||
<span className="font-code-mono text-code-mono text-primary">QUADLOCK / RAM / SP CONNECT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* SECTION 2: DEEP SECTOR LAP & RIDE INTELLIGENCE */}
|
||||
<section className="w-full bg-surface py-space-4xl relative" id="lap-analysis">
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-space-md mb-space-2xl">
|
||||
<div>
|
||||
<div className="flex items-center gap-space-xs mb-space-2xs">
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">02 // CHRONOMETRIC RACE ANALYSIS</span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed"></span>
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">
|
||||
Deep Sector Lap & Ride Intelligence
|
||||
</h2>
|
||||
</div>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant max-w-md">
|
||||
Micro-second GPS timing and IMU apex correlation. Overlay your fastest ghost lap and pinpoint precisely where milliseconds were won or lost.
|
||||
</p>
|
||||
</div>
|
||||
{/* Bento Grid for Lap Analytics */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-lg mb-space-2xl">
|
||||
{/* Left: Track GPS Layout & Apex Map (5 cols) */}
|
||||
<div className="lg:col-span-5 bg-surface-container-low p-space-lg rounded-xl shadow-lg flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-space-sm">
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Mugello Circuit (Autodromo)</span>
|
||||
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-fixed-dim font-label-caps text-label-caps">AUTO-DETECTED</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
|
||||
5.245 km • 15 Turns • 1,141m Long Straightaway. 10Hz multi-satellite track boundary matching.
|
||||
</p>
|
||||
</div>
|
||||
{/* Track Map SVG Visualizer */}
|
||||
<div className="relative w-full h-64 bg-surface-container rounded-lg p-space-md flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-surface-container-lowest to-transparent pointer-events-none"></div>
|
||||
{/* Complex circuit path */}
|
||||
<svg className="w-full h-full text-outline-variant" fill="none" viewBox="0 0 300 200">
|
||||
{/* Background circuit trace */}
|
||||
<path d="M 30,170 C 10,140 10,90 40,60 C 70,30 110,25 150,25 C 190,25 240,40 270,70 C 290,90 280,140 240,160 C 210,175 180,140 160,140 C 130,140 120,180 80,180 Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8"></path>
|
||||
{/* Active Delta Ghost Track Overlay */}
|
||||
<path d="M 30,170 C 10,140 10,90 40,60 C 70,30 110,25 150,25" stroke="url(#cyan-grad)" strokeLinecap="round" strokeWidth="8"></path>
|
||||
{/* Sector Split Markers */}
|
||||
<circle cx="40" cy="60" fill="#34ff8c" r="5"></circle>
|
||||
<circle cx="150" cy="25" fill="#00f2fe" r="5"></circle>
|
||||
<circle cx="270" cy="70" fill="#6ff6ff" r="5"></circle>
|
||||
<circle cx="160" cy="140" fill="#ffb4ab" r="5"></circle>
|
||||
<defs>
|
||||
<linearGradient id="cyan-grad" x1="0%" x2="100%" y1="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#00f2fe"></stop>
|
||||
<stop offset="100%" stopColor="#34ff8c"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div className="absolute top-4 left-4 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded font-code-mono text-code-mono text-secondary-fixed">
|
||||
SPEED TRAP: 312.4 KM/H
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded font-code-mono text-code-mono text-primary">
|
||||
APEX 9 PEAK: 49.6° LEAN
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-space-sm mt-space-md pt-space-sm">
|
||||
<div className="bg-surface-container px-space-sm py-2 rounded-lg">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant block">BEST LAP TIME</span>
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary">1:48.342</span>
|
||||
</div>
|
||||
<div className="bg-surface-container px-space-sm py-2 rounded-lg">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant block">OPTIMAL SECTOR SUM</span>
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">1:47.809</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right: Sector Comparison & Throttle Traces (7 cols) */}
|
||||
<div className="lg:col-span-7 flex flex-col gap-space-md">
|
||||
{/* Sector Split Table Card */}
|
||||
<div className="bg-surface-container p-space-md rounded-xl shadow-md">
|
||||
<div className="flex items-center justify-between pb-space-sm mb-space-sm">
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Sector Delta Matrix (Lap 7 vs Best Lap 4)</span>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">-0.533s AHEAD</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-space-xs">
|
||||
{/* Sector 1 */}
|
||||
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
|
||||
<div className="flex items-center gap-space-sm">
|
||||
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S1</span>
|
||||
<span className="font-body-sm text-body-sm text-on-surface">San Donato Straight to Curva 2</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-on-surface">26.112s</span>
|
||||
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.240s</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Sector 2 */}
|
||||
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
|
||||
<div className="flex items-center gap-space-sm">
|
||||
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S2</span>
|
||||
<span className="font-body-sm text-body-sm text-on-surface">Luco / Poggio Secco Complex</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-on-surface">22.408s</span>
|
||||
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.315s</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Sector 3 */}
|
||||
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
|
||||
<div className="flex items-center gap-space-sm">
|
||||
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S3</span>
|
||||
<span className="font-body-sm text-body-sm text-on-surface">Casanova - Savelli - Arrabbiata 1 & 2</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-on-surface">31.054s</span>
|
||||
<span className="text-error bg-error/10 px-2 py-0.5 rounded">+0.112s</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Sector 4 */}
|
||||
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
|
||||
<div className="flex items-center gap-space-sm">
|
||||
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S4</span>
|
||||
<span className="font-body-sm text-body-sm text-on-surface">Scarperia > Palagio > Bucine Apex</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-on-surface">28.768s</span>
|
||||
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.090s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Canyon & Open Road Tracking Highlights */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-space-md">
|
||||
<div className="bg-surface-container-low p-space-md rounded-xl">
|
||||
<div className="flex items-center gap-space-xs mb-space-xs text-primary-container">
|
||||
<span className="material-symbols-outlined">explore</span>
|
||||
<span className="font-headline-sm text-headline-sm">400+ Circuits + Canyon Paths</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Preloaded with FIM, MotoGP, and MotoAmerica track maps. Auto-initiates timing gates with zero manual push-button triggers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-surface-container-low p-space-md rounded-xl">
|
||||
<div className="flex items-center gap-space-xs mb-space-xs text-secondary-fixed">
|
||||
<span className="material-symbols-outlined">stacked_line_chart</span>
|
||||
<span className="font-headline-sm text-headline-sm">Lean vs Velocity Heatmaps</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Synthesize throttle commitment with edge grip. Evaluate whether you are picking up the throttle early enough on corner exit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* SECTION 3: EMERGENCY IMPACT & SOS BEACON */}
|
||||
<section className="w-full bg-surface-container-lowest py-space-4xl relative overflow-hidden" id="emergency">
|
||||
<div className="absolute -bottom-20 -left-20 w-96 h-96 bg-error/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
|
||||
{/* Left Explanatory Text & Certs (6 cols) */}
|
||||
<div className="lg:col-span-6 flex flex-col gap-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="font-code-mono text-code-mono text-error">03 // BLACKBOX PROTOCOL & LIFE SAFETY</span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-error"></span>
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">
|
||||
Emergency Impact Detection & SOS Beacon
|
||||
</h2>
|
||||
<p className="font-body-lg text-body-lg text-on-surface-variant">
|
||||
Riding at the limit demands uncompromising safety automation. MotorSignal continuously parses 6-axis G-force spikes and gyro inversions to trigger life-saving protocols in milliseconds.
|
||||
</p>
|
||||
{/* Feature Bullets */}
|
||||
<div className="flex flex-col gap-space-sm my-space-xs">
|
||||
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
|
||||
<div className="p-2 rounded-lg bg-error-container text-on-error-container flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-xl">sensors</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-headline-sm text-headline-sm text-on-surface"><150ms High-G Impact Trigger</h4>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Tri-axial MEMS sensors distinguish between road vibration, pothole shocks, and actual bike separation or highside events.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
|
||||
<div className="p-2 rounded-lg bg-surface-bright text-primary flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-xl">satellite_alt</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-headline-sm text-headline-sm text-on-surface">Dual Cellular & Satellite Mesh Dispatch</h4>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Transmits GPS coordinates, rider blood type, impact force severity, and local EMS telemetry package via cellular carrier failover.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
|
||||
<div className="p-2 rounded-lg bg-surface-bright text-secondary-fixed flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-xl">lock_reset</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-headline-sm text-headline-sm text-on-surface">Cryptographic Cloud Blackbox Preservation</h4>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
The trailing 30 seconds of pre-impact CAN-bus throttle, braking, lean, and camera triggers are locked and preserved to encrypted cloud storage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Compliance Badges */}
|
||||
<div className="flex items-center gap-space-md pt-space-xs">
|
||||
<div className="px-space-md py-2 rounded-xl bg-surface-container flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-lg">verified</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface uppercase">FIM Telemetry Spec 2025</span>
|
||||
</div>
|
||||
<div className="px-space-md py-2 rounded-xl bg-surface-container flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container text-lg">shield</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface uppercase">ISO 26262 ASIL-B Safety</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right SOS Interactive HUD Card (6 cols) */}
|
||||
<div className="lg:col-span-6 bg-surface-container p-space-xl rounded-xl shadow-2xl relative">
|
||||
<div className="flex items-center justify-between pb-space-md border-b-0 mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-3 h-3 rounded-full bg-error animate-ping"></span>
|
||||
<span className="font-label-caps text-label-caps text-error uppercase">TACTICAL CRASH SIMULATOR DEMO</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-outline">HARDWARE TEST V4</span>
|
||||
</div>
|
||||
<div className="bg-surface-container-lowest p-space-lg rounded-xl mb-space-lg flex flex-col items-center justify-center text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-error/10 flex items-center justify-center mb-space-sm text-error">
|
||||
<span className="material-symbols-outlined text-4xl">warning</span>
|
||||
</div>
|
||||
<span className="font-headline-lg text-headline-lg text-on-surface mb-space-2xs">IMPACT DETECTED: +4.8G</span>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant max-w-sm mb-space-md">
|
||||
Emergency SOS countdown initialized. Coordinates resolved. Dispatch pending in:
|
||||
</p>
|
||||
<div className="font-telemetry-metric-xl text-telemetry-metric-xl text-error mb-space-sm" id="sos-countdown">
|
||||
00:08s
|
||||
</div>
|
||||
<div className="flex gap-space-sm w-full max-w-xs">
|
||||
<button className="flex-1 py-2 rounded-xl bg-surface-bright text-on-surface font-label-md text-label-md hover:bg-surface-variant transition-all">
|
||||
I Am OK (Cancel)
|
||||
</button>
|
||||
<button className="flex-1 py-2 rounded-xl bg-error text-on-error font-label-md text-label-md hover:opacity-90 transition-all">
|
||||
Trigger Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-surface-container-low p-space-md rounded-lg flex flex-col gap-space-xs font-code-mono text-code-mono text-on-surface-variant">
|
||||
<div className="flex justify-between">
|
||||
<span>LAT/LONG:</span>
|
||||
<span className="text-on-surface">43.9975° N, 11.3714° E (Mugello S3)</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>RIDER PROFILE:</span>
|
||||
<span className="text-on-surface">A-POSITIVE // EMERGENCY CONTACT LINKED</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>DATA SENT:</span>
|
||||
<span className="text-secondary-fixed">TRAIL CRASH PACKET (CAN-BUS 250kbps)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* SECTION 4: CAN-BUS & ECU HEALTH STREAM */}
|
||||
<section className="w-full bg-surface py-space-4xl relative" id="canbus">
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-space-md mb-space-2xl">
|
||||
<div>
|
||||
<div className="flex items-center gap-space-xs mb-space-2xs">
|
||||
<span className="font-code-mono text-code-mono text-primary">04 // OBD-II & ECU ENGINE DIAGNOSTICS</span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-primary-container"></span>
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">
|
||||
Direct CAN-bus & ECU Health Stream
|
||||
</h2>
|
||||
</div>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant max-w-md">
|
||||
Zero splicing or invasive wire taps. Connect MotorSignal CAN-Link directly into your bike's factory diagnostic port to harvest microsecond factory telemetry.
|
||||
</p>
|
||||
</div>
|
||||
{/* Engine Diagnostic Sensor Matrix (6 Cards) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-md mb-space-2xl">
|
||||
{/* Sensor 1: Coolant Temp */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container">thermostat</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">ENGINE COOLANT</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">NOMINAL</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">88°</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">CELSIUS</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
ECU threshold alerts warn of radiator heat-soak before cylinder head distortion occurs.
|
||||
</p>
|
||||
</div>
|
||||
{/* Sensor 2: Oil Pressure & PSI */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container">oil_barrel</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">OIL HYDRAULIC PSI</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">HIGH STABILITY</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">62.4</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">PSI @ 9,800 RPM</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Continuous crankcase pressure monitoring prevents oil cavitation in prolonged apex leans.
|
||||
</p>
|
||||
</div>
|
||||
{/* Sensor 3: Gear Position Indicator */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-secondary-fixed">settings_input_component</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">GEARBOX STATE</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-primary">QUICKSHIFTER ACTIVE</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary-container">4</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">GEAR // 11,400 RPM</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Monitors shift cut-off duration (ms), false neutral occurrences, and clutch slip ratios.
|
||||
</p>
|
||||
</div>
|
||||
{/* Sensor 4: RPM Tachometer Trace */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container">speed</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">CRANK RPM PEAK</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">REDLINE 14,500</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">13,850</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">MAX RECORDED</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Full resolution engine rpm graph correlated with throttle opening percentage.
|
||||
</p>
|
||||
</div>
|
||||
{/* Sensor 5: Fuel Burn Rate */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container">local_gas_station</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">FUEL INJECTION CONSUMPTION</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">8.2 L / 100KM</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">3.8</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">LAPS REMAINING FUEL</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Sprint-race fuel management strategy to avoid carrying unnecessary ballast weight.
|
||||
</p>
|
||||
</div>
|
||||
{/* Sensor 6: TPMS & Compound Temperature */}
|
||||
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between mb-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-secondary-fixed">tire_repair</span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">TPMS CARCASS TEMP</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">TRACK GRIP OPTIMAL</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs mb-space-xs">
|
||||
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-secondary-fixed">82° / 78°</span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface-variant">F / R REAR TIRE</span>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Live cold/hot pressure inflation delta tracking to eliminate tire tearing and cold tears.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Manufacturer OEM Plug-and-Play Compatibility Bar */}
|
||||
<div className="bg-surface-container p-space-lg rounded-xl shadow-md">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-space-md mb-space-md">
|
||||
<div>
|
||||
<span className="font-label-caps text-label-caps text-primary uppercase block mb-1">OEM FACTORY HARNESS SUPPORT</span>
|
||||
<h3 className="font-headline-sm text-headline-sm text-on-surface">Universal Plug & Play OBD-II / Euro5 Connectors</h3>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant bg-surface-container-low px-space-md py-1.5 rounded-lg">
|
||||
ZERO ECU FLASHING REQUIRED
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-space-xs text-center font-headline-sm text-headline-sm">
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">YAMAHA</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">DUCATI</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">BMW</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">KAWASAKI</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">KTM</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">HONDA</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">APRILIA</div>
|
||||
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">TRIUMPH</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* SECTION 5: CLOUD SYNC & REPLAY */}
|
||||
<section className="w-full bg-surface-container-lowest py-space-4xl relative" id="cloud-replay">
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
|
||||
{/* Visual Telemetry Replay Snapshot (7 cols) */}
|
||||
<div className="lg:col-span-7 bg-surface-container p-space-lg rounded-xl shadow-xl flex flex-col gap-space-md">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-secondary-fixed"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Telemetry Trace Playback Engine</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-xs font-code-mono text-code-mono text-outline">
|
||||
<span className="material-symbols-outlined text-base">cloud_done</span>
|
||||
<span>SYNCHRONIZED (SESSION #142)</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Video Replay Frame Overlay */}
|
||||
<div className="relative w-full h-72 rounded-lg overflow-hidden group shadow-md">
|
||||
<div className="bg-cover bg-center w-full h-full transform group-hover:scale-105 transition-transform duration-700" data-alt="First-person rider POV looking through a dark smoked motorcycle windscreen leaning heavily into an asphalt racetrack corner with digital cyan telemetry overlays showing speed, throttle, and RPM curves, sunlight gleaming on asphalt." ></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent"></div>
|
||||
{/* Floating Data Widgets over rider view */}
|
||||
<div className="absolute bottom-4 left-4 right-4 flex items-center justify-between bg-surface-container-lowest/85 backdrop-blur-md p-space-sm rounded-lg">
|
||||
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
|
||||
<span className="text-primary-container font-bold">T: 01:24.810</span>
|
||||
<span className="text-on-surface">SPEED: 182 KM/H</span>
|
||||
<span className="text-secondary-fixed">LEAN: 51.4° L</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<button className="w-8 h-8 rounded-lg bg-surface-bright flex items-center justify-center text-on-surface hover:text-primary-container">
|
||||
<span className="material-symbols-outlined text-lg">play_arrow</span>
|
||||
</button>
|
||||
<button className="w-8 h-8 rounded-lg bg-surface-bright flex items-center justify-center text-on-surface hover:text-primary-container">
|
||||
<span className="material-symbols-outlined text-lg">fast_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Scrubbing Bar with Sector Flags */}
|
||||
<div className="w-full bg-surface-container-low p-space-sm rounded-lg">
|
||||
<div className="flex justify-between font-code-mono text-code-mono text-on-surface-variant mb-1">
|
||||
<span>LAP 4 REPLAY (TOTAL 01:48.342)</span>
|
||||
<span>100% TELEMETRY BUFFER</span>
|
||||
</div>
|
||||
<div className="relative w-full bg-surface-container-highest h-2 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-primary-container w-[72%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Explanatory Replay Details (5 cols) */}
|
||||
<div className="lg:col-span-5 flex flex-col gap-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">05 // TELEMETRY CLOUD SYNC</span>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed"></span>
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">
|
||||
Frame-Accurate Video & Telemetry Overlay
|
||||
</h2>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant">
|
||||
Export 4K video with embedded Formula/MotoGP broadcast overlays. Sync external action cameras (GoPro, Insta360, DJI) automatically using GPS timestamp correlation.
|
||||
</p>
|
||||
<ul className="flex flex-col gap-space-sm font-body-sm text-body-sm text-on-surface-variant">
|
||||
<li className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container text-base">sync</span>
|
||||
<span>Automatic cloud backup whenever phone reconnects to Wi-Fi.</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-base">group</span>
|
||||
<span>Team paddock telemetry sharing: Mechanics inspect engine thermals remotely.</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary text-base">ios_share</span>
|
||||
<span>Direct export to CSV, GPX, MoTeC i2 Pro, and AiM Race Studio formats.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-space-sm">
|
||||
<a className="inline-flex items-center gap-space-xs px-space-lg py-2.5 rounded-xl bg-surface-container-high hover:bg-surface-bright text-primary font-headline-sm text-headline-sm transition-all shadow-sm" data-path="live-cockpit" href="/account">
|
||||
<span>View Interactive Replay Demo</span>
|
||||
<span className="material-symbols-outlined text-base">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* BOTTOM CALL TO ACTION */}
|
||||
<section className="w-full bg-surface py-space-4xl relative overflow-hidden">
|
||||
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
||||
<div className="relative bg-gradient-to-tr from-surface-container-lowest via-surface-container to-surface-container-low p-space-2xl md:p-space-3xl rounded-2xl shadow-2xl overflow-hidden flex flex-col items-center text-center">
|
||||
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-primary-container/10 blur-3xl pointer-events-none rounded-full"></div>
|
||||
<div className="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container-high text-primary-container font-label-caps text-label-caps uppercase tracking-widest mb-space-md shadow-sm">
|
||||
<span className="h-2 w-2 rounded-full bg-secondary-fixed"></span>
|
||||
READY FOR TRACK & CANYON ROADS
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase max-w-2xl mb-space-md tracking-tight">
|
||||
Equip your machine with pro-grade telemetry today.
|
||||
</h2>
|
||||
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl mb-space-xl">
|
||||
Start your 30-day all-access trial on iOS & Android, or order the plug-and-play OBD-II hardware link with instant track delivery.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-space-md w-full justify-center max-w-md">
|
||||
<a className="w-full sm:w-auto inline-flex items-center justify-center px-space-xl py-3.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all" data-path="create-account" href="/account">
|
||||
Start 30-Day Free Trial
|
||||
</a>
|
||||
<a className="w-full sm:w-auto inline-flex items-center justify-center px-space-xl py-3.5 rounded-xl bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-all shadow-sm" data-path="hardware-and-app" href="/account">
|
||||
Order OBD-II Hardware Link
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-space-lg flex items-center gap-space-lg font-code-mono text-code-mono text-outline">
|
||||
<span>NO WIRE SPLICING</span>
|
||||
<span>•</span>
|
||||
<span>WORLDWIDE 3-DAY EXPRESS DISPATCH</span>
|
||||
<span>•</span>
|
||||
<span>MONEY BACK GUARANTEE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,591 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function GroupRidesPage() {
|
||||
return (
|
||||
<div className="flagship-page text-on-surface bg-surface min-h-screen">
|
||||
<div className="flex flex-col w-full">
|
||||
{/* Dynamic Atmospheric Glow Background Layers */}
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-container/10 rounded-full blur-[120px] pointer-events-none -z-10"></div>
|
||||
<div className="absolute top-64 right-10 w-[500px] h-[500px] bg-secondary-fixed/5 rounded-full blur-[140px] pointer-events-none -z-10"></div>
|
||||
{/* Hero Section */}
|
||||
<section className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl pb-space-3xl">
|
||||
<div className="flex flex-col items-start max-w-4xl">
|
||||
{/* Eyebrow Badge */}
|
||||
<div className="inline-flex items-center gap-space-xs px-space-sm py-1.5 rounded-full bg-surface-container-high border-0 shadow-sm mb-space-md">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-secondary-fixed-dim"></span>
|
||||
</span>
|
||||
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-widest uppercase">LIVE PACK RADAR & FORMATION TELEMETRY</span>
|
||||
</div>
|
||||
{/* Headline */}
|
||||
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight uppercase mb-space-sm">
|
||||
Ride in pack formation. <br/>
|
||||
<span className="bg-gradient-to-r from-primary-container via-primary-fixed to-secondary-fixed text-transparent bg-clip-text">Never lose a wingman.</span>
|
||||
</h1>
|
||||
{/* Subheading */}
|
||||
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-space-xl">
|
||||
Real-time rider radar, staggered formation spacing alerts, instant incident broadcast, and automated regroup checkpoints calibrated for fast canyon runs and transcontinental tours.
|
||||
</p>
|
||||
{/* Dual CTAs & Quick Metrics Bar */}
|
||||
<div className="flex flex-wrap items-center gap-space-md w-full">
|
||||
<button className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm shadow-xl hover:shadow-[0_0_24px_rgba(0,242,254,0.4)] transition-all" id="btn-create-ride">
|
||||
<span className="material-symbols-outlined text-[20px]">add_circle</span>
|
||||
Create Group Ride
|
||||
</button>
|
||||
<button className="inline-flex items-center justify-center gap-space-xs px-space-lg py-3.5 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-headline-sm text-headline-sm transition-all" id="btn-join-code">
|
||||
<span className="material-symbols-outlined text-primary-fixed-dim text-[20px]">qr_code_scanner</span>
|
||||
Join with Ride Code / QR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Interactive Live Pack Radar Map & Dashboard */}
|
||||
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
||||
<div className="bg-surface-container-lowest rounded-xl shadow-2xl overflow-hidden">
|
||||
{/* Tactical Header Strip */}
|
||||
<div className="bg-surface-container-low px-space-lg py-space-sm flex flex-wrap items-center justify-between gap-space-md">
|
||||
<div className="flex items-center gap-space-md">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="h-2 w-2 rounded-full bg-secondary-fixed"></span>
|
||||
<span className="font-label-caps text-label-caps text-on-surface uppercase tracking-wider">SWARM RECON: SKYLINE BLVD > COAST HWY</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant bg-surface-container px-2 py-0.5 rounded">SESSION #CA-84-SW</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-lg font-code-mono text-code-mono text-on-surface-variant">
|
||||
<span className="flex items-center gap-1 hidden lg:flex">
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">cell_tower</span> MESH ACTIVE
|
||||
</span>
|
||||
<span className="flex items-center gap-1"><span className="text-secondary-fixed">●</span> 6 SYNCHRONIZED</span>
|
||||
<span className="hidden sm:inline">GAP DELTA: ±0.4s</span>
|
||||
<span className="text-primary-container">REPAIR SQUAD: READY</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Cockpit Layout: Map & Radar Feed */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
|
||||
{/* Tactical Canvas & Radar Screen */}
|
||||
<div className="lg:col-span-8 relative bg-surface-container-low min-h-[540px] flex flex-col justify-between p-space-md overflow-hidden">
|
||||
{/* Map background placeholder with tactical overlay styling */}
|
||||
<div className="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity" data-location="Skyline Boulevard, Woodside, CA" ></div>
|
||||
{/* Tactical Coordinate Grids (Inline SVG Overlay) */}
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern height="48" id="grid-pattern" patternUnits="userSpaceOnUse" width="48">
|
||||
<path className="text-outline-variant" d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" strokeWidth="0.5"></path>
|
||||
<circle className="text-primary-fixed-dim" cx="0" cy="0" fill="currentColor" r="1.5"></circle>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#grid-pattern)" height="100%" width="100%"></rect>
|
||||
{/* Tactical Route Trace */}
|
||||
<path className="text-primary-container" d="M 120 460 C 220 380, 260 410, 360 300 S 490 260, 560 170 S 710 160, 840 90" fill="none" stroke="currentColor" strokeDasharray="8 6" strokeWidth="4"></path>
|
||||
{/* Safe Spacing Buffers */}
|
||||
<circle className="text-secondary-fixed/40" cx="840" cy="90" fill="none" r="32" stroke="currentColor" strokeWidth="1.5"></circle>
|
||||
<circle className="text-secondary-fixed/40" cx="710" cy="160" fill="none" r="28" stroke="currentColor" strokeWidth="1.5"></circle>
|
||||
<circle className="text-error/50" cx="560" cy="170" fill="none" r="32" stroke="currentColor" strokeWidth="2"></circle>
|
||||
<circle className="text-secondary-fixed/40" cx="360" cy="300" fill="none" r="26" stroke="currentColor" strokeWidth="1.5"></circle>
|
||||
<circle className="text-error-container" cx="260" cy="410" fill="none" r="36" stroke="currentColor" strokeDasharray="4 2" strokeWidth="2.5"></circle>
|
||||
<circle className="text-primary-container/50" cx="120" cy="460" fill="none" r="30" stroke="currentColor" strokeWidth="1.5"></circle>
|
||||
</svg>
|
||||
{/* Map HUD Top Left: Sector Status */}
|
||||
<div className="relative z-10 flex items-start justify-between">
|
||||
<div className="bg-surface/90 backdrop-blur-md px-space-md py-2.5 rounded-xl shadow-lg flex flex-col gap-0.5">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">FORMATION PROFILE</span>
|
||||
<span className="font-headline-sm text-headline-sm text-primary">STAGGERED DUAL COLUMN [B]</span>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">PACELINE LOCK: OPTIMAL</span>
|
||||
</div>
|
||||
{/* Map HUD Top Right: Telemetry Ping */}
|
||||
<div className="bg-surface/90 backdrop-blur-md px-space-md py-2 rounded-xl shadow-lg flex items-center gap-space-sm">
|
||||
<div className="text-right">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant block uppercase">GPS FREQUENCY</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">10.0 Hz • GNSS LOCK</span>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-[24px]">satellite_alt</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Visual Pin Indicators plotted across the canyon trace */}
|
||||
<div className="relative z-10 my-auto pointer-events-none">
|
||||
{/* Lead Rider Marker */}
|
||||
<div className="absolute -top-32 right-12 flex items-center gap-space-xs bg-surface-container-high/90 px-2.5 py-1 rounded shadow-md pointer-events-auto cursor-pointer hover:bg-surface-bright">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-secondary-fixed animate-pulse"></span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface font-bold">1 • ApexLead</span>
|
||||
<span className="font-label-caps text-label-caps text-secondary-fixed">68 MPH</span>
|
||||
</div>
|
||||
{/* Hard Braking Warning Marker (Rider 5) */}
|
||||
<div className="absolute bottom-12 left-1/3 flex items-center gap-space-xs bg-error-container/90 px-2.5 py-1.5 rounded shadow-xl pointer-events-auto">
|
||||
<span className="material-symbols-outlined text-error text-[16px] animate-bounce">warning</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface font-bold">5 • Alex_Ducati</span>
|
||||
<span className="font-label-caps text-label-caps text-error">-1.2G DECEL</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Map HUD Bottom Control Strip */}
|
||||
<div className="relative z-10 flex flex-wrap items-center justify-between gap-space-sm mt-auto pt-space-lg">
|
||||
<div className="flex items-center gap-space-xs bg-surface/90 backdrop-blur-md p-1.5 rounded-xl">
|
||||
<button className="px-space-sm py-1 rounded-lg bg-surface-container-highest text-primary font-label-caps text-label-caps uppercase">Tactical</button>
|
||||
<button className="px-space-sm py-1 rounded-lg hover:bg-surface-container text-on-surface-variant font-label-caps text-label-caps uppercase">Satellite</button>
|
||||
<button className="px-space-sm py-1 rounded-lg hover:bg-surface-container text-on-surface-variant font-label-caps text-label-caps uppercase">Elevation 3D</button>
|
||||
</div>
|
||||
<div className="bg-surface/90 backdrop-blur-md px-space-md py-1.5 rounded-xl flex items-center gap-space-sm">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">REGROUP POINT</span>
|
||||
<span className="font-code-mono text-code-mono text-primary-container font-bold">Alice's Restaurant (14.8 mi)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Live Swarm Nodes Telemetry Column */}
|
||||
<div className="lg:col-span-4 bg-surface-container p-space-md flex flex-col gap-space-sm overflow-y-auto max-h-[620px]">
|
||||
<div className="flex items-center justify-between pb-space-xs mb-space-xs">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">PACK TELEMETRY STREAM</span>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed-dim">6 ACTIVE</span>
|
||||
</div>
|
||||
{/* Rider 1: ApexLead */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">ApexLead</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-secondary-fixed uppercase">Pace Setter</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed">LEAD</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
|
||||
<div>SPEED: <span className="text-on-surface font-bold">68 MPH</span></div>
|
||||
<div>LEAN: <span className="text-primary-container font-bold">42°</span></div>
|
||||
<div>THROTTLE: <span className="text-on-surface">78%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rider 2: Ghost99 */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Ghost99</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Wingman L</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">+45m GAP</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
|
||||
<div>SPEED: <span className="text-on-surface">67 MPH</span></div>
|
||||
<div>LEAN: <span className="text-primary-container font-bold">40°</span></div>
|
||||
<div>BRAKE: <span className="text-on-surface">0%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rider 3: Sarah_RR (Warning: Tire Pressure) */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all relative overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-error"></div>
|
||||
<div className="flex items-center justify-between mb-1 pl-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-error animate-pulse"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Sarah_RR</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Wingman R</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">+110m GAP</span>
|
||||
</div>
|
||||
<div className="mt-2 pl-1">
|
||||
<div className="flex items-center gap-1 text-error font-code-mono text-code-mono">
|
||||
<span className="material-symbols-outlined text-[15px]">tire_repair</span>
|
||||
<span>ALERT: REAR TIRE 28 PSI (LOW)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rider 4: Dan_KTM */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Dan_KTM</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Mid Pack</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">+180m GAP</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
|
||||
<div>SPEED: <span className="text-on-surface">63 MPH</span></div>
|
||||
<div>LEAN: <span className="text-on-surface">28°</span></div>
|
||||
<div>TEMP: <span className="text-on-surface">88°C</span></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rider 5: Alex_Ducati (Yellow Flag: Hard Braking) */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all relative overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-error-container"></div>
|
||||
<div className="flex items-center justify-between mb-1 pl-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-error"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Alex_Ducati</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-error uppercase">DECEL EVENT</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">+320m GAP</span>
|
||||
</div>
|
||||
<div className="mt-2 pl-1 flex items-center justify-between font-code-mono text-code-mono">
|
||||
<span className="text-error font-bold">HARD BRAKING (-1.2G)</span>
|
||||
<span className="text-on-surface-variant">ABS: ENGAGED</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rider 6: Sweep_Marshal */}
|
||||
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="w-2 h-2 rounded-full bg-primary-container"></span>
|
||||
<span className="font-headline-sm text-headline-sm text-on-surface">Sweep_Marshal</span>
|
||||
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-primary-container uppercase">Rear Guard</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed-dim">+450m GAP</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
|
||||
<div>SPEED: <span className="text-on-surface">59 MPH</span></div>
|
||||
<div>RADIO: <span className="text-secondary-fixed">OPEN</span></div>
|
||||
<div>PACK LOCK: <span className="text-primary">100%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Formation Safety Metrics Panel Strip */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 bg-surface-container-highest p-space-lg gap-space-lg">
|
||||
{/* Metric 1: Spacing Integrity */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">SPACING INTEGRITY</span>
|
||||
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs">
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">94%</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">SAFETY INDEX</span>
|
||||
</div>
|
||||
<div className="w-full bg-surface-container h-1.5 rounded-full overflow-hidden mt-1">
|
||||
<div className="bg-secondary-fixed h-full rounded-full" ></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Metric 2: Average Pack Speed */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">AVERAGE PACK VELOCITY</span>
|
||||
<span className="material-symbols-outlined text-primary-container text-[18px]">speed</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs">
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">64.2</span>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed-dim">MPH</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">DELTA DRIFT: -1.8 MPH (TIGHTENING)</span>
|
||||
</div>
|
||||
{/* Metric 3: Atmospheric & Track Conditions */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">SURFACE & CLIMATE</span>
|
||||
<span className="material-symbols-outlined text-on-surface-variant text-[18px]">thermostat</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs">
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">21°C</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface-variant">DRY ASPHALT</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed">0% PRECIP • GRIP OPTIMAL</span>
|
||||
</div>
|
||||
{/* Metric 4: Next Regroup Waypoint */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">REGROUP POINT</span>
|
||||
<span className="material-symbols-outlined text-primary-container text-[18px]">pin_drop</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-space-xs">
|
||||
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">14.8</span>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed-dim">MILES</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">ALICE'S RESTAURANT CHECKPOINT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Group Ride Features Grid */}
|
||||
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
||||
<div className="flex flex-col mb-space-2xl">
|
||||
<span className="font-label-caps text-label-caps text-primary-container tracking-widest uppercase mb-1">COCKPIT ARCHITECTURE</span>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight uppercase">ENGINEERED FOR SQUADRON COHESION</h2>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant max-w-2xl">High-frequency mesh communications keep the entire formation synchronized through blind apexes, switchbacks, and offline mountain passes.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-lg">
|
||||
{/* Feature 1 */}
|
||||
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-primary-container mb-space-lg">
|
||||
<span className="material-symbols-outlined text-[26px]">spatial_audio_off</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed-dim block mb-1">01 / PACELINE AUDIT</span>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Staggered Paceline Warnings</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Spatial audio HUD chimes dynamically sound whenever rider follow distance or lane positioning falls beneath calculated emergency stopping thresholds.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-primary-container">
|
||||
<span>RESPONSE: <12ms</span>
|
||||
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 2 */}
|
||||
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-error mb-space-lg">
|
||||
<span className="material-symbols-outlined text-[26px]">fmd_bad</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-error block mb-1">02 / SWARM BROADCAST</span>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Crash & Separation Alerts</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Autonomous IMU-based impact detection pings the entire pack instantly. Visual yellow and red telemetry flags highlight precise coordinates for immediate regrouping.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-error">
|
||||
<span>IMU SENSING: 6-AXIS</span>
|
||||
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 3 */}
|
||||
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-secondary-fixed mb-space-lg">
|
||||
<span className="material-symbols-outlined text-[26px]">hub</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-secondary-fixed block mb-1">03 / OFFLINE LINK</span>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Peer-to-Peer Mesh Sync</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Never rely on cellular towers in deep canyons. High-throughput ad-hoc Bluetooth and Wi-Fi Direct protocols daisy-chain vital bike metrics from lead to sweep.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-secondary-fixed">
|
||||
<span>ZERO-CELL READY</span>
|
||||
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 4 */}
|
||||
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-primary-fixed mb-space-lg">
|
||||
<span className="material-symbols-outlined text-[26px]">history_toggle_off</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-code-mono text-primary-fixed block mb-1">04 / MISSION DEBRIEF</span>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Group Replay & Debrief</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Relive the ride with synced multi-bike timelines. Compare apex apex entries, sector speeds, and individual lean angles on an interactive 3D map renderer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-primary-fixed">
|
||||
<span>3D REPLAY ENGINE</span>
|
||||
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Visual Divider / Action Interstitial */}
|
||||
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
||||
<div className="relative bg-surface-container-low rounded-xl overflow-hidden shadow-2xl p-space-2xl">
|
||||
<div className="absolute -right-16 -bottom-16 w-80 h-80 bg-primary-container/10 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-space-xl">
|
||||
<div className="flex flex-col gap-space-xs max-w-xl">
|
||||
<span className="font-label-caps text-label-caps text-secondary-fixed uppercase">HARDWARE COMPATIBILITY</span>
|
||||
<h3 className="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">Sync directly with your helmet comms & bike dash</h3>
|
||||
<p className="font-body-md text-body-md text-on-surface-variant">
|
||||
Integrates seamlessly with Cardo, Sena, Apple Watch, and OBD-II CAN bus links for live peg-to-peg data overlays.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-md">
|
||||
<div className="flex items-center gap-space-sm px-space-md py-3 rounded-xl bg-surface-container-high">
|
||||
<span className="material-symbols-outlined text-secondary-fixed">headset_mic</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">CARDO / SENA HUD</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-sm px-space-md py-3 rounded-xl bg-surface-container-high">
|
||||
<span className="material-symbols-outlined text-primary-container">watch</span>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">HAPTIC ALERTS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Active Public & Regional Group Rides Directory */}
|
||||
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-space-xl gap-space-md">
|
||||
<div>
|
||||
<span className="font-label-caps text-label-caps text-primary-fixed-dim uppercase tracking-widest block mb-1">REGIONAL OPERATIONS</span>
|
||||
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">Active & Upcoming Pack Runs</h2>
|
||||
</div>
|
||||
{/* Filter Toggles */}
|
||||
<div className="flex flex-wrap items-center gap-space-xs bg-surface-container-low p-1 rounded-xl">
|
||||
<button className="px-space-md py-1.5 rounded-lg bg-surface-container-highest text-on-surface font-label-md text-label-md">All Runs (14)</button>
|
||||
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Brisk Pace</button>
|
||||
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Track / Apex</button>
|
||||
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Weekend Tours</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Search and Region Filters Bar */}
|
||||
<div className="bg-surface-container-lowest p-space-md rounded-xl mb-space-lg flex flex-wrap items-center justify-between gap-space-md shadow-md">
|
||||
<div className="flex items-center gap-space-sm flex-1 min-w-[280px]">
|
||||
<span className="material-symbols-outlined text-on-surface-variant text-[20px]">search</span>
|
||||
<input className="w-full bg-transparent font-body-md text-body-md text-on-surface placeholder:text-on-surface-variant outline-none" placeholder="Search by region, canyon, or road marshal..." type="text"/>
|
||||
</div>
|
||||
<div className="flex items-center gap-space-sm font-code-mono text-code-mono text-on-surface-variant">
|
||||
<span>SORT BY:</span>
|
||||
<span className="text-primary-container cursor-pointer font-bold">START TIME ↓</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Rides Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
|
||||
{/* Ride 1 */}
|
||||
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
|
||||
<div>
|
||||
<div className="relative h-44 w-full">
|
||||
<div className="w-full h-full bg-cover bg-center" data-alt="High performance sport motorcycles carving through early morning mist on California mountain ridge highway with sweeping Pacific ocean view in dark cinematic tones" ></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
|
||||
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
|
||||
SATURDAY • 06:30 AM PST
|
||||
</div>
|
||||
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-primary-container text-on-primary-container font-label-caps text-label-caps font-bold uppercase">
|
||||
TRACK PACE
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg">
|
||||
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
|
||||
<span>SAN FRANCISCO, CA</span>
|
||||
<span>82.4 MILES</span>
|
||||
</div>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Bay Area Dawn Patrol</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
|
||||
Fast sweepers from Woodside down to San Gregorio beach before morning traffic. Strict staggered formation enforced.
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<div className="w-6 h-6 rounded-full bg-primary-fixed-dim flex items-center justify-center text-on-primary-fixed font-bold text-[11px]">AL</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">Lead: ApexLead</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 font-code-mono text-code-mono text-secondary-fixed">
|
||||
<span className="material-symbols-outlined text-[16px]">group</span>
|
||||
<span>14/16 RIDERS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg pt-0">
|
||||
<button className="w-full py-2.5 rounded-lg bg-surface-container-high hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-[18px]">lock_open</span>
|
||||
Request Pack Slot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Ride 2 */}
|
||||
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
|
||||
<div>
|
||||
<div className="relative h-44 w-full">
|
||||
<div className="w-full h-full bg-cover bg-center" data-alt="Trio of supernaked Italian motorcycles parked at golden hour canyon overlook with asphalt switchbacks carving through dark mountains" ></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
|
||||
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
|
||||
SUNDAY • 07:15 AM PST
|
||||
</div>
|
||||
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-surface-container-highest text-primary font-label-caps text-label-caps font-bold uppercase">
|
||||
BRISK PACE
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg">
|
||||
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
|
||||
<span>MALIBU, CA</span>
|
||||
<span>64.0 MILES</span>
|
||||
</div>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Malibu Canyons Fast Pace</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
|
||||
Tuna Canyon descent to Latigo Canyon technical curves. Regroup checkpoint planned at Rock Store overlook.
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<div className="w-6 h-6 rounded-full bg-tertiary-fixed-dim flex items-center justify-center text-on-tertiary font-bold text-[11px]">DK</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">Lead: Dan_KTM</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 font-code-mono text-code-mono text-secondary-fixed">
|
||||
<span className="material-symbols-outlined text-[16px]">group</span>
|
||||
<span>9/12 RIDERS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg pt-0">
|
||||
<button className="w-full py-2.5 rounded-lg bg-surface-container-high hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-[18px]">lock_open</span>
|
||||
Request Pack Slot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Ride 3 */}
|
||||
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
|
||||
<div>
|
||||
<div className="relative h-44 w-full">
|
||||
<div className="w-full h-full bg-cover bg-center" data-alt="Dense green mountain pass winding asphalt curve with neon trail lights of aggressive sport bikes in moody dark atmospheric lighting" ></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
|
||||
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
|
||||
FRI-SUN • OCT 12-14
|
||||
</div>
|
||||
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-secondary-container text-on-secondary-container font-label-caps text-label-caps font-bold uppercase">
|
||||
ENDURANCE / CHILL
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg">
|
||||
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
|
||||
<span>ROBBINSVILLE, NC</span>
|
||||
<span>318 CURVES</span>
|
||||
</div>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Tail of the Dragon Run</h3>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
|
||||
11 miles, 318 technical curves. Telemetry debrief sessions every evening with custom apex analysis and gear logs.
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed font-bold text-[11px]">SM</div>
|
||||
<span className="font-code-mono text-code-mono text-on-surface">Lead: Sweep_Marshal</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 font-code-mono text-code-mono text-error">
|
||||
<span className="material-symbols-outlined text-[16px]">group</span>
|
||||
<span>FULL (24/24)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-space-lg pt-0">
|
||||
<button className="w-full py-2.5 rounded-lg bg-surface-container text-on-surface-variant font-headline-sm text-headline-sm cursor-not-allowed flex items-center justify-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-[18px]">hourglass_top</span>
|
||||
Join Waitlist (3)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Modal: Join Code Trigger Overlay (Interactive Script Attached) */}
|
||||
<div className="fixed inset-0 bg-surface-container-lowest/80 backdrop-blur-md z-50 hidden flex items-center justify-center p-space-md" id="join-modal">
|
||||
<div className="bg-surface-container-low max-w-md w-full rounded-xl p-space-xl shadow-2xl relative">
|
||||
<div className="flex items-center justify-between mb-space-lg">
|
||||
<div className="flex items-center gap-space-xs">
|
||||
<span className="material-symbols-outlined text-primary-container">qr_code_scanner</span>
|
||||
<h3 className="font-headline-md text-headline-md text-on-surface uppercase">Join Pack Formation</h3>
|
||||
</div>
|
||||
<button className="text-on-surface-variant hover:text-on-surface" id="close-modal">
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
|
||||
Enter the 6-character encrypted ride code generated by your Lead Pace Setter or scan their cockpit radar QR display.
|
||||
</p>
|
||||
<div className="flex flex-col gap-space-md mb-space-lg">
|
||||
<input className="w-full bg-surface-container-lowest font-code-mono text-headline-sm text-center tracking-widest text-primary px-space-md py-3 rounded-lg outline-none uppercase placeholder:text-on-surface-variant" placeholder="CODE: e.g. APEX84" type="text"/>
|
||||
<div className="flex items-center gap-space-md text-on-surface-variant font-code-mono text-code-mono justify-center">
|
||||
<span className="h-px bg-outline-variant flex-1"></span>
|
||||
<span>OR SCAN CAMERA</span>
|
||||
<span className="h-px bg-outline-variant flex-1"></span>
|
||||
</div>
|
||||
<div className="bg-surface-container h-36 rounded-lg flex flex-col items-center justify-center gap-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
|
||||
<span className="material-symbols-outlined text-[36px]">photo_camera</span>
|
||||
<span className="font-code-mono text-code-mono">ACTIVATE RADAR LENS</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full py-3 rounded-lg bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm">
|
||||
Connect Squad Telemetry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import HeroSection from '../components/landing/HeroSection';
|
||||
import TelemetryStrip from '../components/landing/TelemetryStrip';
|
||||
import PillarsSection from '../components/landing/PillarsSection';
|
||||
import InteractiveLapSection from '../components/landing/InteractiveLapSection';
|
||||
import TestimonialsSection from '../components/landing/TestimonialsSection';
|
||||
import CtaSection from '../components/landing/CtaSection';
|
||||
|
||||
export default function HomePage() {
|
||||
return <>
|
||||
<section className="hero">
|
||||
<span className="eyebrow">Motorcycle telemetry, made useful</span>
|
||||
<h1>Know what your ride is doing.</h1>
|
||||
<p>MotorSignal turns every ride into clear, actionable insight: live telemetry on the road, performance history after the ride, and one secure place for your account.</p>
|
||||
<div className="hero-actions"><Link className="button" href="/register">Create your account</Link><Link className="button button-secondary" href="/features">Explore features</Link></div>
|
||||
</section>
|
||||
<section className="section-grid" aria-label="MotorSignal capabilities">
|
||||
<article className="panel"><h3>Live cockpit</h3><p>Speed, lean angle, G-force, GPS status, and ride state in one rider-first dashboard.</p></article>
|
||||
<article className="panel"><h3>Ride intelligence</h3><p>Review distance, speed, performance launches, route context, and telemetry summaries after every ride.</p></article>
|
||||
<article className="panel"><h3>Built for trust</h3><p>Your account, sessions, vehicles, and ride data stay behind authenticated HTTPS APIs.</p></article>
|
||||
</section>
|
||||
</>;
|
||||
return (
|
||||
<div className="flagship-landing">
|
||||
<HeroSection />
|
||||
<TelemetryStrip />
|
||||
<PillarsSection />
|
||||
<InteractiveLapSection />
|
||||
<TestimonialsSection />
|
||||
<CtaSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function CtaSection() {
|
||||
return (
|
||||
<section className="bottom-cta-section">
|
||||
<div className="flagship-container">
|
||||
<div className="cta-banner-box">
|
||||
<div className="cta-banner-glow" />
|
||||
<div className="font-label-caps text-cyan-accent cta-banner-label">
|
||||
START ELEVATING YOUR APEX
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-ink m-0 cta-banner-title">
|
||||
Ready to unlock your bike's true potential?
|
||||
</h2>
|
||||
<p className="font-body-lg m-0 cta-banner-desc">
|
||||
Join over 14,000 riders tracking every corner, straightaway, and track day with surgical precision.
|
||||
</p>
|
||||
|
||||
<div className="cta-actions-row">
|
||||
<Link className="btn-primary-gradient" href="/register">
|
||||
<span>Start Free 30-Day Trial</span>
|
||||
<span className="material-symbols-outlined icon-bold">
|
||||
bolt
|
||||
</span>
|
||||
</Link>
|
||||
<Link className="btn-secondary-surface" href="/pricing">
|
||||
<span className="material-symbols-outlined text-green-accent icon-md">
|
||||
memory
|
||||
</span>
|
||||
<span>Order OBD-II / CAN Telemetry Link</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="guarantee-badges">
|
||||
<div className="badge-item">
|
||||
<span className="material-symbols-outlined text-green-accent icon-sm">
|
||||
verified
|
||||
</span>
|
||||
<span>No hardware lock-in</span>
|
||||
</div>
|
||||
<div className="badge-item">
|
||||
<span className="material-symbols-outlined text-cyan-accent icon-sm">
|
||||
phone_iphone
|
||||
</span>
|
||||
<span>Works with iOS & Android</span>
|
||||
</div>
|
||||
<div className="badge-item">
|
||||
<span className="material-symbols-outlined text-blue-accent icon-sm">
|
||||
security
|
||||
</span>
|
||||
<span>FIM & Track standard export</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="hero-wrapper">
|
||||
<div className="hero-glow-1" />
|
||||
<div className="hero-glow-2" />
|
||||
<div className="flagship-container">
|
||||
<div className="hero-grid">
|
||||
{/* Hero Copy */}
|
||||
<div className="hero-content-col">
|
||||
<div className="hero-pill">
|
||||
<span className="pulse-dot-green">
|
||||
<span className="ping" />
|
||||
<span className="core" />
|
||||
</span>
|
||||
<span className="font-label-caps text-dim-cyan" style={{ letterSpacing: '0.12em' }}>
|
||||
⚡ NEXT-GEN TELEMETRY ENGINE 3.0 • REAL-TIME CAN-BUS & GPS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-display-hero hero-title">
|
||||
Know what your <br className="hidden sm:inline" />
|
||||
<span className="gradient-title-text">ride is doing.</span>
|
||||
</h1>
|
||||
|
||||
<p className="font-body-lg hero-desc">
|
||||
MotorSignal turns every ride into clear, actionable insight: real-time lean angle, live GPS track
|
||||
telemetry on the road, post-session performance replay, and enterprise security for riders and clubs.
|
||||
</p>
|
||||
|
||||
<div className="hero-actions-row">
|
||||
<Link className="btn-primary-gradient" href="/register">
|
||||
<span>Create your account</span>
|
||||
<span className="material-symbols-outlined icon-bold">arrow_forward</span>
|
||||
</Link>
|
||||
<Link className="btn-secondary-surface" href="/features">
|
||||
<span className="material-symbols-outlined text-dim-cyan">play_circle</span>
|
||||
<span>Explore features</span>
|
||||
</Link>
|
||||
<Link className="btn-ghost-surface" href="/features">
|
||||
View Live Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trust Avatars & Proof */}
|
||||
<div className="hero-trust-row">
|
||||
<div className="hero-trust-avatars">
|
||||
<div className="trust-avatar avatar-blue">
|
||||
<span className="material-symbols-outlined">sports_motorsports</span>
|
||||
</div>
|
||||
<div className="trust-avatar avatar-green">
|
||||
<span className="material-symbols-outlined">speed</span>
|
||||
</div>
|
||||
<div className="trust-avatar avatar-cyan">
|
||||
<span className="material-symbols-outlined">timeline</span>
|
||||
</div>
|
||||
<div className="trust-avatar avatar-count">
|
||||
+420
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-trust-text">
|
||||
<span className="font-label-md text-ink">
|
||||
Trusted by 14,800+ riders
|
||||
</span>
|
||||
<span className="font-body-sm">Across 420+ racing clubs & track leagues worldwide</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Cockpit Showcase Visual */}
|
||||
<div className="cockpit-frame-wrapper">
|
||||
<div className="cockpit-viewport">
|
||||
<img
|
||||
src="/images/motorsignal-hero.jpg"
|
||||
alt="Motorcycle leaning into high speed curve with glowing cyan digital telemetry cockpit overlay"
|
||||
/>
|
||||
<div className="cockpit-vignette-bottom" />
|
||||
<div className="cockpit-vignette-side" />
|
||||
|
||||
{/* Top Badge: Apex Vector Locked */}
|
||||
<div className="hud-apex-badge">
|
||||
<span className="status-dot-green" />
|
||||
<span className="font-code-mono text-green-accent">APEX VECTOR LOCKED</span>
|
||||
<span className="font-code-mono text-muted">| CAN-BUS 100Hz</span>
|
||||
</div>
|
||||
|
||||
{/* Floating HUD 1: Lean Angle */}
|
||||
<div className="hud-lean-card">
|
||||
<div className="hud-header">
|
||||
<span className="font-label-caps text-muted-blue">LEAN ANGLE</span>
|
||||
<span className="font-code-mono text-green-accent">LIVE</span>
|
||||
</div>
|
||||
<div className="hud-value-row">
|
||||
<span className="font-telemetry-metric-xl text-cyan-accent">54°</span>
|
||||
<span className="font-code-mono text-muted">LEFT</span>
|
||||
</div>
|
||||
<div className="hud-progress-bg">
|
||||
<div className="hud-progress-bar lean-progress" />
|
||||
</div>
|
||||
<div className="hud-footer font-code-mono">
|
||||
<span className="text-muted">0°</span>
|
||||
<span className="text-muted">PEAK 58°</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating HUD 2: Velocity & G-Force */}
|
||||
<div className="hud-speed-card">
|
||||
<div className="hud-header">
|
||||
<span className="font-label-caps text-muted-blue">VELOCITY & G-FORCE</span>
|
||||
<span className="material-symbols-outlined text-cyan-accent icon-sm">speed</span>
|
||||
</div>
|
||||
<div className="hud-value-row">
|
||||
<span className="font-telemetry-metric-md text-ink">158</span>
|
||||
<span className="font-code-mono text-dim-cyan">MPH</span>
|
||||
</div>
|
||||
<div className="hud-lateral-box">
|
||||
<span className="font-code-mono text-muted-blue">LATERAL</span>
|
||||
<span className="font-headline-sm text-green-accent">+1.82 G</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Right Floating HUD 3: GPS Multi-band */}
|
||||
<div className="hud-gps-card">
|
||||
<div className="hud-header">
|
||||
<div className="hud-header-title">
|
||||
<span className="material-symbols-outlined text-dim-cyan icon-sm">satellite_alt</span>
|
||||
<span className="font-label-caps text-ink">GPS MULTI-BAND</span>
|
||||
</div>
|
||||
<span className="font-code-mono text-green-accent">10Hz LOCK</span>
|
||||
</div>
|
||||
<div className="hud-detail-row">
|
||||
<span className="font-code-mono text-muted">SYNC LATENCY</span>
|
||||
<span className="font-headline-sm text-cyan-accent">12ms</span>
|
||||
</div>
|
||||
<div className="hud-detail-row font-code-mono">
|
||||
<span className="text-muted-blue">SAT IN VIEW</span>
|
||||
<span className="text-ink">24 SATS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function InteractiveLapSection() {
|
||||
const [activeTab, setActiveTab] = useState<'lap7' | 'lap6' | 'delta'>('lap7');
|
||||
|
||||
return (
|
||||
<section className="lap-section-wrapper">
|
||||
<div className="flagship-container">
|
||||
<div className="lap-grid">
|
||||
{/* Left Column: Sector Delta Details */}
|
||||
<div className="lap-left-col">
|
||||
<div className="font-label-caps text-green-accent pill-label bg-surface-container w-fit">
|
||||
SECTOR TELEMETRY BREAKDOWN
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-ink m-0">
|
||||
Analyze lap deltas with surgical telemetry.
|
||||
</h2>
|
||||
<p className="font-body-md m-0">
|
||||
Compare throttle traces, brake initiation thresholds, and roll angles between your best lap and
|
||||
reference benchmarks. Instantly see where you left tenths on the tarmac.
|
||||
</p>
|
||||
|
||||
{/* Lap Tab Controls */}
|
||||
<div className="lap-tabs">
|
||||
<button
|
||||
type="button"
|
||||
className={`lap-tab-btn ${activeTab === 'lap7' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('lap7')}
|
||||
>
|
||||
Lap 7 (1:34.28)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`lap-tab-btn ${activeTab === 'lap6' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('lap6')}
|
||||
>
|
||||
Lap 6 (1:34.70)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`lap-tab-btn ${activeTab === 'delta' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('delta')}
|
||||
>
|
||||
Session Delta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sector Performance List */}
|
||||
<div className="sector-list">
|
||||
<div className="sector-row">
|
||||
<div className="sector-info">
|
||||
<span className="sector-dot bg-green-accent" />
|
||||
<div>
|
||||
<span className="font-headline-sm text-ink block">
|
||||
Sector 1: Turn 1-4 Complex
|
||||
</span>
|
||||
<span className="font-body-sm">Brake marker +8m deeper</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-code-mono text-green-accent font-semibold text-[17px]">
|
||||
-0.21s
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="sector-row">
|
||||
<div className="sector-info">
|
||||
<span className="sector-dot bg-cyan-accent" />
|
||||
<div>
|
||||
<span className="font-headline-sm text-ink block">
|
||||
Sector 2: Main Straightaway
|
||||
</span>
|
||||
<span className="font-body-sm">Top exit speed 162.4 MPH</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-code-mono text-cyan-accent font-semibold text-[17px]">
|
||||
-0.14s
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="sector-row">
|
||||
<div className="sector-info">
|
||||
<span className="sector-dot bg-blue-accent" />
|
||||
<div>
|
||||
<span className="font-headline-sm text-ink block">
|
||||
Sector 3: The Carousel
|
||||
</span>
|
||||
<span className="font-body-sm">Consistent 52° lean sustained</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-code-mono text-blue-accent font-semibold text-[17px]">
|
||||
-0.07s
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Telemetry Graph & SVG Trace */}
|
||||
<div className="graph-card">
|
||||
<div className="graph-header">
|
||||
<div className="graph-header-left">
|
||||
<span className="font-headline-sm text-ink">
|
||||
Laguna Seca Circuit
|
||||
</span>
|
||||
<span className="font-code-mono graph-badge text-dim-cyan bg-surface-highest">
|
||||
DRY • 24°C
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-code-mono text-green-accent flex items-center gap-6px">
|
||||
<span className="sector-dot-small bg-green-accent" />
|
||||
DELTA: {activeTab === 'lap7' ? '-0.42s' : activeTab === 'lap6' ? '+0.12s' : '-0.533s'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inline SVG Wave Graph */}
|
||||
<div className="graph-svg-container bg-surface-lowest">
|
||||
<div className="graph-svg-header font-code-mono text-xs">
|
||||
<span className="text-muted">SPEED (MPH) & THROTTLE %</span>
|
||||
<span className="text-cyan-accent text-[11px] sm:text-xs">BLUE: SPEED | GREEN: THROTTLE</span>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
className="w-full h-[176px]"
|
||||
fill="none"
|
||||
viewBox="0 0 600 160"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Speed and throttle telemetry traces"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="speedGrad" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor="#00f2fe" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#00f2fe" stopOpacity="0.0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/* Horizontal grid lines */}
|
||||
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="40" y2="40" />
|
||||
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="80" y2="80" />
|
||||
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="120" y2="120" />
|
||||
|
||||
{/* Speed Area and Line */}
|
||||
<path
|
||||
d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20 L600,160 L0,160 Z"
|
||||
fill="url(#speedGrad)"
|
||||
/>
|
||||
<path
|
||||
d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20"
|
||||
stroke="#00f2fe"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
|
||||
{/* Throttle Trace Line */}
|
||||
<path
|
||||
d="M0,150 Q70,140 120,25 T240,110 T360,15 T480,105 T600,10"
|
||||
stroke="#34ff8c"
|
||||
strokeDasharray="3 3"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
|
||||
{/* Apex Marker */}
|
||||
<circle cx="360" cy="30" fill="#00f2fe" r="5" stroke="#ffffff" strokeWidth="2" />
|
||||
</svg>
|
||||
|
||||
<div className="graph-svg-footer font-code-mono text-muted text-[11px]">
|
||||
<span className="truncate">T1 (Andretti)</span>
|
||||
<span className="shrink-0">T6</span>
|
||||
<span className="truncate">Corkscrew (Apex)</span>
|
||||
<span className="shrink-0">T11</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Mini Readouts */}
|
||||
<div className="bento-stats-grid-3 mt-3">
|
||||
<div className="bento-stat-box text-center bg-surface-container">
|
||||
<span className="font-label-caps text-muted block">
|
||||
PEAK DECEL
|
||||
</span>
|
||||
<span className="font-headline-sm text-danger-accent block mt-2px">
|
||||
-1.42 G
|
||||
</span>
|
||||
</div>
|
||||
<div className="bento-stat-box text-center bg-surface-container">
|
||||
<span className="font-label-caps text-muted block">
|
||||
ROLL RATE
|
||||
</span>
|
||||
<span className="font-headline-sm text-cyan-accent block mt-2px">
|
||||
64°/s
|
||||
</span>
|
||||
</div>
|
||||
<div className="bento-stat-box text-center bg-surface-container">
|
||||
<span className="font-label-caps text-muted block">
|
||||
DISTANCE
|
||||
</span>
|
||||
<span className="font-headline-sm text-ink block mt-2px">
|
||||
2.238 MI
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export default function TelemetryStrip() {
|
||||
const [riderCount, setRiderCount] = useState(14820);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (Math.random() > 0.4) {
|
||||
setRiderCount((prev) => prev + Math.floor(Math.random() * 3));
|
||||
}
|
||||
}, 3200);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="telemetry-strip">
|
||||
<div className="flagship-container">
|
||||
<div className="metric-strip-grid">
|
||||
<div className="metric-box">
|
||||
<div className="metric-box-header">
|
||||
<span className="font-label-caps text-muted">
|
||||
ACTIVE NETWORK
|
||||
</span>
|
||||
<span className="material-symbols-outlined text-dim-green icon-md">
|
||||
hub
|
||||
</span>
|
||||
</div>
|
||||
<div className="metric-box-content">
|
||||
<div className="font-telemetry-metric-xl text-ink">
|
||||
{riderCount.toLocaleString()}+
|
||||
</div>
|
||||
<p className="font-body-sm metric-box-desc">
|
||||
Connected Live Riders
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-box">
|
||||
<div className="metric-box-header">
|
||||
<span className="font-label-caps text-muted">
|
||||
DATABASE DEPTH
|
||||
</span>
|
||||
<span className="material-symbols-outlined text-cyan-accent icon-md">
|
||||
route
|
||||
</span>
|
||||
</div>
|
||||
<div className="metric-box-content">
|
||||
<div className="font-telemetry-metric-xl text-ink">
|
||||
3.2M+
|
||||
</div>
|
||||
<p className="font-body-sm metric-box-desc">
|
||||
Track Miles Analyzed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-box">
|
||||
<div className="metric-box-header">
|
||||
<span className="font-label-caps text-muted">
|
||||
PEAK DYNAMICS
|
||||
</span>
|
||||
<span className="material-symbols-outlined text-blue-accent icon-md">
|
||||
airline_stops
|
||||
</span>
|
||||
</div>
|
||||
<div className="metric-box-content">
|
||||
<div className="font-telemetry-metric-xl text-cyan-accent">58°</div>
|
||||
<p className="font-body-sm metric-box-desc">
|
||||
Max Recorded Lean Angle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-box">
|
||||
<div className="metric-box-header">
|
||||
<span className="font-label-caps text-muted">
|
||||
HARDWARE SAMPLING
|
||||
</span>
|
||||
<span className="material-symbols-outlined text-green-accent icon-md">
|
||||
timer
|
||||
</span>
|
||||
</div>
|
||||
<div className="metric-box-content">
|
||||
<div className="font-telemetry-metric-xl text-green-accent">0.01s</div>
|
||||
<p className="font-body-sm metric-box-desc">
|
||||
Telemetry Precision Sync
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<section className="testimonials-section">
|
||||
<div className="flagship-container">
|
||||
<div className="testimonials-header text-center max-w-2xl mx-auto mb-12">
|
||||
<div className="font-label-caps text-blue-accent pill-label bg-surface-high mb-10px">
|
||||
RACED ON TRACK & CANYONS
|
||||
</div>
|
||||
<h2 className="font-headline-xl text-ink m-0">
|
||||
Validated by racers, coaches & road captains.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-grid">
|
||||
{/* Testimonial 1 */}
|
||||
<div className="testimonial-card">
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-stars text-green-accent">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="material-symbols-outlined icon-md">
|
||||
star
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="font-body-md testimonial-quote m-0 italic">
|
||||
"The instant lean angle telemetry transformed my coaching. Being able to demonstrate the difference
|
||||
between 44° and 52° roll stability visually after every session cut seconds off our students' pace."
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-author-row">
|
||||
<div className="testimonial-avatar bg-cyan-accent text-on-primary-container">
|
||||
DR
|
||||
</div>
|
||||
<div className="testimonial-author-info">
|
||||
<span className="font-headline-sm text-ink">
|
||||
Dave Rossi
|
||||
</span>
|
||||
<span className="font-body-sm text-muted">Lead Coach, Apex Pro Track School</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial 2 */}
|
||||
<div className="testimonial-card">
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-stars text-green-accent">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="material-symbols-outlined icon-md">
|
||||
star
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="font-body-md testimonial-quote m-0 italic">
|
||||
"In group canyon rides, the Fleet Beacon brings absolute peace of mind. We had a rider go down in a
|
||||
blind downhill hairpin—MotorSignal flagged the G-impact instantly and notified the sweep rider."
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-author-row">
|
||||
<div className="testimonial-avatar bg-green-accent text-surface-lowest">
|
||||
MK
|
||||
</div>
|
||||
<div className="testimonial-author-info">
|
||||
<span className="font-headline-sm text-ink">
|
||||
Maya Kovacs
|
||||
</span>
|
||||
<span className="font-body-sm text-muted">Founder, Bay Area Moto Collective</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial 3 */}
|
||||
<div className="testimonial-card">
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-stars text-green-accent">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="material-symbols-outlined icon-md">
|
||||
star
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="font-body-md testimonial-quote m-0 italic">
|
||||
"The 10Hz GPS accuracy matches dedicated telemetry loggers costing ten times as much. Plugged straight
|
||||
into my Panigale OBD CAN-link and synced in under two minutes."
|
||||
</p>
|
||||
</div>
|
||||
<div className="testimonial-author-row">
|
||||
<div className="testimonial-avatar bg-blue-accent text-surface-lowest">
|
||||
TJ
|
||||
</div>
|
||||
<div className="testimonial-author-info">
|
||||
<span className="font-headline-sm text-ink">
|
||||
Tyler Jenkins
|
||||
</span>
|
||||
<span className="font-body-sm text-muted">MotoAmerica Supersport Competitor</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue