docs: add ai top-level section

[DOCS-1226]: https://hasurahq.atlassian.net/browse/DOCS-1226?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10157
GitOrigin-RevId: c78f365c84fecadbe6f99735c2f9647b2d52e0ee

docs/docs/ai/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Hasura & AI",
+  "position": 45.5,
+  "customProps": {
+    "sidebar_pathname": "ai"
+  }
+}

docs/docs/ai/integrations/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Integrations",
+  "position": 2
+}

docs/docs/ai/integrations/index.mdx

@@ -0,0 +1,24 @@
+---
+description: Integrate Hasura with AI and ML services
+keywords:
+  - hasura
+  - docs
+  - ai
+  - ml
+  - llm
+  - artificial intelligence
+  - gpt
+  - openai
+slug: index
+sidebar_position: 1
+---
+
+import Thumbnail from '@site/src/components/Thumbnail';
+
+# AI Integrations
+
+Hasura can be integrated with AI and ML services to build intelligent applications. This section covers some of the
+popular integrations.
+
+- [Deploy a Jupyter Notebook to vectorize data and handle events](/ai/integrations/jupyter-notebooks.mdx)
+- [Build a full-stack app with Hasura and OpenAI](https://hasura.io/learn/graphql/vectordbs/introduction/)

docs/docs/ai/overview.mdx

@@ -0,0 +1,75 @@
+---
+description: Integrating Hasura with AI/ML services
+sidebar_label: Overview
+title: 'Hasura & AI'
+keywords:
+  - hasura
+  - docs
+  - ai
+  - ml
+  - llm
+  - artificial intelligence
+  - gpt
+  - openai
+sidebar_position: 1
+hide_table_of_contents: true
+---
+
+import HeadingIcon from '@site/src/components/HeadingIcon';
+import VersionedLink from '@site/src/components/VersionedLink';
+import AI from '@site/static/icons/features/ai-bot.svg';
+
+# <AI /> Hasura & AI
+
+<div className="overview-header">
+  <div className="overview-text">
+    <p>
+      In modern software development, maintaining a competitive edge involves harnessing the full potential of AI and
+      seamless, secure data connectivity. Hasura acts as your gateway, securely integrating your data with cutting-edge
+      AI models.
+    </p>
+    <p>
+      With the effortless deployment of custom connectors using the Hasura CLI and Hasura Cloud, you can quickly
+      integrate a diverse range of data sources, from relational to vector, and revolutionize your application's
+      capabilities.
+    </p>
+    <h4>Quick Links</h4>
+    <ul>
+      <li>
+        <VersionedLink to="/hasura-cli/connector-plugin/">Deploy a custom connector in 60 seconds.</VersionedLink>
+      </li>
+      <li>
+        <VersionedLink to="/databases/vector-databases/">Learn more about vector databases.</VersionedLink>
+      </li>
+    </ul>
+  </div>
+  <iframe
+    src="https://youtube.com/embed/Kvy9v8pVk8o"
+    frameBorder="0"
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  />
+</div>
+
+## Integrating Hasura with AI/ML services
+
+<div className="overview-gallery">
+  <VersionedLink to="/ai/integrations/index/">
+    <div className="card">
+      <h3>Integrations</h3>
+      <p>Check out the rapidly growing list of AI/ML services you can integrate with Hasura.</p>
+    </div>
+  </VersionedLink>
+  <VersionedLink to="/ai/integrations/jupyter-notebooks/">
+    <div className="card">
+      <h3>Jupyter Notebooks</h3>
+      <p>Deploy a Jupyter Notebook to auto-vectorize data.</p>
+    </div>
+  </VersionedLink>
+  <VersionedLink to="/databases/vector-databases/weaviate">
+    <div className="card">
+      <h3>Connect to Weaviate</h3>
+      <p>Add your Weaviate cluster as a data source to Hasura.</p>
+    </div>
+  </VersionedLink>
+</div>

docs/docs/databases/data-connectors/index.mdx

@@ -56,4 +56,4 @@ sources and use-cases.
 
 - [Add a Data Connector to Hasura](/databases/data-connectors/adding-data-connectors.mdx)
 - [Build a Data Connector for Hasura](/databases/data-connectors/data-connector-sdk.mdx)
-- [Deploy custom code to Hasura Cloud with Jupyter Notebooks](/jupyter-notebooks.mdx)
+- [Deploy custom code to Hasura Cloud with Jupyter Notebooks](/ai/integrations/jupyter-notebooks.mdx)

docs/src/css/overview-page.scss

@@ -19,8 +19,7 @@
 
 .overview-gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  justify-items: center;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 20px;
   margin-bottom: 20px;
   padding-bottom: 3rem;
@@ -28,6 +27,7 @@
 
   .card {
     min-height: 100%;
+    width: 100%;
     display: inline-block;
     text-decoration: none !important;
     h3 {

docs/static/icons/features/ai-bot.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 2.75H17C19.3472 2.75 21.25 4.65279 21.25 7V17C21.25 19.3472 19.3472 21.25 17 21.25H7C4.65279 21.25 2.75 19.3472 2.75 17V7C2.75 4.65279 4.65279 2.75 7 2.75Z" stroke="#0B89D0" stroke-width="1.5"/>
+<path d="M9 14V14C9 15.6569 10.3431 17 12 17V17C13.6569 17 15 15.6569 15 14V14" stroke="#0B89D0" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.44721 8.10557C6.786 7.428 7.47852 7 8.23607 7H15.7639C16.5215 7 17.214 7.428 17.5528 8.10557V8.10557C18.2177 9.43538 17.2507 11 15.7639 11H8.23607C6.7493 11 5.78231 9.43538 6.44721 8.10557V8.10557Z" stroke="#0B89D0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 7L10 11" stroke="#0B89D0" stroke-width="1.5"/>
+<path d="M14 7L14 11" stroke="#0B89D0" stroke-width="1.5"/>
+</svg>