minor UX tweaks, rebrand etc

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# clerk configuration (can include secrets)
+/.clerk/

bun.lock

@@ -5,6 +5,12 @@
       "name": "web",
       "dependencies": {
         "@base-ui/react": "^1.0.0",
+        "@clerk/clerk-react": "^5.60.0",
+        "@clerk/elements": "^0.23.53",
+        "@clerk/nextjs": "^6.37.3",
+        "@clerk/themes": "^2.4.51",
+        "@clerk/types": "4.77.0",
+        "@next/swc-darwin-arm64": "^16.1.6",
         "@vercel/analytics": "^1.6.1",
         "@vercel/speed-insights": "^1.3.1",
         "@xboxreplay/xboxlive-api": "^3.4.3",
@@ -105,6 +111,20 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-/CguQ2PDaOzeVOkllQR8nocJ0FFIDqsWIcURsVmm53QGo8NhFNpePjNlyPIB41luxfOqnG7PU0xicMEw3ls7XQ=="],
 
+    "@clerk/backend": ["@clerk/backend@2.30.1", "", { "dependencies": { "@clerk/shared": "^3.44.0", "@clerk/types": "^4.101.14", "standardwebhooks": "^1.0.0", "tslib": "2.8.1" } }, "sha512-GoxnJzVH0ycNPAGCDMfo3lPBFbo5nehpLSVFjgGEnzIRGGahBtAB8PQT7KM2zo58pD8apjb/+suhcB/WCiEasQ=="],
+
+    "@clerk/clerk-react": ["@clerk/clerk-react@5.60.0", "", { "dependencies": { "@clerk/shared": "^3.44.0", "tslib": "2.8.1" }, "peerDependencies": { "react": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0", "react-dom": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0" } }, "sha512-P88FncsJpq/3WZJhhlj+md8mYb35BIXpr462C/figwsBGHsinr8VuBQUMcMZZ/6M34C8ABfLTPa6PHVp6+3D5Q=="],
+
+    "@clerk/elements": ["@clerk/elements@0.23.89", "", { "dependencies": { "@clerk/clerk-react": "^5.58.1", "@clerk/shared": "^3.39.0", "@clerk/types": "^4.101.6", "@radix-ui/primitive": "^1.1.3", "@radix-ui/react-form": "^0.1.8", "@radix-ui/react-slot": "^1.2.3", "@xstate/react": "^6.0.0", "client-only": "^0.0.1", "tslib": "2.8.1", "type-fest": "^4.41.0", "xstate": "^5.20.2" }, "peerDependencies": { "next": "^13.5.7 || ^14.2.25 || ^15.2.3 || ^16", "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0" }, "optionalPeers": ["next"] }, "sha512-fSW78J7dYsz6OG8pN+RJr3yOuFX5pAjA2TsGMbLhN/lJGanueLD4EhKSZy1z8JOCNngYdRLPBtj+aSFOHkEyaA=="],
+
+    "@clerk/nextjs": ["@clerk/nextjs@6.37.3", "", { "dependencies": { "@clerk/backend": "^2.30.1", "@clerk/clerk-react": "^5.60.0", "@clerk/shared": "^3.44.0", "@clerk/types": "^4.101.14", "server-only": "0.0.1", "tslib": "2.8.1" }, "peerDependencies": { "next": "^13.5.7 || ^14.2.25 || ^15.2.3 || ^16", "react": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0", "react-dom": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0" } }, "sha512-kammmf4b5R2Izb/SN4UbEa/6rdyop9fPHwZkyyJoVfgMLFM26fwpXWaSqVJPe4YL2BmHKP+orIOolzTmEhhdQQ=="],
+
+    "@clerk/shared": ["@clerk/shared@3.44.0", "", { "dependencies": { "csstype": "3.1.3", "dequal": "2.0.3", "glob-to-regexp": "0.4.1", "js-cookie": "3.0.5", "std-env": "^3.9.0", "swr": "2.3.4" }, "peerDependencies": { "react": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0", "react-dom": "^18.0.0 || ~19.0.3 || ~19.1.4 || ~19.2.3 || ~19.3.0-0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-kH+chNeZwqml3IDpWLgebWECfOZifyUQO4OISd/96w1EuCY1Bzw6cBq/ZbpsoO8jyG8/6bGr/MGXLhDzTrpPfA=="],
+
+    "@clerk/themes": ["@clerk/themes@2.4.51", "", { "dependencies": { "@clerk/shared": "^3.44.0", "tslib": "2.8.1" } }, "sha512-g50S8xUzKe4XMnWRZLi05+BE/HwqUi5Zjz2YwTkhGKtArailK2S+2Yir+Z1STEnuqqlSGv3o4BuG4TQRn1VAFg=="],
+
+    "@clerk/types": ["@clerk/types@4.77.0", "", { "dependencies": { "csstype": "3.1.3" } }, "sha512-9D+rvsU2rhPdQ1qwXRYwxIf5IjeomGsavNZUEalK+42vuOo6Wqg6GGiZkqwKxUybszfJ/IqQEuSIJLOnv8ox5A=="],
+
     "@dotenvx/dotenvx": ["@dotenvx/dotenvx@1.51.2", "", { "dependencies": { "commander": "^11.1.0", "dotenv": "^17.2.1", "eciesjs": "^0.4.10", "execa": "^5.1.1", "fdir": "^6.2.0", "ignore": "^5.3.0", "object-treeify": "1.1.33", "picomatch": "^4.0.2", "which": "^4.0.0" }, "bin": { "dotenvx": "src/cli/dotenvx.js" } }, "sha512-+693mNflujDZxudSEqSNGpn92QgFhJlBn9q2mDQ9yGWyHuz3hZ8B5g3EXCwdAz4DMJAI+OFCIbfEFZS+YRdrEA=="],
 
     "@ecies/ciphers": ["@ecies/ciphers@0.2.5", "", { "peerDependencies": { "@noble/ciphers": "^1.0.0" } }, "sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A=="],
@@ -235,7 +255,7 @@
 
     "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.0.10", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-b2NlWN70bbPLmfyoLvvidPKWENBYYIe017ZGUpElvQjDytCWgxPJx7L9juxHt0xHvNVA08ZHJdOyhGzon/KJuw=="],
 
-    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.0.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg=="],
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.1.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw=="],
 
     "@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.0.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw=="],
 
@@ -397,6 +417,8 @@
 
     "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
 
+    "@stablelib/base64": ["@stablelib/base64@1.0.1", "", {}, "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ=="],
+
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
     "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
@@ -517,6 +539,8 @@
 
     "@xboxreplay/xboxlive-api": ["@xboxreplay/xboxlive-api@3.4.3", "", { "dependencies": { "@xboxreplay/errors": "^0.1.0", "axios": "^0.21.1" } }, "sha512-+iSmNCN4RHXZXBc48e0tJB+tvUs6XEwEWcXTcECrIttgDVN9fsFxroo+6ET+K38FobEM+5xUOfCVNqQoWQthxQ=="],
 
+    "@xstate/react": ["@xstate/react@6.0.0", "", { "dependencies": { "use-isomorphic-layout-effect": "^1.1.2", "use-sync-external-store": "^1.2.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "xstate": "^5.20.0" }, "optionalPeers": ["xstate"] }, "sha512-xXlLpFJxqLhhmecAXclBECgk+B4zYSrDTl8hTfPZBogkn82OHKbm9zJxox3Z/YXoOhAQhKFTRLMYGdlbhc6T9A=="],
+
     "@yudiel/react-qr-scanner": ["@yudiel/react-qr-scanner@2.5.0", "", { "dependencies": { "barcode-detector": "3.0.8", "webrtc-adapter": "9.0.3" }, "peerDependencies": { "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" } }, "sha512-wVWvm0z5kGGc3tiMcxyr2aji3C6aU5K3Q7R08MOdyFDFkvMbFMF1Hz5P5WFYW+zuuqxDPBcRZPCvmVs6jBheTQ=="],
 
     "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],
@@ -681,6 +705,8 @@
 
     "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
 
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
@@ -787,6 +813,8 @@
 
     "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
 
+    "fast-sha256": ["fast-sha256@1.3.0", "", {}, "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ=="],
+
     "fast-uri": ["fast-uri@3.1.0", "", {}, "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA=="],
 
     "fastq": ["fastq@1.19.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ=="],
@@ -857,6 +885,8 @@
 
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
+    "glob-to-regexp": ["glob-to-regexp@0.4.1", "", {}, "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="],
+
     "globals": ["globals@16.4.0", "", {}, "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw=="],
 
     "globalthis": ["globalthis@1.0.4", "", { "dependencies": { "define-properties": "^1.2.1", "gopd": "^1.0.1" } }, "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ=="],
@@ -1001,6 +1031,8 @@
 
     "jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
 
+    "js-cookie": ["js-cookie@3.0.5", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
@@ -1291,6 +1323,8 @@
 
     "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
 
+    "server-only": ["server-only@0.0.1", "", {}, "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="],
+
     "set-blocking": ["set-blocking@2.0.0", "", {}, "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="],
 
     "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
@@ -1329,8 +1363,12 @@
 
     "stable-hash": ["stable-hash@0.0.5", "", {}, "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA=="],
 
+    "standardwebhooks": ["standardwebhooks@1.0.0", "", { "dependencies": { "@stablelib/base64": "^1.0.0", "fast-sha256": "^1.3.0" } }, "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg=="],
+
     "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
 
+    "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
+
     "stdin-discarder": ["stdin-discarder@0.2.2", "", {}, "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ=="],
 
     "stop-iteration-iterator": ["stop-iteration-iterator@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "internal-slot": "^1.1.0" } }, "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ=="],
@@ -1367,6 +1405,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "swr": ["swr@2.3.4", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg=="],
+
     "tabbable": ["tabbable@6.3.0", "", {}, "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ=="],
 
     "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],
@@ -1405,7 +1445,7 @@
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
-    "type-fest": ["type-fest@5.3.1", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg=="],
+    "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
 
@@ -1441,6 +1481,8 @@
 
     "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
 
+    "use-isomorphic-layout-effect": ["use-isomorphic-layout-effect@1.2.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA=="],
+
     "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
@@ -1473,6 +1515,8 @@
 
     "wsl-utils": ["wsl-utils@0.3.0", "", { "dependencies": { "is-wsl": "^3.1.0", "powershell-utils": "^0.1.0" } }, "sha512-3sFIGLiaDP7rTO4xh3g+b3AzhYDIUGGywE/WsmqzJWDxus5aJXVnPTNC/6L+r2WzrwXqVOdD262OaO+cEyPMSQ=="],
 
+    "xstate": ["xstate@5.26.0", "", {}, "sha512-Fvi9VBoqHgsGYLU2NTag8xDTWtKqUC0+ue7EAhBNBb06wf620QEy05upBaEI1VLMzIn63zugLV8nHb69ZUWYAA=="],
+
     "y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
@@ -1495,6 +1539,16 @@
 
     "zxing-wasm": ["zxing-wasm@2.2.4", "", { "dependencies": { "@types/emscripten": "^1.41.5", "type-fest": "^5.2.0" } }, "sha512-1gq5zs4wuNTs5umWLypzNNeuJoluFvwmvjiiT3L9z/TMlVveeJRWy7h90xyUqCe+Qq0zL0w7o5zkdDMWDr9aZA=="],
 
+    "@clerk/backend/@clerk/types": ["@clerk/types@4.101.14", "", { "dependencies": { "@clerk/shared": "^3.44.0" } }, "sha512-jl7DywmeaZx1IntgEXcjDZq2uyk+X/1yAZOjxOboeGTS0rNTiQNhv7xK8tFVjexsUAFrYlwC1AxhFuJiMDQjow=="],
+
+    "@clerk/elements/@clerk/types": ["@clerk/types@4.101.14", "", { "dependencies": { "@clerk/shared": "^3.44.0" } }, "sha512-jl7DywmeaZx1IntgEXcjDZq2uyk+X/1yAZOjxOboeGTS0rNTiQNhv7xK8tFVjexsUAFrYlwC1AxhFuJiMDQjow=="],
+
+    "@clerk/nextjs/@clerk/types": ["@clerk/types@4.101.14", "", { "dependencies": { "@clerk/shared": "^3.44.0" } }, "sha512-jl7DywmeaZx1IntgEXcjDZq2uyk+X/1yAZOjxOboeGTS0rNTiQNhv7xK8tFVjexsUAFrYlwC1AxhFuJiMDQjow=="],
+
+    "@clerk/shared/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
+    "@clerk/types/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
     "@dotenvx/dotenvx/commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="],
 
     "@dotenvx/dotenvx/execa": ["execa@5.1.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^6.0.0", "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^4.0.1", "onetime": "^5.1.2", "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" } }, "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg=="],
@@ -1559,8 +1613,12 @@
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "msw/type-fest": ["type-fest@5.3.1", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg=="],
+
     "msw/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
+    "next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.0.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg=="],
+
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
@@ -1585,6 +1643,8 @@
 
     "yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
 
+    "zxing-wasm/type-fest": ["type-fest@5.3.1", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg=="],
+
     "@dotenvx/dotenvx/execa/get-stream": ["get-stream@6.0.1", "", {}, "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="],
 
     "@dotenvx/dotenvx/execa/human-signals": ["human-signals@2.1.0", "", {}, "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="],

package.json

@@ -13,6 +13,12 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
+    "@clerk/clerk-react": "^5.60.0",
+    "@clerk/elements": "^0.23.53",
+    "@clerk/nextjs": "^6.37.3",
+    "@clerk/themes": "^2.4.51",
+    "@clerk/types": "4.77.0",
+    "@next/swc-darwin-arm64": "^16.1.6",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "@xboxreplay/xboxlive-api": "^3.4.3",

src/app/access/[method]/[step]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useTransition, useEffect, use } from "react";
-import { Asterisk, CheckCircle2, Camera, CameraOff, PartyPopper, ExternalLink, ArrowLeft, Copy, Gift } from "lucide-react";
+import { Asterisk, CheckCircle2, Camera, CameraOff, PartyPopper, ExternalLink, ArrowLeft, Copy, Gift, MessageCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -16,6 +16,12 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { cfg } from "@/lib/cfg";
 import { getAvatarProfile } from "@/lib/avatar";
+import { useUser } from "@clerk/nextjs";
+import localFont from "next/font/local";
+
+const makeSans = localFont({
+    src: "../../../../../public/font/makesans.ttf",
+})
 
 interface PageProps {
   params: Promise<{
@@ -29,6 +35,7 @@ export default function AccessPage({ params }: PageProps) {
   const resolvedParams = use(params);
   const method = resolvedParams.method; // 'code' or 'qr'
   const step = resolvedParams.step; // 'verify', 'details', 'success'
+  const { isSignedIn } = useUser();
 
   // Access Code State
   const [length, setLength] = useState(6);
@@ -465,8 +472,8 @@ export default function AccessPage({ params }: PageProps) {
               <ArrowLeft className="w-4 h-4 mr-2" />
               Back to home
             </Link>
-            <h1 className="text-2xl font-semibold">
+            <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>
-              {method === 'code' ? 'Access Code Verification' : 'QR Code Verification'}
+              {method === 'code' ? 'access code verification' : 'qr code verification'}
             </h1>
             <p className="text-muted-foreground">
               {method === 'code' 
@@ -587,7 +594,7 @@ export default function AccessPage({ params }: PageProps) {
               <ArrowLeft className="w-4 h-4 mr-2" />
               Back to verification
             </Link>
-            <h1 className="text-2xl font-semibold">Server Details</h1>
+            <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>server details</h1>
             <p className="text-muted-foreground">
               Tell us which Minecraft edition you play and your username(s).
             </p>
@@ -682,7 +689,7 @@ export default function AccessPage({ params }: PageProps) {
           {/* Header */}
           <div className="text-center space-y-4">
             <PartyPopper className="w-16 h-16 text-primary mx-auto" />
-            <h1 className="text-2xl font-semibold">You're whitelisted!</h1>
+            <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>you're whitelisted!</h1>
             <p className="text-muted-foreground">
               Welcome to FRG Network! You can now join the server.
               As soon as you join, come back and click "Claim my reward" to get a gift on behalf of the team here.
@@ -753,6 +760,16 @@ export default function AccessPage({ params }: PageProps) {
               </Link>
             </Button>
             
+            {/* Optional OAuth Section */}
+            {!isSignedIn && (
+              <Button variant="outline" asChild className="w-full">
+                <Link href="/chat-onboarding">
+                  <MessageCircle className="w-4 h-4 mr-2" />
+                  Optional: Create an account
+                </Link>
+              </Button>
+            )}
+            
             <Button variant="outline" onClick={handleReset} className="w-full">
               Start over
             </Button>
@@ -778,7 +795,7 @@ export default function AccessPage({ params }: PageProps) {
               <ArrowLeft className="w-4 h-4 mr-2" />
               Back to success
             </Link>
-            <h1 className="text-2xl font-semibold">Claim Your Reward</h1>
+            <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>claim your reward</h1>
             <p className="text-muted-foreground">
               Help us improve your server experience! Complete this survey to receive 2 diamonds as a thank you.
             </p>

src/app/auth/page.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Link from "next/link";
+import localFont from "next/font/local";
+import { useUser, useClerk } from "@clerk/nextjs";
+import * as Clerk from "@clerk/elements/common";
+import * as SignIn from "@clerk/elements/sign-in";
+import * as SignUp from "@clerk/elements/sign-up";
+
+const makeSans = localFont({
+    src: "../../../public/font/makesans.ttf",
+})
+
+export default function AuthPage() {
+  const { isSignedIn, user } = useUser();
+  const { signOut } = useClerk();
+  const [showSignIn, setShowSignIn] = useState(false);
+  const [showSignUp, setShowSignUp] = useState(false);
+  const inputClassName =
+    "bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+
+  if (showSignIn) {
+    return (
+      <main>
+        <div className="font-mona min-w-screen gap-2 min-h-screen flex flex-col items-center p-2 justify-center">
+          <div className="w-full max-w-md">
+            <div className="text-center mb-6">
+              <Link href="/auth" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4">
+                ← Back
+              </Link>
+              <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>
+                sign in
+              </h1>
+            </div>
+            <SignIn.Root routing="virtual">
+              <Card>
+                <CardContent className="p-6 space-y-4">
+                  <SignIn.Step name="start" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <Clerk.Field name="identifier" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Email</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <SignIn.Action submit asChild>
+                  <Button className="w-full">Continue</Button>
+                </SignIn.Action>
+                <div className="text-center text-xs text-muted-foreground">
+                  Don&apos;t have an account?{" "}
+                  <button
+                    type="button"
+                    className="text-primary hover:underline"
+                    onClick={() => {
+                      setShowSignUp(true);
+                      setShowSignIn(false);
+                    }}
+                  >
+                    Create an account
+                  </button>
+                </div>
+                  </SignIn.Step>
+
+                  <SignIn.Step name="verifications" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <SignIn.Strategy name="email_code" className="space-y-4">
+                  <p className="text-sm text-muted-foreground text-center">
+                    Enter the code sent to <SignIn.SafeIdentifier />
+                  </p>
+                  <Clerk.Field name="code" className="space-y-1">
+                    <Clerk.Label className="text-sm text-muted-foreground">Verification code</Clerk.Label>
+                    <Clerk.Input className={inputClassName} />
+                    <Clerk.FieldError className="text-xs text-destructive" />
+                  </Clerk.Field>
+                  <SignIn.Action submit asChild>
+                    <Button className="w-full">Verify</Button>
+                  </SignIn.Action>
+                </SignIn.Strategy>
+
+                <SignIn.Strategy name="password" className="space-y-4">
+                  <Clerk.Field name="password" className="space-y-1">
+                    <Clerk.Label className="text-sm text-muted-foreground">Password</Clerk.Label>
+                    <Clerk.Input className={inputClassName} type="password" />
+                    <Clerk.FieldError className="text-xs text-destructive" />
+                  </Clerk.Field>
+                  <SignIn.Action submit asChild>
+                    <Button className="w-full">Continue</Button>
+                  </SignIn.Action>
+                  <SignIn.Action navigate="forgot-password" asChild>
+                    <Button variant="outline" className="w-full">Forgot password?</Button>
+                  </SignIn.Action>
+                </SignIn.Strategy>
+                  </SignIn.Step>
+
+                  <SignIn.Step name="forgot-password" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <p className="text-sm text-muted-foreground text-center">
+                  We&apos;ll email you a code to reset your password.
+                </p>
+                <SignIn.SupportedStrategy name="reset_password_email_code" asChild>
+                  <Button className="w-full">Send reset code</Button>
+                </SignIn.SupportedStrategy>
+                <SignIn.Action navigate="start" asChild>
+                  <Button variant="outline" className="w-full">Back to sign in</Button>
+                </SignIn.Action>
+                  </SignIn.Step>
+
+                  <SignIn.Step name="reset-password" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <Clerk.Field name="code" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Reset code</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <Clerk.Field name="password" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">New password</Clerk.Label>
+                  <Clerk.Input className={inputClassName} type="password" />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <Clerk.Field name="confirmPassword" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Confirm password</Clerk.Label>
+                  <Clerk.Input className={inputClassName} type="password" />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <SignIn.Action submit asChild>
+                  <Button className="w-full">Reset password</Button>
+                </SignIn.Action>
+                  </SignIn.Step>
+                </CardContent>
+              </Card>
+            </SignIn.Root>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (showSignUp) {
+    return (
+      <main>
+        <div className="font-mona min-w-screen gap-2 min-h-screen flex flex-col items-center p-2 justify-center">
+          <div className="w-full max-w-md">
+            <div className="text-center mb-6">
+              <Link href="/auth" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4">
+                ← Back
+              </Link>
+              <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>
+                create account
+              </h1>
+            </div>
+            <SignUp.Root routing="virtual">
+              <Card>
+                <CardContent className="p-6 space-y-4">
+                  <SignUp.Step name="start" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <Clerk.Field name="emailAddress" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Email</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <Clerk.Field name="password" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Password</Clerk.Label>
+                  <Clerk.Input className={inputClassName} type="password" />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <SignUp.Captcha />
+                <SignUp.Action submit asChild>
+                  <Button className="w-full">Create account</Button>
+                </SignUp.Action>
+                <div className="text-center text-xs text-muted-foreground">
+                  Already have an account?{" "}
+                  <button
+                    type="button"
+                    className="text-primary hover:underline"
+                    onClick={() => {
+                      setShowSignIn(true);
+                      setShowSignUp(false);
+                    }}
+                  >
+                    Sign in
+                  </button>
+                </div>
+                  </SignUp.Step>
+
+                  <SignUp.Step name="verifications" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <SignUp.Strategy name="email_code" className="space-y-4">
+                  <p className="text-sm text-muted-foreground text-center">
+                    Enter the code sent to your email.
+                  </p>
+                  <Clerk.Field name="code" className="space-y-1">
+                    <Clerk.Label className="text-sm text-muted-foreground">Verification code</Clerk.Label>
+                    <Clerk.Input className={inputClassName} />
+                    <Clerk.FieldError className="text-xs text-destructive" />
+                  </Clerk.Field>
+                  <SignUp.Action submit asChild>
+                    <Button className="w-full">Verify email</Button>
+                  </SignUp.Action>
+                </SignUp.Strategy>
+                  </SignUp.Step>
+
+                  <SignUp.Step name="continue" className="space-y-4">
+                <Clerk.GlobalError className="text-sm text-destructive" />
+                <p className="text-sm text-muted-foreground text-center">
+                  Finish setting up your account.
+                </p>
+                <Clerk.Field name="username" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Username</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <Clerk.Field name="firstName" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">First name</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <Clerk.Field name="lastName" className="space-y-1">
+                  <Clerk.Label className="text-sm text-muted-foreground">Last name</Clerk.Label>
+                  <Clerk.Input className={inputClassName} />
+                  <Clerk.FieldError className="text-xs text-destructive" />
+                </Clerk.Field>
+                <SignUp.Action submit asChild>
+                  <Button className="w-full">Continue</Button>
+                </SignUp.Action>
+                  </SignUp.Step>
+                </CardContent>
+              </Card>
+            </SignUp.Root>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <div className="font-mona min-w-screen gap-2 min-h-screen flex flex-col items-center p-2 justify-center">
+        <span className="text-muted-foreground font-medium">Account for</span>
+        <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>
+          FRG Network
+        </h1>
+        <p className="text-muted-foreground mb-8">Create your FRG account to access all features</p>
+        
+        {isSignedIn ? (
+          <div className="w-full max-w-md space-y-6">
+            <Card>
+              <CardContent className="p-6">
+                <h2 className="text-lg font-medium mb-4 lowercase">welcome back</h2>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Welcome back, <span className="font-medium">{user?.firstName || user?.emailAddresses[0]?.emailAddress}</span>!
+                </p>
+                <div className="space-y-3">
+                  <Button variant="outline" onClick={() => signOut()} className="w-full">
+                    Sign out
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <div className="w-full max-w-md space-y-6">
+            <Card>
+              <CardContent className="p-6">
+                <h2 className="text-lg font-medium mb-4 lowercase">get started</h2>
+                <div className="space-y-3">
+                  <Button onClick={() => setShowSignIn(true)} className="w-full">
+                    Sign in
+                  </Button>
+                  <Button variant="outline" onClick={() => setShowSignUp(true)} className="w-full">
+                    Create account
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Link href="/" className="text-primary hover:underline">Looking for server access?</Link>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/globals.css

@@ -56,77 +56,85 @@
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.65 0.18 132);
+  --primary: oklch(0.646 0.222 41.116);
-  --primary-foreground: oklch(0.99 0.03 121);
+  --primary-foreground: oklch(0.98 0.016 73.684);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.97 0 0);
+  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.65 0.18 132);
+  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.99 0.03 121);
+  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.58 0.22 27);
+  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
+  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.922 0 0);
+  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.90 0.18 127);
+  --chart-1: oklch(0.837 0.128 66.29);
-  --chart-2: oklch(0.85 0.21 129);
+  --chart-2: oklch(0.705 0.213 47.604);
-  --chart-3: oklch(0.77 0.20 131);
+  --chart-3: oklch(0.646 0.222 41.116);
-  --chart-4: oklch(0.65 0.18 132);
+  --chart-4: oklch(0.553 0.195 38.402);
-  --chart-5: oklch(0.53 0.14 132);
+  --chart-5: oklch(0.47 0.157 37.304);
-  --radius: 0;
+  --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.65 0.18 132);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
-  --sidebar-primary-foreground: oklch(0.99 0.03 121);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-  --sidebar-accent: oklch(0.65 0.18 132);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.99 0.03 121);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.77 0.20 131);
+  --primary: oklch(0.7968 0.2119 135.19);
-  --primary-foreground: oklch(0.27 0.07 132);
+  --primary-foreground: oklch(0.1566 0.0354 125.31);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.77 0.20 131);
+  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.27 0.07 132);
+  --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);
+  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.90 0.18 127);
+  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.85 0.21 129);
+  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.77 0.20 131);
+  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.65 0.18 132);
+  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.53 0.14 132);
+  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.85 0.21 129);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.27 0.07 132);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.77 0.20 131);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.27 0.07 132);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@supports (corner-shape: squircle) {
+ * {
+   corner-shape: superellipse(2);
+   --radius:1.5rem;
+ }
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }

src/app/layout.tsx

@@ -3,8 +3,10 @@ import "./globals.css";
 import { Toaster } from "@/components/ui/sonner"
 import { ThemeProvider } from "@/components/theme-provider";
 import { Google_Sans_Code, Mona_Sans } from "next/font/google";
+import localFont from 'next/font/local'
 import { CookieConsent } from "@/components/cookie-notice";
 import { ConditionalAnalytics } from "@/components/conditional-analytics";
+import { ClerkProvider } from "@clerk/nextjs";
 export const metadata: Metadata = {
   title: "FRG Network",
   description: "Authenticate to access Minecraft.",
@@ -14,7 +16,9 @@ export const googleSansCode = Google_Sans_Code({
   variable: "--font-google-code",
   subsets: ["latin"],
 });
-
+export const makeSans = localFont({
+    src: "../../public/font/makesans.ttf",
+})
 export const mona = Mona_Sans({
   weight: "variable",
   subsets: ["latin"],
@@ -26,22 +30,24 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${googleSansCode.variable} ${mona.variable}`} suppressHydrationWarning>
+    <ClerkProvider>
-      <body
+      <html lang="en" className={`${googleSansCode.variable} ${mona.variable}`} suppressHydrationWarning>
-        className={`antialiased`}
+        <body
-      >
+          className={`antialiased`}
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
         >
-            {children}
+          <ThemeProvider
-            <CookieConsent />
+            attribute="class"
-            <ConditionalAnalytics />
+            defaultTheme="system"
-          </ThemeProvider>
+            enableSystem
-          <Toaster position="bottom-center" />
+            disableTransitionOnChange
-      </body>
+          >
-    </html>
+              {children}
+              <CookieConsent />
+              <ConditionalAnalytics />
+            </ThemeProvider>
+            <Toaster position="bottom-center" />
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }

src/app/page.tsx

@@ -4,10 +4,11 @@ import { Asterisk, QrCode } from "lucide-react";
 import { DotGothic16 } from "next/font/google";
 import { cfg } from "@/lib/cfg";
 import Link from "next/link";
+import localFont from "next/font/local";
 
-const dots = DotGothic16({
+export const makeSans = localFont({
-  weight: "400",
+    src: "../../public/font/makesans.ttf",
-});
+})
 
 export default function Page() {
   return (
@@ -16,24 +17,27 @@ export default function Page() {
         className="font-mona min-w-screen gap-2 min-h-screen flex flex-col items-center p-2 justify-center"
       >
         <span className="text-muted-foreground font-medium">Authentication for</span>
-        <h1 className={dots.className + " text-2xl text-primary"}>
+        <h1 className={makeSans.className + " text-2xl text-primary font-extrabold lowercase"}>
           FRG Network
         </h1>
         <p>A private Minecraft server for me and my friends.</p>
+        <div className="flex flex-col sm:flex-row gap-2">
         {cfg.accessCode.enabled && (
-          <Button asChild>
+          <Button asChild className="h-24 px-6 flex flex-col rounded-t-xl rounded-b-sm sm:rounded-l-xl sm:rounded-r-sm">
             <Link href="/access/code/verify">
-              <Asterisk /> I have an access code
+              <Asterisk className="size-8" /> I have an access code
             </Link>
           </Button>
         )}
         {cfg.qr.enabled && (
-          <Button variant="outline" asChild>
+           <Button asChild className="h-24 px-6 flex flex-col rounded-t-sm rounded-b-xl sm:rounded-l-sm sm:rounded-r-xl" variant="outline">
             <Link href="/access/qr/verify">
-              <QrCode /> I have a QR code
+              <QrCode className="size-8" /> I have a QR code
             </Link>
           </Button>
         )}
+        </div>
+
       </div>
     </main>
   );