POL-124: Migrate frontend from React Native to Next.js web app

- Replace mobile/ (Expo) with web/ (Next.js 16 + Tailwind + shadcn/ui) - Pages: login, register, pending, championships, championship detail, registrations, profile, admin - Logic/view separated: hooks/ for data, components/ for UI, pages compose both - Types in src/types/ (one interface per file) - Auth: Zustand store + localStorage tokens + cookie presence flag for proxy - API layer: axios client with JWT auto-refresh Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-26 20:35:22 +03:00
parent 390c338b32
commit 9fcd7c1d63
94 changed files with 13713 additions and 10785 deletions
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/web/components.json
+++ b/web/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/web/next.config.ts
+++ b/web/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.5.0",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}
--- a/web/postcss.config.mjs
+++ b/web/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/web/public/file.svg
+++ b/web/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/web/public/globe.svg
+++ b/web/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/web/public/next.svg
+++ b/web/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/web/public/vercel.svg
+++ b/web/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/web/public/window.svg
+++ b/web/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/web/src/app/(app)/admin/page.tsx
+++ b/web/src/app/(app)/admin/page.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useUsers, useUserActions } from "@/hooks/useUsers";
+import { useAuth } from "@/store/useAuth";
+import { UserCard } from "@/components/UserCard";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+type Filter = "pending" | "all";
+
+export default function AdminPage() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const { data, isLoading, error } = useUsers();
+  const { approve, reject } = useUserActions();
+  const [filter, setFilter] = useState<Filter>("pending");
+
+  useEffect(() => {
+    if (user && user.role !== "admin") router.replace("/championships");
+  }, [user, router]);
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load users.</p>;
+
+  const pending = data?.filter((u) => u.status === "pending") ?? [];
+  const shown = filter === "pending" ? pending : (data ?? []);
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">User Management</h1>
+
+      <div className="mb-4 flex gap-2">
+        <button
+          onClick={() => setFilter("pending")}
+          className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+            filter === "pending" ? "bg-violet-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+          }`}
+        >
+          Pending ({pending.length})
+        </button>
+        <button
+          onClick={() => setFilter("all")}
+          className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+            filter === "all" ? "bg-violet-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+          }`}
+        >
+          All users ({data?.length ?? 0})
+        </button>
+      </div>
+
+      {shown.length === 0 ? (
+        <p className="text-center text-gray-400 py-12">No users in this category.</p>
+      ) : (
+        <div className="space-y-3 max-w-2xl">
+          {shown.map((u) => (
+            <UserCard
+              key={u.id}
+              user={u}
+              onApprove={(id) => approve.mutate(id)}
+              onReject={(id) => reject.mutate(id)}
+              isActing={approve.isPending || reject.isPending}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/web/src/app/(app)/championships/[id]/page.tsx
+++ b/web/src/app/(app)/championships/[id]/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { use } from "react";
+import { useChampionship } from "@/hooks/useChampionship";
+import { useMyRegistrations } from "@/hooks/useMyRegistrations";
+import { useRegisterForChampionship } from "@/hooks/useRegisterForChampionship";
+import { useAuth } from "@/store/useAuth";
+import { RegistrationTimeline } from "@/components/RegistrationTimeline";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+export default function ChampionshipDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const user = useAuth((s) => s.user);
+
+  const { data: championship, isLoading, error } = useChampionship(id);
+  const { data: myRegs } = useMyRegistrations();
+  const registerMutation = useRegisterForChampionship(id);
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error || !championship) return <p className="text-center text-red-500 py-20">Championship not found.</p>;
+
+  const myReg = myRegs?.find((r) => r.championship_id === id);
+  const canRegister = championship.status === "open" && !myReg;
+
+  const eventDate = championship.event_date
+    ? new Date(championship.event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
+    : null;
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* Header image */}
+      {championship.image_url ? (
+        <img src={championship.image_url} alt={championship.title} className="w-full h-56 object-cover rounded-xl" />
+      ) : (
+        <div className="w-full h-56 rounded-xl bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center text-6xl">
+          🏆
+        </div>
+      )}
+
+      {/* Title + status */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{championship.title}</h1>
+          {championship.subtitle && <p className="text-gray-500 mt-1">{championship.subtitle}</p>}
+        </div>
+        <StatusBadge status={championship.status} />
+      </div>
+
+      {/* Details */}
+      <div className="space-y-2 text-sm text-gray-600">
+        {championship.location && <p>📍 {championship.location}</p>}
+        {championship.venue && <p>🏛 {championship.venue}</p>}
+        {eventDate && <p>📅 {eventDate}</p>}
+        {championship.entry_fee != null && <p>💳 Entry fee: <strong>{championship.entry_fee} ₽</strong></p>}
+        {championship.video_max_duration != null && (
+          <p>🎬 Max video: <strong>{Math.floor(championship.video_max_duration / 60)}m {championship.video_max_duration % 60}s</strong></p>
+        )}
+      </div>
+
+      {championship.description && (
+        <>
+          <Separator />
+          <p className="text-gray-700 whitespace-pre-line">{championship.description}</p>
+        </>
+      )}
+
+      <Separator />
+
+      {/* Registration section */}
+      {myReg && <RegistrationTimeline registration={myReg} />}
+
+      {canRegister && (
+        <Button
+          className="w-full bg-violet-600 hover:bg-violet-700"
+          disabled={registerMutation.isPending}
+          onClick={() => registerMutation.mutate()}
+        >
+          {registerMutation.isPending ? "Registering…" : "Register for this championship"}
+        </Button>
+      )}
+
+      {championship.status !== "open" && !myReg && (
+        <p className="text-center text-sm text-gray-400">Registration is not open.</p>
+      )}
+
+      {championship.form_url && (
+        <a
+          href={championship.form_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block text-center text-sm text-violet-600 hover:underline"
+        >
+          Open registration form ↗
+        </a>
+      )}
+    </div>
+  );
+}
--- a/web/src/app/(app)/championships/page.tsx
+++ b/web/src/app/(app)/championships/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useChampionships } from "@/hooks/useChampionships";
+import { ChampionshipCard } from "@/components/ChampionshipCard";
+
+export default function ChampionshipsPage() {
+  const { data, isLoading, error } = useChampionships();
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load championships.</p>;
+  if (!data?.length) return <p className="text-center text-gray-400 py-20">No championships yet.</p>;
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">Championships</h1>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {data.map((c) => (
+          <ChampionshipCard key={c.id} championship={c} />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/web/src/app/(app)/layout.tsx
+++ b/web/src/app/(app)/layout.tsx
@@ -0,0 +1,10 @@
+import { Navbar } from "@/components/Navbar";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
+    </>
+  );
+}
--- a/web/src/app/(app)/profile/page.tsx
+++ b/web/src/app/(app)/profile/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/store/useAuth";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+const ROLE_COLORS: Record<string, string> = {
+  admin: "bg-red-100 text-red-700",
+  organizer: "bg-violet-100 text-violet-700",
+  member: "bg-green-100 text-green-700",
+};
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const logout = useAuth((s) => s.logout);
+
+  if (!user) return null;
+
+  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  const joinedDate = new Date(user.created_at).toLocaleDateString("en-GB", { month: "long", year: "numeric" });
+
+  async function handleLogout() {
+    await logout();
+    router.push("/login");
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <div className="flex flex-col items-center gap-3 pt-4">
+        <Avatar className="h-20 w-20">
+          <AvatarFallback className="bg-violet-100 text-violet-700 text-2xl font-bold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        <div className="text-center">
+          <p className="text-xl font-bold text-gray-900">{user.full_name}</p>
+          <p className="text-sm text-gray-500">{user.email}</p>
+        </div>
+        <Badge className={`${ROLE_COLORS[user.role] ?? "bg-gray-100"} border-0 capitalize`}>
+          {user.role}
+        </Badge>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-3 text-sm text-gray-700">
+        {user.phone && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Phone</span>
+            <span>{user.phone}</span>
+          </div>
+        )}
+        {user.organization_name && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Organization</span>
+            <span>{user.organization_name}</span>
+          </div>
+        )}
+        {user.instagram_handle && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Instagram</span>
+            <span>{user.instagram_handle}</span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span className="text-gray-400">Member since</span>
+          <span>{joinedDate}</span>
+        </div>
+      </div>
+
+      <Separator />
+
+      <Button variant="destructive" className="w-full" onClick={handleLogout}>
+        Sign out
+      </Button>
+    </div>
+  );
+}
--- a/web/src/app/(app)/registrations/page.tsx
+++ b/web/src/app/(app)/registrations/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useMyRegistrations } from "@/hooks/useMyRegistrations";
+import { RegistrationCard } from "@/components/RegistrationCard";
+
+export default function RegistrationsPage() {
+  const { data, isLoading, error } = useMyRegistrations();
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load registrations.</p>;
+  if (!data?.length) return (
+    <div className="text-center py-20 text-gray-400">
+      <p className="text-4xl mb-3">📋</p>
+      <p>No registrations yet.</p>
+    </div>
+  );
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">My Registrations</h1>
+      <div className="space-y-3 max-w-2xl">
+        {data.map((r) => (
+          <RegistrationCard key={r.id} registration={r} />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/web/src/app/(auth)/layout.tsx
+++ b/web/src/app/(auth)/layout.tsx
@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-violet-50 to-purple-100 p-4">
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  );
+}
--- a/web/src/app/(auth)/login/page.tsx
+++ b/web/src/app/(auth)/login/page.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { useLoginForm } from "@/hooks/useLoginForm";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function LoginPage() {
+  const { email, setEmail, password, setPassword, error, isLoading, submit } = useLoginForm();
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 text-4xl">🏆</div>
+        <CardTitle className="text-2xl">Welcome back</CardTitle>
+        <CardDescription>Sign in to your account</CardDescription>
+      </CardHeader>
+
+      <form onSubmit={submit}>
+        <CardContent className="space-y-4">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+
+          <div className="space-y-1">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
+            {isLoading ? "Signing in…" : "Sign in"}
+          </Button>
+          <p className="text-center text-sm text-gray-500">
+            No account?{" "}
+            <Link href="/register" className="font-medium text-violet-600 hover:underline">
+              Register
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
--- a/web/src/app/(auth)/pending/page.tsx
+++ b/web/src/app/(auth)/pending/page.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function PendingPage() {
+  return (
+    <Card className="text-center">
+      <CardHeader>
+        <div className="mx-auto mb-2 text-5xl">⏳</div>
+        <CardTitle className="text-2xl">Awaiting approval</CardTitle>
+        <CardDescription>
+          Your organizer account has been submitted. An admin will review it shortly.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="mb-6 text-sm text-gray-500">
+          Once approved you can log in and start creating championships.
+        </p>
+        <Button asChild variant="outline" className="w-full">
+          <Link href="/login">Back to login</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
--- a/web/src/app/(auth)/register/page.tsx
+++ b/web/src/app/(auth)/register/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { useRegisterForm } from "@/hooks/useRegisterForm";
+import { MemberFields } from "@/components/auth/MemberFields";
+import { OrganizerFields } from "@/components/auth/OrganizerFields";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function RegisterPage() {
+  const { role, setRole, form, update, error, isLoading, submit } = useRegisterForm();
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 text-4xl">🏅</div>
+        <CardTitle className="text-2xl">Create account</CardTitle>
+        <CardDescription>Join the pole dance community</CardDescription>
+      </CardHeader>
+
+      <form onSubmit={submit}>
+        <CardContent className="space-y-4">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+
+          <div className="grid grid-cols-2 gap-2">
+            {(["member", "organizer"] as const).map((r) => (
+              <button
+                key={r}
+                type="button"
+                onClick={() => setRole(r)}
+                className={`rounded-lg border-2 p-3 text-sm font-medium transition-colors ${
+                  role === r ? "border-violet-600 bg-violet-50 text-violet-700" : "border-gray-200 text-gray-600 hover:border-gray-300"
+                }`}
+              >
+                {r === "member" ? "🏅 Athlete" : "🏆 Organizer"}
+              </button>
+            ))}
+          </div>
+
+          <MemberFields
+            full_name={form.full_name}
+            email={form.email}
+            password={form.password}
+            phone={form.phone}
+            onChange={update}
+          />
+
+          {role === "organizer" && (
+            <OrganizerFields
+              organization_name={form.organization_name}
+              instagram_handle={form.instagram_handle}
+              onChange={update}
+            />
+          )}
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
+            {isLoading ? "Creating…" : role === "member" ? "Create account" : "Submit for approval"}
+          </Button>
+          <p className="text-center text-sm text-gray-500">
+            Have an account?{" "}
+            <Link href="/login" className="font-medium text-violet-600 hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
--- a/web/src/app/favicon.ico
+++ b/web/src/app/favicon.ico
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const geist = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
+
+export const metadata: Metadata = {
+  title: "Pole Dance Championships",
+  description: "Register and track pole dance championship events",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${geist.variable} font-sans antialiased bg-gray-50`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/championships");
+}
--- a/web/src/app/providers.tsx
+++ b/web/src/app/providers.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import { useAuth } from "@/store/useAuth";
+
+function AuthInitializer({ children }: { children: React.ReactNode }) {
+  const initialize = useAuth((s) => s.initialize);
+  const isInitialized = useAuth((s) => s.isInitialized);
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  if (!isInitialized) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-violet-600 border-t-transparent" />
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { retry: 1, staleTime: 30_000 } } })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthInitializer>{children}</AuthInitializer>
+    </QueryClientProvider>
+  );
+}
--- a/web/src/components/ChampionshipCard.tsx
+++ b/web/src/components/ChampionshipCard.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Championship } from "@/types/championship";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface Props {
+  championship: Championship;
+}
+
+export function ChampionshipCard({ championship: c }: Props) {
+  const date = c.event_date
+    ? new Date(c.event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
+    : null;
+
+  return (
+    <Link href={`/championships/${c.id}`}>
+      <Card className="overflow-hidden transition-shadow hover:shadow-md cursor-pointer h-full">
+        {c.image_url ? (
+          <img src={c.image_url} alt={c.title} className="h-40 w-full object-cover" />
+        ) : (
+          <div className="h-40 w-full bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center text-4xl">
+            🏆
+          </div>
+        )}
+        <CardContent className="p-4 space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <h2 className="font-semibold text-gray-900 leading-tight">{c.title}</h2>
+            <StatusBadge status={c.status} />
+          </div>
+          {c.location && <p className="text-sm text-gray-500">📍 {c.location}</p>}
+          {date && <p className="text-sm text-gray-500">📅 {date}</p>}
+          {c.entry_fee != null && <p className="text-sm font-medium text-violet-700">💳 {c.entry_fee} ₽</p>}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/store/useAuth";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const NAV_LINKS = [
+  { href: "/championships", label: "Championships" },
+  { href: "/registrations", label: "My Registrations" },
+];
+
+export function Navbar() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const logout = useAuth((s) => s.logout);
+
+  async function handleLogout() {
+    await logout();
+    router.push("/login");
+  }
+
+  const initials = user?.full_name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2) ?? "?";
+
+  return (
+    <header className="sticky top-0 z-50 border-b bg-white">
+      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
+        <div className="flex items-center gap-6">
+          <Link href="/championships" className="text-lg font-bold text-violet-700">
+            🏆 DanceChamp
+          </Link>
+          <nav className="hidden gap-4 text-sm font-medium text-gray-600 sm:flex">
+            {NAV_LINKS.map((link) => (
+              <Link key={link.href} href={link.href} className="hover:text-violet-700 transition-colors">
+                {link.label}
+              </Link>
+            ))}
+            {user?.role === "admin" && (
+              <Link href="/admin" className="hover:text-violet-700 transition-colors">
+                Admin
+              </Link>
+            )}
+          </nav>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="rounded-full focus:outline-none focus:ring-2 focus:ring-violet-500">
+              <Avatar className="h-8 w-8 cursor-pointer">
+                <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-44">
+            <DropdownMenuItem asChild>
+              <Link href="/profile">Profile</Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout} className="text-red-600 focus:text-red-600">
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}
--- a/web/src/components/RegistrationCard.tsx
+++ b/web/src/components/RegistrationCard.tsx
@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { Registration } from "@/types/registration";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Card, CardContent } from "@/components/ui/card";
+
+const STEPS = ["submitted", "form_submitted", "payment_pending", "payment_confirmed", "video_submitted", "accepted"];
+
+interface Props {
+  registration: Registration;
+}
+
+export function RegistrationCard({ registration: r }: Props) {
+  const date = r.championship_event_date
+    ? new Date(r.championship_event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
+    : null;
+
+  const stepIndex = STEPS.indexOf(r.status);
+
+  return (
+    <Link href={`/championships/${r.championship_id}`}>
+      <Card className="hover:shadow-md transition-shadow cursor-pointer">
+        <CardContent className="p-4 space-y-3">
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              <p className="font-semibold text-gray-900">{r.championship_title ?? "Championship"}</p>
+              {r.championship_location && <p className="text-sm text-gray-500">📍 {r.championship_location}</p>}
+              {date && <p className="text-sm text-gray-500">📅 {date}</p>}
+            </div>
+            <StatusBadge status={r.status} type="registration" />
+          </div>
+
+          {/* Progress dots */}
+          <div className="flex gap-1.5">
+            {STEPS.map((_, i) => (
+              <div
+                key={i}
+                className={`h-2 flex-1 rounded-full ${
+                  i <= stepIndex ? "bg-violet-500" : "bg-gray-200"
+                }`}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
--- a/web/src/components/RegistrationTimeline.tsx
+++ b/web/src/components/RegistrationTimeline.tsx
@@ -0,0 +1,57 @@
+import { Registration } from "@/types/registration";
+
+const STEPS: { key: string; label: string }[] = [
+  { key: "submitted", label: "Submitted" },
+  { key: "form_submitted", label: "Form submitted" },
+  { key: "payment_pending", label: "Payment pending" },
+  { key: "payment_confirmed", label: "Payment confirmed" },
+  { key: "video_submitted", label: "Video submitted" },
+  { key: "accepted", label: "Accepted" },
+];
+
+interface Props {
+  registration: Registration;
+}
+
+export function RegistrationTimeline({ registration }: Props) {
+  const currentIndex = STEPS.findIndex((s) => s.key === registration.status);
+  const isRejected = registration.status === "rejected";
+  const isWaitlisted = registration.status === "waitlisted";
+
+  if (isRejected) {
+    return (
+      <div className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
+        Your registration was <strong>rejected</strong>.
+      </div>
+    );
+  }
+
+  if (isWaitlisted) {
+    return (
+      <div className="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-700">
+        You are on the <strong>waitlist</strong>.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-gray-700">Registration progress</p>
+      <ol className="space-y-2">
+        {STEPS.map((step, i) => {
+          const done = i <= currentIndex;
+          return (
+            <li key={step.key} className="flex items-center gap-3 text-sm">
+              <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
+                done ? "bg-violet-600 text-white" : "bg-gray-200 text-gray-400"
+              }`}>
+                {done ? "✓" : i + 1}
+              </span>
+              <span className={done ? "text-gray-900" : "text-gray-400"}>{step.label}</span>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
--- a/web/src/components/StatusBadge.tsx
+++ b/web/src/components/StatusBadge.tsx
@@ -0,0 +1,32 @@
+import { Badge } from "@/components/ui/badge";
+
+const CHAMPIONSHIP_COLORS: Record<string, string> = {
+  open: "bg-green-100 text-green-700",
+  closed: "bg-gray-100 text-gray-600",
+  draft: "bg-yellow-100 text-yellow-700",
+  completed: "bg-blue-100 text-blue-700",
+};
+
+const REGISTRATION_COLORS: Record<string, string> = {
+  submitted: "bg-gray-100 text-gray-600",
+  form_submitted: "bg-yellow-100 text-yellow-700",
+  payment_pending: "bg-orange-100 text-orange-700",
+  payment_confirmed: "bg-blue-100 text-blue-700",
+  video_submitted: "bg-violet-100 text-violet-700",
+  accepted: "bg-green-100 text-green-700",
+  rejected: "bg-red-100 text-red-700",
+  waitlisted: "bg-amber-100 text-amber-700",
+};
+
+interface Props {
+  status: string;
+  type?: "championship" | "registration";
+}
+
+export function StatusBadge({ status, type = "championship" }: Props) {
+  const map = type === "championship" ? CHAMPIONSHIP_COLORS : REGISTRATION_COLORS;
+  const color = map[status] ?? "bg-gray-100 text-gray-600";
+  return (
+    <Badge className={`${color} border-0 capitalize`}>{status.replace("_", " ")}</Badge>
+  );
+}
--- a/web/src/components/UserCard.tsx
+++ b/web/src/components/UserCard.tsx
@@ -0,0 +1,59 @@
+import { UserOut } from "@/types/user";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  user: UserOut;
+  onApprove?: (id: string) => void;
+  onReject?: (id: string) => void;
+  isActing?: boolean;
+}
+
+const STATUS_DOT: Record<string, string> = {
+  pending: "bg-orange-400",
+  approved: "bg-green-500",
+  rejected: "bg-red-500",
+};
+
+export function UserCard({ user, onApprove, onReject, isActing }: Props) {
+  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+
+  return (
+    <Card>
+      <CardContent className="p-4 flex gap-4 items-start">
+        <Avatar className="h-10 w-10 shrink-0">
+          <AvatarFallback className="bg-violet-100 text-violet-700 text-sm font-semibold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="flex-1 min-w-0 space-y-1">
+          <div className="flex items-center gap-2">
+            <p className="font-semibold text-gray-900">{user.full_name}</p>
+            <span className={`h-2 w-2 rounded-full shrink-0 ${STATUS_DOT[user.status] ?? "bg-gray-400"}`} />
+          </div>
+          <p className="text-sm text-gray-500">{user.email}</p>
+          {user.organization_name && <p className="text-sm text-gray-500">🏢 {user.organization_name}</p>}
+          {user.phone && <p className="text-sm text-gray-500">📞 {user.phone}</p>}
+          {user.instagram_handle && <p className="text-sm text-gray-500">📸 {user.instagram_handle}</p>}
+        </div>
+
+        {user.status === "pending" && onApprove && onReject && (
+          <div className="flex gap-2 shrink-0">
+            <Button size="sm" className="bg-green-600 hover:bg-green-700" disabled={isActing} onClick={() => onApprove(user.id)}>
+              Approve
+            </Button>
+            <Button size="sm" variant="destructive" disabled={isActing} onClick={() => onReject(user.id)}>
+              Reject
+            </Button>
+          </div>
+        )}
+
+        {user.status !== "pending" && (
+          <span className="text-xs text-gray-400 capitalize shrink-0">{user.status}</span>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/web/src/components/auth/MemberFields.tsx
+++ b/web/src/components/auth/MemberFields.tsx
@@ -0,0 +1,33 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface Props {
+  full_name: string;
+  email: string;
+  password: string;
+  phone: string;
+  onChange: (field: string, value: string) => void;
+}
+
+export function MemberFields({ full_name, email, password, phone, onChange }: Props) {
+  return (
+    <>
+      <div className="space-y-1">
+        <Label htmlFor="full_name">Full name</Label>
+        <Input id="full_name" value={full_name} onChange={(e) => onChange("full_name", e.target.value)} required />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" value={email} onChange={(e) => onChange("email", e.target.value)} required />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="password">Password</Label>
+        <Input id="password" type="password" value={password} onChange={(e) => onChange("password", e.target.value)} required />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="phone">Phone (optional)</Label>
+        <Input id="phone" type="tel" value={phone} onChange={(e) => onChange("phone", e.target.value)} />
+      </div>
+    </>
+  );
+}
--- a/web/src/components/auth/OrganizerFields.tsx
+++ b/web/src/components/auth/OrganizerFields.tsx
@@ -0,0 +1,26 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface Props {
+  organization_name: string;
+  instagram_handle: string;
+  onChange: (field: string, value: string) => void;
+}
+
+export function OrganizerFields({ organization_name, instagram_handle, onChange }: Props) {
+  return (
+    <>
+      <p className="rounded-md bg-amber-50 px-3 py-2 text-xs text-amber-700">
+        Organizer accounts require admin approval before you can log in.
+      </p>
+      <div className="space-y-1">
+        <Label htmlFor="org">Organization name</Label>
+        <Input id="org" value={organization_name} onChange={(e) => onChange("organization_name", e.target.value)} required />
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="ig">Instagram (optional)</Label>
+        <Input id="ig" placeholder="@yourstudio" value={instagram_handle} onChange={(e) => onChange("instagram_handle", e.target.value)} />
+      </div>
+    </>
+  );
+}
--- a/web/src/components/ui/avatar.tsx
+++ b/web/src/components/ui/avatar.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/web/src/components/ui/separator.tsx
+++ b/web/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/web/src/hooks/useChampionship.ts
+++ b/web/src/hooks/useChampionship.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { championshipsApi } from "@/lib/api/championships";
+
+export function useChampionship(id: string) {
+  return useQuery({
+    queryKey: ["championship", id],
+    queryFn: () => championshipsApi.get(id),
+    enabled: !!id,
+  });
+}
--- a/web/src/hooks/useChampionships.ts
+++ b/web/src/hooks/useChampionships.ts
@@ -0,0 +1,11 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { championshipsApi } from "@/lib/api/championships";
+
+export function useChampionships() {
+  return useQuery({
+    queryKey: ["championships"],
+    queryFn: () => championshipsApi.list(),
+  });
+}
--- a/web/src/hooks/useLoginForm.ts
+++ b/web/src/hooks/useLoginForm.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/store/useAuth";
+
+export function useLoginForm() {
+  const router = useRouter();
+  const login = useAuth((s) => s.login);
+  const isLoading = useAuth((s) => s.isLoading);
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  async function submit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError("");
+    try {
+      await login(email, password);
+      router.push("/championships");
+    } catch {
+      setError("Invalid email or password");
+    }
+  }
+
+  return { email, setEmail, password, setPassword, error, isLoading, submit };
+}
--- a/web/src/hooks/useMyRegistrations.ts
+++ b/web/src/hooks/useMyRegistrations.ts
@@ -0,0 +1,11 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { registrationsApi } from "@/lib/api/registrations";
+
+export function useMyRegistrations() {
+  return useQuery({
+    queryKey: ["registrations", "my"],
+    queryFn: () => registrationsApi.my(),
+  });
+}
--- a/web/src/hooks/useRegisterForChampionship.ts
+++ b/web/src/hooks/useRegisterForChampionship.ts
@@ -0,0 +1,15 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { registrationsApi } from "@/lib/api/registrations";
+
+export function useRegisterForChampionship(championshipId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => registrationsApi.create({ championship_id: championshipId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["registrations", "my"] });
+    },
+  });
+}
--- a/web/src/hooks/useRegisterForm.ts
+++ b/web/src/hooks/useRegisterForm.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/store/useAuth";
+
+export function useRegisterForm() {
+  const router = useRouter();
+  const register = useAuth((s) => s.register);
+  const isLoading = useAuth((s) => s.isLoading);
+
+  const [role, setRole] = useState<"member" | "organizer">("member");
+  const [form, setForm] = useState({
+    full_name: "",
+    email: "",
+    password: "",
+    phone: "",
+    organization_name: "",
+    instagram_handle: "",
+  });
+  const [error, setError] = useState("");
+
+  function update(field: string, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  async function submit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError("");
+    try {
+      const result = await register({
+        ...form,
+        requested_role: role,
+        phone: form.phone || undefined,
+        organization_name: role === "organizer" ? form.organization_name : undefined,
+        instagram_handle: form.instagram_handle || undefined,
+      });
+      router.push(result === "approved" ? "/championships" : "/pending");
+    } catch {
+      setError("Registration failed. Please check your details and try again.");
+    }
+  }
+
+  return { role, setRole, form, update, error, isLoading, submit };
+}
--- a/web/src/hooks/useUsers.ts
+++ b/web/src/hooks/useUsers.ts
@@ -0,0 +1,27 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { usersApi } from "@/lib/api/users";
+
+export function useUsers() {
+  return useQuery({
+    queryKey: ["users"],
+    queryFn: () => usersApi.list(),
+  });
+}
+
+export function useUserActions() {
+  const queryClient = useQueryClient();
+
+  const approve = useMutation({
+    mutationFn: (id: string) => usersApi.approve(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }),
+  });
+
+  const reject = useMutation({
+    mutationFn: (id: string) => usersApi.reject(id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }),
+  });
+
+  return { approve, reject };
+}
--- a/web/src/lib/api/auth.ts
+++ b/web/src/lib/api/auth.ts
@@ -0,0 +1,32 @@
+import { apiClient } from "./client";
+import { UserOut } from "@/types/user";
+import { TokenPair } from "@/types/tokenPair";
+import { RegisterResponse } from "@/types/registerResponse";
+
+export type { UserOut, TokenPair, RegisterResponse };
+
+export const authApi = {
+  register: (data: {
+    email: string;
+    password: string;
+    full_name: string;
+    phone?: string;
+    requested_role?: "member" | "organizer";
+    organization_name?: string;
+    instagram_handle?: string;
+  }) => apiClient.post<RegisterResponse>("/auth/register", data).then((r) => r.data),
+
+  login: (data: { email: string; password: string }) =>
+    apiClient.post<TokenPair>("/auth/login", data).then((r) => r.data),
+
+  refresh: (refresh_token: string) =>
+    apiClient.post<{ access_token: string; refresh_token: string }>("/auth/refresh", { refresh_token }).then((r) => r.data),
+
+  logout: (refresh_token: string) =>
+    apiClient.post("/auth/logout", { refresh_token }),
+
+  me: () => apiClient.get<UserOut>("/auth/me").then((r) => r.data),
+
+  updateMe: (data: Partial<Pick<UserOut, "full_name" | "phone" | "organization_name" | "instagram_handle">>) =>
+    apiClient.patch<UserOut>("/auth/me", data).then((r) => r.data),
+};
--- a/web/src/lib/api/championships.ts
+++ b/web/src/lib/api/championships.ts
@@ -0,0 +1,21 @@
+import { apiClient } from "./client";
+import { Championship } from "@/types/championship";
+
+export type { Championship };
+
+export const championshipsApi = {
+  list: (status?: string) =>
+    apiClient.get<Championship[]>("/championships", { params: status ? { status } : {} }).then((r) => r.data),
+
+  get: (id: string) =>
+    apiClient.get<Championship>(`/championships/${id}`).then((r) => r.data),
+
+  create: (data: Partial<Championship>) =>
+    apiClient.post<Championship>("/championships", data).then((r) => r.data),
+
+  update: (id: string, data: Partial<Championship>) =>
+    apiClient.patch<Championship>(`/championships/${id}`, data).then((r) => r.data),
+
+  delete: (id: string) =>
+    apiClient.delete(`/championships/${id}`),
+};
--- a/web/src/lib/api/client.ts
+++ b/web/src/lib/api/client.ts
@@ -0,0 +1,72 @@
+import axios from "axios";
+import { getAccessToken, getRefreshToken, saveTokens, clearTokens } from "@/lib/tokenStorage";
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000/api/v1";
+
+export const apiClient = axios.create({
+  baseURL: BASE_URL,
+  timeout: 10000,
+});
+
+// Attach access token to every request
+apiClient.interceptors.request.use((config) => {
+  const token = getAccessToken();
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// Queue for requests waiting on token refresh
+let isRefreshing = false;
+let waitQueue: Array<(token: string) => void> = [];
+
+function processQueue(newToken: string) {
+  waitQueue.forEach((resolve) => resolve(newToken));
+  waitQueue = [];
+}
+
+// Auto-refresh on 401
+apiClient.interceptors.response.use(
+  (res) => res,
+  async (error) => {
+    const original = error.config;
+    if (error.response?.status !== 401 || original._retry) {
+      return Promise.reject(error);
+    }
+
+    const refreshToken = getRefreshToken();
+    if (!refreshToken) {
+      clearTokens();
+      if (typeof window !== "undefined") window.location.href = "/login";
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise((resolve) => {
+        waitQueue.push((token) => {
+          original.headers.Authorization = `Bearer ${token}`;
+          resolve(apiClient(original));
+        });
+      });
+    }
+
+    original._retry = true;
+    isRefreshing = true;
+
+    try {
+      const res = await axios.post(`${BASE_URL}/auth/refresh`, { refresh_token: refreshToken });
+      const { access_token, refresh_token: newRefresh } = res.data;
+      saveTokens(access_token, newRefresh);
+      processQueue(access_token);
+      original.headers.Authorization = `Bearer ${access_token}`;
+      return apiClient(original);
+    } catch {
+      clearTokens();
+      if (typeof window !== "undefined") window.location.href = "/login";
+      return Promise.reject(error);
+    } finally {
+      isRefreshing = false;
+    }
+  }
+);
--- a/web/src/lib/api/registrations.ts
+++ b/web/src/lib/api/registrations.ts
@@ -0,0 +1,21 @@
+import { apiClient } from "./client";
+import { Registration } from "@/types/registration";
+
+export type { Registration };
+
+export const registrationsApi = {
+  create: (data: { championship_id: string; category?: string; level?: string; notes?: string }) =>
+    apiClient.post<Registration>("/registrations", data).then((r) => r.data),
+
+  my: () =>
+    apiClient.get<Registration[]>("/registrations/my").then((r) => r.data),
+
+  get: (id: string) =>
+    apiClient.get<Registration>(`/registrations/${id}`).then((r) => r.data),
+
+  update: (id: string, data: { video_url?: string; notes?: string; status?: string }) =>
+    apiClient.patch<Registration>(`/registrations/${id}`, data).then((r) => r.data),
+
+  cancel: (id: string) =>
+    apiClient.delete(`/registrations/${id}`),
+};
--- a/web/src/lib/api/users.ts
+++ b/web/src/lib/api/users.ts
@@ -0,0 +1,15 @@
+import { apiClient } from "./client";
+import { UserOut } from "@/types/user";
+
+export type { UserOut };
+
+export const usersApi = {
+  list: () =>
+    apiClient.get<UserOut[]>("/users").then((r) => r.data),
+
+  approve: (id: string) =>
+    apiClient.patch<UserOut>(`/users/${id}/approve`).then((r) => r.data),
+
+  reject: (id: string) =>
+    apiClient.patch<UserOut>(`/users/${id}/reject`).then((r) => r.data),
+};
--- a/web/src/lib/tokenStorage.ts
+++ b/web/src/lib/tokenStorage.ts
@@ -0,0 +1,60 @@
+const ACCESS_KEY = "access_token";
+const REFRESH_KEY = "refresh_token";
+
+let _accessToken: string | null = null;
+let _refreshToken: string | null = null;
+
+function setCookie(name: string, days: number) {
+  const expires = new Date(Date.now() + days * 864e5).toUTCString();
+  document.cookie = `${name}=1; expires=${expires}; path=/; SameSite=Lax`;
+}
+
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+}
+
+export function saveTokens(access: string, refresh: string) {
+  _accessToken = access;
+  _refreshToken = refresh;
+  if (typeof window !== "undefined") {
+    localStorage.setItem(ACCESS_KEY, access);
+    localStorage.setItem(REFRESH_KEY, refresh);
+    // Presence-only cookies so Next.js middleware can check auth on the edge
+    setCookie(ACCESS_KEY, 1);
+    setCookie(REFRESH_KEY, 7);
+  }
+}
+
+export function getAccessToken(): string | null {
+  if (_accessToken) return _accessToken;
+  if (typeof window !== "undefined") {
+    _accessToken = localStorage.getItem(ACCESS_KEY);
+  }
+  return _accessToken;
+}
+
+export function getRefreshToken(): string | null {
+  if (_refreshToken) return _refreshToken;
+  if (typeof window !== "undefined") {
+    _refreshToken = localStorage.getItem(REFRESH_KEY);
+  }
+  return _refreshToken;
+}
+
+export function clearTokens() {
+  _accessToken = null;
+  _refreshToken = null;
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(ACCESS_KEY);
+    localStorage.removeItem(REFRESH_KEY);
+    deleteCookie(ACCESS_KEY);
+    deleteCookie(REFRESH_KEY);
+  }
+}
+
+export function loadFromStorage() {
+  if (typeof window !== "undefined") {
+    _accessToken = localStorage.getItem(ACCESS_KEY);
+    _refreshToken = localStorage.getItem(REFRESH_KEY);
+  }
+}
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/web/src/proxy.ts
+++ b/web/src/proxy.ts
@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+
+// Middleware runs on the edge — no localStorage access.
+// We protect routes by checking if the access_token cookie exists.
+// The client sets this cookie on login; the store validates it with /auth/me.
+
+const PUBLIC_PATHS = ["/login", "/register", "/pending"];
+
+export function proxy(req: NextRequest) {
+  const { pathname } = req.nextUrl;
+
+  // Allow public routes
+  if (PUBLIC_PATHS.some((p) => pathname.startsWith(p))) {
+    return NextResponse.next();
+  }
+
+  // Check for token cookie (set by the client after login)
+  const hasToken = req.cookies.has("access_token");
+
+  if (!hasToken) {
+    const loginUrl = req.nextUrl.clone();
+    loginUrl.pathname = "/login";
+    return NextResponse.redirect(loginUrl);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/((?!_next|favicon.ico|api).*)"],
+};
--- a/web/src/store/useAuth.ts
+++ b/web/src/store/useAuth.ts
@@ -0,0 +1,81 @@
+import { create } from "zustand";
+import { authApi } from "@/lib/api/auth";
+import { UserOut } from "@/types/user";
+import { saveTokens, getRefreshToken, clearTokens, loadFromStorage } from "@/lib/tokenStorage";
+
+interface AuthState {
+  user: UserOut | null;
+  isLoading: boolean;
+  isInitialized: boolean;
+  initialize: () => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
+  register: (data: {
+    email: string;
+    password: string;
+    full_name: string;
+    phone?: string;
+    requested_role?: "member" | "organizer";
+    organization_name?: string;
+    instagram_handle?: string;
+  }) => Promise<"approved" | "pending">;
+  logout: () => Promise<void>;
+  setUser: (user: UserOut) => void;
+}
+
+export const useAuth = create<AuthState>((set) => ({
+  user: null,
+  isLoading: false,
+  isInitialized: false,
+
+  initialize: async () => {
+    loadFromStorage();
+    try {
+      const user = await authApi.me();
+      set({ user, isInitialized: true });
+    } catch {
+      clearTokens();
+      set({ user: null, isInitialized: true });
+    }
+  },
+
+  login: async (email, password) => {
+    set({ isLoading: true });
+    try {
+      const data = await authApi.login({ email, password });
+      saveTokens(data.access_token, data.refresh_token);
+      set({ user: data.user });
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  register: async (data) => {
+    set({ isLoading: true });
+    try {
+      const res = await authApi.register(data);
+      if (res.access_token && res.refresh_token) {
+        saveTokens(res.access_token, res.refresh_token);
+        set({ user: res.user });
+        return "approved";
+      }
+      return "pending";
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  logout: async () => {
+    const refresh = getRefreshToken();
+    if (refresh) {
+      try {
+        await authApi.logout(refresh);
+      } catch {
+        // clear locally regardless
+      }
+    }
+    clearTokens();
+    set({ user: null });
+  },
+
+  setUser: (user) => set({ user }),
+}));
--- a/web/src/types/championship.ts
+++ b/web/src/types/championship.ts
@@ -0,0 +1,20 @@
+export interface Championship {
+  id: string;
+  title: string;
+  subtitle: string | null;
+  description: string | null;
+  location: string | null;
+  venue: string | null;
+  event_date: string | null;
+  registration_open_at: string | null;
+  registration_close_at: string | null;
+  form_url: string | null;
+  entry_fee: number | null;
+  video_max_duration: number | null;
+  status: "draft" | "open" | "closed" | "completed";
+  source: string;
+  image_url: string | null;
+  accent_color: string | null;
+  created_at: string;
+  updated_at: string;
+}
--- a/web/src/types/registerResponse.ts
+++ b/web/src/types/registerResponse.ts
@@ -0,0 +1,8 @@
+import { UserOut } from "./user";
+
+export interface RegisterResponse {
+  user: UserOut;
+  access_token: string | null;
+  refresh_token: string | null;
+  token_type: string;
+}
--- a/web/src/types/registration.ts
+++ b/web/src/types/registration.ts
@@ -0,0 +1,16 @@
+export interface Registration {
+  id: string;
+  championship_id: string;
+  user_id: string;
+  category: string | null;
+  level: string | null;
+  notes: string | null;
+  status: string;
+  video_url: string | null;
+  submitted_at: string;
+  decided_at: string | null;
+  // Joined fields returned by /registrations/my
+  championship_title?: string;
+  championship_event_date?: string | null;
+  championship_location?: string | null;
+}
--- a/web/src/types/tokenPair.ts
+++ b/web/src/types/tokenPair.ts
@@ -0,0 +1,8 @@
+import { UserOut } from "./user";
+
+export interface TokenPair {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+  user: UserOut;
+}
--- a/web/src/types/user.ts
+++ b/web/src/types/user.ts
@@ -0,0 +1,11 @@
+export interface UserOut {
+  id: string;
+  email: string;
+  full_name: string;
+  phone: string | null;
+  role: "member" | "organizer" | "admin";
+  status: "pending" | "approved" | "rejected";
+  organization_name: string | null;
+  instagram_handle: string | null;
+  created_at: string;
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`