diff --git a/apps/web/app/sidebar-variations/_components/mock-data.ts b/apps/web/app/sidebar-variations/_components/mock-data.ts
new file mode 100644
index 0000000..cf9ff18
--- /dev/null
+++ b/apps/web/app/sidebar-variations/_components/mock-data.ts
@@ -0,0 +1,74 @@
+import {
+ BarChart3,
+ BookOpen,
+ LayoutDashboard,
+ ListOrdered,
+ MessageSquare,
+ PencilLine,
+ Settings,
+ Settings2,
+ Trophy,
+ Users,
+ type LucideIcon,
+} from 'lucide-react'
+import { Icon } from '@/components/icon'
+
+export type NavItem = {
+ title: string
+ href: string
+ icon: LucideIcon
+ shortcut?: string
+ active?: boolean
+}
+
+export type NavSection = {
+ title: string
+ icon: LucideIcon
+ items: NavItem[]
+}
+
+export const navSections: NavSection[] = [
+ {
+ title: 'Tipping',
+ icon: Icon.Tipping,
+ items: [
+ {
+ title: 'Dashboard',
+ href: '#',
+ icon: LayoutDashboard,
+ shortcut: 'G D',
+ active: true,
+ },
+ { title: 'Enter tips', href: '#', icon: PencilLine, shortcut: 'G T' },
+ { title: 'Championships', href: '#', icon: Trophy, shortcut: 'G C' },
+ ],
+ },
+ {
+ title: 'Results',
+ icon: ListOrdered,
+ items: [
+ { title: 'Leaderboard', href: '#', icon: BarChart3, shortcut: 'G L' },
+ { title: 'Rules & Scoring', href: '#', icon: BookOpen, shortcut: 'G R' },
+ ],
+ },
+ {
+ title: 'Manage',
+ icon: Settings2,
+ items: [
+ { title: 'Groups', href: '#', icon: Users, shortcut: 'G G' },
+ { title: 'Feedback', href: '#', icon: MessageSquare, shortcut: 'G F' },
+ { title: 'Settings', href: '#', icon: Settings, shortcut: 'G S' },
+ ],
+ },
+]
+
+export const mockGroup = {
+ name: 'Box Box Tippers',
+ initials: 'BB',
+}
+
+export const mockUser = {
+ name: 'Lewis Hamilton',
+ email: 'lewis@gridtip.app',
+ initials: 'LH',
+}
diff --git a/apps/web/app/sidebar-variations/_components/variation-linear.tsx b/apps/web/app/sidebar-variations/_components/variation-linear.tsx
new file mode 100644
index 0000000..07e6d0d
--- /dev/null
+++ b/apps/web/app/sidebar-variations/_components/variation-linear.tsx
@@ -0,0 +1,81 @@
+import { ChevronDown, Search } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { mockGroup, mockUser, navSections } from './mock-data'
+
+export function VariationLinear() {
+ return (
+
+ )
+}
diff --git a/apps/web/app/sidebar-variations/_components/variation-racing.tsx b/apps/web/app/sidebar-variations/_components/variation-racing.tsx
new file mode 100644
index 0000000..d4721be
--- /dev/null
+++ b/apps/web/app/sidebar-variations/_components/variation-racing.tsx
@@ -0,0 +1,159 @@
+import { cn } from '@/lib/utils'
+import { mockGroup, mockUser, navSections } from './mock-data'
+
+const TEAM_COLORS = [
+ 'rgb(var(--clr-team-ferrari))',
+ 'rgb(var(--clr-team-mercedes))',
+ 'rgb(var(--clr-team-mclaren))',
+ 'rgb(var(--clr-team-red_bull))',
+ 'rgb(var(--clr-team-aston_martin))',
+ 'rgb(var(--clr-team-alpine))',
+ 'rgb(var(--clr-team-williams))',
+ 'rgb(var(--clr-team-haas))',
+]
+
+const carbonFibre = {
+ backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px)`,
+}
+
+export function VariationRacing() {
+ let position = 0
+
+ return (
+
+ )
+}
+
+function CheckeredDivider() {
+ return (
+
+ {Array.from({ length: 32 }).map((_, i) => (
+
+ ))}
+
+ )
+}
+
+function TrackMap() {
+ return (
+
+ )
+}
diff --git a/apps/web/app/sidebar-variations/_components/variation-rams.tsx b/apps/web/app/sidebar-variations/_components/variation-rams.tsx
new file mode 100644
index 0000000..cb3eda5
--- /dev/null
+++ b/apps/web/app/sidebar-variations/_components/variation-rams.tsx
@@ -0,0 +1,151 @@
+import { cn } from '@/lib/utils'
+import { mockUser, navSections } from './mock-data'
+
+const BRAUN_ORANGE = '#ff7a00'
+
+export function VariationRams() {
+ let runningIndex = 0
+
+ return (
+
+ )
+}
+
+function BraunDial() {
+ return (
+
+ )
+}
diff --git a/apps/web/app/sidebar-variations/_components/variation-similar.tsx b/apps/web/app/sidebar-variations/_components/variation-similar.tsx
new file mode 100644
index 0000000..3ef7692
--- /dev/null
+++ b/apps/web/app/sidebar-variations/_components/variation-similar.tsx
@@ -0,0 +1,64 @@
+import { ChevronsUpDown, LogOut } from 'lucide-react'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { mockGroup, mockUser, navSections } from './mock-data'
+
+export function VariationSimilar() {
+ return (
+
+ )
+}
diff --git a/apps/web/app/sidebar-variations/page.tsx b/apps/web/app/sidebar-variations/page.tsx
new file mode 100644
index 0000000..bd62a7d
--- /dev/null
+++ b/apps/web/app/sidebar-variations/page.tsx
@@ -0,0 +1,74 @@
+import { VariationLinear } from './_components/variation-linear'
+import { VariationRacing } from './_components/variation-racing'
+import { VariationRams } from './_components/variation-rams'
+import { VariationSimilar } from './_components/variation-similar'
+
+const variations = [
+ {
+ id: 'similar',
+ title: 'Similar',
+ description:
+ 'Layout alike to the current sidebar, but with per-link icons and section separators replacing the toggleable headers.',
+ component: ,
+ },
+ {
+ id: 'linear',
+ title: 'Industry best practices',
+ description:
+ 'Density, restraint, and refined micro-detail in the spirit of Linear and Emil Kowalski — flat list, ⌘K hint, keyboard shortcuts on hover.',
+ component: ,
+ },
+ {
+ id: 'rams',
+ title: 'The Rams',
+ description:
+ 'Dieter Rams meets Braun TS-505. Numbered grid, mono type, single accent of Braun orange, control-panel discipline.',
+ component: ,
+ },
+ {
+ id: 'racing',
+ title: 'Racing',
+ description:
+ 'F1 timing-tower aesthetic. Position prefixes, team-colour stripes, checkered dividers, Driver Card footer.',
+ component: ,
+ },
+]
+
+export default function SidebarVariationsPage() {
+ return (
+
+
+
+
+
+ {variations.map((variation) => (
+
+
+
{variation.title}
+
+ {variation.description}
+
+
+
+ {variation.component}
+
+
+ ))}
+
+