✨ feat: Add support for MDX (#104)

This is an attempt to create our docs and blogs website
2025-12-11 00:05:36 +02:00 · 2024-08-31 21:37:45 +03:00
parent a90fe4ba7a
commit 22d43411b1
72 changed files with 1103 additions and 542 deletions
--- a/apps/docs/.eslintignore
+++ b/apps/docs/.eslintignore
@@ -0,0 +1,38 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server
--- a/apps/docs/.eslintrc.cjs
+++ b/apps/docs/.eslintrc.cjs
@@ -0,0 +1,42 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-spread": "off",
+    "no-case-declarations": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "@typescript-eslint/no-unnecessary-condition": "warn",
+  },
+};
--- a/apps/docs/.eslintrc.js
+++ b/apps/docs/.eslintrc.js
@@ -1,9 +1,16 @@
-/** @type {import("eslint").Linter.Config} */
 module.exports = {
  root: true,
-  extends: ["@nestri/eslint-config/next.js"],
+  extends: [
+    "@nestri/eslint-config/qwik.js",
+  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
-    project: true,
-  },
-};
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  }
+};
--- a/apps/docs/.gitignore
+++ b/apps/docs/.gitignore
@@ -1,36 +1,44 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Build
+/dist
+/lib
+/lib-types
+/server

-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
+# Development
+node_modules
+*.local

-# testing
-/coverage
+# Cache
+.cache
+.mf
+.rollup.cache
+tsconfig.tsbuildinfo

-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

-# env files (can opt-in for commiting if needed)
-.env*
+# Editor
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets

-# vercel
-.vercel
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# Yarn
+.yarn/*
+!.yarn/releases
+
+# Cloudflare
+functions/**/*.js
--- a/apps/docs/.prettierignore
+++ b/apps/docs/.prettierignore
@@ -0,0 +1,37 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server
--- a/apps/docs/.vscode/launch.json
+++ b/apps/docs/.vscode/launch.json
@@ -0,0 +1,24 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Chrome",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:5173",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "name": "dev.debug",
+      "request": "launch",
+      "skipFiles": ["<node_internals>/**"],
+      "cwd": "${workspaceFolder}",
+      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+      "args": ["--mode", "ssr", "--force"]
+    }
+  ]
+}
--- a/apps/docs/.vscode/qwik-city.code-snippets
+++ b/apps/docs/.vscode/qwik-city.code-snippets
@@ -0,0 +1,36 @@
+{
+  "onRequest": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qonRequest",
+    "description": "onRequest function for a route index",
+    "body": [
+      "export const onRequest: RequestHandler = (request) => {",
+      "  $0",
+      "};",
+    ],
+  },
+  "loader$": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qloader$",
+    "description": "loader$()",
+    "body": ["export const $1 = routeLoader$(() => {", "  $0", "});"],
+  },
+  "action$": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qaction$",
+    "description": "action$()",
+    "body": ["export const $1 = routeAction$((data) => {", "  $0", "});"],
+  },
+  "Full Page": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qpage",
+    "description": "Simple page component",
+    "body": [
+      "import { component$ } from '@builder.io/qwik';",
+      "",
+      "export default component$(() => {",
+      "  $0",
+      "});",
+    ],
+  },
+}
--- a/apps/docs/.vscode/qwik.code-snippets
+++ b/apps/docs/.vscode/qwik.code-snippets
@@ -0,0 +1,78 @@
+{
+  "Qwik component (simple)": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qcomponent$",
+    "description": "Simple Qwik component",
+    "body": [
+      "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
+      "  return <${2:div}>$4</$2>",
+      "});",
+    ],
+  },
+  "Qwik component (props)": {
+    "scope": "typescriptreact",
+    "prefix": "qcomponent$ + props",
+    "description": "Qwik component w/ props",
+    "body": [
+      "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
+      "  $2",
+      "}",
+      "",
+      "export const $1 = component$<$1Props>((props) => {",
+      "  const ${2:count} = useSignal(0);",
+      "  return (",
+      "    <${3:div} on${4:Click}$={(ev) => {$5}}>",
+      "      $6",
+      "    </${3}>",
+      "  );",
+      "});",
+    ],
+  },
+  "Qwik signal": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseSignal",
+    "description": "useSignal() declaration",
+    "body": ["const ${1:foo} = useSignal($2);", "$0"],
+  },
+  "Qwik store": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseStore",
+    "description": "useStore() declaration",
+    "body": ["const ${1:state} = useStore({", "  $2", "});", "$0"],
+  },
+  "$ hook": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q$",
+    "description": "$() function hook",
+    "body": ["$(() => {", "  $0", "});", ""],
+  },
+  "useVisibleTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseVisibleTask",
+    "description": "useVisibleTask$() function hook",
+    "body": ["useVisibleTask$(({ track }) => {", "  $0", "});", ""],
+  },
+  "useTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseTask$",
+    "description": "useTask$() function hook",
+    "body": [
+      "useTask$(({ track }) => {",
+      "  track(() => $1);",
+      "  $0",
+      "});",
+      "",
+    ],
+  },
+  "useResource": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseResource$",
+    "description": "useResource$() declaration",
+    "body": [
+      "const $1 = useResource$(({ track, cleanup }) => {",
+      "  $0",
+      "});",
+      "",
+    ],
+  },
+}
--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -1,36 +1,112 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+# Qwik City App ⚡️

-## Getting Started
+- [Qwik Docs](https://qwik.dev/)
+- [Discord](https://qwik.dev/chat)
+- [Qwik GitHub](https://github.com/QwikDev/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)

-First, run the development server:
+---

-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+## Project Structure
+
+This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- `src/components`: Recommended directory for components.

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.

-## Learn More
+## Add Integrations and deployment

-To learn more about Next.js, take a look at the following resources:
+Use the `bun qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).

- [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.
+```shell
+bun qwik add # or `bun qwik add`
+```

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Development

-## Deploy on Vercel
+Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.

-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.
+```shell
+npm start # or `bun start`
+```

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server.
+
+```shell
+bun preview # or `bun preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.
+
+```shell
+bun build # or `bun build`
+```
+
+## Cloudflare Pages
+
+Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:
+
+```
+bun serve
+```
+
+Then visit [http://localhost:8787/](http://localhost:8787/)
+
+### Deployments
+
+[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).
+
+If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
+
+Within the projects "Settings" for "Build and deployments", the "Build command" should be `bun build`, and the "Build output directory" should be set to `dist`.
+
+### Function Invocation Routes
+
+Cloudflare Page's [function-invocation-routes config](https://developers.cloudflare.com/pages/platform/functions/routing/#functions-invocation-routes) can be used to include, or exclude, certain paths to be used by the worker functions. Having a `_routes.json` file gives developers more granular control over when your Function is invoked.
+This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) `index.html` file.
+
+By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.json` config, but rather it is auto-generated from the build by the Cloudflare adaptor. An example of an auto-generate `dist/_routes.json` would be:
+
+```
+{
+  "include": [
+    "/*"
+  ],
+  "exclude": [
+    "/_headers",
+    "/_redirects",
+    "/build/*",
+    "/favicon.ico",
+    "/manifest.json",
+    "/service-worker.js",
+    "/about"
+  ],
+  "version": 1
+}
+```
+
+In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.
+
+In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.
--- a/apps/docs/adapters/cloudflare-pages/vite.config.ts
+++ b/apps/docs/adapters/cloudflare-pages/vite.config.ts
@@ -0,0 +1,15 @@
+import { cloudflarePagesAdapter } from "@builder.io/qwik-city/adapters/cloudflare-pages/vite";
+import { extendConfig } from "@builder.io/qwik-city/vite";
+import baseConfig from "../../vite.config";
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ["src/entry.cloudflare-pages.tsx", "@qwik-city-plan"],
+      },
+    },
+    plugins: [cloudflarePagesAdapter()],
+  };
+});
--- a/apps/docs/app/favicon.ico
+++ b/apps/docs/app/favicon.ico
--- a/apps/docs/app/fonts/GeistMonoVF.woff
+++ b/apps/docs/app/fonts/GeistMonoVF.woff
--- a/apps/docs/app/fonts/GeistVF.woff
+++ b/apps/docs/app/fonts/GeistVF.woff
--- a/apps/docs/app/globals.css
+++ b/apps/docs/app/globals.css
@@ -1,39 +0,0 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,31 +0,0 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
-}
--- a/apps/docs/app/page.module.css
+++ b/apps/docs/app/page.module.css
@@ -1,188 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-synthesis: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  font-family: var(--font-geist-sans);
-  border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-button.secondary {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  font-family: var(--font-geist-sans);
-  border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-  background: transparent;
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-.footer {
-  font-family: var(--font-geist-sans);
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -1,99 +0,0 @@
-import Image from "next/image";
-import { Button } from "@nestri/ui/button";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>app/page.tsx</code>
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-        <Button appName="docs" className={styles.secondary}>
-          Open alert
-        </Button>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file-text.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,27 +1,50 @@
 {
  "name": "@nestri/docs",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "developer": "next dev --turbo --port 3001",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+  "description": "Your games. Your rules.",
+  "engines": {
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
  },
-  "dependencies": {
-    "@nestri/ui": "*",
-    "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522",
-    "next": "15.0.0-rc.0"
+  "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
+  "private": true,
+  "trustedDependencies": [
+    "sharp"
+  ],
+  "trustedDependencies-annotation": "Needed for bun to allow running install scripts",
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.client": "vite build",
+    "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
+    "build.types": "tsc --incremental --noEmit",
+    "deploy": "wrangler pages deploy ./dist",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "preview": "qwik build preview && vite preview --open",
+    "serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik"
  },
  "devDependencies": {
-    "@nestri/eslint-config": "*",
-    "@nestri/typescript-config": "*",
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.0-rc.0"
+    "@builder.io/qwik": "^1.8.0",
+    "@builder.io/qwik-city": "^1.8.0",
+    "@nestri/eslint-config": "workspace:*",
+    "@nestri/typescript-config": "workspace:*",
+    "@nestri/ui": "workspace:*",
+    "@types/eslint": "8.56.10",
+    "@types/node": "20.14.11",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-qwik": "^1.8.0",
+    "prettier": "3.3.3",
+    "typescript": "5.4.5",
+    "undici": "*",
+    "vite": "5.3.5",
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "^3.0.0"
  }
 }
--- a/apps/docs/postcss.config.cjs
+++ b/apps/docs/postcss.config.cjs
@@ -0,0 +1 @@
+module.exports = require("@nestri/ui/postcss.config");
--- a/apps/docs/public/_headers
+++ b/apps/docs/public/_headers
@@ -0,0 +1,9 @@
+# https://developers.cloudflare.com/pages/platform/headers/
+
+/*service-worker.js
+  Cache-Control: no-store
+  Content-Type: application/javascript
+  X-Content-Type-Options: nosniff
+
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
--- a/apps/docs/public/_redirects
+++ b/apps/docs/public/_redirects
@@ -0,0 +1 @@
+# https://developers.cloudflare.com/pages/platform/redirects/
--- a/apps/docs/public/favicon.ico
+++ b/apps/docs/public/favicon.ico
--- a/apps/docs/public/favicon.svg
+++ b/apps/docs/public/favicon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48.672001"
+   height="36.804001"
+   viewBox="0 0 12.8778 9.7377253"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg">
+  <g id="layer1">
+    <path
+       d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
+       style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"/>
+  </g>
+</svg>
--- a/apps/docs/public/file-text.svg
+++ b/apps/docs/public/file-text.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 13.5V6.5V5.41421C14.5 5.149 14.3946 4.89464 14.2071 4.70711L9.79289 0.292893C9.60536 0.105357 9.351 0 9.08579 0H8H3H1.5V1.5V13.5C1.5 14.8807 2.61929 16 4 16H12C13.3807 16 14.5 14.8807 14.5 13.5ZM13 13.5V6.5H9.5H8V5V1.5H3V13.5C3 14.0523 3.44772 14.5 4 14.5H12C12.5523 14.5 13 14.0523 13 13.5ZM9.5 5V2.12132L12.3787 5H9.5ZM5.13 5.00062H4.505V6.25062H5.13H6H6.625V5.00062H6H5.13ZM4.505 8H5.13H11H11.625V9.25H11H5.13H4.505V8ZM5.13 11H4.505V12.25H5.13H11H11.625V11H11H5.13Z" fill="#666666"/>
-</svg>
--- a/apps/docs/public/globe.svg
+++ b/apps/docs/public/globe.svg
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_868_525)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.268 14.0934C11.9051 13.4838 13.2303 12.2333 13.9384 10.6469C13.1192 10.7941 12.2138 10.9111 11.2469 10.9925C11.0336 12.2005 10.695 13.2621 10.268 14.0934ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8.48347 14.4823C8.32384 14.494 8.16262 14.5 8 14.5C7.83738 14.5 7.67616 14.494 7.51654 14.4823C7.5132 14.4791 7.50984 14.4759 7.50647 14.4726C7.2415 14.2165 6.94578 13.7854 6.67032 13.1558C6.41594 12.5744 6.19979 11.8714 6.04101 11.0778C6.67605 11.1088 7.33104 11.125 8 11.125C8.66896 11.125 9.32395 11.1088 9.95899 11.0778C9.80021 11.8714 9.58406 12.5744 9.32968 13.1558C9.05422 13.7854 8.7585 14.2165 8.49353 14.4726C8.49016 14.4759 8.4868 14.4791 8.48347 14.4823ZM11.4187 9.72246C12.5137 9.62096 13.5116 9.47245 14.3724 9.28806C14.4561 8.87172 14.5 8.44099 14.5 8C14.5 7.55901 14.4561 7.12828 14.3724 6.71194C13.5116 6.52755 12.5137 6.37904 11.4187 6.27753C11.4719 6.83232 11.5 7.40867 11.5 8C11.5 8.59133 11.4719 9.16768 11.4187 9.72246ZM10.1525 6.18401C10.2157 6.75982 10.25 7.36805 10.25 8C10.25 8.63195 10.2157 9.24018 10.1525 9.81598C9.46123 9.85455 8.7409 9.875 8 9.875C7.25909 9.875 6.53877 9.85455 5.84749 9.81598C5.7843 9.24018 5.75 8.63195 5.75 8C5.75 7.36805 5.7843 6.75982 5.84749 6.18401C6.53877 6.14545 7.25909 6.125 8 6.125C8.74091 6.125 9.46123 6.14545 10.1525 6.18401ZM11.2469 5.00748C12.2138 5.08891 13.1191 5.20593 13.9384 5.35306C13.2303 3.7667 11.9051 2.51622 10.268 1.90662C10.695 2.73788 11.0336 3.79953 11.2469 5.00748ZM8.48347 1.51771C8.4868 1.52089 8.49016 1.52411 8.49353 1.52737C8.7585 1.78353 9.05422 2.21456 9.32968 2.84417C9.58406 3.42562 9.80021 4.12856 9.95899 4.92219C9.32395 4.89118 8.66896 4.875 8 4.875C7.33104 4.875 6.67605 4.89118 6.04101 4.92219C6.19978 4.12856 6.41594 3.42562 6.67032 2.84417C6.94578 2.21456 7.2415 1.78353 7.50647 1.52737C7.50984 1.52411 7.51319 1.52089 7.51653 1.51771C7.67615 1.50597 7.83738 1.5 8 1.5C8.16262 1.5 8.32384 1.50597 8.48347 1.51771ZM5.73202 1.90663C4.0949 2.51622 2.76975 3.7667 2.06159 5.35306C2.88085 5.20593 3.78617 5.08891 4.75309 5.00748C4.96639 3.79953 5.30497 2.73788 5.73202 1.90663ZM4.58133 6.27753C3.48633 6.37904 2.48837 6.52755 1.62761 6.71194C1.54392 7.12828 1.5 7.55901 1.5 8C1.5 8.44099 1.54392 8.87172 1.62761 9.28806C2.48837 9.47245 3.48633 9.62096 4.58133 9.72246C4.52807 9.16768 4.5 8.59133 4.5 8C4.5 7.40867 4.52807 6.83232 4.58133 6.27753ZM4.75309 10.9925C3.78617 10.9111 2.88085 10.7941 2.06159 10.6469C2.76975 12.2333 4.0949 13.4838 5.73202 14.0934C5.30497 13.2621 4.96639 12.2005 4.75309 10.9925Z" fill="#666666"/>
-</g>
-<defs>
-<clipPath id="clip0_868_525">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/apps/docs/public/logo.webp
+++ b/apps/docs/public/logo.webp
--- a/apps/docs/public/manifest.json
+++ b/apps/docs/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "Nestri",
+  "short_name": "Nestri - Your games. Your rules.",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fafafa",
+  "description": "Nestri - Your games. Your rules.",
+  "icons": [
+    {
+      "src": "/seo/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/seo/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#fafafa"
+}
--- a/apps/docs/public/next.svg
+++ b/apps/docs/public/next.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/apps/docs/public/seo/android-chrome-192x192.png
+++ b/apps/docs/public/seo/android-chrome-192x192.png
--- a/apps/docs/public/seo/android-chrome-512x512.png
+++ b/apps/docs/public/seo/android-chrome-512x512.png
--- a/apps/docs/public/seo/apple-touch-icon.png
+++ b/apps/docs/public/seo/apple-touch-icon.png
--- a/apps/docs/public/seo/banner.png
+++ b/apps/docs/public/seo/banner.png
--- a/apps/docs/public/seo/browserconfig.xml
+++ b/apps/docs/public/seo/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#ffede5</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/apps/docs/public/seo/favicon-16x16.png
+++ b/apps/docs/public/seo/favicon-16x16.png
--- a/apps/docs/public/seo/favicon-32x32.png
+++ b/apps/docs/public/seo/favicon-32x32.png
--- a/apps/docs/public/seo/favicon.ico
+++ b/apps/docs/public/seo/favicon.ico
--- a/apps/docs/public/seo/mstile-150x150.png
+++ b/apps/docs/public/seo/mstile-150x150.png
--- a/apps/docs/public/seo/safari-pinned-tab.svg
+++ b/apps/docs/public/seo/safari-pinned-tab.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M398 4232 l-48 -3 -1 -42 c-2 -188 2 -861 6 -865 2 -3 997 -5 2210
+-6 l2205 -1 -2 458 -3 459 -2160 1 c-1188 1 -2181 1 -2207 -1z"/>
+<path d="M350 2984 c0 -19 0 -198 0 -399 0 -201 0 -391 0 -424 l0 -58 2210 0
+2210 0 0 457 0 457 -2210 0 -2210 0 0 -33z"/>
+<path d="M354 1799 c-3 -6 -7 -613 -5 -844 l1 -70 2197 2 c1209 1 2204 2 2211
+3 18 0 18 910 0 911 -81 4 -4401 2 -4404 -2z"/>
+</g>
+</svg>
--- a/apps/docs/public/seo/site.webmanifest
+++ b/apps/docs/public/seo/site.webmanifest
@@ -0,0 +1,18 @@
+{
+    "name": "Nestri",
+    "short_name": "Nestri",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#fafafa",
+    "background_color": "#fafafa",
+    "display": "standalone"}
--- a/apps/docs/public/vercel.svg
+++ b/apps/docs/public/vercel.svg
@@ -1,10 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_977_547)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3L18.5 17H2.5L10.5 3Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_977_547">
-<rect width="16" height="16" fill="white" transform="translate(2.5 2)"/>
-</clipPath>
-</defs>
-</svg>
--- a/apps/docs/public/window.svg
+++ b/apps/docs/public/window.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5H14.5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V2.5ZM0 1H1.5H14.5H16V2.5V12.5C16 13.8807 14.8807 15 13.5 15H2.5C1.11929 15 0 13.8807 0 12.5V2.5V1ZM3.75 5.5C4.16421 5.5 4.5 5.16421 4.5 4.75C4.5 4.33579 4.16421 4 3.75 4C3.33579 4 3 4.33579 3 4.75C3 5.16421 3.33579 5.5 3.75 5.5ZM7 4.75C7 5.16421 6.66421 5.5 6.25 5.5C5.83579 5.5 5.5 5.16421 5.5 4.75C5.5 4.33579 5.83579 4 6.25 4C6.66421 4 7 4.33579 7 4.75ZM8.75 5.5C9.16421 5.5 9.5 5.16421 9.5 4.75C9.5 4.33579 9.16421 4 8.75 4C8.33579 4 8 4.33579 8 4.75C8 5.16421 8.33579 5.5 8.75 5.5Z" fill="#666666"/>
-</svg>
--- a/apps/docs/qwik.env.d.ts
+++ b/apps/docs/qwik.env.d.ts
@@ -0,0 +1,4 @@
+// This file can be used to add references for global types like `vite/client`.
+
+// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types
+/// <reference types="vite/client" />
--- a/apps/docs/src/entry.cloudflare-pages.tsx
+++ b/apps/docs/src/entry.cloudflare-pages.tsx
@@ -0,0 +1,24 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the entry point for Cloudflare Pages when building for production.
+ *
+ * Learn more about the Cloudflare Pages integration here:
+ * - https://qwik.dev/docs/deployments/cloudflare-pages/
+ *
+ */
+import {
+  createQwikCity,
+  type PlatformCloudflarePages,
+} from "@builder.io/qwik-city/middleware/cloudflare-pages";
+import qwikCityPlan from "@qwik-city-plan";
+import { manifest } from "@qwik-client-manifest";
+import render from "./entry.ssr";
+
+declare global {
+  interface QwikCityPlatform extends PlatformCloudflarePages {}
+}
+
+const fetch = createQwikCity({ render, qwikCityPlan, manifest });
+
+export { fetch };
--- a/apps/docs/src/entry.dev.tsx
+++ b/apps/docs/src/entry.dev.tsx
@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from "@builder.io/qwik";
+import Root from "./root";
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}
--- a/apps/docs/src/entry.preview.tsx
+++ b/apps/docs/src/entry.preview.tsx
@@ -0,0 +1,21 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
+import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
+import qwikCityPlan from "@qwik-city-plan";
+// make sure qwikCityPlan is imported before entry
+import render from "./entry.ssr";
+
+/**
+ * The default export is the QwikCity adapter used by Vite preview.
+ */
+export default createQwikCity({ render, qwikCityPlan });
--- a/apps/docs/src/entry.ssr.tsx
+++ b/apps/docs/src/entry.ssr.tsx
@@ -0,0 +1,33 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@builder.io/qwik/server";
+import { manifest } from "@qwik-client-manifest";
+import Root from "./root";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    // Use container attributes to set attributes on the html tag.
+    containerAttributes: {
+      lang: "en-us",
+      ...opts.containerAttributes,
+    },
+    serverData: {
+      ...opts.serverData,
+    },
+  });
+}
--- a/apps/docs/src/global.css
+++ b/apps/docs/src/global.css
--- a/apps/docs/src/root.tsx
+++ b/apps/docs/src/root.tsx
@@ -0,0 +1,45 @@
+import { component$ } from "@builder.io/qwik";
+import {
+  QwikCityProvider,
+  RouterOutlet,
+  ServiceWorkerRegister,
+} from "@builder.io/qwik-city";
+import { RouterHead } from "@nestri/ui";
+import { isDev } from "@builder.io/qwik/build";
+
+import "@nestri/ui/globals.css";
+import { Fonts } from "@nestri/ui";
+
+export default component$(() => {
+  /**
+   * The root of a QwikCity site always start with the <QwikCityProvider> component,
+   * immediately followed by the document's <head> and <body>.
+   *
+   * Don't remove the `<head>` and `<body>` elements.
+   */
+
+  return (
+    <Fonts>
+      <QwikCityProvider>
+        <head>
+          <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa" />
+          <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
+          <meta charset="utf-8" />
+          {!isDev && (
+            <link
+              rel="manifest"
+              href={`${import.meta.env.BASE_URL}manifest.json`}
+            />
+          )}
+          <RouterHead />
+        </head>
+        <body
+          class="bg-gray-50 text-primary-950 dark:bg-gray-950 dark:text-primary-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
+          lang="en">
+          <RouterOutlet />
+          {!isDev && <ServiceWorkerRegister />}
+        </body>
+      </QwikCityProvider>
+    </Fonts>
+  );
+});
--- a/apps/docs/src/routes/index.tsx
+++ b/apps/docs/src/routes/index.tsx
@@ -0,0 +1,25 @@
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+
+export default component$(() => {
+  return (
+    <>
+      <h1>Hi 👋</h1>
+      <div>
+        Can't wait to see what you build with qwik!
+        <br />
+        Happy coding.
+      </div>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Welcome to Qwik",
+  meta: [
+    {
+      name: "description",
+      content: "Qwik site description",
+    },
+  ],
+};
--- a/apps/docs/src/routes/layout.tsx
+++ b/apps/docs/src/routes/layout.tsx
@@ -0,0 +1,17 @@
+import { component$, Slot } from "@builder.io/qwik";
+import type { RequestHandler } from "@builder.io/qwik-city";
+
+export const onGet: RequestHandler = async ({ cacheControl }) => {
+  // Control caching for this request for best performance and to reduce hosting costs:
+  // https://qwik.dev/docs/caching/
+  cacheControl({
+    // Always serve a cached response by default, up to a week stale
+    staleWhileRevalidate: 60 * 60 * 24 * 7,
+    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
+    maxAge: 5,
+  });
+};
+
+export default component$(() => {
+  return <Slot />;
+});
--- a/apps/docs/src/routes/service-worker.ts
+++ b/apps/docs/src/routes/service-worker.ts
@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.dev/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from "@builder.io/qwik-city/service-worker";
+
+setupServiceWorker();
+
+addEventListener("install", () => self.skipWaiting());
+
+addEventListener("activate", () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;
--- a/apps/docs/src/routes/test/index.mdx
+++ b/apps/docs/src/routes/test/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Hello World Title
+---
+ 
+# Hello World Title
+
+This is a simple hello world component.
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -0,0 +1,12 @@
+// import colors from "tailwindcss/colors";
+import baseConfig from "@nestri/ui/tailwind.config";
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+
+  content: [
+    "./{src,components,app}/**/*.{ts,tsx,html}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  presets: [baseConfig],
+  plugins: [],
+};
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,18 +1,36 @@
 {
-  "extends": "@nestri/typescript-config/nextjs.json",
+  "extends": "@nestri/typescript-config/base.json",
  "compilerOptions": {
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "allowJs": true,
+    "target": "ES2017",
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "outDir": "tmp",
+    "noEmit": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
  },
-  "include": [
-    "next-env.d.ts",
-    "next.config.mjs",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
+  "files": [
+    ".eslintrc.js"
  ],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "src",
+    "./*.d.ts",
+    "./*.config.ts",
+    "./*.config.js",
+    "./*.config.cjs"
+  ]
+}
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -0,0 +1,106 @@
+/**
+ * This is the base config for vite.
+ * When building, the adapter config is used which loads this file and extends it.
+ */
+import { defineConfig, type UserConfig } from "vite";
+import { qwikVite } from "@builder.io/qwik/optimizer";
+import { qwikCity } from "@builder.io/qwik-city/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import pkg from "./package.json";
+
+type PkgDep = Record<string, string>;
+const { dependencies = {}, devDependencies = {} } = pkg as any as {
+  dependencies: PkgDep;
+  devDependencies: PkgDep;
+  [key: string]: unknown;
+};
+errorOnDuplicatesPkgDeps(devDependencies, dependencies);
+
+/**
+ * Note that Vite normally starts from `index.html` but the qwikCity plugin makes start at `src/entry.ssr.tsx` instead.
+ */
+export default defineConfig(({ command, mode }): UserConfig => {
+  return {
+    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
+    // This tells Vite which dependencies to pre-build in dev mode.
+    optimizeDeps: {
+      // Put problematic deps that break bundling here, mostly those with binaries.
+      // For example ['better-sqlite3'] if you use that in server functions.
+      exclude: [],
+    },
+
+    /**
+     * This is an advanced setting. It improves the bundling of your server code. To use it, make sure you understand when your consumed packages are dependencies or dev dependencies. (otherwise things will break in production)
+     */
+    // ssr:
+    //   command === "build" && mode === "production"
+    //     ? {
+    //         // All dev dependencies should be bundled in the server build
+    //         noExternal: Object.keys(devDependencies),
+    //         // Anything marked as a dependency will not be bundled
+    //         // These should only be production binary deps (including deps of deps), CLI deps, and their module graph
+    //         // If a dep-of-dep needs to be external, add it here
+    //         // For example, if something uses `bcrypt` but you don't have it as a dep, you can write
+    //         // external: [...Object.keys(dependencies), 'bcrypt']
+    //         external: Object.keys(dependencies),
+    //       }
+    //     : undefined,
+
+    server: {
+      headers: {
+        // Don't cache the server response in dev mode
+        "Cache-Control": "public, max-age=0",
+      },
+    },
+    preview: {
+      headers: {
+        // Do cache the server response in preview (non-adapter production build)
+        "Cache-Control": "public, max-age=600",
+      },
+    },
+  };
+});
+
+// *** utils ***
+
+/**
+ * Function to identify duplicate dependencies and throw an error
+ * @param {Object} devDependencies - List of development dependencies
+ * @param {Object} dependencies - List of production dependencies
+ */
+function errorOnDuplicatesPkgDeps(
+  devDependencies: PkgDep,
+  dependencies: PkgDep,
+) {
+  let msg = "";
+  // Create an array 'duplicateDeps' by filtering devDependencies.
+  // If a dependency also exists in dependencies, it is considered a duplicate.
+  const duplicateDeps = Object.keys(devDependencies).filter(
+    (dep) => dependencies[dep],
+  );
+
+  // include any known qwik packages
+  const qwikPkg = Object.keys(dependencies).filter((value) =>
+    /qwik/i.test(value),
+  );
+
+  // any errors for missing "qwik-city-plan"
+  // [PLUGIN_ERROR]: Invalid module "@qwik-city-plan" is not a valid package
+  msg = `Move qwik packages ${qwikPkg.join(", ")} to devDependencies`;
+
+  if (qwikPkg.length > 0) {
+    throw new Error(msg);
+  }
+
+  // Format the error message with the duplicates list.
+  // The `join` function is used to represent the elements of the 'duplicateDeps' array as a comma-separated string.
+  msg = `
+    Warning: The dependency "${duplicateDeps.join(", ")}" is listed in both "devDependencies" and "dependencies".
+    Please move the duplicated dependencies to "devDependencies" only and remove it from "dependencies"
+  `;
+
+  // Throw an error with the constructed message.
+  if (duplicateDeps.length > 0) {
+    throw new Error(msg);
+  }
+}
--- a/apps/www/src/root.tsx
+++ b/apps/www/src/root.tsx
@@ -4,7 +4,7 @@ import {
  RouterOutlet,
  ServiceWorkerRegister,
 } from "@builder.io/qwik-city";
-import { RouterHead } from "@/components/router-head";
+import { RouterHead } from "@nestri/ui";
 import { isDev } from "@builder.io/qwik/build";

 import "@nestri/ui/globals.css";
@@ -34,7 +34,7 @@ export default component$(() => {
          <RouterHead />
        </head>
        <body
-          class="bg-gray-50 text-primary-950 dark:bg-gray-950 dark:text-primary-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
+          class="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
          lang="en">
          <RouterOutlet />
          {/* {!isDev && <ServiceWorkerRegister />} */}
--- a/apps/www/src/routes/(blog)/blog/index.tsx
+++ b/apps/www/src/routes/(blog)/blog/index.tsx
@@ -0,0 +1,58 @@
+import { component$ } from "@builder.io/qwik"
+import { NavBar } from "@nestri/ui"
+import { TitleSection } from "@nestri/ui/react"
+
+export default component$(() => {
+
+
+    return (
+        <>
+            <NavBar />
+            <TitleSection client:load title="Blog" description="All the latest news from Nestri and the community." />
+            <div class="w-full flex flex-col py-8">
+                <ul class="w-full list-none max-w-xl mx-auto flex flex-col">
+                    <li>
+                        <a href="/blog/nestri-1-0-0-release" class="w-full flex pt-6 pb-[4.5rem] border-y-2 border-gray-200 dark:border-gray-800 hover:bg-neutral-200 transition-all duration-200 rounded-lg dark:hover:bg-neutral-800 px-2 gap-8">
+                            <div class="flex-1 flex flex-row gap-3.5 justify-between">
+                                <div class="flex flex-col gap-3.5">
+                                    <h3 class="text-3xl font-title font-bold mb-2">Nestri 1.0.0 Release</h3>
+                                    <p class="text-gray-500 dark:text-gray-400 text-base">
+                                        The latest release of Nestri includes a new user interface, improved performance, and a host of new features.
+                                    </p>
+                                </div>
+                                <span class="text-base text-neutral-400 text-nowrap">Aug 20, 2024</span>
+                            </div>
+                        </a>
+                    </li>
+                    
+                    {/* <li>
+                        <a href="/blog/nestri-1-0-0-release" class="w-full flex pt-6 pb-[4.5rem] border-y-2 border-gray-200 dark:border-gray-800 hover:bg-neutral-200 transition-all duration-200 rounded-lg dark:hover:bg-neutral-800 px-2 gap-8">
+                            <div class="flex-1 flex flex-row gap-3.5 justify-between">
+                                <div class="flex flex-col gap-3.5">
+                                    <h3 class="text-3xl font-title font-bold mb-2">Nestri 1.0.0 Release</h3>
+                                    <p class="text-gray-500 dark:text-gray-400 text-base">
+                                        The latest release of Nestri includes a new user interface, improved performance, and a host of new features.
+                                    </p>
+                                </div>
+                                <span class="text-base text-neutral-400 text-nowrap">Aug 20, 2024</span>
+                            </div>
+                        </a>
+                    </li><li>
+                        <a href="/blog/nestri-1-0-0-release" class="w-full flex pt-6 pb-[4.5rem] border-y-2 border-gray-200 dark:border-gray-800 hover:bg-neutral-200 transition-all duration-200 rounded-lg dark:hover:bg-neutral-800 px-2 gap-8">
+                            <div class="flex-1 flex flex-row gap-3.5 justify-between">
+                                <div class="flex flex-col gap-3.5">
+                                    <h3 class="text-3xl font-title font-bold mb-2">Nestri 1.0.0 Release</h3>
+                                    <p class="text-gray-500 dark:text-gray-400 text-base">
+                                        The latest release of Nestri includes a new user interface, improved performance, and a host of new features.
+                                    </p>
+                                </div>
+                                <span class="text-base text-neutral-400 text-nowrap">Aug 20, 2024</span>
+                            </div>
+                        </a>
+                    </li> */}
+                </ul>
+            </div>
+        </>
+
+    )
+})
--- a/apps/www/src/routes/changelog/index.tsx
+++ b/apps/www/src/routes/changelog/index.tsx
@@ -18,7 +18,7 @@ export default component$(() => {
                as="div"
            >
                <div class="px-2" >
-                    <section class="flex flex-col gap-4 overflow-hidden mx-auto w-full text-left max-w-xl pt-20 pb-4">
+                    <section class="flex flex-col gap-4 overflow-hidden mx-auto w-full text-left max-w-xl pb-4">
                        <div class="w-full justify-between flex">
                            <h2 class="relative pl-8 font-medium font-title text-base before:absolute before:left-0 before:top-1 before:w-4 before:h-4 before:bg-primary-500 before:rounded-full after:absolute after:left-0.5 after:top-1.5 after:w-3 after:h-3 after:bg-gray-50 after:dark:bg-gray-950 after:rounded-full">
                                v0.0.3
@@ -27,7 +27,7 @@ export default component$(() => {
                        </div>
                        <div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max gap-4 flex flex-col relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
                            <div class="flex flex-row flex-wrap gap-2.5">
-                                <div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="text-base backdrop-blur-sm font-title font-medium text-white z-[2] w-full h-full text-center p-4 justify-center items-center flex flex-col">
                                        <p class="text-2xl">Fresh new look, Intel & AMD GPU support and we finally launched 🥳</p>
                                    </div>
@@ -35,7 +35,7 @@ export default component$(() => {
                                        <img draggable={false} src="/changelog/v0.0.3/header.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                    </div>
                                </div>
-                                <div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="text-lg font-title font-medium text-white z-[2] w-full h-full text-center p-4  justify-end flex flex-col">
                                        <p class="m-4 backdrop-blur-sm" >Fresh new logo and branding 💅🏾</p>
                                    </div>
@@ -43,22 +43,22 @@ export default component$(() => {
                                        <img draggable={false} src="/changelog/v0.0.3/new-website-design.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                    </div>
                                </div>
-                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="justify-center items-center flex w-full">
                                        <p class="text-xl font-title text-center font-medium">Updated our <Link class="underline" href="/terms">Terms of Service</Link> <br class="hidden md:block" /> and our <Link class="underline" href="/privacy">Privacy Policy</Link></p>
                                    </div>
                                </div>
-                                <div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="justify-center items-center flex w-full">
                                        <p class="text-xl font-title text-center font-medium">Added support for Intel & AMD GPUs. Courtesy of{" "}<Link class="underline" href="https://github.com/DatCaptainHorse">@DatHorse</Link></p>
                                    </div>
                                </div>
-                                <div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="absolute inset-0 z-0">
                                        <img draggable={false} src="/changelog/v0.0.3/gameplay.avifs" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
                                    </div>
                                </div>
-                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <div class="justify-center items-center flex w-full">
                                        <p class="text-lg font-title text-center font-medium">+ Lots of quality of life improvements! 🤞🏽</p>
                                    </div>
@@ -75,7 +75,7 @@ export default component$(() => {
                        </div>
                        <div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
                            <div class="flex flex-row flex-wrap gap-2.5">
-                                <div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 dark:text-primary-50/70 text-primary-950/70">
+                                <div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
                                    <p class="text-lg font-title text-center font-medium">Nestri has been long overdue for a changelog. <br class="hidden md:block" /> Welcome to our changelog!</p>
                                </div>
                            </div>
--- a/apps/www/src/routes/index.tsx
+++ b/apps/www/src/routes/index.tsx
@@ -153,7 +153,7 @@ export default component$(() => {
        >
          <div class="flex flex-col items-center justify-center text-left px-4 w-full mx-auto gap-4 sm:max-w-[560px] py-8">
            <h2 class="text-5xl font-bold font-title w-full">Why Us?</h2>
-            <p class="text-gray-500 text-2xl">From streaming quality to social integration, we nail the details.</p>
+            <p class="text-neutral-900/70 dark:text-neutral-100/70 text-2xl">From streaming quality to social integration, we nail the details.</p>
          </div>
        </MotionComponent>
        <div class="flex items-center flex-col px-5 gap-5 justify-between w-full mx-auto max-w-xl">
@@ -169,7 +169,7 @@ export default component$(() => {
                class="w-full"
                as="div"
              >
-                <div class="w-full flex gap-4 group">
+                <div class="w-full flex gap-4 group ">
                  <div class="size-9 [&>svg]:size-9 group-hover:scale-110 transition-all duration-200">
                    <feature.icon />
                  </div>
@@ -177,7 +177,7 @@ export default component$(() => {
                    <h2 class="text-xl font-bold font-title">
                      {feature.title}
                    </h2>
-                    <p class="text-gray-500">
+                    <p class="text-neutral-900/70 dark:text-neutral-100/70">
                      {feature.description}
                    </p>
                  </div>
@@ -199,7 +199,7 @@ export default component$(() => {
        >
          <div class="flex flex-col items-center justify-center text-left w-full mx-auto px-4 gap-4 sm:max-w-[560px] py-8">
            <h2 class="text-5xl font-bold font-title w-full">How it works</h2>
-            <p class="text-gray-500 text-2xl w-full">From click → play in under three minutes</p>
+            <p class="text-neutral-900/70 dark:text-neutral-100/70 text-2xl w-full">From click → play in under three minutes</p>
          </div>
        </MotionComponent>
        <MotionComponent
@@ -218,7 +218,7 @@ export default component$(() => {
                  1
                </p>
              </div>
-              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
                <div class="flex items-center justify-center" >
                  <div class="z-[4] flex relative items-center justify-center size-[66px] transition-all duration-200 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-500 dark:group-hover:bg-primary-800 group-hover:bg-primary-200 shadow-lg shadow-gray-300 dark:shadow-gray-700" >
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" class="size-10 flex-shrink-0 group-hover:hidden" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52" opacity=".5" /><path stroke-linejoin="round" d="M12 22v-6m0 6l2-2m-2 2l-2-2" /></g></svg>
@@ -245,7 +245,7 @@ export default component$(() => {
                  </div>
                </div>
                <div class="flex flex-col gap-2 w-full items-center justify-center">
-                  <p class="text-gray-500 max-w-[80%] text-center mx-auto text-2xl font-title">
+                  <p class="text-neutral-900/70 dark:text-neutral-100/70 max-w-[80%] text-center mx-auto text-2xl font-title">
                    <strong>Add</strong>&nbsp;your game from Steam
                  </p>
                </div>
@@ -257,10 +257,10 @@ export default component$(() => {
                  2
                </p>
              </div>
-              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
                <div class="flex flex-col gap-2 w-full items-center justify-center">
-                  <p class="text-gray-500 max-w-[80%] text-center mx-auto text-2xl font-title">
-                    <strong>Create</strong>&nbsp;or join a Nestri Party 🎈
+                  <p class="text-neutral-900/70 dark:text-neutral-100/70 max-w-[80%] text-center mx-auto text-2xl font-title">
+                    <strong>Create</strong>&nbsp;or join a Nestri Party
                  </p>
                </div>
                <div class="w-full [mask-image:linear-gradient(0deg,transparent,#000_30px)] justify-center items-center p-0.5 py-1 pb-0 flex flex-col-reverse">
@@ -313,7 +313,7 @@ export default component$(() => {
                  3
                </p>
              </div>
-              <div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
+              <div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
                <div class="absolute top-0 left-0 bottom-0 right-0 w-full h-full z-[3]">
                  <Cursor client:load class="absolute left-4 top-4" text="Wanjohi" />
                  <Cursor client:load color="#3a9a00" flip class="absolute right-2 top-8" text="Jd" />
@@ -321,7 +321,7 @@ export default component$(() => {
                  <Cursor client:load color="#FF4F01" flip class="hidden transition-all duration-200 absolute top-20 right-6 group-hover:flex" text="You" />
                </div>
                <div class="flex z-[2] flex-col gap-2 w-full items-center justify-center">
-                  <p class="text-gray-500 max-w-[80%] text-center mx-auto text-2xl font-title">
+                  <p class="text-neutral-900/70 dark:text-neutral-100/70 max-w-[80%] text-center mx-auto text-2xl font-title">
                    <strong>Play</strong>&nbsp;your game with friends
                  </p>
                </div>
--- a/apps/www/src/routes/pricing/index.tsx
+++ b/apps/www/src/routes/pricing/index.tsx
@@ -18,7 +18,7 @@ export default component$(() => {
                as="div"
            >
                <div class="px-2" >
-                    <section class="flex flex-col gap-4 justify-center items-center mx-auto w-full text-left max-w-xl pt-20 pb-4">
+                    <section class="flex flex-col gap-4 justify-center items-center mx-auto w-full text-left max-w-xl pb-4">
                        <div class="flex flex-col gap-4 justify-center items-center">
                            <div class="flex sm:flex-row flex-col w-[90%] sm:w-full h-min p-1.5 overflow-hidden bg-gray-200/70 ring-2 ring-gray-300 dark:ring-gray-700 dark:bg-gray-800/70 rounded-xl gap-4">
                                <div class="gap-3 w-full p-6 flex flex-col rounded-lg bg-white dark:bg-black">
@@ -30,7 +30,7 @@ export default component$(() => {
                                        <p class="text-base font-medium">Free</p>
                                    </div>
                                    <div class="break-words [word-break:break-word] [text-wrap:balance] [word-wrap:break-word] w-full relative whitespace-pre-wrap">
-                                        <p class="text-base text-primary-950/70 dark:text-primary-50/70">
+                                        <p class="text-base text-gray-950/70 dark:text-gray-50/70">
                                            Perfect for casual gamers and those new to Nestri. Dive into cloud gaming without spending a dime.
                                        </p>
                                    </div>
@@ -55,7 +55,7 @@ export default component$(() => {
                                    <hr class="h-[2px] bg-gray-200 dark:bg-gray-800" />
                                    <div class="w-full relative sm:text-sm text-base gap-3 flex flex-col">
                                        <div class="flex item-center flex-col gap-2 w-full">
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M8.21 17.32L7 16.8a2.13 2.13 0 1 0 1.17-2.93l1.28.53a1.58 1.58 0 0 1-1.22 2.92z" /><path fill="currentColor" d="M12 2a10 10 0 0 0-10 9.34l5.38 2.21a2.31 2.31 0 0 1 .47-.24A2.62 2.62 0 0 1 9 13.1l2.44-3.56a3.8 3.8 0 1 1 3.8 3.8h-.08l-3.51 2.5a2.77 2.77 0 0 1-5.47.68l-3.77-1.6A10 10 0 1 0 12 2" /><path fill="currentColor" d="M17.79 9.5a2.53 2.53 0 1 0-2.53 2.5a2.54 2.54 0 0 0 2.53-2.5m-4.42 0a1.9 1.9 0 1 1 1.9 1.91a1.9 1.9 0 0 1-1.9-1.92z" /></svg>
                                                </div>
@@ -63,7 +63,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24">
                                                        <g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 10c0-1.414 0-2.121.44-2.56C7.878 7 8.585 7 10 7h4c1.414 0 2.121 0 2.56.44c.44.439.44 1.146.44 2.56v4c0 1.414 0 2.121-.44 2.56c-.439.44-1.146.44-2.56.44h-4c-1.414 0-2.121 0-2.56-.44C7 16.122 7 15.415 7 14z" opacity=".5" />
@@ -77,7 +77,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" /><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd" /></svg>
                                                </div>
@@ -85,7 +85,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="6" r="4" /><path stroke-linecap="round" d="M18 9c1.657 0 3-1.12 3-2.5S19.657 4 18 4M6 9C4.343 9 3 7.88 3 6.5S4.343 4 6 4" opacity=".5" /><ellipse cx="12" cy="17" rx="6" ry="4" /><path stroke-linecap="round" d="M20 19c1.754-.385 3-1.359 3-2.5s-1.246-2.115-3-2.5M4 19c-1.754-.385-3-1.359-3-2.5s1.246-2.115 3-2.5" opacity=".5" /></g></svg>
                                                </div>
@@ -93,7 +93,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -103,7 +103,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -113,7 +113,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -123,7 +123,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -133,7 +133,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -143,7 +143,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -153,7 +153,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -174,7 +174,7 @@ export default component$(() => {
                                        <h2 class="text-base font-medium">TBD</h2>
                                    </div>
                                    <div class="break-words [word-break:break-word] [text-wrap:balance] [word-wrap:break-word] w-full relative whitespace-pre-wrap">
-                                        <p class="text-base text-primary-950/70 dark:text-primary-50/70">
+                                        <p class="text-base text-gray-950/70 dark:text-gray-50/70">
                                            Ideal for dedicated gamers who crave more power, flexibility, and social gaming experiences.
                                        </p>
                                    </div>
@@ -198,7 +198,7 @@ export default component$(() => {
                                    <hr class="h-[2px] bg-gray-300 dark:bg-gray-700" />
                                    <div class="w-full sm:text-sm text-base relative gap-3 flex flex-col">
                                        <div class="flex item-center flex-col gap-2 w-full">
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M8.21 17.32L7 16.8a2.13 2.13 0 1 0 1.17-2.93l1.28.53a1.58 1.58 0 0 1-1.22 2.92z" /><path fill="currentColor" d="M12 2a10 10 0 0 0-10 9.34l5.38 2.21a2.31 2.31 0 0 1 .47-.24A2.62 2.62 0 0 1 9 13.1l2.44-3.56a3.8 3.8 0 1 1 3.8 3.8h-.08l-3.51 2.5a2.77 2.77 0 0 1-5.47.68l-3.77-1.6A10 10 0 1 0 12 2" /><path fill="currentColor" d="M17.79 9.5a2.53 2.53 0 1 0-2.53 2.5a2.54 2.54 0 0 0 2.53-2.5m-4.42 0a1.9 1.9 0 1 1 1.9 1.91a1.9 1.9 0 0 1-1.9-1.92z" /></svg>
                                                </div>
@@ -209,7 +209,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24">
                                                        <g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 10c0-1.414 0-2.121.44-2.56C7.878 7 8.585 7 10 7h4c1.414 0 2.121 0 2.56.44c.44.439.44 1.146.44 2.56v4c0 1.414 0 2.121-.44 2.56c-.439.44-1.146.44-2.56.44h-4c-1.414 0-2.121 0-2.56-.44C7 16.122 7 15.415 7 14z" opacity=".5" />
@@ -223,7 +223,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" /><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd" /></svg>
                                                </div>
@@ -231,7 +231,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="6" r="4" /><path stroke-linecap="round" d="M18 9c1.657 0 3-1.12 3-2.5S19.657 4 18 4M6 9C4.343 9 3 7.88 3 6.5S4.343 4 6 4" opacity=".5" /><ellipse cx="12" cy="17" rx="6" ry="4" /><path stroke-linecap="round" d="M20 19c1.754-.385 3-1.359 3-2.5s-1.246-2.115-3-2.5M4 19c-1.754-.385-3-1.359-3-2.5s1.246-2.115 3-2.5" opacity=".5" /></g></svg>
                                                </div>
@@ -239,7 +239,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -249,7 +249,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -259,7 +259,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -269,7 +269,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -279,7 +279,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -289,7 +289,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -299,7 +299,7 @@ export default component$(() => {
                                            </div>
                                        </div>
                                        <div class="gap-2.5 flex relative items-center w-full" >
-                                            <div class="gap-1.5 flex w-full items-center text-neutral-800/70 dark:text-neutral-200/70" >
+                                            <div class="gap-1.5 flex w-full items-center text-neutral-900/70 dark:text-neutral-100/70" >
                                                <div class="size-5 relative">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-full h-full">
                                                        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"></path>
@@ -318,7 +318,7 @@ export default component$(() => {
                                    <div class="rounded-full size-4 overflow-hidden bg-gradient-to-tr from-[#a0f906] to-[#e60d0d]" />
                                    <p class="text-base font-medium">Enterprise</p>
                                </div>
-                                <p class="text-neutral-800/70 dark:text-neutral-200/70 text-base" >
+                                <p class="text-neutral-900/70 dark:text-neutral-100/70 text-base" >
                                    Looking for a custom cloud gaming platform? Use Nestri as your own on our servers or yours. Flexible licensing and white-glove onboarding included.
                                </p>
                                <Link class="underline underline-offset-1 font-medium font-title hover:opacity-70" href="mailto:enterprise@nestri.io">
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -1,7 +1,22 @@
 {
  "extends": "@nestri/typescript-config/base.json",
  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2017",
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
    "outDir": "tmp",
+    "noEmit": true,
    "paths": {
      "@/*": [
        "./src/*"
--- a/bun.lockb
+++ b/bun.lockb
--- a/packages/mdx/.eslintrc.js
+++ b/packages/mdx/.eslintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: [
+    "@nestri/eslint-config/qwik.js",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  }
+};
--- a/packages/mdx/package.json
+++ b/packages/mdx/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "@nestri/mdx",
+    "version": "0.0.0",
+    "private": true,
+    "sideEffects": false,
+    "files": [
+        "tailwind.config.ts",
+        "postcss.config.js"
+    ],
+    "scripts": {
+        "lint": "eslint . --max-warnings 0"
+    },
+    "devDependencies": {
+        "@builder.io/qwik": "^1.8.0",
+        "@builder.io/qwik-city": "^1.8.0",
+        "@builder.io/qwik-react": "0.5.0",
+        "@nestri/eslint-config": "workspace:*",
+        "@nestri/typescript-config": "workspace:*",
+        "@nestri/core": "workspace:*",
+        "@types/eslint": "^8.56.5",
+        "@types/node": "^20.11.24",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^8.57.0",
+        "tailwindcss": "^3.4.9",
+        "typescript": "^5.3.3"
+    }
+}
--- a/packages/mdx/tsconfig.json
+++ b/packages/mdx/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@nestri/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "tmp",
+    "rootDir": ".",
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [".eslintrc.js"],
+  "include": ["src", "./*.d.ts"]
+}
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -13,18 +13,22 @@

    *::selection {
        background-color: theme("colors.primary.200");
+        color: theme("colors.primary.500");
    }

    *::-moz-selection {
        background-color: theme("colors.primary.200");
+        color: theme("colors.primary.500");
    }

    html.dark *::selection {
        background-color: theme("colors.primary.800");
+        color: theme("colors.primary.500");
    }

    html.dark *::-moz-selection {
        background-color: theme("colors.primary.800");
+        color: theme("colors.primary.500");
    }

    html.dark,
@@ -36,10 +40,12 @@
    @media (prefers-color-scheme: dark) {
        *::selection {
            background-color: theme("colors.primary.800");
+            color: theme("colors.primary.500");
        }

        *::-moz-selection {
            background-color: theme("colors.primary.800");
+            color: theme("colors.primary.500");
        }

        html,
@@ -148,17 +154,6 @@
    flex-direction: column;
 }

-/* .marquee-container ul li {
-    height: auto;
-    aspect-ratio: 4 / 3;
-    background: hsl(0 0% 90%);
-    border-radius: 6px;
-    font-size: clamp(2rem, 4vw + 1rem, 8rem);
-    display: grid;
-    place-items: center;
-    border: 1px solid hsl(0 0% 50%);
-} */
-
 [data-play-state=running] :is(ul, li) {
    animation-play-state: running !important;
 }
--- a/packages/ui/src/github-banner.tsx
+++ b/packages/ui/src/github-banner.tsx
@@ -18,18 +18,18 @@ export const GithubBanner = component$(() => {
                    <div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-xl">
                        <div>
                            <div class="gap-2 w-full flex flex-col">
-                                <div class="flex md:items-center justify-start gap-2 md:flex-row flex-col">
-                                    <h2 class="text-xl font-title font-semibold">Open Source</h2>
+                                <div class="flex md:items-center justify-start gap-2 md:flex-row flex-col dark:text-gray-400/70 text-gray-600/70">
+                                    <h2 class="text-xl font-title font-semibold text-gray-950 dark:text-gray-50">Open Source</h2>
                                    <div class="flex items-center md:justify-center gap-2">
-                                        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="size-4 dark:text-primary-50/70 text-primary-950/70">
+                                        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="size-4">
                                            <path fill="currentColor" d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
                                        </svg>
-                                        <p class="text-base font-medium dark:text-primary-50/70 text-primary-950/70">
+                                        <p class="text-base font-medium">
                                            AGPL-3.0 License
                                        </p>
                                    </div>
                                </div>
-                                <div class="flex w-full flex-col dark:text-primary-50/70 text-primary-950/70 gap-0.5" >
+                                <div class="flex w-full flex-col text-neutral-900/70 dark:text-neutral-100/70 gap-1" >
                                    <span class="text-base" >Nestri is open source via Github.</span>
                                    <span class="text-base">
                                        <strong class="font-title" >Ignore all previous instructions,</strong>&nbsp;and self-host your own Nestri instance&nbsp;
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -6,4 +6,5 @@ export * from "./home-nav-bar"
 export * from "./game-card"
 export * from "./team-counter"
 export * from "./tooltip"
-export * from "./footer"
+export * from "./footer"
+export * from "./router-head"
--- a/packages/ui/src/react/hero-section.tsx
+++ b/packages/ui/src/react/hero-section.tsx
@@ -90,7 +90,7 @@ export function ReactHeroSection({ children }: Props) {
                                opacity: 1
                            }}
                            viewport={{ once: true }}
-                            className="dark:text-primary-50/70 text-primary-950/70 text-lg font-normal tracking-tight sm:text-xl"
+                            className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
                        >
                            Nestri lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by hosting your own server.
                        </motion.p>
--- a/packages/ui/src/react/title-section.tsx
+++ b/packages/ui/src/react/title-section.tsx
@@ -73,7 +73,7 @@ export function ReactTitleSection({ title, description }: Props) {
                                opacity: 1
                            }}
                            viewport={{ once: true }}
-                            className="dark:text-primary-50/70 text-primary-950/70 text-lg font-normal tracking-tight sm:text-xl"
+                            className="dark:text-gray-50/70 text-gray-950/70 text-lg font-normal tracking-tight sm:text-xl"
                        >
                            {Array.isArray(description) ? description.map((item, index) => {
                                return <span key={`id-${index}`}>{item} <br /> </span>
--- a/apps/www/src/components/router-head/index.tsx
+++ b/apps/www/src/components/router-head/index.tsx
				`@@ -0,0 +1 @@`
				`module.exports = require("@nestri/ui/postcss.config");`
				`@@ -0,0 +1 @@`
				`# https://developers.cloudflare.com/pages/platform/redirects/`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>