MotorSignal-App/docs/stitch-designs/code/38_clubs_discovery_hub.html

467 lines
27 KiB
HTML

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>MotorSignal HUD // Clubs Discovery</title>
<!-- Fonts & Material Symbols -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..900&family=Space+Grotesk:wght@100..900&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS with CDN -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary": "#b4c5ff",
"surface-container": "#1d2025",
"surface-tint": "#00daf3",
"surface-container-low": "#181c21",
"on-error-container": "#ffdad6",
"inverse-surface": "#e0e2ea",
"surface-container-high": "#272a30",
"tertiary-fixed-dim": "#d0bcff",
"primary-fixed-dim": "#00daf3",
"surface-container-highest": "#32353b",
"on-primary-container": "#00626e",
"on-primary-fixed": "#001f24",
"surface-container-lowest": "#0b0e13",
"secondary-fixed": "#dbe1ff",
"primary-container": "#00e5ff",
"surface": "#101419",
"background": "#101419",
"outline": "#849396",
"on-error": "#690005",
"primary-fixed": "#9cf0ff",
"on-tertiary-container": "#6834d1",
"primary": "#c3f5ff",
"secondary-container": "#0053db",
"surface-variant": "#32353b",
"tertiary": "#f2e9ff",
"on-secondary-fixed-variant": "#003ea8",
"on-primary-fixed-variant": "#004f58",
"on-secondary": "#002a78",
"on-background": "#e0e2ea",
"tertiary-container": "#d9c8ff",
"on-surface-variant": "#bac9cc",
"on-tertiary-fixed": "#23005c",
"surface-bright": "#36393f",
"error": "#ffb4ab",
"on-tertiary-fixed-variant": "#5516be",
"on-surface": "#e0e2ea",
"on-secondary-fixed": "#00174b",
"inverse-on-surface": "#2d3036",
"secondary-fixed-dim": "#b4c5ff",
"surface-dim": "#101419",
"outline-variant": "#3b494c",
"error-container": "#93000a",
"on-tertiary": "#3c0091",
"on-primary": "#00363d",
"tertiary-fixed": "#e9ddff",
"on-secondary-container": "#cdd7ff",
"inverse-primary": "#006875"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"space-sm": "0.5rem",
"gutter-lg": "1.5rem",
"space-md": "1rem",
"margin": "1rem",
"space-xl": "2rem",
"gutter": "1rem",
"space-xs": "0.25rem",
"space-lg": "1.5rem",
"margin-lg": "2rem"
},
"fontFamily": {
"telemetry-metric-lg-mobile": ["JetBrains Mono"],
"body-md": ["Inter"],
"label-caption": ["Inter"],
"display-hero": ["Space Grotesk"],
"body-lg": ["Inter"],
"label-data": ["JetBrains Mono"],
"headline-md": ["Space Grotesk"],
"telemetry-metric-lg": ["JetBrains Mono"],
"telemetry-metric-md": ["JetBrains Mono"],
"headline-lg": ["Space Grotesk"],
"display-hero-mobile": ["Space Grotesk"],
"headline-sm": ["Space Grotesk"]
},
"fontSize": {
"telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }],
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }],
"display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }],
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }],
"label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }],
"headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }],
"telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }]
}
},
},
}
</script>
<style>
/* Glow utilities for tactical cockpit telemetry aesthetic */
.glow-cyan-sm {
box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}
.glow-cyan-btn {
box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface-container-lowest text-on-surface min-h-screen antialiased selection:bg-primary-container selection:text-surface-container-lowest pb-28">
<!-- Mobile Viewport Container 375px centered for prototype viewing -->
<div class="max-w-[420px] mx-auto min-h-screen relative flex flex-col bg-surface-container-lowest border-x border-outline-variant/40">
<!-- TOP APP BAR (Shared Components JSON execution) -->
<header class="fixed top-0 left-0 w-full max-w-[420px] left-1/2 -translate-x-1/2 z-50 flex justify-between items-center px-4 h-14 bg-surface-container-lowest border-b border-outline-variant">
<div class="flex items-center space-x-2">
<span class="material-symbols-outlined text-primary-container text-xl" data-icon="sensors">sensors</span>
<span class="font-headline-sm text-headline-sm font-bold tracking-wider text-primary-container">MOTORSIGNAL HUD</span>
</div>
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-1 px-2 py-0.5 rounded bg-surface-container border border-outline-variant">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse"></span>
<span class="font-label-data text-[10px] text-primary">GNSS 20Hz</span>
</div>
<button aria-label="Alerts" class="flex items-center justify-center w-8 h-8 rounded-lg text-primary-container hover:bg-surface-container active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined text-xl" data-icon="warning">warning</span>
</button>
</div>
</header>
<!-- SUB-HUD TELEMETRY DIAGNOSTIC BAR -->
<div class="mt-14 px-4 py-2 bg-surface-container-low border-b border-outline-variant/60 flex items-center justify-between font-label-data text-label-data text-on-surface-variant">
<div class="flex items-center space-x-2">
<span class="text-primary-container">●</span>
<span>MESH RF: <strong class="text-on-surface font-semibold">ONLINE (CH-04)</strong></span>
</div>
<div class="flex items-center space-x-3">
<span>LAT: <strong class="text-primary font-semibold">12ms</strong></span>
<span>BAT: <strong class="text-on-surface font-semibold">98%</strong></span>
</div>
</div>
<!-- MAIN RECON CONTENT AREA -->
<main class="flex-1 px-4 pt-4 space-y-4">
<!-- SECTION TITLE & ACTION -->
<div class="flex items-end justify-between border-b border-outline-variant/30 pb-2">
<div>
<div class="font-label-data text-label-data text-primary-container uppercase tracking-widest">Tactical Recon // Hub</div>
<h1 class="font-headline-md text-headline-md font-bold text-on-surface uppercase tracking-tight">Clubs Directory</h1>
</div>
<!-- HEADER CREATE CTA -->
<button class="h-10 px-3 flex items-center space-x-1.5 rounded-lg bg-surface-container-high border border-primary-container text-primary-container font-label-data text-label-data font-semibold hover:bg-surface-container active:scale-95 duration-100 glow-cyan-sm">
<span class="material-symbols-outlined text-base" data-icon="add">add</span>
<span>NEW SQUAD</span>
</button>
</div>
<!-- SEARCH INPUT -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-on-surface-variant">
<span class="material-symbols-outlined text-lg" data-icon="search">search</span>
</div>
<input class="w-full h-12 pl-10 pr-10 bg-surface-container-lowest border border-outline-variant rounded-lg font-body-md text-body-md text-on-surface placeholder:text-on-surface-variant focus:border-primary-container focus:ring-1 focus:ring-primary-container focus:outline-none transition-all" placeholder="Search clubs, callsigns, territories..." type="text"/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<span class="px-1.5 py-0.5 rounded bg-surface-container font-label-data text-[10px] text-outline border border-outline-variant">⌘K</span>
</div>
</div>
<!-- HORIZONTAL FILTER CHIPS -->
<div class="flex items-center space-x-2 overflow-x-auto scrollbar-none py-1 -mx-4 px-4">
<!-- Active Chip -->
<button class="flex-shrink-0 h-9 px-3.5 rounded-lg bg-surface-container-high border border-primary-container text-primary-container font-label-data text-label-data font-bold flex items-center space-x-1.5 glow-cyan-sm active:scale-95 duration-100">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container"></span>
<span>All Sectors</span>
</button>
<!-- Inactive Chips -->
<button class="flex-shrink-0 h-9 px-3.5 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface-variant hover:text-on-surface hover:border-outline font-label-data text-label-data flex items-center space-x-1 active:scale-95 duration-100">
<span>Sportbike</span>
</button>
<button class="flex-shrink-0 h-9 px-3.5 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface-variant hover:text-on-surface hover:border-outline font-label-data text-label-data flex items-center space-x-1 active:scale-95 duration-100">
<span>ADV / Dual Sport</span>
</button>
<button class="flex-shrink-0 h-9 px-3.5 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface-variant hover:text-on-surface hover:border-outline font-label-data text-label-data flex items-center space-x-1 active:scale-95 duration-100">
<span>Canyon Carvers</span>
</button>
<button class="flex-shrink-0 h-9 px-3.5 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface-variant hover:text-on-surface hover:border-outline font-label-data text-label-data flex items-center space-x-1 active:scale-95 duration-100">
<span>Track Day</span>
</button>
</div>
<!-- SUB-FILTER / SORT STATUS ROW -->
<div class="flex items-center justify-between py-1 text-label-caption font-label-caption text-on-surface-variant">
<div class="flex items-center space-x-1.5">
<span class="font-label-data text-primary-fixed-dim">34</span>
<span>VERIFIED SQUADRONS DETECTED</span>
</div>
<button class="flex items-center space-x-1 font-label-data text-primary hover:text-primary-container transition-colors">
<span>SORT: COHESION SCORE</span>
<span class="material-symbols-outlined text-xs" data-icon="expand_more">expand_more</span>
</button>
</div>
<!-- CLUB CARDS LIST -->
<div class="space-y-4">
<!-- CLUB 1: NorCal Apex Hunters -->
<article class="bg-surface-container-low border border-outline-variant hover:border-primary-container/80 transition-all rounded-xl p-3.5 space-y-3 relative overflow-hidden">
<!-- Subtle Top Indicator Accent -->
<div class="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-primary-container via-secondary-container to-transparent"></div>
<!-- Header info -->
<div class="flex items-start justify-between">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-lg bg-surface-container-highest border border-primary-container/60 flex items-center justify-center text-primary-container shadow-inner">
<span class="material-symbols-outlined text-2xl" data-icon="explore">explore</span>
</div>
<div>
<div class="flex items-center space-x-1.5">
<h2 class="font-headline-sm text-base font-bold text-on-surface">NorCal Apex Hunters</h2>
<span class="material-symbols-outlined text-primary-container text-sm" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
<p class="font-label-data text-label-data text-on-surface-variant">48 Pilots • Skyline Chapter • NorCal Sector</p>
</div>
</div>
<span class="px-2 py-0.5 rounded bg-primary-container/15 border border-primary-container/60 font-label-data text-[10px] text-primary-container font-bold">PRO ROSTER</span>
</div>
<!-- Badges Cluster -->
<div class="flex flex-wrap gap-1.5 font-label-caption text-[10px]">
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface flex items-center space-x-1">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container"></span>
<span>SANCTIONED MESH (CH-02)</span>
</span>
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
PACE 4 TECHNICAL
</span>
</div>
<!-- Telemetry Stats Bento Block -->
<div class="grid grid-cols-3 gap-2 bg-surface-container-lowest/80 p-2.5 rounded-lg border border-outline-variant/50">
<div>
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Avg Lean Arc</div>
<div class="font-telemetry-metric-md text-xl font-bold text-primary-container">52.4<span class="text-xs font-normal text-on-surface-variant">°</span></div>
</div>
<div class="border-x border-outline-variant/40 px-2">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Mesh Cohesion</div>
<div class="font-telemetry-metric-md text-xl font-bold text-primary">99.2<span class="text-xs font-normal text-on-surface-variant">%</span></div>
</div>
<div class="text-right">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Squad Runs</div>
<div class="font-telemetry-metric-md text-xl font-bold text-on-surface">18<span class="text-xs font-normal text-on-surface-variant">/mo</span></div>
</div>
</div>
<!-- Pinned Route -->
<div class="flex items-center justify-between text-body-md text-xs bg-surface-container px-2.5 py-1.5 rounded border border-outline-variant/40">
<div class="flex items-center space-x-1.5 truncate text-on-surface-variant">
<span class="material-symbols-outlined text-sm text-primary-container" data-icon="route">route</span>
<span class="truncate font-body-md">Primary Patrol: <strong>Skyline Blvd & CA-9 Arc</strong></span>
</div>
<span class="font-label-data text-[10px] text-primary-fixed-dim whitespace-nowrap">42.8 KM</span>
</div>
<!-- Action Buttons -->
<div class="grid grid-cols-2 gap-2 pt-1">
<button class="h-11 rounded-lg bg-surface-container border border-outline-variant hover:border-primary-container text-on-surface font-label-data text-label-data font-semibold flex items-center justify-center active:scale-95 duration-100">
VIEW CHAPTER
</button>
<button class="h-11 rounded-lg bg-primary-container hover:bg-surface-tint text-surface-container-lowest font-label-data text-label-data font-bold flex items-center justify-center space-x-1 glow-cyan-btn active:scale-95 duration-100">
<span class="material-symbols-outlined text-base" data-icon="podcasts">podcasts</span>
<span>JOIN MESH</span>
</button>
</div>
</article>
<!-- CLUB 2: Bay Area Adventure Riders -->
<article class="bg-surface-container-low border border-outline-variant hover:border-primary-container/80 transition-all rounded-xl p-3.5 space-y-3 relative overflow-hidden">
<!-- Header info -->
<div class="flex items-start justify-between">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-lg bg-surface-container-highest border border-outline-variant flex items-center justify-center text-primary-fixed shadow-inner">
<span class="material-symbols-outlined text-2xl" data-icon="landscape">landscape</span>
</div>
<div>
<div class="flex items-center space-x-1.5">
<h2 class="font-headline-sm text-base font-bold text-on-surface">Bay Area Adventure</h2>
<span class="material-symbols-outlined text-primary-container text-sm" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
<p class="font-label-data text-label-data text-on-surface-variant">120 Pilots • NorCal & Sierra Foothills</p>
</div>
</div>
<span class="px-2 py-0.5 rounded bg-surface-container-high border border-outline-variant font-label-data text-[10px] text-secondary font-bold">RECRUITING</span>
</div>
<!-- Badges Cluster -->
<div class="flex flex-wrap gap-1.5 font-label-caption text-[10px]">
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
ADV / DUAL SPORT
</span>
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
MIXED (60% DIRT / 40% TARMAC)
</span>
</div>
<!-- Telemetry Stats Bento Block -->
<div class="grid grid-cols-3 gap-2 bg-surface-container-lowest/80 p-2.5 rounded-lg border border-outline-variant/50">
<div>
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Avg Stage</div>
<div class="font-telemetry-metric-md text-xl font-bold text-on-surface">240<span class="text-xs font-normal text-on-surface-variant">mi</span></div>
</div>
<div class="border-x border-outline-variant/40 px-2">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Elev Gain</div>
<div class="font-telemetry-metric-md text-xl font-bold text-primary-container">+6.4k<span class="text-xs font-normal text-on-surface-variant">ft</span></div>
</div>
<div class="text-right">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Sync Quality</div>
<div class="font-telemetry-metric-md text-xl font-bold text-primary">98.4<span class="text-xs font-normal text-on-surface-variant">%</span></div>
</div>
</div>
<!-- Pinned Route -->
<div class="flex items-center justify-between text-body-md text-xs bg-surface-container px-2.5 py-1.5 rounded border border-outline-variant/40">
<div class="flex items-center space-x-1.5 truncate text-on-surface-variant">
<span class="material-symbols-outlined text-sm text-primary-container" data-icon="terrain">terrain</span>
<span class="truncate font-body-md">Primary Patrol: <strong>Sonora Pass & Fire Roads</strong></span>
</div>
<span class="font-label-data text-[10px] text-on-surface-variant whitespace-nowrap">Grade 3 Offroad</span>
</div>
<!-- Action Button -->
<button class="w-full h-11 rounded-lg bg-surface-container-high border border-outline hover:border-primary-container text-on-surface font-label-data text-label-data font-semibold flex items-center justify-center space-x-2 active:scale-95 duration-100">
<span class="material-symbols-outlined text-base text-primary-container" data-icon="group_add">group_add</span>
<span>REQUEST TO JOIN SQUAD</span>
</button>
</article>
<!-- CLUB 3: Coastline Cruisers -->
<article class="bg-surface-container-low border border-outline-variant hover:border-primary-container/80 transition-all rounded-xl p-3.5 space-y-3 relative overflow-hidden">
<!-- Header info -->
<div class="flex items-start justify-between">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-lg bg-surface-container-highest border border-outline-variant flex items-center justify-center text-primary-container shadow-inner">
<span class="material-symbols-outlined text-2xl" data-icon="waves">waves</span>
</div>
<div>
<div class="flex items-center space-x-1.5">
<h2 class="font-headline-sm text-base font-bold text-on-surface">Coastline Cruisers</h2>
</div>
<p class="font-label-data text-label-data text-on-surface-variant">86 Pilots • Highway 1 Corridor • Pacific Chapter</p>
</div>
</div>
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant font-label-data text-[10px] text-on-surface font-bold">PACE 2</span>
</div>
<!-- Badges Cluster -->
<div class="flex flex-wrap gap-1.5 font-label-caption text-[10px]">
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
SCENIC CRUISE
</span>
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
ALL BIKES WELCOME
</span>
<span class="px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-on-surface">
WEEKEND ROLLOUT
</span>
</div>
<!-- Telemetry Stats Bento Block -->
<div class="grid grid-cols-3 gap-2 bg-surface-container-lowest/80 p-2.5 rounded-lg border border-outline-variant/50">
<div>
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Logged</div>
<div class="font-telemetry-metric-md text-xl font-bold text-on-surface">3.4k<span class="text-xs font-normal text-on-surface-variant">mi</span></div>
</div>
<div class="border-x border-outline-variant/40 px-2">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Safety Rating</div>
<div class="font-telemetry-metric-md text-xl font-bold text-primary-container">100<span class="text-xs font-normal text-on-surface-variant">%</span></div>
</div>
<div class="text-right">
<div class="font-label-data text-[10px] text-on-surface-variant uppercase">Rhythm</div>
<div class="font-telemetry-metric-md text-xl font-bold text-on-surface">Sun<span class="text-xs font-normal text-on-surface-variant">days</span></div>
</div>
</div>
<!-- Pinned Route -->
<div class="flex items-center justify-between text-body-md text-xs bg-surface-container px-2.5 py-1.5 rounded border border-outline-variant/40">
<div class="flex items-center space-x-1.5 truncate text-on-surface-variant">
<span class="material-symbols-outlined text-sm text-primary-container" data-icon="navigation">navigation</span>
<span class="truncate font-body-md">Primary Patrol: <strong>Half Moon Bay to Monterey Run</strong></span>
</div>
<span class="font-label-data text-[10px] text-on-surface-variant whitespace-nowrap">92 MI</span>
</div>
<!-- Action Button -->
<button class="w-full h-11 rounded-lg bg-surface-container-high border border-outline hover:border-primary-container text-on-surface font-label-data text-label-data font-semibold flex items-center justify-center space-x-2 active:scale-95 duration-100">
<span class="material-symbols-outlined text-base text-primary-container" data-icon="login">login</span>
<span>REQUEST TO JOIN</span>
</button>
</article>
<!-- CLUB 4: Desmo Syndicate Teaser / Invite -->
<article class="bg-surface-container border border-outline-variant/80 rounded-xl p-3.5 space-y-2 border-dashed">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-9 h-9 rounded-lg bg-error-container/40 border border-error/50 flex items-center justify-center text-error">
<span class="material-symbols-outlined text-lg" data-icon="lock">lock</span>
</div>
<div>
<h3 class="font-headline-sm text-sm font-bold text-on-surface">Sierra Ridge Trackday Syndicate</h3>
<p class="font-label-data text-[11px] text-on-surface-variant">Private Invitational Mesh • Laguna Seca Track Pack</p>
</div>
</div>
<span class="px-2 py-0.5 rounded bg-error-container/20 border border-error/40 font-label-data text-[10px] text-error">INVITE ONLY</span>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-data text-[11px] text-on-surface-variant">Requires Level 4 Telemetry Clearance</span>
<button class="h-8 px-3 rounded bg-surface-container-high text-on-surface hover:text-primary-container font-label-data text-[11px] font-semibold border border-outline-variant">
ENTER PIN
</button>
</div>
</article>
</div>
</main>
<!-- FLOATING ACTION BUTTON (Create Club Quick Access) -->
<div class="fixed bottom-20 right-4 z-40">
<button class="h-12 px-4 rounded-full bg-primary-container text-surface-container-lowest font-headline-sm text-sm font-bold flex items-center space-x-2 glow-cyan-btn active:scale-95 duration-100 hover:bg-surface-tint shadow-2xl">
<span class="material-symbols-outlined text-xl" data-icon="add">add</span>
<span>CREATE SQUAD</span>
</button>
</div>
<!-- BOTTOM NAVIGATION BAR (Shared Components JSON execution) -->
<!-- Destination count: 5 from JSON ("Dash", "Map", "Activity", "Garage", "Settings") -->
<!-- Active mapping: Activity / Telemetry / HUD context with high tactile 48px hit areas -->
<nav class="fixed bottom-0 left-0 w-full max-w-[420px] left-1/2 -translate-x-1/2 z-50 flex justify-around items-center px-space-xs py-space-xs bg-surface-container-lowest border-t border-outline-variant">
<!-- Dash -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#dash">
<span class="material-symbols-outlined text-xl" data-icon="speed">speed</span>
<span class="font-label-caption text-label-caption mt-0.5">Dash</span>
</a>
<!-- Map -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#map">
<span class="material-symbols-outlined text-xl" data-icon="navigation">navigation</span>
<span class="font-label-caption text-label-caption mt-0.5">Map</span>
</a>
<!-- Activity (Active destination for Discovery & Recon Hub) -->
<a class="flex flex-col items-center justify-center bg-surface-container-high text-primary-container rounded-lg px-2 py-1 min-h-[48px] active:scale-95 duration-100 ease-out" href="#activity">
<span class="material-symbols-outlined text-xl" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="font-label-caption text-label-caption mt-0.5 font-bold">Activity</span>
</a>
<!-- Garage -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#garage">
<span class="material-symbols-outlined text-xl" data-icon="two_wheeler">two_wheeler</span>
<span class="font-label-caption text-label-caption mt-0.5">Garage</span>
</a>
<!-- Settings -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#settings">
<span class="material-symbols-outlined text-xl" data-icon="settings">settings</span>
<span class="font-label-caption text-label-caption mt-0.5">Settings</span>
</a>
</nav>
</div>
</body></html>