diff --git a/website/app/features/page.tsx b/website/app/features/page.tsx index d22bcab..4fda3a5 100644 --- a/website/app/features/page.tsx +++ b/website/app/features/page.tsx @@ -1 +1,802 @@ -export default function FeaturesPage() { return
The platform

Every signal has a job.

MotorSignal brings telemetry, route context, performance analysis, group rides, and secure cloud sync into one rider-focused system.

Telemetry

Live speed, GPS, lean angle, acceleration, braking, and ride state.

Performance

Launch timing and ride metrics stay associated with the ride that produced them.

Community

Plan routes, discover clubs, and ride with people who share your road.

; } +'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 ( +
+
+{/* Top Ambient Telemetry Grid Aura */} +
+
+
+{/* Editorial / Hero Container */} +
+{/* Eyebrow Pill */} +
+ + + + +COMPREHENSIVE TELEMETRY STACK • 10HZ MULTI-GNSS & 6-AXIS IMU +
+{/* Main Headline & Subheading */} +
+
+

+ Surgical data precision for every apex, straightaway, and canyon. +

+

+ 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. +

+
+
+
+
+ HARDWARE LINK RATE + SYNCHRONIZED +
+
+ 1000 + SAMPLES / SEC (IMU) +
+
+
+
+
+
+
+{/* Quick Fast Anchor Pills */} +
+ + 01 Live Cockpit + + + 02 Lap Analysis & Sectors + + + 03 Crash & SOS Beacon + + + 04 CAN-bus & ECU Stream + + + 05 Cloud Sync & Replay + +
+
+
+{/* SECTION 1: LIVE COCKPIT HUD */} +
+
+{/* Section Header */} +
+
+
+ 01 // TACTICAL FLIGHT INTERFACE + +
+

+ Live Cockpit & Handlebar HUD +

+
+

+ Engineered for instant optical ingestion at 180+ mph. Crisp, high-contrast digital flight deck mounted directly to your top triple-clamp. +

+
+{/* Cockpit Interactive Frame Grid */} +
+{/* Left: Major Telemetry Screen Preview (8 cols) */} +
+
+{/* Top Status Ribbon of HUD */} +
+
+ + + ACTIVE RECORDING + +PORTIMAO CIRCUIT // S2 APEX 4 +
+
+LATENCY: 9.4ms +• +10Hz GNSS LOCK (18 SATS) +
+
+{/* Central HUD Layout Simulation */} +
+{/* Left Dial: Lean Angle */} +
+Lean Angle (Apex Peak) +{/* SVG Arc Lean Angle Dial */} +
+ + + + +
+52.8° +L PEAK PEGGED +
+
+
+R 48.2° +LIMIT: 65° +L 52.8° +
+
+{/* Center Speed & G-Force Primary Indicator */} +
+Velocity Vector +
+174 +MPH +
+{/* G-Force Crosshair Minimal Widget */} +
+
+LATERAL G ++1.68 G +
+
+
+
+
+
+
+DECEL G +-1.32 G +
+
+
+{/* Right: Throttle & Hydraulic Brake Line Pressure */} +
+Hydraulic & TPS Telemetry +{/* Throttle Bar */} +
+
+THROTTLE TPS +88% OPEN +
+
+
+
+
+{/* Front Brake Line Pressure */} +
+
+FRONT BRAKE (BAR) +18.4 / 30 BAR +
+
+
+
+
+{/* Rear Brake Line Pressure */} +
+
+REAR TRAIL BRAKE +3.8 BAR +
+
+
+
+
+
+
+{/* Bottom Live Sparkline Telemetry Wave */} +
+
+THROTTLE vs DECEL TIMELINE (LAST 800M) +TURN 3 ENTRY > APEX 4 BRAKING DISCHARGE +
+{/* Inline SVG Sparkline */} + + + +
+
+{/* Right: Hardware Specs & Mount Imagery (4 cols) */} +
+{/* Cockpit Photo Card */} +
+
+
+
+CNC Billet Stem Mount +IP68 WATERPROOF +
+
+{/* Key Spec List */} +
+

Engineered Cockpit Protocol

+
    +
  • +bolt +60fps Fluid Refresh Rate: GPU-rendered zero-tearing UI on OLED mobile mounts with micro-second reactive vector dials. +
    • +
  • +wifi_tethering +Bluetooth 5.3 LE Sub-15ms: Zero perceptible lag between physical handlebar movements and screen updates. +
    • +
  • +wb_sunny +Dynamic Polarized Daylight Mode: High-luminescence inverted neon palette tuned for direct sunlight through helmet visors. +
    • +
+
+NATIVE MOUNT SUPPORT +QUADLOCK / RAM / SP CONNECT +
+
+
+
+
+
+{/* SECTION 2: DEEP SECTOR LAP & RIDE INTELLIGENCE */} +
+
+
+
+
+02 // CHRONOMETRIC RACE ANALYSIS + +
+

+ Deep Sector Lap & Ride Intelligence +

+
+

+ Micro-second GPS timing and IMU apex correlation. Overlay your fastest ghost lap and pinpoint precisely where milliseconds were won or lost. +

+
+{/* Bento Grid for Lap Analytics */} +
+{/* Left: Track GPS Layout & Apex Map (5 cols) */} +
+
+
+Mugello Circuit (Autodromo) +AUTO-DETECTED +
+

+ 5.245 km • 15 Turns • 1,141m Long Straightaway. 10Hz multi-satellite track boundary matching. +

+
+{/* Track Map SVG Visualizer */} +
+
+{/* Complex circuit path */} + +{/* Background circuit trace */} + +{/* Active Delta Ghost Track Overlay */} + +{/* Sector Split Markers */} + + + + + + + + + + + +
+ SPEED TRAP: 312.4 KM/H +
+
+ APEX 9 PEAK: 49.6° LEAN +
+
+
+
+BEST LAP TIME +1:48.342 +
+
+OPTIMAL SECTOR SUM +1:47.809 +
+
+
+{/* Right: Sector Comparison & Throttle Traces (7 cols) */} +
+{/* Sector Split Table Card */} +
+
+Sector Delta Matrix (Lap 7 vs Best Lap 4) +-0.533s AHEAD +
+
+{/* Sector 1 */} +
+
+S1 +San Donato Straight to Curva 2 +
+
+26.112s +-0.240s +
+
+{/* Sector 2 */} +
+
+S2 +Luco / Poggio Secco Complex +
+
+22.408s +-0.315s +
+
+{/* Sector 3 */} +
+
+S3 +Casanova - Savelli - Arrabbiata 1 & 2 +
+
+31.054s ++0.112s +
+
+{/* Sector 4 */} +
+
+S4 +Scarperia > Palagio > Bucine Apex +
+
+28.768s +-0.090s +
+
+
+
+{/* Canyon & Open Road Tracking Highlights */} +
+
+
+explore +400+ Circuits + Canyon Paths +
+

+ Preloaded with FIM, MotoGP, and MotoAmerica track maps. Auto-initiates timing gates with zero manual push-button triggers. +

+
+
+
+stacked_line_chart +Lean vs Velocity Heatmaps +
+

+ Synthesize throttle commitment with edge grip. Evaluate whether you are picking up the throttle early enough on corner exit. +

+
+
+
+
+
+
+{/* SECTION 3: EMERGENCY IMPACT & SOS BEACON */} +
+
+
+
+{/* Left Explanatory Text & Certs (6 cols) */} +
+
+03 // BLACKBOX PROTOCOL & LIFE SAFETY + +
+

+ Emergency Impact Detection & SOS Beacon +

+

+ 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. +

+{/* Feature Bullets */} +
+
+
+sensors +
+
+

<150ms High-G Impact Trigger

+

+ Tri-axial MEMS sensors distinguish between road vibration, pothole shocks, and actual bike separation or highside events. +

+
+
+
+
+satellite_alt +
+
+

Dual Cellular & Satellite Mesh Dispatch

+

+ Transmits GPS coordinates, rider blood type, impact force severity, and local EMS telemetry package via cellular carrier failover. +

+
+
+
+
+lock_reset +
+
+

Cryptographic Cloud Blackbox Preservation

+

+ The trailing 30 seconds of pre-impact CAN-bus throttle, braking, lean, and camera triggers are locked and preserved to encrypted cloud storage. +

+
+
+
+{/* Compliance Badges */} +
+
+verified +FIM Telemetry Spec 2025 +
+
+shield +ISO 26262 ASIL-B Safety +
+
+
+{/* Right SOS Interactive HUD Card (6 cols) */} +
+
+
+ +TACTICAL CRASH SIMULATOR DEMO +
+HARDWARE TEST V4 +
+
+
+warning +
+IMPACT DETECTED: +4.8G +

+ Emergency SOS countdown initialized. Coordinates resolved. Dispatch pending in: +

+
+ 00:08s +
+
+ + +
+
+
+
+LAT/LONG: +43.9975° N, 11.3714° E (Mugello S3) +
+
+RIDER PROFILE: +A-POSITIVE // EMERGENCY CONTACT LINKED +
+
+DATA SENT: +TRAIL CRASH PACKET (CAN-BUS 250kbps) +
+
+
+
+
+
+{/* SECTION 4: CAN-BUS & ECU HEALTH STREAM */} +
+
+
+
+
+04 // OBD-II & ECU ENGINE DIAGNOSTICS + +
+

+ Direct CAN-bus & ECU Health Stream +

+
+

+ Zero splicing or invasive wire taps. Connect MotorSignal CAN-Link directly into your bike's factory diagnostic port to harvest microsecond factory telemetry. +

+
+{/* Engine Diagnostic Sensor Matrix (6 Cards) */} +
+{/* Sensor 1: Coolant Temp */} +
+
+
+thermostat +ENGINE COOLANT +
+NOMINAL +
+
+88° +CELSIUS +
+

+ ECU threshold alerts warn of radiator heat-soak before cylinder head distortion occurs. +

+
+{/* Sensor 2: Oil Pressure & PSI */} +
+
+
+oil_barrel +OIL HYDRAULIC PSI +
+HIGH STABILITY +
+
+62.4 +PSI @ 9,800 RPM +
+

+ Continuous crankcase pressure monitoring prevents oil cavitation in prolonged apex leans. +

+
+{/* Sensor 3: Gear Position Indicator */} +
+
+
+settings_input_component +GEARBOX STATE +
+QUICKSHIFTER ACTIVE +
+
+4 +GEAR // 11,400 RPM +
+

+ Monitors shift cut-off duration (ms), false neutral occurrences, and clutch slip ratios. +

+
+{/* Sensor 4: RPM Tachometer Trace */} +
+
+
+speed +CRANK RPM PEAK +
+REDLINE 14,500 +
+
+13,850 +MAX RECORDED +
+

+ Full resolution engine rpm graph correlated with throttle opening percentage. +

+
+{/* Sensor 5: Fuel Burn Rate */} +
+
+
+local_gas_station +FUEL INJECTION CONSUMPTION +
+8.2 L / 100KM +
+
+3.8 +LAPS REMAINING FUEL +
+

+ Sprint-race fuel management strategy to avoid carrying unnecessary ballast weight. +

+
+{/* Sensor 6: TPMS & Compound Temperature */} +
+
+
+tire_repair +TPMS CARCASS TEMP +
+TRACK GRIP OPTIMAL +
+
+82° / 78° +F / R REAR TIRE +
+

+ Live cold/hot pressure inflation delta tracking to eliminate tire tearing and cold tears. +

+
+
+{/* Manufacturer OEM Plug-and-Play Compatibility Bar */} +
+
+
+OEM FACTORY HARNESS SUPPORT +

Universal Plug & Play OBD-II / Euro5 Connectors

+
+ + ZERO ECU FLASHING REQUIRED + +
+
+
YAMAHA
+
DUCATI
+
BMW
+
KAWASAKI
+
KTM
+
HONDA
+
APRILIA
+
TRIUMPH
+
+
+
+
+{/* SECTION 5: CLOUD SYNC & REPLAY */} +
+
+
+{/* Visual Telemetry Replay Snapshot (7 cols) */} +
+
+
+ +Telemetry Trace Playback Engine +
+
+cloud_done +SYNCHRONIZED (SESSION #142) +
+
+{/* Video Replay Frame Overlay */} +
+
+
+{/* Floating Data Widgets over rider view */} +
+
+T: 01:24.810 +SPEED: 182 KM/H +LEAN: 51.4° L +
+
+ + +
+
+
+{/* Scrubbing Bar with Sector Flags */} +
+
+LAP 4 REPLAY (TOTAL 01:48.342) +100% TELEMETRY BUFFER +
+
+
+
+
+
+{/* Explanatory Replay Details (5 cols) */} +
+
+05 // TELEMETRY CLOUD SYNC + +
+

+ Frame-Accurate Video & Telemetry Overlay +

+

+ Export 4K video with embedded Formula/MotoGP broadcast overlays. Sync external action cameras (GoPro, Insta360, DJI) automatically using GPS timestamp correlation. +

+
    +
  • +sync +Automatic cloud backup whenever phone reconnects to Wi-Fi. +
    • +
  • +group +Team paddock telemetry sharing: Mechanics inspect engine thermals remotely. +
    • +
  • +ios_share +Direct export to CSV, GPX, MoTeC i2 Pro, and AiM Race Studio formats. +
    • +
+ +
+
+
+
+{/* BOTTOM CALL TO ACTION */} +
+
+
+
+
+ + READY FOR TRACK & CANYON ROADS +
+

+ Equip your machine with pro-grade telemetry today. +

+

+ Start your 30-day all-access trial on iOS & Android, or order the plug-and-play OBD-II hardware link with instant track delivery. +

+ +
+NO WIRE SPLICING +• +WORLDWIDE 3-DAY EXPRESS DISPATCH +• +MONEY BACK GUARANTEE +
+
+
+
+
+ +
+ ); +} diff --git a/website/app/globals.css b/website/app/globals.css index fb489b6..e0f4e71 100644 --- a/website/app/globals.css +++ b/website/app/globals.css @@ -1,21 +1,360 @@ -:root { --ink: #f4f7fa; --muted: #9ca9b6; --bg: #0a0f14; --panel: #121a22; --line: #24313c; --blue: #1683ff; --green: #2cc979; } +:root { + --ink: #dfe2ee; + --muted: #b9cacb; + --bg: #0f131c; + --panel: #181c24; + --line: #262a33; + --blue: #00dce6; + --green: #60ff98; + + /* Stitch Tokens */ + --surface: #0f131c; + --surface-container-lowest: #0a0e16; + --surface-container-low: #181c24; + --surface-container: #1c2028; + --surface-container-high: #262a33; + --surface-container-highest: #31353e; + --surface-bright: #353942; + --on-surface: #dfe2ee; + --on-surface-variant: #b9cacb; + --outline: #849495; + --outline-variant: #3a494b; + --primary-container: #00f2fe; + --primary-fixed: #6ff6ff; + --primary-fixed-dim: #00dce6; + --on-primary-container: #006a70; + --secondary-fixed: #60ff98; + --secondary-fixed-dim: #00e478; + --secondary-container: #34ff8c; + --tertiary-fixed-dim: #7bd0ff; + --tertiary-container: #b2e1ff; + --error: #ffb4ab; + --error-container: #93000a; +} * { box-sizing: border-box; } -html { background: var(--bg); } -body { margin: 0; background: radial-gradient(circle at 70% -20%, #17324b 0, var(--bg) 42%); color: var(--ink); font-family: Arial, Helvetica, sans-serif; min-height: 100vh; } +html { background: var(--surface); color: var(--on-surface); } +body { + margin: 0; + background-color: var(--surface); + color: var(--on-surface); + font-family: 'Plus Jakarta Sans', sans-serif; + min-height: 100vh; +} a { color: inherit; text-decoration: none; } -.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 28px; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 20px 28px; } -.brand { align-items: center; display: inline-flex; font-size: 19px; font-weight: 800; gap: 10px; letter-spacing: .02em; } -.brand-mark { align-items: center; background: var(--blue); border-radius: 6px; display: inline-flex; height: 30px; justify-content: center; width: 30px; } -nav { display: flex; gap: 24px; margin-left: auto; } -nav a, .quiet-link { color: var(--muted); font-size: 14px; } -nav a:hover, .quiet-link:hover { color: var(--ink); } -.header-actions { align-items: center; display: flex; gap: 16px; } + +/* Stitch Account Portal Telemetry Styles */ +.telemetry-grid-bg { + background-image: + linear-gradient(to right, rgba(31, 42, 63, 0.35) 1px, transparent 1px), + linear-gradient(to bottom, rgba(31, 42, 63, 0.35) 1px, transparent 1px); + background-size: 32px 32px; +} + +.glass-card { + background: linear-gradient(135deg, rgba(15, 20, 32, 0.85) 0%, rgba(10, 14, 23, 0.95) 100%); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); +} + +.glow-border-cyan:hover { + box-shadow: 0 0 20px -3px rgba(0, 242, 254, 0.25); + border-color: rgba(0, 242, 254, 0.5); +} + +/* Top Bar / Site Header (Stitch Specification) */ +.site-header { + position: sticky; + top: 0; + width: 100%; + z-index: 50; + background: rgba(10, 14, 22, 0.88); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(58, 73, 75, 0.35); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); +} + +.site-header-inner { + max-width: 1340px; + height: 76px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} + +@media (max-width: 768px) { + .site-header-inner { + padding: 0 1rem; + height: 70px; + } +} + +.header-left { + display: flex; + align-items: center; + gap: 2.5rem; +} + +.brand-group { + display: flex; + align-items: center; + gap: 0.85rem; + text-decoration: none; +} + +.brand-icon-box { + width: 38px; + height: 38px; + border-radius: 0.75rem; + background: linear-gradient(135deg, #00f2fe 0%, #00dce6 50%, #b2e1ff 100%); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 18px rgba(0, 242, 254, 0.45); +} + +.brand-icon-box .brand-icon { + color: #00373a; + font-size: 22px; + font-weight: 800; +} + +.brand-text-col { + display: flex; + flex-direction: column; +} + +.brand-title { + font-family: 'Space Grotesk', sans-serif; + font-size: 17px; + font-weight: 700; + letter-spacing: -0.01em; + color: #dfe2ee; + line-height: 1.1; +} + +.brand-subtitle { + font-family: 'Space Grotesk', sans-serif; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.14em; + color: #00f2fe; +} + +.header-nav { + display: flex; + align-items: center; + gap: 1.5rem; + flex-wrap: nowrap; + white-space: nowrap; +} + +@media (max-width: 1200px) { + .header-nav { + gap: 1rem; + } +} + +@media (max-width: 1040px) { + .header-nav { + display: none; + } +} + +.nav-link { + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 14px; + font-weight: 500; + color: #b9cacb; + text-decoration: none; + transition: all 0.2s ease; + position: relative; + padding: 4px 0; + white-space: nowrap; +} + +.nav-link:hover { + color: #dfe2ee; +} + +.nav-link.active { + color: #00f2fe; + font-weight: 600; +} + +.nav-link.active::after { + content: ''; + position: absolute; + bottom: -6px; + left: 0; + right: 0; + height: 2px; + background-color: #00f2fe; + border-radius: 9999px; + box-shadow: 0 0 8px rgba(0, 242, 254, 0.6); +} + +.header-right { + display: flex; + align-items: center; + gap: 1.1rem; +} + +.telemetry-grid-pill { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.95rem; + border-radius: 9999px; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.45); +} + +@media (max-width: 860px) { + .telemetry-grid-pill { + display: none; + } +} + +.grid-dot-pulse { + position: relative; + display: flex; + height: 8px; + width: 8px; +} + +.grid-dot-pulse .ping { + animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; + position: absolute; + display: inline-flex; + height: 100%; + width: 100%; + border-radius: 50%; + background-color: #60ff98; + opacity: 0.75; +} + +.grid-dot-pulse .core { + position: relative; + display: inline-flex; + border-radius: 50%; + height: 8px; + width: 8px; + background-color: #00e478; +} + +.header-auth-buttons { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.btn-signin { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.55rem 1.15rem; + border-radius: 0.65rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.45); + color: #dfe2ee; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 13.5px; + font-weight: 600; + text-decoration: none; + transition: all 0.2s ease; +} + +.btn-signin:hover { + background: #262a33; + color: #00f2fe; + border-color: rgba(0, 242, 254, 0.35); +} + +.btn-getstarted { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.6rem 1.35rem; + border-radius: 0.65rem; + background: linear-gradient(90deg, #00f2fe 0%, #6ff6ff 100%); + color: #00373a; + font-family: 'Space Grotesk', sans-serif; + font-size: 14px; + font-weight: 700; + text-decoration: none; + box-shadow: 0 2px 14px rgba(0, 242, 254, 0.35); + transition: all 0.2s ease; +} + +.btn-getstarted:hover { + box-shadow: 0 0 24px rgba(0, 242, 254, 0.55); + filter: brightness(1.05); +} + +.btn-avatar-circle { + width: 36px; + height: 36px; + border-radius: 50%; + background: #262a33; + color: #b9cacb; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + border: 1px solid rgba(58, 73, 75, 0.4); + transition: all 0.2s ease; +} + +.btn-avatar-circle:hover { + border-color: #00f2fe; + color: #00f2fe; +} + +.btn-account-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border-radius: 50%; + background: #262a33; + border: 1px solid rgba(0, 242, 254, 0.4); + color: #00f2fe; + text-decoration: none; + box-shadow: 0 0 10px rgba(0, 242, 254, 0.2); +} + +.site-header nav { flex-wrap: nowrap; } .button { background: var(--blue); border: 0; border-radius: 6px; color: white; cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 700; justify-content: center; padding: 13px 18px; } .button:hover { filter: brightness(1.12); } .button:disabled { cursor: wait; opacity: .6; } .button-small { font-size: 13px; padding: 9px 13px; } main { margin: 0 auto; max-width: 1240px; padding: 72px 28px 100px; } +main:has(.flagship-landing), main:has(.flagship-page) { max-width: 100%; padding: 0; } .hero { max-width: 780px; } +.flagship-hero { align-items: center; background: linear-gradient(90deg, rgba(10,15,20,.96) 0%, rgba(10,15,20,.78) 48%, rgba(10,15,20,.28)), url('/images/motorsignal-hero.jpg') center/cover; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 48px; grid-template-columns: 1.05fr .95fr; min-height: 560px; overflow: hidden; padding: 72px; } +.hero-copy { max-width: 720px; } +.hero-copy h1 { font-size: clamp(50px, 7vw, 92px); } +.cockpit-card { align-self: end; background: rgba(9,18,28,.8); border: 1px solid #2e697c; box-shadow: 0 0 40px rgba(0,196,255,.12); padding: 28px; } +.cockpit-label, .cockpit-footer { color: #7dd3fc; font: 12px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; } +.cockpit-speed { color: #effcff; font-size: clamp(86px, 11vw, 150px); font-weight: 800; line-height: .9; margin: 34px 0; } +.cockpit-speed span { color: #67e8f9; font-size: 16px; margin-left: 10px; } +.cockpit-line, .cockpit-footer { display: flex; gap: 14px; justify-content: space-between; } +.cockpit-line { border-bottom: 1px solid #274454; border-top: 1px solid #274454; color: var(--muted); font-size: 12px; padding: 16px 0; } +.cockpit-line strong { color: #f0fdf4; font-size: 24px; } +.telemetry-bars { align-items: end; display: flex; gap: 8px; height: 90px; padding: 18px 0; } +.telemetry-bars i { background: #22d3ee; display: block; flex: 1; height: 35%; opacity: .8; } +.telemetry-bars i:nth-child(2n) { height: 75%; background: #34d399; }.telemetry-bars i:nth-child(3n) { height: 55%; } +.cockpit-footer { padding-top: 12px; }.signal-live { color: #4ade80; } +.metric-ribbon { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 90px; padding: 22px 0; } +.metric-ribbon div { border-left: 1px solid var(--line); padding-left: 24px; }.metric-ribbon div:first-child { border-left: 0; }.metric-ribbon strong, .metric-ribbon span { display: block; }.metric-ribbon strong { font-size: 30px; }.metric-ribbon span { color: var(--muted); font-size: 12px; margin-top: 5px; text-transform: uppercase; } +.section-heading, .public-intro { max-width: 760px; }.section-heading h2 { font-size: 48px; margin: 14px 0 10px; }.section-heading p, .public-intro p { font-size: 18px; } +.feature-grid, .club-pillars, .architecture-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 36px; }.feature-panel, .club-pillars article, .architecture-grid article, .side-panel { background: #111a22; border: 1px solid var(--line); border-radius: 8px; padding: 28px; }.feature-panel span, .club-pillars span, .architecture-grid article > span { color: #67e8f9; font: 12px ui-monospace, monospace; }.feature-panel h3 { font-size: 24px; line-height: 1.15; margin: 50px 0 8px; }.feature-panel p, .club-pillars p, .architecture-grid p { color: var(--muted); }.feature-green { border-top: 3px solid #34d399; }.feature-blue { border-top: 3px solid #60a5fa; }.conversion-band { align-items: center; background: #0c2534; border: 1px solid #155e75; display: flex; justify-content: space-between; margin-top: 90px; padding: 30px; }.conversion-band h2 { margin: 10px 0 0; } +.public-page { max-width: 1180px; margin: auto; }.public-intro h1 { font-size: clamp(48px, 7vw, 78px); margin: 18px 0 12px; }.architecture-grid { grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.architecture-grid article { min-height: 300px; }.architecture-grid h2, .club-pillars h2 { font-size: 25px; margin: 50px 0 10px; }.mini-readout, .status-line { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin-top: 30px; padding-top: 16px; }.mini-readout strong { color: #e0f2fe; font-size: 34px; }.mini-readout span, .status-line { font: 11px ui-monospace, monospace; }.status-line b { color: #4ade80; }.trace-lines { border-bottom: 2px solid #155e75; display: flex; gap: 8px; height: 70px; margin-top: 30px; transform: skewY(-12deg); }.trace-lines i { background: #22d3ee; flex: 1; height: 60%; }.trace-lines i:nth-child(2) { height: 90%; background: #34d399; }.trace-lines i:nth-child(3) { height: 35%; } +.ride-hero-panel { align-items: center; background: #0d1a25; border: 1px solid #1e4d64; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; margin: 54px 0; padding: 46px; }.ride-hero-panel h2 { font-size: 38px; margin: 14px 0; }.radar { aspect-ratio: 1; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 62%), repeating-radial-gradient(circle, transparent 0 35px, #214556 36px 37px); border: 1px solid #28748a; border-radius: 50%; max-width: 370px; position: relative; }.radar-ring { border: 1px solid #28748a; border-radius: 50%; inset: 25%; position: absolute; }.r2 { inset: 42%; }.radar-center { color: #67e8f9; left: 42%; position: absolute; top: 46%; }.rider-dot { background: #4ade80; border: 4px solid #0d1a25; border-radius: 50%; height: 16px; position: absolute; width: 16px; }.one { left: 22%; top: 28%; }.two { right: 24%; top: 20%; background: #facc15; }.three { bottom: 22%; left: 30%; }.four { bottom: 28%; right: 20%; }.alert-strip { background: #3a2c0a; border: 1px solid #854d0e; color: #fde68a; font: 12px ui-monospace, monospace; margin-top: 24px; padding: 12px; }.public-split { display: grid; gap: 24px; grid-template-columns: 1.5fr .8fr; margin-top: 54px; }.public-split > div > h2 { font-size: 30px; }.side-panel { align-self: start; }.side-panel h2 { font-size: 28px; margin: 18px 0 8px; } .eyebrow { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } h1 { font-size: clamp(42px, 7vw, 82px); line-height: .98; margin: 18px 0; max-width: 850px; } h2 { font-size: 32px; margin: 0 0 14px; } @@ -33,6 +372,7 @@ p { color: var(--muted); line-height: 1.65; } .content-page { max-width: 900px; margin: auto; } .content-page > p { font-size: 18px; max-width: 700px; } .account-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 42px; } +.companion-list { display: grid; gap: 16px; margin-top: 36px; } .legal-page { max-width: 760px; } .legal-page h2 { font-size: 22px; margin-top: 36px; } .site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 24px 28px 40px; font-size: 13px; } @@ -51,18 +391,1081 @@ input:focus { border-color: var(--blue); outline: 2px solid color-mix(in srgb, v .audit-row { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 18px 20px; } .audit-row p { font-size: 13px; margin: 5px 0 0; } .audit-row time { color: var(--muted); font-size: 12px; white-space: nowrap; } -.admin-console { margin-top: 32px; } +.admin-page { max-width: 1440px; margin: auto; } +.admin-title-row { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; padding-bottom: 28px; } +.admin-title-row h1 { font-size: clamp(48px, 7vw, 76px); margin: 16px 0 10px; } +.admin-title-row h1 span { color: #22d3ee; } +.admin-title-row p { margin: 0; } +.admin-environment { align-items: center; color: var(--muted); display: flex; font: 11px ui-monospace, SFMono-Regular, monospace; gap: 14px; text-transform: uppercase; } +.admin-environment strong { background: #082f49; border: 1px solid #155e75; color: #67e8f9; padding: 5px 8px; } +.admin-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 24px 0; } +.admin-kpis article { background: #111a26; border: 1px solid #26364a; border-radius: 8px; display: grid; gap: 8px; padding: 18px; } +.admin-kpis span, .admin-kpis small { color: var(--muted); font-size: 12px; } +.admin-kpis strong { font-size: 30px; } +.health-good { color: var(--green); } +.admin-console { margin-top: 24px; padding: 0; } +.admin-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 8px 12px 0; } .admin-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 8px; } -.admin-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font: inherit; padding: 12px 16px; text-transform: capitalize; } +.admin-tab { align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; font: inherit; gap: 8px; padding: 14px 16px; text-transform: capitalize; } +.admin-tab small { background: #1e293b; border-radius: 10px; color: #67e8f9; font-size: 11px; padding: 2px 6px; } .admin-tab.active { border-bottom-color: var(--blue); color: var(--ink); } -.admin-create-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; } +.admin-create-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 20px 8px; } +.admin-create-heading span { color: var(--muted); font-size: 12px; } +.admin-create-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 20px 20px; } .admin-create-form input, .admin-create-form select { flex: 1 1 150px; min-width: 130px; } +.admin-table-wrap { padding: 0 12px 12px; } .admin-table-wrap { overflow-x: auto; } .admin-table { border-collapse: collapse; min-width: 700px; width: 100%; } .admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: 14px 10px; text-align: left; } .admin-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; } .admin-table td { font-size: 13px; } +.admin-table td code, .audit-event code { color: var(--muted); display: block; font: 11px ui-monospace, SFMono-Regular, monospace; margin-top: 5px; } +.status-badge { border: 1px solid; border-radius: 10px; display: inline-block; font-size: 11px; padding: 3px 8px; text-transform: capitalize; } +.status-badge.active { background: #052e23; border-color: #166534; color: #4ade80; } +.status-badge.inactive { background: #3f1d25; border-color: #7f1d1d; color: #fda4af; } +.danger { color: #fb7185; } +.admin-section-heading { align-items: end; display: flex; justify-content: space-between; margin-top: 54px; } +.admin-section-heading h2 { margin: 0; } +.admin-section-heading p { margin: 4px 0 0; } +.admin-section-heading > span { color: var(--muted); font-size: 12px; } .text-button { background: transparent; border: 0; color: var(--blue); cursor: pointer; padding: 4px 0; } .empty-state { color: var(--muted); } -.admin-audit-heading { font-size: 24px; margin-top: 64px; } -@media (max-width: 760px) { .site-header { flex-wrap: wrap; padding: 16px 18px; } nav { order: 3; width: 100%; } main { padding: 48px 18px 72px; } .section-grid, .section-grid-two, .account-grid, .auth-page { grid-template-columns: 1fr; margin-top: 56px; } h1 { font-size: 48px; } .site-footer { padding-left: 18px; padding-right: 18px; } } +.audit-row { align-items: center; background: #111a26; border: 1px solid #26364a; border-radius: 6px; display: flex; gap: 14px; padding: 14px 16px; } +.audit-icon { align-items: center; background: #0e7490; border-radius: 50%; color: white; display: flex; font: 11px ui-monospace, monospace; height: 26px; justify-content: center; width: 26px; } +.audit-event { flex: 1; } +.audit-row time { color: var(--muted); font-size: 11px; white-space: nowrap; } +.account-sessions { margin-top: 16px; } +.session-heading { align-items: center; display: flex; justify-content: space-between; } +.session-heading h2 { margin: 0; } +.session-row { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; } +.session-row p { font-size: 13px; margin: 5px 0 0; } +@media (max-width: 760px) { .site-header { flex-wrap: wrap; padding: 16px 18px; } nav { order: 3; width: 100%; } main { padding: 48px 18px 72px; } .section-grid, .section-grid-two, .account-grid, .auth-page, .admin-kpis { grid-template-columns: 1fr; margin-top: 56px; } .admin-title-row { align-items: flex-start; flex-direction: column; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .admin-tabs { width: 100%; } .admin-tab { flex: 1; justify-content: center; } h1 { font-size: 48px; } .site-footer { padding-left: 18px; padding-right: 18px; } } +@media (max-width: 760px) { .flagship-hero, .ride-hero-panel, .public-split { grid-template-columns: 1fr; padding: 28px; }.flagship-hero { min-height: 0; padding: 36px 24px; }.metric-ribbon { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 56px; }.metric-ribbon div:nth-child(3) { border-left: 0; }.feature-grid, .club-pillars, .architecture-grid { grid-template-columns: 1fr; }.conversion-band { align-items: flex-start; flex-direction: column; gap: 20px; }.radar { max-width: 270px; }.public-intro h1 { font-size: 48px; } } +.flagship-section-heading { margin-top: 90px; } +.flagship-feature-grid { grid-template-columns: repeat(2, 1fr); } +.feature-purple { border-top: 3px solid #c084fc; } +.feature-stat { align-items: baseline; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 26px; padding-top: 16px; } +.feature-stat strong { color: #e0f2fe; font-size: 23px; } +.feature-stat span { color: var(--muted); font: 10px ui-monospace, monospace; margin-right: 12px; } +.lap-section { background: #0e1821; border: 1px solid #24475a; display: grid; gap: 48px; grid-template-columns: .8fr 1.2fr; margin-top: 90px; padding: 42px; } +.lap-section h2, .proof-section h2 { font-size: 42px; margin: 16px 0 12px; } +.lap-facts { display: grid; gap: 14px; margin-top: 34px; } +.lap-facts span { color: var(--muted); font: 11px ui-monospace, monospace; } +.lap-facts strong { color: #67e8f9; font-size: 20px; margin-right: 8px; } +.lap-chart { background: #09131b; border: 1px solid #1e4d64; min-height: 280px; overflow: hidden; padding: 24px; position: relative; } +.chart-grid { background: repeating-linear-gradient(0deg, transparent 0 54px, #173545 55px), repeating-linear-gradient(90deg, transparent 0 78px, #173545 79px); inset: 24px; position: absolute; } +.lap-chart svg { height: 220px; position: relative; width: 100%; } +.lap-chart path { fill: none; stroke: #22d3ee; stroke-width: 4; } +.lap-chart .trace-secondary { stroke: #4ade80; stroke-dasharray: 8 6; } +.chart-label { bottom: 18px; color: var(--muted); font: 10px ui-monospace, monospace; position: absolute; } +.label-a { color: #22d3ee; left: 24px; }.label-b { color: #4ade80; right: 24px; } +.proof-section { margin-top: 90px; }.quote-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; } +.quote-grid blockquote { background: #111a22; border-left: 2px solid #22d3ee; margin: 0; padding: 24px; } +.quote-grid cite { color: var(--muted); display: block; font-size: 12px; font-style: normal; margin-top: 22px; } +@media (max-width: 760px) { .lap-section { grid-template-columns: 1fr; padding: 28px; }.flagship-feature-grid, .quote-grid { grid-template-columns: 1fr; }.lap-section h2, .proof-section h2 { font-size: 34px; } } +.feature-detail-band, .club-radar-band { align-items: center; background: #0d1a25; border: 1px solid #24475a; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-top: 54px; padding: 38px; }.feature-detail-band h2, .club-radar-band h2 { font-size: 34px; margin: 14px 0 10px; }.detail-list { display: grid; gap: 14px; }.detail-list span { border-bottom: 1px solid var(--line); color: var(--muted); padding-bottom: 14px; }.detail-list b { color: #22d3ee; font: 12px ui-monospace, monospace; margin-right: 14px; }.ride-facts { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 26px; }.ride-facts span, .club-metrics span { color: var(--muted); font: 10px ui-monospace, monospace; }.ride-facts b { color: #e0f2fe; display: block; font-size: 20px; margin-bottom: 4px; }.pillars-strip { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }.pillars-strip article { border-top: 2px solid #1e7490; padding: 22px 10px; }.pillars-strip span { color: #67e8f9; font: 11px ui-monospace, monospace; }.pillars-strip h3 { margin: 18px 0 8px; }.pillars-strip p { font-size: 14px; margin: 0; }.section-inline-heading { align-items: end; display: flex; justify-content: space-between; }.section-inline-heading h2 { margin: 12px 0 0; }.section-inline-heading > span { color: var(--muted); font-size: 12px; }.directory-list { border-top: 1px solid var(--line); margin-top: 20px; }.directory-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr auto auto; padding: 18px 0; }.directory-row h3 { margin: 0 0 4px; }.directory-row p { font-size: 13px; margin: 0; }.account-list-heading { font-size: 22px; margin-top: 46px; }.club-radar-band { grid-template-columns: 1fr 1fr; margin-top: 54px; }.club-metrics { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }.club-metrics div { border-left: 1px solid var(--line); padding-left: 14px; }.club-metrics strong, .club-metrics span { display: block; }.club-metrics strong { color: #4ade80; font-size: 25px; margin-bottom: 8px; } +.pricing-intro { margin-bottom: 50px; }.pricing-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.price-card { background: #111a22; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; padding: 30px; }.price-card.pro { border-color: #0e7490; box-shadow: 0 0 28px rgba(34,211,238,.1); }.price-card.team { border-color: #166534; }.price { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: 10px; margin: 22px 0; padding-bottom: 20px; }.price strong { font-size: 52px; }.price span { color: var(--muted); font-size: 12px; }.price-card ul { display: grid; gap: 14px; list-style: none; margin: 0 0 30px; padding: 0; }.price-card li { color: #d5e1e8; font-size: 14px; }.price-card .button { margin-top: auto; }.comparison-section, .faq-section { margin-top: 90px; }.comparison-section h2, .faq-section h2 { font-size: 40px; margin: 14px 0 28px; }.comparison-table { border: 1px solid var(--line); overflow-x: auto; }.comparison-row { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); min-width: 700px; }.comparison-row span { border-bottom: 1px solid var(--line); color: var(--muted); padding: 16px; text-align: center; }.comparison-row:last-child span { border-bottom: 0; }.comparison-row .comparison-label { color: var(--ink); text-align: left; }.hardware-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 54px; }.hardware-card { background: #0d1a25; border: 1px solid #24475a; padding: 30px; }.hardware-card h2 { font-size: 32px; margin: 38px 0 10px; }.hardware-card strong { color: #4ade80; display: block; font-size: 13px; margin: 26px 0 16px; }.faq-section details { border-bottom: 1px solid var(--line); padding: 20px 0; }.faq-section summary { cursor: pointer; font-size: 18px; }.faq-section details p { margin-bottom: 0; } +@media (max-width: 760px) { .feature-detail-band, .club-radar-band, .hardware-grid { grid-template-columns: 1fr; padding: 28px; }.pillars-strip, .pricing-grid { grid-template-columns: 1fr; }.ride-facts, .club-metrics { grid-template-columns: 1fr; }.directory-row { grid-template-columns: 1fr auto; }.directory-row .text-button { grid-column: 1 / -1; text-align: left; }.price strong { font-size: 44px; } } + +/* ========================================================================== + MotorSignal Flagship Landing (Stitch Design Specification) + ========================================================================== */ + +.flagship-landing { + background-color: #0f131c; + color: #dfe2ee; + font-family: 'Plus Jakarta Sans', sans-serif; + overflow-x: hidden; + width: 100%; +} + +.flagship-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1rem; + width: 100%; + box-sizing: border-box; +} + +@media (min-width: 640px) { + .flagship-container { + padding: 0 1.5rem; + } +} + +@media (min-width: 1024px) { + .flagship-container { + padding: 0 2rem; + } +} + +/* Typography styles */ +.font-display-hero { + font-family: 'Space Grotesk', sans-serif; + font-size: clamp(30px, 5.2vw, 56px); + line-height: 1.1; + letter-spacing: -0.03em; + font-weight: 700; + overflow-wrap: break-word; +} + +.font-headline-xl { + font-family: 'Space Grotesk', sans-serif; + font-size: clamp(23px, 3.5vw, 40px); + line-height: 1.2; + letter-spacing: -0.02em; + font-weight: 700; + overflow-wrap: break-word; +} + +.font-headline-lg { + font-family: 'Space Grotesk', sans-serif; + font-size: clamp(20px, 2.5vw, 26px); + line-height: 1.28; + letter-spacing: -0.015em; + font-weight: 600; + overflow-wrap: break-word; +} + +.font-headline-md { + font-family: 'Space Grotesk', sans-serif; + font-size: 22px; + line-height: 30px; + letter-spacing: -0.01em; + font-weight: 600; +} + +.font-headline-sm { + font-family: 'Space Grotesk', sans-serif; + font-size: 17px; + line-height: 24px; + letter-spacing: -0.005em; + font-weight: 600; +} + +.font-code-mono { + font-family: 'Space Grotesk', monospace; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.04em; + font-weight: 500; +} + +.font-label-caps { + font-family: 'Space Grotesk', sans-serif; + font-size: 11px; + line-height: 14px; + letter-spacing: 0.12em; + font-weight: 700; +} + +.font-label-md { + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.01em; + font-weight: 600; +} + +.font-body-lg { + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 18px; + line-height: 28px; + color: #b9cacb; +} + +.font-body-md { + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 15px; + line-height: 24px; + color: #b9cacb; +} + +.font-body-sm { + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 13px; + line-height: 20px; + color: #849495; +} + +.font-telemetry-metric-xl { + font-family: 'Space Grotesk', sans-serif; + font-size: 46px; + line-height: 48px; + letter-spacing: -0.04em; + font-weight: 700; +} + +.font-telemetry-metric-md { + font-family: 'Space Grotesk', sans-serif; + font-size: 32px; + line-height: 36px; + letter-spacing: -0.03em; + font-weight: 700; +} + +/* Colors and Gradients */ +.text-cyan-accent { + color: #00f2fe; +} + +.text-green-accent { + color: #60ff98; +} + +.text-dim-cyan { + color: #6ff6ff; +} + +.text-dim-green { + color: #00e478; +} + +.text-blue-accent { + color: #7bd0ff; +} + +.text-danger-accent { + color: #ffb4ab; +} + +.gradient-title-text { + background: linear-gradient(90deg, #00f2fe 0%, #e0fdff 50%, #34ff8c 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +/* Hero Section */ +.hero-wrapper { + position: relative; + overflow: hidden; + padding: 4rem 0 2rem; +} + +.hero-glow-1 { + position: absolute; + top: 2rem; + left: 20%; + transform: translateX(-50%); + width: min(600px, 90vw); + height: min(600px, 90vw); + background: rgba(0, 242, 254, 0.08); + border-radius: 50%; + filter: blur(140px); + pointer-events: none; + z-index: 0; +} + +.hero-glow-2 { + position: absolute; + top: 8rem; + right: 5%; + width: min(500px, 80vw); + height: min(500px, 80vw); + background: rgba(52, 255, 140, 0.07); + border-radius: 50%; + filter: blur(150px); + pointer-events: none; + z-index: 0; +} + +.hero-grid { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + gap: 3.5rem; + align-items: flex-start; + position: relative; + z-index: 1; +} + +@media (max-width: 1024px) { + .hero-grid { + grid-template-columns: 1fr; + gap: 3rem; + } +} + +.hero-pill { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.35rem 0.85rem; + border-radius: 9999px; + background: rgba(38, 42, 51, 0.8); + border: 1px solid rgba(58, 73, 75, 0.45); + backdrop-filter: blur(12px); + width: fit-content; +} + +.pulse-dot-green { + position: relative; + display: flex; + height: 9px; + width: 9px; +} + +.pulse-dot-green .ping { + animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; + position: absolute; + display: inline-flex; + height: 100%; + width: 100%; + border-radius: 50%; + background-color: #60ff98; + opacity: 0.75; +} + +.pulse-dot-green .core { + position: relative; + display: inline-flex; + border-radius: 50%; + height: 9px; + width: 9px; + background-color: #00e478; +} + +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +/* Button variants */ +.btn-primary-gradient { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.85rem 1.8rem; + border-radius: 0.75rem; + background: linear-gradient(90deg, #00f2fe 0%, #00dce6 50%, #6ff6ff 100%); + color: #002022; + font-family: 'Space Grotesk', sans-serif; + font-size: 15px; + font-weight: 700; + box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35); + transition: all 0.25s ease; + border: none; + cursor: pointer; + text-decoration: none; +} + +.btn-primary-gradient:hover { + box-shadow: 0 0 30px rgba(0, 242, 254, 0.55); + filter: brightness(1.06); + transform: translateY(-1px); +} + +.btn-secondary-surface { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.85rem 1.5rem; + border-radius: 0.75rem; + background: rgba(38, 42, 51, 0.9); + color: #dfe2ee; + border: 1px solid rgba(58, 73, 75, 0.45); + font-family: 'Space Grotesk', sans-serif; + font-size: 15px; + font-weight: 600; + transition: all 0.25s ease; + cursor: pointer; + text-decoration: none; +} + +.btn-secondary-surface:hover { + background: #353942; + color: #ffffff; + border-color: rgba(0, 242, 254, 0.4); +} + +.btn-ghost-surface { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.85rem 1.25rem; + border-radius: 0.75rem; + background: #181c24; + color: #b9cacb; + border: 1px solid rgba(58, 73, 75, 0.4); + font-size: 13px; + font-weight: 600; + transition: all 0.25s ease; + text-decoration: none; +} + +.btn-ghost-surface:hover { + background: #1c2028; + color: #00f2fe; +} + +/* Hero Cockpit Frame */ +.cockpit-frame-wrapper { + position: relative; + border-radius: 1.25rem; + background: rgba(10, 14, 22, 0.9); + padding: 0.35rem; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); + border: 1px solid rgba(58, 73, 75, 0.35); + overflow: hidden; +} + +.cockpit-viewport { + position: relative; + width: 100%; + height: 520px; + border-radius: 1rem; + overflow: hidden; +} + +@media (max-width: 640px) { + .cockpit-viewport { + height: 440px; + } +} + +.cockpit-viewport img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); +} + +.cockpit-frame-wrapper:hover .cockpit-viewport img { + transform: scale(1.04); +} + +.cockpit-vignette-bottom { + position: absolute; + inset: 0; + background: linear-gradient(to top, #0a0e16 0%, rgba(10, 14, 22, 0.35) 45%, transparent 100%); + pointer-events: none; +} + +.cockpit-vignette-side { + position: absolute; + inset: 0; + background: linear-gradient(to right, rgba(10, 14, 22, 0.5) 0%, transparent 50%, rgba(10, 14, 22, 0.35) 100%); + pointer-events: none; +} + +/* Floating HUD elements */ +.hud-apex-badge { + position: absolute; + top: 1rem; + left: 1rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.8rem; + border-radius: 0.5rem; + background: rgba(10, 14, 22, 0.88); + backdrop-filter: blur(14px); + border: 1px solid rgba(58, 73, 75, 0.5); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); +} + +.hud-lean-card { + position: absolute; + top: 4.8rem; + left: 1rem; + width: 210px; + border-radius: 0.85rem; + background: rgba(24, 28, 36, 0.92); + backdrop-filter: blur(16px); + padding: 1rem; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + border: 1px solid rgba(58, 73, 75, 0.4); +} + +.hud-speed-card { + position: absolute; + top: 14rem; + left: 1rem; + width: 210px; + border-radius: 0.85rem; + background: rgba(24, 28, 36, 0.92); + backdrop-filter: blur(16px); + padding: 1rem; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); + border: 1px solid rgba(58, 73, 75, 0.4); +} + +.hud-gps-card { + position: absolute; + bottom: 1.25rem; + right: 1.25rem; + width: 230px; + border-radius: 0.85rem; + background: rgba(10, 14, 22, 0.92); + backdrop-filter: blur(16px); + padding: 1rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); + border: 1px solid rgba(58, 73, 75, 0.45); +} + +@media (max-width: 480px) { + .hud-lean-card { + width: 140px; + top: 3.5rem; + left: 0.75rem; + padding: 0.65rem; + } + .hud-speed-card { + width: 140px; + top: 10.5rem; + left: 0.75rem; + padding: 0.65rem; + } + .hud-gps-card { + width: 155px; + padding: 0.65rem; + bottom: 0.75rem; + right: 0.75rem; + } +} + +@media (max-width: 420px) { + .hud-gps-card { + display: none; + } +} + +/* Metric Strip */ +.telemetry-strip { + width: 100%; + background: #0a0e16; + border-top: 1px solid rgba(58, 73, 75, 0.4); + border-bottom: 1px solid rgba(58, 73, 75, 0.4); + padding: 2rem 0; + position: relative; + z-index: 10; +} + +.metric-strip-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; +} + +@media (max-width: 900px) { + .metric-strip-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 540px) { + .metric-strip-grid { + grid-template-columns: 1fr; + } +} + +.metric-box { + padding: 1.5rem; + border-radius: 0.85rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.25); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: all 0.25s ease; +} + +.metric-box:hover { + background: #1c2028; + border-color: rgba(0, 242, 254, 0.3); + transform: translateY(-2px); +} + +/* Core Pillars Bento Grid */ +.pillars-section { + padding: 4rem 0; +} + +@media (max-width: 768px) { + .pillars-section { + padding: 3.5rem 0; + } +} + +.bento-grid { + display: grid; + grid-template-columns: 1fr; + gap: 1.25rem; + width: 100%; +} + +@media (min-width: 1024px) { + .bento-grid { + grid-template-columns: repeat(12, 1fr); + } +} + +.bento-card { + width: 100%; + min-width: 0; + box-sizing: border-box; + padding: 1.5rem; + border-radius: 1.25rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.3); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 1.5rem; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.bento-card:hover { + border-color: rgba(58, 73, 75, 0.6); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); +} + +@media (min-width: 640px) { + .bento-card { + padding: 2rem; + } +} + +@media (min-width: 1024px) { + .bento-card { + padding: 2.5rem; + } +} + +.bento-card.col-span-12 { + grid-column: 1 / -1; +} + +@media (min-width: 1024px) { + .bento-card.col-span-7, + .bento-grid > .col-span-7 { + grid-column: span 7 / span 7; + } + + .bento-card.col-span-5, + .bento-grid > .col-span-5 { + grid-column: span 5 / span 5; + } +} + +.icon-box { + width: 48px; + height: 48px; + border-radius: 0.75rem; + background: #262a33; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + margin-bottom: 1.5rem; +} + +/* Interactive Lap Breakdown */ +.lap-section-wrapper { + background: rgba(10, 14, 22, 0.85); + padding: 4rem 0; + border-top: 1px solid rgba(58, 73, 75, 0.25); + border-bottom: 1px solid rgba(58, 73, 75, 0.25); +} + +.lap-grid { + display: grid; + grid-template-columns: 5fr 7fr; + gap: 3rem; + align-items: flex-start; +} + +@media (max-width: 1024px) { + .lap-grid { + grid-template-columns: 1fr; + gap: 2.5rem; + } +} + +.lap-tabs { + display: flex; + gap: 0.35rem; + padding: 0.35rem; + border-radius: 0.75rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.3); + margin: 1.25rem 0; +} + +.lap-tab-btn { + flex: 1; + padding: 0.6rem 0.75rem; + border-radius: 0.5rem; + background: transparent; + color: #b9cacb; + border: none; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.lap-tab-btn.active { + background: #262a33; + color: #00f2fe; +} + +.lap-tab-btn:hover:not(.active) { + color: #dfe2ee; +} + +.sector-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-radius: 0.85rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.25); + margin-bottom: 0.65rem; +} + +.graph-card { + border-radius: 1.25rem; + background: #181c24; + padding: 1.75rem; + box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); + border: 1px solid rgba(58, 73, 75, 0.35); + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +/* Testimonials */ +.testimonials-section { + padding: 4rem 0; +} + +.testimonial-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: 3rem; +} + +@media (max-width: 960px) { + .testimonial-grid { + grid-template-columns: 1fr; + } +} + +.testimonial-card { + padding: 2rem; + border-radius: 1.25rem; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.3); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1.75rem; +} + +/* Bottom CTA Banner */ +.bottom-cta-section { + padding: 2rem 0 6rem; +} + +.cta-banner-box { + position: relative; + border-radius: 1.75rem; + background: linear-gradient(135deg, #262a33 0%, #1c2028 50%, #181c24 100%); + padding: 4rem 2rem; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(58, 73, 75, 0.4); + overflow: hidden; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; +} + +@media (max-width: 640px) { + .cta-banner-box { + padding: 2.5rem 1.25rem; + border-radius: 1.25rem; + } +} + +.cta-banner-glow { + position: absolute; + inset: 0; + background: linear-gradient(90deg, rgba(0, 242, 254, 0.08) 0%, rgba(52, 255, 140, 0.08) 100%); + pointer-events: none; +} + +.guarantee-badges { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 2rem; + padding-top: 1rem; + color: #b9cacb; + font-size: 13px; + position: relative; + z-index: 2; +} + +@media (max-width: 640px) { + .guarantee-badges { + gap: 1rem; + } +} + +.badge-item { + display: inline-flex; + align-items: center; + gap: 0.4rem; +} + +/* ========================================================================== + Flagship Footer (Stitch Match) + ========================================================================== */ + +.flagship-footer { + width: 100%; + background-color: #0a0e16; + border-top: 1px solid rgba(58, 73, 75, 0.35); + padding: 4.5rem 0 2.5rem; + color: #b9cacb; +} + +.footer-columns-grid { + display: grid; + grid-template-columns: 2.2fr repeat(4, 1fr); + gap: 2.5rem; + padding-bottom: 3.5rem; + border-bottom: 1px solid rgba(58, 73, 75, 0.25); +} + +@media (max-width: 1024px) { + .footer-columns-grid { + grid-template-columns: repeat(2, 1fr); + } + .footer-brand-col { + grid-column: span 2; + } +} + +@media (max-width: 600px) { + .footer-columns-grid { + grid-template-columns: 1fr; + } + .footer-brand-col { + grid-column: span 1; + } +} + +.footer-brand-col { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.footer-desc { + color: #849495; + font-size: 13.5px; + line-height: 1.6; + margin: 0; + max-width: 320px; +} + +.footer-status-pill { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.35rem 0.85rem; + border-radius: 9999px; + background: #181c24; + border: 1px solid rgba(58, 73, 75, 0.3); + width: fit-content; +} + +.footer-status-pill .status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #00e478; +} + +.footer-link-group h4 { + color: #dfe2ee; + font-family: 'Space Grotesk', sans-serif; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + margin: 0 0 1.25rem; +} + +.footer-link-group ul { + display: flex; + flex-direction: column; + gap: 0.75rem; + list-style: none; + margin: 0; + padding: 0; +} + +.footer-link-group li a { + color: #849495; + font-size: 13.5px; + transition: color 0.2s ease; +} + +.footer-link-group li a:hover { + color: #00f2fe; +} + +.footer-bottom-bar { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 1rem; + padding-top: 2rem; + font-size: 13px; + color: #849495; +} + +.footer-bottom-bar p { + margin: 0; +} + +.footer-sys-info { + display: flex; + gap: 1.5rem; + color: #849495; + font-size: 12px; +} + +/* ========================================================================== + Flagship Layout Refactor (Extracted from Inline Styles) + ========================================================================== */ +.hero-content-col { display: flex; flex-direction: column; gap: 1.5rem; } +.hero-title { margin: 0; color: #dfe2ee; } +.hero-desc { margin: 0; max-width: 580px; } +.hero-actions-row { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; } +.hero-trust-row { display: flex; alignItems: center; gap: 1rem; padding-top: 0.75rem; } +.hero-trust-avatars { display: flex; margin-left: -0.25rem; } +.trust-avatar { + width: 36px; height: 36px; border-radius: 50%; + display: flex; align-items: center; justify-content: center; + box-shadow: 0 2px 6px rgba(0,0,0,0.4); margin-right: -10px; + border: 2px solid #0f131c; +} +.avatar-blue { background: #31353e; color: #00f2fe; } +.avatar-green { background: #262a33; color: #00e478; } +.avatar-cyan { background: #353942; color: #7bd0ff; } +.avatar-count { background: #00f2fe; color: #00373a; font-family: 'Space Grotesk'; font-size: 11px; font-weight: bold; } +.hero-trust-text { display: flex; flex-direction: column; } +.status-dot-green { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00e478; } +.hud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } +.hud-value-row { display: flex; align-items: baseline; gap: 6px; } +.hud-progress-bg { width: 100%; height: 7px; background: #31353e; border-radius: 9999px; overflow: hidden; margin-top: 6px; } +.hud-progress-bar { height: 100%; border-radius: 9999px; } +.lean-progress { width: 88%; background: linear-gradient(90deg, #00f2fe, #00dce6, #34ff8c); } +.hud-footer { display: flex; justify-content: space-between; margin-top: 4px; } +.hud-lateral-box { display: flex; justify-content: space-between; align-items: center; background: rgba(10, 14, 22, 0.5); border-radius: 6px; padding: 4px 8px; margin-top: 8px; } +.hud-header-title { display: flex; align-items: center; gap: 5px; } +.hud-detail-row { display: flex; justify-content: space-between; margin-top: 6px; } + +.metric-box-header { display: flex; justify-content: space-between; align-items: center; } +.metric-box-content { margin-top: 0.75rem; } +.metric-box-desc { margin: 4px 0 0; } + +.pillars-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 3rem; } +.pill-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; margin-bottom: 10px; } +.pillars-desc { margin: 0; max-width: 440px; } +.bento-icon { font-size: 26px; } +.bento-title { margin: 6px 0 12px; color: #dfe2ee; } +.bento-desc { margin: 0 0 2rem; max-width: 580px; } +.bento-desc-short { margin: 0 0 2rem; } +.bento-inner-card { border-radius: 0.75rem; background: #0a0e16; padding: 1rem 1.25rem; border: 1px solid rgba(58, 73, 75, 0.3); box-sizing: border-box; } +.bento-inner-inset { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); } +.bento-inner-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(58, 73, 75, 0.25); gap: 0.5rem; } +.bento-stats-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 0.75rem; } +.bento-stats-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem; box-sizing: border-box; } +.bento-stat-box { background: #1c2028; padding: 0.5rem 0.25rem; border-radius: 0.5rem; } +.bento-flex-between { display: flex; justify-content: space-between; } +.bento-flex-row { display: flex; flex-direction: row; } +.bento-progress-bar-container { display: flex; gap: 4px; height: 10px; border-radius: 9999px; overflow: hidden; background: #31353e; } +.bento-progress-bar-fill { border-radius: 9999px; } +.bento-icon-box { width: 40px; height: 40px; border-radius: 0.5rem; background: #262a33; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } +.bento-text-col { display: flex; flex-direction: column; min-width: 0; } + +.lap-left-col { display: flex; flex-direction: column; gap: 1.25rem; } +.sector-list { display: flex; flex-direction: column; } +.sector-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(58, 73, 75, 0.25); } +.sector-row:last-child { border-bottom: none; } +.sector-info { display: flex; align-items: center; gap: 12px; } +.sector-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } +.sector-dot-small { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } +.graph-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(58, 73, 75, 0.3); padding-bottom: 0.75rem; } +.graph-header-left { display: flex; align-items: center; gap: 10px; } +.graph-badge { padding: 2px 8px; border-radius: 4px; } +.graph-svg-container { border-radius: 0.75rem; padding: 1.25rem; position: relative; overflow: hidden; border: 1px solid rgba(58, 73, 75, 0.25); } +.graph-svg-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } +.graph-svg-footer { display: flex; justify-content: space-between; margin-top: 8px; gap: 4px; overflow: hidden; } + +.testimonial-card { background: #0a0e16; border: 1px solid rgba(58, 73, 75, 0.3); border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } +.testimonial-content { display: flex; flex-direction: column; gap: 0.75rem; } +.testimonial-stars { display: flex; } +.testimonial-author-row { padding-top: 1rem; border-top: 1px solid rgba(58, 73, 75, 0.25); display: flex; align-items: center; gap: 12px; } +.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; font-family: 'Space Grotesk'; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; } +.testimonial-author-info { display: flex; flex-direction: column; } + +.cta-banner-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background: #0a0e16; position: relative; z-index: 2; } +.cta-banner-title { max-width: 640px; position: relative; z-index: 2; } +.cta-banner-desc { max-width: 580px; position: relative; z-index: 2; } +.cta-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding-top: 0.75rem; position: relative; z-index: 2; } + +/* Utility classes mapped from style objects */ +.text-ink { color: #dfe2ee; } +.text-muted { color: #849495; } +.text-muted-blue { color: #b9cacb; } +.bg-surface-lowest { background: #0a0e16; } +.bg-surface-container { background: #1c2028; } +.bg-surface-highest { background: #31353e; } +.bg-surface-bright { background: #353942; } +.bg-green-accent { background: #60ff98; } +.bg-cyan-accent { background: #00f2fe; } +.bg-blue-accent { background: #7bd0ff; } +.m-0 { margin: 0; } +.max-w-md { max-width: 440px; } +.w-fit { width: fit-content; } +.w-35 { width: 35%; } +.w-30 { width: 30%; } +.items-center { align-items: center; } +.justify-between { justify-content: space-between; } +.flex { display: flex; } +.gap-1rem { gap: 1rem; } +.gap-6px { gap: 6px; } +.mt-2px { margin-top: 2px; } +.mt-10px { margin-top: 10px; } +.mb-8px { margin-bottom: 8px; } +.mb-10px { margin-bottom: 10px; } +.whitespace-nowrap { white-space: nowrap; } +.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.shrink-0 { flex-shrink: 0; } +.block { display: block; } +.icon-md { font-size: 20px; } +.icon-sm { font-size: 16px; } +.icon-bold { font-size: 20px; font-weight: bold; } +.italic { font-style: italic; } + diff --git a/website/app/group-rides/page.tsx b/website/app/group-rides/page.tsx new file mode 100644 index 0000000..e6dfaf3 --- /dev/null +++ b/website/app/group-rides/page.tsx @@ -0,0 +1,591 @@ +'use client'; + +import React from 'react'; +import Link from 'next/link'; + +export default function GroupRidesPage() { + return ( +
+
+{/* Dynamic Atmospheric Glow Background Layers */} +
+
+
+{/* Hero Section */} +
+
+{/* Eyebrow Badge */} +
+ + + + +LIVE PACK RADAR & FORMATION TELEMETRY +
+{/* Headline */} +

+ Ride in pack formation.
+Never lose a wingman. +

+{/* Subheading */} +

+ Real-time rider radar, staggered formation spacing alerts, instant incident broadcast, and automated regroup checkpoints calibrated for fast canyon runs and transcontinental tours. +

+{/* Dual CTAs & Quick Metrics Bar */} +
+ + +
+
+
+{/* Interactive Live Pack Radar Map & Dashboard */} +
+
+{/* Tactical Header Strip */} +
+
+
+ +SWARM RECON: SKYLINE BLVD > COAST HWY +
+SESSION #CA-84-SW +
+
+ + cell_tower MESH ACTIVE + +● 6 SYNCHRONIZED +GAP DELTA: ±0.4s +REPAIR SQUAD: READY +
+
+{/* Cockpit Layout: Map & Radar Feed */} +
+{/* Tactical Canvas & Radar Screen */} +
+{/* Map background placeholder with tactical overlay styling */} +
+{/* Tactical Coordinate Grids (Inline SVG Overlay) */} + + + + + + + + +{/* Tactical Route Trace */} + +{/* Safe Spacing Buffers */} + + + + + + + +{/* Map HUD Top Left: Sector Status */} +
+
+FORMATION PROFILE +STAGGERED DUAL COLUMN [B] +PACELINE LOCK: OPTIMAL +
+{/* Map HUD Top Right: Telemetry Ping */} +
+
+GPS FREQUENCY +10.0 Hz • GNSS LOCK +
+satellite_alt +
+
+{/* Visual Pin Indicators plotted across the canyon trace */} +
+{/* Lead Rider Marker */} +
+ +1 • ApexLead +68 MPH +
+{/* Hard Braking Warning Marker (Rider 5) */} +
+warning +5 • Alex_Ducati +-1.2G DECEL +
+
+{/* Map HUD Bottom Control Strip */} +
+
+ + + +
+
+REGROUP POINT +Alice's Restaurant (14.8 mi) +
+
+
+{/* Live Swarm Nodes Telemetry Column */} +
+
+PACK TELEMETRY STREAM +6 ACTIVE +
+{/* Rider 1: ApexLead */} +
+
+
+ +ApexLead +Pace Setter +
+LEAD +
+
+
SPEED: 68 MPH
+
LEAN: 42°
+
THROTTLE: 78%
+
+
+{/* Rider 2: Ghost99 */} +
+
+
+ +Ghost99 +Wingman L +
++45m GAP +
+
+
SPEED: 67 MPH
+
LEAN: 40°
+
BRAKE: 0%
+
+
+{/* Rider 3: Sarah_RR (Warning: Tire Pressure) */} +
+
+
+
+ +Sarah_RR +Wingman R +
++110m GAP +
+
+
+tire_repair +ALERT: REAR TIRE 28 PSI (LOW) +
+
+
+{/* Rider 4: Dan_KTM */} +
+
+
+ +Dan_KTM +Mid Pack +
++180m GAP +
+
+
SPEED: 63 MPH
+
LEAN: 28°
+
TEMP: 88°C
+
+
+{/* Rider 5: Alex_Ducati (Yellow Flag: Hard Braking) */} +
+
+
+
+ +Alex_Ducati +DECEL EVENT +
++320m GAP +
+
+HARD BRAKING (-1.2G) +ABS: ENGAGED +
+
+{/* Rider 6: Sweep_Marshal */} +
+
+
+ +Sweep_Marshal +Rear Guard +
++450m GAP +
+
+
SPEED: 59 MPH
+
RADIO: OPEN
+
PACK LOCK: 100%
+
+
+
+
+{/* Formation Safety Metrics Panel Strip */} +
+{/* Metric 1: Spacing Integrity */} +
+
+SPACING INTEGRITY +verified +
+
+94% +SAFETY INDEX +
+
+
+
+
+{/* Metric 2: Average Pack Speed */} +
+
+AVERAGE PACK VELOCITY +speed +
+
+64.2 +MPH +
+DELTA DRIFT: -1.8 MPH (TIGHTENING) +
+{/* Metric 3: Atmospheric & Track Conditions */} +
+
+SURFACE & CLIMATE +thermostat +
+
+21°C +DRY ASPHALT +
+0% PRECIP • GRIP OPTIMAL +
+{/* Metric 4: Next Regroup Waypoint */} +
+
+REGROUP POINT +pin_drop +
+
+14.8 +MILES +
+ALICE'S RESTAURANT CHECKPOINT +
+
+
+
+{/* Group Ride Features Grid */} +
+
+COCKPIT ARCHITECTURE +

ENGINEERED FOR SQUADRON COHESION

+

High-frequency mesh communications keep the entire formation synchronized through blind apexes, switchbacks, and offline mountain passes.

+
+
+{/* Feature 1 */} +
+
+
+spatial_audio_off +
+01 / PACELINE AUDIT +

Staggered Paceline Warnings

+

+ Spatial audio HUD chimes dynamically sound whenever rider follow distance or lane positioning falls beneath calculated emergency stopping thresholds. +

+
+
+RESPONSE: <12ms +arrow_forward +
+
+{/* Feature 2 */} +
+
+
+fmd_bad +
+02 / SWARM BROADCAST +

Crash & Separation Alerts

+

+ Autonomous IMU-based impact detection pings the entire pack instantly. Visual yellow and red telemetry flags highlight precise coordinates for immediate regrouping. +

+
+
+IMU SENSING: 6-AXIS +arrow_forward +
+
+{/* Feature 3 */} +
+
+
+hub +
+03 / OFFLINE LINK +

Peer-to-Peer Mesh Sync

+

+ 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. +

+
+
+ZERO-CELL READY +arrow_forward +
+
+{/* Feature 4 */} +
+
+
+history_toggle_off +
+04 / MISSION DEBRIEF +

Group Replay & Debrief

+

+ Relive the ride with synced multi-bike timelines. Compare apex apex entries, sector speeds, and individual lean angles on an interactive 3D map renderer. +

+
+
+3D REPLAY ENGINE +arrow_forward +
+
+
+
+{/* Visual Divider / Action Interstitial */} +
+
+
+
+
+HARDWARE COMPATIBILITY +

Sync directly with your helmet comms & bike dash

+

+ Integrates seamlessly with Cardo, Sena, Apple Watch, and OBD-II CAN bus links for live peg-to-peg data overlays. +

+
+
+
+headset_mic +CARDO / SENA HUD +
+
+watch +HAPTIC ALERTS +
+
+
+
+
+{/* Active Public & Regional Group Rides Directory */} +
+
+
+REGIONAL OPERATIONS +

Active & Upcoming Pack Runs

+
+{/* Filter Toggles */} +
+ + + + +
+
+{/* Search and Region Filters Bar */} +
+
+search + +
+
+SORT BY: +START TIME ↓ +
+
+{/* Rides Cards Grid */} +
+{/* Ride 1 */} +
+
+
+
+
+
+ SATURDAY • 06:30 AM PST +
+
+ TRACK PACE +
+
+
+
+SAN FRANCISCO, CA +82.4 MILES +
+

Bay Area Dawn Patrol

+

+ Fast sweepers from Woodside down to San Gregorio beach before morning traffic. Strict staggered formation enforced. +

+
+
+
AL
+Lead: ApexLead +
+
+group +14/16 RIDERS +
+
+
+
+
+ +
+
+{/* Ride 2 */} +
+
+
+
+
+
+ SUNDAY • 07:15 AM PST +
+
+ BRISK PACE +
+
+
+
+MALIBU, CA +64.0 MILES +
+

Malibu Canyons Fast Pace

+

+ Tuna Canyon descent to Latigo Canyon technical curves. Regroup checkpoint planned at Rock Store overlook. +

+
+
+
DK
+Lead: Dan_KTM +
+
+group +9/12 RIDERS +
+
+
+
+
+ +
+
+{/* Ride 3 */} +
+
+
+
+
+
+ FRI-SUN • OCT 12-14 +
+
+ ENDURANCE / CHILL +
+
+
+
+ROBBINSVILLE, NC +318 CURVES +
+

Tail of the Dragon Run

+

+ 11 miles, 318 technical curves. Telemetry debrief sessions every evening with custom apex analysis and gear logs. +

+
+
+
SM
+Lead: Sweep_Marshal +
+
+group +FULL (24/24) +
+
+
+
+
+ +
+
+
+
+{/* Modal: Join Code Trigger Overlay (Interactive Script Attached) */} +
+
+
+
+qr_code_scanner +

Join Pack Formation

+
+ +
+

+ Enter the 6-character encrypted ride code generated by your Lead Pace Setter or scan their cockpit radar QR display. +

+
+ +
+ +OR SCAN CAMERA + +
+
+photo_camera +ACTIVATE RADAR LENS +
+
+ +
+
+
+ +
+
+ ); +} diff --git a/website/app/page.tsx b/website/app/page.tsx index f6c57c8..74b4194 100644 --- a/website/app/page.tsx +++ b/website/app/page.tsx @@ -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 <> -
- Motorcycle telemetry, made useful -

Know what your ride is doing.

-

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.

-
Create your accountExplore features
-
-
-

Live cockpit

Speed, lean angle, G-force, GPS status, and ride state in one rider-first dashboard.

-

Ride intelligence

Review distance, speed, performance launches, route context, and telemetry summaries after every ride.

-

Built for trust

Your account, sessions, vehicles, and ride data stay behind authenticated HTTPS APIs.

-
- ; + return ( +
+ + + + + + +
+ ); } diff --git a/website/components/landing/CtaSection.tsx b/website/components/landing/CtaSection.tsx new file mode 100644 index 0000000..67fd7b8 --- /dev/null +++ b/website/components/landing/CtaSection.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import Link from 'next/link'; + +export default function CtaSection() { + return ( +
+
+
+
+
+ START ELEVATING YOUR APEX +
+

+ Ready to unlock your bike's true potential? +

+

+ Join over 14,000 riders tracking every corner, straightaway, and track day with surgical precision. +

+ +
+ + Start Free 30-Day Trial + + bolt + + + + + memory + + Order OBD-II / CAN Telemetry Link + +
+ +
+
+ + verified + + No hardware lock-in +
+
+ + phone_iphone + + Works with iOS & Android +
+
+ + security + + FIM & Track standard export +
+
+
+
+
+ ); +} diff --git a/website/components/landing/HeroSection.tsx b/website/components/landing/HeroSection.tsx new file mode 100644 index 0000000..645a491 --- /dev/null +++ b/website/components/landing/HeroSection.tsx @@ -0,0 +1,148 @@ +import React from 'react'; +import Link from 'next/link'; + +export default function HeroSection() { + return ( +
+
+
+
+
+ {/* Hero Copy */} +
+
+ + + + + + ⚡ NEXT-GEN TELEMETRY ENGINE 3.0 • REAL-TIME CAN-BUS & GPS + +
+ +

+ Know what your
+ ride is doing. +

+ +

+ 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. +

+ +
+ + Create your account + arrow_forward + + + play_circle + Explore features + + + View Live Demo + +
+ + {/* Trust Avatars & Proof */} +
+
+
+ sports_motorsports +
+
+ speed +
+
+ timeline +
+
+ +420 +
+
+
+ + Trusted by 14,800+ riders + + Across 420+ racing clubs & track leagues worldwide +
+
+
+ + {/* Hero Cockpit Showcase Visual */} +
+
+ Motorcycle leaning into high speed curve with glowing cyan digital telemetry cockpit overlay +
+
+ + {/* Top Badge: Apex Vector Locked */} +
+ + APEX VECTOR LOCKED + | CAN-BUS 100Hz +
+ + {/* Floating HUD 1: Lean Angle */} +
+
+ LEAN ANGLE + LIVE +
+
+ 54° + LEFT +
+
+
+
+
+ 0° + PEAK 58° +
+
+ + {/* Floating HUD 2: Velocity & G-Force */} +
+
+ VELOCITY & G-FORCE + speed +
+
+ 158 + MPH +
+
+ LATERAL + +1.82 G +
+
+ + {/* Bottom Right Floating HUD 3: GPS Multi-band */} +
+
+
+ satellite_alt + GPS MULTI-BAND +
+ 10Hz LOCK +
+
+ SYNC LATENCY + 12ms +
+
+ SAT IN VIEW + 24 SATS +
+
+
+
+
+
+
+ ); +} diff --git a/website/components/landing/InteractiveLapSection.tsx b/website/components/landing/InteractiveLapSection.tsx new file mode 100644 index 0000000..c35c106 --- /dev/null +++ b/website/components/landing/InteractiveLapSection.tsx @@ -0,0 +1,206 @@ +'use client'; + +import React, { useState } from 'react'; + +export default function InteractiveLapSection() { + const [activeTab, setActiveTab] = useState<'lap7' | 'lap6' | 'delta'>('lap7'); + + return ( +
+
+
+ {/* Left Column: Sector Delta Details */} +
+
+ SECTOR TELEMETRY BREAKDOWN +
+

+ Analyze lap deltas with surgical telemetry. +

+

+ 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. +

+ + {/* Lap Tab Controls */} +
+ + + +
+ + {/* Sector Performance List */} +
+
+
+ +
+ + Sector 1: Turn 1-4 Complex + + Brake marker +8m deeper +
+
+ + -0.21s + +
+ +
+
+ +
+ + Sector 2: Main Straightaway + + Top exit speed 162.4 MPH +
+
+ + -0.14s + +
+ +
+
+ +
+ + Sector 3: The Carousel + + Consistent 52° lean sustained +
+
+ + -0.07s + +
+
+
+ + {/* Right Column: Telemetry Graph & SVG Trace */} +
+
+
+ + Laguna Seca Circuit + + + DRY • 24°C + +
+
+ + DELTA: {activeTab === 'lap7' ? '-0.42s' : activeTab === 'lap6' ? '+0.12s' : '-0.533s'} +
+
+ + {/* Inline SVG Wave Graph */} +
+
+ SPEED (MPH) & THROTTLE % + BLUE: SPEED | GREEN: THROTTLE +
+ + + + + + + + + {/* Horizontal grid lines */} + + + + + {/* Speed Area and Line */} + + + + {/* Throttle Trace Line */} + + + {/* Apex Marker */} + + + +
+ T1 (Andretti) + T6 + Corkscrew (Apex) + T11 +
+
+ + {/* Bottom Mini Readouts */} +
+
+ + PEAK DECEL + + + -1.42 G + +
+
+ + ROLL RATE + + + 64°/s + +
+
+ + DISTANCE + + + 2.238 MI + +
+
+
+
+
+
+ ); +} diff --git a/website/components/landing/PillarsSection.tsx b/website/components/landing/PillarsSection.tsx new file mode 100644 index 0000000..c092cd1 --- /dev/null +++ b/website/components/landing/PillarsSection.tsx @@ -0,0 +1,206 @@ +import React from 'react'; + +export default function PillarsSection() { + return ( +
+
+
+
+
+ ENGINEERED ARCHITECTURE +
+

+ Built for extreme lean angles & split-second decisions. +

+
+

+ A bespoke telemetry suite connecting ECU sensors, gyroscopes, and track positioning straight to riders + and crew chiefs. +

+
+ +
+ {/* Pillar 1: Live Cockpit & Handlebar HUD */} +
+
+
+ + dashboard_customize + +
+ 01 / REAL-TIME STREAM +

+ Live Cockpit & Handlebar HUD +

+

+ 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. +

+
+ +
+
+ + PITCH / ROLL / THROTTLE METRICS + + + 60 FPS BUFFER + +
+
+
+ + THROTTLE + + + 94% + +
+
+ + FRONT BRAKE + + + 18.4 BAR + +
+
+ + LEAN BIAS + + + R 48.2° + +
+
+
+
+ + {/* Pillar 2: Ride Intelligence & Session Replay */} +
+
+
+ + analytics + +
+ 02 / DEEP TELEMETRY +

+ Ride Intelligence & Session Replay +

+

+ 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. +

+
+ +
+
+ SECTOR 1 (-0.18s) + SECTOR 2 (-0.24s) +
+
+
+
+
+
+
+ + OPTIMAL LAP + + + 1:34.288 + +
+
+
+ + {/* Pillar 3: Club Telemetry & Fleet Beacon */} +
+
+
+ + emergency + +
+ 03 / SAFETY & SQUAD +

+ Club Telemetry & Fleet Beacon +

+

+ Live pack radar tracking, automatic crash detection beacon with SOS emergency dispatch, and + competitive leaderboards with verified telemetry data. +

+
+ +
+
+ satellite +
+
+ + Automated SOS Crash Beacon + + Accelerometer impact trigger <150ms +
+
+
+ + {/* Pillar 4: Zero-Friction Hardware & Security */} +
+
+
+ + memory + +
+ 04 / HARDWARE AGNOSTIC +

+ Zero-Friction Hardware & Security +

+

+ 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. +

+
+ +
+
+ + OBD-II CAN + + + 500 kbps + +
+
+ + BLUETOOTH + + + BLE 5.3 + +
+
+ + ENCRYPTION + + + AES-256 + +
+
+ + LOCAL CACHE + + + Offline 100% + +
+
+
+
+
+
+ ); +} diff --git a/website/components/landing/TelemetryStrip.tsx b/website/components/landing/TelemetryStrip.tsx new file mode 100644 index 0000000..4b6d670 --- /dev/null +++ b/website/components/landing/TelemetryStrip.tsx @@ -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 ( +
+
+
+
+
+ + ACTIVE NETWORK + + + hub + +
+
+
+ {riderCount.toLocaleString()}+ +
+

+ Connected Live Riders +

+
+
+ +
+
+ + DATABASE DEPTH + + + route + +
+
+
+ 3.2M+ +
+

+ Track Miles Analyzed +

+
+
+ +
+
+ + PEAK DYNAMICS + + + airline_stops + +
+
+
58°
+

+ Max Recorded Lean Angle +

+
+
+ +
+
+ + HARDWARE SAMPLING + + + timer + +
+
+
0.01s
+

+ Telemetry Precision Sync +

+
+
+
+
+
+ ); +} diff --git a/website/components/landing/TestimonialsSection.tsx b/website/components/landing/TestimonialsSection.tsx new file mode 100644 index 0000000..9449a77 --- /dev/null +++ b/website/components/landing/TestimonialsSection.tsx @@ -0,0 +1,104 @@ +import React from 'react'; + +export default function TestimonialsSection() { + return ( +
+
+
+
+ RACED ON TRACK & CANYONS +
+

+ Validated by racers, coaches & road captains. +

+
+ +
+ {/* Testimonial 1 */} +
+
+
+ {[...Array(5)].map((_, i) => ( + + star + + ))} +
+

+ "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." +

+
+
+
+ DR +
+
+ + Dave Rossi + + Lead Coach, Apex Pro Track School +
+
+
+ + {/* Testimonial 2 */} +
+
+
+ {[...Array(5)].map((_, i) => ( + + star + + ))} +
+

+ "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." +

+
+
+
+ MK +
+
+ + Maya Kovacs + + Founder, Bay Area Moto Collective +
+
+
+ + {/* Testimonial 3 */} +
+
+
+ {[...Array(5)].map((_, i) => ( + + star + + ))} +
+

+ "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." +

+
+
+
+ TJ +
+
+ + Tyler Jenkins + + MotoAmerica Supersport Competitor +
+
+
+
+
+
+ ); +}