docs: Add integrations section (#636)

docs/src/components/IntegrationsGallery.astro

@@ -0,0 +1,45 @@
+---
+type Integration = {
+	url: string;
+	repo: string;
+	logo: string;
+	status: "implemented" | "planned";
+};
+
+let integrations = [
+	{
+		repo: "marimo-team/marimo",
+		url: "https://github.com/marimo-team/marimo",
+		logo: "https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg",
+		status: "implemented",
+	},
+	{
+		repo: "executablebooks/MyST-Parser",
+		url: "https://github.com/executablebooks/MyST-Parser",
+		logo: "https://raw.githubusercontent.com/executablebooks/MyST-Parser/master/docs/_static/logo-wide.svg",
+		status: "planned",
+	},
+] satisfies Array<Integration>;
+---
+
+<div class="flex gap-4" id="integration">
+
+	{integrations.map(({ url, repo, logo, status }) => (
+		<div class="relative w-fit h-fit">
+			<a
+				class="w-28 h-28 p-5 group flex bg-teal-50 border border-teal-200 rounded-lg hover:bg-teal-100 transition duration-100 ease-in-out"
+				class:list={[status === "implemented" ? "opacity-100" : "opacity-50"]}
+				href={url}
+				aria-label={`View ${repo} on GitHub`}
+			>
+				<img class="image-preview w-full" src={logo} alt={repo} />
+				{status === "planned" && (
+					<span class="w-full text-black absolute text-center left-0 -bottom-7 rounded-lg">
+						in progress
+					</span>
+				)}
+			</a>
+		</div>
+	))}
+
+</div>

docs/src/pages/en/community.mdx

@@ -8,8 +8,17 @@ image:
     alt: "Jupyter notebook with several anywidgets",
   }
 ---
+import IntegrationsGallery from "../../components/IntegrationsGallery.astro"
 import WidgetGallery from "../../components/WidgetGallery.astro"
 
+## Integrations
+
+Several platforms have adopted <u>_native_</u> support for **anywidget**. This
+means that you can use **anywidgets** in more places than traditional Jupyter
+Widgets:
+
+<IntegrationsGallery />
+
 ## Widgets Gallery
 
 **anywidget** powers several [open source