updated README and documentation (first part) to match 0.6

docs/integration/astro.mdx

@@ -52,7 +52,7 @@ export const ALL = serve({
    }
 });
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide. In the
+For more information about the connection object, refer to the [Database](/usage/database) guide. In the
 special case of astro, you may also use your Astro DB credentials since it's also using LibSQL
 under the hood. Refer to the [Astro DB documentation](https://docs.astro.build/en/guides/astro-db/) for more information.
 

docs/integration/bun.mdx

@@ -27,7 +27,7 @@ serve({
    }
 });
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 Run the application using Bun by executing:
 ```bash

docs/integration/cloudflare.mdx

@@ -31,7 +31,7 @@ export default serve({
    })
 });
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 Now run the worker:
 ```bash

docs/integration/introduction.mdx

@@ -0,0 +1,94 @@
+---
+title: 'Introduction'
+description: 'Integrate bknd into your runtime/framework of choice'
+---
+
+import { cloudflare, nextjs, remix, astro, bun, node, docker, vite } from "/snippets/integration-icons.mdx"
+
+## Start with a Framework
+bknd seamlessly integrates with popular frameworks, allowing you to use what you're already familar with. The following guides will help you get started with your framework of choice.
+
+<CardGroup cols={2}>
+  <Card
+    title="Next.js"
+    icon={<div className="text-primary-light">{nextjs}</div>}
+    href="/integration/nextjs"
+  />
+  <Card
+    title="Remix"
+    icon={<div className="text-primary-light">{remix}</div>}
+    href="/integration/remix"
+  />
+   <Card
+      title="Astro"
+      icon={<div className="text-primary-light">{astro}</div>}
+      href="/integration/astro"
+   />
+   <Card
+      horizontal
+      title="Yours missing?"
+      href="https://github.com/bknd-io/bknd/issues/new"
+   >
+     Create a new issue to request a guide for your framework.
+   </Card>
+</CardGroup>
+
+## Start with a Runtime
+If you prefer to use a runtime instead of a framework, you can choose from the following options. These runtimes allow you to serve the API and UI in the runtime's native server and serve the UI assets statically from `node_modules`.
+
+<CardGroup cols={2}>
+   <Card
+      title="Node"
+      icon={<div className="text-primary-light">{node}</div>}
+      href="/integration/node"
+   />
+   <Card
+      title="Bun"
+      icon={<div className="text-primary-light">{bun}</div>}
+      href="/integration/bun"
+   />
+   <Card
+      title="Cloudflare"
+      icon={<div className="text-primary-light">{cloudflare}</div>}
+      href="/integration/cloudflare"
+   />
+   <Card
+      title="Vite"
+      icon={<div className="text-primary-light">{vite}</div>}
+      href="/integration/vite"
+   />
+   <Card
+      title="Docker"
+      icon={<div className="text-primary-light">{docker}</div>}
+      href="/integration/docker"
+   />
+   <Card
+      horizontal
+      title="Yours missing?"
+      href="https://github.com/bknd-io/bknd/issues/new"
+   >
+     Create a new issue to request a guide for your runtime.
+   </Card>
+</CardGroup>
+
+## Overview
+
+### Serving the backend (API)
+Serve the backend as an API for any JS runtime or framework. The latter is especially handy, as it allows you to deploy your frontend and backend bundled together. Furthermore it allows adding additional logic in a way you're already familar with. Just add another route and you're good to go.
+
+Here is an example of serving the API using node:
+```js index.js
+import { serve } from "bknd/adapter/node"
+serve();
+```
+
+### Serving the Admin UI
+The admin UI allows to manage your data including full configuration of your backend using a graphical user interface. Using `vite`, your admin route looks like this:
+```tsx admin.tsx
+import { Admin } from "bknd/ui"
+import "bknd/dist/styles.css";
+
+export default function AdminPage() {
+   return <Admin withProvider />
+}
+```

docs/integration/nextjs.mdx

@@ -28,7 +28,7 @@ export default serve({
    }
 });
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 ## Enabling the Admin UI
 Create a file `[[...admin]].tsx` inside the `pages/admin` folder:

docs/integration/node.mdx

@@ -29,7 +29,7 @@ const config = {
 
 serve(config);
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 Run the application using node by executing:
 ```bash

docs/integration/remix.mdx

@@ -26,7 +26,7 @@ const handler = serve({
 export const loader = handler;
 export const action = handler;
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 Now make sure that you wrap your root layout with the `ClientProvider` so that all components
 share the same context:

docs/integration/vite.mdx

@@ -33,7 +33,7 @@ export default serve({
    }
 })
 ```
-For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
+For more information about the connection object, refer to the [Database](/usage/database) guide.
 
 You can also run your vite server in `mode: "fresh"`, this will re-create the app on every fetch.
 This is only useful for when working on the `bknd` repository directly.