Implement /profile presentation and container

package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
@@ -110,6 +111,7 @@
     "react-markdown": "^8.0.7",
     "react-papaparse": "^4.4.0",
     "react-window": "^1.8.8",
+    "recharts": "^2.13.0-alpha.4",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",
     "swr": "^2.2.4",

src/app/(marketing)/profile/[username]/constants.ts

@@ -0,0 +1,14 @@
+export const MAX_LEVEL = 100
+export const RANKS = [
+  { color: "#78c93d", title: "novice" },
+  { color: "#88d525", title: "learner" },
+  { color: "#f6ca45", title: "knight" },
+  { color: "#78c93d", title: "veteran" },
+  { color: "#ec5a53", title: "champion" },
+  { color: "#53adf0", title: "hero" },
+  { color: "#c385f8", title: "master" },
+  { color: "#3e6fc3", title: "grand master" },
+  { color: "#be4681", title: "legend" },
+  { color: "#000000", title: "mythic" },
+  { color: "linear-gradient(to left top, #00cbfa, #b9f2ff)", title: "???" },
+] as const