609 lines
37 KiB
TypeScript
609 lines
37 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function ClubsPage() {
|
|
return (
|
|
<div className="flagship-page text-on-surface bg-surface min-h-screen">
|
|
<div hidden>
|
|
{/* Top Command Matrix Hero */}
|
|
<section className="relative w-full py-space-4xl overflow-hidden bg-surface-container-lowest">
|
|
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[900px] h-[450px] bg-primary-container/10 blur-[130px] rounded-full pointer-events-none"></div>
|
|
<div className="absolute top-1/3 right-10 w-[420px] h-[420px] bg-secondary-container/5 blur-[120px] rounded-full pointer-events-none"></div>
|
|
<div className="relative max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
|
|
<div className="lg:col-span-7 flex flex-col gap-space-lg">
|
|
<div className="inline-flex items-center gap-space-xs px-space-sm py-1.5 rounded-full bg-surface-container w-fit shadow-md">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-fixed-dim"></span>
|
|
</span>
|
|
<span className="font-label-caps text-label-caps text-primary-fixed tracking-normal">Motorcycle Clubs, Fleets & Track Academies</span>
|
|
</div>
|
|
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight">
|
|
Command your club fleet with <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-container via-primary-fixed-dim to-secondary-fixed">military-grade telemetry</span>.
|
|
</h1>
|
|
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
|
Empower road captains, track day organizers, and racing teams with central member rosters, telemetry leaderboards, safety beacon monitoring, and fleet maintenance.
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-space-md pt-space-xs">
|
|
<a className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm shadow-xl hover:shadow-[0_0_30px_rgba(0,242,254,0.45)] transition-all" href="#register-club">
|
|
<span className="material-symbols-outlined text-[20px]">hub</span>
|
|
<span>Register Your Club</span>
|
|
</a>
|
|
<Link className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm shadow-md transition-all border border-outline-variant/60 hover:border-primary/40" href="/clubs/manage">
|
|
<span className="material-symbols-outlined text-[20px] text-secondary">dashboard</span>
|
|
<span>Founder Portal</span>
|
|
</Link>
|
|
<a className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm shadow-md transition-all" href="#directory">
|
|
<span className="material-symbols-outlined text-[20px]">explore</span>
|
|
<span>Explore Verified Clubs</span>
|
|
</a>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-space-md pt-space-lg max-w-lg">
|
|
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
|
|
<span className="font-code-mono text-code-mono text-outline block">Sync Rate</span>
|
|
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container block">10Hz</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">Real-time CAN-bus</span>
|
|
</div>
|
|
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
|
|
<span className="font-code-mono text-code-mono text-outline block">Active Fleets</span>
|
|
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed block">1,840+</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">Global syndicates</span>
|
|
</div>
|
|
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
|
|
<span className="font-code-mono text-code-mono text-outline block">Safety Beacon</span>
|
|
<span className="font-telemetry-metric-md text-telemetry-metric-md text-tertiary-fixed-dim block"><400ms</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">Crash dispatch latency</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-5 relative">
|
|
<div className="relative bg-surface-container-low rounded-xl p-space-lg shadow-2xl overflow-hidden">
|
|
<div className="flex items-center justify-between pb-space-sm">
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="h-2.5 w-2.5 rounded-full bg-secondary-fixed"></span>
|
|
<span className="font-label-caps text-label-caps text-secondary-fixed">Live Roster Stream</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-outline">Net: 48 Node Mesh</span>
|
|
</div>
|
|
<div className="space-y-space-xs py-space-xs">
|
|
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
|
|
<div className="flex items-center gap-space-sm">
|
|
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">01</div>
|
|
<div>
|
|
<div className="font-headline-sm text-headline-sm text-on-surface">Cap. Marcus Vance</div>
|
|
<div className="font-code-mono text-code-mono text-on-surface-variant">Yamaha YZF-R1M • Leader</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">54.2°</div>
|
|
<div className="font-code-mono text-code-mono text-outline">Apex Lean</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
|
|
<div className="flex items-center gap-space-sm">
|
|
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">02</div>
|
|
<div>
|
|
<div className="font-headline-sm text-headline-sm text-on-surface">Elena Rostova</div>
|
|
<div className="font-code-mono text-code-mono text-on-surface-variant">Ducati Panigale V4 S</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">1:41.88</div>
|
|
<div className="font-code-mono text-code-mono text-outline">Sector 3 Split</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
|
|
<div className="flex items-center gap-space-sm">
|
|
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">03</div>
|
|
<div>
|
|
<div className="font-headline-sm text-headline-sm text-on-surface">Daisuke Sato</div>
|
|
<div className="font-code-mono text-code-mono text-on-surface-variant">BMW S1000RR • Tail Marshal</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-telemetry-metric-md text-telemetry-metric-md text-tertiary-fixed-dim">99.4%</div>
|
|
<div className="font-code-mono text-code-mono text-outline">Tire Integrity</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-space-sm pt-space-sm bg-surface-container-lowest rounded-lg p-space-sm flex items-center justify-between">
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">cell_tower</span>
|
|
<span className="font-code-mono text-code-mono text-on-surface">Pack Formation: Diamond Alpha</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-secondary-fixed">Health: Nominal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Key Operational Pillars Section */}
|
|
<section className="w-full py-space-4xl bg-surface">
|
|
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="flex flex-col gap-space-xs max-w-2xl mb-space-3xl">
|
|
<span className="font-label-caps text-label-caps text-primary-container tracking-normal">Tactical Capabilities</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface">Key Operational Pillars for Clubs</h2>
|
|
<p className="font-body-md text-body-md text-on-surface-variant">Standardize ride telemetry, protect group formations, and track hardware readiness across every connected machine.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-space-xl">
|
|
{/* Pillar 1 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-md">
|
|
<div className="w-12 h-12 rounded-xl bg-primary-container/10 flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-primary-container text-[24px]">groups</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-outline">Pillar // 01</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Central Fleet & Member Roster</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
|
|
Manage hundreds of club members, their registered bikes, emergency contact info, and marshal access permissions with instant profile synchronization.
|
|
</p>
|
|
</div>
|
|
<div className="p-space-md rounded-lg bg-surface-container-lowest">
|
|
<div className="flex items-center justify-between font-code-mono text-code-mono text-on-surface-variant mb-space-2xs">
|
|
<span>Active Riders Validated</span>
|
|
<span className="text-primary-container">482 / 500</span>
|
|
</div>
|
|
<div className="w-full h-2 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-primary-container to-surface-tint w-[92%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Pillar 2 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-md">
|
|
<div className="w-12 h-12 rounded-xl bg-secondary-container/10 flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[24px]">military_tech</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-outline">Pillar // 02</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Private Leaderboards & Segment Trophies</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
|
|
Compare verified lean angles, sector lap times, and track speed on private leaderboards with multi-constellation anti-cheat GPS validation.
|
|
</p>
|
|
</div>
|
|
<div className="p-space-md rounded-lg bg-surface-container-lowest flex items-center justify-between">
|
|
<div className="flex items-center gap-space-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[22px]">verified</span>
|
|
<div>
|
|
<div className="font-code-mono text-code-mono text-on-surface">Anti-Cheat Enforced</div>
|
|
<div className="font-body-sm text-body-sm text-on-surface-variant">10Hz RTK-grade drift rejection</div>
|
|
</div>
|
|
</div>
|
|
<span className="font-label-caps text-label-caps text-secondary-fixed bg-secondary-container/20 px-space-xs py-1 rounded">Secure</span>
|
|
</div>
|
|
</div>
|
|
{/* Pillar 3 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-md">
|
|
<div className="w-12 h-12 rounded-xl bg-primary-container/10 flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-primary-container text-[24px]">radar</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-outline">Pillar // 03</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Road Captain Master Console</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
|
|
Bird's-eye live view of all club pack rides with real-time health, incident warnings, high-G deceleration alerts, and direct marshal dispatch.
|
|
</p>
|
|
</div>
|
|
<div className="p-space-md rounded-lg bg-surface-container-lowest grid grid-cols-2 gap-space-sm">
|
|
<div>
|
|
<span className="font-code-mono text-code-mono text-outline">Dispatch Status</span>
|
|
<div className="font-headline-sm text-headline-sm text-on-surface">3 Marshals Ready</div>
|
|
</div>
|
|
<div>
|
|
<span className="font-code-mono text-code-mono text-outline">Incident Queue</span>
|
|
<div className="font-headline-sm text-headline-sm text-secondary-fixed">0 Critical</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Pillar 4 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-md">
|
|
<div className="w-12 h-12 rounded-xl bg-tertiary-container/10 flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[24px]">manufacturing</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-outline">Pillar // 04</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Fleet Maintenance & Engine Telemetry</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
|
|
Track oil life, brake wear estimates, tire heat cycles, and ECU fault codes across member bikes to prevent mechanical DNFs on track and road.
|
|
</p>
|
|
</div>
|
|
<div className="p-space-md rounded-lg bg-surface-container-lowest flex items-center justify-between">
|
|
<div className="flex items-center gap-space-sm">
|
|
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[22px]">vital_signs</span>
|
|
<span className="font-code-mono text-code-mono text-on-surface">CAN-Bus ECU Diagnostics</span>
|
|
</div>
|
|
<span className="font-code-mono text-code-mono text-tertiary-fixed-dim">100% Health Check</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Featured Verified Clubs Directory */}
|
|
<section className="w-full py-space-4xl bg-surface-container-lowest" id="directory">
|
|
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-space-3xl gap-space-md">
|
|
<div className="flex flex-col gap-space-xs">
|
|
<span className="font-label-caps text-label-caps text-primary-fixed-dim tracking-normal">Global Roster</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface">Featured Verified Clubs</h2>
|
|
<p className="font-body-md text-body-md text-on-surface-variant">Join elite performance racing syndicates and organized touring packs running live telemetry networks.</p>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="font-code-mono text-code-mono text-outline">Sort:</span>
|
|
<span className="font-label-md text-label-md text-primary-container">Verified High-Performance</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-lg">
|
|
{/* Club Card 1 */}
|
|
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
|
|
<div className="space-y-space-md">
|
|
<div className="flex items-center justify-between">
|
|
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
|
|
2 Active Rides
|
|
</span>
|
|
<span className="font-code-mono text-code-mono text-outline">CA-09</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">Apex Pro Track School</h3>
|
|
<p className="font-code-mono text-code-mono text-primary-container">San Jose, CA</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-space-2xs">
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">240 Members</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">14 Track Days/yr</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 font-code-mono text-code-mono text-primary-fixed">Pro Certified</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
|
Lead Coach: Dave Kinlan (AMA Pro Superbike Alum). Specialized in telemetry-guided apex entry and throttle-trace optimization.
|
|
</p>
|
|
</div>
|
|
<div className="pt-space-lg mt-space-md">
|
|
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
|
<span>Request to Join</span>
|
|
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Club Card 2 */}
|
|
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
|
|
<div className="space-y-space-md">
|
|
<div className="flex items-center justify-between">
|
|
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
|
|
4 Active Rides
|
|
</span>
|
|
<span className="font-code-mono text-code-mono text-outline">CA-01</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">NorCal Canyon Syndicate</h3>
|
|
<p className="font-code-mono text-code-mono text-primary-container">San Francisco, CA</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-space-2xs">
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">580 Members</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Weekly Packs</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Sport / Superbike</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
|
Road Captain: Ryan 'Hatch' Miller. Precision formation passes, mountain safety monitors, and private Skaggs Springs leaderboards.
|
|
</p>
|
|
</div>
|
|
<div className="pt-space-lg mt-space-md">
|
|
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
|
<span>Request to Join</span>
|
|
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Club Card 3 */}
|
|
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
|
|
<div className="space-y-space-md">
|
|
<div className="flex items-center justify-between">
|
|
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">
|
|
Standby
|
|
</span>
|
|
<span className="font-code-mono text-code-mono text-outline">WA-04</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">Pacific Northwest Moto Fleet</h3>
|
|
<p className="font-code-mono text-code-mono text-primary-container">Seattle, WA</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-space-2xs">
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">310 Members</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Touring & ADV</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 font-code-mono text-code-mono text-primary-fixed">All-Weather</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
|
Fleet Lead: Sarah Jenkins. Cascade loop expeditions, wet-grip telemetry tracking, and satellite mesh communicator integration.
|
|
</p>
|
|
</div>
|
|
<div className="pt-space-lg mt-space-md">
|
|
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
|
<span>Request to Join</span>
|
|
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Club Card 4 */}
|
|
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
|
|
<div className="space-y-space-md">
|
|
<div className="flex items-center justify-between">
|
|
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
|
|
1 Active Ride
|
|
</span>
|
|
<span className="font-code-mono text-code-mono text-outline">TX-03</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-headline-md text-headline-md text-on-surface">Austin Apex League</h3>
|
|
<p className="font-code-mono text-code-mono text-primary-container">Austin, TX</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-space-2xs">
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">420 Members</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Track & Street</span>
|
|
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">COTA Track Days</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant">
|
|
Founder: Mateo Alvarez. Regular COTA track allocations, night Hill Country loops, and high-frequency suspension setup telemetry.
|
|
</p>
|
|
</div>
|
|
<div className="pt-space-lg mt-space-md">
|
|
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
|
|
<span>Request to Join</span>
|
|
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Live Telemetry Radar Preview Panel */}
|
|
<section className="w-full py-space-3xl bg-surface">
|
|
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="p-space-2xl rounded-xl bg-surface-container-low shadow-xl">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
|
|
<div className="lg:col-span-6 flex flex-col gap-space-md">
|
|
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-normal">Live Marshal Radar</span>
|
|
<h3 className="font-headline-xl text-headline-xl text-on-surface">Keep pack formations tighter and track incidents instantly.</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant">
|
|
When a rider slows unexpectedly or triggers an emergency IMU deceleration event, the entire road captain council gets an immediate audio-visual alert with pinpoint GPS coordinates.
|
|
</p>
|
|
<div className="space-y-space-xs pt-space-xs">
|
|
<div className="flex items-center gap-space-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
|
<span className="font-body-md text-body-md text-on-surface">Automatic peg-scrape hazard mapping for follow riders</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
|
<span className="font-body-md text-body-md text-on-surface">Anti-straggle pace delta monitoring on multi-tier routes</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-sm">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
|
|
<span className="font-body-md text-body-md text-on-surface">Cross-brand CAN-bus support (Ducati, Yamaha, BMW, KTM, Aprilia)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-6">
|
|
<div className="bg-surface-container-lowest p-space-lg rounded-xl shadow-inner">
|
|
<div className="flex items-center justify-between pb-space-sm mb-space-sm">
|
|
<span className="font-code-mono text-code-mono text-outline">Telemetry Delta // Sector 2</span>
|
|
<span className="font-code-mono text-code-mono text-secondary-fixed">Apex Cloud Active</span>
|
|
</div>
|
|
{/* Telemetry Sparkline Simulation */}
|
|
<div className="h-36 w-full flex items-end gap-1.5 pt-space-sm">
|
|
<div className="w-full bg-primary-container/20 rounded-t h-[40%]"></div>
|
|
<div className="w-full bg-primary-container/30 rounded-t h-[65%]"></div>
|
|
<div className="w-full bg-primary-container/40 rounded-t h-[55%]"></div>
|
|
<div className="w-full bg-primary-container/60 rounded-t h-[85%]"></div>
|
|
<div className="w-full bg-primary-container/80 rounded-t h-[95%]"></div>
|
|
<div className="w-full bg-secondary-fixed rounded-t h-[100%] shadow-[0_0_12px_rgba(96,255,152,0.6)]"></div>
|
|
<div className="w-full bg-primary-container/90 rounded-t h-[75%]"></div>
|
|
<div className="w-full bg-primary-container/70 rounded-t h-[60%]"></div>
|
|
<div className="w-full bg-primary-container/50 rounded-t h-[45%]"></div>
|
|
<div className="w-full bg-primary-container/30 rounded-t h-[30%]"></div>
|
|
<div className="w-full bg-primary-container/20 rounded-t h-[50%]"></div>
|
|
<div className="w-full bg-primary-container/30 rounded-t h-[70%]"></div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-space-xs pt-space-md mt-space-md">
|
|
<div>
|
|
<span className="font-code-mono text-code-mono text-outline block">Max Speed</span>
|
|
<span className="font-headline-sm text-headline-sm text-on-surface">264 km/h</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-code-mono text-code-mono text-outline block">Peak Lean</span>
|
|
<span className="font-headline-sm text-headline-sm text-primary-container">57.8° L</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-code-mono text-code-mono text-outline block">G-Force Lat</span>
|
|
<span className="font-headline-sm text-headline-sm text-secondary-fixed">1.42 G</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Club Administrative Tier Comparison */}
|
|
<section className="w-full py-space-4xl bg-surface-container-lowest" id="register-club">
|
|
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="text-center max-w-2xl mx-auto mb-space-3xl">
|
|
<span className="font-label-caps text-label-caps text-primary-container tracking-normal">Organization Tiers</span>
|
|
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Club Administrative Plans</h2>
|
|
<p className="font-body-md text-body-md text-on-surface-variant mt-space-xs">Scalable telemetry, cloud computing, and real-time mesh for grassroots packs up to world-class racing academies.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-space-xl items-stretch">
|
|
{/* Tier 1 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-xs">
|
|
<span className="font-label-caps text-label-caps text-outline">Entry Fleet</span>
|
|
<span className="font-code-mono text-code-mono text-on-surface-variant">Community</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface">Grassroots Clubs</h3>
|
|
<div className="flex items-baseline gap-1 my-space-md">
|
|
<span className="font-display-hero text-display-hero text-on-surface">Free</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">/ forever</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
|
|
Essential fleet synchronization for local casual packs and weekend canyon riders.
|
|
</p>
|
|
<div className="space-y-space-sm pt-space-xs">
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Up to 15 riders per pack</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Standard GPS live tracking</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Basic lean angle logs</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Public club directory listing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-space-xl mt-space-md">
|
|
<button className="w-full 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-all">
|
|
Deploy Grassroots
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Tier 2 (Highlighted) */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container flex flex-col justify-between shadow-2xl relative">
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-caps text-label-caps tracking-normal shadow-md">
|
|
Most Popular Syndicate
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-xs">
|
|
<span className="font-label-caps text-label-caps text-primary-container">Pro Formation</span>
|
|
<span className="font-code-mono text-code-mono text-primary-fixed">Verified Badge</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface">Verified Syndicate</h3>
|
|
<div className="flex items-baseline gap-1 my-space-md">
|
|
<span className="font-display-hero text-display-hero text-primary-container">$49</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">/ month</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
|
|
Engineered for established sportbike clubs, track groups, and high-frequency touring units.
|
|
</p>
|
|
<div className="space-y-space-sm pt-space-xs">
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Up to 100 verified riders</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Private telemetry leaderboards</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Road captain emergency marshal beacons</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">10Hz high-frequency CAN-bus sync</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Automated crash & peg-scrape alerts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-space-xl mt-space-md">
|
|
<button className="w-full py-3 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 shadow-lg hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all">
|
|
Initialize Syndicate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Tier 3 */}
|
|
<div className="p-space-xl rounded-xl bg-surface-container-low flex flex-col justify-between shadow-lg">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-space-xs">
|
|
<span className="font-label-caps text-label-caps text-secondary-fixed">Enterprise Grid</span>
|
|
<span className="font-code-mono text-code-mono text-secondary-fixed">FIM Data Spec</span>
|
|
</div>
|
|
<h3 className="font-headline-lg text-headline-lg text-on-surface">Enterprise Academy</h3>
|
|
<div className="flex items-baseline gap-1 my-space-md">
|
|
<span className="font-display-hero text-display-hero text-secondary-fixed">$199</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface-variant">/ month</span>
|
|
</div>
|
|
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
|
|
Complete professional infrastructure for track schools, race teams, and commercial fleets.
|
|
</p>
|
|
<div className="space-y-space-sm pt-space-xs">
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Unlimited riders and fleet assets</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Live track telemetry broadcast link</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Telemetry REST API & Webhook access</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Custom club branding & sub-domain</span>
|
|
</div>
|
|
<div className="flex items-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
|
|
<span className="font-body-sm text-body-sm text-on-surface">Dedicated fleet engineer support</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-space-xl mt-space-md">
|
|
<button className="w-full 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-all">
|
|
Contact Race Operations
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Interactive Club Registration Callout */}
|
|
<section className="w-full py-space-3xl bg-surface">
|
|
<div className="max-w-container-max mx-auto px-gutter-desktop">
|
|
<div className="p-space-2xl rounded-xl bg-gradient-to-r from-surface-container-low via-surface-container to-surface-container-high shadow-xl flex flex-col md:flex-row items-center justify-between gap-space-xl">
|
|
<div className="flex flex-col gap-space-xs max-w-xl">
|
|
<span className="font-label-caps text-label-caps text-primary-container tracking-normal">Ready to Integrate?</span>
|
|
<h3 className="font-headline-xl text-headline-xl text-on-surface">Connect your club to the MotorSignal Grid today.</h3>
|
|
<p className="font-body-md text-body-md text-on-surface-variant">Setup takes less than 3 minutes. Distribute invite tokens to your road marshals and member bikes.</p>
|
|
</div>
|
|
<div className="flex items-center gap-space-md w-full md:w-auto">
|
|
<button className="w-full md:w-auto px-space-xl py-3.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm shadow-xl hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all flex items-center justify-center gap-space-xs">
|
|
<span className="material-symbols-outlined text-[20px]">add_moderator</span>
|
|
<span>Create Club Hub</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<section className="max-w-container-max mx-auto px-gutter-desktop py-space-4xl" aria-labelledby="club-capabilities-title">
|
|
<div className="max-w-3xl mx-auto rounded-2xl bg-surface-container-low p-space-2xl text-center">
|
|
<h1 id="club-capabilities-title" className="font-headline-xl text-headline-xl text-on-surface mb-space-md">Club tools, with a clear feature status</h1>
|
|
<p className="font-body-lg text-body-lg text-on-surface-variant mb-space-lg">The Founder Portal supports member and Wall management, Stats, and moderation tools for membership and Wall posts. Routes, chat, post reports, CAN-bus diagnostics, crash dispatch, and off-grid mesh are not available. Directory and telemetry examples on this page were sample content, not live club data.</p>
|
|
<Link className="inline-flex items-center justify-center px-space-xl py-3 rounded-xl bg-primary-container text-on-primary-container font-headline-sm text-headline-sm" href="/clubs/manage">Open Founder Portal</Link>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|