diff --git a/client/package-lock.json b/client/package-lock.json
new file mode 100644
index 0000000..3b75292
--- /dev/null
+++ b/client/package-lock.json
@@ -0,0 +1,1025 @@
+{
+    "name": "client",
+    "version": "0.0.0",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "dependencies": {
+                "@reactpy/client": "^0.3.1",
+                "react": "^18.3.1",
+                "react-dom": "^18.3.1"
+            },
+            "devDependencies": {
+                "@types/react": "^18.3.3",
+                "@types/react-dom": "^18.3.0",
+                "typescript": "^5.4.5",
+                "vite": "^5.2.0",
+                "vite-plugin-singlefile": "^2.0.1"
+            }
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+            "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+            "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+            "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+            "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+            "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+            "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+            "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+            "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+            "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+            "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+            "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+            "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+            "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+            "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+            "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+            "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+            "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+            "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+            "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+            "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+            "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@reactpy/client": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@reactpy/client/-/client-0.3.1.tgz",
+            "integrity": "sha512-mvFwAvmRMgo7lTjkhkEJzBep6HX/wfm5BaNbtEMOUzto7G/h+z1AmqlOMXLH37DSI0iwfmCuNwy07EJM0JWZ0g==",
+            "dependencies": {
+                "event-to-object": "^0.1.2",
+                "json-pointer": "^0.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16 <18",
+                "react-dom": ">=16 <18"
+            }
+        },
+        "node_modules/@rollup/rollup-android-arm-eabi": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+            "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-android-arm64": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+            "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-arm64": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
+            "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-x64": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+            "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+            "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+            "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+            "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-musl": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+            "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+            "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+            "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+            "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-gnu": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+            "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-musl": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+            "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+            "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+            "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-msvc": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+            "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+            "dev": true
+        },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.12",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+            "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/react": {
+            "version": "18.3.3",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+            "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "18.3.0",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+            "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
+        "node_modules/braces": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+            "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+            "dev": true,
+            "dependencies": {
+                "fill-range": "^7.1.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/esbuild": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+            "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+            "dev": true,
+            "hasInstallScript": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.20.2",
+                "@esbuild/android-arm": "0.20.2",
+                "@esbuild/android-arm64": "0.20.2",
+                "@esbuild/android-x64": "0.20.2",
+                "@esbuild/darwin-arm64": "0.20.2",
+                "@esbuild/darwin-x64": "0.20.2",
+                "@esbuild/freebsd-arm64": "0.20.2",
+                "@esbuild/freebsd-x64": "0.20.2",
+                "@esbuild/linux-arm": "0.20.2",
+                "@esbuild/linux-arm64": "0.20.2",
+                "@esbuild/linux-ia32": "0.20.2",
+                "@esbuild/linux-loong64": "0.20.2",
+                "@esbuild/linux-mips64el": "0.20.2",
+                "@esbuild/linux-ppc64": "0.20.2",
+                "@esbuild/linux-riscv64": "0.20.2",
+                "@esbuild/linux-s390x": "0.20.2",
+                "@esbuild/linux-x64": "0.20.2",
+                "@esbuild/netbsd-x64": "0.20.2",
+                "@esbuild/openbsd-x64": "0.20.2",
+                "@esbuild/sunos-x64": "0.20.2",
+                "@esbuild/win32-arm64": "0.20.2",
+                "@esbuild/win32-ia32": "0.20.2",
+                "@esbuild/win32-x64": "0.20.2"
+            }
+        },
+        "node_modules/event-to-object": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/event-to-object/-/event-to-object-0.1.2.tgz",
+            "integrity": "sha512-+fUmp1XOCZiYomwe5Zxp4IlchuZZfdVdjFUk5MbgRT4M+V2TEWKc0jJwKLCX/nxlJ6xM5VUb/ylzERh7YDCRrg==",
+            "dependencies": {
+                "json-pointer": "^0.6.2"
+            }
+        },
+        "node_modules/fill-range": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+            "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+            "dev": true,
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/foreach": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.6.tgz",
+            "integrity": "sha512-k6GAGDyqLe9JaebCsFCoudPPWfihKu8pylYXRlqP1J7ms39iPoTtk2fviNglIeQEwdh0bQeKJ01ZPyuyQvKzwg=="
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
+        "node_modules/json-pointer": {
+            "version": "0.6.2",
+            "resolved": "https://registry.npmjs.org/json-pointer/-/json-pointer-0.6.2.tgz",
+            "integrity": "sha512-vLWcKbOaXlO+jvRy4qNd+TI1QUPZzfJj1tpJ3vAXDych5XJf93ftpUKe5pKCrzyIIwgBJcOcCVRUfqQP25afBw==",
+            "dependencies": {
+                "foreach": "^2.0.4"
+            }
+        },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
+        },
+        "node_modules/micromatch": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+            "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+            "dev": true,
+            "dependencies": {
+                "braces": "^3.0.3",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=8.6"
+            }
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+            "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+            "dev": true
+        },
+        "node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.4.38",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+            "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "nanoid": "^3.3.7",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            },
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
+        "node_modules/rollup": {
+            "version": "4.18.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
+            "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+            "dev": true,
+            "dependencies": {
+                "@types/estree": "1.0.5"
+            },
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=18.0.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "@rollup/rollup-android-arm-eabi": "4.18.0",
+                "@rollup/rollup-android-arm64": "4.18.0",
+                "@rollup/rollup-darwin-arm64": "4.18.0",
+                "@rollup/rollup-darwin-x64": "4.18.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.18.0",
+                "@rollup/rollup-linux-arm64-musl": "4.18.0",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.18.0",
+                "@rollup/rollup-linux-x64-gnu": "4.18.0",
+                "@rollup/rollup-linux-x64-musl": "4.18.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.18.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.18.0",
+                "@rollup/rollup-win32-x64-msvc": "4.18.0",
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+            "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.4.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+            "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+            "dev": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/vite": {
+            "version": "5.2.12",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
+            "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
+            "dev": true,
+            "dependencies": {
+                "esbuild": "^0.20.1",
+                "postcss": "^8.4.38",
+                "rollup": "^4.13.0"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            },
+            "peerDependencies": {
+                "@types/node": "^18.0.0 || >=20.0.0",
+                "less": "*",
+                "lightningcss": "^1.21.0",
+                "sass": "*",
+                "stylus": "*",
+                "sugarss": "*",
+                "terser": "^5.4.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "lightningcss": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/vite-plugin-singlefile": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-2.0.1.tgz",
+            "integrity": "sha512-J74tfN6TE4fz0Hp7E1+dmVTmCpyazv4yuIpR6jd22Kq76d2CQDSQx3wDiHX8LT02f922V+YrLhRq2VIk/UYrig==",
+            "dev": true,
+            "dependencies": {
+                "micromatch": "^4.0.5"
+            },
+            "engines": {
+                "node": ">18.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^4.12.0",
+                "vite": "^5.1.4"
+            }
+        }
+    }
+}
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/docs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/docs/.prettierignore b/docs/.prettierignore
new file mode 100644
index 0000000..6e1fb3a
--- /dev/null
+++ b/docs/.prettierignore
@@ -0,0 +1 @@
+**/*.mdx
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..c403366
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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/deployment) for more details.
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
new file mode 100644
index 0000000..fddbb6d
--- /dev/null
+++ b/docs/mdx-components.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export function useMDXComponents(components: React.ReactNode[]) {
+    return { ...components };
+}
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
new file mode 100644
index 0000000..cea58fd
--- /dev/null
+++ b/docs/next.config.mjs
@@ -0,0 +1,15 @@
+import withMDX from "@next/mdx";
+/** @type {import('next').NextConfig} */
+const nextConfig = withMDX()({
+    pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+    transpilePackages:
+        process.env.NODE_ENV !== "development"
+            ? ["geist"]
+            : ["geist", "hightlight.js"],
+});
+
+/*
+https://github.com/vercel/geist-font/issues/59,
+https://github.com/highlightjs/highlight.js/issues/3982
+*/
+export default nextConfig;
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..e46b56b
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,39 @@
+{
+    "name": "docs",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "postbuild": "pagefind --site .next --output-path .next/static/chunks/pages/pagefind"
+    },
+    "dependencies": {
+        "@mdx-js/loader": "^3.0.1",
+        "@next/mdx": "^14.2.5",
+        "clsx": "^2.1.1",
+        "framer-motion": "^11.3.19",
+        "geist": "^1.3.1",
+        "highlight.js": "^11.10.0",
+        "mini-css-extract-plugin": "^2.9.0",
+        "mini-svg-data-uri": "^1.4.4",
+        "next": "14.2.5",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-icons": "^5.2.1",
+        "tailwind-merge": "^2.4.0"
+    },
+    "devDependencies": {
+        "@types/node": "^22.0.0",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^9.8.0",
+        "eslint-config-next": "14.2.5",
+        "pagefind": "^1.1.0",
+        "postcss": "^8.4.40",
+        "tailwindcss": "^3.4.7",
+        "typescript": "^5.5.4"
+    },
+    "type": "module"
+}
diff --git a/docs/postcss.config.mjs b/docs/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/docs/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/docs/public/logo-white.svg b/docs/public/logo-white.svg
new file mode 100644
index 0000000..54ec705
--- /dev/null
+++ b/docs/public/logo-white.svg
@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 274.6 279.7" style="enable-background:new 0 0 274.6 279.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+	.st5{fill:url(#SVGID_6_);}
+	.st6{fill:url(#SVGID_7_);}
+	.st7{fill:url(#SVGID_8_);}
+	.st8{fill:url(#SVGID_9_);}
+	.st9{fill:url(#SVGID_10_);}
+	.st10{fill:url(#SVGID_11_);}
+	.st11{fill:url(#SVGID_12_);}
+	.st12{fill:url(#SVGID_13_);}
+	.st13{fill:url(#SVGID_14_);}
+	.st14{fill:url(#SVGID_15_);}
+	.st15{fill:#FFFFFF;}
+	.st16{fill:url(#SVGID_16_);}
+	.st17{fill:url(#SVGID_17_);}
+	.st18{fill:url(#SVGID_18_);}
+	.st19{fill:url(#SVGID_19_);}
+	.st20{fill:url(#SVGID_20_);}
+	.st21{fill:url(#SVGID_21_);}
+	.st22{fill:url(#SVGID_22_);}
+	.st23{fill:url(#SVGID_23_);}
+	.st24{fill:url(#SVGID_24_);}
+	.st25{fill:url(#SVGID_25_);}
+	.st26{fill:url(#SVGID_26_);}
+	.st27{fill:url(#SVGID_27_);}
+	.st28{fill:url(#SVGID_28_);}
+	.st29{fill:url(#SVGID_29_);}
+	.st30{fill:url(#SVGID_30_);}
+	.st31{fill:url(#SVGID_31_);}
+	.st32{fill:url(#SVGID_32_);}
+	.st33{fill:url(#SVGID_33_);}
+	.st34{fill:url(#SVGID_34_);}
+	.st35{fill:url(#SVGID_35_);}
+	.st36{fill:url(#SVGID_36_);}
+	.st37{fill:url(#SVGID_37_);}
+	.st38{fill:url(#SVGID_38_);}
+	.st39{fill:url(#SVGID_39_);}
+	.st40{fill:url(#SVGID_40_);}
+	.st41{fill:url(#SVGID_41_);}
+	.st42{fill:url(#SVGID_42_);}
+	.st43{fill:url(#SVGID_43_);}
+	.st44{fill:url(#SVGID_44_);}
+</style>
+<g>
+	<g>
+		<path class="st15" d="M39.3,183.5c0.9-0.2,1.7-0.3,2.4-0.3c0.7,0,1.4-0.1,1.9-0.1c0.7,0,1.5,0,2.2,0.1c0.7,0,1.4,0.1,2,0.3
+			l6.1,20.9l6-20.9c0.6-0.1,1.3-0.2,2-0.2s1.4-0.1,2.1-0.1c0.5,0,1.2,0,1.9,0.1c0.7,0,1.5,0.1,2.4,0.3l-10.7,28.1
+			c-0.7,0.1-1.4,0.2-2.2,0.2c-0.8,0-1.4,0.1-1.9,0.1c-0.5,0-1.2,0-1.8-0.1c-0.7,0-1.3-0.1-2-0.3L39.3,183.5z"/>
+		<path class="st15" d="M73.9,189.3h-3.6c-0.1-0.5-0.2-1-0.2-1.5c-0.1-0.5-0.1-1-0.1-1.5c0-1,0.1-1.9,0.3-2.9h11.2v28.1
+			c-1.3,0.2-2.6,0.3-3.8,0.3c-1.2,0-2.5-0.1-3.8-0.3V189.3z M72.8,178.7c-0.2-1.2-0.3-2.5-0.3-3.6c0-1.2,0.1-2.4,0.3-3.6
+			c0.6-0.1,1.3-0.2,2-0.2c0.7-0.1,1.3-0.1,1.9-0.1c0.6,0,1.3,0,2,0.1c0.7,0.1,1.4,0.1,2,0.2c0.1,0.6,0.2,1.2,0.2,1.8
+			c0,0.6,0.1,1.2,0.1,1.8c0,0.6,0,1.2-0.1,1.8c0,0.6-0.1,1.2-0.2,1.8c-0.6,0.1-1.3,0.2-2,0.2c-0.7,0-1.4,0.1-2,0.1
+			c-0.6,0-1.2,0-2-0.1C74.1,178.9,73.4,178.8,72.8,178.7z"/>
+		<path class="st15" d="M95.3,199.9c0.1,2.2,0.9,3.8,2.3,4.7c1.4,1,3.2,1.5,5.4,1.5c1.2,0,2.5-0.1,3.8-0.4c1.3-0.2,2.5-0.6,3.7-1
+			c0.4,0.7,0.7,1.6,1,2.6c0.3,1,0.5,2.1,0.5,3.3c-2.8,1.1-6,1.6-9.6,1.6c-2.6,0-4.8-0.4-6.7-1.1c-1.9-0.7-3.4-1.7-4.6-3
+			c-1.2-1.3-2-2.8-2.6-4.6c-0.6-1.8-0.8-3.7-0.8-5.8c0-2.1,0.3-4,0.9-5.8c0.6-1.8,1.4-3.4,2.6-4.7c1.1-1.3,2.6-2.4,4.2-3.2
+			c1.7-0.8,3.7-1.2,5.9-1.2c2,0,3.7,0.3,5.2,1c1.5,0.7,2.8,1.6,3.9,2.8c1.1,1.2,1.9,2.6,2.4,4.3c0.5,1.7,0.8,3.4,0.8,5.3
+			c0,0.7,0,1.4-0.1,2c-0.1,0.7-0.1,1.2-0.2,1.6H95.3z M106.3,194.5c-0.1-1.7-0.6-3.1-1.4-4.2c-0.9-1.1-2.1-1.6-3.7-1.6
+			c-1.8,0-3.2,0.5-4.1,1.5c-0.9,1-1.5,2.4-1.7,4.3H106.3z"/>
+		<path class="st15" d="M115.4,183.5c0.8-0.2,1.6-0.3,2.4-0.3c0.7,0,1.4-0.1,1.9-0.1c0.7,0,1.4,0,2.1,0.1c0.7,0,1.3,0.1,2,0.3
+			l4.5,20.8l5.2-20.8c1.1-0.2,2.4-0.3,3.7-0.3c0.9,0,1.7,0.1,2.3,0.1c0.6,0,1.2,0.1,1.6,0.2l5.1,20.4l4.5-20.4
+			c0.6-0.1,1.2-0.2,1.7-0.2s1.2-0.1,1.9-0.1c0.5,0,1.1,0,1.8,0.1c0.7,0,1.5,0.1,2.4,0.3l-8.8,28.1c-0.7,0.1-1.3,0.2-2.1,0.2
+			c-0.7,0-1.4,0.1-1.9,0.1c-0.5,0-1.1,0-1.8-0.1c-0.7,0-1.3-0.1-1.9-0.3l-5.1-18.6l-5.3,18.7c-0.7,0.1-1.4,0.2-2.2,0.2
+			c-0.7,0-1.4,0.1-1.9,0.1c-0.5,0-1.1,0-1.8-0.1c-0.7,0-1.3-0.1-1.9-0.3L115.4,183.5z"/>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="166.7776" y1="181.3452" x2="166.7776" y2="224.4477">
+			<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path class="st0" d="M162.8,211.6c-0.2-1.3-0.3-2.7-0.3-4c0-1.3,0.1-2.6,0.3-4c1.3-0.2,2.7-0.3,4-0.3c1.3,0,2.6,0.1,4,0.3
+			c0.2,1.4,0.3,2.7,0.3,4c0,1.3-0.1,2.7-0.3,4c-1.4,0.2-2.7,0.3-4,0.3C165.5,211.9,164.1,211.8,162.8,211.6z"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="191.4222" y1="181.3452" x2="191.4222" y2="224.4477">
+			<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path class="st1" d="M178.3,183.4c0.5-0.1,1-0.2,1.5-0.2c0.5,0,1-0.1,1.7-0.1c1,0,2,0.1,3.1,0.3c0.1,0.2,0.2,0.4,0.3,0.8
+			c0.1,0.3,0.2,0.7,0.3,1.1c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.7,0.1,0.9c0.3-0.6,0.7-1.1,1.2-1.7c0.5-0.6,1-1.1,1.7-1.5
+			c0.7-0.4,1.4-0.8,2.3-1.1c0.8-0.3,1.8-0.4,2.8-0.4c1.6,0,3,0.3,4.4,0.9c1.4,0.6,2.5,1.5,3.6,2.6c1,1.2,1.8,2.7,2.4,4.4
+			c0.6,1.8,0.8,3.9,0.8,6.3c0,2.4-0.3,4.5-1,6.3c-0.7,1.9-1.7,3.5-3,4.8c-1.3,1.3-2.9,2.3-4.8,3c-1.9,0.7-4,1.1-6.4,1.1
+			c-0.6,0-1.2,0-1.8-0.1c-0.6-0.1-1.1-0.1-1.5-0.2v12.5c-0.7,0.1-1.3,0.2-2,0.2c-0.6,0-1.3,0.1-1.9,0.1c-0.6,0-1.2,0-1.9-0.1
+			c-0.6,0-1.3-0.1-2-0.2V183.4z M186,205.6c1,0.3,2.1,0.4,3.4,0.4c2.3,0,4-0.7,5.2-2.2c1.2-1.5,1.8-3.6,1.8-6.6
+			c0-1.1-0.1-2.2-0.3-3.1c-0.2-1-0.5-1.8-0.9-2.5c-0.4-0.7-1-1.2-1.7-1.6c-0.7-0.4-1.5-0.6-2.5-0.6c-0.9,0-1.7,0.2-2.3,0.5
+			c-0.6,0.3-1.2,0.8-1.6,1.4c-0.4,0.6-0.7,1.3-0.9,2.1c-0.2,0.8-0.3,1.7-0.3,2.6V205.6z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="221.0475" y1="181.3452" x2="221.0475" y2="224.4477">
+			<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path class="st2" d="M206.8,183.5c0.8-0.2,1.6-0.3,2.2-0.3c0.6,0,1.2,0,1.8,0c0.7,0,1.5,0,2.2,0.1c0.8,0,1.4,0.1,2.1,0.3l5.9,24.5
+			l6.6-24.5c1.2-0.2,2.4-0.3,3.7-0.3c0.5,0,1.1,0,1.7,0c0.6,0,1.4,0.1,2.3,0.3l-10.5,34.8c-0.4,1.4-0.9,2.5-1.5,3.4
+			c-0.6,0.9-1.3,1.6-2,2.1c-0.8,0.5-1.6,0.9-2.6,1.1c-0.9,0.2-2,0.3-3,0.3c-1,0-1.9-0.1-2.7-0.2c-0.8-0.1-1.6-0.3-2.4-0.5
+			c0-0.2-0.1-0.3-0.1-0.5c0-0.1,0-0.3,0-0.4c0-0.9,0.1-1.7,0.3-2.5c0.2-0.8,0.4-1.5,0.7-2.3c0.3,0.1,0.8,0.2,1.3,0.3
+			c0.5,0.1,1.1,0.1,1.6,0.1c0.4,0,0.9,0,1.3-0.1c0.4-0.1,0.9-0.2,1.3-0.5c0.4-0.3,0.8-0.7,1.2-1.3c0.4-0.6,0.7-1.4,1-2.5l0.9-3.4
+			c-0.4,0-0.8,0.1-1.3,0.1c-0.5,0-1,0-1.5,0c-0.4,0-0.8,0-1.1,0c-0.4,0-0.7,0-1-0.1L206.8,183.5z"/>
+	</g>
+	<g>
+		<g>
+			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="136.7529" y1="59.2047" x2="136.7529" y2="165.1516">
+				<stop  offset="0" style="stop-color:#FFFFFF"/>
+				<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+				<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+				<stop  offset="1" style="stop-color:#FFFFFF"/>
+			</linearGradient>
+			<path class="st3" d="M167,93.2c0-1.5-0.4-2.9-1.2-4.2c-1.5-2.4-4-3.8-6.8-3.8h-44.5c-2.8,0-5.4,1.4-6.8,3.8
+				c-0.8,1.3-1.2,2.7-1.2,4.2c0,1.2,0.3,2.5,0.9,3.6l22.3,44c1.4,2.7,4.1,4.4,7.1,4.4c3,0,5.8-1.7,7.1-4.4l22.3-44
+				C166.7,95.7,167,94.4,167,93.2z M154.1,114l-1.2,2.4c-0.8,1.3-1.7,2.6-2.8,3.7c-3.4,3.4-8.1,5.5-13.3,5.5
+				c-5.2,0-9.9-2.1-13.3-5.5c-1.1-1.1-2-2.3-2.8-3.7l-1.2-2.4c-0.9-2.2-1.4-4.6-1.4-7.1c0-5.2,2.1-9.9,5.5-13.3
+				c3.2-3.2,7.6-5.2,12.4-5.5h1.6c4.9,0.2,9.2,2.2,12.4,5.5c3.4,3.4,5.5,8.1,5.5,13.3C155.5,109.4,155,111.8,154.1,114z M109.5,93.2
+				c0-0.9,0.2-1.8,0.8-2.6c1-1.5,2.4-2.4,4.3-2.4h11.4c-6.1,3.5-10.3,10-10.7,17.4L110,95.5C109.6,94.7,109.5,94,109.5,93.2z
+				 M141.2,139.5c-0.9,1.7-2.5,2.7-4.5,2.7c-2,0-3.6-1-4.5-2.7l-7.3-14.4c3.4,2.2,7.4,3.5,11.7,3.5c4.3,0,8.4-1.3,11.7-3.5
+				L141.2,139.5z M163.5,95.5l-5.1,10.2c-0.4-7.5-4.6-13.9-10.7-17.4H159c1.8,0,3.3,0.8,4.3,2.4c0.5,0.8,0.8,1.7,0.8,2.6
+				C164,94,163.9,94.7,163.5,95.5z"/>
+			<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="136.7539" y1="59.2047" x2="136.7539" y2="165.1516">
+				<stop  offset="0" style="stop-color:#FFFFFF"/>
+				<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+				<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+				<stop  offset="1" style="stop-color:#FFFFFF"/>
+			</linearGradient>
+			<path class="st4" d="M141.7,97.2c0-1.4,0.6-2.7,1.6-3.6c-2-1-4.2-1.5-6.6-1.5c-8.2,0-14.8,6.6-14.8,14.8
+				c0,8.2,6.6,14.8,14.8,14.8c8.2,0,14.8-6.6,14.8-14.8c0-2.4-0.6-4.6-1.5-6.6c-0.9,1-2.2,1.6-3.6,1.6
+				C143.8,102,141.7,99.8,141.7,97.2z"/>
+		</g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="142.6647" y1="60.2756" x2="142.6647" y2="161.9665">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path class="st5" d="M189.6,121.7L189.6,121.7c11.4,3.4,18.8,8.7,18.8,14.8c0,10.1-20.5,18.2-45.9,18.2c-11.2,0-21.4-1.6-29.4-4.2
+			l0,0c-2.8-0.9-5.2-2.8-6.7-5.7l-24.1-47.6c-1.9-3.8-1.5-8,0.5-11.2c-19.3,1.6-31.6,8.2-31.6,12.7c0,4.1,10.2,9.9,26.6,12.2l0.2,0
+			c0.6,0.1,1.3,0.2,2,0.2c0.2,0,0.3,0,0.5,0.1c0.6,0.1,1.3,0.1,1.9,0.2c0.2,0,0.3,0,0.5,0c0.8,0.1,1.6,0.1,2.4,0.2
+			c-6.7,0.7-12.7,0.8-17.8,0.3v8.5h0.1v10.9c0,4.3,2.3,8.3,6,10.5l37.2,21.5c1.9,1.1,4,1.6,6,1.6s4.2-0.5,6-1.6l3.4-1.9
+			c-7.8-1.9-14.7-4.4-20.3-7.4c0.9,0.4,1.8,0.7,2.8,1.1l0.3,0.1c2,0.7,4,1.3,6.2,1.9l0.2,0c1.1,0.3,2.2,0.5,3.3,0.8l0.3,0.1
+			c2.3,0.5,4.7,0.9,7.2,1.2l0.4,0c1.2,0.2,2.5,0.3,3.7,0.4l0.3,0c1.3,0.1,2.6,0.2,3.9,0.3l0,0l0,0c2.7,0.2,5.4,0.3,8.2,0.3
+			c28.5,0,51.5-9.3,51.5-20.7C214.1,131.8,204.3,125.3,189.6,121.7z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="131.9256" y1="53.2367" x2="131.9256" y2="166.1817">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.1774" style="stop-color:#FFFFFF"/>
+			<stop  offset="0.8441" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path class="st6" d="M174.1,123.9l-0.1,0c-1.5-0.2-3-0.3-4.6-0.4c6.2-0.7,11.9-0.7,16.8-0.4V92.4h-0.1v-4.2c0-4.3-2.3-8.3-6-10.5
+			l-37.2-21.5c-1.9-1.1-4-1.6-6-1.6s-4.2,0.5-6,1.6l-25.1,14.5c3.3,0.2,14.2,0.9,27.2,6.1c-6.1-1.1-12.9-1.7-20-1.7v0
+			c-0.3,0-0.5,0-0.8,0c-28.5,0-51.5,9.3-51.5,20.7c0,7.3,9.4,13.7,23.5,17.4V113c-10.8-3.3-17.8-8.5-17.8-14.4
+			c0-10,20.4-18.2,45.7-18.2l0,0.1c0.3,0,0.6-0.1,0.9-0.1h48.1c8.6,0,14.2,9.1,10.3,16.7L147,144.7c-0.7,1.3-1.5,2.4-2.5,3.3
+			c5.3,1,11.4,1.6,18.1,1.6c24.5,0,40.8-7.9,40.8-13.1C203.4,132.1,192,125.9,174.1,123.9z"/>
+	</g>
+</g>
+</svg>
diff --git a/docs/public/logo.svg b/docs/public/logo.svg
new file mode 100644
index 0000000..f7bd0e4
--- /dev/null
+++ b/docs/public/logo.svg
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 274.6 139.9" style="enable-background:new 0 0 274.6 139.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+	.st5{fill:url(#SVGID_6_);}
+	.st6{fill:url(#SVGID_7_);}
+	.st7{fill:url(#SVGID_8_);}
+	.st8{fill:url(#SVGID_9_);}
+	.st9{fill:url(#SVGID_10_);}
+	.st10{fill:url(#SVGID_11_);}
+	.st11{fill:url(#SVGID_12_);}
+	.st12{fill:url(#SVGID_13_);}
+	.st13{fill:url(#SVGID_14_);}
+	.st14{fill:url(#SVGID_15_);}
+	.st15{fill:#FFFFFF;}
+	.st16{fill:url(#SVGID_16_);}
+	.st17{fill:url(#SVGID_17_);}
+	.st18{fill:url(#SVGID_18_);}
+	.st19{fill:url(#SVGID_19_);}
+	.st20{fill:url(#SVGID_20_);}
+	.st21{fill:url(#SVGID_21_);}
+	.st22{fill:url(#SVGID_22_);}
+	.st23{fill:url(#SVGID_23_);}
+	.st24{fill:url(#SVGID_24_);}
+	.st25{fill:url(#SVGID_25_);}
+	.st26{fill:url(#SVGID_26_);}
+	.st27{fill:url(#SVGID_27_);}
+	.st28{fill:url(#SVGID_28_);}
+	.st29{fill:url(#SVGID_29_);}
+	.st30{fill:url(#SVGID_30_);}
+	.st31{fill:url(#SVGID_31_);}
+	.st32{fill:url(#SVGID_32_);}
+	.st33{fill:url(#SVGID_33_);}
+	.st34{fill:url(#SVGID_34_);}
+	.st35{fill:url(#SVGID_35_);}
+	.st36{fill:url(#SVGID_36_);}
+	.st37{fill:url(#SVGID_37_);}
+	.st38{fill:url(#SVGID_38_);}
+	.st39{fill:url(#SVGID_39_);}
+	.st40{fill:url(#SVGID_40_);}
+	.st41{fill:url(#SVGID_41_);}
+	.st42{fill:url(#SVGID_42_);}
+	.st43{fill:url(#SVGID_43_);}
+	.st44{fill:url(#SVGID_44_);}
+</style>
+<g>
+	<g>
+		<path class="st15" d="M96.5,58c0.7-0.2,1.4-0.2,2.1-0.3c0.6,0,1.2,0,1.6,0c0.6,0,1.2,0,1.9,0c0.6,0,1.2,0.1,1.7,0.2l5.2,17.9
+			l5.1-17.9c0.5-0.1,1.1-0.2,1.7-0.2c0.6,0,1.2-0.1,1.8-0.1c0.5,0,1,0,1.6,0c0.6,0,1.3,0.1,2.1,0.3l-9.1,23.9
+			c-0.6,0.1-1.2,0.2-1.9,0.2c-0.7,0-1.2,0-1.6,0c-0.5,0-1,0-1.6,0c-0.6,0-1.1-0.1-1.7-0.2L96.5,58z"/>
+		<path class="st15" d="M126,63h-3.1c-0.1-0.4-0.2-0.8-0.2-1.3c0-0.4-0.1-0.9-0.1-1.3c0-0.8,0.1-1.7,0.3-2.5h9.6v24
+			c-1.1,0.2-2.2,0.3-3.2,0.3c-1,0-2.1-0.1-3.2-0.3V63z M125,53.9c-0.2-1.1-0.3-2.1-0.3-3.1c0-1,0.1-2,0.3-3.1
+			c0.5-0.1,1.1-0.2,1.7-0.2c0.6,0,1.1-0.1,1.6-0.1c0.5,0,1.1,0,1.7,0.1c0.6,0.1,1.2,0.1,1.7,0.2c0.1,0.5,0.2,1,0.2,1.6
+			c0,0.5,0,1,0,1.6c0,0.5,0,1,0,1.5c0,0.5-0.1,1-0.2,1.6c-0.5,0.1-1.1,0.2-1.7,0.2c-0.6,0-1.2,0-1.7,0c-0.5,0-1.1,0-1.7,0
+			C126.1,54.1,125.6,54,125,53.9z"/>
+		<path class="st15" d="M144.2,72c0.1,1.9,0.8,3.2,1.9,4c1.2,0.8,2.7,1.3,4.6,1.3c1.1,0,2.1-0.1,3.2-0.3c1.1-0.2,2.1-0.5,3.1-0.9
+			c0.3,0.6,0.6,1.4,0.9,2.2c0.2,0.9,0.4,1.8,0.4,2.8c-2.4,0.9-5.1,1.4-8.2,1.4c-2.2,0-4.1-0.3-5.7-0.9c-1.6-0.6-2.9-1.5-3.9-2.6
+			c-1-1.1-1.7-2.4-2.2-3.9c-0.5-1.5-0.7-3.2-0.7-5c0-1.8,0.2-3.4,0.7-5c0.5-1.5,1.2-2.9,2.2-4c1-1.1,2.2-2,3.6-2.7
+			c1.4-0.7,3.1-1,5-1c1.7,0,3.2,0.3,4.5,0.9c1.3,0.6,2.4,1.4,3.3,2.4c0.9,1,1.6,2.2,2.1,3.6c0.5,1.4,0.7,2.9,0.7,4.5
+			c0,0.6,0,1.2-0.1,1.7c-0.1,0.6-0.1,1-0.2,1.4H144.2z M153.6,67.4c-0.1-1.5-0.5-2.7-1.2-3.6c-0.8-0.9-1.8-1.4-3.2-1.4
+			c-1.5,0-2.7,0.4-3.5,1.3c-0.8,0.9-1.3,2.1-1.4,3.7H153.6z"/>
+		<path class="st15" d="M161.4,58c0.7-0.2,1.4-0.2,2-0.3c0.6,0,1.2,0,1.6,0c0.6,0,1.2,0,1.8,0c0.6,0,1.1,0.1,1.7,0.2l3.8,17.7
+			l4.4-17.7c1-0.2,2-0.3,3.2-0.3c0.8,0,1.5,0.1,2,0.1s1,0.1,1.4,0.2l4.4,17.4l3.8-17.4c0.5-0.1,1-0.2,1.5-0.2c0.5,0,1-0.1,1.6-0.1
+			c0.4,0,1,0,1.6,0c0.6,0,1.3,0.1,2,0.3l-7.5,23.9c-0.6,0.1-1.1,0.2-1.8,0.2c-0.6,0-1.2,0-1.6,0c-0.5,0-1,0-1.6,0
+			c-0.6,0-1.1-0.1-1.6-0.2L179.7,66l-4.5,15.9c-0.6,0.1-1.2,0.2-1.8,0.2c-0.6,0-1.2,0-1.6,0c-0.4,0-0.9,0-1.5,0
+			c-0.6,0-1.1-0.1-1.6-0.2L161.4,58z"/>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="205.1404" y1="56.174" x2="205.1404" y2="92.9154">
+			<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+			<stop  offset="0.8441" style="stop-color:#182AB4"/>
+		</linearGradient>
+		<path class="st0" d="M201.7,81.9c-0.2-1.1-0.3-2.3-0.3-3.4s0.1-2.3,0.3-3.4c1.1-0.2,2.3-0.3,3.4-0.3c1.1,0,2.3,0.1,3.4,0.3
+			c0.2,1.2,0.3,2.3,0.3,3.4c0,1.1-0.1,2.3-0.3,3.4c-1.2,0.2-2.3,0.3-3.4,0.3C204,82.2,202.9,82.1,201.7,81.9z"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="226.1479" y1="56.174" x2="226.1479" y2="92.9154">
+			<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+			<stop  offset="0.8441" style="stop-color:#182AB4"/>
+		</linearGradient>
+		<path class="st1" d="M214.9,57.9c0.4-0.1,0.9-0.2,1.3-0.2c0.4,0,0.9,0,1.4,0c0.9,0,1.7,0.1,2.6,0.3c0.1,0.2,0.2,0.4,0.3,0.7
+			c0.1,0.3,0.2,0.6,0.2,0.9c0.1,0.3,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.8c0.3-0.5,0.6-1,1-1.5c0.4-0.5,0.9-0.9,1.5-1.3
+			c0.6-0.4,1.2-0.7,1.9-0.9c0.7-0.2,1.5-0.4,2.4-0.4c1.3,0,2.6,0.2,3.7,0.7c1.2,0.5,2.2,1.2,3,2.2c0.9,1,1.5,2.3,2,3.8
+			c0.5,1.5,0.7,3.3,0.7,5.4c0,2-0.3,3.8-0.9,5.4s-1.4,2.9-2.6,4.1c-1.1,1.1-2.5,2-4.1,2.6c-1.6,0.6-3.4,0.9-5.5,0.9
+			c-0.5,0-1,0-1.6-0.1c-0.5,0-0.9-0.1-1.3-0.2v10.7c-0.6,0.1-1.1,0.2-1.7,0.2c-0.5,0-1.1,0-1.6,0c-0.5,0-1.1,0-1.6,0
+			c-0.5,0-1.1-0.1-1.7-0.2V57.9z M221.5,76.8c0.8,0.2,1.8,0.4,2.9,0.4c1.9,0,3.4-0.6,4.4-1.9c1-1.2,1.5-3.1,1.5-5.6
+			c0-1-0.1-1.9-0.2-2.7c-0.2-0.8-0.4-1.5-0.8-2.1c-0.4-0.6-0.8-1.1-1.4-1.4c-0.6-0.3-1.3-0.5-2.1-0.5c-0.8,0-1.4,0.1-2,0.4
+			c-0.5,0.3-1,0.7-1.3,1.2c-0.3,0.5-0.6,1.1-0.7,1.8c-0.2,0.7-0.2,1.4-0.2,2.2V76.8z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="251.4012" y1="56.174" x2="251.4012" y2="92.9154">
+			<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+			<stop  offset="0.8441" style="stop-color:#182AB4"/>
+		</linearGradient>
+		<path class="st2" d="M239.3,58c0.7-0.2,1.3-0.2,1.9-0.3c0.5,0,1,0,1.5,0c0.6,0,1.3,0,1.9,0c0.6,0,1.2,0.1,1.8,0.2l5,20.9L257,58
+			c1-0.2,2.1-0.3,3.2-0.3c0.5,0,1,0,1.5,0c0.5,0,1.2,0.1,2,0.3l-9,29.6c-0.4,1.2-0.8,2.2-1.3,2.9c-0.5,0.8-1.1,1.4-1.7,1.8
+			c-0.7,0.4-1.4,0.7-2.2,0.9s-1.7,0.3-2.6,0.3c-0.9,0-1.6-0.1-2.3-0.2c-0.7-0.1-1.4-0.3-2.1-0.4c0-0.2,0-0.3,0-0.4
+			c0-0.1,0-0.2,0-0.4c0-0.7,0.1-1.4,0.3-2.1c0.2-0.7,0.4-1.3,0.6-1.9c0.3,0.1,0.7,0.2,1.1,0.3c0.5,0.1,0.9,0.1,1.4,0.1
+			c0.4,0,0.7,0,1.1-0.1c0.4,0,0.7-0.2,1.1-0.4c0.4-0.2,0.7-0.6,1-1.1c0.3-0.5,0.6-1.2,0.8-2.1l0.8-2.9c-0.3,0-0.7,0.1-1.1,0.1
+			c-0.4,0-0.8,0-1.3,0c-0.3,0-0.7,0-1,0c-0.3,0-0.6,0-0.8-0.1L239.3,58z"/>
+	</g>
+	<g>
+		<g>
+			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="53.145" y1="42.062" x2="53.145" y2="100.5597">
+				<stop  offset="0" style="stop-color:#04C9FE"/>
+				<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+				<stop  offset="0.8441" style="stop-color:#182AB4"/>
+				<stop  offset="1" style="stop-color:#182AB4"/>
+			</linearGradient>
+			<path class="st3" d="M69.9,60.8c0-0.8-0.2-1.6-0.7-2.3c-0.8-1.3-2.2-2.1-3.8-2.1H40.9c-1.5,0-3,0.8-3.8,2.1
+				c-0.4,0.7-0.7,1.5-0.7,2.3c0,0.7,0.2,1.4,0.5,2l12.3,24.3c0.8,1.5,2.3,2.4,3.9,2.4c1.7,0,3.2-0.9,3.9-2.4l12.3-24.3
+				C69.7,62.2,69.9,61.5,69.9,60.8z M62.7,72.3L62,73.7c-0.4,0.7-1,1.4-1.6,2c-1.9,1.9-4.5,3-7.3,3c-2.9,0-5.4-1.2-7.3-3
+				c-0.6-0.6-1.1-1.3-1.6-2l-0.7-1.3c-0.5-1.2-0.8-2.5-0.8-3.9c0-2.9,1.2-5.4,3-7.3c1.8-1.8,4.2-2.9,6.9-3h0.9
+				c2.7,0.1,5.1,1.2,6.9,3c1.9,1.9,3,4.5,3,7.3C63.5,69.8,63.2,71.1,62.7,72.3z M38.1,60.8c0-0.5,0.1-1,0.4-1.4
+				c0.5-0.9,1.3-1.3,2.4-1.3h6.3c-3.4,2-5.7,5.5-5.9,9.6l-2.8-5.6C38.2,61.7,38.1,61.3,38.1,60.8z M55.6,86.4
+				c-0.5,1-1.4,1.5-2.5,1.5c-1.1,0-2-0.6-2.5-1.5l-4-7.9c1.9,1.2,4.1,1.9,6.5,1.9c2.4,0,4.6-0.7,6.5-1.9L55.6,86.4z M67.9,62.1
+				l-2.8,5.6c-0.2-4.1-2.6-7.7-5.9-9.6h6.3c1,0,1.8,0.5,2.4,1.3c0.3,0.5,0.4,0.9,0.4,1.4C68.2,61.3,68.1,61.7,67.9,62.1z"/>
+			<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="53.1455" y1="42.062" x2="53.1455" y2="100.5597">
+				<stop  offset="0" style="stop-color:#04C9FE"/>
+				<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+				<stop  offset="0.8441" style="stop-color:#182AB4"/>
+				<stop  offset="1" style="stop-color:#182AB4"/>
+			</linearGradient>
+			<path class="st4" d="M55.9,63c0-0.8,0.3-1.5,0.9-2c-1.1-0.5-2.3-0.8-3.6-0.8c-4.5,0-8.2,3.7-8.2,8.2c0,4.5,3.7,8.2,8.2,8.2
+				c4.5,0,8.2-3.7,8.2-8.2c0-1.3-0.3-2.5-0.8-3.6c-0.5,0.6-1.2,0.9-2,0.9C57.1,65.7,55.9,64.5,55.9,63z"/>
+		</g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="56.4091" y1="42.6533" x2="56.4091" y2="98.8012">
+			<stop  offset="0" style="stop-color:#04C9FE"/>
+			<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+			<stop  offset="0.8441" style="stop-color:#182AB4"/>
+			<stop  offset="1" style="stop-color:#182AB4"/>
+		</linearGradient>
+		<path class="st5" d="M82.4,76.5L82.4,76.5c6.3,1.9,10.4,4.8,10.4,8.2c0,5.6-11.3,10.1-25.3,10.1c-6.2,0-11.8-0.9-16.2-2.3l0,0
+			c-1.5-0.5-2.9-1.5-3.7-3.2L34.2,63c-1.1-2.1-0.8-4.4,0.3-6.2c-10.7,0.9-17.5,4.5-17.5,7c0,2.3,5.6,5.5,14.7,6.7l0.1,0
+			c0.4,0,0.7,0.1,1.1,0.1c0.1,0,0.2,0,0.3,0c0.3,0,0.7,0.1,1,0.1c0.1,0,0.2,0,0.3,0c0.4,0,0.9,0.1,1.3,0.1c-3.7,0.4-7,0.4-9.8,0.2
+			v4.7h0v6c0,2.4,1.3,4.6,3.3,5.8l20.6,11.9c1,0.6,2.2,0.9,3.3,0.9c1.2,0,2.3-0.3,3.3-0.9l1.9-1.1c-4.3-1-8.1-2.5-11.2-4.1
+			c0.5,0.2,1,0.4,1.6,0.6l0.1,0.1c1.1,0.4,2.2,0.7,3.4,1l0.1,0c0.6,0.2,1.2,0.3,1.8,0.4l0.2,0c1.3,0.3,2.6,0.5,4,0.7l0.2,0
+			c0.7,0.1,1.4,0.2,2.1,0.2l0.1,0c0.7,0.1,1.4,0.1,2.1,0.2l0,0l0,0c1.5,0.1,3,0.1,4.5,0.1c15.7,0,28.5-5.1,28.5-11.4
+			C95.9,82.2,90.4,78.6,82.4,76.5z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="50.4796" y1="38.7668" x2="50.4796" y2="101.1285">
+			<stop  offset="0" style="stop-color:#04C9FE"/>
+			<stop  offset="0.1774" style="stop-color:#04C9FE"/>
+			<stop  offset="0.8441" style="stop-color:#182AB4"/>
+			<stop  offset="1" style="stop-color:#182AB4"/>
+		</linearGradient>
+		<path class="st6" d="M73.7,77.8L73.7,77.8c-0.9-0.1-1.7-0.2-2.6-0.2c3.4-0.4,6.6-0.4,9.2-0.2v-17h0v-2.3c0-2.4-1.3-4.6-3.3-5.8
+			L56.5,40.4c-1-0.6-2.2-0.9-3.3-0.9c-1.2,0-2.3,0.3-3.3,0.9l-13.8,8c1.8,0.1,7.8,0.5,15,3.4c-3.4-0.6-7.1-0.9-11.1-1v0
+			c-0.1,0-0.3,0-0.4,0C23.8,50.8,11,55.9,11,62.2c0,4,5.2,7.6,13,9.6v-0.1c-6-1.8-9.8-4.7-9.8-8c0-5.5,11.3-10,25.2-10.1l0,0
+			c0.2,0,0.3,0,0.5,0h26.6c4.7,0,7.8,5,5.7,9.2L58.8,89.3c-0.4,0.7-0.9,1.3-1.4,1.8c2.9,0.5,6.3,0.9,10,0.9
+			c13.5,0,22.5-4.4,22.5-7.2C89.9,82.3,83.7,78.9,73.7,77.8z"/>
+	</g>
+</g>
+</svg>
diff --git a/docs/public/space.png b/docs/public/space.png
new file mode 100644
index 0000000..9b2794a
Binary files /dev/null and b/docs/public/space.png differ
diff --git a/docs/src/components/Spotlight.tsx b/docs/src/components/Spotlight.tsx
new file mode 100644
index 0000000..33835a5
--- /dev/null
+++ b/docs/src/components/Spotlight.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { cn } from "@/utils/cn";
+
+type SpotlightProps = {
+    className?: string;
+    fill?: string;
+};
+
+export const Spotlight = ({ className, fill }: SpotlightProps) => {
+    return (
+        <svg
+            className={cn(
+                "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
+                className
+            )}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 3787 2842"
+            fill="none"
+        >
+            <g filter="url(#filter)">
+                <ellipse
+                    cx="1924.71"
+                    cy="273.501"
+                    rx="1924.71"
+                    ry="273.501"
+                    transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+                    fill={fill || "white"}
+                    fillOpacity="0.21"
+                ></ellipse>
+            </g>
+            <defs>
+                <filter
+                    id="filter"
+                    x="0.860352"
+                    y="0.838989"
+                    width="3785.16"
+                    height="2840.26"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood
+                        floodOpacity="0"
+                        result="BackgroundImageFix"
+                    ></feFlood>
+                    <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="BackgroundImageFix"
+                        result="shape"
+                    ></feBlend>
+                    <feGaussianBlur
+                        stdDeviation="151"
+                        result="effect1_foregroundBlur_1065_8"
+                    ></feGaussianBlur>
+                </filter>
+            </defs>
+        </svg>
+    );
+};
diff --git a/docs/src/components/admonition.tsx b/docs/src/components/admonition.tsx
new file mode 100644
index 0000000..8f04bda
--- /dev/null
+++ b/docs/src/components/admonition.tsx
@@ -0,0 +1,155 @@
+import React from "react";
+
+type Level = "info" | "danger" | "warning" | "note" | "question";
+type AdmonitionProps = {
+    children: React.ReactNode;
+    title: string | undefined;
+    level: Level | undefined;
+};
+
+const LEVEL_BORDER_COLORS: Record<Level, string> = {
+    info: "border-l-sky-500",
+    warning: "border-l-amber-500",
+    danger: "border-l-rose-500",
+    note: "border-l-blue-500",
+    question: "border-l-green-500",
+};
+
+function LevelTitle({
+    level,
+    title,
+}: {
+    level: Level;
+    title: string | undefined;
+}) {
+    switch (level) {
+        case "info":
+            return (
+                <div className="text-sky-400 flex items-center space-x-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+                        />
+                    </svg>
+
+                    <header className="font-light text-xl">
+                        {title || "Info"}
+                    </header>
+                </div>
+            );
+        case "warning":
+            return (
+                <div className="text-amber-400 flex items-center space-x-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                        />
+                    </svg>
+                    <header className="font-light text-xl">
+                        {title || "Warning"}
+                    </header>
+                </div>
+            );
+        case "danger":
+            return (
+                <div className="text-rose-500 flex items-center space-x-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M12 9v3.75m0-10.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.25-8.25-3.286Zm0 13.036h.008v.008H12v-.008Z"
+                        />
+                    </svg>
+
+                    <header className="font-light text-xl">
+                        {title || "Danger"}
+                    </header>
+                </div>
+            );
+        case "note":
+            return (
+                <div className="text-blue-400 flex items-center space-x-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+                        />
+                    </svg>
+
+                    <header className="font-light text-xl">
+                        {title || "Note"}
+                    </header>
+                </div>
+            );
+        case "question":
+            return (
+                <div className="text-green-400 flex items-center space-x-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
+                        />
+                    </svg>
+
+                    <header className="font-light text-xl">
+                        {title || "Question"}
+                    </header>
+                </div>
+            );
+    }
+}
+
+export default function Admonition(props: AdmonitionProps) {
+    const level = props.level || "note";
+    return (
+        <div
+            className={`border border-zinc-900 rounded-md bg-black ${LEVEL_BORDER_COLORS[level]} border-l-4 w-fit`}
+        >
+            <div className="border-b border-zinc-900 w-full px-4 py-2 bg-zinc-950">
+                <LevelTitle level={level} title={props.title} />
+            </div>
+            <div className="px-4 py-2">{props.children}</div>
+        </div>
+    );
+}
diff --git a/docs/src/components/animated-modal.tsx b/docs/src/components/animated-modal.tsx
new file mode 100644
index 0000000..f93ea88
--- /dev/null
+++ b/docs/src/components/animated-modal.tsx
@@ -0,0 +1,243 @@
+"use client";
+import { cn } from "@/utils/cn";
+import { AnimatePresence, motion } from "framer-motion";
+import React, {
+    ReactNode,
+    createContext,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+interface ModalContextType {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+
+const ModalContext = createContext<ModalContextType | undefined>(undefined);
+
+export const ModalProvider = ({ children }: { children: ReactNode }) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <ModalContext.Provider value={{ open, setOpen }}>
+            {children}
+        </ModalContext.Provider>
+    );
+};
+
+export const useModal = () => {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return context;
+};
+
+export function Modal({ children }: { children: ReactNode }) {
+    return <ModalProvider>{children}</ModalProvider>;
+}
+
+export const ModalTrigger = ({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className?: string;
+}) => {
+    const { setOpen } = useModal();
+    return (
+        <button
+            className={cn(
+                "px-4 py-2 rounded-md text-black dark:text-white text-center relative overflow-hidden",
+                className
+            )}
+            onClick={() => setOpen(true)}
+        >
+            {children}
+        </button>
+    );
+};
+
+export const ModalBody = ({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className?: string;
+}) => {
+    const { open } = useModal();
+
+    useEffect(() => {
+        if (open) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "auto";
+        }
+    }, [open]);
+
+    const modalRef = useRef(null);
+    const { setOpen } = useModal();
+    useOutsideClick(modalRef, () => setOpen(false));
+
+    return (
+        <AnimatePresence>
+            {open && (
+                <motion.div
+                    initial={{
+                        opacity: 0,
+                    }}
+                    animate={{
+                        opacity: 1,
+                        backdropFilter: "blur(10px)",
+                    }}
+                    exit={{
+                        opacity: 0,
+                        backdropFilter: "blur(0px)",
+                    }}
+                    className="fixed [perspective:800px] [transform-style:preserve-3d] inset-0 h-full w-full  flex items-center justify-center z-50"
+                >
+                    <Overlay />
+
+                    <motion.div
+                        ref={modalRef}
+                        className={cn(
+                            "min-h-[50%] max-h-[90%] md:max-w-[40%] bg-white dark:bg-black border border-transparent dark:border-zinc-900 md:rounded-2xl relative z-50 flex flex-col flex-1 overflow-hidden",
+                            className
+                        )}
+                        initial={{
+                            opacity: 0,
+                            scale: 0.5,
+                            rotateX: 40,
+                            y: 40,
+                        }}
+                        animate={{
+                            opacity: 1,
+                            scale: 1,
+                            rotateX: 0,
+                            y: 0,
+                        }}
+                        exit={{
+                            opacity: 0,
+                            scale: 0.8,
+                            rotateX: 10,
+                        }}
+                        transition={{
+                            type: "spring",
+                            stiffness: 260,
+                            damping: 15,
+                        }}
+                    >
+                        <CloseIcon />
+                        {children}
+                    </motion.div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export const ModalContent = ({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className?: string;
+}) => {
+    return (
+        <div className={cn("flex flex-col flex-1 p-8 md:p-10", className)}>
+            {children}
+        </div>
+    );
+};
+
+export const ModalFooter = ({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className?: string;
+}) => {
+    return (
+        <div
+            className={cn(
+                "flex justify-end p-4 bg-zinc-100 dark:bg-black border-t border-zinc-900",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
+
+const Overlay = ({ className }: { className?: string }) => {
+    return (
+        <motion.div
+            initial={{
+                opacity: 0,
+            }}
+            animate={{
+                opacity: 1,
+                backdropFilter: "blur(10px)",
+            }}
+            exit={{
+                opacity: 0,
+                backdropFilter: "blur(0px)",
+            }}
+            className={`fixed inset-0 h-full w-full bg-black bg-opacity-50 z-50 ${className}`}
+        ></motion.div>
+    );
+};
+
+const CloseIcon = () => {
+    const { setOpen } = useModal();
+    return (
+        <button
+            onClick={() => setOpen(false)}
+            className="absolute top-4 right-4 group"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="text-black dark:text-white h-4 w-4 group-hover:scale-125 group-hover:rotate-3 transition duration-200"
+            >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M18 6l-12 12" />
+                <path d="M6 6l12 12" />
+            </svg>
+        </button>
+    );
+};
+
+// Hook to detect clicks outside of a component.
+// Add it in a separate file, I've added here for simplicity
+export const useOutsideClick = (
+    ref: React.RefObject<HTMLDivElement>,
+    callback: Function
+) => {
+    useEffect(() => {
+        const listener = (event: any) => {
+            // DO NOTHING if the element being clicked is the target element or their children
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            callback(event);
+        };
+
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, callback]);
+};
diff --git a/docs/src/components/aurora-background.tsx b/docs/src/components/aurora-background.tsx
new file mode 100644
index 0000000..209cb2b
--- /dev/null
+++ b/docs/src/components/aurora-background.tsx
@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "@/utils/cn";
+import React, { ReactNode } from "react";
+
+interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+    children: ReactNode;
+    showRadialGradient?: boolean;
+}
+
+export const AuroraBackground = ({
+    className,
+    children,
+    showRadialGradient = true,
+    ...props
+}: AuroraBackgroundProps) => {
+    return (
+        <main className="w-full">
+            <div
+                className={cn(
+                    "relative flex flex-col  h-[100vh] items-center justify-center bg-zinc-50 dark:bg-black  text-slate-950 transition-bg",
+                    className
+                )}
+                {...props}
+            >
+                <div className="absolute inset-0 overflow-hidden rotate-180">
+                    <div
+                        //   I'm sorry but this is what peak developer performance looks like // trigger warning
+                        className={cn(
+                            `
+            [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)]
+            [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]
+            [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--sky-300)_15%,var(--blue-300)_20%,var(--sky-200)_25%,var(--blue-400)_30%)]
+            [background-image:var(--white-gradient),var(--aurora)]
+            dark:[background-image:var(--dark-gradient),var(--aurora)]
+            [background-size:300%,_200%]
+            [background-position:50%_50%,50%_50%]
+            filter blur-[10px] invert dark:invert-0
+            after:content-[""] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] 
+            after:dark:[background-image:var(--dark-gradient),var(--aurora)]
+            after:[background-size:200%,_100%] 
+            after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference
+            pointer-events-none
+            absolute -inset-[10px] opacity-50 will-change-transform`,
+
+                            showRadialGradient &&
+                                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`
+                        )}
+                    ></div>
+                </div>
+                {children}
+            </div>
+        </main>
+    );
+};
diff --git a/docs/src/components/background-beams.tsx b/docs/src/components/background-beams.tsx
new file mode 100644
index 0000000..02a5fff
--- /dev/null
+++ b/docs/src/components/background-beams.tsx
@@ -0,0 +1,160 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/utils/cn";
+
+export const BackgroundBeams = React.memo(
+    ({ className }: { className?: string }) => {
+        const paths = [
+            "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875",
+            "M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867",
+            "M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859",
+            "M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851",
+            "M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843",
+            "M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835",
+            "M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827",
+            "M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819",
+            "M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811",
+            "M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803",
+            "M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795",
+            "M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787",
+            "M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779",
+            "M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771",
+            "M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763",
+            "M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755",
+            "M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747",
+            "M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739",
+            "M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731",
+            "M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723",
+            "M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715",
+            "M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707",
+            "M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699",
+            "M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691",
+            "M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683",
+            "M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675",
+            "M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667",
+            "M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659",
+            "M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651",
+            "M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643",
+            "M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635",
+            "M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627",
+            "M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619",
+            "M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611",
+            "M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603",
+            "M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595",
+            "M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587",
+            "M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579",
+            "M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571",
+            "M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563",
+            "M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555",
+            "M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547",
+            "M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539",
+            "M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531",
+            "M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523",
+            "M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515",
+            "M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507",
+            "M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499",
+            "M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491",
+            "M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483",
+        ];
+        return (
+            <div
+                className={cn(
+                    "absolute  h-full w-full inset-0  [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center bg-black",
+                    className
+                )}
+            >
+                <svg
+                    className=" z-0 h-full w-full pointer-events-none absolute "
+                    width="100%"
+                    height="100%"
+                    viewBox="0 0 696 316"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419"
+                        stroke="url(#paint0_radial_242_278)"
+                        strokeOpacity="0.05"
+                        strokeWidth="0.5"
+                    ></path>
+
+                    {paths.map((path, index) => (
+                        <motion.path
+                            key={`path-` + index}
+                            d={path}
+                            stroke={`url(#linearGradient-${index})`}
+                            strokeOpacity="0.4"
+                            strokeWidth="0.5"
+                        ></motion.path>
+                    ))}
+                    <defs>
+                        {paths.map((path, index) => (
+                            <motion.linearGradient
+                                id={`linearGradient-${index}`}
+                                key={`gradient-${index}`}
+                                initial={{
+                                    x1: "0%",
+                                    x2: "0%",
+                                    y1: "0%",
+                                    y2: "0%",
+                                }}
+                                animate={{
+                                    x1: ["0%", "100%"],
+                                    x2: ["0%", "95%"],
+                                    y1: ["0%", "100%"],
+                                    y2: ["0%", `${93 + Math.random() * 8}%`],
+                                }}
+                                transition={{
+                                    duration: Math.random() * 10 + 10,
+                                    ease: "easeInOut",
+                                    repeat: Infinity,
+                                    delay: Math.random() * 10,
+                                }}
+                            >
+                                <stop
+                                    stopColor="#18CCFC"
+                                    stopOpacity="0"
+                                ></stop>
+                                <stop stopColor="#18CCFC"></stop>
+                                <stop offset="32.5%" stopColor="#1176fa"></stop>
+                                <stop
+                                    offset="100%"
+                                    stopColor="#48e7ff"
+                                    stopOpacity="0"
+                                ></stop>
+                            </motion.linearGradient>
+                        ))}
+
+                        <radialGradient
+                            id="paint0_radial_242_278"
+                            cx="0"
+                            cy="0"
+                            r="1"
+                            gradientUnits="userSpaceOnUse"
+                            gradientTransform="translate(352 34) rotate(90) scale(555 1560.62)"
+                        >
+                            <stop
+                                offset="0.0666667"
+                                stopColor="var(--zinc-300)"
+                            ></stop>
+                            <stop
+                                offset="0.243243"
+                                stopColor="var(--zinc-300)"
+                            ></stop>
+                            <stop
+                                offset="0.43594"
+                                stopColor="white"
+                                stopOpacity="0"
+                            ></stop>
+                        </radialGradient>
+                    </defs>
+                </svg>
+                {/* Radial gradient for the container to give a faded look */}
+                <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_10%,black)]"></div>
+            </div>
+        );
+    }
+);
+
+BackgroundBeams.displayName = "BackgroundBeams";
diff --git a/docs/src/components/background-gradient-animation.tsx b/docs/src/components/background-gradient-animation.tsx
new file mode 100644
index 0000000..e0aa6bb
--- /dev/null
+++ b/docs/src/components/background-gradient-animation.tsx
@@ -0,0 +1,182 @@
+"use client";
+import { cn } from "@/utils/cn";
+import { useEffect, useRef, useState } from "react";
+
+export const BackgroundGradientAnimation = ({
+    gradientBackgroundStart = "rgb(0, 0, 0)",
+    gradientBackgroundEnd = "rgb(1, 1, 1)",
+    firstColor = "76, 0, 255",
+    secondColor = "32, 94, 110",
+    thirdColor = "73, 87, 179",
+    fourthColor = "0, 87, 128",
+    fifthColor = "255, 255, 255",
+    pointerColor = "32, 44, 110",
+    size = "80%",
+    blendingValue = "hard-light",
+    children,
+    className,
+    interactive = true,
+    containerClassName,
+}: {
+    gradientBackgroundStart?: string;
+    gradientBackgroundEnd?: string;
+    firstColor?: string;
+    secondColor?: string;
+    thirdColor?: string;
+    fourthColor?: string;
+    fifthColor?: string;
+    pointerColor?: string;
+    size?: string;
+    blendingValue?: string;
+    children?: React.ReactNode;
+    className?: string;
+    interactive?: boolean;
+    containerClassName?: string;
+}) => {
+    const interactiveRef = useRef<HTMLDivElement>(null);
+
+    const [curX, setCurX] = useState(0);
+    const [curY, setCurY] = useState(0);
+    const [tgX, setTgX] = useState(0);
+    const [tgY, setTgY] = useState(0);
+    useEffect(() => {
+        document.body.style.setProperty(
+            "--gradient-background-start",
+            gradientBackgroundStart
+        );
+        document.body.style.setProperty(
+            "--gradient-background-end",
+            gradientBackgroundEnd
+        );
+        document.body.style.setProperty("--first-color", firstColor);
+        document.body.style.setProperty("--second-color", secondColor);
+        document.body.style.setProperty("--third-color", thirdColor);
+        document.body.style.setProperty("--fourth-color", fourthColor);
+        document.body.style.setProperty("--fifth-color", fifthColor);
+        document.body.style.setProperty("--pointer-color", pointerColor);
+        document.body.style.setProperty("--size", size);
+        document.body.style.setProperty("--blending-value", blendingValue);
+    }, []);
+
+    useEffect(() => {
+        function move() {
+            if (!interactiveRef.current) {
+                return;
+            }
+            setCurX(curX + (tgX - curX) / 20);
+            setCurY(curY + (tgY - curY) / 20);
+            interactiveRef.current.style.transform = `translate(${Math.round(
+                curX
+            )}px, ${Math.round(curY)}px)`;
+        }
+
+        move();
+    }, [tgX, tgY]);
+
+    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (interactiveRef.current) {
+            const rect = interactiveRef.current.getBoundingClientRect();
+            setTgX(event.clientX - rect.left);
+            setTgY(event.clientY - rect.top);
+        }
+    };
+
+    const [isSafari, setIsSafari] = useState(false);
+    useEffect(() => {
+        setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    }, []);
+
+    return (
+        <div
+            className={cn(
+                "h-screen relative overflow-hidden top-0 left-0 bg-[linear-gradient(40deg,var(--gradient-background-start),var(--gradient-background-end))]",
+                containerClassName
+            )}
+        >
+            <svg className="hidden">
+                <defs>
+                    <filter id="blurMe">
+                        <feGaussianBlur
+                            in="SourceGraphic"
+                            stdDeviation="10"
+                            result="blur"
+                        />
+                        <feColorMatrix
+                            in="blur"
+                            mode="matrix"
+                            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
+                            result="goo"
+                        />
+                        <feBlend in="SourceGraphic" in2="goo" />
+                    </filter>
+                </defs>
+            </svg>
+            <div className={cn("", className)}>{children}</div>
+            <div
+                className={cn(
+                    "gradients-container h-full w-full blur-lg",
+                    isSafari ? "blur-2xl" : "[filter:url(#blurMe)_blur(40px)]"
+                )}
+            >
+                <div
+                    className={cn(
+                        `absolute [background:radial-gradient(circle_at_center,_var(--first-color)_0,_var(--first-color)_50%)_no-repeat]`,
+                        `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
+                        `[transform-origin:center_center]`,
+                        `animate-first`,
+                        `opacity-100`
+                    )}
+                ></div>
+                <div
+                    className={cn(
+                        `absolute [background:radial-gradient(circle_at_center,_rgba(var(--second-color),_0.8)_0,_rgba(var(--second-color),_0)_50%)_no-repeat]`,
+                        `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
+                        `[transform-origin:calc(50%-400px)]`,
+                        `animate-second`,
+                        `opacity-100`
+                    )}
+                ></div>
+                <div
+                    className={cn(
+                        `absolute [background:radial-gradient(circle_at_center,_rgba(var(--third-color),_0.8)_0,_rgba(var(--third-color),_0)_50%)_no-repeat]`,
+                        `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
+                        `[transform-origin:calc(50%+400px)]`,
+                        `animate-third`,
+                        `opacity-100`
+                    )}
+                ></div>
+                <div
+                    className={cn(
+                        `absolute [background:radial-gradient(circle_at_center,_rgba(var(--fourth-color),_0.8)_0,_rgba(var(--fourth-color),_0)_50%)_no-repeat]`,
+                        `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
+                        `[transform-origin:calc(50%-200px)]`,
+                        `animate-fourth`,
+                        `opacity-100`
+                    )}
+                ></div>
+                <div
+                    className={cn(
+                        `absolute [background:radial-gradient(circle_at_center,_rgba(var(--fifth-color),_0.8)_0,_rgba(var(--fifth-color),_0)_50%)_no-repeat]`,
+                        `[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
+                        `[transform-origin:calc(50%-800px)_calc(50%+800px)]`,
+                        `animate-fifth`,
+                        `opacity-100`
+                    )}
+                ></div>
+                {interactive && (
+                    <div
+                        ref={interactiveRef}
+                        onMouseMove={handleMouseMove}
+                        className={cn(
+                            `absolute [background:radial-gradient(circle_at_center,_rgba(var(--pointer-color),_0.8)_0,_rgba(var(--pointer-color),_0)_50%)_no-repeat]`,
+                            `[mix-blend-mode:var(--blending-value)] w-full h-full -top-1/2 -left-1/2`,
+                            `opacity-70`
+                        )}
+                    ></div>
+                )}
+            </div>
+            {/* Radial gradient for the container to give a faded look */}
+            <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_50%,black)]"></div>
+        </div>
+    );
+};
diff --git a/docs/src/components/background-gradient.tsx b/docs/src/components/background-gradient.tsx
new file mode 100644
index 0000000..f4e525d
--- /dev/null
+++ b/docs/src/components/background-gradient.tsx
@@ -0,0 +1,72 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+import { motion } from "framer-motion";
+
+export const BackgroundGradient = ({
+    children,
+    className,
+    containerClassName,
+    animate = true,
+}: {
+    children?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    animate?: boolean;
+}) => {
+    const variants = {
+        initial: {
+            backgroundPosition: "0 50%",
+        },
+        animate: {
+            backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
+        },
+    };
+    return (
+        <div className={cn("relative p-[4px] group", containerClassName)}>
+            <motion.div
+                variants={animate ? variants : undefined}
+                initial={animate ? "initial" : undefined}
+                animate={animate ? "animate" : undefined}
+                transition={
+                    animate
+                        ? {
+                              duration: 5,
+                              repeat: Infinity,
+                              repeatType: "reverse",
+                          }
+                        : undefined
+                }
+                style={{
+                    backgroundSize: animate ? "400% 400%" : undefined,
+                }}
+                className={cn(
+                    "absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl  transition duration-500 will-change-transform",
+                    " bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
+                )}
+            />
+            <motion.div
+                variants={animate ? variants : undefined}
+                initial={animate ? "initial" : undefined}
+                animate={animate ? "animate" : undefined}
+                transition={
+                    animate
+                        ? {
+                              duration: 5,
+                              repeat: Infinity,
+                              repeatType: "reverse",
+                          }
+                        : undefined
+                }
+                style={{
+                    backgroundSize: animate ? "400% 400%" : undefined,
+                }}
+                className={cn(
+                    "absolute inset-0 rounded-3xl z-[1] will-change-transform",
+                    "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]"
+                )}
+            />
+
+            <div className={cn("relative z-10", className)}>{children}</div>
+        </div>
+    );
+};
diff --git a/docs/src/components/codeblock.tsx b/docs/src/components/codeblock.tsx
new file mode 100644
index 0000000..295f0a6
--- /dev/null
+++ b/docs/src/components/codeblock.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { FaPython } from "react-icons/fa";
+import { TbToml } from "react-icons/tb";
+import { FaHtml5 } from "react-icons/fa";
+import { SiGnubash } from "react-icons/si";
+import { VscJson } from "react-icons/vsc";
+
+interface CodeblockProps {
+    children: React.ReactNode;
+    fileName: string;
+}
+
+const ICONS: Record<string, React.ReactNode> = {
+    py: <FaPython className="size-5 text-zinc-300" />,
+    html: <FaHtml5 className="size-5 text-zinc-300" />,
+    toml: <TbToml className="size-5 text-zinc-300" />,
+    bash: <SiGnubash className="size-5 text-zinc-300" />,
+    json: <VscJson className="size-5 text-zinc-300" />,
+};
+
+export default function Codeblock(props: CodeblockProps) {
+    const ext: string = props.fileName.split(".")[1];
+    const [copied, setCopied] = React.useState(false);
+    const elementRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <div
+            className="rounded-md bg-black border border-zinc-900"
+            ref={elementRef}
+        >
+            <div className="border-b border-zinc-900 p-3 flex items-center justify-between bg-zinc-950">
+                <div className="flex items-center space-x-1 text-base">
+                    {ICONS[ext] || ICONS[props.fileName]}
+                    <code className="text-zinc-300 text-sm">
+                        {props.fileName}
+                    </code>
+                </div>
+                <button
+                    className="rounded-lg p-1 hover:bg-zinc-900 transition-all"
+                    onClick={async () => {
+                        const code =
+                            elementRef.current!.querySelector(
+                                "code"
+                            )!.innerText;
+                        await navigator.clipboard.writeText(code);
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 3000);
+                    }}
+                >
+                    {copied ? (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-6 text-emerald-400 transition-all"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+                            />
+                        </svg>
+                    ) : (
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                            stroke="currentColor"
+                            className="size-6 text-zinc-300 transition-all"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
+                            />
+                        </svg>
+                    )}
+                </button>
+            </div>
+            {props.children}
+        </div>
+    );
+}
diff --git a/docs/src/components/doc-nav.tsx b/docs/src/components/doc-nav.tsx
new file mode 100644
index 0000000..d43be46
--- /dev/null
+++ b/docs/src/components/doc-nav.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link";
+
+export type DocNavPage = {
+    name: string;
+    url: string;
+};
+
+interface DocNavProps {
+    next: DocNavPage | null;
+    last: DocNavPage | null;
+}
+
+export default function DocNav(props: DocNavProps) {
+    return (
+        <div className="flex items-center space-x-3 justify-between">
+            {props.last ? (
+                <Link
+                    href={props.last.url}
+                    className="flex space-x-1 items-center justify-center hover:scale-105 px-8 py-2 rounded-lg font-semibold bg-gradient-to-b from-sky-500 to-blue-600 !text-white focus:ring-2 hover:shadow-xl transition duration-200 focus:outline-none"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"
+                        />
+                    </svg>
+
+                    <p>{props.last.name}</p>
+                </Link>
+            ) : (
+                <div></div>
+            )}
+            {props.next && (
+                <Link
+                    href={props.next.url}
+                    className="flex space-x-1 items-center justify-center hover:scale-105 px-8 py-2 rounded-lg font-semibold bg-gradient-to-b from-sky-500 to-blue-600 !text-white focus:ring-2 hover:shadow-xl transition duration-200 focus:outline-none"
+                >
+                    <p>{props.next.name}</p>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
+                        />
+                    </svg>
+                </Link>
+            )}
+        </div>
+    );
+}
diff --git a/docs/src/components/docs.module.css b/docs/src/components/docs.module.css
new file mode 100644
index 0000000..1adc458
--- /dev/null
+++ b/docs/src/components/docs.module.css
@@ -0,0 +1,43 @@
+.docs {
+    @apply flex flex-col space-y-2 text-lg;
+}
+
+.docs p {
+    @apply py-1;
+}
+
+.docs h1 {
+    @apply text-5xl font-bold py-2;
+}
+
+.docs h2 {
+    @apply text-3xl py-2 font-semibold;
+}
+
+.docs h3 {
+    @apply text-xl py-2 font-semibold;
+}
+
+.docs code {
+    @apply bg-transparent text-base;
+}
+
+.docs p code {
+    @apply rounded-md bg-zinc-950 border border-zinc-900 p-1 text-zinc-300;
+}
+
+.docs li code {
+    @apply rounded-md bg-zinc-950 border border-zinc-900 p-1 text-zinc-300;
+}
+
+.docs li {
+    @apply py-0.5;
+}
+
+.docs ul {
+    @apply text-white pl-6 list-disc;
+}
+
+.docs a {
+    @apply text-sky-600 hover:text-sky-400 font-medium;
+}
diff --git a/docs/src/components/footer-content.tsx b/docs/src/components/footer-content.tsx
new file mode 100644
index 0000000..95639ab
--- /dev/null
+++ b/docs/src/components/footer-content.tsx
@@ -0,0 +1,48 @@
+import Image from "next/image";
+import { FaRegCopyright, FaDiscord, FaGithub } from "react-icons/fa";
+import { SiGithubsponsors } from "react-icons/si";
+
+export default function FooterContent() {
+    return (
+        <div className="flex-col sm:flex-row flex lg:py-0 py-2 px-6 lg:px-48 justify-between w-full items-center">
+            <Image
+                src="/logo-white.svg"
+                width={500}
+                height={500}
+                alt="view.py"
+                className="size-32 sm:size-48"
+            />
+            <div className="flex flex-col items-center justify-center space-y-6">
+                <div className="flex items-center space-x-6">
+                    <a
+                        href="https://github.com/ZeroIntensity/view.py"
+                        target="_blank"
+                        className="text-white hover:opacity-50"
+                    >
+                        <FaGithub className="size-8 md:size-10" />
+                    </a>
+                    <a
+                        href="https://discord.gg/tZAfuWAbm2"
+                        target="_blank"
+                        className="text-white hover:opacity-50"
+                    >
+                        <FaDiscord className="size-9 md:size-11" />
+                    </a>
+                    <a
+                        href="https://github.com/sponsors/ZeroIntensity/"
+                        target="_blank"
+                        className="text-white hover:opacity-50"
+                    >
+                        <SiGithubsponsors className="size-8 md:size-10" />
+                    </a>
+                </div>
+                <div className="flex items-center space-x-1 text-zinc-800">
+                    <FaRegCopyright />
+                    <p className="font-light select-none md:text-base test-sm">
+                        ZeroIntensity 2024
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/docs/src/components/mdx-layout.tsx b/docs/src/components/mdx-layout.tsx
new file mode 100644
index 0000000..af61320
--- /dev/null
+++ b/docs/src/components/mdx-layout.tsx
@@ -0,0 +1,334 @@
+import { usePathname } from "next/navigation";
+import styles from "./docs.module.css";
+import DocNav, { DocNavPage } from "./doc-nav";
+import { useRef, useEffect, useState } from "react";
+import Link from "next/link";
+import FooterContent from "./footer-content";
+
+type Section = Record<string, string>;
+type Nav = Record<string, Section>;
+const NAV: Nav = {
+    "Getting Started": {
+        Introduction: "/docs",
+        Installation: "/docs/getting-started/installation",
+        "Creating a project": "/docs/getting-started/creating-a-project",
+        Configuration: "/docs/getting-started/configuration",
+    },
+    "Building Projects": {
+        "App Basics": "/docs/building-projects/app-basics",
+        "URL Routing": "/docs/building-projects/routing",
+        "Returning Responses": "/docs/building-projects/responses",
+        "Taking Parameters": "/docs/building-projects/parameters",
+        "Getting Request Data": "/docs/building-projects/request-data",
+        "HTML Templating": "/docs/building-projects/templating",
+        "Runtime Builds": "/docs/building-projects/builds",
+        "Writing Documentation": "/docs/building-projects/documenting",
+        "Using WebSockets": "/docs/building-projects/websockets",
+    },
+    "API Reference": {
+        Types: "/docs/reference/types",
+        Utilities: "/docs/reference/utils",
+        Exceptions: "/docs/reference/exceptions",
+        Apps: "/docs/reference/apps",
+        Configuration: "/docs/reference/config",
+        Routing: "/docs/reference/routing",
+        Templates: "/docs/reference/templates",
+        Build: "/docs/reference/build",
+        WebSockets: "/docs/reference/websockets",
+    },
+};
+
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+    const path = usePathname();
+    let [next, setNext] = useState<DocNavPage | null>(null);
+    let [last, setLast] = useState<DocNavPage | null>(null);
+    const mdRef = useRef<HTMLDivElement>(null);
+
+    let [query, setQuery] = useState<NodeListOf<HTMLElement> | null>(null);
+    useEffect(() => {
+        Object.entries(NAV).forEach((firstEntry, firstIndex) => {
+            const entries = Object.entries(firstEntry[1]);
+            entries.forEach((entry, index) => {
+                let [pageName, url] = entry;
+                if (url == path) {
+                    // This is the page!
+                    if (entries[index + 1] != undefined) {
+                        let [pageName, url] = entries[index + 1];
+                        setNext({
+                            name: pageName,
+                            url,
+                        });
+                    }
+
+                    if (entries[index - 1] != undefined) {
+                        let [pageName, url] = entries[index - 1];
+                        setLast({
+                            name: pageName,
+                            url,
+                        });
+                    }
+                }
+            });
+        });
+        setQuery(mdRef.current!.querySelectorAll("h2"));
+    }, [mdRef]);
+
+    return (
+        <>
+            <div
+                className="w-full dark:bg-black bg-white dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex items-center"
+                ref={mdRef}
+            >
+                <div className="flex w-full justify-between py-16 px-4 md:px-0">
+                    <nav className="lg:w-1/4 hidden lg:flex pl-12 z-10 flex-col space-y-8 sticky top-0 self-start pt-12">
+                        {Object.entries(NAV).map(([title, section]) => (
+                            <div
+                                className="flex flex-col space-y-1"
+                                key={title}
+                            >
+                                <p className="uppercase font-bold text-white select-none">
+                                    {title}
+                                </p>
+                                {Object.entries(section).map(
+                                    ([pageName, url]) => (
+                                        <Link
+                                            key={url}
+                                            href={url}
+                                            className={
+                                                url == path
+                                                    ? "text-sky-500"
+                                                    : ""
+                                            }
+                                        >
+                                            {pageName}
+                                        </Link>
+                                    )
+                                )}
+                            </div>
+                        ))}
+                    </nav>
+                    <div className="lg:px-0 px-4 w-full lg:w-1/2 flex flex-col space-y-3 break-words min-w-fit md:min-w-0">
+                        <hr className="border-t border-zinc-800" />
+                        <section className={styles.docs}>{children}</section>
+                        <div className="py-2">
+                            <hr className="border-t border-zinc-800" />
+                        </div>
+                        <DocNav next={next} last={last} />
+                    </div>
+                    <div className="lg:w-1/4 hidden lg:block px-4 self-start top-0 sticky pt-12">
+                        <div className="flex flex-col space-y-1 items-start">
+                            <p className="uppercase font-bold text-white select-none">
+                                On this page
+                            </p>
+                            {query &&
+                                Array.from(query).map((element, index) => {
+                                    return (
+                                        <a
+                                            key={index}
+                                            onClick={() =>
+                                                element.scrollIntoView()
+                                            }
+                                            className="cursor-pointer"
+                                        >
+                                            {element.innerText}
+                                        </a>
+                                    );
+                                })}
+                        </div>
+                        <div className="py-6 w-1/2">
+                            <hr className="border-t border-zinc-800" />
+                        </div>
+                        <div>
+                            <div className="grid grid-cols-1 auto-rows-fr gap-1 w-fit">
+                                <a
+                                    href={`https://github.com/ZeroIntensity/view.py/edit/master/docs/src/pages${
+                                        path == "/docs" ? "/docs/index" : path
+                                    }.mdx`}
+                                    target="_blank"
+                                    className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-lg p-px text-xs font-semibold leading-6  text-white inline-block"
+                                >
+                                    <span className="absolute inset-0 overflow-hidden rounded-lg">
+                                        <span className="absolute inset-0 rounded-lg bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+                                    </span>
+                                    <div className="relative flex justify-between space-x-2 items-center z-10 rounded-lg bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
+                                        <div className="flex space-x-1 items-center">
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                strokeWidth={1.5}
+                                                stroke="currentColor"
+                                                className="size-5"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                                                />
+                                            </svg>
+
+                                            <span>Edit this page</span>
+                                        </div>
+                                        <svg
+                                            fill="none"
+                                            height="16"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="M10.75 8.75L14.25 12L10.75 15.25"
+                                                stroke="currentColor"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth="1.5"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-150 group-hover:opacity-40" />
+                                </a>
+                                <a
+                                    href="https://discord.gg/tZAfuWAbm2"
+                                    target="_blank"
+                                    className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-lg p-px text-xs font-semibold leading-6  text-white inline-block"
+                                >
+                                    <span className="absolute inset-0 overflow-hidden rounded-lg">
+                                        <span className="absolute inset-0 rounded-lg bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+                                    </span>
+                                    <div className="relative flex justify-between space-x-2 items-center z-10 rounded-lg bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
+                                        <div className="flex space-x-1 items-center">
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                strokeWidth={1.5}
+                                                stroke="currentColor"
+                                                className="size-5"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+                                                />
+                                            </svg>
+
+                                            <span>Chat on Discord</span>
+                                        </div>
+                                        <svg
+                                            fill="none"
+                                            height="16"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="M10.75 8.75L14.25 12L10.75 15.25"
+                                                stroke="currentColor"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth="1.5"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-150 group-hover:opacity-40" />
+                                </a>
+                                <a
+                                    href="https://github.com/ZeroIntensity/view.py"
+                                    target="_blank"
+                                    className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-lg p-px text-xs font-semibold leading-6  text-white inline-block"
+                                >
+                                    <span className="absolute inset-0 overflow-hidden rounded-lg">
+                                        <span className="absolute inset-0 rounded-lg bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+                                    </span>
+                                    <div className="relative flex justify-between space-x-2 items-center z-10 rounded-lg bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
+                                        <div className="flex space-x-1 items-center">
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                strokeWidth={1.5}
+                                                stroke="currentColor"
+                                                className="size-5"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+                                                />
+                                            </svg>
+
+                                            <span>Star the project</span>
+                                        </div>
+                                        <svg
+                                            fill="none"
+                                            height="16"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="M10.75 8.75L14.25 12L10.75 15.25"
+                                                stroke="currentColor"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth="1.5"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-150 group-hover:opacity-40" />
+                                </a>
+                                <a
+                                    href="https://github.com/sponsors/ZeroIntensity"
+                                    target="_blank"
+                                    className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-lg p-px text-xs font-semibold leading-6  text-white inline-block"
+                                >
+                                    <span className="absolute inset-0 overflow-hidden rounded-lg">
+                                        <span className="absolute inset-0 rounded-lg bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+                                    </span>
+                                    <div className="relative flex justify-between space-x-2 items-center z-10 rounded-lg bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 ">
+                                        <div className="flex space-x-1 items-center">
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                strokeWidth={1.5}
+                                                stroke="currentColor"
+                                                className="size-5"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+                                                />
+                                            </svg>
+                                            <span>Become a sponsor</span>
+                                        </div>
+                                        <svg
+                                            fill="none"
+                                            height="16"
+                                            viewBox="0 0 24 24"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="M10.75 8.75L14.25 12L10.75 15.25"
+                                                stroke="currentColor"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth="1.5"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-150 group-hover:opacity-40" />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer className="border-t border-zinc-900">
+                <FooterContent />
+            </footer>
+        </>
+    );
+}
diff --git a/docs/src/components/meteors.tsx b/docs/src/components/meteors.tsx
new file mode 100644
index 0000000..341539d
--- /dev/null
+++ b/docs/src/components/meteors.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+export const Meteors = ({
+    number,
+    className,
+}: {
+    number?: number;
+    className?: string;
+}) => {
+    const meteors = new Array(number || 20).fill(true);
+    return (
+        <>
+            {meteors.map((el, idx) => (
+                <span
+                    key={"meteor" + idx}
+                    className={cn(
+                        "animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]",
+                        "before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent",
+                        className
+                    )}
+                    style={{
+                        top: 0,
+                        left:
+                            Math.floor(Math.random() * (400 - -400) + -400) +
+                            "px",
+                        animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + "s",
+                        animationDuration:
+                            Math.floor(Math.random() * (10 - 2) + 2) + "s",
+                    }}
+                ></span>
+            ))}
+        </>
+    );
+};
diff --git a/docs/src/components/placeholders-and-vanish-input.tsx b/docs/src/components/placeholders-and-vanish-input.tsx
new file mode 100644
index 0000000..b129fa9
--- /dev/null
+++ b/docs/src/components/placeholders-and-vanish-input.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/utils/cn";
+
+export function PlaceholdersAndVanishInput({
+    placeholders,
+    onChange,
+    onSubmit,
+}: {
+    placeholders: string[];
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}) {
+    const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
+
+    const intervalRef = useRef<NodeJS.Timeout | null>(null);
+    const startAnimation = () => {
+        intervalRef.current = setInterval(() => {
+            setCurrentPlaceholder(prev => (prev + 1) % placeholders.length);
+        }, 3000);
+    };
+    const handleVisibilityChange = () => {
+        if (document.visibilityState !== "visible" && intervalRef.current) {
+            clearInterval(intervalRef.current); // Clear the interval when the tab is not visible
+            intervalRef.current = null;
+        } else if (document.visibilityState === "visible") {
+            startAnimation(); // Restart the interval when the tab becomes visible
+        }
+    };
+
+    useEffect(() => {
+        startAnimation();
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+            document.removeEventListener(
+                "visibilitychange",
+                handleVisibilityChange
+            );
+        };
+    }, [placeholders]);
+
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const newDataRef = useRef<any[]>([]);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [value, setValue] = useState("");
+    const [animating, setAnimating] = useState(false);
+
+    const draw = useCallback(() => {
+        if (!inputRef.current) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        canvas.width = 800;
+        canvas.height = 800;
+        ctx.clearRect(0, 0, 800, 800);
+        const computedStyles = getComputedStyle(inputRef.current);
+
+        const fontSize = parseFloat(
+            computedStyles.getPropertyValue("font-size")
+        );
+        ctx.font = `${fontSize * 2}px ${computedStyles.fontFamily}`;
+        ctx.fillStyle = "#FFF";
+        ctx.fillText(value, 16, 40);
+
+        const imageData = ctx.getImageData(0, 0, 800, 800);
+        const pixelData = imageData.data;
+        const newData: any[] = [];
+
+        for (let t = 0; t < 800; t++) {
+            let i = 4 * t * 800;
+            for (let n = 0; n < 800; n++) {
+                let e = i + 4 * n;
+                if (
+                    pixelData[e] !== 0 &&
+                    pixelData[e + 1] !== 0 &&
+                    pixelData[e + 2] !== 0
+                ) {
+                    newData.push({
+                        x: n,
+                        y: t,
+                        color: [
+                            pixelData[e],
+                            pixelData[e + 1],
+                            pixelData[e + 2],
+                            pixelData[e + 3],
+                        ],
+                    });
+                }
+            }
+        }
+
+        newDataRef.current = newData.map(({ x, y, color }) => ({
+            x,
+            y,
+            r: 1,
+            color: `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`,
+        }));
+    }, [value]);
+
+    useEffect(() => {
+        draw();
+    }, [value, draw]);
+
+    const animate = (start: number) => {
+        const animateFrame = (pos: number = 0) => {
+            requestAnimationFrame(() => {
+                const newArr = [];
+                for (let i = 0; i < newDataRef.current.length; i++) {
+                    const current = newDataRef.current[i];
+                    if (current.x < pos) {
+                        newArr.push(current);
+                    } else {
+                        if (current.r <= 0) {
+                            current.r = 0;
+                            continue;
+                        }
+                        current.x += Math.random() > 0.5 ? 1 : -1;
+                        current.y += Math.random() > 0.5 ? 1 : -1;
+                        current.r -= 0.05 * Math.random();
+                        newArr.push(current);
+                    }
+                }
+                newDataRef.current = newArr;
+                const ctx = canvasRef.current?.getContext("2d");
+                if (ctx) {
+                    ctx.clearRect(pos, 0, 800, 800);
+                    newDataRef.current.forEach(t => {
+                        const { x: n, y: i, r: s, color: color } = t;
+                        if (n > pos) {
+                            ctx.beginPath();
+                            ctx.rect(n, i, s, s);
+                            ctx.fillStyle = color;
+                            ctx.strokeStyle = color;
+                            ctx.stroke();
+                        }
+                    });
+                }
+                if (newDataRef.current.length > 0) {
+                    animateFrame(pos - 8);
+                } else {
+                    setValue("");
+                    setAnimating(false);
+                }
+            });
+        };
+        animateFrame(start);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter" && !animating) {
+            vanishAndSubmit();
+        }
+    };
+
+    const vanishAndSubmit = () => {
+        setAnimating(true);
+        draw();
+
+        const value = inputRef.current?.value || "";
+        if (value && inputRef.current) {
+            const maxX = newDataRef.current.reduce(
+                (prev, current) => (current.x > prev ? current.x : prev),
+                0
+            );
+            animate(maxX);
+        }
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        vanishAndSubmit();
+        onSubmit && onSubmit(e);
+    };
+    return (
+        <form
+            className={cn(
+                "w-full relative max-w-xl mx-auto h-12 rounded-full overflow-hidden transition duration-200 bg-zinc-950"
+            )}
+            onSubmit={handleSubmit}
+        >
+            <canvas
+                className={cn(
+                    "absolute pointer-events-none  text-base transform scale-50 top-[20%] left-2 sm:left-8 origin-top-left filter invert dark:invert-0 pr-20",
+                    !animating ? "opacity-0" : "opacity-100"
+                )}
+                ref={canvasRef}
+            />
+            <input
+                onChange={e => {
+                    if (!animating) {
+                        setValue(e.target.value);
+                        onChange && onChange(e);
+                    }
+                }}
+                onKeyDown={handleKeyDown}
+                ref={inputRef}
+                value={value}
+                type="text"
+                className={cn(
+                    "w-full relative text-sm sm:text-base z-50 border-none dark:text-white bg-transparent text-black h-full rounded-full focus:outline-none focus:ring-0 pl-4 sm:pl-10 pr-20",
+                    animating && "text-transparent dark:text-transparent"
+                )}
+            />
+
+            <button
+                disabled={!value}
+                type="submit"
+                className="absolute right-2 top-1/2 z-50 -translate-y-1/2 h-8 w-8 rounded-full disabled:bg-zinc-100 bg-black dark:bg-black dark:disabled:bg-black transition duration-200 flex items-center justify-center"
+            >
+                <motion.svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="text-zinc-300 h-4 w-4"
+                >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <motion.path
+                        d="M5 12l14 0"
+                        initial={{
+                            strokeDasharray: "50%",
+                            strokeDashoffset: "50%",
+                        }}
+                        animate={{
+                            strokeDashoffset: value ? 0 : "50%",
+                        }}
+                        transition={{
+                            duration: 0.3,
+                            ease: "linear",
+                        }}
+                    />
+                    <path d="M13 18l6 -6" />
+                    <path d="M13 6l6 6" />
+                </motion.svg>
+            </button>
+
+            <div className="absolute inset-0 flex items-center rounded-full pointer-events-none">
+                <AnimatePresence mode="wait">
+                    {!value && (
+                        <motion.p
+                            initial={{
+                                y: 5,
+                                opacity: 0,
+                            }}
+                            key={`current-placeholder-${currentPlaceholder}`}
+                            animate={{
+                                y: 0,
+                                opacity: 1,
+                            }}
+                            exit={{
+                                y: -15,
+                                opacity: 0,
+                            }}
+                            transition={{
+                                duration: 0.3,
+                                ease: "linear",
+                            }}
+                            className="dark:text-zinc-800 text-sm sm:text-base font-normal text-zinc-700 pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
+                        >
+                            {placeholders[currentPlaceholder]}
+                        </motion.p>
+                    )}
+                </AnimatePresence>
+            </div>
+        </form>
+    );
+}
diff --git a/docs/src/components/search-bar.tsx b/docs/src/components/search-bar.tsx
new file mode 100644
index 0000000..2c94366
--- /dev/null
+++ b/docs/src/components/search-bar.tsx
@@ -0,0 +1,243 @@
+import { useEffect, useState } from "react";
+import {
+    Modal,
+    ModalBody,
+    ModalContent,
+    ModalFooter,
+    ModalTrigger,
+} from "./animated-modal";
+import { PlaceholdersAndVanishInput } from "./placeholders-and-vanish-input";
+import Link from "next/link";
+
+/* Pagefind post-build types are not on NPM */
+
+type PagefindSearchResult = {
+    id: string;
+    score: number;
+    words: number[];
+    data: () => Promise<PagefindSearchFragment>;
+};
+
+type PagefindSearchFragment = {
+    url: string;
+    raw_url?: string;
+    content: string;
+    raw_content?: string;
+    excerpt: string;
+    sub_results: PagefindSubResult[];
+    word_count: number;
+    locations: number[];
+    weighted_locations: PagefindWordLocation[];
+    filters: Record<string, string[]>;
+    meta: Record<string, string>;
+    anchors: PagefindSearchAnchor[];
+};
+
+type PagefindSubResult = {
+    title: string;
+    url: string;
+    locations: number[];
+    weighted_locations: PagefindWordLocation[];
+    excerpt: string;
+    anchor?: PagefindSearchAnchor;
+};
+
+type PagefindWordLocation = {
+    weight: number;
+    balanced_score: number;
+    location: number;
+};
+
+type PagefindSearchAnchor = {
+    element: string;
+    id: string;
+    text?: string;
+    location: number;
+};
+
+interface WindowWithPagefind {
+    pagefind: {
+        search: (query: string) => Promise<{ results: PagefindSearchResult[] }>;
+    };
+}
+
+declare var window: Window & WindowWithPagefind;
+
+function Result({ result }: { result: PagefindSearchResult }) {
+    const [data, setData] = useState<PagefindSearchFragment | null>(null);
+
+    useEffect(() => {
+        async function fetchData() {
+            const data = await result.data();
+            setData(data);
+        }
+        fetchData();
+    }, [result]);
+
+    if (!data) return null;
+
+    return (
+        <Link
+            href={data.url}
+            className="p-2 border border-zinc-900 rounded-lg font-semibold text-lg"
+        >
+            <div>
+                <h3>{data.meta.title}</h3>
+            </div>
+        </Link>
+    );
+}
+
+export function SearchBar() {
+    const placeholders = [
+        "Click to search...",
+        "What is the airspeed velocity of an unladen swallow?",
+        "Search the documentation...",
+        "My hovercraft is full of eels...",
+    ];
+
+    useEffect(() => {
+        async function loadPagefind() {
+            if (typeof window.pagefind === "undefined") {
+                try {
+                    window.pagefind = await import(
+                        // @ts-expect-error pagefind.js generated after build
+                        /* webpackIgnore: true */ "./pagefind/pagefind.js"
+                    );
+                } catch (e) {
+                    window.pagefind = {
+                        search: async q => ({ results: [] }),
+                    };
+                }
+            }
+        }
+        loadPagefind();
+    }, []);
+
+    const [results, setResults] = useState<PagefindSearchResult[]>([]);
+
+    return (
+        <Modal>
+            <ModalTrigger className="w-1/6 bg-zinc-900 rounded-lg p-1 px-2 flex items-center justify-between hover:bg-zinc-800 text-zinc-600 hover:text-zinc-500 transition-all group/modal-btn group">
+                <p className="text-sm font-thin select-none text-zinc-600 group-hover:text-zinc-500 transition-all">
+                    Search documentation...
+                </p>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="currentColor"
+                    className="size-6 text-zinc-600 group-hover:text-zinc-500 transition-all"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                    />
+                </svg>
+            </ModalTrigger>
+            <ModalBody>
+                <ModalContent>
+                    <h4 className="text-lg md:text-2xl text-neutral-600 dark:text-neutral-100 font-bold text-center mb-8">
+                        Search the documentation!
+                    </h4>
+                    <div className="flex items-center flex-col space-y-3">
+                        {results.map(result => (
+                            <Result key={result.id} result={result} />
+                        ))}
+                        <Link
+                            href="/"
+                            className="p-2 border border-zinc-900 rounded-lg font-thin text-lg hover:bg-zinc-950 text-white"
+                        >
+                            <div className="flex space-x-1 items-center">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="size-7"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                                    />
+                                </svg>
+
+                                <h3 className="">Configuration</h3>
+                            </div>
+                        </Link>
+                        <Link
+                            href="/"
+                            className="p-2 border border-zinc-900 rounded-lg font-thin text-lg hover:bg-zinc-950 text-white"
+                        >
+                            <div className="flex space-x-1 items-center">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="size-7"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                                    />
+                                </svg>
+
+                                <h3 className="">Configuration</h3>
+                            </div>
+                        </Link>
+                        <Link
+                            href="/"
+                            className="p-2 border border-zinc-900 rounded-lg font-thin text-lg hover:bg-zinc-950 text-white"
+                        >
+                            <div className="flex space-x-1 items-center">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="size-7"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                                    />
+                                </svg>
+
+                                <h3 className="">Configuration</h3>
+                            </div>
+                        </Link>
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <PlaceholdersAndVanishInput
+                        placeholders={placeholders}
+                        onChange={async e => {
+                            const search = await window.pagefind.search(
+                                e.currentTarget.value
+                            );
+                            setResults(search.results);
+                        }}
+                        onSubmit={async e => {
+                            const search = await window.pagefind.search(
+                                (
+                                    e.currentTarget
+                                        .elements[0] as HTMLInputElement
+                                ).value
+                            );
+                            setResults(search.results);
+                        }}
+                    />
+                </ModalFooter>
+            </ModalBody>
+        </Modal>
+    );
+}
diff --git a/docs/src/components/stars-background.tsx b/docs/src/components/stars-background.tsx
new file mode 100644
index 0000000..400fa31
--- /dev/null
+++ b/docs/src/components/stars-background.tsx
@@ -0,0 +1,133 @@
+"use client";
+import { cn } from "@/utils/cn";
+import React, {
+    useState,
+    useEffect,
+    useRef,
+    RefObject,
+    useCallback,
+} from "react";
+
+interface StarProps {
+    x: number;
+    y: number;
+    radius: number;
+    opacity: number;
+    twinkleSpeed: number | null;
+}
+
+export const Star: React.FC<StarProps> = ({
+    x,
+    y,
+    radius,
+    opacity,
+    twinkleSpeed,
+}) => (
+    <circle cx={x} cy={y} r={radius} fill="white" opacity={opacity}>
+        {twinkleSpeed !== null && (
+            <animate
+                attributeName="opacity"
+                values={`${opacity};${opacity * 0.3};${opacity}`}
+                dur={`${twinkleSpeed}s`}
+                repeatCount="indefinite"
+            />
+        )}
+    </circle>
+);
+
+interface StarsBackgroundProps {
+    starDensity?: number;
+    allStarsTwinkle?: boolean;
+    twinkleProbability?: number;
+    minTwinkleSpeed?: number;
+    maxTwinkleSpeed?: number;
+    className?: string;
+}
+
+export const StarsBackground: React.FC<StarsBackgroundProps> = ({
+    starDensity = 0.00015,
+    allStarsTwinkle = true,
+    twinkleProbability = 0.7,
+    minTwinkleSpeed = 0.5,
+    maxTwinkleSpeed = 1,
+    className,
+}) => {
+    const [stars, setStars] = useState<StarProps[]>([]);
+    const containerRef: RefObject<HTMLDivElement> =
+        useRef<HTMLDivElement>(null);
+
+    const generateStars = useCallback(
+        (width: number, height: number): StarProps[] => {
+            const area = width * height;
+            const numStars = Math.floor(area * starDensity);
+            return Array.from({ length: numStars }, () => {
+                const shouldTwinkle =
+                    allStarsTwinkle || Math.random() < twinkleProbability;
+                return {
+                    x: Math.random() * width,
+                    y: Math.random() * height,
+                    radius: Math.random() * 0.05 + 0.5,
+                    opacity: Math.random() * 0.5 + 0.5,
+                    twinkleSpeed: shouldTwinkle
+                        ? minTwinkleSpeed +
+                          Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
+                        : null,
+                };
+            });
+        },
+        [
+            starDensity,
+            allStarsTwinkle,
+            twinkleProbability,
+            minTwinkleSpeed,
+            maxTwinkleSpeed,
+        ]
+    );
+
+    useEffect(() => {
+        const updateStars = () => {
+            if (containerRef.current) {
+                const { width, height } =
+                    containerRef.current.getBoundingClientRect();
+                setStars(generateStars(width, height));
+            }
+        };
+
+        updateStars();
+
+        const resizeObserver = new ResizeObserver(updateStars);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+        };
+    }, [
+        starDensity,
+        allStarsTwinkle,
+        twinkleProbability,
+        minTwinkleSpeed,
+        maxTwinkleSpeed,
+        generateStars,
+    ]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={cn("h-full w-full absolute inset-0", className)}
+        >
+            <svg
+                preserveAspectRatio="none"
+                className="h-full w-full bg-transparent"
+            >
+                <rect width="100%" height="100%" fill="none" />
+                {stars.map((star, index) => (
+                    <Star key={index} {...star} />
+                ))}
+            </svg>
+        </div>
+    );
+};
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
new file mode 100644
index 0000000..ea07312
--- /dev/null
+++ b/docs/src/pages/_app.tsx
@@ -0,0 +1,152 @@
+import { GeistSans } from "geist/font/sans";
+import "./globals.css";
+import "highlight.js/styles/github-dark-dimmed.css";
+import type { AppProps } from "next/app";
+import hljs from "highlight.js";
+import python from "highlight.js/lib/languages/python";
+import bash from "highlight.js/lib/languages/bash";
+import { useEffect } from "react";
+import Image from "next/image";
+import { Spotlight } from "@/components/Spotlight";
+import Link from "next/link";
+import { SearchBar } from "@/components/search-bar";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+    useEffect(() => {
+        hljs.registerLanguage("py", python);
+        hljs.registerLanguage("bash", bash);
+        hljs.highlightAll();
+    }, [Component]);
+    return (
+        <div className="dark">
+            <div className="hidden md:flex overflow-hidden">
+                <Spotlight className="-top-40 left-0 md:left-60 md:-top-20" />
+            </div>
+            <nav>
+                <div className="flex justify-center items-center lg:justify-between lg:flex-row flex-col xl:px-64">
+                    <Image
+                        src="/logo.svg"
+                        height={500}
+                        width={500}
+                        alt="view.py"
+                        className="h-32 w-64"
+                    />
+                    <div className="flex md:flex-row flex-col py-2 lg:py-0 md:space-x-3 items-center md:justify-center">
+                        <Link
+                            className="flex space-x-1 items-center p-2 rounded-lg hover:bg-zinc-900"
+                            href="/"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-5"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                                />
+                            </svg>
+                            <span>Home</span>
+                        </Link>
+                        <Link
+                            className="flex space-x-1 items-center p-2 rounded-lg hover:bg-zinc-900"
+                            href="/docs"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-5"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+                                />
+                            </svg>
+
+                            <span>Docs</span>
+                        </Link>
+                        <a
+                            className="flex space-x-1 items-center p-2 rounded-lg hover:bg-zinc-900"
+                            href="https://github.com/ZeroIntensity/view.py"
+                            target="_blank"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-5"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
+                                />
+                            </svg>
+
+                            <span>Source</span>
+                        </a>{" "}
+                        <a
+                            className="flex space-x-1 items-center p-2 rounded-lg hover:bg-zinc-900"
+                            href="https://pypi.org/project/view.py"
+                            target="_blank"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-5"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+                                />
+                            </svg>
+
+                            <span>Package</span>
+                        </a>{" "}
+                        <a
+                            className="flex space-x-1 items-center p-2 rounded-lg hover:bg-zinc-900"
+                            href="https://github.com/sponsors/ZeroIntensity"
+                            target="_blank"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-5"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+                                />
+                            </svg>
+
+                            <span>Donate</span>
+                        </a>{" "}
+                    </div>
+                    <SearchBar />
+                </div>
+                <hr className="border-t border-zinc-800" />
+            </nav>
+            <main className={GeistSans.className}>
+                <Component {...pageProps} />
+            </main>
+        </div>
+    );
+}
diff --git a/docs/src/pages/docs/building-projects/app-basics.mdx b/docs/src/pages/docs/building-projects/app-basics.mdx
new file mode 100644
index 0000000..66431fb
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/app-basics.mdx
@@ -0,0 +1,135 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# App Basics
+
+## New Applications
+
+Every view project will have a `new_app` call. The simplest app looks like this:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+app.run()  # You'll learn about the importance of this later
+```
+</Codeblock>
+
+`new_app` does a few important things:
+
+-   Loads the configuration, regardless of whether a config file exists.
+-   Sets the `App` address for use by `get_app` (more on that later).
+-   Loads finalization code for when the app closes.
+
+While it's not required for every app, naming your app variable `app` is the proper convention for view, as that's the default variable searched for when using the `view serve` command, but more on that in a moment.
+
+For now, just try to stick with naming your app file `app.py` and your `view.App` instance `app`.
+
+## Launching Apps
+
+Python libraries generally have two ways to run a web server:
+
+-   Running via the command line.
+-   Launching from Python itself (e.g. a `server.start(...)` function).
+
+Both have their benefits and downsides, so view.py supports both out of the box. `App` comes with its `run()` method, and the view CLI has the `view serve` command.
+
+Generally, you're going to want to add an `app.run()` to every view.py project, like so:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+app.run()
+```
+</Codeblock>
+
+This way, if you (or someone else) want to run your code programmatically, they can run it via something like `python3 app.py`. It's also more semantically clear that an app is going to start when you run that file.
+
+If you prefer the CLI method, you can just run `view serve` and view.py will extract the app from the file itself, ignoring the `run()` call.
+
+Note that this behavior is a double-edged sword, so be careful. When calling with `run()`, the Python script will never get past that line because the server will run indefinitely, but when using `view serve` it proceeds past it just fine since all it's doing is extracting the `app`, skipping `run()`. For example, take a look at this code:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+app.run()
+print("You called the app with `view serve`!")  # This only runs when `view serve` is used
+```
+</Codeblock>
+
+### Fancy Mode
+
+View comes with something called "fancy mode", which is a fancy UI that shows when you run the app. If you would like to disable this, you can do one of two things:
+
+-   Disable the `fancy` setting in configuration.
+-   Pass `fancy=False` to `run()`.
+
+You should disable it in the configuration if you completely despise fancy mode and don't want to use it at all, but if you only want to temporarily turn it off (for example, if you're a view.py developer and need to see proper output) then pass `fancy=False`.
+
+## Getting the App
+
+### Circular Imports
+
+If you've worked with big Python projects before, there's a good chance you've run into a circular import error. A circular import error occurs when two modules try to import each other. A view.py example of this problem would most likely be the main app file trying to import a route, but then that route tries to import the app.
+
+<Admonition level="info">
+    The example below uses routing, which if you're reading this for the first time you don't know how to use yet. Focus on the use of the `app` variable and not the routing itself.
+</Admonition>
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from routes import my_route
+
+app = new_app()
+app.load([my_route])
+app.run()
+```
+</Codeblock>
+
+<Codeblock fileName="routes.py">
+```py
+from view import get
+from app import app
+
+@app.get("/something")
+def something():
+    return "something"
+
+@get("/")
+def index():
+    return "Hello, view.py"
+```
+</Codeblock>
+
+View gives you a solution to this problem: `get_app`. `get_app` uses some magic internally to get you your `App` instance right then and there, no import required. It works similar to how you would use `new_app`:
+
+<Codeblock fileName="app.py">
+```py
+from view import get_app
+
+app = get_app()
+
+@app.get("/")
+def index():
+    return "..."
+```
+</Codeblock>
+
+## Review
+
+Every view.py project should contain a call to `new_app`. `new_app` does important things like loading your configuration, set's up finalization code, and letting the `App` instance be used by `get_app`.
+
+Running an app can be done in two ways: programmatically via the `App.run` or through `view serve` command. However, every view.py app should contain an `App.run` to give the choice for running programmatically. By default, view.py has a fancy UI when running your app, which may be disabled via editing the config or passing `fancy=False` to `run()`.
+
+Finally, circular imports occur when two Python modules try to import each other, which can happen a lot in view when getting the app from the app file (especially in manual routing). To fix it, View provides a `get_app` function to get you your `App` instance without an import.
diff --git a/docs/src/pages/docs/building-projects/builds.mdx b/docs/src/pages/docs/building-projects/builds.mdx
new file mode 100644
index 0000000..719f6b7
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/builds.mdx
@@ -0,0 +1,249 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Runtime Builds
+
+## Static Exports
+
+In some cases, you might want to export your application as [static HTML](https://en.wikipedia.org/wiki/Static_web_page). This makes it much easier to serve your app somewhere, at the limit of being able to perform actions server-side. You can export your app in view.py via the `view build` command, or by running the `build_app` function:
+
+<Codeblock fileName="bash">
+```
+$ view build
+* Starting build process!
+* Starting build steps
+* Getting routes
+* Calling GET /...
+* Created ...
+* Created index.html
+* Successfully built app
+```
+</Codeblock>
+
+This will export your app into a static folder called `build`, which can then be served via something like [http.server](https://docs.python.org/3/library/http.server.html). An exported route cannot contain:
+
+-   Route Inputs
+-   Path Parameters
+-   A method other than `GET`
+
+As stated above, you can also build your app programatically via `build_app`:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from view.build import build_app
+
+app = new_app()
+app.load()  # Call the loader manually, since we aren't calling run()
+
+build_app(app)
+```
+</Codeblock>
+
+## Build Steps
+
+Instead of exporting static HTML, you might just want to call some build script at runtime for your app to use. For example, this could be something like a [Next.js](https://nextjs.org) app, which you want to use as the UI for your website. Each different build is called a **build step** in View.
+
+View's build system does not aim to be a full fledged build system, but instead a bridge to use other package managers or tools to build requirements for your app. It tries to be _extendable_, instead of batteries-included.
+
+To specify a build step, add it under `build.steps` in your configuration. A build step should contain a list of requirements under `requires` and a `command`:
+
+<Codeblock fileName="view.toml">
+```toml
+[build.steps.nextjs]
+requires = ["npm"]
+command = "npm run build"
+```
+</Codeblock>
+
+By default, this will only be run once the app is started. If you would like to run it every time a certain route is called, add the `steps` parameter to a router function. Note that this will make your route much slower (as a build process needs to be started for every request), so it's highly recommended that you [cache](https://view.zintensity.dev/building-projects/responses/#caching) the route.
+
+For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/", steps=["nextjs"], cache_rate=10000)  # Reloads app every 10,000 requests
+async def index():
+    return await app.template("out/index.html")
+
+app.run()
+```
+</Codeblock>
+
+<Admonition level="note">
+    Running build steps are expensive! When possible, try to make it a one-time cost by specify it in the default steps, or by setting the cache rate really high.
+</Admonition>
+
+## Executing Build Scripts
+
+Instead of running a command, you can also run a Python script. To do this, simply specify a `script` value as a path to a file instead of a `command`:
+
+<Codeblock fileName="view.toml">
+```toml
+[build.steps.foo]
+requires = []
+script = "foo.py"
+```
+</Codeblock>
+
+<Admonition level="note">
+    `__name__` is set to `__view_build__` when using a build script. If you want to use the file for other things, you can simply check `if __name__ == "__view_build__"`.
+</Admonition>
+
+You can also specify a list of files or commands for both, to run multiple of either:
+
+<Codeblock fileName="view.toml">
+```toml
+[build.steps.foo]
+requires = ["gcc"]
+script = ["foo.py", "bar.py"]
+command = ["gcc -c -Wall -Werror -fpic foo.c", "gcc -shared -o libfoo.so foo.o"]
+```
+</Codeblock>
+
+If the script needs to run asynchronous code, export a `__view_build__` from the script:
+
+<Codeblock fileName="build.py">
+```py
+import aiofiles
+
+# This function will be run by the view.py build system
+async def __view_build__():
+    async with aiofiles.open("something.txt", "w") as f:
+        await f.write("...")
+```
+</Codeblock>
+
+
+## Default Steps
+
+As said earlier, the default build steps are always run right before the app is started, and then never ran again (unless explicitly needed by a route). If you would like only certain steps to run, specify them with the `build.default_steps` value:
+
+<Codeblock fileName="view.toml">
+```toml
+[build]
+default_steps = ["nextjs"]
+# Only NextJS will be built on startup
+
+[build.steps.nextjs]
+requires = ["npm"]
+command = "npm run build"
+
+[build.steps.php]
+requires = ["php"]
+command = "php -f payment.php"
+```
+</Codeblock>
+
+## Platform-Dependent Steps
+
+Many commands are different based on the platform used. For example, to read from a file on the Windows shell would be `type`, while on Linux and Mac it would be `cat`. If you add multiple step entries (in the form of an [array of tables](https://toml.io/en/v1.0.0-rc.2#array-of-tables)) with `platform` values, view.py will run the entry based on the platform the app was run on.
+
+For example, using the file reading example from above:
+
+Notice the double brackets next to `[[build.steps.read_from_file]]`, specifying an array of tables.
+
+<Codeblock fileName="view.toml">
+```toml
+[[build.steps.read_from_file]]
+platform = ["mac", "linux"]
+command = "cat whatever.txt"
+
+[[build.steps.read_from_file]]
+platform = "windows"
+command = "type whatever.txt"
+```
+</Codeblock>
+
+The `platform` value can be one of three things per entry:
+
+-   A list of platforms.
+-   A string containing a single platform.
+-   `None`, meaning to use this entry if no other platforms match.
+
+For example, with a `None` platform set (on multiple entries), the above could be rewritten as:
+
+<Codeblock fileName="view.toml">
+```toml
+[[build.steps.read_from_file]]
+# Windows ONLY runs this step
+platform = "windows"
+command = "type whatever.txt"
+
+[[build.steps.read_from_file]]
+# All other platforms run this!
+command = "cat whatever.txt"
+```
+</Codeblock>
+
+Note that only one step entry can have a `None` platform value, otherwise view.py will throw an error.
+
+<Admonition level="info">
+    The only recognized operating systems for `platform` are the big three: Windows, Mac, and any Linux based system. If you want more fine-grained control (for example, using `pacman` or `apt` depending on the Linux distro), use a custom build script that knows how to read the Linux distribution.
+</Admonition>
+
+## Build Requirements
+
+As you've seen above, build requirements are specified via the `requires` value. Out of the box, view.py supports a number of different build tools, compilers, and interpreters. To specify a requirement for one, simply add the name of their executable (_i.e._, how you access their CLI). For example, since `pip` is accessed via using the `pip` command in your terminal, `pip` is the name of the requirement.
+
+However, view.py might not support checking for a command by default (this is the case if you get a `Unknown build requirement` error). If so, you need a custom requirement. If you would like to, you can make an [issue](https://github.com/ZeroIntensity/view.py/issues) requesting support for it as well.
+
+### Custom Requirements
+
+There are four types of custom requirements, which are specified by adding a prefix to the requirement name:
+
+-   Importing a Python module (`mod+`)
+-   Executing a Python script (`script+`)
+-   Checking if a path exists (`path+`)
+-   Checking if a command exists (`command+`)
+
+For example, the `command+gcc` would make sure that `gcc --version` return `0`:
+
+<Codeblock fileName="view.toml">
+```toml
+[build.steps.c]
+requires = ["command+gcc"]
+command = "gcc *.c -o out"
+```
+</Codeblock>
+
+### The Requirement Protocol
+
+In a custom requirement specifying a module or script, view.py will attempt to call an asynchronous `__view_requirement__` function (similar to `__view_build__`). This function should return a `bool` value, with `True` indicating that the requirement exists, and `False` otherwise.
+
+<Admonition level="info">
+    If no `__view_requirement__` function exists, then all view.py does it check that execution or import was successful, and marks the requirement as passing.
+</Admonition>
+
+For example, if you were to write a requirement script that checks if the Python version is at least `3.10`, it could look like:
+
+<Codeblock fileName="check_310.py">
+```py
+import sys
+
+async def __view_requirement__() -> bool:
+    # Make sure we're running on at least Python 3.10
+    return sys.version_info >= (3, 10)
+```
+</Codeblock>
+
+The above could actually be used via both `script+check_310.py` and `mod+check_310`.
+
+<Admonition level="note">
+    Don't use the view.py build system to check the Python version or if a Python package is installed. Instead, use the `dependencies` section of a `pyproject.toml` file, or [PEP 723](https://peps.python.org/pep-0723/) script metadata.
+</Admonition>
+
+## Review
+
+View can build static HTML with the `view build` command, or via `view.build.build_app`. Build steps in view.py are used to call external build systems, which can then in turn be used to build things your app needs at runtime (such as static HTML generated by [Next.js](https://nextjs.org)). Builds can run commands, Python scripts, or both.
+
+Each build step contains a list of build requirements. View provides several known requirements to specify out of the box, but you may also specify custom requirements, either via a Python script or module, checking a file path, or executing an arbitrary command.
diff --git a/docs/src/pages/docs/building-projects/documenting.mdx b/docs/src/pages/docs/building-projects/documenting.mdx
new file mode 100644
index 0000000..5c7b26a
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/documenting.mdx
@@ -0,0 +1,134 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Documenting Applications
+
+## What is documenting?
+
+Writing documentation (or "documenting", as view.py calls it) can be an important task when it comes to writing API's, but it can be extremely tedious to do manually. Other frameworks, such as [FastAPI](https://fastapi.tiangolo.com), have their own approaches to generating API documentation, a common method is by using [OpenAPI](https://www.openapis.org/).
+
+OpenAPI is a good choice when it comes to this topic, but View does not support it. However, [support is planned](https://github.com/ZeroIntensity/view.py/issues/103).
+
+For now, View has it's own system internally that does not use OpenAPI. This means that **client generation is not yet supported.** If you would like to track this issue, see it [here](https://github.com/ZeroIntensity/view.py/issues/74).
+
+## Writing Documentation
+
+On a route, you may define a route's documentation in one of two ways:
+
+-   Passing `doc` to the router function (e.g. `@get("/", doc="Homepage")`)
+-   More versatile, adding a docstring to the route (e.g. `"""Homepage"""`)
+
+Here's an example using both:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/", doc="The homepage")
+async def index():
+    ...
+
+@app.get("/hello")
+async def hello():
+    """A greeting to the user."""
+
+app.docs("docs.md")  # more on this function later
+app.run()
+```
+</Codeblock>
+
+## Documenting Inputs
+
+For route inputs, it's almost idential, except that **you cannot** use a docstring, and instead must use the `doc` parameter. This syntax is the same across both `query` and `body` (including standard and direct).
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+@app.get('/')
+@app.query("greeting", str, doc="The greeting to be used by the server", default="hello")
+async def index(greeting: str):
+    """The homepage that returns a greeting to the user."""
+    return f"{greeting}, world!"
+```
+</Codeblock>
+
+However, you may want to define documentation for certain object keys when using object types (i.e. they support `__view_body__` or are handled internally). In this case, you can use `typing.Annotated` and a docstring again
+
+-   The docstring defines a description for the overall class.
+-   `Annotated` can provide a description for a certain key.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from typing import Annotated, NamedTuple
+
+app = new_app()
+
+class Person(NamedTuple):
+    """A person in the world."""
+    first: Annotated[str, "Their first name."]
+    last: Annotated[str, "Their last name."]
+
+@app.get("/")
+@app.query("person", Person)
+async def index(person: Person):
+    ...
+
+app.run()
+```
+</Codeblock>
+
+**Note:** If you are on Python 3.8, you will get an error complaining about `Annotated` not being a part of `typing`. In this case, you can import `Annotated` from `typing_extensions` instead.
+
+## Autogeneration
+
+View will generate your API documentation into a markdown document that you could render in something like [MkDocs](https://mkdocs.org). This can be done via `App.docs()`, which will generate the markdown and write it to a file for you.
+
+There are, roughly speaking, two ways to write to a file via `App.docs()`:
+
+-   Passing it a `str` or `Path`.
+-   Passing it a `TextIO[str]` file wrapper.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from pathlib import Path
+
+app = new_app()
+
+app.docs("docs.md")
+app.docs(Path("docs.md"))
+
+with open("docs.md", "w") as f:
+    app.docs(f)
+```
+</Codeblock>
+
+Alternatively, you can also use the `view docs` command to generate your documentation:
+
+<Codeblock fileName="bash">
+```
+$ view docs
+- Created `docs.md`
+```
+</Codeblock>
+
+## Review
+
+"Documenting" in terms of View, is the act of writing documentation. Other frameworks use [OpenAPI](https://www.openapis.org/) as a versatile solution to doing this, but [view.py does not yet support this](https://github.com/ZeroIntensity/view.py/issues/103).
+
+To write a description for a route, you may pass a `doc` parameter to the router call, or instead add a docstring to the route function itself. In a route input, it's quite similar, where you pass `doc` to the input function, but **using a docstring is not allowed**. However, this rule is broken in the case of using an object as the type. When using an object, you must provide a docstring to define the class's description, and use `typing.Annotated` (or `typing_extensions.Annotated`) to set descriptions for object attributes.
+
+Finally, you can actually generate the markdown content via the `docs()` method on your `App`, or by the `view docs` command. `docs()` can take three types of parameters:
+
+-   A `str`, in which it opens the file path and attempts to write to it.
+-   A `Path`, in which the same thing happens.
+-   A `TextIO[str]` (file wrapper), where the file is **not opened** by View, and is instead just written to via the wrapper.
diff --git a/docs/src/pages/docs/building-projects/parameters.mdx b/docs/src/pages/docs/building-projects/parameters.mdx
new file mode 100644
index 0000000..9afda6d
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/parameters.mdx
@@ -0,0 +1,388 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Taking Parameters
+
+## Query Strings and Bodies
+
+If you're familiar with HTTP semantics, then you likely already know about query parameters and body parameters. If you have no idea what that is, that's okay.
+
+In HTTP, the query string is at the end of the URL and is prefixed with a `?`. For example, in a YouTube link (e.g. `youtube.com/watch?v=...`), the query string is `?v=...`. The query string contains key-value pairs in the form of strings. In Python, it's similiar to a `dict` that only contains strings.
+
+Bodies are a little bit more complicated. An HTTP body can be a number of different formats, but in a nutshell they are again, key-value pairs, but they can be a number of types. For now, JSON will be the main focus, which can have `str` keys, and any of the following as a value (in terms of Python types):
+
+-   `str`
+-   `int`
+-   `bool`
+-   `dict[str, <any of these types>]`
+
+The main similiarity here is that they are both key value pairs, which will make more sense in a moment.
+
+## Route Inputs
+
+In view.py, a route input is anything that feeds a parameter (or "input") to the route. This can be either a parameter received through the HTTP body, or something taken from the query string. View treats these two essentially the same on the user's end. Route inputs are similar to routes in the sense that there are standard and direct versions of the same thing:
+
+-   `query` or `App.query`
+-   `body` or `App.body`
+
+There is little to no difference between the standard and direct variations, **including loading**. The direct versions are only to be used when the app is already available to **prevent extra imports**.
+
+## Defining Inputs
+
+For documentation purposes, only `query` variations will be used. However, **`body` works the exact same way**. A route input function (`query` in this case) takes one or more parameters:
+
+-   The name of the parameter, should be a `str`.
+-   The type that it expects (optional). Note that this can be passed as many times as you want, and each type is just treated as a union.
+
+The below code would expect a parameter in the query string named `hello` of type `int`:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+@app.query("hello", int)
+async def index(hello: int):
+    print(hello)
+    return "hello"
+```
+</Codeblock>
+
+The `query()` call can actually come before `get` due to the nature of the routing system. In fact, anything you decorate a route with does not have a specific order needed. For example, the following is completely valid:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.query("hello", int)  # query comes before get()
+@app.get("/")
+async def index(hello: int):
+    ...
+
+app.run()
+```
+</Codeblock>
+
+### Automatically
+
+If you've used a library like [FastAPI](https://fastapi.tiangolo.com), then you're probably already familiar with the concept of automatic inputs. Automatic inputs in terms of view.py are when you define route inputs without using a `query` or `body` decorator, and instead, just get input definitions through the function signature. This is the most basic example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+async def index(hello: str):  # no @query needed
+    return f"{hello}, world"
+
+app.run()
+```
+</Codeblock>
+
+Note that automatic inputs create inputs for **query parameters only**.
+
+<Admonition level="note">
+When mixing automatic route inputs with decorators (e.g. `query` and `body`), view.py assumes that decorator inputs have the same name as the parameter. For example, the following will **not** work:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+@app.query("hello", str)
+async def index(hello_param: str, test: str):
+    ...
+
+app.run()
+```
+</Codeblock>
+</Admonition>
+
+## Cast Semantics
+
+In query strings, only a string can be sent, but these strings can represent other data types. This idea is called **casting**, and it's not at all specific to Python. If you're still confused, think of it as calling `int()` on the string `"1"` to convert it into an integer `1`.
+
+View has this exact same behavior when it comes to route inputs. If you tell your route to take an `int`, view.py will do all the necessary computing internally to make sure that you get an integer in your route. If a proper integer was not sent, then the server will automatically return an error `400` (Bad Request). There are a few things that should be noted for this behavior:
+
+-   Every type can be casted to `str`.
+-   Every type can be casted to `Any`.
+-   `bool` expects `true` and `false` (instead of Python's `True` and `False`) to fit with JSON's types.
+-   `dict` expects valid JSON, **not** a valid Python dictionary.
+
+## Typing Inputs
+
+Typing route inputs is very simple if you're already familiar with Python's type annotation system. Again, unions can be formed via passing multiple types instead of one. However, direct union types provided by Python are supported too. This includes both `typing.Union` and the newer `|` syntax.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from typing import Union
+
+app = new_app()
+
+@app.get("/")
+@app.query("name", str, int)
+async def index(name: str | int):
+    ...
+
+@app.get("/hello")
+@app.query("name", Union[str, int])
+async def hello(name: str | int):
+    ...
+
+@app.get("/world")
+@app.query("name", str | int)
+async def world(name: str | int):
+    ...
+
+app.run()
+```
+</Codeblock>
+
+The types supported are (all of which can be mixed and matched to your needs):
+
+-   `str`
+-   `int`
+-   `bool`
+-   `list` (or `typing.List`)
+-   `dict` (or `typing.Dict`)
+-   `Any` (as in `typing.Any`)
+-   `None`
+-   `dataclasses.dataclass`
+-   `pydantic.BaseModel`
+-   Classes decorated with `attrs.define`
+-   `typing.NamedTuple`
+-   `typing.TypedDict`
+-   Any object supporting the `__view_body__` protocol.
+
+### Lists and Dictionaries
+
+You can use lists and dictionaries in a few ways, the most simple being just passing the raw type (`list` and `dict`). In typing terms, view.py will assume that these mean `dict[str, Any]` (as all JSON keys have to be strings) and `list[Any]`. If you would like to enforce a type, simply replace `Any` with an available type. The typing variations of these types (`typing.Dict` and `typing.List`) are supported as well.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from typing import Dict
+
+app = new_app()
+
+@app.get("/")
+@app.query("name", Dict[str, str | int])
+async def index(name: Dict[str, str | int]):
+    ...
+
+@app.get("/hello")
+@app.query("name", dict)
+async def hello(name: dict):
+    ...
+
+app.run()
+```
+</Codeblock>
+
+Note that backport is **not possible** if you're using new typing features (such as the `dict[...]` or `list[...]`) as `from __future__ import annotations` does not affect parameters, meaning that the second value sent to the route input function (again, `query` or `body`) is not changed.
+
+## Using Objects
+
+As listed about earlier, view.py supports a few different objects to be used as types. All of these objects are meant for holding data to a specific model, which can be incredibly useful in developing web apps. Some things should be noted when using these types:
+
+-   Any annotated value types must an available type already (i.e. `str | int` is supported, but `set | str` is not). Other objects are indeed supported.
+-   Respected modifiers are supported (such as `dataclasses.field` on `dataclass`).
+-   Methods are unrelated to the parsing, and may return any type and take any parameters. Methods are not accessible to the user (as JSON doesn't have methods).
+
+Here's an example using `dataclasses`:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from dataclasses import dataclass, field
+from typing import List
+
+app = new_app()
+
+@dataclass
+class Person:
+    first: str
+    last: str
+    favorite_foods: List[str] = field(default_factory=list)
+
+@app.get("/")
+@app.query("me", Person)
+async def index(me: Person):
+    return f"Hello, {me.first} {me.last}"
+```
+</Codeblock>
+
+If you would prefer to not use an object, View supports using a `TypedDict` to enforce parameters. It's subject to the same rules as normal objects, but is allowed to use `typing.NotRequired` to omit keys. Note that `TypedDict` **cannot** have default values.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from typing import TypedDict, NotRequired, List
+
+app = new_app()
+
+class Person(TypedDict):
+    first: str
+    last: str
+    favorite_foods: NotRequired[List[str]]
+
+@app.get("/")
+@app.query("me", Person)
+async def index(me: Person):
+    return f"Hello, {me['first']} {me['last']}"
+```
+</Codeblock>
+
+## Type Validation API
+
+You can use view.py's type validator on your own to do whatever you want. To create a validator for a type, use `compile_type`:
+
+<Codeblock fileName="app.py">
+```py
+from view import compile_type
+
+validator = compile_type(str | int)
+```
+</Codeblock>
+
+<Admonition level="danger">
+The above code uses the `|` syntax, which is only available to Python 3.9+
+</Admonition>
+
+With a validator, you can do three things:
+
+-   Cast an object to the type.
+-   Check if an object is compatible with the type.
+-   Check if an object is compatible, without the use of casting.
+
+`cast` will raise a `TypeValidationError` if the type is not compatible:
+
+<Codeblock fileName="app.py">
+```py
+from view import compile_type
+
+tp = compile_type(dict)
+tp.cast("{}")
+tp.cast("123")  # TypeValidationError
+```
+</Codeblock>
+
+The difference between `check_type` and `is_compatible`, is that `check_type` is a [type guard](https://mypy.readthedocs.io/en/latest/type_narrowing.html), which `is_compatible` is not.
+
+This means that `check_type` will ensure that the object is _an instance_ of the type, while `is_compatible` checks whether it can be casted. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import compile_type
+
+tp = compile_type(dict)
+
+x: Any = {}
+y: Any = {}  # you could also use the string "{}" here
+
+if tp.check_type(x):
+    reveal_type(x)  # dict
+    # to a type checker, x is now a dict
+
+if tp.is_compatible(y):
+    reveal_type(y)  # Any
+    # a type checker doesn't know that y is a dict
+```
+</Codeblock>
+
+## Body Protocol
+
+If any of the above types do not support your needs, you may design your own type with the `__view_body__` protocol. On a type, `__view_body__` can be held in one of two things:
+
+-   An attribute (e.g. `cls.__view_body__ = ...`)
+-   A property
+-   A static (or class) method.
+
+Whichever way you choose, the `__view_body__` data must be accessed statically, **not in an instance**. The data should be a dictionary (containing only `str` keys, once again), but the values should be types, not instances. These types outline how view.py should parse it at runtime. For example, a `__view_body__` to create an object that has a key called `a`, which a `str` value would look like so:
+
+<Codeblock fileName="app.py">
+```py
+class MyObject:
+    __view_body__ = {"a": str}
+```
+</Codeblock>
+
+View **does not** handle the initialization, so you must define a proper `__init__` for it. If you are already using the `__init__` for something else, you can define a `__view_construct__` class or static method and view.py will choose it over `__init__`.
+
+<Codeblock fileName="app.py">
+```py
+class MyObject:
+    __view_body__ = {"a": str}
+
+    @classmethod
+    def __view_construct__(cls, **kwargs):
+        self = cls()
+        self.a: str = kwargs["a"]
+```
+</Codeblock>
+
+### Default Types and Unions
+
+`__view_body__` works the same as standard object types would work in the sense that types like `typing.Union` or the `|` syntax are supported, but you may also use a special value called `BodyParam`. `BodyParam` will allow you to pass union types in a tuple and set a default value. If you only want one type when using `BodyParam`, simply set `types` to a single value instead of a tuple. Here's an example of how it works, with the original object from above:
+
+<Codeblock fileName="app.py">
+```py
+class MyObject:
+    __view_body__ = {
+        "a": view.BodyParam(types=(str, int), default="hello"),
+        "b": view.BodyParam(types=str, default="world"),
+    }
+
+    @classmethod
+    def __view_construct__(cls, **kwargs):
+        self = cls()
+        self.a: str | int = kwargs["a"]
+        self.a: str = kwargs["b"]
+```
+</Codeblock>
+
+## Client Semantics
+
+On the client side, sending data to view.py might be a bit unintuitive, depending on your background. For this part of the documentation, a JSON body will be used for simplicity. In the case of JSON, strings will be casted to a proper type if the route supports it. For example, if a route takes `a: str | int`, the following would be set to the integer `1`, not `"1"`.
+
+<Codeblock fileName="json">
+```json
+{
+    "a": "1"
+}
+```
+</Codeblock>
+
+Objects are simply formatted in JSON as well. If you had an object under the parameter name `test` and that object had the key `a: str`, it would be sent to the server like so:
+
+<Codeblock fileName="app.py">
+```py
+{
+    "test": {
+        "a": "..."
+    }
+}
+```
+</Codeblock>
+
+## Review
+
+View treats queries and bodies more or less equivalent, as they are both key value pairs. Strings can be casted to every other type assuming that it is in the proper format, and that's what makes it work.
+
+Any body or query parameter to a route is called a route input. There are standard and direct inputs (`body` and `query`, `App.body` and `App.query`), but they are not same in the way standard and direct routers work (direct inputs only exist to prevent extra imports).
+
+A route input function takes two parameters, the name (which is always a `str`), and the (optional) type(s). All the supported types are JSON types with the exception of some object structures (which are translated to a `dict`/JSON internally). `__view_body__` and `__view_construct__` can be used to implement special types that will be parsed by view.
diff --git a/docs/src/pages/docs/building-projects/request-data.mdx b/docs/src/pages/docs/building-projects/request-data.mdx
new file mode 100644
index 0000000..82babc6
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/request-data.mdx
@@ -0,0 +1,208 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Request Data
+
+## The Context
+
+If you've used a framework like [Django](https://djangoproject.com) or [FastAPI](https://fastapi.tiangolo.com), you've likely used a `request` parameter (or a `Request` type). View has something similiar, called `Context`.
+
+The `Context` instance contains information about the incoming request, including:
+
+-   Headers.
+-   Cookies.
+-   HTTP version.
+-   Request method.
+-   URL path.
+-   Client and server IP address.
+
+<Admonition level="info">
+`Context` is an [extension type](https://docs.python.org/3/extending/newtypes_tutorial.html), and is defined in the `_view` module. It's Python signatures are defined in the `_view.pyi` type stub.
+</Admonition>
+
+## Context Input
+
+The context can be added to a route via a route input, which is done through the `context` decorator. Note that `context` has a standard and direct variation (`App.context` is available to prevent imports).
+
+For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, context, Context
+
+app = new_app()
+
+@app.get("/")
+@context
+async def index(ctx: Context):
+    print(ctx.headers["user-agent"])
+    return "..."
+
+app.run()
+```
+</Codeblock>
+
+Since `context` is a route input, it can be used alongside other route inputs:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context
+
+app = new_app()
+
+@app.get("/")
+@app.query("greeting", str)
+@app.context  # direct variation
+async def index(greeting: str, ctx: Context):
+    return f"{greeting}, {ctx.headers['place']}"
+
+app.run()
+```
+</Codeblock>
+
+### Automatic Input
+
+`Context` works well with the automatic inputs API (similar to how you would do it in [FastAPI](https://fastapi.tiangolo.com)), like so:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context
+
+app = new_app()
+
+@app.get("/")
+async def index(ctx: Context):  # this is allowed
+    ...
+
+app.run()
+```
+</Codeblock>
+
+## Detecting Tests
+
+`Context` can also be used to detect whether the route is being used via `App.test`, through the `http_version` attribute.
+
+<Admonition level="info">
+
+    `App.test` is a more internal detail, but is available for public use. It looks like this:
+
+    <Codeblock fileName="app.py">
+    ```py
+    from view import new_app
+    import asyncio
+
+    app = new_app()
+
+    @app.get("/")
+    async def index():
+        return "hello, view.py"
+
+    async def main():
+        async with app.test() as test:
+            res = await test.get("/")
+            assert res.message == "hello, view.py"
+
+    if __name__ == "__main__":
+        asyncio.run(main())
+    ```
+    </Codeblock>
+</Admonition>
+
+When a route is being used via `App.test`, `http_version` is set to `view_test`. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context
+import asyncio
+
+app = new_app()
+
+@app.get("/")
+@app.context
+async def index(context: Context):
+    if context.http_version == "view_test":
+        return "this is a test!"
+
+    return "hello, view.py"
+
+async def main():
+    async with app.test() as test:
+        res = await test.get("/")
+        assert res.message == "this is a test!"
+
+if __name__ == "__main__":
+    asyncio.run(main())
+```
+</Codeblock>
+
+## Cookies
+
+Technically speaking, cookies in HTTP are done via [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie), but typically cookies in Python frameworks are done in a `dict` instead. View is no exception to this.
+
+Cookies can be viewed from the `cookies` attribute. However, since the `Context` is **not related** to the response, you must use `cookie` on a `Response` object to mutate a cookie. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context, Response
+
+app = new_app()
+
+@app.get("/")
+async def index(ctx: Context):  # automatic route input
+    count = int(ctx.cookies.get("count") or 0)
+    count += 1
+    res = Response(f"you have been to this page {count} time(s)")
+    res.set_cookie("count", str(count))
+    return res
+
+app.run()
+```
+</Codeblock>
+
+## Server and Client Address
+
+The `Context` also provides information about the servers binding address, as well as the address of the client. This information is provided in the form of an `ipaddress.IPv4Address` or `ipaddress.IPv6Address` (see the [ipaddress module](https://docs.python.org/3/library/ipaddress.html)), and then the port is in a seperate attribute.
+
+Both `Context.client` and `Context.client_port` may be `None`, but note that **if either of them is not `None`, the other one will be non `None`**. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context
+
+app = new_app()
+
+@app.get('/')
+@app.context
+async def index(ctx: Context):
+    if ctx.client:
+        port = ctx.client_port  # this will always be an int in this case
+    ...
+
+app.run()
+```
+</Codeblock>
+
+<Admonition level="danger">
+The above is **not** type safe. The type checker will still believe the `port` is `int | None`.
+</Admonition>
+
+## Review
+
+`Context` is similiar to `Request` in other web frameworks, and is considered to be a route input in View, meaning you can add it to a route via the `context` decorator (or `App.context`, to prevent an extra import), or by the automatic route input system (i.e. adding a parameter annotated with type `Context`).
+
+`Context` contains nine attributes:
+
+-   The `App` instance
+-   `headers`, of type `dict[str, str]`.
+-   `cookies`, of type `dict[str, str]`.
+-   `client`, of type `ipaddress.IPv4Address`, `ipaddress.IPv6Address`, or `None`.
+-   `server`, of type `ipaddress.IPv4Address`, `ipaddress.IPv6Address`, or `None`.
+-   `method`, of type `StrMethodASGI` (uppercase string containing the method, such as `"GET"`).
+-   `path`, of type `str`.
+-   `scheme`, which can be the string `"http"`, `"https"`.
+-   `http_version`, which can be the string `"1.0"`, `"1.1"`, `"2.0"`, `"view_test"`.
diff --git a/docs/src/pages/docs/building-projects/responses.mdx b/docs/src/pages/docs/building-projects/responses.mdx
new file mode 100644
index 0000000..3f66b62
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/responses.mdx
@@ -0,0 +1,334 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Returning Responses
+
+## Basic Responses
+
+In any web framework, returning a response can be as simple as returning a string of text or quite complex with all sorts of things like server-side rendering. Right out of the box, View supports returning status codes, headers, and a response without any fancy tooling. A response **must** contain a body (this is a `str` or `bytes`), but may also contain a status (`int`) or headers (`dict[str, str]`). These may be in any order.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+async def index():
+    return "Hello, view.py", 201, {"x-my-header": "my_header"}
+
+app.run()
+```
+</Codeblock>
+
+## HTTP Errors
+
+Generally when returning a [client error](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses) or [server error](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses), you want to skip future execution. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+async def index(number: int):
+    if number == 1:
+        return "number cannot be one", 400
+
+    return f"your number is {number}"
+
+app.run()
+```
+</Codeblock>
+
+However, manually returning can be messy. For this, view.py provides you the `Error` class, which behaves like an `Exception`. It takes two parameters:
+
+-   The status code, which is `400` by default.
+-   The message to send back to the user. If this is `None`, it uses the default error message (e.g. `Bad Request` for error `400`).
+
+Since `Error` works like a Python exception, you can `raise` it just fine:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Error
+
+app = new_app()
+
+@app.get("/")
+async def index(number: int):
+    if number == 1:
+        raise Error(400)
+
+    return f"your number is {number}"
+
+app.run()
+```
+</Codeblock>
+
+<Admonition level="warning">
+`Error` can only be used to send back *error* responses. It can **not** be used to return status codes such as `200`.
+</Admonition>
+
+## Caching
+
+Sometimes, computing the response for a route can be expensive or unnecessary. For this, view.py, along with many other web frameworks, provide the ability to cache responses.
+
+View lets you do this by using the `cache_rate` parameter on a router.
+
+For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/", cache_rate=10)  # reload this route every 10 requests
+async def index():
+    return "..."
+
+app.run()
+```
+</Codeblock>
+
+You can see this in more detail by using a route that changes it's responses:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+count = 1
+
+@app.get("/", cache_rate=10)
+async def index():
+    global count
+    count += 1
+    return str(count)
+
+app.run()
+```
+</Codeblock>
+
+In the above example, `index` is only called every 10 requests, so after 20 calls, `count` would be `2`.
+
+## Response Protocol
+
+If you have some sort of object that you want to wrap a response around, view.py gives you the `__view_result__` protocol. The only requirements are:
+
+-   `__view_result__` is available on the returned object (doesn't matter if it's static or instance)
+-   `__view_result__` returns data that corresponds to the allowed return values.
+
+All types supporting `__view_result__` must take a `Context` parameter (see [this page](/docs/building-projects/request-data)). For now, ignore the context, and just focus on the overall `__view_result__`.
+
+With that in mind, a type `MyObject` defining `__view_result__` could look like:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Context
+
+app = new_app()
+
+class MyObject:
+    def __view_result__(self, ctx: Context):
+        return "Hello from MyObject!", {"x-www-myobject": "foo"}
+
+@app.get("/")
+async def index():
+    return MyObject()  # this is ok
+
+app.run()
+```
+</Codeblock>
+
+## Response Objects
+
+Generally, you don't want to manually define a `__view_result__` method. Instead, you'll want to wrap the existing response implementation.
+
+To start, view.py comes with three built in response objects:
+
+-   `Response` is simply a wrapper around other responses, but also acts as the base type for all response objects.
+-   `HTML` is for returning HTML content.
+-   `JSON` is for returning JSON content.
+
+A common use case for `Response`, apart from defining other response types, is wrapping an object that has a `__view_result__` and changing one of the values. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Response
+
+app = new_app()
+
+class Test:
+    def __view_result__(self):
+        return "test", 201
+
+@app.get("/")
+async def index():
+    return Response(Test(), status=200)  # 200 is returned, not 201
+
+app.run()
+```
+</Codeblock>
+
+Another common case for `Response` is using cookies. You can add a cookie to the response via the `cookie` method:
+
+<Codeblock fileName="app.py">
+```py
+@app.get("/")
+async def index():
+    res = Response(...)
+    res.cookie("hello", "world")
+    return res
+```
+</Codeblock>
+
+Note that **all built-in response classes inherit from `Response`**, meaning you can use this functionality anywhere. However, this is a convention as far as third party libraries go - it's not a requirement for a third party to inherit from `Response` (although, it's highly recommended that they do.)
+
+<Admonition level="note">
+A `Response` must be *returned* for things like `cookie` to take effect. For example:
+</Admonition>
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Response
+
+app = new_app()
+
+@app.get("/")
+async def index():
+    res = Response(...)
+    return "..."  # res is not returned!
+
+app.run()
+```
+</Codeblock>
+
+### Body Translate Strategy
+
+The body translate strategy in the `__view_result__` protocol refers to how the `Response` class will translate the body into a `str`. There are four available strategies:
+
+-   `str`, which uses the object's `__str__` method.
+-   `repr`, which uses the object's `__repr__` method.
+-   `result`, which calls the `__view_result__` protocol implemented on the object (assuming it exists).
+-   `custom`, uses the `Response` instance's `_custom` attribute (this only works on subclasses of `Response` that implement it).
+
+For example, the route below would return the string `"'hi'"`:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, Response
+
+app = new_app()
+
+@app.get("/")
+async def index():
+    res = Response('hi', body_translate="repr")
+    return res
+
+app.run()
+```
+</Codeblock>
+
+### Implementing Responses
+
+`Response` is a [generic type](https://mypy.readthedocs.io/en/stable/generics.html), meaning you should supply it a type argument when writing a class that inherits from it.
+
+For example, if you wanted to write a type that takes a `str`:
+
+<Codeblock fileName="app.py">
+```py
+class MyResponse(Response[str]):
+    def __init__(self, body: str) -> None:
+        super().__init__(body)
+```
+</Codeblock>
+
+Generally, you'll want to use the `custom` translation strategy when writing custom `Response` objects.
+
+You must implement the `_custom` method (which takes in the `T` passed to `Response`, and returns a `str`) to use the `custom` strategy. For example, the code below would be for a `Response` type that formats a list:
+
+<Codeblock fileName="app.py">
+```py
+from view import Response
+
+class ListResponse(Response[list]):
+    def __init__(self, body: list) -> None:
+        super().__init__(body, body_translate="custom")
+
+    def _custom(self, body: list) -> str:
+        return " ".join(body)
+```
+</Codeblock>
+
+## Middleware
+
+### The Middleware API
+
+`Route.middleware` is used to define a middleware function for a route. Like other web frameworks, middleware functions are given a `call_next`. Note that `call_next` is **always asynchronous**, regardless of whether the route is asynchronous.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, CallNext
+
+app = new_app()
+
+@app.get("/")
+def index():
+    return "My response!"
+
+@index.middleware
+async def index_middleware(call_next: CallNext):
+    print("This is called before index()!")
+    res = await call_next()
+    print("This is called after index()!")
+    return res
+
+app.run()
+```
+</Codeblock>
+
+### Response Parsing
+
+As shown above, `call_next` returns the result of the route. However, dealing with the raw response tuple might be a bit of a hassle. Instead, you can convert the response to a `Response` object using the `to_response` function:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, CallNext, to_response
+from time import perf_counter
+
+app = new_app()
+
+@app.get("/")
+def index():
+    return "my response!"
+
+@index.middleware
+async def took_time_middleware(call_next: CallNext):
+    a = perf_counter()
+    res = to_response(await call_next())
+    b = perf_counter()
+    res.headers["X-Time-Elapsed"] = str(b - a)
+    return res
+
+app.run()
+```
+</Codeblock>
+
+## Review
+
+Responses can be returned with a string, integer, and/or dictionary in any order.
+
+-   The string represents the body of the response (e.g. HTML or JSON)
+-   The integer represents the status code (200 by default)
+-   The dictionary represents the headers (e.g. `{"x-www-my-header": "some value"}`)
+
+`Response` objects can also be returned, which implement the `__view_result__` protocol. All response classes inherit from `Response`, which supports operations like setting cookies.
+
+Finally, the `middleware` method on a `Route` can be used to implement middleware.
diff --git a/docs/src/pages/docs/building-projects/routing.mdx b/docs/src/pages/docs/building-projects/routing.mdx
new file mode 100644
index 0000000..2a9570b
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/routing.mdx
@@ -0,0 +1,296 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Routing
+
+## Loaders
+
+Routing is a big part of any web library, and there are many ways to do it. View does it's best to support as many methods as possible to give you a well-rounded approach to routing. In view, your choice of routing is called the loader/loader strategy, and there are five of them:
+
+-   `manual`
+-   `simple`
+-   `filesystem`
+-   `patterns`
+-   `custom`
+
+## Manually Routing
+
+If you're used to Python libraries like [Flask](https://flask.palletsprojects.com/en/3.0.x/) or [FastAPI](https://fastapi.tiangolo.com), then you're probably already familiar with manual routing. Manual routing is considered to be letting the user do all of the loading themself, and not do any automatic import or load mechanics. There are two ways to do manual routing, directly calling on your `App` being the most robust. Here's an example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+def index():
+    return "Hello, view.py!"
+
+app.run()
+```
+</Codeblock>
+
+This type of function is called a **direct router**, and is what's recommended for small view.py projects. However, if you're more accustomed to JavaScript libraries, using the **standard routers** may be a good fit. When using manual routing, a standard router must be registered via a call to `App.load`.
+
+<Admonition level="question" title="What should I annotate as the return value?">
+view.py is aimed at people who love type hints, so what type should a route return? Well, all router functions will automatically tell the type checker what a route should return (specifically, [ViewResult](https://view.zintensity.dev/reference/types/#view.typing.ViewResult)), but if you *really* want to specify the return value, you have two options:
+
+- Use something route-specific, so something like `tuple[str, int]`, or just `str`
+- More robust, using `ViewResult`, as mentioned above.
+
+The recommended way is to annotate the return value as `ViewResult`, but again, this is already known by the type checker:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, ViewResult
+
+@app.get("/")
+def index() -> ViewResult:
+    return "Hello, view.py!"
+
+app.run()
+```
+</Codeblock>
+</Admonition>
+
+### Standard and Direct Routers
+
+Standard routers and direct routers have **the exact same** API (i.e. they are called the same way). The only difference is that direct routers automatically register a route onto the app, while standard routes do not. Direct routers tend to be used in small projects under manual loading, but standard routers are used in larger applications with one of the other loaders.
+
+Here are all the routers (standard on left, direct on right):
+
+-   `view.get` and `App.get`
+-   `view.post` and `App.post`
+-   `view.put` and `App.put`
+-   `view.patch` and `App.patch`
+-   `view.delete` and `App.delete`
+-   `view.options` and `App.options`
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, get
+
+app = new_app()
+
+@get("/")
+def index():
+    return "Hello, view.py!"
+
+app.load([get])
+app.run()
+```
+</Codeblock>
+
+This method may be a bit more versatile if you plan on writing a larger project using manual routing, as you can import your routes from other files, but if that's the case it's recommended that you use one of the other loaders.
+
+<Admonition level="info">
+Use the direct variation if the `App` is already available, and use the standard version otherwise. It's discouraged to call `get_app()` and then use direct routing.
+</Admonition>
+
+### Methodless Routing
+
+So far, only routers that allow a single method are allowed. If you're familiar with the [Flask](https://flask.palletsprojects.com) framework, you've likely tried the `route` method that lets any a route be accessed with any method. View supports the same thing, via the `route` router function, and the `App.route` direct variation.
+
+For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, route
+
+app = new_app()
+
+@route("/")
+async def index():
+    return "This can be accessed with any method!"
+
+app.load([index])
+app.run()
+```
+</Codeblock>
+
+You can specify certain methods via the `methods` parameter:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.route("/", methods=("GET", "POST"))  # using the direct variation
+async def index():
+    return "This can be accessed with only GET and POST"
+
+app.run()
+```
+</Codeblock>
+
+## Simple Routing
+
+Simple routing is similar to manual routing, but you tend to not use direct routers and don't have any call to `load()`. In your routes directory (`routes/` by default, `loader_path` setting), your routes will be held in any number of files. Simple loading is recursive, so you may also use folders. View will automatically extract any route objects created in these files.
+
+<Codeblock fileName="routes/foo.py">
+```py
+from view import get
+
+@get("/foo")
+def index():
+    return "foo"
+
+@get("/bar")
+def bar():
+    return "bar"
+```
+</Codeblock>
+
+`/foo` and `/bar` will be loaded properly, no extra call to `App.load` is required. In fact, you don't even have to import these in your app file. **This is the recommended loader for larger view.py projects.**
+
+## URL Pattern Routing
+
+If you have ever used [Django](https://djangoproject.com), you already know how URL pattern routing works. Instead of defining your routes all over the place, all routes are defined and imported into one central file. Traditionally, this file is called `urls.py`, but you can play around with the name via the `loader_path` configuration option.
+
+Pattern loading looks like this in view.py:
+
+<Codeblock fileName="something.py">
+```py
+def my_route(hello: str):
+    return f"{hello}, world!"
+```
+</Codeblock>
+
+<Codeblock fileName="urls.py">
+```py
+from view import path, query
+from something import my_route
+
+patterns = (
+    path("/", my_route, query("hello")),  # this is a route input, you'll learn about this later
+    path("/another/thing", "/this/can/be/a/path/to/file.py")
+)
+```
+</Codeblock>
+
+In the above example, we defined two routes via exporting a `tuple` of `Route` objects (generated by `path`). The name `patterns` was used as the variable name, but it may be any of the following:
+
+-   `PATTERNS`
+-   `patterns`
+-   `URLPATTERNS`
+-   `URL_PATTERNS`
+-   `urlpatterns`
+-   `url_patterns`
+
+<Admonition level="info">
+Traditionally, Python constants are denoted via using the `SCREAMING_SNAKE_CASE` naming convention.
+To follow Python convention, use `PATTERNS` or `URL_PATTERNS` when using the `patterns` loader.
+</Admonition>
+
+## Filesystem Routing
+
+Finally, if you're familiar with JavaScript frameworks like [NextJS](https://nextjs.org), you're likely already familiar with filesystem routing. If that's the case, this may be the proper loader for you. The filesystem loader works by recursively searching your `loader_path` (again, `routes/` by default) and assigning each found file to a route. You do not have to pass an argument for the path when using filesystem routing.
+
+Filesystem routing comes with a few quirks.
+
+-   There should only be one route per file.
+-   The upper directory structure is ignored, so `/home/user/app/routes/foo.py`, the assigned route would be `/foo`.
+-   If a file is named `index.py`, the route is not named `index`, but instead the parent (e.g. `foo/hello/index.py` would be assigned to `foo/hello`).
+-   If a file is prefixed with `_` (e.g. `_hello.py`), then it will be skipped entirely and not loaded. Files like this should be used for utilities and such.
+
+Here's an example of this in action:
+
+<Codeblock fileName="routes/_util.py">
+```py
+# This file is prefixed with _, so it will not be loaded as a route
+
+def do_something():
+    ...
+```
+</Codeblock>
+
+<Codeblock fileName="routes/index.py">
+```py
+# routes/index.py
+from view import get
+from _util import do_something
+
+@get()
+def index():
+    do_something()
+    return "Hello, view.py!"
+```
+</Codeblock>
+
+## Custom Routing
+
+The `custom` loader is, you guessed it, a user-defined loader. To start, decorate a function with `custom_loader`:
+
+<Codeblock fileName="app.py">
+```py
+from pathlib import Path
+from typing import Iterable
+from view import Route, new_app
+
+app = new_app()
+
+@app.custom_loader
+def my_loader(app: App, path: Path) -> Iterable[Route]:
+    return [...]
+
+app.run()
+```
+</Codeblock>
+
+As shown above, there are two parameters to the `custom_loader` callback:
+
+- The `App` instance.
+- The `Path` set by the `loader_path` config setting.
+
+The `custom_loader` callback is expected to return a list (or any iterable) of collected routes.
+
+<Admonition level="info" title="Don't reimplement router functions!">
+You might be confused about the `Route` constructor. That's because it's undocumented, and still technically a private API (meaning it can change at any time, for no reason). Don't try and instantiate a route yourself! Instead, let router functions do it (e.g. `get` or `query`), and collect the functions (or really, `Route` instances.)
+</Admonition>
+
+For example, if you wanted to implement a loader that loaded routes from all files named `foo.py` from the `path`:
+
+<Codeblock fileName="app.py">
+```py
+from pathlib import Path
+from typing import Iterable
+from view import Route, new_app, get
+import runpy
+
+app = new_app()
+
+@app.custom_loader
+def my_loader(app: App, path: Path) -> Iterable[Route]:
+    routes: list[Route] = []
+
+    for i in path.iterdir():
+        if str(i) != "foo.py":
+            continue
+
+        globls = runpy.run_path(i.absolute())
+        for name, value in globls.items():
+            if isinstance(value, Route):
+                routes.append(name)
+
+    return routes
+
+app.run()
+```
+</Codeblock>
+
+## Review
+
+In view, a loader is defined as the method of routing used. There are three loaders in view.py: `manual`, `simple`, and `filesystem`.
+
+-   `manual` is good for small projects that are similar to Python libraries like [Flask](https://flask.palletsprojects.com/en/3.0.x/) or [FastAPI](https://fastapi.tiangolo.com).
+-   `simple` routing is the recommended loader for full-scale view.py applications.
+-   `filesystem` routing is similar to how JavaScript frameworks like [NextJS](https://nextjs.org) handle routing.
+-   `patterns` is similar to [Django](https://djangoproject.com/) routing.
+-   `custom` let's you decide - you can make your own loader and figure it out as you please.
diff --git a/docs/src/pages/docs/building-projects/templating.mdx b/docs/src/pages/docs/building-projects/templating.mdx
new file mode 100644
index 0000000..c42ec28
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/templating.mdx
@@ -0,0 +1,210 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# HTML Templating
+
+## What is templating?
+
+If you're building any sort of website, you likely don't want to write HTML from Python strings. Instead, you would rather just render HTML files and keep your Python code seperate.
+
+However, this has a drawback: **you can't put variables into your HTML.** Nearly all Python web frameworks use templating as a solution.
+
+Templating is the use of a template engine to put Python code in your HTML. For a more in-depth explanation, see the [Python Wiki](https://wiki.python.org/moin/Templating).
+
+## Templating API
+
+In View, the main template API entry point is the `template` function. Because this function performs I/O, it is asynchronous.
+
+The only required argument to `template` is the name or path of the template to be used. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, template
+
+app = new_app()
+
+@app.get("/")
+async def index():
+    return await template("index")  # this refers to index.html
+
+@app.get("/other")
+async def other():
+    return await template("index.html")  # works the same way
+
+app.run()
+```
+</Codeblock>
+
+The most notable difference about view.py's templating API is that parameters are automatically included from your scope (i.e. you don't have to pass them into the call to `template`). If you're against this behavior, you may disable it in the configuration via the `globals` and `locals` settings.
+
+You can override the template engine and settings via the `engine` and `directory` parameters. For example, if the engine was `view`, the below would use `mako`:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, template
+
+app = new_app()
+
+@app.get('/')
+async def index():
+    return await template("index", engine="mako")
+
+app.run()
+```
+</Codeblock>
+
+There's also a direct variation of `template` on `App`.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+async def index():
+    return await app.template("index")
+
+app.run()
+```
+</Codeblock>
+
+The following template engines are supported:
+
+-   View's built-in engine
+-   [Jinja](https://jinja.palletsprojects.com/en/3.1.x/)
+-   [Django Templates](https://docs.djangoproject.com/en/5.0/intro/tutorial03/)
+-   [Mako](https://www.makotemplates.org/)
+-   [Chameleon](https://chameleon.readthedocs.io/en/latest/)
+
+## The View Engine
+
+View has it's own built in template engine that is used by default. It's based around the usage of a `<view>` tag, which is more limited, yet pretty to look at.
+
+A `<view>` element can have any of the following attributes:
+
+-   `ref`: Can be any Python expression (including variable references).
+-   `template`: Loads another template in place.
+-   `if`: Shows the element if the expression is truthy.
+-   `elif`: Shows the element if the expression is truthy and if the previous `if` or `elif` was falsy.
+-   `else`: Shows the element if all the previous `if` and `elif`'s were falsy.
+-   `iter`: May be any iterable expression. An `item` attribute must be present if this attribute is set.
+-   `item`: Specifies the name for the item in each iteration. Always present when `iter` is set.
+
+### Examples
+
+`ref` can be used to take variables, but may also be used to display any Python expression. For example, if you had defined `hello = "world"`:
+
+<Codeblock fileName="templates/index.html">
+```html
+<p>Hello, <view ref="hello" /></p>
+<p>The length of hello is <view ref="len(hello)" /></p>
+```
+</Codeblock>
+
+If you had declared `my_list = [1, 2, 3]`, you could iterate through it like so:
+
+<Codeblock fileName="templates/index.html">
+```html
+<view iter="my_list" item="i">
+    <view ref="i" />
+</view>
+```
+</Codeblock>
+
+The above would result in `123`
+
+`if`, `elif`, and `else` are only shown if their cases are met. So, for example:
+
+<Codeblock fileName="templates/index.html">
+```html
+<view if="user.type == 'admin'">
+    <view template="admin_panel" />
+</view>
+<view elif="user.type == 'moderator'">
+    <view template="mod_panel" />
+</view>
+<view else>
+    <p>You must be an admin to use the admin panel!</p>
+</view>
+```
+</Codeblock>
+
+## Using Other Engines
+
+If you would like to use an unsupported engine (or use extra features of a supported engine), you can do one of two things:
+
+-   Make a feature request on [GitHub](https://github.com/ZeroIntensity/view.py) requesting for support.
+-   Manually use it's API to return a response from a route.
+
+For example, if you wanted to customize [Jinja](https://jinja.palletsprojects.com/en/3.1.x/), you shouldn't use View's `template`, but instead just use it manually:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from jinja2 import Environment
+
+app = new_app()
+env = Environment()
+
+@app.get('/')
+async def index():
+    return env.get_template("mytemplate.html").render()
+
+app.run()
+```
+</Codeblock>
+
+However, if you would like to access the engine instance (such as Jinja's `Environment`), you can get it from `app.templaters`, or set the value yourself. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+from jinja2 import Environment
+
+app = new_app()
+env = Environment()
+app.templaters["jinja"] = env
+
+@app.get('/')
+async def index():
+    return await app.template("index.html")
+
+app.run()
+```
+</Codeblock>
+
+## Markdown Rendering
+
+Many find writing raw HTML to be a hassle in many cases. For this, view.py provides the `markdown` function, which can turn markdown content into HTML, similar to how [MkDocs](https://mkdocs.org) does:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, markdown
+
+app = new_app()
+
+@app.get("/blog")
+async def index():
+    return await markdown("blog.md")
+
+app.run()
+```
+</Codeblock>
+
+## Review
+
+Template engines are used to mix your Python code and HTML. You can use View's `template` or (`App.template`, if the `App` is available already) function to render a template with one of the supported engines, which are:
+
+-   view.py's built-in engine
+-   [Jinja](https://jinja.palletsprojects.com/en/3.1.x/)
+-   [Django Templates](https://docs.djangoproject.com/en/5.0/intro/tutorial03/)
+-   [Mako](https://www.makotemplates.org/)
+-   [Chameleon](https://chameleon.readthedocs.io/en/latest/)
+
+If you would like to use an unsupported engine, you can make a feature request on [GitHub](https://github.com/ZeroIntensity/view.py/issues), or use it's API manually.
diff --git a/docs/src/pages/docs/building-projects/websockets.mdx b/docs/src/pages/docs/building-projects/websockets.mdx
new file mode 100644
index 0000000..42da9d5
--- /dev/null
+++ b/docs/src/pages/docs/building-projects/websockets.mdx
@@ -0,0 +1,200 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# WebSockets
+
+<Admonition level="question" title="What is a WebSocket?">
+In web development, a WebSocket is a two-way communication channel used on websites. Read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).
+</Admonition>
+
+## WebSocket Routers
+
+Like other routers, the `websocket` router has both a standard and direct variation, with the same API. Unlike other routers, a WebSocket comes with one input out of the box, that being the actual WebSocket object.
+
+<Admonition level="warning">
+You can add `query` inputs and path parameters to a `websocket` route, but not a `body` input. This isn't a limitation with view.py, but it's not supported by the protocol itself.
+</Admonition>
+
+A WebSocket route does also not care what you return. In fact, a type checker expects that routes decorated with `websocket` return `None`.
+
+For example, a WebSocket that does nothing is as follows:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    ...
+
+app.run()
+```
+</Codeblock>
+
+<Admonition level="warning">
+If you installed `uvicorn` manually, make sure to install `websockets` or `wsproto` if you plan on using WebSockets:
+
+<Codeblock fileName="bash">
+```
+$ pip install websockets
+```
+</Codeblock>
+</Admonition>
+
+## Handshakes
+
+If you used the above code, it wouldn't actually work as a WebSocket from the client, since we don't accept the connection.
+
+Like other libraries, view.py does not automatically decide the lifecycle of your WebSocket handshake, meaning you have to manually `accept` and `close` it. For example, adding on to our above example that does nothing:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    await ws.accept()
+    await ws.close()
+
+app.run()
+```
+</Codeblock>
+
+Now, we could actually use a WebSocket client to access this route. However, you should use a context manager instead of manually calling lifecycle methods:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    async with ws:
+        ...
+
+app.run()
+```
+</Codeblock>
+
+<Admonition level="info" title="Client Disconnect">
+A `WebSocketHandshakeError` is raised if the client disconnects before the server calls `close`.
+</Admonition>
+
+## Sending and Receiving
+
+Now, let's make our WebSocket do something! We can use `send` and `receive` to send and receive data.
+
+The best way to understand these methods is visually, so a simple chat application could look like:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+import aiofiles  # For asynchronous input()
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    await ws.accept()  # We shouldn't ever need to exit, so no need for a context manager
+    while True:
+        await ws.send(await aiofiles.stdin.readline())
+        print("Them:", await ws.receive())
+
+app.run()
+```
+</Codeblock>
+
+### Receiving Types
+
+Using view.py's type-casting system, you can specify a type to receive from the client by passing `tp` to `receive`. The supported types are:
+
+-   `str`
+-   `int`
+-   `bool`
+-   `bytes`
+-   `dict`
+
+For example, if you wanted to receive JSON data:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    async with ws:
+        json = await ws.receive(tp=dict)
+
+app.run()
+```
+</Codeblock>
+
+## Message Pairs
+
+In many cases, such as with our chat app from above, we want a 1:1 ratio of messages from the server to the client. view.py gives you the `pair` method, to remove some boilerplate. It simply sends a message, then returns a received message. For example, with our chat app from above:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+import aiofiles
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    await ws.accept()
+    while True:
+        print("Them:", await ws.pair(await aiofiles.stdin.readline()))
+
+app.run()
+```
+</Codeblock>
+
+As stated above, `pair` sends the message before receiving, but you can reverse this by passing `recv_first=True`:
+
+<Codeblock fileName="app.py">
+```py
+print("Them:", await ws.pair(await aiofiles.stdin.readline(), recv_first=True))
+```
+</Codeblock>
+
+This would receive from the client, _then_ send a message, and then return that received message.
+
+## Expecting Messages
+
+In some cases, you might just want the client to send some data to ensure compliance with a protocol, or perhaps for a [ping-pong](https://en.wikipedia.org/wiki/Ping-pong_scheme). You can use the `expect` method, which ensures that the client send some data, and then discards the message. For example:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app, WebSocket
+
+app = new_app()
+
+@app.websocket("/")
+async def websocket_route(ws: WebSocket):
+    async with ws:
+        await ws.expect("MYPROTOCOL V1.1")
+        await ws.send("ACK")
+        # ...
+
+app.run()
+```
+</Codeblock>
+
+## Review
+
+WebSocket routes always have at least one route input, that being a `WebSocket` object representing the connection. view.py does not handle the connection lifetime, so calling `accept`, `close`, or using the context manager is up to the user.
+
+Data can be sent and received via `send` and `receive` (who would have guessed!), and certain types can be expected from the client via the `tp` parameter. You can also use the `pair` method to eliminate some boilerplate when it comes to 1:1 message correspondence, as well as use the `expect` method to expect that the client sends some data.
diff --git a/docs/src/pages/docs/getting-started/configuration.mdx b/docs/src/pages/docs/getting-started/configuration.mdx
new file mode 100644
index 0000000..58f33ed
--- /dev/null
+++ b/docs/src/pages/docs/getting-started/configuration.mdx
@@ -0,0 +1,183 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Configuration
+
+## Introduction
+
+Before you can make any projects with view.py, you should learn about how it handles configuration. Configuration is handled by the [configzen](https://github.com/bswck/configzen) library under the hood, so most questions about configuration will be answered there.
+
+## The Config File
+
+When creating your app, view will search for one of the following configuration files:
+
+-   `view.toml`
+-   `view.json`
+-   `view.ini`
+-   `view_config.py`
+
+Note that while all of these are different formats, they can all evaluate to the same thing internally. If you have any questions on these semantics, once again see [configzen](https://github.com/bswck/configzen).
+
+## Programatically
+
+Many Python users aren't fond of the configuration file strategy, and that's okay. View supports editing the config at runtime just fine through the `config` property. The `config` property stores a `Config` object, which holds more subcategories.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+app.config.foo.bar = "..."
+```
+</Codeblock>
+
+Configurations are loaded at runtime by the `load_config` function. If you would like to use View's configuration file without creating an `App`, you may use it like so:
+
+<Codeblock fileName="app.py">
+```py
+from view import load_config
+
+config = load_config()
+```
+</Codeblock>
+
+<Admonition level="note">
+    While it's possible to use `load_config` directly, it's not at all recommended. Always prefer `new_app` over trying to manually instantiate the `App` object.
+</Admonition>
+
+## Settings
+
+View has several different configuration settings. For documentation purposes, values will be talked about in terms of Python (i.e. `null` values will be regarded as `None`).
+
+At the top level, there's one real setting: `dev`.
+
+`dev` is `True` by default, and is what tells view.py whether you're running in a production server setting or just running on your local machine.
+
+### Environment Variables
+
+If you would like to set a configuration setting via an [environment variable](https://en.wikipedia.org/wiki/Environment_variable), you must account for the setting's environment prefix.
+
+All environment prefixes look like `view_<subcategory>_`. For example, the `loader` setting is under the `app` section, so to set `loader` you would use the following command:
+
+<Codeblock fileName="bash">
+```bash
+$ export view_app_loader=filesystem
+```
+</Codeblock>
+
+Environment variables can also be set via the `env` config setting, or by adding a `.env` file to the project:
+
+<Codeblock fileName="view.toml">
+```toml
+[env]
+TEST = "hello"
+```
+</Codeblock>
+
+You can access environment variables via the `view.env` utility:
+
+<Codeblock fileName="app.py">
+```py
+from view import env
+
+test = env("TEST", tp=int)
+# test will be an integer. if environment variable "TEST" does not  exist, an exception is thrown.
+# if environment variable "TEST" is not an integer, an exception is thrown.
+```
+</Codeblock>
+
+## App Settings
+
+**Environment Prefix: `view_app_`**
+
+| Key           | Description                                                                                                                    | Default      |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------ |
+| `loader`      | This is the strategy that will be used to load routes. Can be `manual`, `simple`, or `filesystem`.                             | `manual`     |
+| `app_path`    | A string defining the location of the app, as well as the variable name. Should be in the format of `file_path:variable_name`. | `app.py:app` |
+| `uvloop`      | Whether or not to use `uvloop` as a means of event loop. Can be `decide` or a `bool` value.                                    | `decide`     |
+| `loader_path` | When the loader is `simple` or `filesystem`, this is the path that it searches for routes.                                     | `routes/`    |
+
+Example with TOML:
+
+```toml
+[app]
+loader = "filesystem"
+loader_path = "./app"
+```
+
+## Server Settings
+
+**Environment Prefix:** `view_server_`
+
+| Key          | Description                                                                                                          | Default   |
+| ------------ | -------------------------------------------------------------------------------------------------------------------- | --------- |
+| `host`       | IPv4 address specifying what address to bind the server to. `0.0.0.0` by default.                                    | `0.0.0.0` |
+| `port`       | Integer defining what port to bind the server to.                                                                    | `5000`    |
+| `backend`    | ASGI backend to use. Can be `uvicorn`, `daphne`, or `hypercorn`.                                                     | `uvicorn` |
+| `extra_args` | Dictionary containing extra parameters for the ASGI backend. This parameter is specific to the backend and not View. | `{}`      |
+
+Example with TOML:
+
+```toml
+[server]
+host = "localhost"
+port = 8080
+```
+
+## Log Settings
+
+**Environment Prefix:** `view_log_`
+
+| Key                 | Description                                                                                                                                                                          | Default |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
+| `level`             | Log level. May be `debug`, `info`, `warning`, `error`, `critical`, or an `int`. This is based on Python's built-in [logging module](https://docs.python.org/3/library/logging.html). | `info`  |
+| `server_logger`     | This is a `bool` determining whether the ASGI backend's logger should be displayed.                                                                                                  | `False` |
+| `fancy`             | Whether to use View's fancy output mode.                                                                                                                                             | `True`  |
+| `pretty_tracebacks` | Whether to use [Rich Exceptions](https://rich.readthedocs.io/en/stable/logging.html?highlight=exceptions#handle-exceptions).                                                         | `True`  |
+| `startup_message`   | Whether to show the view.py welcome message on server startup.                                                                                                                       | `True`  |
+
+## User Logging Settings
+
+_Environment Prefix:_ `view_user_log_`
+
+-   `urgency`: The log level for user logging. `info` by default.
+-   `log_file`: The target file for outputting log messages. `None` by default.
+-   `show_time`: Whether to show the time in each message. `True` by default.
+-   `show_caller`: Whether to show the caller function in each message. `True` by default.
+-   `show_color`: Whether to enable colorization for messages. `True` by default.
+-   `show_urgency`: Whether to show the urgency for messages. `True` by default.
+-   `file_write`: The preference for writing to an output file, if set. May be `both`, to write to both the terminal and the output file, `only`, to write to just the output file, or `never`, to not write anything.
+-   `strftime`: The time format used if `show_time` is set to `True`. `%H:%M:%S` by default.
+
+Example with TOML:
+
+```toml
+[log]
+level = "warning"
+fancy = false
+
+[log.user]
+log_file = "app.log"
+```
+
+## Template Settings
+
+_Environment Prefix:_ `view_templates_`
+
+-   `directory`: The path to search for templates. `./templates` by default.
+-   `locals`: Whether to include local variables in the rendering parameters (i.e. local variables can be used inside templates). `True` by default
+-   `globals`: The same as `locals`, but for global variables instead. `True` by default.
+-   `engine`: The default template engine to use for rendering. Can be `view`, `jinja`, `django`, `mako`, or `chameleon`. `view` by default.
+
+Example with TOML:
+
+```toml
+[templates]
+directory = "./pages"
+engine = "jinja"
+```
diff --git a/docs/src/pages/docs/getting-started/creating-a-project.mdx b/docs/src/pages/docs/getting-started/creating-a-project.mdx
new file mode 100644
index 0000000..93b29b4
--- /dev/null
+++ b/docs/src/pages/docs/getting-started/creating-a-project.mdx
@@ -0,0 +1,93 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Creating a Project
+
+## Automatic
+
+The View CLI supports automatically creating a project via the `view init` command.
+
+<Codeblock fileName="bash">
+```bash
+$ view init
+```
+</Codeblock>
+
+However, you probably don't want to create an entire new virtual environment (assuming you're using one, at least) just for running `view init`, since it will generate a second environment for your project. The easiest solution is to use `pipx`:
+
+<Codeblock fileName="bash">
+```bash
+$ pipx run view-py init
+```
+</Codeblock>
+
+<Admonition title="Why view-py and not view.py?" level="question">
+This is out of view.py's control - pipx does not support `.` in a project name, so we have to use `view-py` instead of `view.py`.
+</Admonition>
+
+## Manually
+
+view.py doesn't actually need any big project structure. In fact, you can run an app in just a single Python file, but larger structures like this might be more convenient for big projects. The only real requirement for something to be a view app is that it calls `new_app`, but again, more on that later.
+
+Some "hello world" code for manually starting a view project would look like this:
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+
+@app.get("/")
+def index():
+    return "..."
+
+app.run()
+```
+</Codeblock>
+
+## Structure
+
+First, in any view project, you need a file to contain your app. By default, view expects it to be in `app.py` under a variable called `app`. Again, you can change this via the `app_path` setting. You're also going to want an `app.run()` (assuming you named your `App` instance `app`), but more on that later.
+
+<Codeblock fileName="app.py">
+```py
+from view import new_app
+
+app = new_app()
+app.run()
+```
+</Codeblock>
+
+Generally, you're going to want one of the configuration files talked about earlier, but if you're against configuration files that's OK, view.py will work just fine without it. If you choose to use something other than manual routing, you want a `routes` directory (unless you changed the `loader_path` setting).
+
+<Codeblock fileName="view.toml">
+```toml
+dev = true
+
+[app]
+loader_path = "./my_custom_loader_path"
+```
+</Codeblock>
+
+For mobility purposes, you may want to add a `pyproject.toml` that contains the dependencies for your project, in case you need to run your project on a different system.
+
+<Codeblock fileName="pyproject.toml">
+```toml
+[build-system]
+requires = ["setuptools"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "your_view_app"
+requires-python = ">=3.8"
+authors = [
+  { name = "Your Name", email = "your@email.com" },
+]
+dependencies = ["view.py"]
+```
+</Codeblock>
\ No newline at end of file
diff --git a/docs/src/pages/docs/getting-started/installation.mdx b/docs/src/pages/docs/getting-started/installation.mdx
new file mode 100644
index 0000000..827a44e
--- /dev/null
+++ b/docs/src/pages/docs/getting-started/installation.mdx
@@ -0,0 +1,72 @@
+import MdxLayout from "../../../components/mdx-layout";
+import Codeblock from "../../../components/codeblock";
+import Admonition from "../../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Installation
+
+## System Requirements
+
+view.py requires [CPython](https://python.org/downloads/) 3.8 or above.
+
+<Admonition level="question" title="What is CPython?">
+    CPython is the reference/official implementation of Python. If you downloaded Python through [python.org](https://python.org) or some sort of system package manager (e.g. `apt`, `pacman`, `brew`), it's probably CPython.
+</Admonition>
+
+view.py does **not** officially support PyPy, nor any other implementation of Python. If you're looking for speed, rely on view.py's C extension to do the heavy lifting!
+
+## Installing with Pipx (Recommended)
+
+[pipx](https://pipx.pypa.io/stable/) can install CLIs into isolated environments. view.py recommends using `pipx` for installation, and then using `view init` to initialize a virtual environment in projects. For example:
+
+<Codeblock fileName="bash">
+```bash
+$ pipx install view.py
+... pipx output
+$ view init
+```
+</Codeblock>
+
+## Installing via Pip
+
+<Codeblock fileName="bash">
+```bash
+$ pip install view.py
+```
+</Codeblock>
+
+
+## Development Version
+
+<Codeblock fileName="bash">
+```bash
+$ pip install git+https://github.com/ZeroIntensity/view.py
+```
+</Codeblock>
+
+## Finalizing
+
+To ensure you've installed view.py correctly, run the `view` command:
+
+<Codeblock fileName="bash">
+```bash
+$ view
+```
+</Codeblock>
+
+<Admonition level="danger" title="Linux Problem">
+    On Linux, `view` is already a command! Read about it [here](https://www.ibm.com/docs/zh/aix/7.2?topic=v-view-command), but in short, it opens `vi` in read only mode. You can either shadow this command with view.py's CLI, or use the `view-admin` command instead, which is an alias. This documentation will assume you use `view` instead of `view-admin`, but note that they do the exact same thing.
+</Admonition>
+
+If this doesn't work properly, try executing via Python:
+
+<Codeblock fileName="bash">
+```bash
+$ python3 -m view
+# OR, view-admin, as shown above
+$ python3 -m view-admin
+```
+</Codeblock>
diff --git a/docs/src/pages/docs/index.mdx b/docs/src/pages/docs/index.mdx
new file mode 100644
index 0000000..0dd6223
--- /dev/null
+++ b/docs/src/pages/docs/index.mdx
@@ -0,0 +1,44 @@
+import MdxLayout from "../../components/mdx-layout";
+import Codeblock from "../../components/codeblock";
+import Admonition from "../../components/admonition"
+
+export default function MDXPage({ children }) {
+    return <MdxLayout>{children}</MdxLayout>;
+}
+
+# Introduction
+
+Welcome to view.py's documentation!
+
+-   [Source](https://github.com/ZeroIntensity/view.py)
+-   [PyPI](https://pypi.org/project/view.py)
+-   [Discord](https://discord.gg/tZAfuWAbm2)
+
+Here, you'll learn all about view.py and how to use it.
+
+## Quickstart
+
+<Codeblock fileName="bash">
+```
+$ pipx run view-py init
+# OR
+$ python3 -m pip install view.py
+$ python3 -m view init
+```
+</Codeblock>
+
+## Batteries Detachability
+
+So, what does "batteries-detachable" actually mean? It means that we give you everything out of the box, but don't make you use it - instead, we actively support other libraries. **This is what makes view.py unique among other frameworks.**
+
+For example, with our approach to [template engines](/docs/building-projects/templating). We've developed our own flavor of template engine, but include native support for lots of others, including Jinja and Django's internal template engine (which we used some magic to access).
+
+Basically, if you don't want to relearn anything, you don't really have to; you can just keep using what you have been, straight inside of view.py
+
+## This Documentation
+
+Throughout this documentation, it's assumed that you've read the previous pages, like a book. If you're really in a hurry, you can read the "review" section at the bottom of each page.
+
+## Support
+
+You can directly get support from the developers in the [view.py discord server](https://discord.gg/tZAfuWAbm2). Hope to see you there!
\ No newline at end of file
diff --git a/docs/reference/app.md b/docs/src/pages/docs/reference/app.md
similarity index 100%
rename from docs/reference/app.md
rename to docs/src/pages/docs/reference/app.md
diff --git a/docs/reference/build.md b/docs/src/pages/docs/reference/build.md
similarity index 100%
rename from docs/reference/build.md
rename to docs/src/pages/docs/reference/build.md
diff --git a/docs/reference/config.md b/docs/src/pages/docs/reference/config.md
similarity index 100%
rename from docs/reference/config.md
rename to docs/src/pages/docs/reference/config.md
diff --git a/docs/reference/exceptions.md b/docs/src/pages/docs/reference/exceptions.md
similarity index 100%
rename from docs/reference/exceptions.md
rename to docs/src/pages/docs/reference/exceptions.md
diff --git a/docs/reference/responses.md b/docs/src/pages/docs/reference/responses.md
similarity index 100%
rename from docs/reference/responses.md
rename to docs/src/pages/docs/reference/responses.md
diff --git a/docs/reference/routing.md b/docs/src/pages/docs/reference/routing.md
similarity index 100%
rename from docs/reference/routing.md
rename to docs/src/pages/docs/reference/routing.md
diff --git a/docs/reference/templates.md b/docs/src/pages/docs/reference/templates.md
similarity index 100%
rename from docs/reference/templates.md
rename to docs/src/pages/docs/reference/templates.md
diff --git a/docs/reference/types.md b/docs/src/pages/docs/reference/types.md
similarity index 100%
rename from docs/reference/types.md
rename to docs/src/pages/docs/reference/types.md
diff --git a/docs/reference/utils.md b/docs/src/pages/docs/reference/utils.md
similarity index 100%
rename from docs/reference/utils.md
rename to docs/src/pages/docs/reference/utils.md
diff --git a/docs/reference/websockets.md b/docs/src/pages/docs/reference/websockets.md
similarity index 100%
rename from docs/reference/websockets.md
rename to docs/src/pages/docs/reference/websockets.md
diff --git a/docs/src/pages/favicon.ico b/docs/src/pages/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/docs/src/pages/favicon.ico differ
diff --git a/docs/src/pages/globals.css b/docs/src/pages/globals.css
new file mode 100644
index 0000000..56fb03e
--- /dev/null
+++ b/docs/src/pages/globals.css
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    color-scheme: dark;
+}
+
+body {
+    @apply bg-black text-white;
+}
+
+a {
+    @apply text-zinc-500 hover:text-white transition-all;
+}
+
+h1 {
+    @apply text-4xl;
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
new file mode 100644
index 0000000..85f37a0
--- /dev/null
+++ b/docs/src/pages/index.tsx
@@ -0,0 +1,247 @@
+import { BackgroundBeams } from "@/components/background-beams";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { AuroraBackground } from "@/components/aurora-background";
+import { motion } from "framer-motion";
+import { StarsBackground } from "@/components/stars-background";
+import { Meteors } from "@/components/meteors";
+import FooterContent from "@/components/footer-content";
+
+export const Highlight = ({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) => {
+    return (
+        <span
+            className={cn(
+                `relative inline-block pb-1 px-1 rounded-lg bg-gradient-to-r dark:from-cyan-600 dark:to-blue-700 text-white`,
+                className
+            )}
+        >
+            {children}
+        </span>
+    );
+};
+
+function Card({
+    title,
+    children,
+    icon,
+}: {
+    title: string;
+    children: React.ReactNode;
+    icon: React.ReactNode;
+}) {
+    return (
+        <div className="w-full relative max-w-lg">
+            <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-zinc-700 to-zinc-900 transform scale-[0.80] rounded-full blur-3xl" />
+            <div className="relative shadow-xl px-4 py-8 overflow-hidden flex flex-col justify-between items-start rounded-2xl h-full w-full p-4 sm:p-10 bg-black bg-opacity-25 transition-all backdrop-blur-xl border-zinc-950 border border-opacity-25 space-y-3">
+                <StarsBackground className="opacity-50 -z-20" />
+
+                <div className="flex items-center space-x-1 text-white">
+                    {icon}
+                    <p className="text-lg sm:text-2xl text-black dark:text-neutral-200 font-semibold flex items-center justify-center">
+                        {title}
+                    </p>
+                </div>
+
+                <p className="text-base text-neutral-600 dark:text-neutral-400">
+                    {children}
+                </p>
+
+                {/* Meaty part - Meteor effect */}
+                <Meteors number={20} />
+            </div>
+        </div>
+    );
+}
+
+export default function Home() {
+    const [copied, setCopied] = React.useState(false);
+
+    return (
+        <>
+            <section className="h-[40rem] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
+                <div className="p-4 max-w-7xl mx-auto relative z-10 w-full pt-20 md:pt-0 flex items-center justify-center flex-col">
+                    <div className="flex space-x-2 items-center py-4">
+                        <p className="bg-sky-800 p-1 border rounded-full border-sky-800 font-medium text-sky-200">
+                            Alpha
+                        </p>
+                        <p className="text-zinc-500">
+                            view.py is currently in alpha!
+                        </p>
+                    </div>
+                    <h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
+                        The <Highlight>Batteries-Detachable</Highlight> Web
+                        Framework
+                    </h1>
+                    <div className="grid auto-rows-fr grid-cols-2 space-x-3 text-white py-4">
+                        <a
+                            href="/docs"
+                            className="flex items-center justify-center hover:scale-105 px-8 py-2 rounded-lg font-semibold bg-gradient-to-b from-sky-500 to-blue-600 text-white focus:ring-2 hover:shadow-xl transition duration-200 focus:outline-none"
+                        >
+                            <p>Documentation</p>
+                        </a>
+                        <a
+                            href="#what-is-it"
+                            className="hover:border-zinc-700 inline-flex h-12 animate-shimmer items-center justify-center rounded-lg border border-zinc-800 bg-[linear-gradient(110deg,#000103,45%,#282d33,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-zinc-400 transition-colors focus:outline-none"
+                        >
+                            What is it?
+                        </a>
+                    </div>
+                    <button
+                        className="text-zinc-700 text-sm font-light hover:text-zinc-600 transition-all group flex items-center justify-center space-x-2"
+                        onClick={async () => {
+                            await navigator.clipboard.writeText(
+                                "pipx run view-py init"
+                            );
+                            setCopied(true);
+                            setTimeout(() => {
+                                setCopied(false);
+                            }, 1000);
+                        }}
+                    >
+                        <code>~ pipx run view-py init</code>
+                        {copied ? (
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-4 opacity-0 group-hover:opacity-100 transition-all text-emerald-500"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+                                />
+                            </svg>
+                        ) : (
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                strokeWidth={1.5}
+                                stroke="currentColor"
+                                className="size-4 opacity-0 group-hover:opacity-100 transition-all"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
+                                />
+                            </svg>
+                        )}
+                    </button>
+                </div>
+
+                <BackgroundBeams />
+            </section>
+            <section className="flex items-center justify-center flex-col space-y-6">
+                <AuroraBackground className="flex flex-col justify-between">
+                    <motion.div
+                        initial={{ opacity: 0.0, y: 40 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        transition={{
+                            delay: 0.3,
+                            duration: 0.8,
+                            ease: "easeInOut",
+                        }}
+                        className="flex flex-col items-center justify-center px-4"
+                    >
+                        <div className="flex items-center justify-center flex-col space-y-1 py-12">
+                            <h2 className="text-2xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
+                                What&apos;s view.py?
+                            </h2>
+                            <p className="text-zinc-500 font-light text-xl">
+                                Not your ordinary web framework
+                            </p>
+                        </div>
+                        <div className="grid auto-rows-fr grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-12 px-12">
+                            <Card
+                                title="Removable Batteries"
+                                icon={
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        strokeWidth={1.5}
+                                        stroke="currentColor"
+                                        className="size-9"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            d="M21 10.5h.375c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125H21M4.5 10.5h6.75V15H4.5v-4.5ZM3.75 18h15A2.25 2.25 0 0 0 21 15.75v-6a2.25 2.25 0 0 0-2.25-2.25h-15A2.25 2.25 0 0 0 1.5 9.75v6A2.25 2.25 0 0 0 3.75 18Z"
+                                        />
+                                    </svg>
+                                }
+                            >
+                                We provide everything you need, right out of the
+                                box, while including native support your
+                                favorite third-party libraries. Don&apos;t want
+                                to relearn anything? No problem.
+                            </Card>
+                            <Card
+                                title="Written in C"
+                                icon={
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        strokeWidth={1.5}
+                                        stroke="currentColor"
+                                        className="size-8"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
+                                        />
+                                    </svg>
+                                }
+                            >
+                                Powered by our own{" "}
+                                <a href="https://github.com/ZeroIntensity/pyawaitable">
+                                    PyAwaitable
+                                </a>
+                                , view.py is the world&apos;s first web
+                                framework to implement ASGI in pure C, without
+                                the use of transpilers.
+                            </Card>
+                            <Card
+                                title="Developer Oriented"
+                                icon={
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        strokeWidth={1.5}
+                                        stroke="currentColor"
+                                        className="size-8"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+                                        />
+                                    </svg>
+                                }
+                            >
+                                view.py is written by developers, for
+                                developers, under the MIT license.
+                            </Card>
+                        </div>
+                    </motion.div>
+                    <footer className="border-t border-zinc-900 bg-black z-30 bg-opacity-65 backdrop-blur-2xl border-opacity-25 w-full">
+                        <FooterContent />
+                    </footer>
+                </AuroraBackground>
+            </section>
+        </>
+    );
+}
diff --git a/docs/src/utils/cn.ts b/docs/src/utils/cn.ts
new file mode 100644
index 0000000..d83ac21
--- /dev/null
+++ b/docs/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
new file mode 100644
index 0000000..6ad77b6
--- /dev/null
+++ b/docs/tailwind.config.ts
@@ -0,0 +1,151 @@
+import type { Config } from "tailwindcss";
+const defaultTheme = require("tailwindcss/defaultTheme");
+const svgToDataUri = require("mini-svg-data-uri");
+
+const colors = require("tailwindcss/colors");
+const {
+    default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
+const config: Config = {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic":
+                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+            animation: {
+                spotlight: "spotlight 2s ease .75s 1 forwards",
+                shimmer: "shimmer 2s linear infinite",
+                first: "moveVertical 30s ease infinite",
+                second: "moveInCircle 20s reverse infinite",
+                third: "moveInCircle 40s linear infinite",
+                fourth: "moveHorizontal 40s ease infinite",
+                fifth: "moveInCircle 20s ease infinite",
+                aurora: "aurora 60s linear infinite",
+                "meteor-effect": "meteor 5s linear infinite",
+            },
+
+            keyframes: {
+                spotlight: {
+                    "0%": {
+                        opacity: "0",
+                        transform: "translate(-72%, -62%) scale(0.5)",
+                    },
+                    "100%": {
+                        opacity: "1",
+                        transform: "translate(-50%,-40%) scale(1)",
+                    },
+                },
+                shimmer: {
+                    from: {
+                        backgroundPosition: "0 0",
+                    },
+                    to: {
+                        backgroundPosition: "-200% 0",
+                    },
+                },
+                moveHorizontal: {
+                    "0%": {
+                        transform: "translateX(-50%) translateY(-10%)",
+                    },
+                    "50%": {
+                        transform: "translateX(50%) translateY(10%)",
+                    },
+                    "100%": {
+                        transform: "translateX(-50%) translateY(-10%)",
+                    },
+                },
+                moveInCircle: {
+                    "0%": {
+                        transform: "rotate(0deg)",
+                    },
+                    "50%": {
+                        transform: "rotate(180deg)",
+                    },
+                    "100%": {
+                        transform: "rotate(360deg)",
+                    },
+                },
+                moveVertical: {
+                    "0%": {
+                        transform: "translateY(-50%)",
+                    },
+                    "50%": {
+                        transform: "translateY(50%)",
+                    },
+                    "100%": {
+                        transform: "translateY(-50%)",
+                    },
+                },
+                aurora: {
+                    from: {
+                        backgroundPosition: "50% 50%, 50% 50%",
+                    },
+                    to: {
+                        backgroundPosition: "350% 50%, 350% 50%",
+                    },
+                },
+                meteor: {
+                    "0%": {
+                        transform: "rotate(215deg) translateX(0)",
+                        opacity: "1",
+                    },
+                    "70%": { opacity: "1" },
+                    "100%": {
+                        transform: "rotate(215deg) translateX(-500px)",
+                        opacity: "0",
+                    },
+                },
+            },
+        },
+    },
+    darkMode: "class",
+    plugins: [
+        addVariablesForColors,
+        function ({ matchUtilities, theme }: any) {
+            matchUtilities(
+                {
+                    "bg-grid": (value: any) => ({
+                        backgroundImage: `url("${svgToDataUri(
+                            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+                        )}")`,
+                    }),
+                    "bg-grid-small": (value: any) => ({
+                        backgroundImage: `url("${svgToDataUri(
+                            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+                        )}")`,
+                    }),
+                    "bg-dot": (value: any) => ({
+                        backgroundImage: `url("${svgToDataUri(
+                            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
+                        )}")`,
+                    }),
+                },
+                {
+                    values: flattenColorPalette(theme("backgroundColor")),
+                    type: "color",
+                }
+            );
+        },
+    ],
+};
+
+function addVariablesForColors({ addBase, theme }: any) {
+    let allColors = flattenColorPalette(theme("colors"));
+    let newVars = Object.fromEntries(
+        Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+    );
+
+    addBase({
+        ":root": newVars,
+    });
+}
+
+export default config;
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000..7b28589
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/docs/building-projects/app_basics.md b/docs_md/building-projects/app_basics.md
similarity index 100%
rename from docs/building-projects/app_basics.md
rename to docs_md/building-projects/app_basics.md
diff --git a/docs/building-projects/build_steps.md b/docs_md/building-projects/build_steps.md
similarity index 100%
rename from docs/building-projects/build_steps.md
rename to docs_md/building-projects/build_steps.md
diff --git a/docs/building-projects/documenting.md b/docs_md/building-projects/documenting.md
similarity index 100%
rename from docs/building-projects/documenting.md
rename to docs_md/building-projects/documenting.md
diff --git a/docs/building-projects/parameters.md b/docs_md/building-projects/parameters.md
similarity index 100%
rename from docs/building-projects/parameters.md
rename to docs_md/building-projects/parameters.md
diff --git a/docs/building-projects/request_data.md b/docs_md/building-projects/request_data.md
similarity index 100%
rename from docs/building-projects/request_data.md
rename to docs_md/building-projects/request_data.md
diff --git a/docs/building-projects/responses.md b/docs_md/building-projects/responses.md
similarity index 100%
rename from docs/building-projects/responses.md
rename to docs_md/building-projects/responses.md
diff --git a/docs/building-projects/routing.md b/docs_md/building-projects/routing.md
similarity index 100%
rename from docs/building-projects/routing.md
rename to docs_md/building-projects/routing.md
diff --git a/docs/building-projects/templating.md b/docs_md/building-projects/templating.md
similarity index 100%
rename from docs/building-projects/templating.md
rename to docs_md/building-projects/templating.md
diff --git a/docs/building-projects/websockets.md b/docs_md/building-projects/websockets.md
similarity index 100%
rename from docs/building-projects/websockets.md
rename to docs_md/building-projects/websockets.md
diff --git a/docs/contributing.md b/docs_md/contributing.md
similarity index 100%
rename from docs/contributing.md
rename to docs_md/contributing.md
diff --git a/docs/getting-started/configuration.md b/docs_md/getting-started/configuration.md
similarity index 100%
rename from docs/getting-started/configuration.md
rename to docs_md/getting-started/configuration.md
diff --git a/docs/getting-started/creating_a_project.md b/docs_md/getting-started/creating_a_project.md
similarity index 100%
rename from docs/getting-started/creating_a_project.md
rename to docs_md/getting-started/creating_a_project.md
diff --git a/docs/getting-started/installation.md b/docs_md/getting-started/installation.md
similarity index 100%
rename from docs/getting-started/installation.md
rename to docs_md/getting-started/installation.md
diff --git a/docs/index.md b/docs_md/index.md
similarity index 100%
rename from docs/index.md
rename to docs_md/index.md
diff --git a/docs_md/reference/app.md b/docs_md/reference/app.md
new file mode 100644
index 0000000..3a616d2
--- /dev/null
+++ b/docs_md/reference/app.md
@@ -0,0 +1,3 @@
+# App Reference
+
+::: view.app
diff --git a/docs_md/reference/build.md b/docs_md/reference/build.md
new file mode 100644
index 0000000..527d3e6
--- /dev/null
+++ b/docs_md/reference/build.md
@@ -0,0 +1,3 @@
+# Build Reference
+
+::: view.build
diff --git a/docs_md/reference/config.md b/docs_md/reference/config.md
new file mode 100644
index 0000000..3769d15
--- /dev/null
+++ b/docs_md/reference/config.md
@@ -0,0 +1,3 @@
+# Configuration Reference
+
+::: view.config
diff --git a/docs_md/reference/exceptions.md b/docs_md/reference/exceptions.md
new file mode 100644
index 0000000..bbf90b8
--- /dev/null
+++ b/docs_md/reference/exceptions.md
@@ -0,0 +1,3 @@
+# Exceptions Reference
+
+::: view.exceptions
diff --git a/docs_md/reference/responses.md b/docs_md/reference/responses.md
new file mode 100644
index 0000000..d497070
--- /dev/null
+++ b/docs_md/reference/responses.md
@@ -0,0 +1,3 @@
+# Responses Reference
+
+::: view.response
diff --git a/docs_md/reference/routing.md b/docs_md/reference/routing.md
new file mode 100644
index 0000000..245ee8c
--- /dev/null
+++ b/docs_md/reference/routing.md
@@ -0,0 +1,8 @@
+# Routing Reference
+
+::: view.routing
+
+<!-- prettier-ignore -->
+::: view._loader
+
+::: view.patterns
diff --git a/docs_md/reference/templates.md b/docs_md/reference/templates.md
new file mode 100644
index 0000000..209591c
--- /dev/null
+++ b/docs_md/reference/templates.md
@@ -0,0 +1,3 @@
+# Templating Reference
+
+::: view.templates
diff --git a/docs_md/reference/types.md b/docs_md/reference/types.md
new file mode 100644
index 0000000..64e8d58
--- /dev/null
+++ b/docs_md/reference/types.md
@@ -0,0 +1,3 @@
+# Types Reference
+
+::: view.typing
diff --git a/docs_md/reference/utils.md b/docs_md/reference/utils.md
new file mode 100644
index 0000000..b802b63
--- /dev/null
+++ b/docs_md/reference/utils.md
@@ -0,0 +1,4 @@
+# Utilities Reference
+
+::: view.util
+::: view.typecodes
diff --git a/docs_md/reference/websockets.md b/docs_md/reference/websockets.md
new file mode 100644
index 0000000..4ebe02e
--- /dev/null
+++ b/docs_md/reference/websockets.md
@@ -0,0 +1,3 @@
+# WebSockets Reference
+
+::: view.ws