From 0d336418727b2ed00f47699ebc70779854921cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Monika=20Ksi=C4=85=C5=BCek?= <monika.ksiazek@ravendb.net>
Date: Thu, 4 Sep 2025 14:42:31 +0200
Subject: [PATCH 1/3] RDoc-3494 Feature-specific page

---
 src/components/Common/Badge.tsx               |  58 +++++
 src/components/Common/Button.tsx              |  21 +-
 src/components/Common/CardWithImage.tsx       |  34 ++-
 .../Common/CardWithImageHorizontal.tsx        |  56 +++++
 .../Homepage/UseCases/UseCaseItem.tsx         |   3 +-
 src/components/OneColGrid.tsx                 |  39 ++++
 src/components/ThreeColGrid.tsx               |  37 ++++
 src/components/TwoColGrid.tsx                 |  39 ++++
 src/components/VersionConditional.tsx         |  21 ++
 src/css/custom.css                            |   2 +
 templates/introduction.mdx                    | 198 ++++++++++++++++++
 11 files changed, 495 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Common/Badge.tsx
 create mode 100644 src/components/Common/CardWithImageHorizontal.tsx
 create mode 100644 src/components/OneColGrid.tsx
 create mode 100644 src/components/ThreeColGrid.tsx
 create mode 100644 src/components/TwoColGrid.tsx
 create mode 100644 src/components/VersionConditional.tsx
 create mode 100644 templates/introduction.mdx

diff --git a/src/components/Common/Badge.tsx b/src/components/Common/Badge.tsx
new file mode 100644
index 0000000000..703db45750
--- /dev/null
+++ b/src/components/Common/Badge.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Icon } from "./Icon";
+import { IconName } from "@site/src/typescript/iconName";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "default" | "secondary" | "outline" | "success" | "warning" | "destructive";
+  size?: "sm" | "md";
+  iconName?: IconName;
+  iconPosition?: "left" | "right";
+}
+
+const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
+  default: "bg-primary-light/80 backdrop-blur-xs !text-white rounded border border-primary/10",
+  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black rounded border border-gray-300/10 dark:border-secondary/10",
+  outline: "bg-stone-100/30 backdrop-blur-xs text-black rounded border border-black/70",
+  success: "bg-green-300/80 backdrop-blur-xs text-green-950 rounded border border-green-400/10",
+  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 rounded border border-orange-400/10",
+  destructive: "bg-red-300/80 bacdrop-blur-xs text-red-950 rounded border border-red-400/10",
+}
+
+const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
+  sm: "text-[11px] leading-4 h-5 px-2",
+  md: "text-xs leading-5 h-6 px-2.5",
+};
+
+export default function Badge({
+  children,
+  className = "",
+  variant = "secondary",
+  size = "sm",
+  iconName,
+  iconPosition = "left",
+  ...props
+}: BadgeProps) {
+  const baseClasses = clsx(
+    "inline-flex items-center gap-1 select-none",
+    "font-medium",
+    "rounded-full",
+    variantClasses[variant],
+    sizeClasses[size],
+    className,
+  );
+
+  const iconElement = iconName ? <Icon icon={iconName} size="xs" className="shrink-0" /> : null;
+
+  return (
+    <span className={baseClasses} {...props}>
+      {iconElement && iconPosition === "left" && iconElement}
+      <span>{children}</span>
+      {iconElement && iconPosition === "right" && iconElement}
+    </span>
+  );
+}
+
+
diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
index abe594dfe8..1caf5cd538 100644
--- a/src/components/Common/Button.tsx
+++ b/src/components/Common/Button.tsx
@@ -1,18 +1,23 @@
 import * as React from "react";
 import Link from "@docusaurus/Link";
 import clsx from "clsx";
+import { IconName } from "@site/src/typescript/iconName";
+import { Icon } from "./Icon";
+import isInternalUrl from "@docusaurus/isInternalUrl";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   url?: string;
   className?: string;
-  variant?: "default" | "outline" | "ghost" | "destructive";
+  variant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
   size?: "sm" | "md" | "lg";
+  iconName?: IconName;
 }
 
 const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
   default: "bg-primary !text-white dark:!text-black hover:bg-primary-darker",
+  secondary: "bg-gray-300 hover:bg-gray-400 dark:bg-secondary !text-black dark:hover:bg-secondary-darker",
   outline:
     "border !text-black border-black/25 !text-foreground hover:bg-black/5 dark:!text-white dark:border-white/25 dark:hover:bg-white/5",
   ghost: "hover:bg-muted !text-foreground",
@@ -29,8 +34,9 @@ export default function Button({
   children,
   url,
   className = "",
-  variant = "default",
+  variant = "secondary",
   size = "md",
+  iconName,
   ...props
 }: ButtonProps) {
   const baseClasses = clsx(
@@ -43,16 +49,21 @@ export default function Button({
   );
 
   if (url) {
+    const external = !isInternalUrl(url);
     return (
-      <Link to={url} className={baseClasses}>
-        {children}
+      <Link
+        {...(external ? { href: url } : { to: url })}
+        className={baseClasses}
+      >
+        {children} {iconName && <Icon icon={iconName} />}
+        {external && <Icon icon="newtab" className="ml-2" size="xs"/>}
       </Link>
     );
   }
 
   return (
     <button className={baseClasses} {...props}>
-      {children}
+      {children} {iconName && <Icon icon={iconName} />}
     </button>
   );
 }
diff --git a/src/components/Common/CardWithImage.tsx b/src/components/Common/CardWithImage.tsx
index 4045f25c5b..b66c7093ca 100644
--- a/src/components/Common/CardWithImage.tsx
+++ b/src/components/Common/CardWithImage.tsx
@@ -1,6 +1,10 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
 import Button from "@site/src/components/Common/Button";
+import { Icon } from "@site/src/components/Common/Icon";
+import { IconName } from "@site/src/typescript/iconName";
+import Badge from "@site/src/components/Common/Badge";
+import isInternalUrl from "@docusaurus/isInternalUrl";
 
 export interface CardWithImageProps {
   title: string;
@@ -8,7 +12,10 @@ export interface CardWithImageProps {
   imgSrc: string;
   imgAlt?: string;
   url?: string;
+  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
   ctaLabel?: string;
+  iconName?: IconName;
+  imgIcon?: IconName;
 }
 
 export default function CardWithImage({
@@ -17,23 +24,36 @@ export default function CardWithImage({
   imgSrc,
   imgAlt = "",
   url,
+  buttonVariant = "secondary",
   ctaLabel = "Read now",
+  iconName,
+  imgIcon,
 }: CardWithImageProps) {
+  const hasImage = Boolean(imgSrc);
   return (
     <div className="card group flex flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className="flex items-center justify-center rounded-xl bg-black/40 mb-4 overflow-hidden">
-        <img
-          src={imgSrc}
-          alt={imgAlt}
-          className="pointer-events-none object-cover transition-transform origin-bottom duration-500 group-hover:scale-105 group-hover:translate-y-1"
-        />
+      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative h-[132.96px] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
+        {hasImage ? (
+          <img
+            src={imgSrc}
+            alt={imgAlt}
+            className="pointer-events-none w-full h-full object-cover object-center transition-transform origin-bottom duration-500 group-hover:scale-105 group-hover:translate-y-1"
+          />
+        ) : (
+          <Icon icon={imgIcon ?? "default"} size="xl" className="filter brightness-0 invert" />
+        )}
+        {url && !isInternalUrl(url) && (
+          <Badge className="absolute top-2 right-2" variant="default" size="sm">
+            External
+          </Badge>
+        )}
       </div>
       <Heading as="h4" className="!mb-2">
         {title}
       </Heading>
       <p className="!mb-3 text-sm">{description}</p>
       {url && (
-        <Button variant="default" url={url} className="mt-auto">
+        <Button variant={buttonVariant} url={url} className="mt-auto">
           {ctaLabel}
         </Button>
       )}
diff --git a/src/components/Common/CardWithImageHorizontal.tsx b/src/components/Common/CardWithImageHorizontal.tsx
new file mode 100644
index 0000000000..10aa711568
--- /dev/null
+++ b/src/components/Common/CardWithImageHorizontal.tsx
@@ -0,0 +1,56 @@
+import React, { ReactNode } from "react";
+import Heading from "@theme/Heading";
+import Button from "@site/src/components/Common/Button";
+import { IconName } from "@site/src/typescript/iconName";
+import Badge from "@site/src/components/Common/Badge";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+
+export interface CardWithImageHorizontalProps {
+  title: string;
+  description: ReactNode;
+  imgSrc: string;
+  imgAlt?: string;
+  url?: string;
+  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  ctaLabel?: string;
+  iconName?: IconName;
+}
+
+export default function CardWithImageHorizontal({
+  title,
+  description,
+  imgSrc,
+  imgAlt = "",
+  url,
+  buttonVariant = "secondary",
+  ctaLabel = "Read now",
+  iconName,
+}: CardWithImageHorizontalProps) {
+  return (
+    <div className="card group flex !flex-row items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
+      <div className="basis-1/3 flex-shrink-0 overflow-hidden rounded-xl relative flex items-center">
+        <img
+          src={imgSrc}
+          alt={imgAlt}
+          className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
+        />
+        {url && !isInternalUrl(url) && (
+          <Badge className="absolute top-2 right-2" variant="default" size="sm">
+            External
+          </Badge>
+        )}
+      </div>
+      <div className="flex flex-col flex-1 min-w-0 justify-center items-start gap-1">
+        <Heading as="h4" className="!mb-1">
+          {title}
+        </Heading>
+        <p className="!mb-3 text-sm">{description}</p>
+        {url && (
+          <Button variant={buttonVariant} size="sm" url={url} className="self-start">
+            {ctaLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Homepage/UseCases/UseCaseItem.tsx b/src/components/Homepage/UseCases/UseCaseItem.tsx
index af74916178..e4c4273b89 100644
--- a/src/components/Homepage/UseCases/UseCaseItem.tsx
+++ b/src/components/Homepage/UseCases/UseCaseItem.tsx
@@ -12,6 +12,7 @@ export default function UseCaseItem(props: CardWithImageProps) {
       imgSrc={imgSrc}
       imgAlt={imgAlt}
       ctaLabel={ctaLabel}
-    />
+      buttonVariant="default"
+      />
   );
 }
diff --git a/src/components/OneColGrid.tsx b/src/components/OneColGrid.tsx
new file mode 100644
index 0000000000..bc84c42821
--- /dev/null
+++ b/src/components/OneColGrid.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export interface OneColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  gap?: "sm" | "md" | "lg";
+  equalHeight?: boolean;
+}
+
+const gapClasses: Record<NonNullable<OneColGridProps["gap"]>, string> = {
+  sm: "gap-4",
+  md: "gap-6",
+  lg: "gap-8",
+};
+
+export default function OneColGrid({
+  children,
+  className = "",
+  gap = "sm",
+  equalHeight = false,
+  ...props
+}: OneColGridProps) {
+  return (
+    <div
+      className={clsx(
+        "grid grid-cols-1",
+        gapClasses[gap],
+        equalHeight && "[&>*]:h-full",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+
diff --git a/src/components/ThreeColGrid.tsx b/src/components/ThreeColGrid.tsx
new file mode 100644
index 0000000000..63d1fd93ed
--- /dev/null
+++ b/src/components/ThreeColGrid.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export interface ThreeColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  gap?: "sm" | "md" | "lg";
+  equalHeight?: boolean;
+}
+
+const gapClasses: Record<NonNullable<ThreeColGridProps["gap"]>, string> = {
+  sm: "gap-4",
+  md: "gap-6",
+  lg: "gap-8",
+};
+
+export default function ThreeColGrid({
+  children,
+  className = "",
+  gap = "sm",
+  equalHeight = false,
+  ...props
+}: ThreeColGridProps) {
+  return (
+    <div
+      className={clsx(
+        "grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))]",
+        gapClasses[gap],
+        equalHeight && "[&>*]:h-full",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/TwoColGrid.tsx b/src/components/TwoColGrid.tsx
new file mode 100644
index 0000000000..2e19feea1c
--- /dev/null
+++ b/src/components/TwoColGrid.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export interface TwoColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  gap?: "sm" | "md" | "lg";
+  equalHeight?: boolean;
+}
+
+const gapClasses: Record<NonNullable<TwoColGridProps["gap"]>, string> = {
+  sm: "gap-4",
+  md: "gap-6",
+  lg: "gap-8",
+};
+
+export default function TwoColGrid({
+  children,
+  className = "",
+  gap = "sm",
+  equalHeight = false,
+  ...props
+}: TwoColGridProps) {
+  return (
+    <div
+      className={clsx(
+        "grid grid-cols-1 sm:grid-cols-2",
+        gapClasses[gap],
+        equalHeight && "[&>*]:h-full",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+
diff --git a/src/components/VersionConditional.tsx b/src/components/VersionConditional.tsx
new file mode 100644
index 0000000000..18d34d8df9
--- /dev/null
+++ b/src/components/VersionConditional.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
+
+interface VersionConditionalProps {
+  minimumVersion: string;
+  children: ReactNode;
+}
+
+export default function VersionConditional({
+  minimumVersion,
+  children,
+}: VersionConditionalProps) {
+  const pluginId = "default";
+  const { activeVersion } = useActiveDocContext(pluginId);
+
+  if (minimumVersion > activeVersion.label) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 13d5118bf9..8e2b9bcca5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -103,6 +103,8 @@
   --color-primary-light: var(--ifm-color-primary-light);
   --color-primary-lighter: var(--ifm-color-primary-lighter);
   --color-primary-lightest: var(--ifm-color-primary-lightest);
+  --color-secondary: var(--ifm-color-secondary);
+  --color-secondary-darker: var(--ifm-color-secondary-darker);
   --color-ifm-background: var(--ifm-background-color);
   --color-ifm-background-surface: var(--ifm-background-surface-color);
   --color-ifm-menu: var(--ifm-menu-color);
diff --git a/templates/introduction.mdx b/templates/introduction.mdx
new file mode 100644
index 0000000000..f891c618ee
--- /dev/null
+++ b/templates/introduction.mdx
@@ -0,0 +1,198 @@
+import CardWithImage from '@site/src/components/Common/CardWithImage';
+import CardWithImageHorizontal from '@site/src/components/Common/CardWithImageHorizontal';
+import TwoColGrid from '@site/src/components/TwoColGrid';
+import ThreeColGrid from '@site/src/components/ThreeColGrid';
+import OneColGrid from '@site/src/components/OneColGrid';
+
+# AI Overview
+Use RavenDB to ship AI functionalities faster
+
+## Keep AI data flow in your database layer
+RavenDB lets you ship AI features without any duct-taped extra services. Our AI ecosystem keeps your data, AI
+pipelines, and retrieval in one place, effectively keeping your application layer thin - and letting you to focus on
+improving your app, not on reinventing the wheel. 
+
+Our database offers plenty of **robust, flexible, and easy-to-use** AI features tailored to your needs. You can either use
+one or combine them - on top of both new and existing databases.
+
+## Use cases
+RavenDB AI Integration can help to ship any AI-related scenarios, including:
+* **Search & discovery** - Help users find things by meaning across docs, products, and media
+* **Conversational interfaces** - Natural-language access to your data with safe, scoped actions
+* **Content understanding & classification** - Auto-tagging, topic extraction, taxonomy mapping, entity linking
+* **Workflow automation** - Trigger safe actions from AI insights (drafts, exports, updates)
+* **Knowledge management (RAG)** - Ask questions over policies, wikis, and PDFs; store answers + citations
+* **Personalization & recommendations** - Behavioral + semantic relevance for feeds, items, and knowledge
+* & many more..
+
+Inspire yourself with our articles & learn more:
+
+<TwoColGrid>
+<CardWithImage
+      title="Enable AI Search in your web app in minutes"
+      description="Discover how RavenDB lets you add semantic search with vector embeddings and smarter results to your web app."
+      url="https://ravendb.net/articles/enable-ai-search-in-your-web-app-in-5-minutes"
+      imgSrc="https://ravendb.net/wp-content/uploads/2025/04/enable-ai-search-cover-530x240.jpg"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="Use RavenDB AI Agents to automate HR "
+      description="Learn how you can use RavenDB AI Agents - a powerful, secured, flexible and easy-to-use template, and get inspired."
+      url="url"
+      imgIcon="ai-agents"
+      imgAlt="imgAlt"
+      buttonVariant="secondary"
+      ctaLabel="Read now"
+    />
+</TwoColGrid>
+
+## AI Agents
+Conversational interfaces made simple - give your app a safe, tool-driven assistant that reads only what you allow and performs supervised actions right on top of your RavenDB data (7.1.2+)
+
+<TwoColGrid>
+<CardWithImage
+      title="AI Agents - Introduction"
+      description="What agents are, when to use them, and how they can enhance your application experience to your users - no matter if you need conversational experience for customers, or employees."
+      url="link"
+      imgIcon="ai-agents"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="AI Agents - Technical Overview"
+      description="Define Query tools (parameterized RQL) and Action tools (your handlers), wire chat trimming & memory, scope with parameters, run from SDKs, and debug in Studio"
+      url="url"
+      imgIcon="ai-agents"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+</TwoColGrid>
+
+
+## GenAI
+Use reasoning at scale - run LLM jobs inside the database: define context, prompt, and output schema then write results back with update scripts for governed, repeatable transforms (7.1+)
+
+<TwoColGrid>
+<CardWithImage
+      title="GenAI - Introduction"
+      description="Why in-DB GenAI: simpler pipelines, stronger governance, model freedom. Great for summaries, classification, tagging, translations, and enrichment."
+      url="link"
+      imgIcon="genai"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="GenAI - Technical Overview"
+      description="Task lifecycle, context shaping, prompt templating, JSON output validation, update scripts, retries, provider connection strings, plus Studio wizard & step playgrounds."
+      url="url"
+      imgIcon="genai"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+</TwoColGrid>
+
+## Vector Search
+Search by meaning - perform semantic queries in RavenDB whether on-the-fly with dynamic RQL, via precomputed static indexes, or by indexing attachment contents to unlock fast, context-aware insights. (7.0+)
+
+<TwoColGrid>
+<CardWithImage
+      title="Vector Search - Introduction"
+      description="See how Vector Search can enhance your application in various ways, and how to effectively supercharge your system by using it"
+      url="link"
+      imgIcon="vector-search"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="Vector Search - Technical Overview"
+      description="Explore technical part of vector search - how to enable it, query with it, and how to configure it s nuances to cover any semantic search scenario."
+      url="url"
+      imgIcon="vector-search"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+</TwoColGrid>
+
+## Embeddings generation
+Keep your collections semantic-ready with a server-side task that batches, caches, and stores embeddings from your chosen model/provider (7.0.1+)
+
+<TwoColGrid>
+<CardWithImage
+      title="Embeddings Generation - Introduction"
+      description="What embeddings tasks do, when to use them, and how they unlock semantic search, recommendations, and knowledge retrieval with minimal setup."
+      url="link"
+      imgIcon="ai-etl"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="Embeddings Generation - Technical Overview"
+      description="Configure per-collection fields and dimensions, choose your provider (or use built-in bge-micro-v2), handle attachments, and tune batching/caching behavior for cost and throughput."
+      url="url"
+      imgIcon="ai-etl"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+</TwoColGrid>
+
+## Lives & videos
+Explore our engaging livestreams and videos that delve into the fascinating world of AI integration.
+
+<OneColGrid>
+<CardWithImageHorizontal
+      title="Practical AI Integration with RavenDB (webinar recording)"
+      description="A comprehensive walkthrough of RavenDBs AI features, showcasing demos to help you start with semantic search."
+      url="https://youtu.be/7DhbgfH_rSE?feature=shared"
+      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc"
+      imgAlt="imgAlt"
+      ctaLabel="Watch now"
+    />
+<CardWithImageHorizontal
+      title="Data Pipelines for the AI Era Federico Lois, RavenDB | TechEx North America 2025"
+      description="Watch Discord session where the RavenDB team discusses and demos AI integration patterns and best practices."
+      url="https://www.youtube.com/watch?app=desktop&v=ouzcY0Jcgs4&t=180s"
+      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQHeODBz0193ng/image-shrink_1280/B4DZd9C5bfGgAM-/0/1750149601848?e=2147483647&v=beta&t=_oResTLauIWsjkqBuDSleu-3F8cDSQx76w06OZxc4PY"
+      imgAlt="imgAlt"
+      ctaLabel="Watch now"
+    />
+<CardWithImageHorizontal
+      title="[LIVE] COD#5 GenAI & MCP"
+      description="Dive into RavenDBs vector search capabilities with community-driven discussion on implementation tips."
+      url="https://www.youtube.com/watch?v=cRuwSz8x41s"
+      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc"
+      imgAlt="imgAlt"
+      ctaLabel="Watch now"
+    />
+</OneColGrid>
+
+## Deep dives, content & resources
+Here, you ll find a wealth of materials designed to enhance your knowledge and skills.
+
+<ThreeColGrid>
+<CardWithImage
+      title="GitHub repository: AI Search Next.js App"
+      description="A sample Next.js application demonstrating end-to-end integration of RavenDBs AI-powered semantic search."
+      imgSrc="https://ravendb.net/wp-content/uploads/2024/08/next-js-logo.png"
+      url="https://github.com/ravendb/samples-nextjs"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="Article: Vector Search by Maciej Aszyk"
+      description="An overview of RavenDB 7.0’s vector search capabilities, from dynamic RQL queries to static-index performance optimizations."
+      url="https://ravendb.net/articles/new-in-7-0-ravendbs-vector-search"
+      imgSrc="https://ravendb.net/wp-content/uploads/2025/02/vector-search-article-cover-530x240.jpg"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+<CardWithImage
+      title="Blogpost from ayende.com website blog"
+      description="A deep-dive blog post on real-world AI use cases in RavenDB, with code patterns, demos, and best practices. Jump right in!"
+      url="https://ayende.com/blog/202851-C/ravendb-7-1-the-gen-ai-release"
+      imgIcon="ai-agents"
+      imgAlt="imgAlt"
+      ctaLabel="Read now"
+    />
+</ThreeColGrid>
+ 
\ No newline at end of file

From 97aa8cd4ed7cbcd92b7ea5c9e4313aa23d8d3dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Monika=20Ksi=C4=85=C5=BCek?= <monika.ksiazek@ravendb.net>
Date: Fri, 12 Sep 2025 11:20:23 +0200
Subject: [PATCH 2/3] Code adjustments

---
 src/components/Common/Badge.tsx                | 12 ++++++------
 src/components/Common/Button.tsx               | 18 +++++++++++++-----
 src/components/Common/CardWithImage.tsx        |  6 +++---
 .../Common/CardWithImageHorizontal.tsx         | 14 +++++++-------
 src/components/OneColGrid.tsx                  |  1 -
 src/components/ThreeColGrid.tsx                |  1 -
 src/components/TwoColGrid.tsx                  |  1 -
 templates/introduction.mdx                     |  8 +++++++-
 8 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/components/Common/Badge.tsx b/src/components/Common/Badge.tsx
index 703db45750..7a6c055d98 100644
--- a/src/components/Common/Badge.tsx
+++ b/src/components/Common/Badge.tsx
@@ -13,12 +13,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 
 const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
-  default: "bg-primary-light/80 backdrop-blur-xs !text-white rounded border border-primary/10",
-  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black rounded border border-gray-300/10 dark:border-secondary/10",
-  outline: "bg-stone-100/30 backdrop-blur-xs text-black rounded border border-black/70",
-  success: "bg-green-300/80 backdrop-blur-xs text-green-950 rounded border border-green-400/10",
-  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 rounded border border-orange-400/10",
-  destructive: "bg-red-300/80 bacdrop-blur-xs text-red-950 rounded border border-red-400/10",
+  default: "bg-primary-light/80 backdrop-blur-xs text-white border border-primary/10 dark:text-black",
+  secondary: "bg-gray-200/70 backdrop-blur-xs text-black dark:bg-secondary/70 dark:text-black border border-gray-300/10 dark:border-secondary/10",
+  outline: "bg-stone-100/30 backdrop-blur-xs text-black border border-black/70",
+  success: "bg-green-300/80 backdrop-blur-xs text-green-950 border border-green-400/10",
+  warning: "bg-orange-300/80 backdrop-blur-xs text-orange-950 border border-orange-400/10",
+  destructive: "bg-red-300/80 backdrop-blur-xs text-red-950 border border-red-400/10",
 }
 
 const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
index 1caf5cd538..286540468d 100644
--- a/src/components/Common/Button.tsx
+++ b/src/components/Common/Button.tsx
@@ -5,17 +5,25 @@ import { IconName } from "@site/src/typescript/iconName";
 import { Icon } from "./Icon";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 
+export type ButtonVariant =
+| "default"
+| "outline" 
+| "ghost" 
+| "destructive" 
+| "secondary";
+
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   url?: string;
   className?: string;
-  variant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  variant?: ButtonVariant;
   size?: "sm" | "md" | "lg";
   iconName?: IconName;
 }
 
-const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
+const variantClasses: Record<ButtonVariant, string> = {
   default: "bg-primary !text-white dark:!text-black hover:bg-primary-darker",
   secondary: "bg-gray-300 hover:bg-gray-400 dark:bg-secondary !text-black dark:hover:bg-secondary-darker",
   outline:
@@ -49,14 +57,14 @@ export default function Button({
   );
 
   if (url) {
-    const external = !isInternalUrl(url);
+    const isExternal = !isInternalUrl(url);
     return (
       <Link
-        {...(external ? { href: url } : { to: url })}
+        {...(isExternal ? { href: url } : { to: url })}
         className={baseClasses}
       >
         {children} {iconName && <Icon icon={iconName} />}
-        {external && <Icon icon="newtab" className="ml-2" size="xs"/>}
+        {isExternal && <Icon icon="newtab" className="ml-2" size="xs"/>}
       </Link>
     );
   }
diff --git a/src/components/Common/CardWithImage.tsx b/src/components/Common/CardWithImage.tsx
index b66c7093ca..d1012f23fb 100644
--- a/src/components/Common/CardWithImage.tsx
+++ b/src/components/Common/CardWithImage.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
-import Button from "@site/src/components/Common/Button";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
 import { Icon } from "@site/src/components/Common/Icon";
 import { IconName } from "@site/src/typescript/iconName";
 import Badge from "@site/src/components/Common/Badge";
@@ -12,7 +12,7 @@ export interface CardWithImageProps {
   imgSrc: string;
   imgAlt?: string;
   url?: string;
-  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  buttonVariant?: ButtonVariant;
   ctaLabel?: string;
   iconName?: IconName;
   imgIcon?: IconName;
@@ -32,7 +32,7 @@ export default function CardWithImage({
   const hasImage = Boolean(imgSrc);
   return (
     <div className="card group flex flex-col overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative h-[132.96px] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
+      <div className={`flex items-center justify-center rounded-xl mb-4 overflow-hidden relative aspect-[79/24] ${hasImage ? "bg-black/40" : "bg-gradient-to-b from-[#204879] to-[#0F1425] to-[70%]"}`}> 
         {hasImage ? (
           <img
             src={imgSrc}
diff --git a/src/components/Common/CardWithImageHorizontal.tsx b/src/components/Common/CardWithImageHorizontal.tsx
index 10aa711568..d413cc3821 100644
--- a/src/components/Common/CardWithImageHorizontal.tsx
+++ b/src/components/Common/CardWithImageHorizontal.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import Heading from "@theme/Heading";
-import Button from "@site/src/components/Common/Button";
+import Button, { type ButtonVariant } from "@site/src/components/Common/Button";
 import { IconName } from "@site/src/typescript/iconName";
 import Badge from "@site/src/components/Common/Badge";
 import isInternalUrl from "@docusaurus/isInternalUrl";
@@ -11,7 +11,7 @@ export interface CardWithImageHorizontalProps {
   imgSrc: string;
   imgAlt?: string;
   url?: string;
-  buttonVariant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
+  buttonVariant?: ButtonVariant;
   ctaLabel?: string;
   iconName?: IconName;
 }
@@ -27,8 +27,8 @@ export default function CardWithImageHorizontal({
   iconName,
 }: CardWithImageHorizontalProps) {
   return (
-    <div className="card group flex !flex-row items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className="basis-1/3 flex-shrink-0 overflow-hidden rounded-xl relative flex items-center">
+    <div className="card group !grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
+      <div className="aspect-[400/209] overflow-hidden rounded-xl relative flex items-center">
         <img
           src={imgSrc}
           alt={imgAlt}
@@ -40,17 +40,17 @@ export default function CardWithImageHorizontal({
           </Badge>
         )}
       </div>
-      <div className="flex flex-col flex-1 min-w-0 justify-center items-start gap-1">
+      <div className="flex flex-col min-w-0 justify-center gap-1">
         <Heading as="h4" className="!mb-1">
           {title}
         </Heading>
         <p className="!mb-3 text-sm">{description}</p>
         {url && (
-          <Button variant={buttonVariant} size="sm" url={url} className="self-start">
+          <Button variant={buttonVariant} url={url}>
             {ctaLabel}
           </Button>
         )}
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/OneColGrid.tsx b/src/components/OneColGrid.tsx
index bc84c42821..7ac9585c14 100644
--- a/src/components/OneColGrid.tsx
+++ b/src/components/OneColGrid.tsx
@@ -26,7 +26,6 @@ export default function OneColGrid({
       className={clsx(
         "grid grid-cols-1",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}
diff --git a/src/components/ThreeColGrid.tsx b/src/components/ThreeColGrid.tsx
index 63d1fd93ed..db6b3e66a3 100644
--- a/src/components/ThreeColGrid.tsx
+++ b/src/components/ThreeColGrid.tsx
@@ -26,7 +26,6 @@ export default function ThreeColGrid({
       className={clsx(
         "grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))]",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}
diff --git a/src/components/TwoColGrid.tsx b/src/components/TwoColGrid.tsx
index 2e19feea1c..5be6f9fcf1 100644
--- a/src/components/TwoColGrid.tsx
+++ b/src/components/TwoColGrid.tsx
@@ -26,7 +26,6 @@ export default function TwoColGrid({
       className={clsx(
         "grid grid-cols-1 sm:grid-cols-2",
         gapClasses[gap],
-        equalHeight && "[&>*]:h-full",
         className,
       )}
       {...props}
diff --git a/templates/introduction.mdx b/templates/introduction.mdx
index f891c618ee..7d4d587277 100644
--- a/templates/introduction.mdx
+++ b/templates/introduction.mdx
@@ -1,3 +1,9 @@
+---
+title: "AI Overview"
+hide_table_of_contents: true
+sidebar_label: AI Overview
+---
+
 import CardWithImage from '@site/src/components/Common/CardWithImage';
 import CardWithImageHorizontal from '@site/src/components/Common/CardWithImageHorizontal';
 import TwoColGrid from '@site/src/components/TwoColGrid';
@@ -23,7 +29,7 @@ RavenDB AI Integration can help to ship any AI-related scenarios, including:
 * **Workflow automation** - Trigger safe actions from AI insights (drafts, exports, updates)
 * **Knowledge management (RAG)** - Ask questions over policies, wikis, and PDFs; store answers + citations
 * **Personalization & recommendations** - Behavioral + semantic relevance for feeds, items, and knowledge
-* & many more..
+* & many more...
 
 Inspire yourself with our articles & learn more:
 

From 62babfd664dff4eacd3548bd7ccf7fb94c480ce4 Mon Sep 17 00:00:00 2001
From: Mateusz Bartosik <mateusz@ravendb.net>
Date: Fri, 12 Sep 2025 14:22:28 +0200
Subject: [PATCH 3/3] Unified ColGrid component, VersionConditional adjustments

---
 src/components/ColGrid.tsx                    |  39 ++++
 .../Common/CardWithImageHorizontal.tsx        |  91 ++++----
 src/components/OneColGrid.tsx                 |  38 ----
 src/components/ThreeColGrid.tsx               |  36 ---
 src/components/TwoColGrid.tsx                 |  38 ----
 src/components/VersionConditional.tsx         |  26 ++-
 templates/introduction.mdx                    | 209 +++++-------------
 7 files changed, 152 insertions(+), 325 deletions(-)
 create mode 100644 src/components/ColGrid.tsx
 delete mode 100644 src/components/OneColGrid.tsx
 delete mode 100644 src/components/ThreeColGrid.tsx
 delete mode 100644 src/components/TwoColGrid.tsx

diff --git a/src/components/ColGrid.tsx b/src/components/ColGrid.tsx
new file mode 100644
index 0000000000..6051d5d66d
--- /dev/null
+++ b/src/components/ColGrid.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import clsx from "clsx";
+
+export type GridColCount = 1 | 2 | 3;
+
+export interface ColGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    colCount: GridColCount;
+}
+
+function getGridColsClass(colCount: GridColCount): string {
+    if (colCount === 1) {
+        return "grid grid-cols-1";
+    }
+    if (colCount === 2) {
+        return "grid grid-cols-1 sm:grid-cols-2";
+    }
+    if (colCount === 3) {
+        return "grid grid-cols-1 xl:grid-cols-3";
+    }
+    return "";
+}
+
+export default function ColGrid({
+    children,
+    className = "",
+    colCount = 1,
+    ...props
+}: ColGridProps) {
+    return (
+        <div
+            className={clsx(getGridColsClass(colCount), "gap-4", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}
diff --git a/src/components/Common/CardWithImageHorizontal.tsx b/src/components/Common/CardWithImageHorizontal.tsx
index d413cc3821..6b21d6271f 100644
--- a/src/components/Common/CardWithImageHorizontal.tsx
+++ b/src/components/Common/CardWithImageHorizontal.tsx
@@ -6,51 +6,54 @@ import Badge from "@site/src/components/Common/Badge";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 
 export interface CardWithImageHorizontalProps {
-  title: string;
-  description: ReactNode;
-  imgSrc: string;
-  imgAlt?: string;
-  url?: string;
-  buttonVariant?: ButtonVariant;
-  ctaLabel?: string;
-  iconName?: IconName;
+    title: string;
+    description: ReactNode;
+    imgSrc: string;
+    imgAlt?: string;
+    url?: string;
+    buttonVariant?: ButtonVariant;
+    ctaLabel?: string;
+    iconName?: IconName;
 }
 
 export default function CardWithImageHorizontal({
-  title,
-  description,
-  imgSrc,
-  imgAlt = "",
-  url,
-  buttonVariant = "secondary",
-  ctaLabel = "Read now",
-  iconName,
+    title,
+    description,
+    imgSrc,
+    imgAlt = "",
+    url,
+    buttonVariant = "secondary",
+    ctaLabel = "Read now",
 }: CardWithImageHorizontalProps) {
-  return (
-    <div className="card group !grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
-      <div className="aspect-[400/209] overflow-hidden rounded-xl relative flex items-center">
-        <img
-          src={imgSrc}
-          alt={imgAlt}
-          className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
-        />
-        {url && !isInternalUrl(url) && (
-          <Badge className="absolute top-2 right-2" variant="default" size="sm">
-            External
-          </Badge>
-        )}
-      </div>
-      <div className="flex flex-col min-w-0 justify-center gap-1">
-        <Heading as="h4" className="!mb-1">
-          {title}
-        </Heading>
-        <p className="!mb-3 text-sm">{description}</p>
-        {url && (
-          <Button variant={buttonVariant} url={url}>
-            {ctaLabel}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+    return (
+        <div className="card group !grid grid-cols-1 xl:grid-cols-[minmax(10rem,_230px)_1fr] 2xl:grid-cols-[minmax(10rem,_270px)_1fr] items-center gap-4 overflow-hidden rounded-2xl border border-black/10 dark:border-white/10 bg-muted/40 p-4 transition-colors">
+            <div className="aspect-[537/281] overflow-hidden rounded-xl relative flex items-center">
+                <img
+                    src={imgSrc}
+                    alt={imgAlt}
+                    className="pointer-events-none w-full h-auto object-contain transition-transform origin-bottom duration-500 group-hover:scale-105"
+                />
+                {url && !isInternalUrl(url) && (
+                    <Badge
+                        className="absolute top-2 right-2"
+                        variant="default"
+                        size="sm"
+                    >
+                        External
+                    </Badge>
+                )}
+            </div>
+            <div className="flex flex-col min-w-0 justify-center gap-1">
+                <Heading as="h4" className="!mb-1">
+                    {title}
+                </Heading>
+                <p className="!mb-3 text-sm">{description}</p>
+                {url && (
+                    <Button variant={buttonVariant} url={url}>
+                        {ctaLabel}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/OneColGrid.tsx b/src/components/OneColGrid.tsx
deleted file mode 100644
index 7ac9585c14..0000000000
--- a/src/components/OneColGrid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import clsx from "clsx";
-
-export interface OneColGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-  gap?: "sm" | "md" | "lg";
-  equalHeight?: boolean;
-}
-
-const gapClasses: Record<NonNullable<OneColGridProps["gap"]>, string> = {
-  sm: "gap-4",
-  md: "gap-6",
-  lg: "gap-8",
-};
-
-export default function OneColGrid({
-  children,
-  className = "",
-  gap = "sm",
-  equalHeight = false,
-  ...props
-}: OneColGridProps) {
-  return (
-    <div
-      className={clsx(
-        "grid grid-cols-1",
-        gapClasses[gap],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-
diff --git a/src/components/ThreeColGrid.tsx b/src/components/ThreeColGrid.tsx
deleted file mode 100644
index db6b3e66a3..0000000000
--- a/src/components/ThreeColGrid.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from "react";
-import clsx from "clsx";
-
-export interface ThreeColGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-  gap?: "sm" | "md" | "lg";
-  equalHeight?: boolean;
-}
-
-const gapClasses: Record<NonNullable<ThreeColGridProps["gap"]>, string> = {
-  sm: "gap-4",
-  md: "gap-6",
-  lg: "gap-8",
-};
-
-export default function ThreeColGrid({
-  children,
-  className = "",
-  gap = "sm",
-  equalHeight = false,
-  ...props
-}: ThreeColGridProps) {
-  return (
-    <div
-      className={clsx(
-        "grid [grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))]",
-        gapClasses[gap],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/src/components/TwoColGrid.tsx b/src/components/TwoColGrid.tsx
deleted file mode 100644
index 5be6f9fcf1..0000000000
--- a/src/components/TwoColGrid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import clsx from "clsx";
-
-export interface TwoColGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-  gap?: "sm" | "md" | "lg";
-  equalHeight?: boolean;
-}
-
-const gapClasses: Record<NonNullable<TwoColGridProps["gap"]>, string> = {
-  sm: "gap-4",
-  md: "gap-6",
-  lg: "gap-8",
-};
-
-export default function TwoColGrid({
-  children,
-  className = "",
-  gap = "sm",
-  equalHeight = false,
-  ...props
-}: TwoColGridProps) {
-  return (
-    <div
-      className={clsx(
-        "grid grid-cols-1 sm:grid-cols-2",
-        gapClasses[gap],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-
diff --git a/src/components/VersionConditional.tsx b/src/components/VersionConditional.tsx
index 18d34d8df9..7887ec2b69 100644
--- a/src/components/VersionConditional.tsx
+++ b/src/components/VersionConditional.tsx
@@ -2,20 +2,24 @@ import { ReactNode } from "react";
 import { useActiveDocContext } from "@docusaurus/plugin-content-docs/client";
 
 interface VersionConditionalProps {
-  minimumVersion: string;
-  children: ReactNode;
+    minimumVersion: string;
+    children: ReactNode;
 }
 
 export default function VersionConditional({
-  minimumVersion,
-  children,
+    minimumVersion,
+    children,
 }: VersionConditionalProps) {
-  const pluginId = "default";
-  const { activeVersion } = useActiveDocContext(pluginId);
+    const pluginId = "default";
+    const { activeVersion } = useActiveDocContext(pluginId);
 
-  if (minimumVersion > activeVersion.label) {
-    return null;
-  }
+    if (
+        activeVersion.label.localeCompare(minimumVersion, undefined, {
+            numeric: true,
+        }) < 0
+    ) {
+        return null;
+    }
 
-  return <>{children}</>;
-}
\ No newline at end of file
+    return <>{children}</>;
+}
diff --git a/templates/introduction.mdx b/templates/introduction.mdx
index 7d4d587277..a8224b87d9 100644
--- a/templates/introduction.mdx
+++ b/templates/introduction.mdx
@@ -4,201 +4,94 @@ hide_table_of_contents: true
 sidebar_label: AI Overview
 ---
 
-import CardWithImage from '@site/src/components/Common/CardWithImage';
-import CardWithImageHorizontal from '@site/src/components/Common/CardWithImageHorizontal';
-import TwoColGrid from '@site/src/components/TwoColGrid';
-import ThreeColGrid from '@site/src/components/ThreeColGrid';
-import OneColGrid from '@site/src/components/OneColGrid';
+import CardWithImage from "@site/src/components/Common/CardWithImage";
+import CardWithImageHorizontal from "@site/src/components/Common/CardWithImageHorizontal";
+import ColGrid from "@site/src/components/ColGrid";
 
 # AI Overview
+
 Use RavenDB to ship AI functionalities faster
 
 ## Keep AI data flow in your database layer
+
 RavenDB lets you ship AI features without any duct-taped extra services. Our AI ecosystem keeps your data, AI
 pipelines, and retrieval in one place, effectively keeping your application layer thin - and letting you to focus on
-improving your app, not on reinventing the wheel. 
+improving your app, not on reinventing the wheel.
 
 Our database offers plenty of **robust, flexible, and easy-to-use** AI features tailored to your needs. You can either use
 one or combine them - on top of both new and existing databases.
 
 ## Use cases
+
 RavenDB AI Integration can help to ship any AI-related scenarios, including:
-* **Search & discovery** - Help users find things by meaning across docs, products, and media
-* **Conversational interfaces** - Natural-language access to your data with safe, scoped actions
-* **Content understanding & classification** - Auto-tagging, topic extraction, taxonomy mapping, entity linking
-* **Workflow automation** - Trigger safe actions from AI insights (drafts, exports, updates)
-* **Knowledge management (RAG)** - Ask questions over policies, wikis, and PDFs; store answers + citations
-* **Personalization & recommendations** - Behavioral + semantic relevance for feeds, items, and knowledge
-* & many more...
+
+- **Search & discovery** - Help users find things by meaning across docs, products, and media
+- **Conversational interfaces** - Natural-language access to your data with safe, scoped actions
+- **Content understanding & classification** - Auto-tagging, topic extraction, taxonomy mapping, entity linking
+- **Workflow automation** - Trigger safe actions from AI insights (drafts, exports, updates)
+- **Knowledge management (RAG)** - Ask questions over policies, wikis, and PDFs; store answers + citations
+- **Personalization & recommendations** - Behavioral + semantic relevance for feeds, items, and knowledge
+- & many more...
 
 Inspire yourself with our articles & learn more:
 
-<TwoColGrid>
-<CardWithImage
-      title="Enable AI Search in your web app in minutes"
-      description="Discover how RavenDB lets you add semantic search with vector embeddings and smarter results to your web app."
-      url="https://ravendb.net/articles/enable-ai-search-in-your-web-app-in-5-minutes"
-      imgSrc="https://ravendb.net/wp-content/uploads/2025/04/enable-ai-search-cover-530x240.jpg"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="Use RavenDB AI Agents to automate HR "
-      description="Learn how you can use RavenDB AI Agents - a powerful, secured, flexible and easy-to-use template, and get inspired."
-      url="url"
-      imgIcon="ai-agents"
-      imgAlt="imgAlt"
-      buttonVariant="secondary"
-      ctaLabel="Read now"
-    />
-</TwoColGrid>
+<ColGrid colCount={2}>
+    <CardWithImage title="Enable AI Search in your web app in minutes" description="Discover how RavenDB lets you add semantic search with vector embeddings and smarter results to your web app." url="https://ravendb.net/articles/enable-ai-search-in-your-web-app-in-5-minutes" imgSrc="https://ravendb.net/wp-content/uploads/2025/04/enable-ai-search-cover-530x240.jpg" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="Use RavenDB AI Agents to automate HR " description="Learn how you can use RavenDB AI Agents - a powerful, secured, flexible and easy-to-use template, and get inspired." url="url" imgIcon="ai-agents" imgAlt="imgAlt" buttonVariant="secondary" ctaLabel="Read now" />
+</ColGrid>
 
 ## AI Agents
-Conversational interfaces made simple - give your app a safe, tool-driven assistant that reads only what you allow and performs supervised actions right on top of your RavenDB data (7.1.2+)
 
-<TwoColGrid>
-<CardWithImage
-      title="AI Agents - Introduction"
-      description="What agents are, when to use them, and how they can enhance your application experience to your users - no matter if you need conversational experience for customers, or employees."
-      url="link"
-      imgIcon="ai-agents"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="AI Agents - Technical Overview"
-      description="Define Query tools (parameterized RQL) and Action tools (your handlers), wire chat trimming & memory, scope with parameters, run from SDKs, and debug in Studio"
-      url="url"
-      imgIcon="ai-agents"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-</TwoColGrid>
+Conversational interfaces made simple - give your app a safe, tool-driven assistant that reads only what you allow and performs supervised actions right on top of your RavenDB data (7.1.2+)
 
+<ColGrid colCount={2}>
+    <CardWithImage title="AI Agents - Introduction" description="What agents are, when to use them, and how they can enhance your application experience to your users - no matter if you need conversational experience for customers, or employees." url="link" imgIcon="ai-agents" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="AI Agents - Technical Overview" description="Define Query tools (parameterized RQL) and Action tools (your handlers), wire chat trimming & memory, scope with parameters, run from SDKs, and debug in Studio" url="url" imgIcon="ai-agents" imgAlt="imgAlt" ctaLabel="Read now" />
+</ColGrid>
 
 ## GenAI
+
 Use reasoning at scale - run LLM jobs inside the database: define context, prompt, and output schema then write results back with update scripts for governed, repeatable transforms (7.1+)
 
-<TwoColGrid>
-<CardWithImage
-      title="GenAI - Introduction"
-      description="Why in-DB GenAI: simpler pipelines, stronger governance, model freedom. Great for summaries, classification, tagging, translations, and enrichment."
-      url="link"
-      imgIcon="genai"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="GenAI - Technical Overview"
-      description="Task lifecycle, context shaping, prompt templating, JSON output validation, update scripts, retries, provider connection strings, plus Studio wizard & step playgrounds."
-      url="url"
-      imgIcon="genai"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-</TwoColGrid>
+<ColGrid colCount={2}>
+    <CardWithImage title="GenAI - Introduction" description="Why in-DB GenAI: simpler pipelines, stronger governance, model freedom. Great for summaries, classification, tagging, translations, and enrichment." url="link" imgIcon="genai" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="GenAI - Technical Overview" description="Task lifecycle, context shaping, prompt templating, JSON output validation, update scripts, retries, provider connection strings, plus Studio wizard & step playgrounds." url="url" imgIcon="genai" imgAlt="imgAlt" ctaLabel="Read now" />
+</ColGrid>
 
 ## Vector Search
+
 Search by meaning - perform semantic queries in RavenDB whether on-the-fly with dynamic RQL, via precomputed static indexes, or by indexing attachment contents to unlock fast, context-aware insights. (7.0+)
 
-<TwoColGrid>
-<CardWithImage
-      title="Vector Search - Introduction"
-      description="See how Vector Search can enhance your application in various ways, and how to effectively supercharge your system by using it"
-      url="link"
-      imgIcon="vector-search"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="Vector Search - Technical Overview"
-      description="Explore technical part of vector search - how to enable it, query with it, and how to configure it s nuances to cover any semantic search scenario."
-      url="url"
-      imgIcon="vector-search"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-</TwoColGrid>
+<ColGrid colCount={2}>
+    <CardWithImage title="Vector Search - Introduction" description="See how Vector Search can enhance your application in various ways, and how to effectively supercharge your system by using it" url="link" imgIcon="vector-search" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="Vector Search - Technical Overview" description="Explore technical part of vector search - how to enable it, query with it, and how to configure it s nuances to cover any semantic search scenario." url="url" imgIcon="vector-search" imgAlt="imgAlt" ctaLabel="Read now" />
+</ColGrid>
 
 ## Embeddings generation
+
 Keep your collections semantic-ready with a server-side task that batches, caches, and stores embeddings from your chosen model/provider (7.0.1+)
 
-<TwoColGrid>
-<CardWithImage
-      title="Embeddings Generation - Introduction"
-      description="What embeddings tasks do, when to use them, and how they unlock semantic search, recommendations, and knowledge retrieval with minimal setup."
-      url="link"
-      imgIcon="ai-etl"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="Embeddings Generation - Technical Overview"
-      description="Configure per-collection fields and dimensions, choose your provider (or use built-in bge-micro-v2), handle attachments, and tune batching/caching behavior for cost and throughput."
-      url="url"
-      imgIcon="ai-etl"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-</TwoColGrid>
+<ColGrid colCount={2}>
+    <CardWithImage title="Embeddings Generation - Introduction" description="What embeddings tasks do, when to use them, and how they unlock semantic search, recommendations, and knowledge retrieval with minimal setup." url="link" imgIcon="ai-etl" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="Embeddings Generation - Technical Overview" description="Configure per-collection fields and dimensions, choose your provider (or use built-in bge-micro-v2), handle attachments, and tune batching/caching behavior for cost and throughput." url="url" imgIcon="ai-etl" imgAlt="imgAlt" ctaLabel="Read now" />
+</ColGrid>
 
 ## Lives & videos
+
 Explore our engaging livestreams and videos that delve into the fascinating world of AI integration.
 
-<OneColGrid>
-<CardWithImageHorizontal
-      title="Practical AI Integration with RavenDB (webinar recording)"
-      description="A comprehensive walkthrough of RavenDBs AI features, showcasing demos to help you start with semantic search."
-      url="https://youtu.be/7DhbgfH_rSE?feature=shared"
-      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc"
-      imgAlt="imgAlt"
-      ctaLabel="Watch now"
-    />
-<CardWithImageHorizontal
-      title="Data Pipelines for the AI Era Federico Lois, RavenDB | TechEx North America 2025"
-      description="Watch Discord session where the RavenDB team discusses and demos AI integration patterns and best practices."
-      url="https://www.youtube.com/watch?app=desktop&v=ouzcY0Jcgs4&t=180s"
-      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQHeODBz0193ng/image-shrink_1280/B4DZd9C5bfGgAM-/0/1750149601848?e=2147483647&v=beta&t=_oResTLauIWsjkqBuDSleu-3F8cDSQx76w06OZxc4PY"
-      imgAlt="imgAlt"
-      ctaLabel="Watch now"
-    />
-<CardWithImageHorizontal
-      title="[LIVE] COD#5 GenAI & MCP"
-      description="Dive into RavenDBs vector search capabilities with community-driven discussion on implementation tips."
-      url="https://www.youtube.com/watch?v=cRuwSz8x41s"
-      imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc"
-      imgAlt="imgAlt"
-      ctaLabel="Watch now"
-    />
-</OneColGrid>
+<ColGrid colCount={1}>
+    <CardWithImageHorizontal title="Practical AI Integration with RavenDB (webinar recording)" description="A comprehensive walkthrough of RavenDBs AI features, showcasing demos to help you start with semantic search." url="https://youtu.be/7DhbgfH_rSE?feature=shared" imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc" imgAlt="imgAlt" ctaLabel="Watch now" />
+    <CardWithImageHorizontal title="Data Pipelines for the AI Era Federico Lois, RavenDB | TechEx North America 2025" description="Watch Discord session where the RavenDB team discusses and demos AI integration patterns and best practices." url="https://www.youtube.com/watch?app=desktop&v=ouzcY0Jcgs4&t=180s" imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQHeODBz0193ng/image-shrink_1280/B4DZd9C5bfGgAM-/0/1750149601848?e=2147483647&v=beta&t=_oResTLauIWsjkqBuDSleu-3F8cDSQx76w06OZxc4PY" imgAlt="imgAlt" ctaLabel="Watch now" />
+    <CardWithImageHorizontal title="[LIVE] COD#5 GenAI & MCP" description="Dive into RavenDBs vector search capabilities with community-driven discussion on implementation tips." url="https://www.youtube.com/watch?v=cRuwSz8x41s" imgSrc="https://media.licdn.com/dms/image/v2/D4D10AQG81cXtiYRc2w/image-shrink_800/B4DZZYYLcTHwAk-/0/1745239456036?e=2147483647&v=beta&t=yQVz6ji4wD4reOTXtlPpERK0fdpr1f2VoG_SEV9x3lc" imgAlt="imgAlt" ctaLabel="Watch now" />
+</ColGrid>
 
 ## Deep dives, content & resources
+
 Here, you ll find a wealth of materials designed to enhance your knowledge and skills.
 
-<ThreeColGrid>
-<CardWithImage
-      title="GitHub repository: AI Search Next.js App"
-      description="A sample Next.js application demonstrating end-to-end integration of RavenDBs AI-powered semantic search."
-      imgSrc="https://ravendb.net/wp-content/uploads/2024/08/next-js-logo.png"
-      url="https://github.com/ravendb/samples-nextjs"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="Article: Vector Search by Maciej Aszyk"
-      description="An overview of RavenDB 7.0’s vector search capabilities, from dynamic RQL queries to static-index performance optimizations."
-      url="https://ravendb.net/articles/new-in-7-0-ravendbs-vector-search"
-      imgSrc="https://ravendb.net/wp-content/uploads/2025/02/vector-search-article-cover-530x240.jpg"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-<CardWithImage
-      title="Blogpost from ayende.com website blog"
-      description="A deep-dive blog post on real-world AI use cases in RavenDB, with code patterns, demos, and best practices. Jump right in!"
-      url="https://ayende.com/blog/202851-C/ravendb-7-1-the-gen-ai-release"
-      imgIcon="ai-agents"
-      imgAlt="imgAlt"
-      ctaLabel="Read now"
-    />
-</ThreeColGrid>
- 
\ No newline at end of file
+<ColGrid colCount={3}>
+    <CardWithImage title="GitHub repository: AI Search Next.js App" description="A sample Next.js application demonstrating end-to-end integration of RavenDBs AI-powered semantic search." imgSrc="https://ravendb.net/wp-content/uploads/2024/08/next-js-logo.png" url="https://github.com/ravendb/samples-nextjs" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="Article: Vector Search by Maciej Aszyk" description="An overview of RavenDB 7.0’s vector search capabilities, from dynamic RQL queries to static-index performance optimizations." url="https://ravendb.net/articles/new-in-7-0-ravendbs-vector-search" imgSrc="https://ravendb.net/wp-content/uploads/2025/02/vector-search-article-cover-530x240.jpg" imgAlt="imgAlt" ctaLabel="Read now" />
+    <CardWithImage title="Blogpost from ayende.com website blog" description="A deep-dive blog post on real-world AI use cases in RavenDB, with code patterns, demos, and best practices. Jump right in!" url="https://ayende.com/blog/202851-C/ravendb-7-1-the-gen-ai-release" imgIcon="ai-agents" imgAlt="imgAlt" ctaLabel="Read now" />
+</ColGrid>