docs: added database overview

docs/introduction.mdx

@@ -2,11 +2,10 @@
 title: Introduction
 ---
 
-import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
+import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws, d1, libsql, sqlite, postgres, turso } from "/snippets/integration-icons.mdx"
 import { Stackblitz, examples } from "/snippets/stackblitz.mdx"
 
-Glad you're here! This is about **bknd**, a feature-rich backend that is so lightweight it could
-run on your toaster (probably).
+Glad you're here! **bknd** is a lightweight, infrastructure agnostic and feature-rich backend that runs in any JavaScript environment.
 
 ## Preview
 Here is a preview of **bknd** in StackBlitz:
@@ -91,3 +90,38 @@ in the future, so stay tuned!
      Create a new issue to request a guide for your runtime or framework.
    </Card>
 </CardGroup>
+
+## Use your favorite SQL Database
+The following databases are currently supported. Request a new integration if your favorite is missing.
+
+<CardGroup cols={2}>
+   <Card
+      title="LibSQL/SQLite"
+      icon={<div className="text-primary-light">{libsql}</div>}
+      href="/usage/database#database"
+   />
+   <Card
+      title="Turso"
+      icon={<div className="text-primary-light">{turso}</div>}
+      href="/usage/database#sqlite-using-libsql-on-turso"
+   />
+   <Card
+      title="PostgreSQL"
+      icon={<div className="text-primary-light">{postgres}</div>}
+      href="/usage/database#postgresql"
+   />
+   <Card
+      title="Cloudflare D1"
+      icon={<div className="text-primary-light">{d1}</div>}
+      href="/usage/database#cloudflare-d1"
+   />
+   <div style={{ gridColumn: "span 2" }}>
+      <Card
+         horizontal
+         title="Yours missing?"
+         href="https://github.com/bknd-io/bknd/issues/new"
+      >
+      Create a new issue to request a new database integration.
+      </Card>
+   </div>
+</CardGroup>