521 lines
33 KiB
TypeScript
521 lines
33 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function PricingPage() {
|
|
const [billingCycle, setBillingCycle] = useState<'monthly' | 'annual'>('annual');
|
|
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
|
|
|
const toggleFaq = (index: number) => {
|
|
setOpenFaq((prev) => (prev === index ? null : index));
|
|
};
|
|
|
|
return (
|
|
<div className="flagship-page text-on-surface bg-surface min-h-screen">
|
|
<div hidden>
|
|
{/* Subtle Ambient Glow Orbs */}
|
|
<div className="relative w-full overflow-hidden">
|
|
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[720px] h-[380px] bg-primary-container/10 blur-[130px] pointer-events-none rounded-full"></div>
|
|
<div className="absolute top-96 right-10 w-[420px] h-[280px] bg-secondary-fixed/5 blur-[100px] pointer-events-none rounded-full"></div>
|
|
{/* Editorial Header / Value Proposition */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl pb-space-3xl relative z-10">
|
|
<div className="flex flex-col items-center text-center max-w-3xl mx-auto">
|
|
{/* Eyebrow Badge */}
|
|
<div className="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container-high text-primary-fixed-dim shadow-sm mb-space-md">
|
|
<span className="material-symbols-outlined text-[15px] font-bold text-primary-container">speed</span>
|
|
<span className="font-label-caps text-label-caps tracking-wide">Transparent Telemetry Plans</span>
|
|
</div>
|
|
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight mb-space-md">
|
|
Pro telemetry. <br className="hidden sm:inline"/>No hidden fees. <span className="text-primary-container">Ride free forever.</span>
|
|
</h1>
|
|
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-space-xl">
|
|
From weekend canyon carving to MotoAmerica championship telemetry. Choose software-only with your smartphone sensors or unlock deep ECU analytics with our OBD-II plug-and-play link.
|
|
</p>
|
|
{/* Billing Switcher */}
|
|
<div className="flex flex-col sm:flex-row items-center gap-space-md bg-surface-container-lowest p-space-xs rounded-full shadow-md">
|
|
<div className="flex items-center p-1 bg-surface-container rounded-full" role="group" aria-label="Billing frequency toggle">
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingCycle('monthly')}
|
|
className={`px-space-md py-2 rounded-full font-label-md text-label-md min-h-[44px] transition-all cursor-pointer ${
|
|
billingCycle === 'monthly'
|
|
? 'bg-primary-container text-on-primary-container shadow-sm font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
id="billing-monthly-btn"
|
|
aria-pressed={billingCycle === 'monthly'}
|
|
>
|
|
Monthly Billing
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingCycle('annual')}
|
|
className={`px-space-md py-2 rounded-full font-label-md text-label-md min-h-[44px] transition-all cursor-pointer ${
|
|
billingCycle === 'annual'
|
|
? 'bg-primary-container text-on-primary-container shadow-sm font-bold'
|
|
: 'text-on-surface-variant hover:text-on-surface'
|
|
}`}
|
|
id="billing-annual-btn"
|
|
aria-pressed={billingCycle === 'annual'}
|
|
>
|
|
Annual Billing
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs px-space-sm py-1.5 bg-secondary-fixed/15 text-secondary-fixed rounded-full">
|
|
<span className="material-symbols-outlined text-[16px]">redeem</span>
|
|
<span className="font-label-caps text-label-caps">Save 25% + Free OBD-II Dongle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Pricing Matrix (3 Core Software Tiers) */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-space-lg items-stretch">
|
|
{/* Tier 1: Free Rider */}
|
|
<div className="flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-low shadow-md transition-all duration-300 hover:shadow-xl">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-sm">
|
|
<span className="font-label-caps text-label-caps text-on-surface-variant tracking-wide">Baseline Level</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container text-outline font-code-mono text-code-mono">Tier 01</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Free Rider</h3>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Instant heads-up instrumentation using native phone accelerometers.</p>
|
|
<div className="flex items-baseline gap-space-2xs mb-space-xl">
|
|
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">$0</span>
|
|
<span className="font-body-md text-body-md text-outline">/ forever</span>
|
|
</div>
|
|
{/* Features List */}
|
|
<ul className="flex flex-col gap-space-sm mb-space-xl">
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span>Smartphone IMU & GPS telemetry (1Hz)</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span>Live lean angle & speed HUD interface</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span>Max 3 recorded ride logs in history cache</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span>Standard community group rides</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
|
|
<span>Basic SOS manual emergency dispatch</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-outline font-body-sm text-body-sm opacity-50">
|
|
<span className="material-symbols-outlined text-[18px] mt-0.5">cancel</span>
|
|
<span>CAN-bus throttle & brake pressure</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-outline font-body-sm text-body-sm opacity-50">
|
|
<span className="material-symbols-outlined text-[18px] mt-0.5">cancel</span>
|
|
<span>400+ circuit lap timing sectors</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a className="w-full text-center py-3 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm transition-colors shadow-sm" data-path="create-account" href="/account">
|
|
Get Started Free
|
|
</a>
|
|
</div>
|
|
{/* Tier 2: Pro Telemetry (Highlighted Hero) */}
|
|
<div className="relative flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-high shadow-2xl -mt-0 lg:-mt-4 mb-0 lg:-mb-4 z-20 overflow-hidden">
|
|
{/* Top Cyber Radiant Stroke Accent */}
|
|
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-primary-container via-primary-fixed to-secondary-fixed"></div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-sm">
|
|
<span className="px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-caps text-label-caps tracking-wide font-bold">Recommended</span>
|
|
<div className="flex items-center gap-space-2xs text-secondary-fixed">
|
|
<span className="relative flex h-2 w-2">
|
|
<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 w-2 bg-secondary-fixed-dim"></span>
|
|
</span>
|
|
<span className="font-code-mono text-code-mono">Apex Sync</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Pro Telemetry</h3>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Full multi-sensor acquisition engine with precision ECU CAN metrics.</p>
|
|
<div className="flex items-baseline gap-space-2xs mb-space-xs">
|
|
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary-container" id="pro-price">
|
|
{billingCycle === 'annual' ? '$10' : '$14'}
|
|
</span>
|
|
<span className="font-body-md text-body-md text-on-surface-variant" id="pro-period">/ month</span>
|
|
</div>
|
|
<p className="font-code-mono text-code-mono text-secondary-fixed mb-space-lg" id="pro-subtext">
|
|
{billingCycle === 'annual'
|
|
? 'Billed annually ($120/yr) • Includes FREE OBD-II Link'
|
|
: 'Billed monthly ($14/mo) • OBD-II Link separate'}
|
|
</p>
|
|
{/* Sparkline Visual Component */}
|
|
<div className="p-space-sm rounded-lg bg-surface-container-lowest mb-space-lg">
|
|
<div className="flex items-center justify-between text-on-surface-variant mb-space-2xs">
|
|
<span className="font-label-caps text-label-caps text-primary-fixed-dim">Apex Sampling Trace</span>
|
|
<span className="font-code-mono text-code-mono text-secondary-fixed font-bold">10Hz Multi-GNSS</span>
|
|
</div>
|
|
<svg className="w-full h-9 text-primary-container" fill="none" preserveAspectRatio="none" viewBox="0 0 300 40">
|
|
<path d="M0 35 L30 30 L55 33 L85 14 L115 19 L145 5 L175 22 L205 8 L235 25 L265 12 L300 4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"></path>
|
|
<path d="M0 35 L30 30 L55 33 L85 14 L115 19 L145 5 L175 22 L205 8 L235 25 L265 12 L300 4 L300 40 L0 40 Z" fill="currentColor" fill-opacity="0.08"></path>
|
|
</svg>
|
|
</div>
|
|
{/* Features List */}
|
|
<ul className="flex flex-col gap-space-sm mb-space-xl">
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
|
|
<span>10Hz Multi-GNSS satellite lock & 60fps high-refresh HUD</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
|
|
<span>Full 6-axis IMU gyro analytics (pitch, roll, yaw, lateral Gs)</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
|
|
<span>Unlimited cloud ride history & 3D sector replay</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
|
|
<span>Automatic crash impact beacon (<150ms trigger)</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
|
|
<span>Advanced Pack Radar with peer-to-peer mesh synchronization</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px] mt-0.5">electric_bolt</span>
|
|
<span>OBD-II & CAN-bus live data (RPM, throttle %, brake psi, gear)</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px] mt-0.5">flag</span>
|
|
<span>Track day mode with 400+ circuit lap timing & sector splits</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a className="w-full text-center py-3.5 px-space-md rounded-lg 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>
|
|
</div>
|
|
{/* Tier 3: Club & Racing Team */}
|
|
<div className="flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-low shadow-md transition-all duration-300 hover:shadow-xl">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-sm">
|
|
<span className="font-label-caps text-label-caps text-on-surface-variant tracking-wide">Fleet & Competition</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container text-tertiary-fixed-dim font-code-mono text-code-mono">Multi-Rider</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Club & Racing Team</h3>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Telemetry command headquarters for racing teams, riding clubs, and marshals.</p>
|
|
<div className="flex items-baseline gap-space-2xs mb-space-xs">
|
|
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface" id="club-price">
|
|
{billingCycle === 'annual' ? '$40' : '$49'}
|
|
</span>
|
|
<span className="font-body-md text-body-md text-outline" id="club-period">/ month</span>
|
|
</div>
|
|
<p className="font-code-mono text-code-mono text-on-surface-variant mb-space-xl" id="club-subtext">
|
|
{billingCycle === 'annual'
|
|
? 'Billed annually ($490/yr) • Up to 15 racers'
|
|
: 'Billed monthly ($49/mo) • Up to 15 racers'}
|
|
</p>
|
|
{/* Features List */}
|
|
<ul className="flex flex-col gap-space-sm mb-space-xl">
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">groups</span>
|
|
<span>Everything in Pro for up to 15 team riders</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">analytics</span>
|
|
<span>Central club marshal & paddock tactical dashboard</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">leaderboard</span>
|
|
<span>Private sector leaderboards & verified lap telemetry</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">download</span>
|
|
<span>Export FIM-compliant CSV/KML data for crew chiefs</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">podium</span>
|
|
<span>Live pit-lane spectator broadcast link & delta map</span>
|
|
</li>
|
|
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">support_agent</span>
|
|
<span>Dedicated priority engineering telemetry support</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Link
|
|
className="w-full text-center py-3 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm transition-colors shadow-sm"
|
|
data-path="clubs"
|
|
href="/clubs/manage"
|
|
>
|
|
Open Founder Portal
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Telemetry Precision Metrics Matrix */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
|
|
<div className="p-space-xl rounded-xl bg-surface-container-lowest shadow-md">
|
|
<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-container tracking-wide">Architectural Comparison</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Full Feature Telemetry Breakdown</h2>
|
|
</div>
|
|
<div className="font-code-mono text-code-mono text-outline">
|
|
SPEC STANDARD: ISO-11898 CAN 2.0B
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left font-body-sm text-body-sm">
|
|
<thead>
|
|
<tr className="bg-surface-container-low text-on-surface">
|
|
<th className="p-space-md font-label-caps text-label-caps">Telemetry Capability</th>
|
|
<th className="p-space-md font-label-caps text-label-caps">Free Rider</th>
|
|
<th className="p-space-md font-label-caps text-label-caps text-primary-container">Pro Telemetry</th>
|
|
<th className="p-space-md font-label-caps text-label-caps text-tertiary-fixed-dim">Club & Team</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-none text-on-surface-variant">
|
|
<tr className="hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Sampling Frequency</td>
|
|
<td className="p-space-md font-code-mono text-code-mono">1 Hz (Phone GPS)</td>
|
|
<td className="p-space-md font-code-mono text-code-mono text-primary-container font-bold">10 Hz Multi-GNSS</td>
|
|
<td className="p-space-md font-code-mono text-code-mono text-primary-container font-bold">10 Hz + 100Hz IMU</td>
|
|
</tr>
|
|
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Lean Angle & G-Force Trace</td>
|
|
<td className="p-space-md">Realtime HUD only</td>
|
|
<td className="p-space-md text-on-surface">Stored per millisecond</td>
|
|
<td className="p-space-md text-on-surface">Multi-rider overlay compare</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">ECU Diagnostics & CAN Data</td>
|
|
<td className="p-space-md text-outline">None</td>
|
|
<td className="p-space-md text-secondary-fixed">Throttle, RPM, Brake, Gear</td>
|
|
<td className="p-space-md text-secondary-fixed">Raw CAN logging & PID maps</td>
|
|
</tr>
|
|
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Circuit Lap Timing & Deltas</td>
|
|
<td className="p-space-md text-outline">Manual start/stop</td>
|
|
<td className="p-space-md text-on-surface">400+ GPS micro-sectors</td>
|
|
<td className="p-space-md text-on-surface">Team Live Pit Deltas</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Ride History Cloud Storage</td>
|
|
<td className="p-space-md">3 sessions</td>
|
|
<td className="p-space-md text-primary-container">Unlimited full resolution</td>
|
|
<td className="p-space-md text-primary-container">Unlimited + Paddock Archive</td>
|
|
</tr>
|
|
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
|
|
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Crash Detection & Mesh SOS</td>
|
|
<td className="p-space-md">Manual SOS</td>
|
|
<td className="p-space-md text-secondary-fixed"><150ms Automatic Trigger</td>
|
|
<td className="p-space-md text-secondary-fixed">Fleetwide Marshall Auto-Dispatch</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Hardware Add-ons Section */}
|
|
<section id="hardware" className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl scroll-mt-24">
|
|
<div className="flex flex-col mb-space-2xl">
|
|
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-wide">Hardware Ecosystem</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Engineered Motorcycle Hardware</h2>
|
|
<p className="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-space-xs">
|
|
Industrial grade modular hardware plugs directly into modern motorcycle diagnostic links. Instant sync with the MotorSignal app over high-bandwidth Bluetooth 5.3.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-space-xl items-stretch">
|
|
{/* Hardware Item 1: OBD-II / CAN Dongle */}
|
|
<div className="flex flex-col sm:flex-row gap-space-lg p-space-xl rounded-xl bg-surface-container-low shadow-md hover:shadow-xl transition-all">
|
|
<div className="w-full sm:w-48 h-48 rounded-lg overflow-hidden bg-surface-container flex-shrink-0 relative">
|
|
<img className="w-full h-full object-cover" data-alt="A compact matte-black motorcycle OBD-II telemetry dongle with glowing cyan LED accents and water-resistant carbon fiber housing resting on an anodized racing bike frame." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfdRGcXZFf1s-sG4CrdGNtARVa7s_tu9UibEnytT9IO3WXpOHQaxvGMmyJ6Clh5q690_Yi-KS-fR4fCTkWCzetkk_sNQ1-Ix4KMAyiRVbD4HkMl0kv9TT-k7ZOufN0l3hjEhBCYa_lrqmaDzaOR5H3RUDiY3A_RY6ES97lutb6zfm7is9m_bE7ACTdbtBozY6sdOfNGG-EoASFdrxZul_ELsvQV_5LLkQSJ6gFm8ske777hzqvdTB3cQ"/>
|
|
<span className="absolute top-2 left-2 px-space-xs py-0.5 rounded bg-surface-container-lowest/80 backdrop-blur font-code-mono text-code-mono text-primary-container">IP68 Waterproof</span>
|
|
</div>
|
|
<div className="flex flex-col justify-between flex-grow">
|
|
<div>
|
|
<div className="flex items-baseline justify-between mb-space-xs">
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">MotorSignal Link Dongle</h3>
|
|
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">$99</span>
|
|
</div>
|
|
<p className="font-label-caps text-label-caps text-secondary-fixed mb-space-sm">Free with annual Pro subscription</p>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
|
|
Plugs straight into your bike's Euro4/Euro5 diagnostic port. Reads real-time brake line hydraulic pressure, lean-angle-sensitive traction control, and exact throttle opening.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-space-xs font-code-mono text-code-mono text-on-surface mb-space-md">
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[16px]">bluetooth</span>
|
|
<span>BT 5.3 Low Energy</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[16px]">wifi</span>
|
|
<span>Wi-Fi Direct 60fps</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[16px]">cable</span>
|
|
<span>Yamaha / KTM / Ducati</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[16px]">bolt</span>
|
|
<span><8mA Draw Sleep</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a className="inline-flex items-center justify-center gap-space-xs py-2.5 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="hardware-and-app" href="/account">
|
|
<span>View Specs & Harness Fits</span>
|
|
<span className="material-symbols-outlined text-[18px]">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* Hardware Item 2: Fork IMU Module */}
|
|
<div className="flex flex-col sm:flex-row gap-space-lg p-space-xl rounded-xl bg-surface-container-low shadow-md hover:shadow-xl transition-all">
|
|
<div className="w-full sm:w-48 h-48 rounded-lg overflow-hidden bg-surface-container flex-shrink-0 relative">
|
|
<img className="w-full h-full object-cover" data-alt="A machined billet aluminum 6-axis fork-mounted motorcycle IMU sensor clamp with electric cyan telemetry wire harness and laser etched calibration markings." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBU-2F8HuXFO0QSSfWOKIfsqW2Esh6pjI12ymtA0vP_drMLQHSGQrpJqNDCpw3Ei9mvXkvfKRJVdpahH0VznZNn-MQ8PZc7LAUni1K65bt_TklFlys_yYf8honGp4ttFqzQHffGHPUs0j-Gl56QcsasdN6D4TAzJbL0uqyax8VXlLEsMP4Nx3qEpLs8TfVZANJZ9M-NMjIz7FZXUJhqD86gjzzsgjIO_0VpRt0M11lCGRzF2LoYALBdbA"/>
|
|
<span className="absolute top-2 left-2 px-space-xs py-0.5 rounded bg-surface-container-lowest/80 backdrop-blur font-code-mono text-code-mono text-secondary-fixed">100Hz High Density</span>
|
|
</div>
|
|
<div className="flex flex-col justify-between flex-grow">
|
|
<div>
|
|
<div className="flex items-baseline justify-between mb-space-xs">
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">6-Axis Fork IMU Module</h3>
|
|
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">$149</span>
|
|
</div>
|
|
<p className="font-label-caps text-label-caps text-outline mb-space-sm">Optional track precision add-on</p>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
|
|
Dedicated fork clamp sensor providing MotoGP-grade chassis pitch dynamics, suspension travel velocity, and high-frequency chatter detection.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-space-xs font-code-mono text-code-mono text-on-surface mb-space-md">
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">sensors</span>
|
|
<span>100Hz Gyro / Accel</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">precision_manufacturing</span>
|
|
<span>CNC 6061 Billet Clamp</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">straighten</span>
|
|
<span>41mm to 55mm Fork Stems</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-2xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">sync</span>
|
|
<span>Zero-lag CAN Bridging</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a className="inline-flex items-center justify-center gap-space-xs py-2.5 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="hardware-and-app" href="/account">
|
|
<span>Order Fork Module</span>
|
|
<span className="material-symbols-outlined text-[18px]">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Interactive FAQ Accordion */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="text-center mb-space-2xl">
|
|
<span className="font-label-caps text-label-caps text-primary-container tracking-wide">Knowledge Base</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Frequently Asked Questions</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-space-md">
|
|
{/* Q1 */}
|
|
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFaq(1)}
|
|
aria-expanded={openFaq === 1}
|
|
className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
|
|
>
|
|
<span className="font-headline-sm text-headline-sm text-on-surface">Do I need the OBD-II hardware to use MotorSignal?</span>
|
|
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 1 ? 'rotate-180' : ''}`} id="faq-icon-1">expand_more</span>
|
|
</button>
|
|
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 1 ? 'block' : 'hidden'}`} id="faq-body-1">
|
|
No. You can start immediately using solely your smartphone. Modern smartphones contain high-grade 6-axis accelerometers, gyroscopes, and GNSS modules capable of delivering 80% of our telemetry features including live lean angle, acceleration curves, and lap timing. The optional OBD-II hardware module unlocks deeper bike-specific metrics: engine RPM, gear position, throttle position percentage, traction control engagement, and hydraulic brake pressure.
|
|
</div>
|
|
</div>
|
|
{/* Q2 */}
|
|
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFaq(2)}
|
|
aria-expanded={openFaq === 2}
|
|
className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
|
|
>
|
|
<span className="font-headline-sm text-headline-sm text-on-surface">Does the crash detection work without cellular service?</span>
|
|
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 2 ? 'rotate-180' : ''}`} id="faq-icon-2">expand_more</span>
|
|
</button>
|
|
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 2 ? 'block' : 'hidden'}`} id="faq-body-2">
|
|
Yes. If you are riding in remote mountain passes without cellular coverage, the system initiates a dual fallback: it records high-precision blackbox sensor data locally, and simultaneously emits a high-priority emergency beacon via peer-to-peer Wi-Fi and Bluetooth mesh to nearby riders in your group pack. As soon as any pack member's device touches cellular or satellite connectivity, the incident coordinates are dispatched immediately.
|
|
</div>
|
|
</div>
|
|
{/* Q3 */}
|
|
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFaq(3)}
|
|
aria-expanded={openFaq === 3}
|
|
className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
|
|
>
|
|
<span className="font-headline-sm text-headline-sm text-on-surface">Can I cancel anytime? What happens to my data?</span>
|
|
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 3 ? 'rotate-180' : ''}`} id="faq-icon-3">expand_more</span>
|
|
</button>
|
|
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 3 ? 'block' : 'hidden'}`} id="faq-body-3">
|
|
You can cancel your subscription at any time with a single click in your Account settings. There are no cancellation penalties. Your ride telemetry and track logs are yours forever: you can export all your past session data in raw CSV, GPX, or FIM-standard KML formats at any point, even on the free tier.
|
|
</div>
|
|
</div>
|
|
{/* Q4 */}
|
|
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFaq(4)}
|
|
aria-expanded={openFaq === 4}
|
|
className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
|
|
>
|
|
<span className="font-headline-sm text-headline-sm text-on-surface">What motorcycle brands and models are supported?</span>
|
|
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 4 ? 'rotate-180' : ''}`} id="faq-icon-4">expand_more</span>
|
|
</button>
|
|
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 4 ? 'block' : 'hidden'}`} id="faq-body-4">
|
|
The phone sensor suite works on any vehicle with two wheels. For our OBD-II CAN Link dongle, all Euro4 and Euro5 compliant fuel-injected motorcycles from 2017 to present are supported out-of-the-box (including Yamaha, Ducati, BMW Motorrad, KTM, Kawasaki, Honda, Aprilia, Triumph, and Suzuki). We include custom pin adapter harnesses with every dongle order.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Tactical Final Banner CTA */}
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
|
|
<div className="relative p-space-2xl md:p-space-3xl rounded-xl bg-gradient-to-r from-surface-container-high via-surface-container to-surface-container-lowest shadow-2xl overflow-hidden">
|
|
<div className="absolute right-0 top-0 bottom-0 w-1/3 bg-gradient-to-l from-primary-container/10 to-transparent pointer-events-none"></div>
|
|
<div className="relative z-10 max-w-2xl">
|
|
<span className="font-label-caps text-label-caps text-primary-container tracking-wide">Instant Telemetry Link</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-xs mb-space-sm">
|
|
Ready to analyze your apex angles and lap splits?
|
|
</h2>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mb-space-xl">
|
|
Download the app, mount your phone, and be track-ready in under 60 seconds. No credit card required for the free rider tier.
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-space-md">
|
|
<a className="px-space-lg py-3 rounded-lg 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">
|
|
Claim Free Telemetry Account
|
|
</a>
|
|
<a className="px-space-md py-3 rounded-lg bg-surface-container hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="live-cockpit" href="/account">
|
|
Explore Live Cockpit Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop py-space-4xl" aria-labelledby="pricing-unavailable-title">
|
|
<div className="max-w-3xl mx-auto rounded-2xl bg-surface-container-low p-space-2xl text-center">
|
|
<h1 id="pricing-unavailable-title" className="font-headline-xl text-headline-xl text-on-surface mb-space-md">Subscription plans are not available yet</h1>
|
|
<p className="font-body-lg text-body-lg text-on-surface-variant">MotorSignal does not currently offer web checkout or sell OBD-II or add-on hardware. You can use the app's available phone-based ride recording and community features.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|