diff --git a/.github/workflows/docs-validation.yml b/.github/workflows/docs-validation.yml
index 77dad776b8..247eb39343 100644
--- a/.github/workflows/docs-validation.yml
+++ b/.github/workflows/docs-validation.yml
@@ -12,53 +12,53 @@ on:
       - main
 
 jobs:
-link-check:
-  name: Broken link checker
-  runs-on: ubuntu-latest
+  link-check:
+    name: Broken link checker
+    runs-on: ubuntu-latest
 
-  steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Set up Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: "20"
-        cache: "pnpm"
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
 
-    - name: Install dependencies
-      run: pnpm install --frozen-lockfile
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-    - name: Build static site
-      run: pnpm build
+      - name: Build static site
+        run: pnpm build
 
-    - name: Set up Rust
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
+      - name: Set up Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
 
-    - name: Install lychee
-      run: cargo install lychee
+      - name: Install lychee
+        run: cargo install lychee
 
-    - name: Check links
-      run: lychee --verbose --no-progress './out/**/*.html'
+      - name: Check links
+        run: lychee --verbose --no-progress './out/**/*.html'
 
-code-validate:
-  name: Code snippet and GraphQL validation
-  runs-on: ubuntu-latest
-  steps:
-    - uses: actions/checkout@v4
+  code-validate:
+    name: Code snippet and GraphQL validation
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
 
-    - uses: actions/setup-node@v4
-      with:
-        node-version: "20"
-        cache: "pnpm"
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
 
-    - name: Install dependencies
-      run: pnpm install --frozen-lockfile
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-    - name: Run validation w/ annotations
-      run: pnpm lint:docs:ci
+      - name: Run validation w/ annotations
+        run: pnpm lint:docs:ci
 
-    - name: Validate code snippets
-      run: pnpm validate:snippets
+      - name: Validate code snippets
+        run: pnpm validate:snippets
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 02d49400e5..e746d28ff4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,8 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "tailwindCSS.classFunctions": ["clsx"]
+  "tailwindCSS.classFunctions": ["clsx"],
+  "editor.quickSuggestions": {
+    "strings": "on"
+  }
 }
diff --git a/next.config.js b/next.config.js
index 55ac068367..8d7395ddb3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,18 +1,28 @@
 /* eslint-env node */
+// @ts-check
 
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
-import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
+import nextBundleAnalyzer from "@next/bundle-analyzer"
 import fs from "fs"
+import rehypeMermaid from "rehype-mermaid"
+
+import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
+import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js"
 
 const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8"))
 
 const withNextra = nextra({
+  autoImportThemeStyle: false,
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.tsx",
   mdxOptions: {
     remarkPlugins: [remarkGraphiQLComment],
+    rehypePlugins: [mermaidConfig()],
+    rehypePrettyCodeOptions: {
+      theme: syntaxHighlightingThemes,
+    },
   },
 })
 
@@ -23,131 +33,184 @@ const ALLOWED_SVG_REGEX = new RegExp(`${sep}icons${sep}.+\\.svg$`)
 /**
  * @type {import('next').NextConfig}
  */
-export default withLess(
-  withNextra({
-    // reactStrictMode: true, provoke duplicated codemirror editors
-    webpack(config) {
-      // #region MDX
-      const mdxRule = config.module.rules.find(rule =>
-        rule.test?.test?.(".mdx"),
-      )
-      if (mdxRule) {
-        mdxRule.resourceQuery = {
-          not: /raw/,
-        }
+const config = {
+  // reactStrictMode: true, provoke duplicated codemirror editors
+  webpack(config) {
+    // #region MDX
+    const mdxRule = config.module.rules.find(rule => rule.test?.test?.(".mdx"))
+    if (mdxRule) {
+      mdxRule.resourceQuery = {
+        not: /raw/,
       }
-      // Instead of transforming MDX, with ?source we can get
-      // the raw content to process in a Server Component.
-      config.module.rules.push({
-        test: /\.mdx$/i,
-        resourceQuery: /raw/,
-        type: "asset/source",
-      })
-      // #endregion MDX
+    }
+    // Instead of transforming MDX, with ?source we can get
+    // the raw content to process in a Server Component.
+    config.module.rules.push({
+      test: /\.mdx$/i,
+      resourceQuery: /raw/,
+      type: "asset/source",
+    })
+    // #endregion MDX
 
-      // #region SVGs
-      const fileLoaderRule = config.module.rules.find(rule =>
-        rule.test?.test?.(".svg"),
-      )
+    // #region SVGs
+    const fileLoaderRule = config.module.rules.find(rule =>
+      rule.test?.test?.(".svg"),
+    )
 
-      fileLoaderRule.exclude = /\.svg$/i
+    fileLoaderRule.exclude = /\.svg$/i
 
-      config.module.rules.push(
-        // All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
-        {
-          test: ALLOWED_SVG_REGEX,
-          use: ["@svgr/webpack"],
-        },
-        {
-          test: /\.svg$/i,
-          exclude: ALLOWED_SVG_REGEX,
-          resourceQuery: /svgr/,
-          use: [
-            {
-              loader: "@svgr/webpack",
-              options: {
-                dimensions: false, // **adds** viewBox.
+    config.module.rules.push(
+      // All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
+      {
+        test: ALLOWED_SVG_REGEX,
+        use: ["@svgr/webpack"],
+      },
+      {
+        test: /\.svg$/i,
+        exclude: ALLOWED_SVG_REGEX,
+        resourceQuery: /svgr/,
+        use: [
+          {
+            loader: "@svgr/webpack",
+            options: {
+              typescript: true,
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: "preset-default",
+                    params: {
+                      overrides: {
+                        minifyStyles: false,
+                        removeViewBox: false,
+                        removeTitle: false,
+                      },
+                    },
+                  },
+                  "removeXMLNS",
+                  "removeXlink",
+                  "prefixIds",
+                ],
               },
             },
-          ],
-        },
-        // Otherwise, we use the default file loader
-        {
-          ...fileLoaderRule,
-          test: /\.svg$/i,
-          exclude: ALLOWED_SVG_REGEX,
-          resourceQuery: {
-            not: [...fileLoaderRule.resourceQuery.not, /svgr/],
           },
+        ],
+      },
+      // Otherwise, we use the default file loader
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        exclude: ALLOWED_SVG_REGEX,
+        resourceQuery: {
+          not: [...fileLoaderRule.resourceQuery.not, /svgr/],
         },
-      )
-      // #endregion SVGs
+      },
+    )
+    // #endregion SVGs
 
-      return config
-    },
-    // Comment this out if you're working on OG images.
-    output: "export",
-    images: {
-      loader: "custom",
-      imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-    },
-    transpilePackages: ["next-image-export-optimizer"],
-    env: {
-      nextImageExportOptimizer_imageFolderPath: "public/images",
-      nextImageExportOptimizer_exportFolderPath: "out",
-      nextImageExportOptimizer_quality: "75",
-      nextImageExportOptimizer_storePicturesInWEBP: "true",
-      nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
-      // If you do not want to use blurry placeholder images, then you can set
-      // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
-      // `placeholder="empty"` to all <ExportedImage> components.
-      nextImageExportOptimizer_generateAndUseBlurImages: "true",
-      // If you want to cache the remote images, you can set the time to live of the cache in seconds.
-      // The default value is 0 seconds.
-      nextImageExportOptimizer_remoteImageCacheTTL: "0",
-      NEXT_PUBLIC_GA_ID:
-        process.env.NODE_ENV === "production" ? "UA-44373548-16" : "",
-    },
-    headers: async () => {
-      return [
-        {
-          source: "/graphql",
-          headers: [
-            {
-              key: "Access-Control-Allow-Origin",
-              value: "*",
-            },
-            {
-              key: "Access-Control-Allow-Methods",
-              value: "GET, POST, OPTIONS",
-            },
-            {
-              key: "Access-Control-Allow-Headers",
-              value: "Content-Type",
-            },
-          ],
-        },
-      ]
-    },
-    trailingSlash: true,
-    // Only for local development, skip 200 statusCode due following error:
-    //
-    // `statusCode` is not undefined or valid statusCode for route {"source":"/conf/attendee/:path*","destination":"https://graphql-conf-attendee-nextjs.vercel.app/:path*","statusCode":200}
-    // `statusCode` is not undefined or valid statusCode for route {"source":"/swapi-graphql/:path*","destination":"https://graphql.github.io/swapi-graphql/:path*","statusCode":200}
-    // Valid redirect statusCode values are 301, 302, 303, 307, 308
-    redirects: () => vercelJSON.redirects.filter(o => o.statusCode !== 200),
-    async rewrites() {
-      return [
-        {
-          source: "/swapi-graphql/:path*",
-          destination: "https://swapi-graphql.netlify.app/:path*",
-        },
-        {
-          source: "/graphql",
-          destination: "https://swapi-graphql.netlify.app/graphql",
+    return config
+  },
+  // Comment this out if you're working on OG images.
+  output: "export",
+  images: {
+    loader: "custom",
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  },
+  transpilePackages: ["next-image-export-optimizer"],
+  env: {
+    nextImageExportOptimizer_imageFolderPath: "public/images",
+    nextImageExportOptimizer_exportFolderPath: "out",
+    nextImageExportOptimizer_quality: "75",
+    nextImageExportOptimizer_storePicturesInWEBP: "true",
+    nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
+    // If you do not want to use blurry placeholder images, then you can set
+    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
+    // `placeholder="empty"` to all <ExportedImage> components.
+    nextImageExportOptimizer_generateAndUseBlurImages: "true",
+    // If you want to cache the remote images, you can set the time to live of the cache in seconds.
+    // The default value is 0 seconds.
+    nextImageExportOptimizer_remoteImageCacheTTL: "0",
+    NEXT_PUBLIC_GA_ID:
+      process.env.NODE_ENV === "production" ? "UA-44373548-16" : "",
+  },
+  headers: async () => {
+    return [
+      {
+        source: "/graphql",
+        headers: [
+          {
+            key: "Access-Control-Allow-Origin",
+            value: "*",
+          },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET, POST, OPTIONS",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value: "Content-Type",
+          },
+        ],
+      },
+    ]
+  },
+  trailingSlash: true,
+  // Only for local development, skip 200 statusCode due following error:
+  //
+  // `statusCode` is not undefined or valid statusCode for route {"source":"/conf/attendee/:path*","destination":"https://graphql-conf-attendee-nextjs.vercel.app/:path*","statusCode":200}
+  // `statusCode` is not undefined or valid statusCode for route {"source":"/swapi-graphql/:path*","destination":"https://graphql.github.io/swapi-graphql/:path*","statusCode":200}
+  // Valid redirect statusCode values are 301, 302, 303, 307, 308
+  redirects: () => vercelJSON.redirects.filter(o => o.statusCode !== 200),
+  async rewrites() {
+    return [
+      {
+        source: "/swapi-graphql/:path*",
+        destination: "https://swapi-graphql.netlify.app/:path*",
+      },
+      {
+        source: "/graphql",
+        destination: "https://swapi-graphql.netlify.app/graphql",
+      },
+    ]
+  },
+}
+
+const withBundleAnalyzer = nextBundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+})
+
+export default withBundleAnalyzer(withLess(withNextra(config)))
+
+function mermaidConfig() {
+  return [
+    rehypeMermaid,
+    /** @type {import("rehype-mermaid").RehypeMermaidOptions} */ ({
+      mermaidConfig: {
+        fontFamily: "var(--font-sans)", // we can't use monospace here because it's way too wide
+        theme: "null",
+        look: "classic",
+        flowchart: {
+          defaultRenderer: "elk",
+          padding: 6,
         },
-      ]
-    },
-  }),
-)
+        themeCSS: `
+          .node rect {
+            fill: var(--mermaid-node-fill);
+            stroke: var(--mermaid-node-stroke);
+          }
+          .label text, span {
+            fill: hsl(var(--color-neu-900));
+            color: hsl(var(--color-neu-900));
+          }
+          .flowchart-link {
+            stroke: var(--mermaid-arrow);
+          }
+          .marker {
+            stroke: var(--mermaid-arrow);
+            fill: var(--mermaid-arrow);
+          }
+        `,
+      },
+    }),
+  ]
+}
diff --git a/package.json b/package.json
index ffa6b624ab..b50ebe9a81 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "packageManager": "pnpm@9.15.9",
   "scripts": {
+    "analyze": "ANALYZE=true next build",
     "build": "next build && next-image-export-optimizer",
     "check:links": "lychee --verbose --no-progress './src/pages/**/*.mdx' --base https://graphql.org",
     "dev": "next",
@@ -15,14 +16,18 @@
     "lint:docs:ci": "eslint --ignore-path .gitignore src/pages/learn --format eslint-formatter-github",
     "postbuild": "next-sitemap",
     "prebuild": "tsx src/get-github-info.ts",
-    "start": "next start",
-    "test": "echo \"no tests\" && exit 1",
+    "serve": "pnpx serve out",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
     "validate:snippets": "node scripts/validate-snippets.js"
   },
   "dependencies": {
     "@graphql-tools/schema": "10.0.25",
     "@headlessui/react": "^2.2.4",
+    "@igorkowalczyk/is-browser": "^5.1.0",
+    "@next/bundle-analyzer": "^15.4.5",
     "@radix-ui/react-radio-group": "^1.2.2",
+    "@sparticuz/chromium": "^138.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.15",
@@ -48,16 +53,19 @@
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
-    "nextra": "3.0.0-alpha.28",
-    "nextra-theme-docs": "3.0.0-alpha.28",
+    "nextra": "3.3.1",
+    "nextra-theme-docs": "3.3.1",
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
+    "playwright-core": "^1.54.2",
     "postcss": "^8.4.49",
+    "postcss-import": "^16.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
     "react-use-measure": "^2.1.7",
+    "rehype-mermaid": "^3.0.0",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",
@@ -68,9 +76,13 @@
     "unist-util-visit": "^5.0.0",
     "use-query-params": "^2.2.1"
   },
+  "optionalDependencies": {
+    "playwright": "^1.54.2"
+  },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "4.4.0",
     "@next/eslint-plugin-next": "^15.3.3",
+    "@playwright/test": "^1.54.2",
     "@svgr/webpack": "^8.1.0",
     "@types/codemirror": "5.60.16",
     "@types/hast": "3.0.4",
@@ -95,9 +107,20 @@
     "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   },
+  "browserslist": [
+    "chrome >0 and last 2.5 years",
+    "edge >0 and last 2.5 years",
+    "safari >0 and last 2.5 years",
+    "firefox >0 and last 2.5 years",
+    "and_chr >0 and last 2.5 years",
+    "and_ff >0 and last 2.5 years",
+    "ios >0 and last 2.5 years"
+  ],
   "pnpm": {
     "patchedDependencies": {
-      "nextra@3.0.0-alpha.28": "patches/nextra@3.0.0-alpha.22.patch"
+      "nextra": "patches/nextra.patch",
+      "nextra-theme-docs": "patches/nextra-theme-docs.patch",
+      "mermaid-isomorphic": "patches/mermaid-isomorphic.patch"
     }
   }
 }
diff --git a/patches/mermaid-isomorphic.patch b/patches/mermaid-isomorphic.patch
new file mode 100644
index 0000000000..55b3a3a3f5
--- /dev/null
+++ b/patches/mermaid-isomorphic.patch
@@ -0,0 +1,44 @@
+diff --git a/dist/mermaid-isomorphic.js b/dist/mermaid-isomorphic.js
+index aa5dc09a5dfb58a98d3f12cd2fc473caddd97b0d..d0fa3ca8e690233d0b50e4f992ab6ac33c11585b 100644
+--- a/dist/mermaid-isomorphic.js
++++ b/dist/mermaid-isomorphic.js
+@@ -1,4 +1,5 @@
+-import { chromium } from 'playwright';
++import { chromium as playwright } from 'playwright';
++import chromium from '@sparticuz/chromium';
+ const html = import.meta.resolve('../index.html');
+ const mermaidScript = {
+     url: import.meta.resolve('mermaid/dist/mermaid.js')
+@@ -7,6 +8,9 @@ const faStyle = {
+     // We use url, not path. If we use path, the fonts can’t be resolved.
+     url: import.meta.resolve('@fortawesome/fontawesome-free/css/all.css')
+ };
++
++chromium.setGraphicsMode = false;
++
+ /* c8 ignore start */
+ /**
+  * Render mermaid diagrams in the browser.
+@@ -122,7 +126,21 @@ async function getBrowser(browserType, launchOptions) {
+  *   A function that renders Mermaid diagrams in the browser.
+  */
+ export function createMermaidRenderer(options = {}) {
+-    const { browserType = chromium, launchOptions } = options;
++    let { browserType = playwright, launchOptions } = options;
++
++    if (process.env.CI) {
++        if (options.browserType) {
++            throw new Error('options.browserType is not supported because @hasparus patched it to run on Vercel builds, sorry');
++        }
++        browserType = {
++            launch: async () => playwright.launch({
++                ...launchOptions,
++                args: chromium.args,
++                executablePath: await chromium.executablePath(),
++            })
++        }
++    }
++
+     let browserPromise;
+     let count = 0;
+     return async (diagrams, renderOptions) => {
diff --git a/patches/nextra-theme-docs.patch b/patches/nextra-theme-docs.patch
new file mode 100644
index 0000000000..b6375d172f
--- /dev/null
+++ b/patches/nextra-theme-docs.patch
@@ -0,0 +1,43 @@
+diff --git a/dist/index.d.mts b/dist/index.d.mts
+index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..6671e29326be99861058895916185910452ced17 100644
+--- a/dist/index.d.mts
++++ b/dist/index.d.mts
+@@ -1421,3 +1421,19 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
+ declare function Layout({ children, themeConfig, pageOpts }: NextraThemeLayoutProps): ReactElement;
+ 
+ export { Bleed, Collapse, type PartialDocsThemeConfig as DocsThemeConfig, Link, LocaleSwitch, Navbar, NotFoundPage, SkipNavContent, SkipNavLink, ThemeSwitch, Layout as default, getComponents, useConfig, useMenu, useThemeConfig };
++
++export type ActiveAnchor = Record<
++  string,
++  {
++    isActive?: boolean
++    aboveHalfViewport: boolean
++    index: number
++    insideHalfViewport: boolean
++  }
++>
++
++export declare const useActiveAnchor: () => ActiveAnchor
++export declare const useSetActiveAnchor: () => Dispatch<SetStateAction<ActiveAnchor>>
++export declare const useIntersectionObserver: () => IntersectionObserver | null
++export declare const useSlugs: () => WeakMap<any, any>
++
+diff --git a/dist/index.js b/dist/index.js
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..860b8cfd297e82da041c4d8287ed266691d75a0e 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -100,10 +100,10 @@ IntersectionObserverContext.displayName = "IntersectionObserver";
+ var slugs = /* @__PURE__ */ new WeakMap();
+ var SlugsContext = createContext(slugs);
+ SlugsContext.displayName = "Slugs";
+-var useActiveAnchor = () => useContext(ActiveAnchorContext);
+-var useSetActiveAnchor = () => useContext(SetActiveAnchorContext);
+-var useIntersectionObserver = () => useContext(IntersectionObserverContext);
+-var useSlugs = () => useContext(SlugsContext);
++export var useActiveAnchor = () => useContext(ActiveAnchorContext);
++export var useSetActiveAnchor = () => useContext(SetActiveAnchorContext);
++export var useIntersectionObserver = () => useContext(IntersectionObserverContext);
++export var useSlugs = () => useContext(SlugsContext);
+ var ActiveAnchorProvider = ({
+   children
+ }) => {
diff --git a/patches/nextra.patch b/patches/nextra.patch
new file mode 100644
index 0000000000..05e844c69b
--- /dev/null
+++ b/patches/nextra.patch
@@ -0,0 +1,69 @@
+diff --git a/dist/client/components/image.js b/dist/client/components/image.js
+index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e2192527027 100644
+--- a/dist/client/components/image.js
++++ b/dist/client/components/image.js
+@@ -1,5 +1,5 @@
+ import { jsx } from "react/jsx-runtime";
+-import NextImage from "next/image";
++import NextImage from "next-image-export-optimizer";
+ import { forwardRef } from "react";
+ const Image = forwardRef((props, ref) => {
+   const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
+diff --git a/dist/client/components/index.js b/dist/client/components/index.js
+index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b166917d1ce 100644
+--- a/dist/client/components/index.js
++++ b/dist/client/components/index.js
+@@ -14,7 +14,7 @@ import { Tabs } from "./tabs/index.js";
+ import { Td } from "./td.js";
+ import { Th } from "./th.js";
+ import { Tr } from "./tr.js";
+-import { Mermaid } from "@theguild/remark-mermaid/mermaid";
++// import { Mermaid } from "@theguild/remark-mermaid/mermaid";
+ import { MathJax, MathJaxContext } from "better-react-mathjax";
+ import { Playground } from "./playground.js";
+ import { Popup } from "./popup.js";
+@@ -29,7 +29,7 @@ export {
+   ImageZoom,
+   MathJax,
+   MathJaxContext,
+-  Mermaid,
++  // Mermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+   Playground,
+   Popup,
+   Pre,
+diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
+index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384d5f63845 100644
+--- a/dist/client/normalize-pages.js
++++ b/dist/client/normalize-pages.js
+@@ -103,7 +103,9 @@ The field key "${metaKey}.items.${key}" in \`_meta\` file refers to a page that
+     }
+     if (item) continue;
+     if (typeof window === "undefined") {
+-      const isValid = metaItem.type === "separator" || metaItem.type === "menu" || metaItem.href;
++      const isValid = metaItem.type === "separator" || metaItem.type === "menu" || metaItem.href
++      // workaround
++      || metaKey === 'conf';
+       if (!isValid) {
+         throw new Error(
+           `Validation of "_meta" file has failed.
+diff --git a/dist/server/compile.js b/dist/server/compile.js
+index c266efec3fe344a81c6d5791b93ab1b2bd268782..4866148a725800ef2326732f78807cca0f04cb7b 100644
+--- a/dist/server/compile.js
++++ b/dist/server/compile.js
+@@ -1,6 +1,6 @@
+ import path from "path";
+ import { createProcessor } from "@mdx-js/mdx";
+-import { remarkMermaid } from "@theguild/remark-mermaid";
++// import { remarkMermaid } from "@theguild/remark-mermaid";
+ import { remarkNpm2Yarn } from "@theguild/remark-npm2yarn";
+ import rehypeKatex from "rehype-katex";
+ import rehypePrettyCode from "rehype-pretty-code";
+@@ -143,7 +143,7 @@ async function compileMdx(source, {
+       development: process.env.NODE_ENV === "development",
+       remarkPlugins: [
+         ...remarkPlugins || [],
+-        remarkMermaid,
++        // remarkMermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+         // should be before remarkRemoveImports because contains `import { Mermaid } from ...`
+         [
+           remarkNpm2Yarn,
diff --git a/patches/nextra@3.0.0-alpha.22.patch b/patches/nextra@3.0.0-alpha.22.patch
deleted file mode 100644
index 6f4a58ebf6..0000000000
--- a/patches/nextra@3.0.0-alpha.22.patch
+++ /dev/null
@@ -1,26 +0,0 @@
-diff --git a/dist/client/mdx.js b/dist/client/mdx.js
-index af0891e3c2084edd326f40e6e18107b193640e0b..885858fa17285fb75649cf0ebd2576d1411c1076 100644
---- a/dist/client/mdx.js
-+++ b/dist/client/mdx.js
-@@ -1,5 +1,5 @@
- import { useMDXComponents as originalUseMDXComponents } from "@mdx-js/react";
--import Image from "next/image";
-+import Image from "next-image-export-optimizer";
- import { createElement } from "react";
- const DEFAULT_COMPONENTS = {
-   img: (props) => createElement(
-diff --git a/package.json b/package.json
-index 0625691ebc1d79d7b7d22bb3b001f00a57519772..53d4b0c951a762ae056004789c9aca819e0ade62 100644
---- a/package.json
-+++ b/package.json
-@@ -20,6 +20,10 @@
-       "import": "./dist/server/remark-plugins/index.js",
-       "types": "./dist/server/remark-plugins/index.d.ts"
-     },
-+    "./rehype-plugins": {
-+      "import": "./dist/server/rehype-plugins/index.js",
-+      "types": "./dist/server/rehype-plugins/index.d.ts"
-+    },
-     "./hooks": {
-       "import": "./dist/client/hooks/index.js",
-       "types": "./dist/client/hooks/index.d.ts"
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000000..de0ed7f7d4
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: "./test/e2e",
+  outputDir: "./test/out",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bd1a62095..b524ad2fd7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,9 +5,15 @@ settings:
   excludeLinksFromLockfile: false
 
 patchedDependencies:
-  nextra@3.0.0-alpha.28:
-    hash: rlrllt7ydx3t6f2hccqi2i2pf4
-    path: patches/nextra@3.0.0-alpha.22.patch
+  mermaid-isomorphic:
+    hash: tt5abewtk4kmqtpqfe2f44hnpa
+    path: patches/mermaid-isomorphic.patch
+  nextra:
+    hash: 6ssvmycplmexou7j5jtwzrnhmy
+    path: patches/nextra.patch
+  nextra-theme-docs:
+    hash: 6nt5xhmisiwamimp7yowa7aoxq
+    path: patches/nextra-theme-docs.patch
 
 importers:
 
@@ -18,10 +24,19 @@ importers:
         version: 10.0.25(graphql@16.10.0)
       '@headlessui/react':
         specifier: ^2.2.4
-        version: 2.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@igorkowalczyk/is-browser':
+        specifier: ^5.1.0
+        version: 5.1.0(tailwindcss@3.4.17)
+      '@next/bundle-analyzer':
+        specifier: ^15.4.5
+        version: 15.4.5
       '@radix-ui/react-radio-group':
         specifier: ^1.2.2
         version: 1.2.2(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@sparticuz/chromium':
+        specifier: ^138.0.2
+        version: 138.0.2
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@3.4.17)
@@ -84,25 +99,25 @@ importers:
         version: 12.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: ^14.2.22
-        version: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-image-export-optimizer:
         specifier: ^1.18.0
-        version: 1.18.0(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 1.18.0(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       next-query-params:
         specifier: ^5.0.1
-        version: 5.0.1(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 5.0.1(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       next-sitemap:
         specifier: ^4.2.3
-        version: 4.2.3(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 4.2.3(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       next-with-less:
         specifier: ^3.0.1
-        version: 3.0.1(less-loader@12.2.0(less@4.2.1))(less@4.2.1)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 3.0.1(less-loader@12.2.0(less@4.2.1))(less@4.2.1)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       nextra:
-        specifier: 3.0.0-alpha.28
-        version: 3.0.0-alpha.28(patch_hash=rlrllt7ydx3t6f2hccqi2i2pf4)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)
+        specifier: 3.3.1
+        version: 3.3.1(patch_hash=6ssvmycplmexou7j5jtwzrnhmy)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)
       nextra-theme-docs:
-        specifier: 3.0.0-alpha.28
-        version: 3.0.0-alpha.28(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.0.0-alpha.28(patch_hash=rlrllt7ydx3t6f2hccqi2i2pf4)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 3.3.1
+        version: 3.3.1(patch_hash=6nt5xhmisiwamimp7yowa7aoxq)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=6ssvmycplmexou7j5jtwzrnhmy)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       numbro:
         specifier: 2.5.0
         version: 2.5.0
@@ -112,9 +127,15 @@ importers:
       parser-front-matter:
         specifier: 1.6.4
         version: 1.6.4
+      playwright-core:
+        specifier: ^1.54.2
+        version: 1.54.2
       postcss:
         specifier: ^8.4.49
         version: 8.4.49
+      postcss-import:
+        specifier: ^16.1.1
+        version: 16.1.1(postcss@8.4.49)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -127,6 +148,9 @@ importers:
       react-use-measure:
         specifier: ^2.1.7
         version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      rehype-mermaid:
+        specifier: ^3.0.0
+        version: 3.0.0(playwright@1.54.2)
       rss:
         specifier: 1.2.2
         version: 1.2.2
@@ -154,6 +178,10 @@ importers:
       use-query-params:
         specifier: ^2.2.1
         version: 2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    optionalDependencies:
+      playwright:
+        specifier: ^1.54.2
+        version: 1.54.2
     devDependencies:
       '@graphql-eslint/eslint-plugin':
         specifier: 4.4.0
@@ -161,6 +189,9 @@ importers:
       '@next/eslint-plugin-next':
         specifier: ^15.3.3
         version: 15.3.3
+      '@playwright/test':
+        specifier: ^1.54.2
+        version: 1.54.2
       '@svgr/webpack':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.8.3)
@@ -245,6 +276,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@ardatan/sync-fetch@0.0.1':
     resolution: {integrity: sha512-xhlTqH0m31mnsG0tIP4ETgfSB6gXDaYYsUWTrlUV93fFQPI9dd8hE0Ot6MHLCtqgB32hwJAC3YZMWlXZw7AleA==}
     engines: {node: '>=14'}
@@ -823,8 +860,23 @@ packages:
     resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
     engines: {node: '>=6.9.0'}
 
-  '@braintree/sanitize-url@6.0.4':
-    resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
+  '@braintree/sanitize-url@7.1.1':
+    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+
+  '@chevrotain/gast@11.0.3':
+    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+
+  '@chevrotain/regexp-to-ast@11.0.3':
+    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+
+  '@chevrotain/types@11.0.3':
+    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+
+  '@chevrotain/utils@11.0.3':
+    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
 
   '@codemirror/language@0.20.2':
     resolution: {integrity: sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==}
@@ -838,6 +890,10 @@ packages:
   '@corex/deepmerge@4.0.43':
     resolution: {integrity: sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==}
 
+  '@discoveryjs/json-ext@0.5.7':
+    resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
+    engines: {node: '>=10.0.0'}
+
   '@emnapi/runtime@1.3.1':
     resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
@@ -1030,6 +1086,16 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@formatjs/intl-localematcher@0.5.10':
+    resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
+
+  '@fortawesome/fontawesome-free@6.7.2':
+    resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
+    engines: {node: '>=6'}
+
   '@graphql-eslint/eslint-plugin@4.4.0':
     resolution: {integrity: sha512-dhW6fpk3Souuaphhc38uMAGCcgKMgtCJWFygIKODw/Kns43wiQqRPVay0aNFY1JBx3aevn4KPT/BCOdm6HNncA==}
     engines: {node: '>=18'}
@@ -1155,15 +1221,8 @@ packages:
     peerDependencies:
       graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
 
-  '@headlessui/react@1.7.19':
-    resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-
-  '@headlessui/react@2.2.7':
-    resolution: {integrity: sha512-WKdTymY8Y49H8/gUc/lIyYK1M+/6dq0Iywh4zTZVAaiTDprRfioxSgD0wnXTQTBpjpGJuTL1NO/mqEvc//5SSg==}
+  '@headlessui/react@2.2.4':
+    resolution: {integrity: sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
@@ -1182,6 +1241,18 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
+  '@igorkowalczyk/is-browser@5.1.0':
+    resolution: {integrity: sha512-OwyO+ocRLbo/iQsTBlCbx8S33esB35LgH4xhJJZk6MzpMKv8UFzEKWpzg2KI02syrPXvJ3hlU//Cq8fwxp/3sQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >=4.0.0'
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -1333,6 +1404,9 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@mermaid-js/parser@0.5.0':
+    resolution: {integrity: sha512-AiaN7+VjXC+3BYE+GwNezkpjIcCI2qIMB/K4S2/vMWe0q/XJCBbx5+K7iteuz7VyltX9iAK4FmVTvGc9kjOV4w==}
+
   '@napi-rs/simple-git-android-arm-eabi@0.1.16':
     resolution: {integrity: sha512-dbrCL0Pl5KZG7x7tXdtVsA5CO6At5ohDX3myf5xIYn9kN4jDFxsocl8bNt6Vb/hZQoJd8fI+k5VlJt+rFhbdVw==}
     engines: {node: '>= 10'}
@@ -1403,6 +1477,9 @@ packages:
     resolution: {integrity: sha512-C5wRPw9waqL2jk3jEDeJv+f7ScuO3N0a39HVdyFLkwKxHH4Sya4ZbzZsu2JLi6eEqe7RuHipHL6mC7B2OfYZZw==}
     engines: {node: '>= 10'}
 
+  '@next/bundle-analyzer@15.4.5':
+    resolution: {integrity: sha512-S2o5Zn5u1iKdn9GrsUd86jvjXRXmKNT/JpQuovfLgUigPC+fshyKvNebvnYSshmztsZL1U7AuUPg71PzAaiHcg==}
+
   '@next/env@13.5.6':
     resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
 
@@ -1498,8 +1575,13 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+  '@playwright/test@1.54.2':
+    resolution: {integrity: sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
   '@radix-ui/primitive@1.1.1':
     resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
@@ -1705,6 +1787,10 @@ packages:
   '@shikijs/twoslash@1.2.1':
     resolution: {integrity: sha512-QyrBtKhIXjByPbC2dS/8LAqCLfoVmZHgNqc4eqLVIkOxZp6AAkAak1A3E+oiMP9vLaMY9qQI1pnV45c8FB5PRw==}
 
+  '@sparticuz/chromium@138.0.2':
+    resolution: {integrity: sha512-vs5qUiK6kFCzLCxZ2buWONcB6jdF3VWdYp6kH1tt56tZ78p51dMAxfWsfk9P62z/jAeqbVg4V6Rb3Ic4aAeOKQ==}
+    engines: {node: '>=20.11.0'}
+
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
     resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
     engines: {node: '>=14'}
@@ -1816,13 +1902,13 @@ packages:
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
-  '@theguild/remark-mermaid@0.0.7':
-    resolution: {integrity: sha512-sh2xlwOllU6Abh+MPWdJDlNwirDcjdlH1wrDWxNLFNVbEzyVb1BTwhecc6ot5hxBUe38z1Ecja8xor9Wkb61gg==}
+  '@theguild/remark-mermaid@0.1.3':
+    resolution: {integrity: sha512-2FjVlaaKXK7Zj7UJAgOVTyaahn/3/EAfqYhyXg0BfDBVUl+lXcoIWRaxzqfnDr2rv8ax6GsC5mNh6hAaT86PDw==}
     peerDependencies:
       react: ^18.2.0
 
-  '@theguild/remark-npm2yarn@0.3.0':
-    resolution: {integrity: sha512-Fofw+9airYgjBd9G6PiHHCrptjyUybQ50JH9/5o9LCH54kggJ7stpCofzHjICB8L7VQbQ1Gwu23P/3CMVY1R4Q==}
+  '@theguild/remark-npm2yarn@0.3.3':
+    resolution: {integrity: sha512-ma6DvR03gdbvwqfKx1omqhg9May/VYGdMHvTzB4VuxkyS7KzfZ/lzrj43hmcsggpMje0x7SADA/pcMph0ejRnA==}
 
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
@@ -1837,15 +1923,99 @@ packages:
   '@types/concat-stream@2.0.3':
     resolution: {integrity: sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.6':
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
   '@types/d3-scale-chromatic@3.0.3':
     resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==}
 
   '@types/d3-scale@4.0.8':
     resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
 
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
   '@types/d3-time@3.0.3':
     resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
 
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -1855,6 +2025,9 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1909,6 +2082,9 @@ packages:
   '@types/tern@0.23.9':
     resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -2007,11 +2183,20 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
   acorn@8.11.3:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -2042,12 +2227,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  arch@2.2.0:
-    resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
-
-  arg@1.0.0:
-    resolution: {integrity: sha512-Wk7TEzl1KqvTGs/uyhmHO/3XLd3t1UeU4IstvPXVzGPM522cTjqjNZ99esCkcL52sjqjo8e8CTBcWhkxvGzoAw==}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -2115,6 +2294,9 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  b4a@1.6.7:
+    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
+
   babel-plugin-polyfill-corejs2@0.4.12:
     resolution: {integrity: sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==}
     peerDependencies:
@@ -2136,6 +2318,36 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  bare-events@2.6.1:
+    resolution: {integrity: sha512-AuTJkq9XmE6Vk0FJVNq5QxETrSA/vKHarWVBG5l/JbdCL1prJemiyJqUS0jrlXO0MftuPq4m3YVYhoNc5+aE/g==}
+
+  bare-fs@4.2.0:
+    resolution: {integrity: sha512-oRfrw7gwwBVAWx9S5zPMo2iiOjxyiZE12DmblmMQREgcogbNO0AFaZ+QBxxkEXiPspcpvO/Qtqn8LabUx4uYXg==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.6.1:
+    resolution: {integrity: sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.6.5:
+    resolution: {integrity: sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==}
+    peerDependencies:
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
   better-react-mathjax@2.0.3:
     resolution: {integrity: sha512-wfifT8GFOKb1TWm2+E50I6DJpLZ5kLbch283Lu043EJtwSv0XvZDjr4YfR4d2MjAhqP6SH4VjjrKgbX8R00oCQ==}
     peerDependencies:
@@ -2214,10 +2426,6 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chalk@2.3.0:
-    resolution: {integrity: sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==}
-    engines: {node: '>=4'}
-
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -2226,6 +2434,10 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -2247,6 +2459,14 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  chevrotain-allstar@0.3.1:
+    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
+    peerDependencies:
+      chevrotain: ^11.0.0
+
+  chevrotain@11.0.3:
+    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2258,9 +2478,9 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  clipboardy@1.2.2:
-    resolution: {integrity: sha512-16KrBOV7bHmHdxcQiCvfUFYVFyEah4FI8vYT1Fr7CGSA4G+xBWMEfUEQJS1hxeHGtI9ju1Bzs9uXSbj5HZKArw==}
-    engines: {node: '>=4'}
+  clipboardy@4.0.0:
+    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
+    engines: {node: '>=18'}
 
   clone-deep@4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
@@ -2336,6 +2556,12 @@ packages:
     resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
     engines: {'0': node >= 6.0}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2348,6 +2574,9 @@ packages:
   cose-base@1.0.3:
     resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
 
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -2361,9 +2590,6 @@ packages:
     resolution: {integrity: sha512-Pcw1JTvZLSJH83iiGWt6fRcT+BjZlCDRVwYLbUcHzv/CRpB7r0MlSrGbIyQvVSNyGnbt7G4AXuyCiDR3POvZ1A==}
     engines: {node: '>=16.0.0'}
 
-  cross-spawn@5.1.0:
-    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
-
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2404,8 +2630,13 @@ packages:
     peerDependencies:
       cytoscape: ^3.2.0
 
-  cytoscape@3.28.1:
-    resolution: {integrity: sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==}
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.32.0:
+    resolution: {integrity: sha512-5JHBC9n75kz5851jeklCPmZWcg3hUe6sjqJvyk3+hVqFaKcHwHgxsjeN1yLmggoUc6STbtm9/NQyabQehfjvWQ==}
     engines: {node: '>=0.10'}
 
   d3-array@2.12.1:
@@ -2547,8 +2778,8 @@ packages:
     resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
     engines: {node: '>=12'}
 
-  dagre-d3-es@7.0.10:
-    resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==}
+  dagre-d3-es@7.0.11:
+    resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==}
 
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
@@ -2572,6 +2803,12 @@ packages:
   dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
+  debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+
   debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2663,8 +2900,8 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.0.11:
-    resolution: {integrity: sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==}
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
 
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
@@ -2680,6 +2917,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2689,9 +2929,6 @@ packages:
   electron-to-chromium@1.5.74:
     resolution: {integrity: sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==}
 
-  elkjs@0.9.2:
-    resolution: {integrity: sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw==}
-
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
@@ -2701,6 +2938,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -2879,9 +3119,12 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  execa@0.8.0:
-    resolution: {integrity: sha512-zDWS+Rb1E8BlqqhALSt9kUhss8Qq4nN3iof3gsOdyINksElaPyNBtKUMTR62qhvgVWR0CqCX7sdnKe4MnUbFEA==}
-    engines: {node: '>=4'}
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -2900,6 +3143,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
   fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -2949,8 +3195,14 @@ packages:
   flexsearch@0.7.43:
     resolution: {integrity: sha512-c5o/+Um8aqCSOXGcZoqZOm+NqtVwNsvVpWv6lfmSclU954O3wvQKxxK8zj74fPaSJbXpSLTs4PRhh+wnoCXnKg==}
 
-  focus-visible@5.2.0:
-    resolution: {integrity: sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==}
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
 
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
@@ -2988,6 +3240,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3015,9 +3272,9 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-stream@3.0.0:
-    resolution: {integrity: sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==}
-    engines: {node: '>=4'}
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
 
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
@@ -3058,6 +3315,10 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -3116,14 +3377,17 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
 
-  has-flag@2.0.0:
-    resolution: {integrity: sha512-P+1n3MnwjR/Epg9BBo1KT8qbye2g2Ou4sFumihwt6I4tsUX7jnLcX4BTOSKg/B1ZrIYMN9FcEnG4x5a7NB8Eng==}
-    engines: {node: '>=0.10.0'}
-
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -3193,15 +3457,19 @@ packages:
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
 
-  heap@0.2.7:
-    resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
-
   html-entities@2.6.0:
     resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -3266,9 +3534,6 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  intersection-observer@0.12.2:
-    resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
-
   is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
 
@@ -3340,6 +3605,11 @@ packages:
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-empty@1.2.0:
     resolution: {integrity: sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==}
 
@@ -3377,6 +3647,11 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3409,6 +3684,10 @@ packages:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
 
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
@@ -3424,9 +3703,9 @@ packages:
     resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
-  is-stream@1.1.0:
-    resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
-    engines: {node: '>=0.10.0'}
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
@@ -3459,6 +3738,14 @@ packages:
     resolution: {integrity: sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==}
     engines: {node: '>=0.10.0'}
 
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  is64bit@2.0.0:
+    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
+    engines: {node: '>=18'}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -3565,9 +3852,19 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  langium@3.3.1:
+    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
+    engines: {node: '>=16.0.0'}
+
   layout-base@1.0.2:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
 
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   lazy-cache@2.0.2:
     resolution: {integrity: sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==}
     engines: {node: '>=0.10.0'}
@@ -3611,6 +3908,10 @@ packages:
   load-plugin@6.0.2:
     resolution: {integrity: sha512-3KRkTvCOsyNrx4zvBl/+ZMqPdVyp26TIf6xkmfEGuGwCfNQ/HzhktwbJCxd1KJpzPbK42t/WVOL3cX+TDaMRuQ==}
 
+  local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3633,9 +3934,6 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -3649,9 +3947,6 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@4.1.5:
-    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
-
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -3681,6 +3976,11 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   marked@5.1.2:
     resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==}
     engines: {node: '>= 16'}
@@ -3699,12 +3999,12 @@ packages:
   mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
 
-  mdast-util-from-markdown@1.3.1:
-    resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
-
   mdast-util-from-markdown@2.0.0:
     resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==}
 
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
   mdast-util-frontmatter@2.0.1:
     resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
 
@@ -3744,8 +4044,8 @@ packages:
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
-  mdast-util-to-hast@13.1.0:
-    resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
   mdast-util-to-markdown@2.1.0:
     resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
@@ -3753,9 +4053,6 @@ packages:
   mdast-util-to-string@2.0.0:
     resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
 
-  mdast-util-to-string@3.2.0:
-    resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
-
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
@@ -3765,12 +4062,23 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  mermaid@10.9.0:
-    resolution: {integrity: sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==}
+  mermaid-isomorphic@3.0.4:
+    resolution: {integrity: sha512-XQTy7H1XwHK3DPEHf+ZNWiqUEd9BwX3Xws38R9Fj2gx718srmgjlZoUzHr+Tca+O+dqJOJsAJaKzCoP65QDfDg==}
+    peerDependencies:
+      playwright: '1'
+    peerDependenciesMeta:
+      playwright:
+        optional: true
+
+  mermaid@11.7.0:
+    resolution: {integrity: sha512-/1/5R0rt0Z1Ak0CuznAnCF3HtQgayRXUz6SguzOwN4L+DuCobz0UxnQ+ZdTSZ3AugKVVh78tiVmsHpHWV25TCw==}
 
   meros@1.3.0:
     resolution: {integrity: sha512-2BNGOimxEz5hmjUG2FwoxCt5HN7BXdaWyFqEwxPTrJzVdABtrL4TiHTcsWSFAxPQ/tOnEaQEJh3qWq71QRMY+w==}
@@ -3784,9 +4092,6 @@ packages:
   mhchemparser@4.2.1:
     resolution: {integrity: sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==}
 
-  micromark-core-commonmark@1.1.0:
-    resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
-
   micromark-core-commonmark@2.0.0:
     resolution: {integrity: sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==}
 
@@ -3832,132 +4137,72 @@ packages:
   micromark-extension-mdxjs@3.0.0:
     resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
 
-  micromark-factory-destination@1.1.0:
-    resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
-
   micromark-factory-destination@2.0.0:
     resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
 
-  micromark-factory-label@1.1.0:
-    resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
-
   micromark-factory-label@2.0.0:
     resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
 
   micromark-factory-mdx-expression@2.0.1:
     resolution: {integrity: sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==}
 
-  micromark-factory-space@1.1.0:
-    resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
-
   micromark-factory-space@2.0.0:
     resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
 
-  micromark-factory-title@1.1.0:
-    resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
-
   micromark-factory-title@2.0.0:
     resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
 
-  micromark-factory-whitespace@1.1.0:
-    resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
-
   micromark-factory-whitespace@2.0.0:
     resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
 
-  micromark-util-character@1.2.0:
-    resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
-
   micromark-util-character@2.1.0:
     resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
 
-  micromark-util-chunked@1.1.0:
-    resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
-
   micromark-util-chunked@2.0.0:
     resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
 
-  micromark-util-classify-character@1.1.0:
-    resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
-
   micromark-util-classify-character@2.0.0:
     resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
 
-  micromark-util-combine-extensions@1.1.0:
-    resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
-
   micromark-util-combine-extensions@2.0.0:
     resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
 
-  micromark-util-decode-numeric-character-reference@1.1.0:
-    resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
-
   micromark-util-decode-numeric-character-reference@2.0.1:
     resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
 
-  micromark-util-decode-string@1.1.0:
-    resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
-
   micromark-util-decode-string@2.0.0:
     resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
 
-  micromark-util-encode@1.1.0:
-    resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
-
   micromark-util-encode@2.0.0:
     resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
 
   micromark-util-events-to-acorn@2.0.2:
     resolution: {integrity: sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==}
 
-  micromark-util-html-tag-name@1.2.0:
-    resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
-
   micromark-util-html-tag-name@2.0.0:
     resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
 
-  micromark-util-normalize-identifier@1.1.0:
-    resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
-
   micromark-util-normalize-identifier@2.0.0:
     resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
 
-  micromark-util-resolve-all@1.1.0:
-    resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
-
   micromark-util-resolve-all@2.0.0:
     resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
 
-  micromark-util-sanitize-uri@1.2.0:
-    resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
-
   micromark-util-sanitize-uri@2.0.0:
     resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
 
-  micromark-util-subtokenize@1.1.0:
-    resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
-
   micromark-util-subtokenize@2.0.0:
     resolution: {integrity: sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==}
 
-  micromark-util-symbol@1.1.0:
-    resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
-
   micromark-util-symbol@2.0.0:
     resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
 
-  micromark-util-types@1.1.0:
-    resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
-
   micromark-util-types@2.0.0:
     resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
 
   micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
 
-  micromark@3.2.0:
-    resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
-
   micromark@4.0.0:
     resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
 
@@ -3978,6 +4223,14 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -3999,6 +4252,9 @@ packages:
   mj-context-menu@0.6.1:
     resolution: {integrity: sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==}
 
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
   motion-dom@12.11.0:
     resolution: {integrity: sha512-CItkGYJenn5ZsbzTX0D9mE0UWdjdd9r535FrxEXhzR8Kwa9I2dLr1uhEJgQPWbgaIJ6i0sNFnf2T9NvVDWQVBw==}
 
@@ -4023,6 +4279,10 @@ packages:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -4045,6 +4305,10 @@ packages:
     engines: {node: '>= 4.4.x'}
     hasBin: true
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
   next-image-export-optimizer@1.18.0:
     resolution: {integrity: sha512-8yJO2QzBYMx2E1Lr67gWX3uqWbLZfBa7SwPjPjko4ki81SsJjsNeV7MID7VCcQ99aJW4mLgrWWRHCFNXF7gzlA==}
     engines: {node: '>=16.0.0'}
@@ -4067,11 +4331,11 @@ packages:
     peerDependencies:
       next: '*'
 
-  next-themes@0.3.0:
-    resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
-      react: ^16.8 || ^17 || ^18
-      react-dom: ^16.8 || ^17 || ^18
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   next-with-less@3.0.1:
     resolution: {integrity: sha512-lVJQ+dNWGpR1ccWM/LjY+8i28DC2oPa1Ivrc+h4+DFPJJN6O2EGKZIFBGrd9GLbwAEjFzKPs7yUk6bnrbY0qcw==}
@@ -4098,21 +4362,21 @@ packages:
       sass:
         optional: true
 
-  nextra-theme-docs@3.0.0-alpha.28:
-    resolution: {integrity: sha512-6n200ue1EKv/Eo7chkoKDLJ2gQ01R+hfdwp5xhzpSaqdiudqtsbUlDPEuwBBW0mQbLCUN80yNQanV4GjUg6/oA==}
+  nextra-theme-docs@3.3.1:
+    resolution: {integrity: sha512-P305m2UcW2IDyQhjrcAu0qpdPArikofinABslUCAyixYShsmcdDRUhIMd4QBHYru4gQuVjGWX9PhWZZCbNvzDQ==}
     peerDependencies:
       next: '>=13'
-      nextra: 3.0.0-alpha.28
-      react: '>=16.13.1'
-      react-dom: '>=16.13.1'
+      nextra: 3.3.1
+      react: '>=18'
+      react-dom: '>=18'
 
-  nextra@3.0.0-alpha.28:
-    resolution: {integrity: sha512-sw/Jdp/c1jS1Hpk2aPs7Y2G3c5lU3ijyXTATr9zUfn35zpneNf+70No8XKxXFo+nWO0CRHwVB15Ya+DNsvaYtQ==}
+  nextra@3.3.1:
+    resolution: {integrity: sha512-jiwj+LfUPHHeAxJAEqFuglxnbjFgzAOnDWFsjv7iv3BWiX8OksDwd3I2Sv3j2zba00iIBDEPdNeylfzTtTLZVg==}
     engines: {node: '>=18'}
     peerDependencies:
       next: '>=13'
-      react: '>=16.13.1'
-      react-dom: '>=16.13.1'
+      react: '>=18'
+      react-dom: '>=18'
 
   nlcst-to-string@4.0.0:
     resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
@@ -4132,9 +4396,6 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  non-layered-tidy-tree-layout@2.0.2:
-    resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
-
   nopt@7.2.0:
     resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -4156,12 +4417,12 @@ packages:
     resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  npm-run-path@2.0.2:
-    resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==}
-    engines: {node: '>=4'}
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  npm-to-yarn@2.2.1:
-    resolution: {integrity: sha512-O/j/ROyX0KGLG7O6Ieut/seQ0oiTpHF2tXAcFbpdTLQFiaNtkyTXXocM1fwpaa60dg1qpWj0nHlbNhx6qwuENQ==}
+  npm-to-yarn@3.0.1:
+    resolution: {integrity: sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
   nth-check@2.1.1:
@@ -4208,6 +4469,14 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+
   optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -4216,10 +4485,6 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  p-finally@1.0.0:
-    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
-    engines: {node: '>=4'}
-
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -4239,6 +4504,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4274,6 +4542,9 @@ packages:
     resolution: {integrity: sha512-eqtUnI5+COkf1CQOYo8FmykN5Zs+5Yr60f/7GcPgQDZEEjdE/VZ4WMaMo9g37foof8h64t/TH2Uvk2Sq0fDy/g==}
     engines: {node: '>=0.10.0'}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4282,14 +4553,14 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
-  path-key@2.0.1:
-    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
-    engines: {node: '>=4'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -4301,6 +4572,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
 
@@ -4323,6 +4597,28 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.1.0:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+
+  playwright-core@1.54.2:
+    resolution: {integrity: sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.54.2:
+    resolution: {integrity: sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -4333,6 +4629,12 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
+  postcss-import@16.1.1:
+    resolution: {integrity: sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
   postcss-js@4.0.1:
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -4471,13 +4773,16 @@ packages:
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
-  pseudomap@1.0.2:
-    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  quansync@0.2.10:
+    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -4577,11 +4882,19 @@ packages:
   rehype-katex@7.0.0:
     resolution: {integrity: sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==}
 
+  rehype-mermaid@3.0.0:
+    resolution: {integrity: sha512-fxrD5E4Fa1WXUjmjNDvLOMT4XB1WaxcfycFIWiYU0yEMQhcTDElc9aDFnbDFRLxG1Cfo1I3mfD5kg4sjlWaB+Q==}
+    peerDependencies:
+      playwright: '1'
+    peerDependenciesMeta:
+      playwright:
+        optional: true
+
   rehype-parse@9.0.0:
     resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==}
 
-  rehype-pretty-code@0.13.2:
-    resolution: {integrity: sha512-F+PaFMscfJOcSHcR2b//+hk/0jT56hmGDqXcVD6VC9j0CUSGiqv8YxaWUyhR7qEIRRSbzAVxx+0uxzk+akXs+w==}
+  rehype-pretty-code@0.14.0:
+    resolution: {integrity: sha512-hBeKF/Wkkf3zyUS8lal9RCUuhypDWLQc+h9UrP9Pav25FUm/AQAVh4m5gdvJxh4Oz+U+xKvdsV01p1LdvsZTiQ==}
     engines: {node: '>=18'}
     peerDependencies:
       shiki: ^1.3.0
@@ -4672,6 +4985,9 @@ packages:
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   rss@1.2.2:
     resolution: {integrity: sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==}
 
@@ -4764,18 +5080,10 @@ packages:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shebang-command@1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
 
-  shebang-regex@1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-
   shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
@@ -4799,9 +5107,6 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -4809,6 +5114,10 @@ packages:
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -4850,6 +5159,9 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
+  streamx@2.22.1:
+    resolution: {integrity: sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==}
+
   string-collapse-leading-whitespace@7.0.9:
     resolution: {integrity: sha512-lEuTHlogBT9PWipfk0FOyvoMKX8syiE03QoFk5MDh8oS0AJ2C07IlstR5cGkxz48nKkOIuvkC28w9Rx/cVRNDg==}
     engines: {node: '>=14.18.0'}
@@ -4922,9 +5234,9 @@ packages:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
 
-  strip-eof@1.0.0:
-    resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==}
-    engines: {node: '>=0.10.0'}
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
 
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
@@ -4952,18 +5264,14 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  stylis@4.3.1:
-    resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  supports-color@4.5.0:
-    resolution: {integrity: sha512-ycQR/UbvI9xIlEdQT1TQqwoXtEldExbCEAJgRo5YXlmSKjv6ThHnP9/vwGa1gr19Gfw+LkFd7KqYMhzrRC5JYw==}
-    engines: {node: '>=4'}
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -4992,6 +5300,10 @@ packages:
     resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  system-architecture@0.1.0:
+    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
+    engines: {node: '>=18'}
+
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
@@ -5000,6 +5312,15 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tar-fs@3.1.0:
+    resolution: {integrity: sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==}
+
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+
+  text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -5016,13 +5337,12 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
-  title@3.5.3:
-    resolution: {integrity: sha512-20JyowYglSEeCvZv3EZ0nZ046vLarO37prvV0mbtQV7C8DJPGgN967r8SJkqd3XK3K3lD3/Iyfp3avjfil8Q2Q==}
-    hasBin: true
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
-  titleize@1.0.0:
-    resolution: {integrity: sha512-TARUb7z1pGvlLxgPk++7wJ6aycXF3GJ0sNSBTAsTuJrQG5QuZlkUQP+zl+nbjAh4gMX9yDw9ZYklMd7vAfJKEw==}
-    engines: {node: '>=0.10.0'}
+  title@4.0.1:
+    resolution: {integrity: sha512-xRnPkJx9nvE5MF6LkB5e8QJjE2FW8269wTu/LQdf7zZqBgPly0QJPf/CWAo7srj5so4yXfoLEdCFgurlpi47zg==}
+    hasBin: true
 
   to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
@@ -5032,6 +5352,10 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
@@ -5113,6 +5437,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
@@ -5254,8 +5581,8 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
   uvu@0.5.6:
@@ -5291,9 +5618,26 @@ packages:
   vfile@6.0.1:
     resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
 
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
   vscode-languageserver-types@3.17.5:
     resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
 
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -5306,12 +5650,14 @@ packages:
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
-  web-worker@1.3.0:
-    resolution: {integrity: sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==}
-
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webpack-bundle-analyzer@4.10.1:
+    resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -5331,10 +5677,6 @@ packages:
     resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
     engines: {node: '>= 0.4'}
 
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -5354,7 +5696,19 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  ws@8.18.0:
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  ws@8.18.0:
     resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
@@ -5373,20 +5727,12 @@ packages:
     resolution: {integrity: sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==}
     engines: {node: '>=0.1'}
 
-  yallist@2.1.2:
-    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml@2.4.1:
-    resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yaml@2.6.1:
     resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
     engines: {node: '>= 14'}
@@ -5427,6 +5773,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
+
+  '@antfu/utils@8.1.1': {}
+
   '@ardatan/sync-fetch@0.0.1':
     dependencies:
       node-fetch: 2.7.0
@@ -6183,7 +6536,24 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
-  '@braintree/sanitize-url@6.0.4': {}
+  '@braintree/sanitize-url@7.1.1': {}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    dependencies:
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/gast@11.0.3':
+    dependencies:
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/regexp-to-ast@11.0.3': {}
+
+  '@chevrotain/types@11.0.3': {}
+
+  '@chevrotain/utils@11.0.3': {}
 
   '@codemirror/language@0.20.2':
     dependencies:
@@ -6204,6 +6574,8 @@ snapshots:
 
   '@corex/deepmerge@4.0.43': {}
 
+  '@discoveryjs/json-ext@0.5.7': {}
+
   '@emnapi/runtime@1.3.1':
     dependencies:
       tslib: 2.8.1
@@ -6325,13 +6697,21 @@ snapshots:
   '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@floating-ui/utils': 0.2.10
+      '@floating-ui/utils': 0.2.9
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@floating-ui/utils@0.2.9': {}
+
+  '@formatjs/intl-localematcher@0.5.10':
+    dependencies:
+      tslib: 2.8.1
+
+  '@fortawesome/fontawesome-free@6.7.2': {}
+
   '@graphql-eslint/eslint-plugin@4.4.0(@types/node@22.10.5)(eslint@8.57.1)(graphql@16.10.0)(typescript@5.8.3)':
     dependencies:
       '@graphql-tools/code-file-loader': 8.1.10(graphql@16.10.0)
@@ -6537,14 +6917,7 @@ snapshots:
     dependencies:
       graphql: 16.10.0
 
-  '@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/react-virtual': 3.13.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      client-only: 0.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@headlessui/react@2.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@headlessui/react@2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@react-aria/focus': 3.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6566,6 +6939,25 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.0
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@igorkowalczyk/is-browser@5.1.0(tailwindcss@3.4.17)':
+    dependencies:
+      tailwindcss: 3.4.17
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -6715,6 +7107,10 @@ snapshots:
       '@types/react': 18.3.23
       react: 18.3.1
 
+  '@mermaid-js/parser@0.5.0':
+    dependencies:
+      langium: 3.3.1
+
   '@napi-rs/simple-git-android-arm-eabi@0.1.16':
     optional: true
 
@@ -6762,6 +7158,13 @@ snapshots:
       '@napi-rs/simple-git-win32-arm64-msvc': 0.1.16
       '@napi-rs/simple-git-win32-x64-msvc': 0.1.16
 
+  '@next/bundle-analyzer@15.4.5':
+    dependencies:
+      webpack-bundle-analyzer: 4.10.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@next/env@13.5.6': {}
 
   '@next/env@14.2.29': {}
@@ -6834,7 +7237,11 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
-  '@popperjs/core@2.11.8': {}
+  '@playwright/test@1.54.2':
+    dependencies:
+      playwright: 1.54.2
+
+  '@polka/url@1.0.0-next.29': {}
 
   '@radix-ui/primitive@1.1.1': {}
 
@@ -7024,6 +7431,14 @@ snapshots:
       - supports-color
       - typescript
 
+  '@sparticuz/chromium@138.0.2':
+    dependencies:
+      follow-redirects: 1.15.11
+      tar-fs: 3.1.0
+    transitivePeerDependencies:
+      - bare-buffer
+      - debug
+
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
@@ -7153,17 +7568,17 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.12': {}
 
-  '@theguild/remark-mermaid@0.0.7(react@18.3.1)':
+  '@theguild/remark-mermaid@0.1.3(react@18.3.1)':
     dependencies:
-      mermaid: 10.9.0
+      mermaid: 11.7.0
       react: 18.3.1
       unist-util-visit: 5.0.0
     transitivePeerDependencies:
       - supports-color
 
-  '@theguild/remark-npm2yarn@0.3.0':
+  '@theguild/remark-npm2yarn@0.3.3':
     dependencies:
-      npm-to-yarn: 2.2.1
+      npm-to-yarn: 3.0.1
       unist-util-visit: 5.0.0
 
   '@trysound/sax@0.2.0': {}
@@ -7180,14 +7595,123 @@ snapshots:
     dependencies:
       '@types/node': 22.10.5
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.6': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
   '@types/d3-scale-chromatic@3.0.3': {}
 
   '@types/d3-scale@4.0.8':
     dependencies:
       '@types/d3-time': 3.0.3
 
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
   '@types/d3-time@3.0.3': {}
 
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.8
+      '@types/d3-scale-chromatic': 3.0.3
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.3
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
@@ -7198,6 +7722,8 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.2
@@ -7253,6 +7779,9 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
@@ -7377,8 +7906,18 @@ snapshots:
     dependencies:
       acorn: 8.11.3
 
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
   acorn@8.11.3: {}
 
+  acorn@8.15.0: {}
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -7407,10 +7946,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arch@2.2.0: {}
-
-  arg@1.0.0: {}
-
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -7500,6 +8035,8 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
+  b4a@1.6.7: {}
+
   babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.0):
     dependencies:
       '@babel/compat-data': 7.26.3
@@ -7528,6 +8065,31 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  bare-events@2.6.1:
+    optional: true
+
+  bare-fs@4.2.0:
+    dependencies:
+      bare-events: 2.6.1
+      bare-path: 3.0.0
+      bare-stream: 2.6.5(bare-events@2.6.1)
+    optional: true
+
+  bare-os@3.6.1:
+    optional: true
+
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.6.1
+    optional: true
+
+  bare-stream@2.6.5(bare-events@2.6.1):
+    dependencies:
+      streamx: 2.22.1
+    optionalDependencies:
+      bare-events: 2.6.1
+    optional: true
+
   better-react-mathjax@2.0.3(react@18.3.1):
     dependencies:
       mathjax-full: 3.2.2
@@ -7605,12 +8167,6 @@ snapshots:
 
   ccount@2.0.1: {}
 
-  chalk@2.3.0:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 4.5.0
-
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -7622,6 +8178,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.4.1: {}
+
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@1.1.4: {}
@@ -7636,6 +8194,20 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  chevrotain-allstar@0.3.1(chevrotain@11.0.3):
+    dependencies:
+      chevrotain: 11.0.3
+      lodash-es: 4.17.21
+
+  chevrotain@11.0.3:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.0.3
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/regexp-to-ast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      '@chevrotain/utils': 11.0.3
+      lodash-es: 4.17.21
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -7652,10 +8224,11 @@ snapshots:
 
   client-only@0.0.1: {}
 
-  clipboardy@1.2.2:
+  clipboardy@4.0.0:
     dependencies:
-      arch: 2.2.0
-      execa: 0.8.0
+      execa: 8.0.1
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
 
   clone-deep@4.0.1:
     dependencies:
@@ -7723,6 +8296,10 @@ snapshots:
       readable-stream: 3.6.2
       typedarray: 0.0.6
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
   convert-source-map@2.0.0: {}
 
   copy-anything@2.0.6:
@@ -7737,6 +8314,10 @@ snapshots:
     dependencies:
       layout-base: 1.0.2
 
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cosmiconfig@8.3.6(typescript@5.8.3):
     dependencies:
       import-fresh: 3.3.0
@@ -7750,12 +8331,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  cross-spawn@5.1.0:
-    dependencies:
-      lru-cache: 4.1.5
-      shebang-command: 1.2.0
-      which: 1.3.1
-
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -7796,15 +8371,17 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  cytoscape-cose-bilkent@4.1.0(cytoscape@3.28.1):
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.32.0):
     dependencies:
       cose-base: 1.0.3
-      cytoscape: 3.28.1
+      cytoscape: 3.32.0
 
-  cytoscape@3.28.1:
+  cytoscape-fcose@2.2.0(cytoscape@3.32.0):
     dependencies:
-      heap: 0.2.7
-      lodash: 4.17.21
+      cose-base: 2.2.0
+      cytoscape: 3.32.0
+
+  cytoscape@3.32.0: {}
 
   d3-array@2.12.1:
     dependencies:
@@ -7973,7 +8550,7 @@ snapshots:
       d3-transition: 3.0.1(d3-selection@3.0.0)
       d3-zoom: 3.0.0
 
-  dagre-d3-es@7.0.10:
+  dagre-d3-es@7.0.11:
     dependencies:
       d3: 7.9.0
       lodash-es: 4.17.21
@@ -8004,6 +8581,10 @@ snapshots:
 
   dayjs@1.11.10: {}
 
+  dayjs@1.11.13: {}
+
+  debounce@1.2.1: {}
+
   debug@4.3.4:
     dependencies:
       ms: 2.1.2
@@ -8078,7 +8659,9 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.0.11: {}
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
 
   domutils@3.1.0:
     dependencies:
@@ -8099,20 +8682,24 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  duplexer@0.1.2: {}
+
   eastasianwidth@0.2.0: {}
 
   electron-to-chromium@1.5.179: {}
 
   electron-to-chromium@1.5.74: {}
 
-  elkjs@0.9.2: {}
-
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
   entities@4.5.0: {}
 
   errno@0.1.8:
@@ -8449,15 +9036,19 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  execa@0.8.0:
+  execa@8.0.1:
     dependencies:
-      cross-spawn: 5.1.0
-      get-stream: 3.0.0
-      is-stream: 1.1.0
-      npm-run-path: 2.0.2
-      p-finally: 1.0.0
-      signal-exit: 3.0.7
-      strip-eof: 1.0.0
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  exsolve@1.0.7: {}
 
   extend-shallow@2.0.1:
     dependencies:
@@ -8471,6 +9062,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-fifo@1.3.2: {}
+
   fast-glob@3.3.1:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -8531,7 +9124,7 @@ snapshots:
 
   flexsearch@0.7.43: {}
 
-  focus-visible@5.2.0: {}
+  follow-redirects@1.15.11: {}
 
   for-each@0.3.5:
     dependencies:
@@ -8559,6 +9152,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -8595,7 +9191,7 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-stream@3.0.0: {}
+  get-stream@8.0.1: {}
 
   get-symbol-description@1.1.0:
     dependencies:
@@ -8649,6 +9245,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@15.15.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
@@ -8721,9 +9319,13 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
-  has-bigints@1.1.0: {}
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
 
-  has-flag@2.0.0: {}
+  hachure-fill@0.5.2: {}
+
+  has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
 
@@ -8796,7 +9398,7 @@ snapshots:
       hast-util-from-parse5: 8.0.1
       hast-util-to-parse5: 8.0.0
       html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.1.0
+      mdast-util-to-hast: 13.2.0
       parse5: 7.1.2
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
@@ -8878,12 +9480,14 @@ snapshots:
       property-information: 6.4.1
       space-separated-tokens: 2.0.2
 
-  heap@0.2.7: {}
-
   html-entities@2.6.0: {}
 
+  html-escaper@2.0.2: {}
+
   html-void-elements@3.0.0: {}
 
+  human-signals@5.0.0: {}
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -8939,8 +9543,6 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  intersection-observer@0.12.2: {}
-
   is-alphabetical@1.0.4: {}
 
   is-alphabetical@2.0.1: {}
@@ -9015,6 +9617,8 @@ snapshots:
 
   is-decimal@2.0.1: {}
 
+  is-docker@3.0.0: {}
+
   is-empty@1.2.0: {}
 
   is-extendable@0.1.1: {}
@@ -9046,6 +9650,10 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -9067,6 +9675,8 @@ snapshots:
     dependencies:
       isobject: 3.0.1
 
+  is-plain-object@5.0.0: {}
+
   is-reference@3.0.2:
     dependencies:
       '@types/estree': 1.0.5
@@ -9084,7 +9694,7 @@ snapshots:
     dependencies:
       call-bound: 1.0.4
 
-  is-stream@1.1.0: {}
+  is-stream@3.0.0: {}
 
   is-string@1.1.1:
     dependencies:
@@ -9116,6 +9726,14 @@ snapshots:
 
   is-whitespace@0.3.0: {}
 
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  is64bit@2.0.0:
+    dependencies:
+      system-architecture: 0.1.0
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -9205,8 +9823,20 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  kolorist@1.8.0: {}
+
+  langium@3.3.1:
+    dependencies:
+      chevrotain: 11.0.3
+      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+
   layout-base@1.0.2: {}
 
+  layout-base@2.0.1: {}
+
   lazy-cache@2.0.2:
     dependencies:
       set-getter: 0.1.1
@@ -9247,6 +9877,12 @@ snapshots:
       '@npmcli/config': 8.2.0
       import-meta-resolve: 4.0.0
 
+  local-pkg@1.1.1:
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.1.0
+      quansync: 0.2.10
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -9263,8 +9899,6 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lodash@4.17.21: {}
-
   longest-streak@3.1.0: {}
 
   loose-envify@1.4.0:
@@ -9277,11 +9911,6 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@4.1.5:
-    dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
-
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -9308,6 +9937,8 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  marked@15.0.12: {}
+
   marked@5.1.2: {}
 
   math-intrinsics@1.1.0: {}
@@ -9336,24 +9967,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-from-markdown@1.3.1:
+  mdast-util-from-markdown@2.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/mdast': 4.0.3
+      '@types/unist': 3.0.2
       decode-named-character-reference: 1.0.2
-      mdast-util-to-string: 3.2.0
-      micromark: 3.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-decode-string: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      unist-util-stringify-position: 3.0.3
-      uvu: 0.5.6
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-decode-string: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+      unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-from-markdown@2.0.0:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.3
       '@types/unist': 3.0.2
@@ -9393,7 +10024,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
       micromark-util-normalize-identifier: 2.0.0
     transitivePeerDependencies:
@@ -9402,7 +10033,7 @@ snapshots:
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.3
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -9412,7 +10043,7 @@ snapshots:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
       markdown-table: 3.0.3
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
@@ -9421,14 +10052,14 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.0
       mdast-util-gfm-footnote: 2.0.0
       mdast-util-gfm-strikethrough: 2.0.0
@@ -9444,7 +10075,7 @@ snapshots:
       '@types/mdast': 4.0.3
       devlop: 1.1.0
       longest-streak: 3.1.0
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.0
       unist-util-remove-position: 5.0.0
     transitivePeerDependencies:
@@ -9481,7 +10112,7 @@ snapshots:
 
   mdast-util-mdx@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-mdx-expression: 2.0.0
       mdast-util-mdx-jsx: 3.1.2
       mdast-util-mdxjs-esm: 2.0.1
@@ -9505,7 +10136,7 @@ snapshots:
       '@types/mdast': 4.0.3
       unist-util-is: 6.0.0
 
-  mdast-util-to-hast@13.1.0:
+  mdast-util-to-hast@13.2.0:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
@@ -9530,10 +10161,6 @@ snapshots:
 
   mdast-util-to-string@2.0.0: {}
 
-  mdast-util-to-string@3.2.0:
-    dependencies:
-      '@types/mdast': 3.0.15
-
   mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.3
@@ -9542,30 +10169,41 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
-  mermaid@10.9.0:
+  mermaid-isomorphic@3.0.4(patch_hash=tt5abewtk4kmqtpqfe2f44hnpa)(playwright@1.54.2):
     dependencies:
-      '@braintree/sanitize-url': 6.0.4
-      '@types/d3-scale': 4.0.8
-      '@types/d3-scale-chromatic': 3.0.3
-      cytoscape: 3.28.1
-      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.28.1)
+      '@fortawesome/fontawesome-free': 6.7.2
+      mermaid: 11.7.0
+    optionalDependencies:
+      playwright: 1.54.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mermaid@11.7.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.1
+      '@iconify/utils': 2.3.0
+      '@mermaid-js/parser': 0.5.0
+      '@types/d3': 7.4.3
+      cytoscape: 3.32.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.32.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.32.0)
       d3: 7.9.0
       d3-sankey: 0.12.3
-      dagre-d3-es: 7.0.10
-      dayjs: 1.11.10
-      dompurify: 3.0.11
-      elkjs: 0.9.2
+      dagre-d3-es: 7.0.11
+      dayjs: 1.11.13
+      dompurify: 3.2.6
       katex: 0.16.10
       khroma: 2.1.0
       lodash-es: 4.17.21
-      mdast-util-from-markdown: 1.3.1
-      non-layered-tidy-tree-layout: 2.0.2
-      stylis: 4.3.1
+      marked: 15.0.12
+      roughjs: 4.6.6
+      stylis: 4.3.6
       ts-dedent: 2.2.0
-      uuid: 9.0.1
-      web-worker: 1.3.0
+      uuid: 11.1.0
     transitivePeerDependencies:
       - supports-color
 
@@ -9575,25 +10213,6 @@ snapshots:
 
   mhchemparser@4.2.1: {}
 
-  micromark-core-commonmark@1.1.0:
-    dependencies:
-      decode-named-character-reference: 1.0.2
-      micromark-factory-destination: 1.1.0
-      micromark-factory-label: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-factory-title: 1.1.0
-      micromark-factory-whitespace: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-classify-character: 1.1.0
-      micromark-util-html-tag-name: 1.2.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
   micromark-core-commonmark@2.0.0:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -9730,8 +10349,8 @@ snapshots:
 
   micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
       micromark-extension-mdx-expression: 3.0.0
       micromark-extension-mdx-jsx: 3.0.0
       micromark-extension-mdx-md: 2.0.0
@@ -9739,25 +10358,12 @@ snapshots:
       micromark-util-combine-extensions: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-factory-destination@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-factory-destination@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-factory-label@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
   micromark-factory-label@2.0.0:
     dependencies:
       devlop: 1.1.0
@@ -9776,23 +10382,11 @@ snapshots:
       unist-util-position-from-estree: 2.0.0
       vfile-message: 4.0.2
 
-  micromark-factory-space@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-types: 1.1.0
-
   micromark-factory-space@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
       micromark-util-types: 2.0.0
 
-  micromark-factory-title@1.1.0:
-    dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-factory-title@2.0.0:
     dependencies:
       micromark-factory-space: 2.0.0
@@ -9800,13 +10394,6 @@ snapshots:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-factory-whitespace@1.1.0:
-    dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-factory-whitespace@2.0.0:
     dependencies:
       micromark-factory-space: 2.0.0
@@ -9814,61 +10401,30 @@ snapshots:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-util-character@1.2.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-util-character@2.1.0:
     dependencies:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-util-chunked@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
   micromark-util-chunked@2.0.0:
     dependencies:
       micromark-util-symbol: 2.0.0
 
-  micromark-util-classify-character@1.1.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-util-classify-character@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-util-combine-extensions@1.1.0:
-    dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-types: 1.1.0
-
   micromark-util-combine-extensions@2.0.0:
     dependencies:
       micromark-util-chunked: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-util-decode-numeric-character-reference@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
   micromark-util-decode-numeric-character-reference@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.0
 
-  micromark-util-decode-string@1.1.0:
-    dependencies:
-      decode-named-character-reference: 1.0.2
-      micromark-util-character: 1.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-symbol: 1.1.0
-
   micromark-util-decode-string@2.0.0:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -9876,8 +10432,6 @@ snapshots:
       micromark-util-decode-numeric-character-reference: 2.0.1
       micromark-util-symbol: 2.0.0
 
-  micromark-util-encode@1.1.0: {}
-
   micromark-util-encode@2.0.0: {}
 
   micromark-util-events-to-acorn@2.0.2:
@@ -9891,45 +10445,22 @@ snapshots:
       micromark-util-types: 2.0.0
       vfile-message: 4.0.2
 
-  micromark-util-html-tag-name@1.2.0: {}
-
   micromark-util-html-tag-name@2.0.0: {}
 
-  micromark-util-normalize-identifier@1.1.0:
-    dependencies:
-      micromark-util-symbol: 1.1.0
-
   micromark-util-normalize-identifier@2.0.0:
     dependencies:
       micromark-util-symbol: 2.0.0
 
-  micromark-util-resolve-all@1.1.0:
-    dependencies:
-      micromark-util-types: 1.1.0
-
   micromark-util-resolve-all@2.0.0:
     dependencies:
       micromark-util-types: 2.0.0
 
-  micromark-util-sanitize-uri@1.2.0:
-    dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-encode: 1.1.0
-      micromark-util-symbol: 1.1.0
-
   micromark-util-sanitize-uri@2.0.0:
     dependencies:
       micromark-util-character: 2.1.0
       micromark-util-encode: 2.0.0
       micromark-util-symbol: 2.0.0
 
-  micromark-util-subtokenize@1.1.0:
-    dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
   micromark-util-subtokenize@2.0.0:
     dependencies:
       devlop: 1.1.0
@@ -9937,12 +10468,8 @@ snapshots:
       micromark-util-symbol: 2.0.0
       micromark-util-types: 2.0.0
 
-  micromark-util-symbol@1.1.0: {}
-
   micromark-util-symbol@2.0.0: {}
 
-  micromark-util-types@1.1.0: {}
-
   micromark-util-types@2.0.0: {}
 
   micromark@2.11.4:
@@ -9952,28 +10479,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromark@3.2.0:
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.4.0
-      decode-named-character-reference: 1.0.2
-      micromark-core-commonmark: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-combine-extensions: 1.1.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-encode: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-sanitize-uri: 1.2.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-    transitivePeerDependencies:
-      - supports-color
-
   micromark@4.0.0:
     dependencies:
       '@types/debug': 4.1.12
@@ -10010,6 +10515,10 @@ snapshots:
   mime@1.6.0:
     optional: true
 
+  mimic-fn@4.0.0: {}
+
+  mini-svg-data-uri@1.4.4: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -10029,6 +10538,13 @@ snapshots:
 
   mj-context-menu@0.6.1: {}
 
+  mlly@1.7.4:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
   motion-dom@12.11.0:
     dependencies:
       motion-utils: 12.9.4
@@ -10045,6 +10561,8 @@ snapshots:
 
   mri@1.2.0: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.1.2: {}
 
   ms@2.1.3: {}
@@ -10065,41 +10583,43 @@ snapshots:
       sax: 1.4.1
     optional: true
 
-  next-image-export-optimizer@1.18.0(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
+  negotiator@1.0.0: {}
+
+  next-image-export-optimizer@1.18.0(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       sharp: 0.33.5
       typescript: 5.8.3
 
-  next-query-params@5.0.1(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-query-params@5.0.1(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       tslib: 2.8.1
       use-query-params: 2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next-sitemap@4.2.3(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-sitemap@4.2.3(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       '@corex/deepmerge': 4.0.43
       '@next/env': 13.5.6
       fast-glob: 3.3.3
       minimist: 1.2.8
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next-with-less@3.0.1(less-loader@12.2.0(less@4.2.1))(less@4.2.1)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  next-with-less@3.0.1(less-loader@12.2.0(less@4.2.1))(less@4.2.1)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
     dependencies:
       clone-deep: 4.0.1
       less: 4.2.1
       less-loader: 12.2.0(less@4.2.1)
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 14.2.29
       '@swc/helpers': 0.5.5
@@ -10120,36 +10640,35 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 14.2.29
       '@next/swc-win32-ia32-msvc': 14.2.29
       '@next/swc-win32-x64-msvc': 14.2.29
+      '@playwright/test': 1.54.2
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@3.0.0-alpha.28(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.0.0-alpha.28(patch_hash=rlrllt7ydx3t6f2hccqi2i2pf4)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra-theme-docs@3.3.1(patch_hash=6nt5xhmisiwamimp7yowa7aoxq)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=6ssvmycplmexou7j5jtwzrnhmy)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@popperjs/core': 2.11.8
+      '@headlessui/react': 2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx: 2.1.1
       escape-string-regexp: 5.0.0
       flexsearch: 0.7.43
-      focus-visible: 5.2.0
-      intersection-observer: 0.12.2
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-themes: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nextra: 3.0.0-alpha.28(patch_hash=rlrllt7ydx3t6f2hccqi2i2pf4)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nextra: 3.3.1(patch_hash=6ssvmycplmexou7j5jtwzrnhmy)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.22.4
 
-  nextra@3.0.0-alpha.28(patch_hash=rlrllt7ydx3t6f2hccqi2i2pf4)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3):
+  nextra@3.3.1(patch_hash=6ssvmycplmexou7j5jtwzrnhmy)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3):
     dependencies:
-      '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@formatjs/intl-localematcher': 0.5.10
+      '@headlessui/react': 2.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mdx-js/mdx': 3.0.1
       '@mdx-js/react': 3.0.1(@types/react@18.3.23)(react@18.3.1)
       '@napi-rs/simple-git': 0.1.16
       '@shikijs/twoslash': 1.2.1(typescript@5.8.3)
-      '@theguild/remark-mermaid': 0.0.7(react@18.3.1)
-      '@theguild/remark-npm2yarn': 0.3.0
+      '@theguild/remark-mermaid': 0.1.3(react@18.3.1)
+      '@theguild/remark-npm2yarn': 0.3.3
       better-react-mathjax: 2.0.3(react@18.3.1)
       clsx: 2.1.1
       estree-util-to-js: 2.0.0
@@ -10159,12 +10678,17 @@ snapshots:
       gray-matter: 4.0.3
       hast-util-to-estree: 3.1.0
       katex: 0.16.10
-      next: 14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      negotiator: 1.0.0
+      next: 14.2.29(@babel/core@7.26.0)(@playwright/test@1.54.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       p-limit: 6.1.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
+      react-medium-image-zoom: 5.2.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-katex: 7.0.0
-      rehype-pretty-code: 0.13.2(shiki@1.2.1)
+      rehype-pretty-code: 0.14.0(shiki@1.2.1)
       rehype-raw: 7.0.0
       remark-frontmatter: 5.0.0
       remark-gfm: 4.0.0
@@ -10173,10 +10697,10 @@ snapshots:
       remark-smartypants: 3.0.2
       shiki: 1.2.1
       slash: 5.1.0
-      title: 3.5.3
+      title: 4.0.1
       unist-util-remove: 4.0.0
       unist-util-visit: 5.0.0
-      yaml: 2.4.1
+      yaml: 2.6.1
       zod: 3.22.4
       zod-validation-error: 3.3.0(zod@3.22.4)
     transitivePeerDependencies:
@@ -10199,8 +10723,6 @@ snapshots:
 
   node-releases@2.0.19: {}
 
-  non-layered-tidy-tree-layout@2.0.2: {}
-
   nopt@7.2.0:
     dependencies:
       abbrev: 2.0.0
@@ -10215,11 +10737,11 @@ snapshots:
 
   npm-normalize-package-bin@3.0.1: {}
 
-  npm-run-path@2.0.2:
+  npm-run-path@5.3.0:
     dependencies:
-      path-key: 2.0.1
+      path-key: 4.0.0
 
-  npm-to-yarn@2.2.1: {}
+  npm-to-yarn@3.0.1: {}
 
   nth-check@2.1.1:
     dependencies:
@@ -10273,6 +10795,12 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  opener@1.5.2: {}
+
   optionator@0.9.3:
     dependencies:
       '@aashutoshrathi/word-wrap': 1.2.6
@@ -10288,8 +10816,6 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  p-finally@1.0.0: {}
-
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -10308,6 +10834,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.3.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -10374,14 +10902,16 @@ snapshots:
       mixin-deep: 1.3.2
       trim-leading-lines: 0.1.1
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
 
-  path-key@2.0.1: {}
-
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -10391,6 +10921,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@2.0.3: {}
+
   periscopic@3.1.0:
     dependencies:
       '@types/estree': 1.0.5
@@ -10408,6 +10940,33 @@ snapshots:
 
   pirates@4.0.6: {}
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.3
+
+  pkg-types@2.1.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+
+  playwright-core@1.54.2: {}
+
+  playwright@1.54.2:
+    dependencies:
+      playwright-core: 1.54.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-import@15.1.0(postcss@8.4.49):
@@ -10417,6 +10976,13 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.9
 
+  postcss-import@16.1.1(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.9
+
   postcss-js@4.0.1(postcss@8.4.49):
     dependencies:
       camelcase-css: 2.0.1
@@ -10488,10 +11054,15 @@ snapshots:
   prr@1.0.1:
     optional: true
 
-  pseudomap@1.0.2: {}
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
 
   punycode@2.3.1: {}
 
+  quansync@0.2.10: {}
+
   queue-microtask@1.2.3: {}
 
   ranges-apply@7.0.20:
@@ -10614,13 +11185,29 @@ snapshots:
       unist-util-visit-parents: 6.0.1
       vfile: 6.0.1
 
+  rehype-mermaid@3.0.0(playwright@1.54.2):
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html-isomorphic: 2.0.0
+      hast-util-to-text: 4.0.0
+      mermaid-isomorphic: 3.0.4(patch_hash=tt5abewtk4kmqtpqfe2f44hnpa)(playwright@1.54.2)
+      mini-svg-data-uri: 1.4.4
+      space-separated-tokens: 2.0.2
+      unified: 11.0.5
+      unist-util-visit-parents: 6.0.1
+      vfile: 6.0.1
+    optionalDependencies:
+      playwright: 1.54.2
+    transitivePeerDependencies:
+      - supports-color
+
   rehype-parse@9.0.0:
     dependencies:
       '@types/hast': 3.0.4
       hast-util-from-html: 2.0.1
       unified: 11.0.5
 
-  rehype-pretty-code@0.13.2(shiki@1.2.1):
+  rehype-pretty-code@0.14.0(shiki@1.2.1):
     dependencies:
       '@types/hast': 3.0.4
       hast-util-to-string: 3.0.1
@@ -10708,7 +11295,7 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.3
-      mdast-util-to-hast: 13.1.0
+      mdast-util-to-hast: 13.2.0
       unified: 11.0.5
       vfile: 6.0.1
 
@@ -10780,6 +11367,13 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   rss@1.2.2:
     dependencies:
       mime-types: 2.1.13
@@ -10905,16 +11499,10 @@ snapshots:
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
 
-  shebang-command@1.2.0:
-    dependencies:
-      shebang-regex: 1.0.0
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
-  shebang-regex@1.0.0: {}
-
   shebang-regex@3.0.0: {}
 
   shiki@1.2.1:
@@ -10949,14 +11537,18 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
-  signal-exit@3.0.7: {}
-
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   slash@3.0.0: {}
 
   slash@5.1.0: {}
@@ -10990,6 +11582,13 @@ snapshots:
 
   streamsearch@1.1.0: {}
 
+  streamx@2.22.1:
+    dependencies:
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.3
+    optionalDependencies:
+      bare-events: 2.6.1
+
   string-collapse-leading-whitespace@7.0.9: {}
 
   string-env-interpolation@1.0.1: {}
@@ -11094,7 +11693,7 @@ snapshots:
 
   strip-bom-string@1.0.0: {}
 
-  strip-eof@1.0.0: {}
+  strip-final-newline@3.0.0: {}
 
   strip-json-comments@3.1.1: {}
 
@@ -11115,7 +11714,7 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.26.0
 
-  stylis@4.3.1: {}
+  stylis@4.3.6: {}
 
   sucrase@3.35.0:
     dependencies:
@@ -11127,10 +11726,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  supports-color@4.5.0:
-    dependencies:
-      has-flag: 2.0.0
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -11160,6 +11755,8 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.8.1
 
+  system-architecture@0.1.0: {}
+
   tabbable@6.2.0: {}
 
   tailwindcss@3.4.17:
@@ -11189,6 +11786,26 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tar-fs@3.1.0:
+    dependencies:
+      pump: 3.0.3
+      tar-stream: 3.1.7
+    optionalDependencies:
+      bare-fs: 4.2.0
+      bare-path: 3.0.0
+    transitivePeerDependencies:
+      - bare-buffer
+
+  tar-stream@3.1.7:
+    dependencies:
+      b4a: 1.6.7
+      fast-fifo: 1.3.2
+      streamx: 2.22.1
+
+  text-decoder@1.2.3:
+    dependencies:
+      b4a: 1.6.7
+
   text-table@0.2.0: {}
 
   thenify-all@1.6.0:
@@ -11203,14 +11820,13 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
-  title@3.5.3:
-    dependencies:
-      arg: 1.0.0
-      chalk: 2.3.0
-      clipboardy: 1.2.2
-      titleize: 1.0.0
+  tinyexec@1.0.1: {}
 
-  titleize@1.0.0: {}
+  title@4.0.1:
+    dependencies:
+      arg: 5.0.2
+      chalk: 5.4.1
+      clipboardy: 4.0.0
 
   to-object-path@0.3.0:
     dependencies:
@@ -11220,6 +11836,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  totalist@3.0.1: {}
+
   tr46@0.0.3: {}
 
   trim-leading-lines@0.1.1:
@@ -11304,6 +11922,8 @@ snapshots:
 
   typescript@5.8.3: {}
 
+  ufo@1.6.1: {}
+
   unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -11505,7 +12125,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  uuid@9.0.1: {}
+  uuid@11.1.0: {}
 
   uvu@0.5.6:
     dependencies:
@@ -11565,8 +12185,23 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
   vscode-languageserver-types@3.17.5: {}
 
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-uri@3.0.8: {}
+
   w3c-keyname@2.2.8: {}
 
   walk-up-path@3.0.1: {}
@@ -11577,10 +12212,27 @@ snapshots:
 
   web-namespaces@2.0.1: {}
 
-  web-worker@1.3.0: {}
-
   webidl-conversions@3.0.1: {}
 
+  webpack-bundle-analyzer@4.10.1:
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      html-escaper: 2.0.2
+      is-plain-object: 5.0.0
+      opener: 1.5.2
+      picocolors: 1.1.1
+      sirv: 2.0.4
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -11627,10 +12279,6 @@ snapshots:
       gopd: 1.2.0
       has-tostringtag: 1.0.2
 
-  which@1.3.1:
-    dependencies:
-      isexe: 2.0.0
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -11651,20 +12299,18 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@7.5.10: {}
+
   ws@8.18.0: {}
 
   xml@1.0.1: {}
 
   xmldom-sre@0.1.31: {}
 
-  yallist@2.1.2: {}
-
   yallist@3.1.1: {}
 
   yallist@4.0.0: {}
 
-  yaml@2.4.1: {}
-
   yaml@2.6.1: {}
 
   yocto-queue@0.1.0: {}
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 1dbd9b69d3..67f8bb3254 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -5,5 +5,6 @@ module.exports = {
     "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-import": {},
   },
 }
diff --git a/public/images/next-image-export-optimizer-hashes.json b/public/images/next-image-export-optimizer-hashes.json
index d4d8015a93..0a24a53bb1 100644
--- a/public/images/next-image-export-optimizer-hashes.json
+++ b/public/images/next-image-export-optimizer-hashes.json
@@ -1,8 +1,17 @@
 {
+    "/1.982233db.webp": "DAZPItJcsNWkv9k6YWJRHGDMi+PHF5ASyKfFTfrFrls=",
+    "/1.9f150adb.webp": "mAmxZUks6dKIsZemF9Mf2li9s3QSJWXb+IXGZiKjGsM=",
     "/1.b9d923f4.jpg": "keiubC5QVfPeVlBLL-obe2+O-Br5pxC1J41FhkUkVLU=",
+    "/10.58399898.webp": "wGhlbDHJv6GR6bOf7l12Ly1XRyWYKpWpDPLNxiSIEHE=",
     "/10_53228256862_o.bede884c.jpg": "IY4m-OjhIMpy-8gPjIMeYEZJCyuEgayd1gKBaWX97BM=",
+    "/11.25c07c94.webp": "emuRlCiEIkq6x1TEcj0o-xqRx2uppHiHrtPdZw2T87c=",
+    "/11.b8f87c28.webp": "CfMMpl-2L-PdvfKb9PktNcq3FY+iywQ2r-tBPNwTL2c=",
     "/11_53229130936_o.11efec5f.jpg": "diSe5JVfbzlK9K0w5GaVx67dAjah9rKBP28CM7RvPdI=",
+    "/12.1f5de7e8.webp": "0nn5tPRcCBdpHCBNHR8SRNitdBhqPbjMUl77RgWXwmM=",
+    "/12.80edfe31.webp": "Utp6vJk98yeE3eTUslQ3I36uu0FKLwWlAbJlLNobK6Y=",
     "/12_53229130901_o.0594c3d9.jpg": "tBAU5LhNzFBWjvCS+R381Oxv1aLJ4p2lI5Yuyk60Oag=",
+    "/13.2ed60bb6.webp": "FRuEsjvn5yxf0Xgk0rfri6yHOKeXc8EQsxA-VwrsEao=",
+    "/13.372592cd.webp": "KIF2PXmz3C1D7MlMkF2m95lrqkjmkqJh0+rzwGknz-4=",
     "/13_53229431753_o.312ed4c6.jpg": "UWubZOcIMlv52LYSBZc68bN6cJ21V-bIoONu93fbMxc=",
     "/14_53228256817_o.e967eba8.jpg": "I5ISHXYPMPhVvXcapBBJSjiBT-kpugnxPaVb-FLA+Ko=",
     "/151_53229506084_o.2e2d8d93.jpg": "HxYTSOHfoDBVCIY2FaaxUcOV6+geraqYKjTq19z0Cgk=",
@@ -11,27 +20,49 @@
     "/17_53229431688_o.4c21d256.jpg": "yrv5EILkRoNtrU9XsUL0cFZ9Uw1xLhMh9MB4KSOpRIA=",
     "/18_53229629645_o.379c2659.jpg": "ttOW81TbKCtikFu1WUJLgoS2TGUeFXjt6n8DVHxrwHc=",
     "/1_53229506279_o.f0bca9c1.jpg": "yHvLYpCAhVTmTg39yDNokfYqQ8S1ZZi86xI26NYQbbU=",
+    "/2.45dac2f6.webp": "5giIntTvHEtW4YKcvzWyr93T19WbBYiYHZ7-97m8CQ4=",
+    "/2.4607ed4f.webp": "f2NDIzjfiAUIHTlg3Y+gcWiRNdM8JbN6BA2RXycEBNQ=",
     "/2.99d027a1.jpg": "uPiLK06UD56JNe68gW0QEyLoLf446VRNy7Ia0FuQ7HI=",
     "/2_53229431883_o.cddf7051.jpg": "Wr8okGNc7WieV3dpspNi5MMv3BXqySV1fDAIJY842gI=",
     "/3.2ed01ad0.jpg": "Ftp2218Nf9X1YQA342243Q-iklHDBJ8IdA59-iIDmD4=",
+    "/3.40539a03.webp": "gAgt3cACfsDGa+uQImhFMzBo-dX7pGtULWRK8po6sgc=",
+    "/3.8b9a97e4.webp": "mwfpC-0F9HGau5iTkDdxPX4MgEXGSIrrme1AuIjNfZE=",
     "/31_53228256917_o.f420933f.jpg": "v33-soBSAXKQGEsKU+XbNNaQqoPwl7kybxfZTsB7sco=",
     "/3_53229131021_o.dfd0081f.jpg": "goLNvvOrHmTqYk4K9ZeEGX6KZeXBN6zpSIS3C-GwR+0=",
+    "/4.9cea345b.webp": "OIJvuaLA+UuPet-VkSw16vOg6E+w6dmqbbKxRnNQLxw=",
+    "/4.a081ca23.webp": "cdq3dvJh8XnUlcCYS+wilStqck1-6IQ-cvvGBrIlLfc=",
     "/4.f41621f8.jpg": "liG36J+08jIQzmQIrMcMsQ5BzjKhxLX5HGclFdDoOIs=",
     "/5.5e7fbfc8.jpg": "wjKxQX2w8yb2zbNvWf+-4kkqC3FXw7M6CuUvgGuu0pw=",
+    "/5.95dd3cfa.webp": "hukBtqFbxuyoVSnFI99BeYqh1esjUfP9gYHMuxHZw7A=",
     "/5_53228256882_o.2173b47b.jpg": "vodeR1lNx7CWO6e3j7MsD0MuvPBv8D1Mey+iRA36crU=",
     "/6.7cec175d.jpg": "+AGRr5xsz14uZrdLFOZ3nTT7vvhBdg-PgC4Kty1toSs=",
+    "/6.a9e9ef54.webp": "LoTArxYxGSkkO57CnkKMsZ3+jcxF5DQ74M9TEtoQFLI=",
+    "/6.f303b2b0.webp": "x+9YVxnjfiZ8eWKUeQvbty82O6IGi-TZSYcjgYP9AmY=",
+    "/7.5c473a95.webp": "ymbpxb2EUD9eCfSa8Yc+0XQr7AIzn8jUAZCX+JDvS6E=",
+    "/7.8a7605d4.webp": "dnxvSxaDK0KpDdHIDD02+Sv59R64V3QN9uklMNN-T6Y=",
     "/7_53229506199_o.9bbeb0b1.jpg": "JunA4ywMiDM4xmQpFUo6YW8Q03gYrB-6NNj6zfmgk4A=",
+    "/8.36a60072.webp": "WkLbG000irZwPexBmq4XfB770l0Bx4VNBbbofOIDFsI=",
+    "/8.9d69d599.webp": "H+BpdMeJnUaUowq8vJvVdDxg9KrJfh+2-rI1ZFeW-cw=",
     "/8.eafdc50d.jpg": "Xpw7kJ8jCbKlDu-wLxBevA52CZfp9mlbfQ43ldHeZmw=",
     "/8_53229629805_o.290e35be.jpg": "NfsXTg4KKkt1csv79IiZ3FyU3-CW1WTkp4883NgZam4=",
     "/9.4a558c85.jpg": "-iUSFWjVs4vunEea7FxDeNMOOvUs4VOEpScXJAwi0DA=",
+    "/9.844b3dd8.webp": "sw21n8SoYJfqMMmrPDoHuk7rPkgbAcSelf99kZeujmo=",
+    "/9.aee863a4.webp": "qu+xa-dpm5C8AByc3HChjPET+FKw9VyvztrNKY1QbRY=",
+    "/Comparison_Method.b12d6d2c.gif": "O9Anxn1Z52YzvH8Ygfb2F485U1maEOTt5LKAk45963I=",
     "/annual-report-1.5ebe2b34.png": "HmbFFbaUL79rvnCKQ-2oRSLETM2FFh5v5dZxwWquuVM=",
     "/audience.f60c1c99.jpg": "pqx3E31xAO87mNEBlZKqCTX+LRiPlOuQThWQZf08A4A=",
     "/banner.10d4d66b.jpg": "9UJqBQ9RQu2sxDdJ5uaQr3crx2ZXrlOKMAmY82R8ZBA=",
+    "/blur-bean-cropped.62af4aa2.webp": "rdPhhzi5e+RLv-u0B-uPkp-eCYnyGlO84Yn0zCLLG4c=",
+    "/blur-bean.21b930bd.webp": "eTUigN2JSyvccNXMnRwneZJ1YIeNnrVs3klseGSUa7o=",
+    "/blur-bean.314cdc4a.webp": "YAysN2NZeYYWHNI8cFCabzsTifCknmbp-r+P1LAs1bE=",
+    "/blur-bean.d5aa6d13.webp": "30xrtHSB6py7q6r2HxdKzm4gt8WoCiWRownamqyf3wM=",
+    "/blur-bean.e3e29fde.webp": "P51vlY-ohTlEurj7zyND+Xs2UCfBaUZuNZhj9OEvmq4=",
+    "/blur-blob.806d2505.webp": "BInXgg69BRLrWxxX-vMwO09WhUgC8umt6F17w9-4lP0=",
+    "/blur.701b3d8a.webp": "WzjpcF01ReIsRBgeKAs0KyCfB8h6tZk2lzY89i9xlKk=",
     "/business_layer.68bf746f.png": "DwCtOs-q1Y-DgBxEj6NqyVaOAiq5zCB8xPF-rZ5Qe1U=",
-    "/coursera.968d6897.png": "FmQxkHPToU9hZQFvKVSRa6+-5xppLy6lJJhqCEIiCzk=",
     "/dataloader-query.9c90539e.png": "2xPPUoCjbgMKsH3EPLBAImfsNb-MYPb-Qf6gXg8QCn4=",
-    "/facebook.0e9e1517.png": "GF7faknjzTM3GcnR7UBMPO52mQxAsVKt9y-XhCkbomI=",
-    "/github.0821dbe0.png": "lt2XclE2g9CgsYuX4rz1sLs0oP94o+Etx0HbeiJje6Y=",
+    "/fernando.8a674f38.webp": "VLcChFQr-iiIKTZ2OftoAAWS8cjUYAaBV0C-U9vcKS4=",
+    "/frances.033cc832.webp": "WDYuYaN-sUoPKcZWY6udTedmfrgDg80CQW2Jr4LF8ng=",
     "/graphql-cover-1_53228256677_o.f1214f00.jpg": "OVKx+JK+SA2wdzmUs3VN+eHR7Fk2CXhTLYdNIyNbehg=",
     "/graphql-cover-2_53228256672_o.80b12e74.jpg": "eRqA89yK+I9hdGfjSlv7sIpExOhByCXKn7xY86Lt2yA=",
     "/graphql-cover-3_53228256612_o.a5360272.jpg": "MDj38ijAhAyJTMvi0vNE7JVj+uXRXNLUhdSXtZvEMT4=",
@@ -134,22 +165,26 @@
     "/graphqlconf-202395_53229430163_o.83d6ce30.jpg": "wGPGuLNhdPy1AKSdem7dB2U3hCnLNt0m7A697OKpMLA=",
     "/graphqlconf-202396_53229628185_o.e02e8158.jpg": "CwcPIFPl3qMN77xrq3PNo3IDu2xdE5t-XAmqMN7vvrA=",
     "/graphqlconf-2023graphqlconf-2023_53228255062_o.29b776c3.jpg": "iXr9Z8xwKZhM1pUZPRRTFEHbvwYlw81k6ZIqW5zh3x4=",
+    "/hero-photo.19f66b71.jpeg": "+1M5NcPmN+FvAM3dalHY2LN1vv+LNURKJEVZUw-yEZo=",
     "/hero1.2c973c2e.jpg": "jY1RePeWthuOOa5c59Yl4TQD4J731poNxeaqzKDFmfg=",
     "/hero2.fa425ea9.jpg": "siZR-Q3HPEB5l2gU0DAbheWVVUOCsrOuOv-Ch0xCR7M=",
     "/idit.feda6f62.jpg": "9oybNQ8aiuV++33v8KDL8ZgIL0H2T5UF3EjnhsksM5g=",
-    "/intuit.04140a09.png": "m84fUDz2YQxlNNMmbthcNfYr3bWhp23zEPxvP5ruo9Q=",
     "/layers-2x.9859cd12.png": "3D8k4Go-oWvQTcmIDFOwHTfm1eagZIqjwar3vFcoZY8=",
     "/layers.ef6db872.png": "fbR0XaZWR0olI2fUKeOWruBZ6HxRDSEYGXCzktrW4XA=",
     "/lee.dfa51298.png": "rG86vKMradTmaq1FH-F2-zwDzRkcw-qXK18Slp34VPs=",
     "/leebyron.4adb0a93.jpg": "poBi-hIdozz-Mn2PIKun7ZpX9q200f7m-5SkUt1XU-0=",
+    "/location-photo.8c4a71ef.webp": "D2r5lWoyQSdcclBUQB0bcxPdRdbfaiizSWJocmD7uZ4=",
+    "/logo-blurred.94c9eff4.webp": "+MCg5-u6UTMKypwln1HeLvrNm-13OHneZ8fkK8A1fjs=",
+    "/logo-mask.1694fb96.webp": "w1mI242Cka6-grRJCeOT5lWF2uf5hol5IRLjTwlqFZA=",
     "/marcandre.b8692933.jpg": "mUbreFySTVojHKZTl0VKcMQ9gHdSVCL47mSBnUYITBI=",
     "/marker-icon.d577052a.png": "L15ETF3vWj9pjeLgXar+ibZOYNJYXoQal5lJmpTWTbA=",
+    "/mask.d8b3d3a1.webp": "ooHSo7veWXOjMT0Db6aLQN+zHXY7gzxQlsdLnBLk2es=",
     "/pathological-query.2de43465.png": "Xoi58Mnu6FqfvNp4+gXgt-IyMDdMpdbqPUyNzlH5YJQ=",
-    "/pinterest.36b58187.png": "TlwGD0W-rRqoDgDND5x+cQrzz09xU+dmW6oP8+qSBug=",
     "/playground-transition-banner.2458871d.png": "ffm4o7utOWkmwaWC2KVVHPOz9zsaD6fG2P269pHT8uQ=",
     "/rest-api-people.c2b56e20.png": "KDbPJA1rAhVT43LeGLckdesx+bISV+6g0q9fJQNl5Tg=",
-    "/shopify.2cb330ea.png": "LRiC9+uEG-gHl-XYi4qrSXMAlpFglZLNZj1kBGF-Cag=",
+    "/speaker.5a4b04b3.webp": "rm++82SXr9oqVCuxwkK345jZeh0SmcJUoNDEMSOk2Bk=",
     "/speaker.674c5b86.jpg": "ISlnB9At3nuMk70rfRuMAu+k9aEhUNSwp7XgFMx5Bls=",
+    "/trudie.02ae47d4.webp": "usfvAbw1lOVGAmQ3-F5HNJJ33x7npr7aC1KKO4WgyeY=",
     "/unconf.651492c3.jpg": "mlpvU8glWqqsRn2n3-pgwRI+Jnk3sT7VQjsCL01e30c=",
     "/uri.387cb001.jpg": "kSx4huEjQidwIg6bF8UEWLiPACDl0nQ0aqxA2R2LIe0=",
     "/whiteboard.60eac8e3.jpg": "NodBqUaO+IanhuPaP9o5jCIe+gSrwyZ9TZ3QUdlWbBg=",
diff --git a/public/img/graph-wash.png b/public/img/graph-wash.png
deleted file mode 100644
index 678844a070..0000000000
Binary files a/public/img/graph-wash.png and /dev/null differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-10.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-10.WEBP
new file mode 100644
index 0000000000..6fb563c8fb
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-128.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-128.WEBP
new file mode 100644
index 0000000000..0409bcff2e
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-16.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-16.WEBP
new file mode 100644
index 0000000000..759517a1d4
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-256.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-256.WEBP
new file mode 100644
index 0000000000..5a56c867ef
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-32.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-32.WEBP
new file mode 100644
index 0000000000..6084a18b85
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-384.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-384.WEBP
new file mode 100644
index 0000000000..7a6ef8af38
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-48.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-48.WEBP
new file mode 100644
index 0000000000..84e236eec2
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-64.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-64.WEBP
new file mode 100644
index 0000000000..13551d15e6
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-640.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-640.WEBP
new file mode 100644
index 0000000000..94eb79d05c
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-750.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-750.WEBP
new file mode 100644
index 0000000000..1a413055c7
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-828.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-828.WEBP
new file mode 100644
index 0000000000..27fb4a8668
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.982233db-opt-96.WEBP b/public/nextImageExportOptimizer/1.982233db-opt-96.WEBP
new file mode 100644
index 0000000000..39dbdcacf2
Binary files /dev/null and b/public/nextImageExportOptimizer/1.982233db-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-10.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-10.WEBP
new file mode 100644
index 0000000000..cdb43a963b
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-128.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-128.WEBP
new file mode 100644
index 0000000000..1d9ae5ce51
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-16.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-16.WEBP
new file mode 100644
index 0000000000..651643119a
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-256.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-256.WEBP
new file mode 100644
index 0000000000..98440cf348
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-32.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-32.WEBP
new file mode 100644
index 0000000000..7362706339
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-384.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-384.WEBP
new file mode 100644
index 0000000000..d31920582d
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-48.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-48.WEBP
new file mode 100644
index 0000000000..831d15354e
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-64.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-64.WEBP
new file mode 100644
index 0000000000..43b4604f20
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-640.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-640.WEBP
new file mode 100644
index 0000000000..49521ac1ad
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-750.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-750.WEBP
new file mode 100644
index 0000000000..2c94351709
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-828.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-828.WEBP
new file mode 100644
index 0000000000..e375455e65
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/1.9f150adb-opt-96.WEBP b/public/nextImageExportOptimizer/1.9f150adb-opt-96.WEBP
new file mode 100644
index 0000000000..f7896bf670
Binary files /dev/null and b/public/nextImageExportOptimizer/1.9f150adb-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-10.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-10.WEBP
new file mode 100644
index 0000000000..06c2e8e322
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-128.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-128.WEBP
new file mode 100644
index 0000000000..eb1335a5ac
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-16.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-16.WEBP
new file mode 100644
index 0000000000..f9b6ffae8d
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-256.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-256.WEBP
new file mode 100644
index 0000000000..14c8af33fb
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-32.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-32.WEBP
new file mode 100644
index 0000000000..fcf178b013
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-384.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-384.WEBP
new file mode 100644
index 0000000000..0cb8793c12
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-48.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-48.WEBP
new file mode 100644
index 0000000000..b4c0a2079e
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-64.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-64.WEBP
new file mode 100644
index 0000000000..ea961cab05
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-640.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-640.WEBP
new file mode 100644
index 0000000000..9c3e4b4bee
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-750.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-750.WEBP
new file mode 100644
index 0000000000..b1a206b828
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-828.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-828.WEBP
new file mode 100644
index 0000000000..8cbb91f760
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/10.58399898-opt-96.WEBP b/public/nextImageExportOptimizer/10.58399898-opt-96.WEBP
new file mode 100644
index 0000000000..c8b0719b21
Binary files /dev/null and b/public/nextImageExportOptimizer/10.58399898-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-10.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-10.WEBP
new file mode 100644
index 0000000000..1b00e97c1b
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-128.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-128.WEBP
new file mode 100644
index 0000000000..8f5b6e07b7
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-16.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-16.WEBP
new file mode 100644
index 0000000000..6a3a54e519
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-256.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-256.WEBP
new file mode 100644
index 0000000000..1bba11f190
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-32.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-32.WEBP
new file mode 100644
index 0000000000..21a08a8c11
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-384.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-384.WEBP
new file mode 100644
index 0000000000..8cbf6b3f9e
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-48.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-48.WEBP
new file mode 100644
index 0000000000..de6ac2618b
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-64.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-64.WEBP
new file mode 100644
index 0000000000..20e9ee2470
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-640.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-640.WEBP
new file mode 100644
index 0000000000..7af22ee83a
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-750.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-750.WEBP
new file mode 100644
index 0000000000..4f683222dc
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-828.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-828.WEBP
new file mode 100644
index 0000000000..4d4697d5f9
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.25c07c94-opt-96.WEBP b/public/nextImageExportOptimizer/11.25c07c94-opt-96.WEBP
new file mode 100644
index 0000000000..f4acfe6e68
Binary files /dev/null and b/public/nextImageExportOptimizer/11.25c07c94-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-10.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-10.WEBP
new file mode 100644
index 0000000000..16228ebc68
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-128.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-128.WEBP
new file mode 100644
index 0000000000..9b9cc539ba
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-16.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-16.WEBP
new file mode 100644
index 0000000000..a0564c6152
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-256.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-256.WEBP
new file mode 100644
index 0000000000..44abd1486f
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-32.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-32.WEBP
new file mode 100644
index 0000000000..e55496a2a2
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-384.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-384.WEBP
new file mode 100644
index 0000000000..3c4a21042a
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-48.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-48.WEBP
new file mode 100644
index 0000000000..3af9b32857
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-64.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-64.WEBP
new file mode 100644
index 0000000000..9868f56611
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-640.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-640.WEBP
new file mode 100644
index 0000000000..15cc05b3e0
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-750.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-750.WEBP
new file mode 100644
index 0000000000..dce96afbb8
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-828.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-828.WEBP
new file mode 100644
index 0000000000..652dad6601
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/11.b8f87c28-opt-96.WEBP b/public/nextImageExportOptimizer/11.b8f87c28-opt-96.WEBP
new file mode 100644
index 0000000000..06da51ab44
Binary files /dev/null and b/public/nextImageExportOptimizer/11.b8f87c28-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-10.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-10.WEBP
new file mode 100644
index 0000000000..d8674c44ad
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-128.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-128.WEBP
new file mode 100644
index 0000000000..5181dc1b76
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-16.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-16.WEBP
new file mode 100644
index 0000000000..ee8be32c9c
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-256.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-256.WEBP
new file mode 100644
index 0000000000..0c953aff83
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-32.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-32.WEBP
new file mode 100644
index 0000000000..dfc4a32f67
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-384.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-384.WEBP
new file mode 100644
index 0000000000..27fad66ee5
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-48.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-48.WEBP
new file mode 100644
index 0000000000..b1122edab6
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-64.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-64.WEBP
new file mode 100644
index 0000000000..1143b6ed58
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-640.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-640.WEBP
new file mode 100644
index 0000000000..cef7eff707
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-750.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-750.WEBP
new file mode 100644
index 0000000000..76baab7ae0
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-828.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-828.WEBP
new file mode 100644
index 0000000000..d6fb7f9ce9
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.1f5de7e8-opt-96.WEBP b/public/nextImageExportOptimizer/12.1f5de7e8-opt-96.WEBP
new file mode 100644
index 0000000000..902102c388
Binary files /dev/null and b/public/nextImageExportOptimizer/12.1f5de7e8-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-10.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-10.WEBP
new file mode 100644
index 0000000000..cf987ec4d8
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-128.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-128.WEBP
new file mode 100644
index 0000000000..1759d909dc
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-16.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-16.WEBP
new file mode 100644
index 0000000000..ff74a670c5
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-256.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-256.WEBP
new file mode 100644
index 0000000000..ab60c1f849
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-32.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-32.WEBP
new file mode 100644
index 0000000000..b4002b1fbf
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-384.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-384.WEBP
new file mode 100644
index 0000000000..d922c221fb
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-48.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-48.WEBP
new file mode 100644
index 0000000000..0ed80c140d
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-64.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-64.WEBP
new file mode 100644
index 0000000000..6e5bd7028c
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-640.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-640.WEBP
new file mode 100644
index 0000000000..269c668e06
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-750.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-750.WEBP
new file mode 100644
index 0000000000..48c466bc27
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-828.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-828.WEBP
new file mode 100644
index 0000000000..072141477f
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/12.80edfe31-opt-96.WEBP b/public/nextImageExportOptimizer/12.80edfe31-opt-96.WEBP
new file mode 100644
index 0000000000..17fe31b0fc
Binary files /dev/null and b/public/nextImageExportOptimizer/12.80edfe31-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-10.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-10.WEBP
new file mode 100644
index 0000000000..358a58a8e7
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-128.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-128.WEBP
new file mode 100644
index 0000000000..08306f247e
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-16.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-16.WEBP
new file mode 100644
index 0000000000..647a4d2db7
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-256.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-256.WEBP
new file mode 100644
index 0000000000..1f38dcf211
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-32.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-32.WEBP
new file mode 100644
index 0000000000..9b915cee66
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-384.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-384.WEBP
new file mode 100644
index 0000000000..3bd3d44993
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-48.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-48.WEBP
new file mode 100644
index 0000000000..9d034d6abe
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-64.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-64.WEBP
new file mode 100644
index 0000000000..113bfdc212
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-640.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-640.WEBP
new file mode 100644
index 0000000000..a0c819cd01
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-750.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-750.WEBP
new file mode 100644
index 0000000000..faf0364b73
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-828.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-828.WEBP
new file mode 100644
index 0000000000..8c1891a469
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.2ed60bb6-opt-96.WEBP b/public/nextImageExportOptimizer/13.2ed60bb6-opt-96.WEBP
new file mode 100644
index 0000000000..0559965102
Binary files /dev/null and b/public/nextImageExportOptimizer/13.2ed60bb6-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-10.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-10.WEBP
new file mode 100644
index 0000000000..ddefca3047
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-128.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-128.WEBP
new file mode 100644
index 0000000000..148cf785d8
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-16.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-16.WEBP
new file mode 100644
index 0000000000..29165605a5
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-256.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-256.WEBP
new file mode 100644
index 0000000000..4f1c4d59b4
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-32.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-32.WEBP
new file mode 100644
index 0000000000..bcafbee233
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-384.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-384.WEBP
new file mode 100644
index 0000000000..7a5f6f33c6
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-48.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-48.WEBP
new file mode 100644
index 0000000000..bae20cd092
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-64.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-64.WEBP
new file mode 100644
index 0000000000..143e5bac42
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-640.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-640.WEBP
new file mode 100644
index 0000000000..5e67577bd7
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-750.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-750.WEBP
new file mode 100644
index 0000000000..4be8828dbd
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-828.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-828.WEBP
new file mode 100644
index 0000000000..9573950219
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/13.372592cd-opt-96.WEBP b/public/nextImageExportOptimizer/13.372592cd-opt-96.WEBP
new file mode 100644
index 0000000000..e53dbde6e2
Binary files /dev/null and b/public/nextImageExportOptimizer/13.372592cd-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-10.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-10.WEBP
new file mode 100644
index 0000000000..28889b6a68
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-128.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-128.WEBP
new file mode 100644
index 0000000000..612d389a2b
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-16.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-16.WEBP
new file mode 100644
index 0000000000..851ddce261
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-256.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-256.WEBP
new file mode 100644
index 0000000000..29aabed736
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-32.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-32.WEBP
new file mode 100644
index 0000000000..839542d255
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-384.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-384.WEBP
new file mode 100644
index 0000000000..f54a61e04b
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-48.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-48.WEBP
new file mode 100644
index 0000000000..8640ec1649
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-64.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-64.WEBP
new file mode 100644
index 0000000000..3f3e94447d
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-640.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-640.WEBP
new file mode 100644
index 0000000000..2cbf5d23c8
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-750.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-750.WEBP
new file mode 100644
index 0000000000..05fdc030bb
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-828.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-828.WEBP
new file mode 100644
index 0000000000..a9a8d153ae
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.45dac2f6-opt-96.WEBP b/public/nextImageExportOptimizer/2.45dac2f6-opt-96.WEBP
new file mode 100644
index 0000000000..82a9ee4734
Binary files /dev/null and b/public/nextImageExportOptimizer/2.45dac2f6-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-10.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-10.WEBP
new file mode 100644
index 0000000000..293d840ca5
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-128.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-128.WEBP
new file mode 100644
index 0000000000..940986dd55
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-16.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-16.WEBP
new file mode 100644
index 0000000000..8bb8504f46
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-256.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-256.WEBP
new file mode 100644
index 0000000000..b751e65520
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-32.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-32.WEBP
new file mode 100644
index 0000000000..ee913c7c03
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-384.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-384.WEBP
new file mode 100644
index 0000000000..6845d9aff5
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-48.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-48.WEBP
new file mode 100644
index 0000000000..69d2443116
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-64.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-64.WEBP
new file mode 100644
index 0000000000..3416e6584c
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-640.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-640.WEBP
new file mode 100644
index 0000000000..a7fe745f9c
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-750.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-750.WEBP
new file mode 100644
index 0000000000..7259723267
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-828.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-828.WEBP
new file mode 100644
index 0000000000..640c4ad71b
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/2.4607ed4f-opt-96.WEBP b/public/nextImageExportOptimizer/2.4607ed4f-opt-96.WEBP
new file mode 100644
index 0000000000..27a82d978d
Binary files /dev/null and b/public/nextImageExportOptimizer/2.4607ed4f-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-10.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-10.WEBP
new file mode 100644
index 0000000000..0af2f709ce
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-128.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-128.WEBP
new file mode 100644
index 0000000000..3f7103ef5a
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-16.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-16.WEBP
new file mode 100644
index 0000000000..c4c9f98e7f
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-256.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-256.WEBP
new file mode 100644
index 0000000000..b4bbabe6d7
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-32.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-32.WEBP
new file mode 100644
index 0000000000..10c0f14714
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-384.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-384.WEBP
new file mode 100644
index 0000000000..5a2038d659
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-48.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-48.WEBP
new file mode 100644
index 0000000000..8c8f4c5b5c
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-64.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-64.WEBP
new file mode 100644
index 0000000000..9e6091b0d9
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-640.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-640.WEBP
new file mode 100644
index 0000000000..f8bbed32d1
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-750.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-750.WEBP
new file mode 100644
index 0000000000..79dbbc47a7
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-828.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-828.WEBP
new file mode 100644
index 0000000000..7cf1830c99
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.40539a03-opt-96.WEBP b/public/nextImageExportOptimizer/3.40539a03-opt-96.WEBP
new file mode 100644
index 0000000000..2fe17fff86
Binary files /dev/null and b/public/nextImageExportOptimizer/3.40539a03-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-10.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-10.WEBP
new file mode 100644
index 0000000000..0740eb931b
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-128.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-128.WEBP
new file mode 100644
index 0000000000..6663717dc7
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-16.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-16.WEBP
new file mode 100644
index 0000000000..ee6b1a237d
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-256.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-256.WEBP
new file mode 100644
index 0000000000..cc134759ac
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-32.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-32.WEBP
new file mode 100644
index 0000000000..56b1a7e5ef
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-384.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-384.WEBP
new file mode 100644
index 0000000000..5155e56e2c
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-48.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-48.WEBP
new file mode 100644
index 0000000000..dadaac211c
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-64.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-64.WEBP
new file mode 100644
index 0000000000..1ef4297b83
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-640.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-640.WEBP
new file mode 100644
index 0000000000..0dabfdc202
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-750.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-750.WEBP
new file mode 100644
index 0000000000..95352ccf2a
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-828.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-828.WEBP
new file mode 100644
index 0000000000..22c20307c0
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/3.8b9a97e4-opt-96.WEBP b/public/nextImageExportOptimizer/3.8b9a97e4-opt-96.WEBP
new file mode 100644
index 0000000000..09317704ac
Binary files /dev/null and b/public/nextImageExportOptimizer/3.8b9a97e4-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-10.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-10.WEBP
new file mode 100644
index 0000000000..81db197d47
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-128.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-128.WEBP
new file mode 100644
index 0000000000..47a8ba7b88
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-16.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-16.WEBP
new file mode 100644
index 0000000000..dab819018d
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-256.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-256.WEBP
new file mode 100644
index 0000000000..f19dc5cb4d
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-32.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-32.WEBP
new file mode 100644
index 0000000000..db367f81d6
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-384.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-384.WEBP
new file mode 100644
index 0000000000..9281744793
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-48.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-48.WEBP
new file mode 100644
index 0000000000..99333bad16
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-64.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-64.WEBP
new file mode 100644
index 0000000000..d9e029e537
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-640.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-640.WEBP
new file mode 100644
index 0000000000..2210bd85a1
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-750.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-750.WEBP
new file mode 100644
index 0000000000..bca9b637a4
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-828.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-828.WEBP
new file mode 100644
index 0000000000..1aeb108f81
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.9cea345b-opt-96.WEBP b/public/nextImageExportOptimizer/4.9cea345b-opt-96.WEBP
new file mode 100644
index 0000000000..ac8d9325d2
Binary files /dev/null and b/public/nextImageExportOptimizer/4.9cea345b-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-10.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-10.WEBP
new file mode 100644
index 0000000000..4ffeb40f6b
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-128.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-128.WEBP
new file mode 100644
index 0000000000..12fbb92b28
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-16.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-16.WEBP
new file mode 100644
index 0000000000..1e242347a4
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-256.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-256.WEBP
new file mode 100644
index 0000000000..0e4a7b723e
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-32.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-32.WEBP
new file mode 100644
index 0000000000..3b01e7edca
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-384.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-384.WEBP
new file mode 100644
index 0000000000..6cb6406395
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-48.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-48.WEBP
new file mode 100644
index 0000000000..73c18382b0
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-64.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-64.WEBP
new file mode 100644
index 0000000000..9488d10546
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-640.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-640.WEBP
new file mode 100644
index 0000000000..f562281f24
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-750.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-750.WEBP
new file mode 100644
index 0000000000..5363ac2915
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-828.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-828.WEBP
new file mode 100644
index 0000000000..a1e7bf6be5
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/4.a081ca23-opt-96.WEBP b/public/nextImageExportOptimizer/4.a081ca23-opt-96.WEBP
new file mode 100644
index 0000000000..53dbf2bff7
Binary files /dev/null and b/public/nextImageExportOptimizer/4.a081ca23-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-10.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-10.WEBP
new file mode 100644
index 0000000000..a6c9e26c46
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-128.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-128.WEBP
new file mode 100644
index 0000000000..69623dade0
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-16.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-16.WEBP
new file mode 100644
index 0000000000..38223c9b33
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-256.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-256.WEBP
new file mode 100644
index 0000000000..501f91bbd2
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-32.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-32.WEBP
new file mode 100644
index 0000000000..2bfa6d48d7
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-384.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-384.WEBP
new file mode 100644
index 0000000000..effe6cd767
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-48.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-48.WEBP
new file mode 100644
index 0000000000..b5ba3e5134
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-64.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-64.WEBP
new file mode 100644
index 0000000000..ec6499b263
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-640.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-640.WEBP
new file mode 100644
index 0000000000..8818bfa0f9
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-750.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-750.WEBP
new file mode 100644
index 0000000000..686e2bca53
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-828.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-828.WEBP
new file mode 100644
index 0000000000..04e82c2700
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/5.95dd3cfa-opt-96.WEBP b/public/nextImageExportOptimizer/5.95dd3cfa-opt-96.WEBP
new file mode 100644
index 0000000000..dc7992c444
Binary files /dev/null and b/public/nextImageExportOptimizer/5.95dd3cfa-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-10.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-10.WEBP
new file mode 100644
index 0000000000..6df1f30439
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-128.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-128.WEBP
new file mode 100644
index 0000000000..56e9c39b70
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-16.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-16.WEBP
new file mode 100644
index 0000000000..d2c5874340
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-256.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-256.WEBP
new file mode 100644
index 0000000000..137df7a71b
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-32.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-32.WEBP
new file mode 100644
index 0000000000..b13f481bae
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-384.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-384.WEBP
new file mode 100644
index 0000000000..df38fba22b
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-48.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-48.WEBP
new file mode 100644
index 0000000000..29e9fdf98b
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-64.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-64.WEBP
new file mode 100644
index 0000000000..000b6ea75e
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-640.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-640.WEBP
new file mode 100644
index 0000000000..1f8bccd1a0
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-750.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-750.WEBP
new file mode 100644
index 0000000000..33385b5e52
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-828.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-828.WEBP
new file mode 100644
index 0000000000..50abdaeedb
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.a9e9ef54-opt-96.WEBP b/public/nextImageExportOptimizer/6.a9e9ef54-opt-96.WEBP
new file mode 100644
index 0000000000..ec7fd1f62d
Binary files /dev/null and b/public/nextImageExportOptimizer/6.a9e9ef54-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-10.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-10.WEBP
new file mode 100644
index 0000000000..bf46a46801
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-128.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-128.WEBP
new file mode 100644
index 0000000000..1255cf9466
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-16.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-16.WEBP
new file mode 100644
index 0000000000..7e55306156
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-256.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-256.WEBP
new file mode 100644
index 0000000000..f1330105a7
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-32.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-32.WEBP
new file mode 100644
index 0000000000..edafa0fe5c
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-384.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-384.WEBP
new file mode 100644
index 0000000000..c94df3dc7d
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-48.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-48.WEBP
new file mode 100644
index 0000000000..f86fb175f4
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-64.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-64.WEBP
new file mode 100644
index 0000000000..88e5829321
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-640.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-640.WEBP
new file mode 100644
index 0000000000..005b1b8fd5
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-750.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-750.WEBP
new file mode 100644
index 0000000000..1e4e952480
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-828.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-828.WEBP
new file mode 100644
index 0000000000..c0bc2be5f8
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/6.f303b2b0-opt-96.WEBP b/public/nextImageExportOptimizer/6.f303b2b0-opt-96.WEBP
new file mode 100644
index 0000000000..fbd4ffe54a
Binary files /dev/null and b/public/nextImageExportOptimizer/6.f303b2b0-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-10.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-10.WEBP
new file mode 100644
index 0000000000..c4c13e893c
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-128.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-128.WEBP
new file mode 100644
index 0000000000..6b8f4a5ba9
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-16.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-16.WEBP
new file mode 100644
index 0000000000..cdeff269d6
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-256.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-256.WEBP
new file mode 100644
index 0000000000..28416be7e1
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-32.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-32.WEBP
new file mode 100644
index 0000000000..ce5b771850
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-384.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-384.WEBP
new file mode 100644
index 0000000000..58faeae591
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-48.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-48.WEBP
new file mode 100644
index 0000000000..c0bb03fdc4
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-64.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-64.WEBP
new file mode 100644
index 0000000000..291506afd1
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-640.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-640.WEBP
new file mode 100644
index 0000000000..19b335fd9e
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-750.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-750.WEBP
new file mode 100644
index 0000000000..c2b46abc06
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-828.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-828.WEBP
new file mode 100644
index 0000000000..08073f984d
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.5c473a95-opt-96.WEBP b/public/nextImageExportOptimizer/7.5c473a95-opt-96.WEBP
new file mode 100644
index 0000000000..4d7321fe70
Binary files /dev/null and b/public/nextImageExportOptimizer/7.5c473a95-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-10.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-10.WEBP
new file mode 100644
index 0000000000..c20a6d9611
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-128.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-128.WEBP
new file mode 100644
index 0000000000..f796b722df
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-16.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-16.WEBP
new file mode 100644
index 0000000000..4e695b2fec
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-256.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-256.WEBP
new file mode 100644
index 0000000000..ff5ef59871
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-32.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-32.WEBP
new file mode 100644
index 0000000000..7224861c82
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-384.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-384.WEBP
new file mode 100644
index 0000000000..0245246cfb
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-48.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-48.WEBP
new file mode 100644
index 0000000000..3bc2e268f0
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-64.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-64.WEBP
new file mode 100644
index 0000000000..c55607e4b1
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-640.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-640.WEBP
new file mode 100644
index 0000000000..337bd7dec3
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-750.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-750.WEBP
new file mode 100644
index 0000000000..310f99673b
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-828.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-828.WEBP
new file mode 100644
index 0000000000..22558a9c89
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/7.8a7605d4-opt-96.WEBP b/public/nextImageExportOptimizer/7.8a7605d4-opt-96.WEBP
new file mode 100644
index 0000000000..9d362751c8
Binary files /dev/null and b/public/nextImageExportOptimizer/7.8a7605d4-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-10.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-10.WEBP
new file mode 100644
index 0000000000..01856d401b
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-128.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-128.WEBP
new file mode 100644
index 0000000000..ba261934f4
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-16.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-16.WEBP
new file mode 100644
index 0000000000..ab799c4ee2
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-256.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-256.WEBP
new file mode 100644
index 0000000000..cbd231be08
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-32.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-32.WEBP
new file mode 100644
index 0000000000..0a8c1941c9
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-384.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-384.WEBP
new file mode 100644
index 0000000000..feeca46cce
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-48.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-48.WEBP
new file mode 100644
index 0000000000..693725d083
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-64.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-64.WEBP
new file mode 100644
index 0000000000..f597152bf1
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-640.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-640.WEBP
new file mode 100644
index 0000000000..843a641801
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-750.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-750.WEBP
new file mode 100644
index 0000000000..fd5f1b6d9a
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-828.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-828.WEBP
new file mode 100644
index 0000000000..3c1b9f1f3f
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.36a60072-opt-96.WEBP b/public/nextImageExportOptimizer/8.36a60072-opt-96.WEBP
new file mode 100644
index 0000000000..fa29943fda
Binary files /dev/null and b/public/nextImageExportOptimizer/8.36a60072-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-10.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-10.WEBP
new file mode 100644
index 0000000000..55a30b4169
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-128.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-128.WEBP
new file mode 100644
index 0000000000..6bd5b6e68b
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-16.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-16.WEBP
new file mode 100644
index 0000000000..4456a11dd3
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-256.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-256.WEBP
new file mode 100644
index 0000000000..97b68ecc4c
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-32.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-32.WEBP
new file mode 100644
index 0000000000..ae1c67589e
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-384.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-384.WEBP
new file mode 100644
index 0000000000..24e2b94744
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-48.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-48.WEBP
new file mode 100644
index 0000000000..c20de2b82b
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-64.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-64.WEBP
new file mode 100644
index 0000000000..e3bd085b95
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-640.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-640.WEBP
new file mode 100644
index 0000000000..27b1d5dd49
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-750.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-750.WEBP
new file mode 100644
index 0000000000..1a166ad8b2
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-828.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-828.WEBP
new file mode 100644
index 0000000000..38b244418b
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/8.9d69d599-opt-96.WEBP b/public/nextImageExportOptimizer/8.9d69d599-opt-96.WEBP
new file mode 100644
index 0000000000..aab02fe4c1
Binary files /dev/null and b/public/nextImageExportOptimizer/8.9d69d599-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-10.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-10.WEBP
new file mode 100644
index 0000000000..65718814a9
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-128.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-128.WEBP
new file mode 100644
index 0000000000..9eb803de5c
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-16.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-16.WEBP
new file mode 100644
index 0000000000..03e1e65965
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-256.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-256.WEBP
new file mode 100644
index 0000000000..b1c711d744
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-32.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-32.WEBP
new file mode 100644
index 0000000000..c607803d38
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-384.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-384.WEBP
new file mode 100644
index 0000000000..e750219fdb
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-48.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-48.WEBP
new file mode 100644
index 0000000000..419962d417
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-64.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-64.WEBP
new file mode 100644
index 0000000000..ab404b0e60
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-640.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-640.WEBP
new file mode 100644
index 0000000000..50fcfd978a
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-750.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-750.WEBP
new file mode 100644
index 0000000000..45ee604f4b
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-828.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-828.WEBP
new file mode 100644
index 0000000000..79bef1b42c
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.844b3dd8-opt-96.WEBP b/public/nextImageExportOptimizer/9.844b3dd8-opt-96.WEBP
new file mode 100644
index 0000000000..950bcfe6d3
Binary files /dev/null and b/public/nextImageExportOptimizer/9.844b3dd8-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-10.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-10.WEBP
new file mode 100644
index 0000000000..f1460d1eb4
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-128.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-128.WEBP
new file mode 100644
index 0000000000..99de03b6c9
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-16.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-16.WEBP
new file mode 100644
index 0000000000..08ab35e444
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-256.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-256.WEBP
new file mode 100644
index 0000000000..711b1ea59c
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-32.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-32.WEBP
new file mode 100644
index 0000000000..289acaee14
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-384.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-384.WEBP
new file mode 100644
index 0000000000..d002e06c26
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-48.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-48.WEBP
new file mode 100644
index 0000000000..15799ad35f
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-64.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-64.WEBP
new file mode 100644
index 0000000000..dba424dc34
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-640.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-640.WEBP
new file mode 100644
index 0000000000..1670158340
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-750.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-750.WEBP
new file mode 100644
index 0000000000..960c645754
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-828.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-828.WEBP
new file mode 100644
index 0000000000..5d1146197d
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/9.aee863a4-opt-96.WEBP b/public/nextImageExportOptimizer/9.aee863a4-opt-96.WEBP
new file mode 100644
index 0000000000..e05923eb89
Binary files /dev/null and b/public/nextImageExportOptimizer/9.aee863a4-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-10.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-10.WEBP
new file mode 100644
index 0000000000..4b392cc6fa
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1080.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1080.WEBP
new file mode 100644
index 0000000000..093e845937
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1200.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1200.WEBP
new file mode 100644
index 0000000000..ec65c6750d
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-128.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-128.WEBP
new file mode 100644
index 0000000000..58d7894cb1
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-16.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-16.WEBP
new file mode 100644
index 0000000000..d9bc64748c
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1920.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1920.WEBP
new file mode 100644
index 0000000000..bfe474e62e
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-256.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-256.WEBP
new file mode 100644
index 0000000000..15c25c5a74
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-32.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-32.WEBP
new file mode 100644
index 0000000000..609de399a6
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-384.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-384.WEBP
new file mode 100644
index 0000000000..62991075a7
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-48.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-48.WEBP
new file mode 100644
index 0000000000..019678c431
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-64.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-64.WEBP
new file mode 100644
index 0000000000..764f89ad99
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-640.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-640.WEBP
new file mode 100644
index 0000000000..951e9de0d6
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-750.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-750.WEBP
new file mode 100644
index 0000000000..bfa456a022
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-828.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-828.WEBP
new file mode 100644
index 0000000000..b8e565719d
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-96.WEBP b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-96.WEBP
new file mode 100644
index 0000000000..b90550eaeb
Binary files /dev/null and b/public/nextImageExportOptimizer/Comparison_Method.b12d6d2c-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-10.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-10.WEBP
new file mode 100644
index 0000000000..06375f1a2b
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1080.WEBP
new file mode 100644
index 0000000000..8032e8e385
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1200.WEBP
new file mode 100644
index 0000000000..aaabe8f309
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-128.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-128.WEBP
new file mode 100644
index 0000000000..cbe0a5d724
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-16.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-16.WEBP
new file mode 100644
index 0000000000..0fa9a98db5
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1920.WEBP
new file mode 100644
index 0000000000..f526e4c7c6
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-2048.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-2048.WEBP
new file mode 100644
index 0000000000..6b624110fd
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-256.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-256.WEBP
new file mode 100644
index 0000000000..3df2994156
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-32.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-32.WEBP
new file mode 100644
index 0000000000..f879906964
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-384.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-384.WEBP
new file mode 100644
index 0000000000..be3e9ea657
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-3840.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-3840.WEBP
new file mode 100644
index 0000000000..e57bd7047f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-48.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-48.WEBP
new file mode 100644
index 0000000000..ba78f3dbdc
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-64.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-64.WEBP
new file mode 100644
index 0000000000..49d16192d5
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-640.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-640.WEBP
new file mode 100644
index 0000000000..9acf9c733e
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-750.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-750.WEBP
new file mode 100644
index 0000000000..972eb8c4b3
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-828.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-828.WEBP
new file mode 100644
index 0000000000..9f1a745d3d
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-96.WEBP b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-96.WEBP
new file mode 100644
index 0000000000..f225073ba6
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean-cropped.62af4aa2-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-10.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-10.WEBP
new file mode 100644
index 0000000000..c8cf6929c8
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1080.WEBP
new file mode 100644
index 0000000000..16ba0a5a6b
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1200.WEBP
new file mode 100644
index 0000000000..0d5d816a75
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-128.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-128.WEBP
new file mode 100644
index 0000000000..5a2907c765
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-16.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-16.WEBP
new file mode 100644
index 0000000000..ef70ab3478
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1920.WEBP
new file mode 100644
index 0000000000..ac4446c539
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-256.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-256.WEBP
new file mode 100644
index 0000000000..ca1c395cdb
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-32.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-32.WEBP
new file mode 100644
index 0000000000..bed65195de
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-384.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-384.WEBP
new file mode 100644
index 0000000000..a8e8886f4f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-48.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-48.WEBP
new file mode 100644
index 0000000000..17ced7d2d4
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-64.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-64.WEBP
new file mode 100644
index 0000000000..c9d764d993
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-640.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-640.WEBP
new file mode 100644
index 0000000000..12271d7cf0
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-750.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-750.WEBP
new file mode 100644
index 0000000000..399bcd1372
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-828.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-828.WEBP
new file mode 100644
index 0000000000..0fb2767475
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-96.WEBP b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-96.WEBP
new file mode 100644
index 0000000000..9d62fe2f15
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.21b930bd-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-10.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-10.WEBP
new file mode 100644
index 0000000000..fe9341a3ea
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1080.WEBP
new file mode 100644
index 0000000000..1d26604582
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1200.WEBP
new file mode 100644
index 0000000000..b0862beade
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-128.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-128.WEBP
new file mode 100644
index 0000000000..6ca691b49e
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-16.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-16.WEBP
new file mode 100644
index 0000000000..0790813277
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1920.WEBP
new file mode 100644
index 0000000000..fbd8f28ef3
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-2048.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-2048.WEBP
new file mode 100644
index 0000000000..79cd612fa5
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-256.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-256.WEBP
new file mode 100644
index 0000000000..30912d222f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-32.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-32.WEBP
new file mode 100644
index 0000000000..9ba95d8265
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-384.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-384.WEBP
new file mode 100644
index 0000000000..eb7cb7e4ac
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-3840.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-3840.WEBP
new file mode 100644
index 0000000000..f72fc17ab5
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-48.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-48.WEBP
new file mode 100644
index 0000000000..129e22d108
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-64.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-64.WEBP
new file mode 100644
index 0000000000..9d91681e08
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-640.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-640.WEBP
new file mode 100644
index 0000000000..cb1d85239c
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-750.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-750.WEBP
new file mode 100644
index 0000000000..cca1e4e241
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-828.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-828.WEBP
new file mode 100644
index 0000000000..baf019269a
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-96.WEBP b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-96.WEBP
new file mode 100644
index 0000000000..4d436f27c5
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.314cdc4a-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-10.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-10.WEBP
new file mode 100644
index 0000000000..9a1b77967f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1080.WEBP
new file mode 100644
index 0000000000..653f248e96
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1200.WEBP
new file mode 100644
index 0000000000..6555d7608f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-128.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-128.WEBP
new file mode 100644
index 0000000000..c8e5b5b609
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-16.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-16.WEBP
new file mode 100644
index 0000000000..f68d885aea
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1920.WEBP
new file mode 100644
index 0000000000..5d0e635105
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-2048.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-2048.WEBP
new file mode 100644
index 0000000000..3f99076742
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-256.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-256.WEBP
new file mode 100644
index 0000000000..3dcde356f8
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-32.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-32.WEBP
new file mode 100644
index 0000000000..848a9175a7
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-384.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-384.WEBP
new file mode 100644
index 0000000000..904782214c
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-3840.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-3840.WEBP
new file mode 100644
index 0000000000..1378fc949e
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-48.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-48.WEBP
new file mode 100644
index 0000000000..2efa0881bc
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-64.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-64.WEBP
new file mode 100644
index 0000000000..2b664cb756
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-640.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-640.WEBP
new file mode 100644
index 0000000000..c5141b7f57
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-750.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-750.WEBP
new file mode 100644
index 0000000000..a152fc7c70
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-828.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-828.WEBP
new file mode 100644
index 0000000000..e41fa163ec
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-96.WEBP b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-96.WEBP
new file mode 100644
index 0000000000..3a522a7eb7
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.d5aa6d13-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-10.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-10.WEBP
new file mode 100644
index 0000000000..111321466f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1080.WEBP
new file mode 100644
index 0000000000..c68d468bff
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1200.WEBP
new file mode 100644
index 0000000000..0d9397788f
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-128.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-128.WEBP
new file mode 100644
index 0000000000..b669e354e1
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-16.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-16.WEBP
new file mode 100644
index 0000000000..1c5751d4c2
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1920.WEBP
new file mode 100644
index 0000000000..2dd85947ca
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-2048.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-2048.WEBP
new file mode 100644
index 0000000000..4c6ecdfda4
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-256.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-256.WEBP
new file mode 100644
index 0000000000..f2ecc763e1
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-32.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-32.WEBP
new file mode 100644
index 0000000000..19151010da
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-384.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-384.WEBP
new file mode 100644
index 0000000000..474f594508
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-3840.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-3840.WEBP
new file mode 100644
index 0000000000..e43d188b4c
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-48.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-48.WEBP
new file mode 100644
index 0000000000..3b0a2cb42b
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-64.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-64.WEBP
new file mode 100644
index 0000000000..216a5bbcd7
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-640.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-640.WEBP
new file mode 100644
index 0000000000..0f9896778a
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-750.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-750.WEBP
new file mode 100644
index 0000000000..653d4c8c9b
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-828.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-828.WEBP
new file mode 100644
index 0000000000..94a0c711d6
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-96.WEBP b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-96.WEBP
new file mode 100644
index 0000000000..4565d4fb26
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-bean.e3e29fde-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-10.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-10.WEBP
new file mode 100644
index 0000000000..e67841c480
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1080.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1080.WEBP
new file mode 100644
index 0000000000..64b66525f9
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1200.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1200.WEBP
new file mode 100644
index 0000000000..59e2a9c1ea
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-128.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-128.WEBP
new file mode 100644
index 0000000000..7f0d86a818
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-16.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-16.WEBP
new file mode 100644
index 0000000000..f4e2b730e7
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1920.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1920.WEBP
new file mode 100644
index 0000000000..8968993206
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-2048.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-2048.WEBP
new file mode 100644
index 0000000000..98222346de
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-256.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-256.WEBP
new file mode 100644
index 0000000000..a6bb3c688e
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-32.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-32.WEBP
new file mode 100644
index 0000000000..c8878c96d6
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-384.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-384.WEBP
new file mode 100644
index 0000000000..593380ba23
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-3840.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-3840.WEBP
new file mode 100644
index 0000000000..e66ba424cb
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-48.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-48.WEBP
new file mode 100644
index 0000000000..83d186ed08
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-64.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-64.WEBP
new file mode 100644
index 0000000000..a586fedb46
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-640.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-640.WEBP
new file mode 100644
index 0000000000..4d640e555d
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-750.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-750.WEBP
new file mode 100644
index 0000000000..4ba8c814ce
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-828.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-828.WEBP
new file mode 100644
index 0000000000..ec8a62a9b4
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur-blob.806d2505-opt-96.WEBP b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-96.WEBP
new file mode 100644
index 0000000000..112c2acd84
Binary files /dev/null and b/public/nextImageExportOptimizer/blur-blob.806d2505-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-10.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-10.WEBP
new file mode 100644
index 0000000000..964d344c50
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-1080.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1080.WEBP
new file mode 100644
index 0000000000..cf746fe33b
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-1200.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1200.WEBP
new file mode 100644
index 0000000000..b0a52312f1
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-128.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-128.WEBP
new file mode 100644
index 0000000000..117b4a9937
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-16.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-16.WEBP
new file mode 100644
index 0000000000..4267af5c97
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-1920.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1920.WEBP
new file mode 100644
index 0000000000..7a9a9b4b08
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-256.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-256.WEBP
new file mode 100644
index 0000000000..ffa0a4a542
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-32.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-32.WEBP
new file mode 100644
index 0000000000..77ff75e6db
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-384.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-384.WEBP
new file mode 100644
index 0000000000..191aa0a19e
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-48.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-48.WEBP
new file mode 100644
index 0000000000..000e05d578
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-64.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-64.WEBP
new file mode 100644
index 0000000000..19f216be58
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-640.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-640.WEBP
new file mode 100644
index 0000000000..86ec2378bd
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-750.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-750.WEBP
new file mode 100644
index 0000000000..95a8a4ddc0
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-828.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-828.WEBP
new file mode 100644
index 0000000000..67352e7709
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/blur.701b3d8a-opt-96.WEBP b/public/nextImageExportOptimizer/blur.701b3d8a-opt-96.WEBP
new file mode 100644
index 0000000000..61abf3d26a
Binary files /dev/null and b/public/nextImageExportOptimizer/blur.701b3d8a-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-10.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-10.WEBP
deleted file mode 100644
index 58310c3f53..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-1080.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-1080.WEBP
deleted file mode 100644
index d38c450711..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-1080.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-128.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-128.WEBP
deleted file mode 100644
index 7686170eaa..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-16.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-16.WEBP
deleted file mode 100644
index cb292fe67b..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-256.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-256.WEBP
deleted file mode 100644
index 15cda3cada..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-32.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-32.WEBP
deleted file mode 100644
index fdaee78d64..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-384.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-384.WEBP
deleted file mode 100644
index c89bdd1462..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-48.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-48.WEBP
deleted file mode 100644
index b6a973cfcd..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-64.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-64.WEBP
deleted file mode 100644
index a130aa0ca4..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-640.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-640.WEBP
deleted file mode 100644
index b5c5a64268..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-750.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-750.WEBP
deleted file mode 100644
index e91ca697ad..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-750.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-828.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-828.WEBP
deleted file mode 100644
index 2fcc819bd1..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-828.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/coursera.968d6897-opt-96.WEBP b/public/nextImageExportOptimizer/coursera.968d6897-opt-96.WEBP
deleted file mode 100644
index ddad24761e..0000000000
Binary files a/public/nextImageExportOptimizer/coursera.968d6897-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-10.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-10.WEBP
deleted file mode 100644
index 9d86bb30fa..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-128.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-128.WEBP
deleted file mode 100644
index 195f5a2b12..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-16.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-16.WEBP
deleted file mode 100644
index 9db699b24e..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-256.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-256.WEBP
deleted file mode 100644
index bba7ff18bf..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-32.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-32.WEBP
deleted file mode 100644
index ab515aa698..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-384.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-384.WEBP
deleted file mode 100644
index 8895590dee..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-48.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-48.WEBP
deleted file mode 100644
index d92f19eaaf..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-64.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-64.WEBP
deleted file mode 100644
index 076b23c54a..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-640.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-640.WEBP
deleted file mode 100644
index f971c80f1c..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-96.WEBP b/public/nextImageExportOptimizer/facebook.0e9e1517-opt-96.WEBP
deleted file mode 100644
index 726732a6c6..0000000000
Binary files a/public/nextImageExportOptimizer/facebook.0e9e1517-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/fernando.8a674f38-opt-10.WEBP b/public/nextImageExportOptimizer/fernando.8a674f38-opt-10.WEBP
new file mode 100644
index 0000000000..3ea291cf1d
Binary files /dev/null and b/public/nextImageExportOptimizer/fernando.8a674f38-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/fernando.8a674f38-opt-16.WEBP b/public/nextImageExportOptimizer/fernando.8a674f38-opt-16.WEBP
new file mode 100644
index 0000000000..751a449911
Binary files /dev/null and b/public/nextImageExportOptimizer/fernando.8a674f38-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/fernando.8a674f38-opt-32.WEBP b/public/nextImageExportOptimizer/fernando.8a674f38-opt-32.WEBP
new file mode 100644
index 0000000000..a35158d5f9
Binary files /dev/null and b/public/nextImageExportOptimizer/fernando.8a674f38-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/fernando.8a674f38-opt-48.WEBP b/public/nextImageExportOptimizer/fernando.8a674f38-opt-48.WEBP
new file mode 100644
index 0000000000..299c805eb9
Binary files /dev/null and b/public/nextImageExportOptimizer/fernando.8a674f38-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/frances.033cc832-opt-10.WEBP b/public/nextImageExportOptimizer/frances.033cc832-opt-10.WEBP
new file mode 100644
index 0000000000..a9b3452172
Binary files /dev/null and b/public/nextImageExportOptimizer/frances.033cc832-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/frances.033cc832-opt-16.WEBP b/public/nextImageExportOptimizer/frances.033cc832-opt-16.WEBP
new file mode 100644
index 0000000000..cca7410d5a
Binary files /dev/null and b/public/nextImageExportOptimizer/frances.033cc832-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/frances.033cc832-opt-32.WEBP b/public/nextImageExportOptimizer/frances.033cc832-opt-32.WEBP
new file mode 100644
index 0000000000..fee77a0801
Binary files /dev/null and b/public/nextImageExportOptimizer/frances.033cc832-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/frances.033cc832-opt-48.WEBP b/public/nextImageExportOptimizer/frances.033cc832-opt-48.WEBP
new file mode 100644
index 0000000000..dc90a8b9de
Binary files /dev/null and b/public/nextImageExportOptimizer/frances.033cc832-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-10.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-10.WEBP
deleted file mode 100644
index 0e7ae4f68d..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-128.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-128.WEBP
deleted file mode 100644
index ffc81eb7cb..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-16.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-16.WEBP
deleted file mode 100644
index 980c0fb03f..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-256.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-256.WEBP
deleted file mode 100644
index bfb2f02c44..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-32.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-32.WEBP
deleted file mode 100644
index 0189e412dc..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-384.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-384.WEBP
deleted file mode 100644
index 03b0f786e5..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-48.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-48.WEBP
deleted file mode 100644
index 3b12fe3998..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-64.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-64.WEBP
deleted file mode 100644
index 8466abb6de..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-640.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-640.WEBP
deleted file mode 100644
index 09dfe7b99d..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/github.0821dbe0-opt-96.WEBP b/public/nextImageExportOptimizer/github.0821dbe0-opt-96.WEBP
deleted file mode 100644
index 9e8b09eea7..0000000000
Binary files a/public/nextImageExportOptimizer/github.0821dbe0-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-10.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-10.WEBP
new file mode 100644
index 0000000000..06fd5a97af
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1080.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1080.WEBP
new file mode 100644
index 0000000000..f634405898
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1200.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1200.WEBP
new file mode 100644
index 0000000000..1803aba80f
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-128.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-128.WEBP
new file mode 100644
index 0000000000..b1c077faf0
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-16.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-16.WEBP
new file mode 100644
index 0000000000..adeb97c3ba
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1920.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1920.WEBP
new file mode 100644
index 0000000000..59f5b99cf1
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-2048.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-2048.WEBP
new file mode 100644
index 0000000000..d23fbbc1d4
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-256.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-256.WEBP
new file mode 100644
index 0000000000..bb576c9231
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-32.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-32.WEBP
new file mode 100644
index 0000000000..7809c19ad9
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-384.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-384.WEBP
new file mode 100644
index 0000000000..e03533c999
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-48.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-48.WEBP
new file mode 100644
index 0000000000..732c95077f
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-64.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-64.WEBP
new file mode 100644
index 0000000000..55e070c2dc
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-640.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-640.WEBP
new file mode 100644
index 0000000000..5f63332042
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-750.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-750.WEBP
new file mode 100644
index 0000000000..bce9591d0a
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-828.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-828.WEBP
new file mode 100644
index 0000000000..119d004d3e
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-96.WEBP b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-96.WEBP
new file mode 100644
index 0000000000..2f41d55865
Binary files /dev/null and b/public/nextImageExportOptimizer/hero-photo.19f66b71-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-10.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-10.WEBP
deleted file mode 100644
index 4a22ac5524..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-128.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-128.WEBP
deleted file mode 100644
index d9d9a43018..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-16.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-16.WEBP
deleted file mode 100644
index 54e08c0be5..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-256.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-256.WEBP
deleted file mode 100644
index 083521fba0..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-32.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-32.WEBP
deleted file mode 100644
index 138ad16fe1..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-384.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-384.WEBP
deleted file mode 100644
index 49c5709bd5..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-48.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-48.WEBP
deleted file mode 100644
index a52b865f7c..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-64.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-64.WEBP
deleted file mode 100644
index 8d982c651f..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-640.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-640.WEBP
deleted file mode 100644
index 3297515056..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-750.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-750.WEBP
deleted file mode 100644
index e3561de6b1..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-750.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-828.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-828.WEBP
deleted file mode 100644
index 602f845504..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-828.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/intuit.04140a09-opt-96.WEBP b/public/nextImageExportOptimizer/intuit.04140a09-opt-96.WEBP
deleted file mode 100644
index b6bad3d039..0000000000
Binary files a/public/nextImageExportOptimizer/intuit.04140a09-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-10.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-10.WEBP
new file mode 100644
index 0000000000..a443e501a1
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1080.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1080.WEBP
new file mode 100644
index 0000000000..4db2fd3c13
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1200.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1200.WEBP
new file mode 100644
index 0000000000..8aa5822b89
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-128.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-128.WEBP
new file mode 100644
index 0000000000..b05a0d0e2d
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-16.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-16.WEBP
new file mode 100644
index 0000000000..9d66ca6ed6
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1920.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1920.WEBP
new file mode 100644
index 0000000000..595e887a9e
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-2048.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-2048.WEBP
new file mode 100644
index 0000000000..98f7209053
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-2048.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-256.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-256.WEBP
new file mode 100644
index 0000000000..3af6cd0571
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-32.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-32.WEBP
new file mode 100644
index 0000000000..308e21ea56
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-384.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-384.WEBP
new file mode 100644
index 0000000000..be346adf7c
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-3840.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-3840.WEBP
new file mode 100644
index 0000000000..81f903e431
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-3840.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-48.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-48.WEBP
new file mode 100644
index 0000000000..da39f8570a
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-64.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-64.WEBP
new file mode 100644
index 0000000000..33edc81d52
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-640.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-640.WEBP
new file mode 100644
index 0000000000..118533b5b4
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-750.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-750.WEBP
new file mode 100644
index 0000000000..a889f31a78
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-828.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-828.WEBP
new file mode 100644
index 0000000000..ace80ecbae
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-96.WEBP b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-96.WEBP
new file mode 100644
index 0000000000..dc52dee62f
Binary files /dev/null and b/public/nextImageExportOptimizer/location-photo.8c4a71ef-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-10.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-10.WEBP
new file mode 100644
index 0000000000..4961b7c222
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1080.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1080.WEBP
new file mode 100644
index 0000000000..65c29990c5
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1200.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1200.WEBP
new file mode 100644
index 0000000000..d8214b9089
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1200.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-128.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-128.WEBP
new file mode 100644
index 0000000000..69da4bb95c
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-16.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-16.WEBP
new file mode 100644
index 0000000000..2e385671e1
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1920.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1920.WEBP
new file mode 100644
index 0000000000..15990c33fc
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-1920.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-256.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-256.WEBP
new file mode 100644
index 0000000000..4eede1807b
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-32.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-32.WEBP
new file mode 100644
index 0000000000..9bbfdc3c21
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-384.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-384.WEBP
new file mode 100644
index 0000000000..8a5917f234
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-48.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-48.WEBP
new file mode 100644
index 0000000000..f760169cdd
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-64.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-64.WEBP
new file mode 100644
index 0000000000..89474d06a0
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-640.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-640.WEBP
new file mode 100644
index 0000000000..4ad9b173b8
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-750.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-750.WEBP
new file mode 100644
index 0000000000..ce97911ea7
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-828.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-828.WEBP
new file mode 100644
index 0000000000..30bdaee90f
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-96.WEBP b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-96.WEBP
new file mode 100644
index 0000000000..eaf20905c6
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-blurred.94c9eff4-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-10.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-10.WEBP
new file mode 100644
index 0000000000..0c31892d01
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-1080.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-1080.WEBP
new file mode 100644
index 0000000000..d2128901f2
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-128.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-128.WEBP
new file mode 100644
index 0000000000..1fc4b2db74
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-16.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-16.WEBP
new file mode 100644
index 0000000000..599c215a34
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-256.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-256.WEBP
new file mode 100644
index 0000000000..07a354fc30
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-32.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-32.WEBP
new file mode 100644
index 0000000000..0aeeb090a1
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-384.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-384.WEBP
new file mode 100644
index 0000000000..6b83443c3f
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-48.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-48.WEBP
new file mode 100644
index 0000000000..382b3114aa
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-64.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-64.WEBP
new file mode 100644
index 0000000000..97776e3e10
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-640.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-640.WEBP
new file mode 100644
index 0000000000..6cf46636ab
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-750.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-750.WEBP
new file mode 100644
index 0000000000..db018b802c
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-828.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-828.WEBP
new file mode 100644
index 0000000000..69547afaf1
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-96.WEBP b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-96.WEBP
new file mode 100644
index 0000000000..f3304061ed
Binary files /dev/null and b/public/nextImageExportOptimizer/logo-mask.1694fb96-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-10.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-10.WEBP
new file mode 100644
index 0000000000..9a05f304bc
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-128.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-128.WEBP
new file mode 100644
index 0000000000..1302f4f2e9
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-16.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-16.WEBP
new file mode 100644
index 0000000000..cc8edc0502
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-32.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-32.WEBP
new file mode 100644
index 0000000000..f207a99da2
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-48.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-48.WEBP
new file mode 100644
index 0000000000..4993df57bd
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-64.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-64.WEBP
new file mode 100644
index 0000000000..32b35ef068
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-96.WEBP b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-96.WEBP
new file mode 100644
index 0000000000..aa41a03d4e
Binary files /dev/null and b/public/nextImageExportOptimizer/mask.d8b3d3a1-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-10.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-10.WEBP
deleted file mode 100644
index 38783fbc8f..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-128.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-128.WEBP
deleted file mode 100644
index 713de12c87..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-16.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-16.WEBP
deleted file mode 100644
index bdebf7c088..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-256.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-256.WEBP
deleted file mode 100644
index 6f6374ee9f..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-32.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-32.WEBP
deleted file mode 100644
index 580a6b8577..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-384.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-384.WEBP
deleted file mode 100644
index 8464f4467a..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-48.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-48.WEBP
deleted file mode 100644
index d2635b61c0..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-64.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-64.WEBP
deleted file mode 100644
index 637bd4d6bb..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-640.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-640.WEBP
deleted file mode 100644
index d56f09ff53..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/pinterest.36b58187-opt-96.WEBP b/public/nextImageExportOptimizer/pinterest.36b58187-opt-96.WEBP
deleted file mode 100644
index 3b91a4245f..0000000000
Binary files a/public/nextImageExportOptimizer/pinterest.36b58187-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-10.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-10.WEBP
deleted file mode 100644
index a88502ee25..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-10.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-128.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-128.WEBP
deleted file mode 100644
index 25e12792ae..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-128.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-16.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-16.WEBP
deleted file mode 100644
index b67d5de5b5..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-16.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-256.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-256.WEBP
deleted file mode 100644
index afa8ec3905..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-256.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-32.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-32.WEBP
deleted file mode 100644
index d516cd12c1..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-32.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-384.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-384.WEBP
deleted file mode 100644
index eeae64cd68..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-384.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-48.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-48.WEBP
deleted file mode 100644
index 9c22d23445..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-48.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-64.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-64.WEBP
deleted file mode 100644
index 2867219675..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-64.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-640.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-640.WEBP
deleted file mode 100644
index e438bd82fa..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-640.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-96.WEBP b/public/nextImageExportOptimizer/shopify.2cb330ea-opt-96.WEBP
deleted file mode 100644
index fcd35d32ab..0000000000
Binary files a/public/nextImageExportOptimizer/shopify.2cb330ea-opt-96.WEBP and /dev/null differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-10.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-10.WEBP
new file mode 100644
index 0000000000..986d533955
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-1080.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-1080.WEBP
new file mode 100644
index 0000000000..597c2732a9
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-1080.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-128.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-128.WEBP
new file mode 100644
index 0000000000..b5e42fd429
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-128.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-16.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-16.WEBP
new file mode 100644
index 0000000000..c3ecb88546
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-256.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-256.WEBP
new file mode 100644
index 0000000000..9a9165784e
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-256.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-32.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-32.WEBP
new file mode 100644
index 0000000000..9a04a6c44f
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-384.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-384.WEBP
new file mode 100644
index 0000000000..2288470736
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-384.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-48.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-48.WEBP
new file mode 100644
index 0000000000..2f885cf559
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-48.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-64.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-64.WEBP
new file mode 100644
index 0000000000..bd1e0e0305
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-64.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-640.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-640.WEBP
new file mode 100644
index 0000000000..e65e9220c3
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-640.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-750.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-750.WEBP
new file mode 100644
index 0000000000..8fccd31025
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-750.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-828.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-828.WEBP
new file mode 100644
index 0000000000..de583c39cb
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-828.WEBP differ
diff --git a/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-96.WEBP b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-96.WEBP
new file mode 100644
index 0000000000..d7c4d96568
Binary files /dev/null and b/public/nextImageExportOptimizer/speaker.5a4b04b3-opt-96.WEBP differ
diff --git a/public/nextImageExportOptimizer/trudie.02ae47d4-opt-10.WEBP b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-10.WEBP
new file mode 100644
index 0000000000..7e3a78dfb1
Binary files /dev/null and b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-10.WEBP differ
diff --git a/public/nextImageExportOptimizer/trudie.02ae47d4-opt-16.WEBP b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-16.WEBP
new file mode 100644
index 0000000000..33ced8fb42
Binary files /dev/null and b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-16.WEBP differ
diff --git a/public/nextImageExportOptimizer/trudie.02ae47d4-opt-32.WEBP b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-32.WEBP
new file mode 100644
index 0000000000..4ac91b9fb5
Binary files /dev/null and b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-32.WEBP differ
diff --git a/public/nextImageExportOptimizer/trudie.02ae47d4-opt-48.WEBP b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-48.WEBP
new file mode 100644
index 0000000000..315dd1a9b8
Binary files /dev/null and b/public/nextImageExportOptimizer/trudie.02ae47d4-opt-48.WEBP differ
diff --git a/src/_design-system/mdx-components/get-mdx-headings.tsx b/src/_design-system/mdx-components/get-mdx-headings.tsx
new file mode 100644
index 0000000000..a162126a90
--- /dev/null
+++ b/src/_design-system/mdx-components/get-mdx-headings.tsx
@@ -0,0 +1,99 @@
+/**
+ * @file MDX Heading components.
+ * Copied from `nextra-theme-docs` and restyled.
+ */
+
+import { clsx } from "clsx"
+import {
+  useSetActiveAnchor,
+  useIntersectionObserver,
+  useSlugs,
+} from "nextra-theme-docs"
+
+import { useEffect, useRef } from "react"
+
+const headingClasses = {
+  h1: "typography-h2 mt-2",
+  h2: "typography-h3 mt-10",
+  h3: "typography-body-lg mt-8",
+  h4: "typography-body-md font-semibold mt-8",
+  h5: "typography-label",
+  h6: "typography-label",
+}
+
+const createHeading = (
+  Tag: `h${2 | 3 | 4 | 5 | 6}`,
+  context: { index: number },
+) =>
+  function Heading({
+    children,
+    id,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"h2">): React.ReactElement {
+    // Nextra tracks anchors in context
+    const setActiveAnchor = useSetActiveAnchor()
+    const slugs = useSlugs()
+    const observer = useIntersectionObserver()
+    const obRef = useRef<HTMLAnchorElement>(null)
+
+    useEffect(() => {
+      const heading = obRef.current
+      if (!id || !observer || !heading) return
+      observer.observe(heading)
+      slugs.set(heading, [id, (context.index += 1)])
+
+      return () => {
+        observer.disconnect()
+        slugs.delete(heading)
+        setActiveAnchor(f => {
+          const ret = { ...f }
+          delete ret[id]
+          return ret
+        })
+      }
+    }, [id, slugs, observer, setActiveAnchor])
+
+    return (
+      <Tag
+        id={id}
+        className={
+          className === "sr-only"
+            ? // can be added by footnotes
+              "sr-only"
+            : clsx(headingClasses[Tag], "text-neu-900", className)
+        }
+        {...props}
+      >
+        {children}
+        {id && (
+          <a
+            href={`#${id}`}
+            className="nextra-focus subheading-anchor"
+            aria-label="Permalink for this section"
+            ref={obRef}
+          />
+        )}
+      </Tag>
+    )
+  }
+
+export function getMdxHeadings() {
+  const counter = ((globalThis as Record<string, any>).__headingsCounter ||= {
+    index: 0,
+  })
+
+  return {
+    h1: (props: React.ComponentPropsWithoutRef<"h1">) => (
+      <h1
+        {...props}
+        className={clsx(headingClasses.h1, "text-neu-900", props.className)}
+      />
+    ),
+    h2: createHeading("h2", counter),
+    h3: createHeading("h3", counter),
+    h4: createHeading("h4", counter),
+    h5: createHeading("h5", counter),
+    h6: createHeading("h6", counter),
+  }
+}
diff --git a/src/_design-system/mdx-components/index.tsx b/src/_design-system/mdx-components/index.tsx
new file mode 100644
index 0000000000..bec4faee2c
--- /dev/null
+++ b/src/_design-system/mdx-components/index.tsx
@@ -0,0 +1,7 @@
+import { getMdxHeadings } from "./get-mdx-headings"
+import { MdxLink } from "./mdx-link"
+
+export const mdxComponents = {
+  a: MdxLink,
+  ...getMdxHeadings(),
+}
diff --git a/src/_design-system/mdx-components/mdx-link.tsx b/src/_design-system/mdx-components/mdx-link.tsx
new file mode 100644
index 0000000000..cf18dafdfc
--- /dev/null
+++ b/src/_design-system/mdx-components/mdx-link.tsx
@@ -0,0 +1,23 @@
+import { forwardRef } from "react"
+import { clsx } from "clsx"
+
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+export const MdxLink = forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a">
+>(function MdxLink(props, ref) {
+  return (
+    <Anchor
+      {...props}
+      ref={ref}
+      className={clsx(
+        "typography-link text-neu-900 decoration-from-font underline-offset-2",
+        props.className,
+      )}
+      href={props.href || ""}
+    >
+      {props.children}
+    </Anchor>
+  )
+})
diff --git a/src/_design-system/syntax/dark.json b/src/_design-system/syntax/dark.json
new file mode 100644
index 0000000000..6897a3fe5b
--- /dev/null
+++ b/src/_design-system/syntax/dark.json
@@ -0,0 +1,552 @@
+{
+  "name": "k-colorable dark, based on GitHub Dark",
+  "type": "dark",
+  "semanticHighlighting": true,
+  "colors": {
+    "activityBar.activeBorder": "#f9826c",
+    "activityBar.background": "#24292C",
+    "activityBar.border": "#1b1f20",
+    "activityBar.foreground": "#e1e4e8",
+    "activityBar.inactiveForeground": "#6a737d",
+    "activityBarBadge.background": "#0366d6",
+    "activityBarBadge.foreground": "#fff",
+    "badge.background": "#044289",
+    "badge.foreground": "#c8e1ff",
+    "breadcrumb.activeSelectionForeground": "#d1d5da",
+    "breadcrumb.focusForeground": "#e1e4e8",
+    "breadcrumb.foreground": "#959da5",
+    "breadcrumbPicker.background": "#2b3036",
+    "button.background": "#176f2c",
+    "button.foreground": "#dcffe4",
+    "button.hoverBackground": "#22863a",
+    "button.secondaryBackground": "#444d56",
+    "button.secondaryForeground": "#fff",
+    "button.secondaryHoverBackground": "#586069",
+    "checkbox.background": "#444d56",
+    "checkbox.border": "#1b1f20",
+    "debugToolBar.background": "#2b3036",
+    "descriptionForeground": "#959da5",
+    "diffEditor.insertedTextBackground": "#28a74530",
+    "diffEditor.removedTextBackground": "#d73a4930",
+    "dropdown.background": "#2f363d",
+    "dropdown.border": "#1b1f20",
+    "dropdown.foreground": "#e1e4e8",
+    "dropdown.listBackground": "#24292C",
+    "editor.background": "#24292c",
+    "editor.findMatchBackground": "#ffd33d44",
+    "editor.findMatchHighlightBackground": "#ffd33d22",
+    "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
+    "editor.foldBackground": "#58606915",
+    "editor.foreground": "#CFD3C5",
+    "editor.inactiveSelectionBackground": "#3392FF22",
+    "editor.lineHighlightBackground": "#2b3036",
+    "editor.linkedEditingBackground": "#3392FF22",
+    "editor.selectionBackground": "#3392FF44",
+    "editor.selectionHighlightBackground": "#17E5E633",
+    "editor.selectionHighlightBorder": "#17E5E600",
+    "editor.stackFrameHighlightBackground": "#C6902625",
+    "editor.wordHighlightBackground": "#17E5E600",
+    "editor.wordHighlightBorder": "#17E5E699",
+    "editor.wordHighlightStrongBackground": "#17E5E600",
+    "editor.wordHighlightStrongBorder": "#17E5E666",
+    "editorBracketHighlight.foreground1": "#79b8ff",
+    "editorBracketHighlight.foreground2": "#ffab70",
+    "editorBracketHighlight.foreground3": "#b392f0",
+    "editorBracketHighlight.foreground4": "#79b8ff",
+    "editorBracketHighlight.foreground5": "#ffab70",
+    "editorBracketHighlight.foreground6": "#b392f0",
+    "editorBracketMatch.background": "#17E5E650",
+    "editorBracketMatch.border": "#17E5E600",
+    "editorCursor.foreground": "#c8e1ff",
+    "editorError.foreground": "#f97583",
+    "editorGroup.border": "#1b1f20",
+    "editorGroupHeader.tabsBackground": "#24292C",
+    "editorGroupHeader.tabsBorder": "#1b1f20",
+    "editorGutter.addedBackground": "#28a745",
+    "editorGutter.deletedBackground": "#ea4a5a",
+    "editorGutter.modifiedBackground": "#2188ff",
+    "editorIndentGuide.activeBackground": "#444d56",
+    "editorIndentGuide.background": "#2f363d",
+    "editorLineNumber.activeForeground": "#e1e4e8",
+    "editorLineNumber.foreground": "#444d56",
+    "editorOverviewRuler.border": "#1b1f20",
+    "editorWarning.foreground": "#ffea7f",
+    "editorWhitespace.foreground": "#444d56",
+    "editorWidget.background": "#24292C",
+    "errorForeground": "#f97583",
+    "focusBorder": "#005cc5",
+    "foreground": "#d1d5da",
+    "gitDecoration.addedResourceForeground": "#34d058",
+    "gitDecoration.conflictingResourceForeground": "#ffab70",
+    "gitDecoration.deletedResourceForeground": "#ea4a5a",
+    "gitDecoration.ignoredResourceForeground": "#6a737d",
+    "gitDecoration.modifiedResourceForeground": "#79b8ff",
+    "gitDecoration.submoduleResourceForeground": "#6a737d",
+    "gitDecoration.untrackedResourceForeground": "#34d058",
+    "input.background": "#2f363b",
+    "input.border": "#1b1f20",
+    "input.foreground": "#e1e4e8",
+    "input.placeholderForeground": "#959da5",
+    "list.activeSelectionBackground": "#39414a",
+    "list.activeSelectionForeground": "#e1e4e8",
+    "list.focusBackground": "#044289",
+    "list.hoverBackground": "#282e34",
+    "list.hoverForeground": "#e1e4e8",
+    "list.inactiveFocusBackground": "#1d2d3e",
+    "list.inactiveSelectionBackground": "#282e34",
+    "list.inactiveSelectionForeground": "#e1e4e8",
+    "notificationCenterHeader.background": "#24292b",
+    "notificationCenterHeader.foreground": "#959da5",
+    "notifications.background": "#2f363b",
+    "notifications.border": "#1b1f20",
+    "notifications.foreground": "#e1e4e8",
+    "notificationsErrorIcon.foreground": "#ea4a5a",
+    "notificationsInfoIcon.foreground": "#79b8ff",
+    "notificationsWarningIcon.foreground": "#ffab70",
+    "panel.background": "#24292C",
+    "panel.border": "#1b1f20",
+    "panelInput.border": "#2f363d",
+    "panelTitle.activeBorder": "#f9826c",
+    "panelTitle.activeForeground": "#e1e4e8",
+    "panelTitle.inactiveForeground": "#959da5",
+    "peekViewEditor.background": "#24292C88",
+    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
+    "peekViewResult.background": "#1f2425",
+    "peekViewResult.matchHighlightBackground": "#ffd33d33",
+    "pickerGroup.border": "#444d56",
+    "pickerGroup.foreground": "#e1e4e8",
+    "progressBar.background": "#0366d6",
+    "quickInput.background": "#24292C",
+    "quickInput.foreground": "#e1e4e8",
+    "scrollbar.shadow": "#0008",
+    "scrollbarSlider.activeBackground": "#6a737d88",
+    "scrollbarSlider.background": "#6a737d33",
+    "scrollbarSlider.hoverBackground": "#6a737d44",
+    "settings.headerForeground": "#e1e4e8",
+    "settings.modifiedItemIndicator": "#0366d6",
+    "sideBar.background": "#1f2425",
+    "sideBar.border": "#1b1f20",
+    "sideBar.foreground": "#d1d5da",
+    "sideBarSectionHeader.background": "#24292C",
+    "sideBarSectionHeader.border": "#1b1f20",
+    "sideBarSectionHeader.foreground": "#e1e4e8",
+    "sideBarTitle.foreground": "#e1e4e8",
+    "statusBar.background": "#24292C",
+    "statusBar.border": "#1b1f20",
+    "statusBar.debuggingBackground": "#931c06",
+    "statusBar.debuggingForeground": "#fff",
+    "statusBar.foreground": "#d1d5da",
+    "statusBar.noFolderBackground": "#24292C",
+    "statusBarItem.prominentBackground": "#282e34",
+    "statusBarItem.remoteBackground": "#24292C",
+    "statusBarItem.remoteForeground": "#d1d5da",
+    "tab.activeBackground": "#24292C",
+    "tab.activeBorder": "#24292C",
+    "tab.activeBorderTop": "#f9826c",
+    "tab.activeForeground": "#e1e4e8",
+    "tab.border": "#1b1f20",
+    "tab.hoverBackground": "#24292C",
+    "tab.inactiveBackground": "#24292C",
+    "tab.inactiveForeground": "#959da5",
+    "tab.unfocusedActiveBorder": "#24292C",
+    "tab.unfocusedActiveBorderTop": "#1b1f20",
+    "tab.unfocusedHoverBackground": "#24292C",
+    "terminal.ansiBlack": "#586069",
+    "terminal.ansiBlue": "#2188ff",
+    "terminal.ansiBrightBlack": "#959da5",
+    "terminal.ansiBrightBlue": "#79b8ff",
+    "terminal.ansiBrightCyan": "#56d4dd",
+    "terminal.ansiBrightGreen": "#85e89d",
+    "terminal.ansiBrightMagenta": "#b392f0",
+    "terminal.ansiBrightRed": "#f97583",
+    "terminal.ansiBrightWhite": "#fafbfc",
+    "terminal.ansiBrightYellow": "#ffea7f",
+    "terminal.ansiCyan": "#39c5cf",
+    "terminal.ansiGreen": "#34d058",
+    "terminal.ansiMagenta": "#b392f0",
+    "terminal.ansiRed": "#ea4a5a",
+    "terminal.ansiWhite": "#d1d5da",
+    "terminal.ansiYellow": "#ffea7f",
+    "terminal.foreground": "#d1d5da",
+    "terminal.tab.activeBorder": "#f9826c",
+    "terminalCursor.background": "#586069",
+    "terminalCursor.foreground": "#79b8ff",
+    "textBlockQuote.background": "#24292C",
+    "textBlockQuote.border": "#444d56",
+    "textCodeBlock.background": "#2f363d",
+    "textLink.activeForeground": "#c8e1ff",
+    "textLink.foreground": "#79b8ff",
+    "textPreformat.foreground": "#d1d5da",
+    "textSeparator.foreground": "#586069",
+    "titleBar.activeBackground": "#24292C",
+    "titleBar.activeForeground": "#e1e4e8",
+    "titleBar.border": "#1b1f20",
+    "titleBar.inactiveBackground": "#24292C",
+    "titleBar.inactiveForeground": "#959da5",
+    "tree.indentGuidesStroke": "#2f363d",
+    "welcomePage.buttonBackground": "#2f363d",
+    "welcomePage.buttonHoverBackground": "#444d56"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "#6a737d"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language"
+      ],
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "constant",
+      "settings": {
+        "foreground": "#F3F4F0"
+      }
+    },
+    {
+      "scope": [
+        "keyword.other.unit.deg.css",
+        "keyword.other.unit.ex.css",
+        "keyword.other.unit.fr.css",
+        "keyword.other.unit.in.css",
+        "keyword.other.unit.mm.css",
+        "keyword.other.unit.pc.css",
+        "keyword.other.unit.pt.css",
+        "keyword.other.unit.px.css",
+        "keyword.other.unit.rem.css",
+        "keyword.other.unit.vh.css",
+        "keyword.other.unit.vw.css",
+        "keyword.other.unit.vmin.css",
+        "keyword.other.unit.vmax.css",
+        "keyword.other.unit.percentage.css"
+      ],
+      "settings": {
+        "foreground": "#FFAc71"
+      }
+    },
+    {
+      "scope": ["entity", "entity.name", "variable.parameter.graphql"],
+      "settings": {
+        "foreground": "#F3F4F0"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#C2F653"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#ECFAD1"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type"],
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source"
+      ],
+      "settings": {
+        "foreground": "#9ecbff"
+      }
+    },
+    {
+      "scope": ["support", "support.type.graphql"],
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": ["variable", "support.type.property-name.json"],
+      "settings": {
+        "foreground": "#dbf6a2"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "carriage-return",
+      "settings": {
+        "background": "#f97583",
+        "content": "^M",
+        "fontStyle": "italic underline",
+        "foreground": "#24292C"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": ["string variable"],
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": ["source.regexp", "string.regexp"],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#dbf6a2"
+      }
+    },
+    {
+      "scope": ["markup.heading", "markup.heading entity.name"],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": ["markup.underline"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": ["markup.strikethrough"],
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "background": "#86181d",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "background": "#144620",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": ["markup.changed", "punctuation.definition.changed"],
+      "settings": {
+        "background": "#c24e00",
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": ["markup.ignored", "markup.untracked"],
+      "settings": {
+        "background": "#79b8ff",
+        "foreground": "#2f363d"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#d1d5da"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": ["constant.other.reference.link", "string.other.link"],
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.selectionset.graphql"],
+      "settings": {
+        "foreground": "#6E7557"
+      }
+    }
+  ]
+}
diff --git a/src/_design-system/syntax/index.js b/src/_design-system/syntax/index.js
new file mode 100644
index 0000000000..028fad3b7a
--- /dev/null
+++ b/src/_design-system/syntax/index.js
@@ -0,0 +1,14 @@
+// @ts-check
+
+import fs from "fs/promises"
+
+const [dark, light] = await Promise.all([
+  fs
+    .readFile(new URL("./dark.json", import.meta.url), "utf-8")
+    .then(JSON.parse),
+  fs
+    .readFile(new URL("./light.json", import.meta.url), "utf-8")
+    .then(JSON.parse),
+])
+
+export const syntaxHighlightingThemes = { light, dark }
diff --git a/src/_design-system/syntax/light.json b/src/_design-system/syntax/light.json
new file mode 100644
index 0000000000..781f2ea182
--- /dev/null
+++ b/src/_design-system/syntax/light.json
@@ -0,0 +1,327 @@
+{
+  "name": "k-colorable light, based on Min Light",
+  "type": "light",
+  "semanticHighlighting": true,
+  "colors": {
+    "activityBar.background": "#f6f6f6",
+    "activityBar.foreground": "#9E9E9E",
+    "activityBarBadge.background": "#616161",
+    "badge.background": "#E0E0E0",
+    "badge.foreground": "#616161",
+    "button.background": "#757575",
+    "button.hoverBackground": "#616161",
+    "debugIcon.breakpointCurrentStackframeForeground": "#1976D2",
+    "debugIcon.breakpointDisabledForeground": "#848484",
+    "debugIcon.breakpointForeground": "#D32F2F",
+    "debugIcon.breakpointStackframeForeground": "#1976D2",
+    "debugIcon.continueForeground": "#6f42c1",
+    "debugIcon.disconnectForeground": "#6f42c1",
+    "debugIcon.pauseForeground": "#6f42c1",
+    "debugIcon.restartForeground": "#1976D2",
+    "debugIcon.startForeground": "#1976D2",
+    "debugIcon.stepBackForeground": "#6f42c1",
+    "debugIcon.stepIntoForeground": "#6f42c1",
+    "debugIcon.stepOutForeground": "#6f42c1",
+    "debugIcon.stepOverForeground": "#6f42c1",
+    "debugIcon.stopForeground": "#1976D2",
+    "diffEditor.insertedTextBackground": "#b7e7a44b",
+    "diffEditor.removedTextBackground": "#e597af52",
+    "editor.background": "#ffffff",
+    "editor.foreground": "#4f533f",
+    "editor.lineHighlightBorder": "#f2f2f2",
+    "editorBracketMatch.background": "#E7F3FF",
+    "editorBracketMatch.border": "#c8e1ff",
+    "editorGroupHeader.tabsBackground": "#f6f6f6",
+    "editorGroupHeader.tabsBorder": "#fff",
+    "editorIndentGuide.background": "#EEE",
+    "editorLineNumber.activeForeground": "#757575",
+    "editorLineNumber.foreground": "#CCC",
+    "editorSuggestWidget.background": "#F3F3F3",
+    "extensionButton.prominentBackground": "#000000AA",
+    "extensionButton.prominentHoverBackground": "#000000BB",
+    "focusBorder": "#D0D0D0",
+    "foreground": "#757575",
+    "gitDecoration.ignoredResourceForeground": "#AAAAAA",
+    "input.border": "#E9E9E9",
+    "inputOption.activeBackground": "#EDEDED",
+    "list.activeSelectionBackground": "#EEE",
+    "list.activeSelectionForeground": "#212121",
+    "list.focusBackground": "#ddd",
+    "list.focusForeground": "#212121",
+    "list.highlightForeground": "#212121",
+    "list.inactiveSelectionBackground": "#E0E0E0",
+    "list.inactiveSelectionForeground": "#212121",
+    "panel.background": "#fff",
+    "panel.border": "#f4f4f4",
+    "panelTitle.activeBorder": "#fff",
+    "panelTitle.inactiveForeground": "#BDBDBD",
+    "peekView.border": "#E0E0E0",
+    "peekViewEditor.background": "#f8f8f8",
+    "pickerGroup.foreground": "#000",
+    "progressBar.background": "#000",
+    "scrollbar.shadow": "#FFF",
+    "sideBar.background": "#f6f6f6",
+    "sideBar.border": "#f6f6f6",
+    "sideBarSectionHeader.background": "#EEE",
+    "sideBarTitle.foreground": "#999",
+    "statusBar.background": "#f6f6f6",
+    "statusBar.border": "#f6f6f6",
+    "statusBar.debuggingBackground": "#f6f6f6",
+    "statusBar.foreground": "#7E7E7E",
+    "statusBar.noFolderBackground": "#f6f6f6",
+    "statusBarItem.prominentBackground": "#0000001a",
+    "statusBarItem.remoteBackground": "#f6f6f600",
+    "statusBarItem.remoteForeground": "#7E7E7E",
+    "symbolIcon.classForeground": "#dd8500",
+    "symbolIcon.constructorForeground": "#6f42c1",
+    "symbolIcon.enumeratorForeground": "#dd8500",
+    "symbolIcon.enumeratorMemberForeground": "#1976D2",
+    "symbolIcon.eventForeground": "#dd8500",
+    "symbolIcon.fieldForeground": "#1976D2",
+    "symbolIcon.functionForeground": "#6f42c1",
+    "symbolIcon.interfaceForeground": "#1976D2",
+    "symbolIcon.methodForeground": "#6f42c1",
+    "symbolIcon.variableForeground": "#1976D2",
+    "tab.activeBorder": "#FFF",
+    "tab.activeForeground": "#424242",
+    "tab.border": "#f6f6f6",
+    "tab.inactiveBackground": "#f6f6f6",
+    "tab.inactiveForeground": "#BDBDBD",
+    "tab.unfocusedActiveBorder": "#fff",
+    "terminal.ansiBlack": "#333",
+    "terminal.ansiBlue": "#e0e0e0",
+    "terminal.ansiBrightBlack": "#a1a1a1",
+    "terminal.ansiBrightBlue": "#6871ff",
+    "terminal.ansiBrightCyan": "#57d9ad",
+    "terminal.ansiBrightGreen": "#a3d900",
+    "terminal.ansiBrightMagenta": "#a37acc",
+    "terminal.ansiBrightRed": "#d6656a",
+    "terminal.ansiBrightWhite": "#7E7E7E",
+    "terminal.ansiBrightYellow": "#e7c547",
+    "terminal.ansiCyan": "#4dbf99",
+    "terminal.ansiGreen": "#77cc00",
+    "terminal.ansiMagenta": "#9966cc",
+    "terminal.ansiRed": "#D32F2F",
+    "terminal.ansiWhite": "#c7c7c7",
+    "terminal.ansiYellow": "#f29718",
+    "terminal.background": "#fff",
+    "textLink.activeForeground": "#000",
+    "textLink.foreground": "#000",
+    "titleBar.activeBackground": "#f6f6f6",
+    "titleBar.border": "#FFFFFF00",
+    "titleBar.inactiveBackground": "#f6f6f6"
+  },
+  "tokenColors": [
+    {
+      "settings": {
+        "foreground": "#24292eff"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.accessor",
+        "meta.group.braces.round.function.arguments",
+        "meta.template.expression",
+        "markup.fenced_code meta.embedded.block"
+      ],
+      "settings": {
+        "foreground": "#363A2C"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["strong", "markup.heading.markdown", "markup.bold.markdown"],
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.italic.markdown"],
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "meta.link.inline.markdown",
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#1976D2"
+      }
+    },
+    {
+      "scope": ["string", "markup.fenced_code", "markup.inline"],
+      "settings": {
+        "foreground": "#2b5581"
+      }
+    },
+    {
+      "scope": ["comment", "string.quoted.docstring.multi"],
+      "settings": {
+        "foreground": "#c2c3c5"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "constant.language",
+        "constant.other.placeholder",
+        "constant.character.format.placeholder",
+        "variable.language.this",
+        "variable.other.object",
+        "variable.other.class",
+        "variable.other.constant",
+        "meta.property-name",
+        "meta.property-value",
+        "support"
+      ],
+      "settings": {
+        "foreground": "#1976D2"
+      }
+    },
+    {
+      "scope": [
+        "keyword",
+        "storage.modifier",
+        "storage.type",
+        "storage.control.clojure",
+        "entity.name.function.clojure",
+        "entity.name.tag.yaml",
+        "support.function.node",
+        "support.type.property-name.json",
+        "punctuation.definition.template-expression"
+      ],
+      "settings": {
+        "foreground": "#E10198"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#FF9800"
+      }
+    },
+    {
+      "scope": [
+        "support.function",
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "meta.function-call",
+        "meta.instance.constructor",
+        "entity.other.attribute-name",
+        "entity.name.function",
+        "constant.keyword.clojure",
+        "variable.parameter.graphql"
+      ],
+      "settings": {
+        "foreground": "#0E0F0B"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.tag",
+        "string.quoted",
+        "string.regexp",
+        "string.interpolated",
+        "string.template",
+        "string.unquoted.plain.out.yaml",
+        "keyword.other.template"
+      ],
+      "settings": {
+        "foreground": "#609a06"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#316bcd"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#cd9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#cd3131"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#800080"
+      }
+    },
+    {
+      "scope": ["strong", "markup.heading.markdown", "markup.bold.markdown"],
+      "settings": {
+        "foreground": "#6f42c1"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.arguments",
+        "punctuation.definition.dict",
+        "meta.function-call.arguments"
+      ],
+      "settings": {
+        "foreground": "#212121"
+      }
+    },
+    {
+      "scope": [
+        "markup.underline.link",
+        "punctuation.definition.metadata.markdown"
+      ],
+      "settings": {
+        "foreground": "#609008"
+      }
+    },
+    {
+      "scope": ["beginning.punctuation.definition.list.markdown"],
+      "settings": {
+        "foreground": "#6f42c1"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.string.begin.markdown",
+        "punctuation.definition.string.end.markdown",
+        "string.other.link.title.markdown",
+        "string.other.link.description.markdown"
+      ],
+      "settings": {
+        "foreground": "#d32f2f"
+      }
+    },
+    {
+      "scope": ["variable.graphql"],
+      "settings": {
+        "foreground": "#E10198"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.selectionset.graphql"],
+      "settings": {
+        "foreground": "#6E7557"
+      }
+    },
+    {
+      "scope": [
+        "keyword.type.graphql",
+        "keyword.operation.graphql",
+        "keyword.fragment.graphql"
+      ],
+      "settings": {
+        "foreground": "#990069"
+      }
+    }
+  ]
+}
diff --git a/src/app/(development)/workroom/page.tsx b/src/app/(development)/workroom/page.tsx
index 3df0ab62c2..736cd3e4da 100644
--- a/src/app/(development)/workroom/page.tsx
+++ b/src/app/(development)/workroom/page.tsx
@@ -40,7 +40,7 @@ export default function WorkroomPage() {
   }
 
   return (
-    <main className="gql-conf-section gql-conf-container [&>p]:pt-8 [&>p]:font-mono [&>p]:text-sm [&>p]:text-neu-600">
+    <main className="gql-section gql-container [&>p]:pt-8 [&>p]:font-mono [&>p]:text-sm [&>p]:text-neu-600">
       <p>SpeakerOpengraphImage</p>
       <SpeakerOpengraphImage speaker={enisdenjo} {...dateAndLocation} />
 
diff --git a/src/app/conf/2024/page.tsx b/src/app/conf/2024/page.tsx
index e8dcc80f94..bd503604ae 100644
--- a/src/app/conf/2024/page.tsx
+++ b/src/app/conf/2024/page.tsx
@@ -127,7 +127,7 @@ export default function Page() {
                     alt={speaker.name}
                   />
                 </a>
-                <div className="opacity-1 pointer-events-none absolute bottom-0 left-0 flex h-[40px] w-[120px] justify-center bg-[rgba(0,0,0,0.6)] text-sm transition-opacity duration-300 group-hover:opacity-100 md:h-[55px] md:w-[210px] md:text-base md:opacity-0">
+                <div className="pointer-events-none absolute bottom-0 left-0 flex h-[40px] w-[120px] justify-center bg-[rgba(0,0,0,0.6)] text-sm transition-opacity duration-300 group-hover:opacity-100 md:h-[55px] md:w-[210px] md:text-base md:opacity-0">
                   <span className="mt-2.5 font-medium md:mt-3.5">
                     {speaker.name.split(" ")[0]}
                   </span>
diff --git a/src/app/conf/2025/code-of-conduct/page.tsx b/src/app/conf/2025/code-of-conduct/page.tsx
index 619061fc1f..b54efb1afc 100644
--- a/src/app/conf/2025/code-of-conduct/page.tsx
+++ b/src/app/conf/2025/code-of-conduct/page.tsx
@@ -65,7 +65,7 @@ export default function ResourcesPage() {
         </Button>
       </Hero>
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container gql-conf-section xl:mb-16 xl:mt-8">
+        <div className="gql-container gql-section xl:mb-16 xl:mt-8">
           <ServerComponentMarkdown
             markdown={markdown}
             extractToc
diff --git a/src/app/conf/2025/components/become-a-sponsor/index.tsx b/src/app/conf/2025/components/become-a-sponsor/index.tsx
index 2302ad771a..f89e6a709b 100644
--- a/src/app/conf/2025/components/become-a-sponsor/index.tsx
+++ b/src/app/conf/2025/components/become-a-sponsor/index.tsx
@@ -9,7 +9,7 @@ export function BecomeASponsor() {
   return (
     <section className="relative overflow-hidden">
       <Stripes />
-      <div className="gql-conf-container gql-conf-section xl:py-16">
+      <div className="gql-container gql-section xl:py-16">
         <header className="flex flex-col gap-x-48 gap-y-4 md:flex-row md:items-end md:justify-between">
           <div>
             <h2 className="typography-h2">Become a Sponsor</h2>
diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx
index b7084564ff..2b4b2b297a 100644
--- a/src/app/conf/2025/components/call-for-proposals.tsx
+++ b/src/app/conf/2025/components/call-for-proposals.tsx
@@ -329,7 +329,7 @@ export function CallForProposals() {
     <section
       id="speakers"
       // todo: the part with `dark:` here is temporary until we have a dark mode version of this section
-      className="gql-conf-section gql-conf-container dark:text-neu-0"
+      className="gql-section gql-container dark:text-neu-0"
     >
       <div className="flex *:basis-1/2 max-lg:flex-col">
         <div className="border-sec-dark bg-sec-light p-4 lg:border-r lg:p-8 xl:p-16">
diff --git a/src/app/conf/2025/components/cta-card-section/index.tsx b/src/app/conf/2025/components/cta-card-section/index.tsx
index e690003db7..cf7d94fc1e 100644
--- a/src/app/conf/2025/components/cta-card-section/index.tsx
+++ b/src/app/conf/2025/components/cta-card-section/index.tsx
@@ -17,7 +17,7 @@ export function CtaCardSection({
   ...rest
 }: CtaCardSectionProps) {
   return (
-    <div className="gql-conf-section">
+    <div className="gql-section">
       <section
         className="relative overflow-hidden bg-gradient-to-r from-pri-dark to-pri-base p-6 dark:from-pri-darker dark:to-pri-dark sm:p-16"
         {...rest}
diff --git a/src/app/conf/2025/components/get-your-ticket/index.tsx b/src/app/conf/2025/components/get-your-ticket/index.tsx
index 2a6e01746c..a419c5e9b6 100644
--- a/src/app/conf/2025/components/get-your-ticket/index.tsx
+++ b/src/app/conf/2025/components/get-your-ticket/index.tsx
@@ -15,7 +15,7 @@ export function GetYourTicket({ className }: { className?: string }) {
       )}
     >
       <Stripes />
-      <div className="gql-conf-container gql-conf-section relative">
+      <div className="gql-container gql-section relative">
         <header className="flex flex-wrap justify-between gap-6 md:items-end">
           <h2 className="typography-h2 whitespace-pre text-white">
             Get your ticket
diff --git a/src/app/conf/2025/components/graphql-foundation-card.tsx b/src/app/conf/2025/components/graphql-foundation-card.tsx
index ab3155f3fb..c70d76ca23 100644
--- a/src/app/conf/2025/components/graphql-foundation-card.tsx
+++ b/src/app/conf/2025/components/graphql-foundation-card.tsx
@@ -4,7 +4,7 @@ import FoundationWordmark from "../assets/graphql-foundation-wordmark.svg?svgr"
 
 export function GraphQLFoundationCard({ className }: { className?: string }) {
   return (
-    <section className={clsx("gql-conf-section", className)}>
+    <section className={clsx("gql-section", className)}>
       <div className="flex divide-neu-300 border border-neu-300 bg-neu-100 dark:divide-neu-100 dark:border-neu-100 dark:bg-neu-50 max-md:flex-col max-md:divide-y md:divide-x">
         <div className="flex items-center justify-center px-8 py-10 lg:px-16 lg:py-24">
           <FoundationWordmark className="h-[68px] text-rhodamine dark:text-current lg:h-[100px] [&_g]:fill-current" />
diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index 1c2ac61332..eeaa4bc8ad 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -38,7 +38,7 @@ export function Hero(props: HeroProps) {
     >
       <article className="relative">
         {props.stripes || <HeroStripes />}
-        <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
+        <div className="gql-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
           <div className="flex gap-10 max-md:flex-col md:justify-between">
             {props.pageName ? (
               <div>
diff --git a/src/app/conf/2025/components/image-loaded.tsx b/src/app/conf/2025/components/image-loaded.tsx
index 6e26ef4c7a..9917cf1d2e 100644
--- a/src/app/conf/2025/components/image-loaded.tsx
+++ b/src/app/conf/2025/components/image-loaded.tsx
@@ -7,9 +7,14 @@ const _cache = new Map<string, HTMLImageElement>()
 
 export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
   image: string | StaticImageData
+  fetchPriority?: "high" | "low" | "auto"
 }
 
-export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
+export function ImageLoaded({
+  image,
+  fetchPriority = "auto",
+  ...rest
+}: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
   const src = typeof image === "string" ? image : image.src
 
@@ -27,10 +32,11 @@ export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
     } else {
       img = new Image()
       img.src = src
+      img.fetchPriority = fetchPriority
       img.addEventListener("load", () => setLoaded(true))
       _cache.set(src, img)
     }
-  }, [src])
+  }, [src, fetchPriority])
 
   return <div data-loaded={alreadyLoaded || loaded} {...rest} />
 }
diff --git a/src/app/conf/2025/components/register-section/index.tsx b/src/app/conf/2025/components/register-section/index.tsx
index 8b4b18ff96..148e4c3fe5 100644
--- a/src/app/conf/2025/components/register-section/index.tsx
+++ b/src/app/conf/2025/components/register-section/index.tsx
@@ -9,7 +9,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-section flex gap-x-12 gap-y-10 py-8 max-md:flex-col sm:py-12 md:py-24 xl:gap-x-24",
+        "gql-section flex gap-x-12 gap-y-10 py-8 max-md:flex-col sm:py-12 md:py-24 xl:gap-x-24",
         className,
       )}
       {...props}
diff --git a/src/app/conf/2025/components/register-today/index.tsx b/src/app/conf/2025/components/register-today/index.tsx
index e6ab433715..193a443ad0 100644
--- a/src/app/conf/2025/components/register-today/index.tsx
+++ b/src/app/conf/2025/components/register-today/index.tsx
@@ -14,7 +14,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-section flex gap-10 max-lg:flex-col-reverse",
+        "gql-section flex gap-10 max-lg:flex-col-reverse",
         className,
       )}
     >
diff --git a/src/app/conf/2025/components/sponsors.tsx b/src/app/conf/2025/components/sponsors.tsx
index 3502d81a08..fc4074a800 100644
--- a/src/app/conf/2025/components/sponsors.tsx
+++ b/src/app/conf/2025/components/sponsors.tsx
@@ -108,7 +108,7 @@ const sponsorTiers: Tier[] = [
 
 export function Sponsors({ heading }: SponsorsProps) {
   return (
-    <section id="sponsors" className="gql-conf-section mx-auto py-16">
+    <section id="sponsors" className="gql-section mx-auto py-16">
       <h1 className="typography-h2">{heading}</h1>
 
       <div className="mt-10 md:mt-16">
diff --git a/src/app/conf/2025/components/testimonials/index.tsx b/src/app/conf/2025/components/testimonials/index.tsx
index 4ae007a082..ae03d84ecd 100644
--- a/src/app/conf/2025/components/testimonials/index.tsx
+++ b/src/app/conf/2025/components/testimonials/index.tsx
@@ -6,7 +6,7 @@ import maskBlur from "./mask.webp"
 
 export interface TestimonialsProps extends React.HTMLAttributes<HTMLElement> {}
 
-interface Testimonial {
+export interface Testimonial {
   quote: string
   author: {
     name: string
@@ -33,7 +33,7 @@ const testimonials: Testimonial[] = [
       name: "Nicolai Draslov",
       role: "Danish Agency for Digital Government",
       avatar:
-        "https://media.licdn.com/dms/image/v2/C4E03AQGlrdt3GpJI9w/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1528203207471?e=1753920000&v=beta&t=H6CMhDZFoXJxGUu4XYwC_rEX9Jjwh7OdPIDm8JaeXAU",
+        "https://vnckqn1t2xchefuj.public.blob.vercel-storage.com/nicolai.webp",
     },
   },
   {
@@ -52,7 +52,7 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
   return (
     <section
       className={clsx(
-        "gql-conf-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
+        "gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]",
         className,
       )}
       {...rest}
@@ -60,30 +60,51 @@ export function Testimonials({ className, ...rest }: TestimonialsProps) {
       <h2 className="typography-h2 text-center text-neu-800">
         How was the previous edition?
       </h2>
-      <div className="flex w-full snap-x snap-mandatory flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16">
-        {testimonials.map((testimonial, i) => (
-          <div
-            key={i}
-            className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
-          >
-            <div>
-              <p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
-                {testimonial.quote}
-              </p>
-              <AuthorNameAndRole
-                author={testimonial.author}
-                className="mt-4 max-md:hidden"
-              />
-            </div>
-            <TestimonialAuthor author={testimonial.author} />
-          </div>
-        ))}
-      </div>
+      <TestimonialsList testimonials={testimonials} />
     </section>
   )
 }
 
-function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
+export function TestimonialsList({
+  testimonials,
+  className,
+}: {
+  testimonials: Testimonial[]
+  className?: string
+}) {
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-row gap-10 overflow-x-auto px-4 py-6 lg:mt-16 lg:py-16",
+        className,
+      )}
+    >
+      {testimonials.map((testimonial, i) => (
+        <div
+          key={i}
+          className="flex max-w-full shrink-0 flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
+        >
+          <div>
+            <p className="typography-body-lg max-w-[100vw] !leading-[1.1] max-md:text-center sm:max-w-[calc(100vw-32px)] md:max-w-[544px]">
+              {testimonial.quote}
+            </p>
+            <AuthorNameAndRole
+              author={testimonial.author}
+              className="mt-4 max-md:hidden"
+            />
+          </div>
+          <TestimonialAuthor author={testimonial.author} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function TestimonialAuthor({
+  author,
+}: {
+  author: Testimonial["author"]
+}) {
   return (
     <div className="relative flex shrink-0 flex-col items-center justify-center whitespace-pre md:px-6 lg:h-full lg:px-8">
       <div className="relative bg-neu-500 dark:bg-neu-200 dark:opacity-90">
@@ -92,9 +113,10 @@ function TestimonialAuthor({ author }: { author: Testimonial["author"] }) {
           alt={author.name}
           width={128}
           height={128}
-          className="size-16 saturate-0 xl:size-32"
+          className="size-16 saturate-[.1] xl:size-32"
+          fetchPriority="low"
         />
-        <div className="absolute inset-0 z-[1] bg-pri-darker mix-blend-plus-lighter" />
+        <div className="absolute inset-0 z-[1] bg-pri-darker opacity-80 mix-blend-plus-lighter" />
         <Stripes />
       </div>
       <AuthorNameAndRole author={author} className="contents md:hidden" />
diff --git a/src/app/conf/2025/components/top-minds/index.tsx b/src/app/conf/2025/components/top-minds/index.tsx
index b276d384cb..e2d7c7cac5 100644
--- a/src/app/conf/2025/components/top-minds/index.tsx
+++ b/src/app/conf/2025/components/top-minds/index.tsx
@@ -71,7 +71,7 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "gql-conf-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
+        "gql-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
         className,
       )}
       {...rest}
diff --git a/src/app/conf/2025/components/venue/index.tsx b/src/app/conf/2025/components/venue/index.tsx
index a758109bdb..51743e35df 100644
--- a/src/app/conf/2025/components/venue/index.tsx
+++ b/src/app/conf/2025/components/venue/index.tsx
@@ -17,7 +17,7 @@ export function Venue(props: VenueProps) {
         backgroundBlendMode: "overlay, normal",
       }}
       className={clsx(
-        "gql-conf-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(180deg,#344303_0%,#344303_120%),var(--photo)] md:bg-cover",
+        "gql-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(180deg,#344303_0%,#344303_120%),var(--photo)] md:bg-cover",
         props.className,
       )}
     >
diff --git a/src/app/conf/2025/components/what-to-expect.tsx b/src/app/conf/2025/components/what-to-expect.tsx
index 0bfd71a116..9d4585ba16 100644
--- a/src/app/conf/2025/components/what-to-expect.tsx
+++ b/src/app/conf/2025/components/what-to-expect.tsx
@@ -11,7 +11,7 @@ export default function WhatToExpectSection({
 }: WhatToExpectSectionProps) {
   return (
     <section
-      className={clsx("gql-conf-section flex gap-6 max-md:flex-col", className)}
+      className={clsx("gql-section flex gap-6 max-md:flex-col", className)}
       {...rest}
     >
       <h3 className="typography-h2 md:flex-1">What to expect</h3>
diff --git a/src/app/conf/2025/faq.tsx b/src/app/conf/2025/faq.tsx
index 9696270e18..a95deaddd2 100644
--- a/src/app/conf/2025/faq.tsx
+++ b/src/app/conf/2025/faq.tsx
@@ -203,7 +203,7 @@ export function FAQ({ className }: { className?: string }) {
     <section
       id="faq"
       className={clsx(
-        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 xl:py-16 2xl:gap-36",
+        "gql-section flex gap-10 max-lg:flex-col xl:gap-24 xl:py-16 2xl:gap-36",
         className,
       )}
     >
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 106881110a..18a5b7e836 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -33,7 +33,7 @@ export default function Page() {
           Get your tickets
         </Button>
       </Hero>
-      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+      <div className="gql-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
         <MarqueeRows
           variant="primary"
           className="pt-4 max-sm:pb-1 sm:pt-6 md:space-y-2 md:pt-12 xl:pt-16"
@@ -47,12 +47,12 @@ export default function Page() {
         <GetYourTicket />
       </div>
       <div className="gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <RegisterSection />
           <Sponsors heading="Sponsors" />
         </div>
         <BecomeASponsor />
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <CallForProposals />
           <MarqueeRows
             variant="secondary"
diff --git a/src/app/conf/2025/resources/page.tsx b/src/app/conf/2025/resources/page.tsx
index 9790a6e736..232568ec3f 100644
--- a/src/app/conf/2025/resources/page.tsx
+++ b/src/app/conf/2025/resources/page.tsx
@@ -36,7 +36,7 @@ export default function ResourcesPage() {
         </Button>
       </Hero>
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
-        <div className="gql-conf-container gql-conf-section gql-prose xl:mb-16 xl:mt-8">
+        <div className="gql-container gql-section gql-prose xl:mb-16 xl:mt-8">
           <Resources />
         </div>
       </main>
diff --git a/src/app/conf/2025/schedule/[id]/page.tsx b/src/app/conf/2025/schedule/[id]/page.tsx
index c64649d3c6..055ca10fa0 100644
--- a/src/app/conf/2025/schedule/[id]/page.tsx
+++ b/src/app/conf/2025/schedule/[id]/page.tsx
@@ -79,8 +79,8 @@ export default function SessionPage({ params }: SessionProps) {
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
-          <div className="gql-conf-container">
-            <div className="gql-conf-section !py-0 max-xs:px-0">
+          <div className="gql-container">
+            <div className="gql-section !py-0 max-xs:px-0">
               <div className="border-neu-200 pt-8 dark:border-neu-100 xs:border-x 2xl:pt-16">
                 <SessionHeader
                   event={session}
@@ -136,7 +136,7 @@ export default function SessionPage({ params }: SessionProps) {
         </div>
 
         <div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
-          <div className="gql-conf-container">
+          <div className="gql-container">
             <CtaCardSection
               title="Get your ticket"
               description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"
diff --git a/src/app/conf/2025/schedule/page.tsx b/src/app/conf/2025/schedule/page.tsx
index 3afa0d26d6..9192785566 100644
--- a/src/app/conf/2025/schedule/page.tsx
+++ b/src/app/conf/2025/schedule/page.tsx
@@ -33,7 +33,7 @@ export default function SchedulePage() {
           </Button>
         </div>
       </Hero>
-      <div className="gql-conf-container gql-conf-section 2xl:!px-24">
+      <div className="gql-container gql-section 2xl:!px-24">
         <ScheduleList
           eventsColors={eventsColors}
           year={year}
@@ -42,7 +42,7 @@ export default function SchedulePage() {
         />
       </div>
       <div className="gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <FAQ />
 
           <CtaCardSection
diff --git a/src/app/conf/2025/speakers/[id]/page.tsx b/src/app/conf/2025/speakers/[id]/page.tsx
index 780483fb69..d2b66dd124 100644
--- a/src/app/conf/2025/speakers/[id]/page.tsx
+++ b/src/app/conf/2025/speakers/[id]/page.tsx
@@ -59,8 +59,8 @@ export default function SpeakerPage({ params }: SpeakerProps) {
       <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-neu-50/40 dark:bg-neu-0 dark:before:bg-blk/30" />
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
-          <div className="gql-conf-container">
-            <div className="gql-conf-section !py-0 max-xs:px-0">
+          <div className="gql-container">
+            <div className="gql-section !py-0 max-xs:px-0">
               <div className="border-neu-200 dark:border-neu-100 xs:border-x">
                 <SpeakerHeader
                   speaker={speaker}
@@ -113,7 +113,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
         </div>
 
         <div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
-          <div className="gql-conf-container">
+          <div className="gql-container">
             <CtaCardSection
               title="Get your ticket"
               description="Join three transformative days of expert insights and innovation to shape the next decade of APIs!"
diff --git a/src/app/conf/2025/speakers/page.tsx b/src/app/conf/2025/speakers/page.tsx
index c28c921119..ab0d9911a9 100644
--- a/src/app/conf/2025/speakers/page.tsx
+++ b/src/app/conf/2025/speakers/page.tsx
@@ -29,7 +29,7 @@ export default function Page() {
 
       {/* <NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" /> */}
       {/* <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30"> */}
-      <div className="gql-conf-container gql-conf-section">
+      <div className="gql-container gql-section">
         <div className="grid lg:grid-cols-2 lg:gap-5 max-lg:[&>:not(:first-child)]:border-t-0">
           {speakers.map(speaker => (
             <SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
@@ -38,7 +38,7 @@ export default function Page() {
       </div>
 
       <div className="gql-conf-navbar-strip border-t border-neu-200 bg-neu-0 py-8 text-neu-900 before:bg-white/40 dark:border-neu-100 before:dark:bg-blk/30 xl:py-16">
-        <div className="gql-conf-container">
+        <div className="gql-container">
           <FAQ />
 
           <CtaCardSection
diff --git a/src/app/conf/_components/footer.tsx b/src/app/conf/_components/footer.tsx
index cf764ae819..26a7b711d7 100644
--- a/src/app/conf/_components/footer.tsx
+++ b/src/app/conf/_components/footer.tsx
@@ -2,6 +2,7 @@ import { SocialIcons } from "./social-icons"
 import NextLink from "next/link"
 import { ReactNode } from "react"
 import { clsx } from "clsx"
+
 import { Badge } from "./badge"
 
 export function Footer({
diff --git a/src/app/conf/_components/social-icons.tsx b/src/app/conf/_components/social-icons.tsx
index db65b94e61..accfe38eeb 100644
--- a/src/app/conf/_components/social-icons.tsx
+++ b/src/app/conf/_components/social-icons.tsx
@@ -13,10 +13,15 @@ const anchorProps = {
   rel: "noreferrer",
 }
 
+export interface SocialIconsProps extends React.HTMLAttributes<HTMLDivElement> {
+  count?: 4 | 6
+}
+
 export function SocialIcons({
   className,
+  count = 6,
   ...rest
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: SocialIconsProps) {
   return (
     <div
       className={clsx(
@@ -25,27 +30,48 @@ export function SocialIcons({
       )}
       {...rest}
     >
-      <a href="https://github.com/graphql" {...anchorProps}>
+      <a href="https://github.com/graphql" aria-label="GitHub" {...anchorProps}>
         <GitHubIcon />
       </a>
-      <a href="https://discord.graphql.org" {...anchorProps}>
+      <a
+        href="https://discord.graphql.org"
+        aria-label="Discord"
+        {...anchorProps}
+      >
         <DiscordIcon className="fill-current" />
       </a>
-      <a href="https://twitter.com/graphql" {...anchorProps}>
+      <a
+        href="https://twitter.com/graphql"
+        aria-label="Twitter"
+        {...anchorProps}
+      >
         <TwitterIcon />
       </a>
       <a
         href="https://linkedin.com/company/graphql-foundation"
+        aria-label="LinkedIn"
         {...anchorProps}
       >
         <LinkedInIcon />
       </a>
-      <a href="https://youtube.com/@GraphQLFoundation" {...anchorProps}>
-        <YouTubeIcon className="fill-current" />
-      </a>
-      <a href="https://facebook.com/groups/graphql.community" {...anchorProps}>
-        <FacebookIcon />
-      </a>
+      {count === 6 && (
+        <>
+          <a
+            href="https://youtube.com/@GraphQLFoundation"
+            aria-label="YouTube"
+            {...anchorProps}
+          >
+            <YouTubeIcon className="fill-current" />
+          </a>
+          <a
+            href="https://facebook.com/groups/graphql.community"
+            aria-label="Facebook"
+            {...anchorProps}
+          >
+            <FacebookIcon />
+          </a>
+        </>
+      )}
     </div>
   )
 }
diff --git a/src/app/conf/_design-system/pixelarticons/bullseye.svg b/src/app/conf/_design-system/pixelarticons/bullseye.svg
new file mode 100644
index 0000000000..f165de50af
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/bullseye.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  fill="currentColor"
+>
+  <path
+    d="M29.999 36.667H9.99902V33.333H29.999V36.667ZM9.99902 33.333H6.66602V30H9.99902V33.333ZM33.332 33.333H29.999V30H33.332V33.333ZM6.66602 30H3.33203V10H6.66602V30ZM26.666 30H13.332V26.667H26.666V30ZM36.666 30H33.332V13.333H36.666V30ZM13.332 26.667H9.99902V13.333H13.332V26.667ZM29.999 26.667H26.666V20H29.999V26.667ZM23.332 23.333H16.666V16.667H23.332V23.333ZM26.666 16.667H23.332V13.333H26.666V16.667ZM19.999 13.333H13.332V10H19.999V13.333ZM29.999 13.333H26.666V10H29.999V13.333ZM9.99902 10H6.66602V6.66699H9.99902V10ZM33.332 6.66699H36.666V10H29.999V3.33301H33.332V6.66699ZM26.666 6.66699H9.99902V3.33301H26.666V6.66699Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/check.svg b/src/app/conf/_design-system/pixelarticons/check.svg
new file mode 100644
index 0000000000..d59c8683a9
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/check.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+>
+  <path
+    d="M10 18H8V16H10V18ZM8 16H6V14H8V16ZM12 14V16H10V14H12ZM6 14H4V12H6V14ZM14 14H12V12H14V14ZM16 12H14V10H16V12ZM18 10H16V8H18V10ZM20 8H18V6H20V8Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/gift.svg b/src/app/conf/_design-system/pixelarticons/gift.svg
new file mode 100644
index 0000000000..1154911dd3
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/gift.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  fill="currentColor"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.33398 5H31.6673v6.6667h5v10H33.334V35H6.66732V21.6667H3.33398v-10h5V5Zm3.33332 6.6667h6.6667V8.33333h-6.6667v3.33337Zm10-3.33337v3.33337h6.6667V8.33333h-6.6667ZM18.334 15H6.66732v3.3333H18.334V15Zm3.3333 3.3333V15H33.334v3.3333H21.6673Zm-3.3333 3.3334h-8.3333v10h8.3333v-10Zm3.3333 10v-10h8.3334v10h-8.3334Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/info.svg b/src/app/conf/_design-system/pixelarticons/info.svg
new file mode 100644
index 0000000000..6eb5979a70
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/info.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.5 2.5H4.16667V17.5H2.5V2.5ZM15.8336 2.50003H4.16707V4.16669H15.8336V15.8334H4.16707V17.5H15.8337V17.5H17.5003V2.5H15.8336V2.50003ZM9.16692 7.50008H10.8336V5.83341H9.16692V7.50008ZM10.8336 14.1667H9.16692V9.16669H10.8336V14.1667Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/modem.svg b/src/app/conf/_design-system/pixelarticons/modem.svg
new file mode 100644
index 0000000000..7264407b31
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/modem.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 24 24" fill="currentColor">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 1h-4v2h-2v2h2V3h4v2h2V3h-2V1Zm-3 4h2v2h6v16h-2v-7H4v7H2V7h12V5Zm6 9V9H4v5h16Zm-4-3h2v2h-2v-2Zm-2 0h-2v2h2v-2Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 1h-4v2h-2v2h2V3h4v2h2V3h-2V1Zm-3 4h2v2h6v16H2V7h12V5Zm6 16v-5H4v5h16Zm0-7V9H4v5h16Zm-4-3h2v2h-2v-2Zm2 7h-2v2h2v-2Zm-6-7h2v2h-2v-2Zm2 7h-2v2h2v-2Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/search.svg b/src/app/conf/_design-system/pixelarticons/search.svg
new file mode 100644
index 0000000000..0eb37b1b91
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/search.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  fill="currentColor"
+>
+  <path
+    d="M36.666 36.667H33.332V33.333H36.666V36.667ZM33.332 33.333H29.999V30H33.332V33.333ZM23.332 30H9.99902V26.667H23.332V30ZM29.999 30H26.666V26.667H29.999V30ZM9.99902 26.667H6.66602V23.333H9.99902V26.667ZM26.666 26.667H23.332V23.333H26.666V26.667ZM6.66602 23.333H3.33203V10H6.66602V23.333ZM29.999 23.333H26.666V10H29.999V23.333ZM9.99902 10H6.66602V6.66699H9.99902V10ZM26.666 10H23.332V6.66699H26.666V10ZM23.332 6.66699H9.99902V3.33301H23.332V6.66699Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/tournament.svg b/src/app/conf/_design-system/pixelarticons/tournament.svg
new file mode 100644
index 0000000000..7d81515d35
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/tournament.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  fill="currentColor"
+>
+  <path
+    d="M14.999 8.33301H26.666V18.333H36.666V21.667H26.666V31.667H14.999V36.667H3.33203V33.333H11.666V26.667H3.33203V23.333H14.999V28.333H23.332V11.667H14.999V16.667H3.33203V13.333H11.666V6.66699H3.33203V3.33301H14.999V8.33301Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/pixelarticons/zap.svg b/src/app/conf/_design-system/pixelarticons/zap.svg
new file mode 100644
index 0000000000..659729363b
--- /dev/null
+++ b/src/app/conf/_design-system/pixelarticons/zap.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  fill="currentColor"
+>
+  <path
+    d="M6.66602 21.667H19.999V31.667H23.332V35H19.999V38.333H16.666V25H3.33203V18.333H6.66602V21.667ZM26.666 31.667H23.332V28.333H26.666V31.667ZM29.999 28.333H26.666V25H29.999V28.333ZM33.332 25H29.999V21.667H33.332V25ZM23.332 15H36.666V21.667H33.332V18.333H19.999V8.33301H16.666V5H19.999V1.66699H23.332V15ZM9.99902 18.333H6.66602V15H9.99902V18.333ZM13.332 15H9.99902V11.667H13.332V15ZM16.666 11.667H13.332V8.33301H16.666V11.667Z"
+  />
+</svg>
diff --git a/src/app/conf/_design-system/section-label.tsx b/src/app/conf/_design-system/section-label.tsx
new file mode 100644
index 0000000000..7ed64e7e8d
--- /dev/null
+++ b/src/app/conf/_design-system/section-label.tsx
@@ -0,0 +1,25 @@
+import { clsx } from "clsx"
+import { ChevronRight } from "./pixelarticons/chevron-right"
+
+export function SectionLabel({
+  children,
+  className,
+  ...rest
+}: {
+  children: React.ReactNode
+  className?: string
+  rest?: React.HTMLAttributes<HTMLSpanElement>
+}) {
+  return (
+    <span
+      className={clsx(
+        "flex shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base dark:text-pri-light",
+        className,
+      )}
+      {...rest}
+    >
+      <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
+      {children}
+    </span>
+  )
+}
diff --git a/src/app/conf/_design-system/utils/isSpanElement.tsx b/src/app/conf/_design-system/utils/isSpanElement.tsx
new file mode 100644
index 0000000000..45a0ebc96d
--- /dev/null
+++ b/src/app/conf/_design-system/utils/isSpanElement.tsx
@@ -0,0 +1,11 @@
+import { ReactElement } from "react"
+
+export function isSpanElement(
+  child: React.ReactNode,
+): child is ReactElement<{ children: React.ReactNode }> {
+  return (
+    typeof child === "object" &&
+    !!child &&
+    (child as ReactElement).type === "span"
+  )
+}
diff --git a/src/app/conf/_design-system/utils/throttle.tsx b/src/app/conf/_design-system/utils/throttle.tsx
new file mode 100644
index 0000000000..c8646123e0
--- /dev/null
+++ b/src/app/conf/_design-system/utils/throttle.tsx
@@ -0,0 +1,10 @@
+export function throttle(fn: () => void, delay: number) {
+  let timeout: NodeJS.Timeout | null = null
+  return () => {
+    if (timeout) return
+    timeout = setTimeout(() => {
+      fn()
+      timeout = null
+    }, delay)
+  }
+}
diff --git a/src/app/conf/_design-system/utils/useOnClickOutside.tsx b/src/app/conf/_design-system/utils/useOnClickOutside.tsx
new file mode 100644
index 0000000000..d48fb39dd4
--- /dev/null
+++ b/src/app/conf/_design-system/utils/useOnClickOutside.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from "react"
+
+export function useOnClickOutside(
+  refs: React.RefObject<HTMLElement | null>[],
+  handler: (event: MouseEvent) => void,
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      const path = event.composedPath()
+      if (refs.every(ref => !ref.current || !path.includes(ref.current))) {
+        handler(event)
+        return
+      }
+    }
+
+    document.addEventListener("click", listener)
+    return () => document.removeEventListener("click", listener)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}
diff --git a/src/app/env.d.ts b/src/app/env.d.ts
index 9692f82cd7..57835bb125 100644
--- a/src/app/env.d.ts
+++ b/src/app/env.d.ts
@@ -12,7 +12,7 @@ declare module "*.svg?svgr" {
   export default content
 }
 
-declare module "*.mdx?raw" {
+declare module "*?raw" {
   const content: string
   export default content
 }
diff --git a/src/components/code-blocks/index.tsx b/src/components/code-blocks/index.tsx
index b130879a76..dd58a6679c 100644
--- a/src/components/code-blocks/index.tsx
+++ b/src/components/code-blocks/index.tsx
@@ -1,4 +1,8 @@
-import { Code, Pre } from "nextra/components"
+import { Code } from "nextra/components"
+import { ComponentPropsWithoutRef } from "react"
+import { clsx } from "clsx"
+
+import { Pre } from "@/components/pre"
 
 import _CodeA from "./describe-your-data.mdx"
 import _CodeB from "./ask-for-what-you-want.mdx"
@@ -8,13 +12,13 @@ import _Code1 from "./code1.mdx"
 import _Code2 from "./code2.mdx"
 import _Code3 from "./code3.mdx"
 import _Code4 from "./code4.mdx"
-import _V1 from "./v1.mdx"
-import _V2 from "./v2.mdx"
-import _V3 from "./v3.mdx"
-import _V4 from "./v4.mdx"
-import _V5 from "./v5.mdx"
-import _Query from "./query.mdx"
-import _Schema from "./schema.mdx"
+export { default as V1 } from "./v1.mdx"
+export { default as V2 } from "./v2.mdx"
+export { default as V3 } from "./v3.mdx"
+export { default as V4 } from "./v4.mdx"
+export { default as V5 } from "./v5.mdx"
+export { default as Query } from "./query.mdx"
+export { default as Schema } from "./schema.mdx"
 import _QueryHeroFriends from "./query.hero-friends.mdx"
 import _ResponseHeroFriends from "./response.hero-friends.mdx"
 import _PredictableResult from "./predictable-result.mdx"
@@ -24,6 +28,17 @@ const components = {
   code: Code,
 }
 
+export const LandingPagePre = (props: ComponentPropsWithoutRef<typeof Pre>) => (
+  <Pre
+    {...props}
+    className={clsx(
+      props.className,
+      "!bg-neu-0/[.48] backdrop-blur-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:size-0 max-xs:[&_span]:!text-xs",
+    )}
+    tabIndex={-1}
+  />
+)
+
 // Since we use `layout: 'raw'` in index page, only `<a />` element will be replaced, but not
 // `<pre />` and `<code />`, for this reason we pass `components` to each MDX partial file.
 // This code could be removed in Nextra v4
@@ -33,22 +48,13 @@ export const Code2 = () => <_Code2 components={components} />
 export const Code3 = () => <_Code3 components={components} />
 export const Code4 = () => <_Code4 components={components} />
 
-export const Query = () => <_Query components={components} />
-export const Schema = () => <_Schema components={components} />
 export const CodeA = () => <_CodeA components={components} />
 export const CodeB = () => <_CodeB components={components} />
 export const CodeC = () => <_CodeC components={components} />
-export const V1 = () => <_V1 components={components} />
-export const V2 = () => <_V2 components={components} />
-export const V3 = () => <_V3 components={components} />
-export const V4 = () => <_V4 components={components} />
-export const V5 = () => <_V5 components={components} />
+
 export const QueryHeroFriends = () => (
   <_QueryHeroFriends components={components} />
 )
 export const ResponseHeroFriends = () => (
   <_ResponseHeroFriends components={components} />
 )
-export const PredictableResult = () => (
-  <_PredictableResult components={components} />
-)
diff --git a/src/components/footer/conference-footer-box.tsx b/src/components/footer/conference-footer-box.tsx
new file mode 100644
index 0000000000..69016a8c25
--- /dev/null
+++ b/src/components/footer/conference-footer-box.tsx
@@ -0,0 +1,42 @@
+import { clsx } from "clsx"
+
+import { Anchor } from "@/app/conf/_design-system/anchor"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+interface ConferenceFooterBoxProps {
+  href: string
+  className?: string
+}
+
+export function ConferenceFooterBox({
+  href,
+  className,
+}: ConferenceFooterBoxProps) {
+  return (
+    <Anchor
+      href={href}
+      className={clsx(
+        "dark gql-focus-visible group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
+        className,
+      )}
+    >
+      <div className="flex flex-1 flex-col gap-4 border-b border-pri-lighter p-4 dark:border-pri-light/50">
+        <h2 className="font-mono text-2xl uppercase leading-none md:text-3xl">
+          <span className="max-xs:hidden">Join</span> GraphQLConf 2025
+        </h2>
+      </div>
+
+      <div className="typography-body-sm flex font-sans">
+        <div className="flex-1 justify-center border-r border-pri-lighter p-4 dark:border-pri-light/50">
+          September <span className="whitespace-nowrap">08–10</span>
+          <br />
+          Amsterdam, Netherlands
+        </div>
+
+        <div className="flex w-[min(calc(25%-.5px),73.5px)] items-center justify-center">
+          <ArrowDownIcon className="size-10 -rotate-90 text-pri-lighter transition group-hover:translate-x-0.5 group-hover:text-neu-900" />
+        </div>
+      </div>
+    </Anchor>
+  )
+}
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
new file mode 100644
index 0000000000..90116e2290
--- /dev/null
+++ b/src/components/footer/index.tsx
@@ -0,0 +1,240 @@
+import NextLink from "next/link"
+import { useConfig, useThemeConfig } from "nextra-theme-docs"
+
+import { GraphQLWordmarkLogo } from "@/icons"
+import { SocialIcons } from "@/app/conf/_components/social-icons"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import blurBean from "@/app/conf/2025/components/footer/blur-bean.webp"
+
+import { renderComponent } from "../utils"
+import { Anchor } from "@/app/conf/_design-system/anchor"
+import type { ReactNode } from "react"
+import { ConferenceFooterBox } from "./conference-footer-box"
+
+interface FooterLink {
+  title: ReactNode
+  route: string
+}
+
+interface FooterSection {
+  title?: ReactNode
+  route?: string
+  links: FooterLink[]
+}
+
+const FOOTER_SECTIONS: FooterSection[] = [
+  {
+    title: "Learn",
+    route: "/learn",
+    links: [
+      { title: "Introduction", route: "/learn" },
+      { title: "Best Practices", route: "/learn/best-practices" },
+      {
+        title: (
+          <span>
+            <span className="max-md:hidden">Frequently Asked Questions</span>
+            <span className="md:hidden">FAQ</span>
+          </span>
+        ),
+        route: "/faq",
+      },
+      {
+        title: "Training Courses",
+        route: "/community/resources/training-courses",
+      },
+    ],
+  },
+  {
+    title: "Code",
+    links: [
+      { title: "GitHub", route: "https://github.com/graphql" },
+      {
+        title: "Specification",
+        route: "https://spec.graphql.org",
+      },
+      { title: "Libraries & Tools", route: "/code" },
+      {
+        title: "Services & Vendors",
+        route: "/code/?tags=services",
+      },
+    ],
+  },
+  {
+    title: "Community",
+    links: [
+      {
+        title: "Resources",
+        route: "/community/resources/official-channels",
+      },
+      {
+        title: "Events & Meetups",
+        route: "/community/events",
+      },
+      {
+        title: (
+          <span>
+            Contribute<span className="max-md:hidden"> to GraphQL</span>
+          </span>
+        ),
+        route: "/community/contribute/essential-links",
+      },
+      { title: "Landscape", route: "https://landscape.graphql.org" },
+      { title: "Shop", route: "https://store.graphql.org/" },
+    ],
+  },
+  {
+    title: "& More",
+    links: [
+      { title: "Blog", route: "/blog" },
+      {
+        title: "GraphQL Foundation",
+        route: "/foundation",
+      },
+      {
+        title: "Community Grant",
+        route: "/foundation/community-grant",
+      },
+      {
+        title: "Brand Guidelines",
+        route: "/brand",
+      },
+      {
+        title: "Code of Conduct",
+        route: "/codeofconduct",
+      },
+    ],
+  },
+]
+
+const CONFERENCE_YEAR = 2025
+const HAS_CONFERENCE_BOX = true
+
+export function Footer() {
+  const themeConfig = useThemeConfig()
+
+  return (
+    <footer className="relative !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
+      <Stripes />
+
+      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x">
+        <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:p-6 2xl:px-10">
+          <NextLink href="/" className="nextra-logo flex items-center">
+            <GraphQLWordmarkLogo className="h-6" title="GraphQL" />
+          </NextLink>
+          <div className="typography-menu flex items-center *:rounded-none dark:*:text-neu-900 md:hidden">
+            {renderComponent(themeConfig.themeSwitch.component)}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-px bg-neu-400 py-px dark:bg-neu-100 lg:grid-cols-5">
+          {FOOTER_SECTIONS.map((section, i) => (
+            <div
+              className="typography-menu relative bg-neu-100 py-4 dark:bg-neu-0 lg:py-6 3xl:py-10"
+              key={i}
+            >
+              {section.title && (
+                <h3 className="font-bold lg:mb-4 3xl:mb-10">
+                  {section.route ? (
+                    <Anchor
+                      className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
+                      href={section.route}
+                    >
+                      {section.title}
+                    </Anchor>
+                  ) : (
+                    <span className="block p-4 md:px-6 2xl:px-10">
+                      {section.title}
+                    </span>
+                  )}
+                </h3>
+              )}
+              {section.links.map((link, i) => (
+                <Anchor
+                  key={i}
+                  href={link.route}
+                  className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
+                >
+                  {link.title}
+                </Anchor>
+              ))}
+            </div>
+          ))}
+          <div className="flex flex-col max-lg:contents">
+            {HAS_CONFERENCE_BOX && (
+              <ConferenceFooterBox
+                href={`/conf/${CONFERENCE_YEAR}`}
+                className="z-[2] col-span-full flex-1 max-lg:row-start-1"
+              />
+            )}
+            <SocialIcons
+              count={4}
+              className="gql-all-anchors-focusable col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:!-outline-offset-[6px] [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
+            />
+          </div>
+        </div>
+
+        <div className="relative flex items-center justify-between gap-4 p-4 max-md:justify-center md:px-6 2xl:px-10">
+          {themeConfig.darkMode && (
+            // todo: new theme switch component
+            <div className="typography-menu flex items-center *:rounded-none dark:*:text-neu-900 max-md:hidden">
+              {renderComponent(themeConfig.themeSwitch.component)}
+            </div>
+          )}
+          <p className="typography-body-xs flex flex-col text-pretty max-md:gap-5">
+            {renderComponent(themeConfig.footer.content)}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      role="presentation"
+      // prettier-ignore
+      // false positive
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0 z-[1]
+        [--start-1:rgba(255,204,239,.05)]
+        [--end-1:hsl(var(--color-pri-base)/.8)]
+        dark:[--start-1:hsl(var(--color-pri-darker))]
+        dark:[--end-1:hsl(var(--color-pri-base)/.9)]
+
+        [--start-2:transparent]
+        [--end-2:hsl(var(--color-pri-base)/.6)]
+        dark:[--start-2:rgba(255,204,239,.1)]
+        dark:[--end-2:hsl(var(--color-pri-base)/.8)]
+
+        mix-blend-darken
+        dark:mix-blend-lighten
+
+        max-sm:![mask-size:300vw_200px]
+        max-sm:![mask-position:center_calc(100%-100px)]
+
+        sm:max-lg:![mask-origin:bottom]
+        sm:max-lg:![mask-size:250%_300px]
+        sm:max-lg:![mask-position:center_calc(100%-30px)]
+
+        max-lg:rotate-180
+      "
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskPosition: "center 260px",
+        WebkitMaskPosition: "center 260px",
+        maskSize: "200% 100%",
+        WebkitMaskSize: "200% 100%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskOrigin: "top",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_0%,var(--end-1)_200%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_200%)]"
+      />
+    </div>
+  )
+}
diff --git a/src/components/index-page/bring-your-own-code.tsx b/src/components/index-page/bring-your-own-code.tsx
deleted file mode 100644
index f69098fbb1..0000000000
--- a/src/components/index-page/bring-your-own-code.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Code1, Code2, Code3, Code4 } from "@/components/code-blocks"
-import { InfiniteMovingCards } from "./infinite-moving-cards"
-
-export function BringYourOwnCode() {
-  return (
-    <>
-      <section className="conf-block container" id="bring-your-own-code">
-        <div className="mx-auto text-center">
-          <h2>Bring your own data and code</h2>
-          {/*Illustration of each field becoming a function?]*/}
-          <p className="mx-auto lg:w-2/3">
-            GraphQL creates a uniform API across your entire application without
-            being limited by a specific storage engine. Write GraphQL APIs that
-            leverage your existing data and code with GraphQL engines available
-            in many languages. You provide functions for each field in the type
-            system, and GraphQL calls them with optimal&nbsp;concurrency.
-          </p>
-        </div>
-      </section>
-      <InfiniteMovingCards
-        direction="right"
-        speed="normal"
-        className="mx-auto [&_div.nextra-code]:h-full [&_pre]:h-[calc(100%-48px)]"
-      >
-        <Code1 />
-        <Code2 />
-        <Code3 />
-        <Code4 />
-      </InfiniteMovingCards>
-    </>
-  )
-}
diff --git a/src/components/index-page/data-colocation/component-tree.tsx b/src/components/index-page/data-colocation/component-tree.tsx
new file mode 100644
index 0000000000..7b1aaeffcd
--- /dev/null
+++ b/src/components/index-page/data-colocation/component-tree.tsx
@@ -0,0 +1,184 @@
+import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
+import clsx from "clsx"
+import { forwardRef } from "react"
+
+const INNER_BOX_SIZE = 16
+
+interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
+  names: [string, string, string, string]
+}
+
+export const ComponentTree = forwardRef(function ComponentTree(
+  { names, className, ...rest }: ComponentTreeProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        "sector-opacity flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex flex-col">
+        <div className="flex h-12 items-center" data-sector="1">
+          <ComponentLabel className="border-neu-300 bg-neu-0 dark:border-neu-200">
+            {names[0]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4 max-[375px]:h-1" />
+
+        <div className="flex h-12 items-center" data-sector="2">
+          <ComponentLabel className="border-neu-600 bg-neu-400 dark:border-neu-200 dark:bg-neu-50">
+            {names[1]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4 max-[375px]:h-1" />
+
+        <div className="flex h-12 items-center" data-sector="3">
+          <ComponentLabel className="border-sec-base bg-sec-lighter dark:border-sec-dark dark:bg-sec-darker/50">
+            {names[2]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4 max-[375px]:h-1" />
+
+        <div className="flex h-12 items-center" data-sector="4">
+          <ComponentLabel className="border-pri-base bg-pri-lighter/40 dark:border-pri-dark dark:bg-pri-darker/50">
+            {names[3]}
+          </ComponentLabel>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center max-[375px]:-translate-y-2.5 max-[375px]:scale-[.85]">
+        <div
+          className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50"
+          data-sector="1"
+        >
+          <ModemIcon className="pointer-events-none size-6 text-neu-600" />
+        </div>
+
+        <div className="h-4 w-px bg-neu-300 dark:bg-neu-100" />
+
+        <NestedBox
+          bgColor="bg-neu-600 dark:bg-neu-200"
+          middleColor="bg-sec-base"
+          innerColor="bg-pri-base"
+          data-sector="2"
+        />
+
+        <Fork
+          className="text-neu-300 dark:text-neu-100"
+          style={{
+            width: `calc(100% - var(--gap-x) - ${INNER_BOX_SIZE * 5.75}px)`,
+          }}
+        />
+
+        <div className="flex gap-[--gap-x]">
+          <div className="flex flex-col items-center">
+            <NestedBox
+              bgColor="bg-neu-100 dark:bg-neu-50"
+              middleColor="bg-sec-base"
+              innerColor="bg-pri-base"
+              data-sector="3"
+            />
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]" data-sector="4">
+              <LeafBox />
+              <LeafBox />
+            </div>
+          </div>
+          <div className="flex flex-col items-center">
+            <NestedBox
+              bgColor="bg-neu-100 dark:bg-neu-50"
+              middleColor="bg-sec-base"
+              innerColor="bg-pri-base"
+              data-sector="3"
+            />
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]" data-sector="4">
+              <LeafBox />
+              <LeafBox />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+interface NestedBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  bgColor: string
+  middleColor?: string
+  innerColor: string
+}
+
+function NestedBox({
+  bgColor,
+  middleColor,
+  innerColor,
+  ...rest
+}: NestedBoxProps) {
+  const padding = INNER_BOX_SIZE / 2
+
+  return (
+    <div className={bgColor} style={{ padding }} {...rest}>
+      <div className={middleColor || bgColor} style={{ padding }}>
+        <div className={innerColor} style={{ padding }} />
+      </div>
+    </div>
+  )
+}
+
+interface ComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  className: string
+}
+
+function ComponentLabel({ children, className, ...rest }: ComponentLabelProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded border px-1 py-0.5 font-mono text-[10px] text-neu-800 dark:font-medium",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+function LeafBox(props: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <NestedBox
+      bgColor="bg-neu-100 dark:bg-neu-50"
+      innerColor="bg-pri-base"
+      {...props}
+    />
+  )
+}
+
+function Fork(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="81"
+      height="16"
+      viewBox="0 0 81 16"
+      stroke="currentColor"
+      fill="none"
+      preserveAspectRatio="none"
+      {...props}
+    >
+      <path d="M40.5 8V0M1 16V8m79 8V8" vectorEffect="non-scaling-stroke" />
+      <path
+        d="m1 8 79-.00001"
+        strokeLinecap="square"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/index-page/data-colocation/data-colocation.css b/src/components/index-page/data-colocation/data-colocation.css
new file mode 100644
index 0000000000..4f806441d3
--- /dev/null
+++ b/src/components/index-page/data-colocation/data-colocation.css
@@ -0,0 +1,32 @@
+.sector-opacity {
+  & [data-sector] {
+    transition: opacity 0.2s ease-in;
+    transition-delay: 0.1s;
+  }
+
+  [data-active-sector] & [data-sector] {
+    opacity: 0.4;
+    transition-delay: 0s;
+    transition-timing-function: ease-out;
+  }
+
+  [data-active-sector="1"] & [data-sector="1"],
+  [data-active-sector="2"] & [data-sector="2"],
+  [data-active-sector="3"] & [data-sector="3"],
+  [data-active-sector="4"] & [data-sector="4"] {
+    opacity: 1;
+  }
+}
+
+.sector-ring {
+  & [data-sector] {
+    @apply ring-2 ring-transparent ring-offset-2 ring-offset-transparent transition-shadow duration-200 ease-in;
+  }
+
+  [data-active-sector="1"] & [data-sector="1"],
+  [data-active-sector="2"] & [data-sector="2"],
+  [data-active-sector="3"] & [data-sector="3"],
+  [data-active-sector="4"] & [data-sector="4"] {
+    @apply ring-2 ring-neu-500 ring-offset-neu-0 duration-200 ease-out dark:ring-neu-400;
+  }
+}
diff --git a/src/components/index-page/data-colocation/data-colocation.json b/src/components/index-page/data-colocation/data-colocation.json
new file mode 100644
index 0000000000..10e69f2c2a
--- /dev/null
+++ b/src/components/index-page/data-colocation/data-colocation.json
@@ -0,0 +1,31 @@
+{
+  "friends": [
+    {
+      "name": "Trudie",
+      "profilePic": "trudie.webp",
+      "mutualFriendsCount": 120,
+      "isSubscribed": true,
+      "username": "funkytrudster89",
+      "email": "trudie@mail.com",
+      "location": "New York, USA"
+    },
+    {
+      "name": "Frances",
+      "profilePic": "frances.webp",
+      "mutualFriendsCount": 42,
+      "isSubscribed": false,
+      "username": "frannyfran12",
+      "email": "frances@mail.com",
+      "location": "Madrid, Spain"
+    },
+    {
+      "name": "Fernando",
+      "profilePic": "fernando.webp",
+      "mutualFriendsCount": 114,
+      "isSubscribed": true,
+      "username": "fern_whirlwind",
+      "email": "fernando@mail.com",
+      "location": "Amsterdam, Netherlands"
+    }
+  ]
+}
diff --git a/src/components/index-page/data-colocation/data-colocation.mdx b/src/components/index-page/data-colocation/data-colocation.mdx
new file mode 100644
index 0000000000..c59e61735b
--- /dev/null
+++ b/src/components/index-page/data-colocation/data-colocation.mdx
@@ -0,0 +1,25 @@
+```graphql
+query GetFriendList {
+  ...FriendList
+}
+
+fragment FriendList on Query {
+  friends {
+    ...FriendListItem
+  }
+}
+
+fragment FriendListItem on Friend {
+  name
+  profilePic
+  mutualFriendsCount
+  isSubscribed
+  ...FriendInfo
+}
+
+fragment FriendInfo on Friend {
+  username
+  email
+  location
+}
+```
diff --git a/src/components/index-page/data-colocation/friend-avatars/fernando.webp b/src/components/index-page/data-colocation/friend-avatars/fernando.webp
new file mode 100644
index 0000000000..f8491caf15
Binary files /dev/null and b/src/components/index-page/data-colocation/friend-avatars/fernando.webp differ
diff --git a/src/components/index-page/data-colocation/friend-avatars/frances.webp b/src/components/index-page/data-colocation/friend-avatars/frances.webp
new file mode 100644
index 0000000000..22729367da
Binary files /dev/null and b/src/components/index-page/data-colocation/friend-avatars/frances.webp differ
diff --git a/src/components/index-page/data-colocation/friend-avatars/index.tsx b/src/components/index-page/data-colocation/friend-avatars/index.tsx
new file mode 100644
index 0000000000..3bfa2890f0
--- /dev/null
+++ b/src/components/index-page/data-colocation/friend-avatars/index.tsx
@@ -0,0 +1,9 @@
+import trudie from "./trudie.webp"
+import frances from "./frances.webp"
+import fernando from "./fernando.webp"
+
+export const friendAvatars = {
+  trudie,
+  frances,
+  fernando,
+}
diff --git a/src/components/index-page/data-colocation/friend-avatars/trudie.webp b/src/components/index-page/data-colocation/friend-avatars/trudie.webp
new file mode 100644
index 0000000000..fd467d89b3
Binary files /dev/null and b/src/components/index-page/data-colocation/friend-avatars/trudie.webp differ
diff --git a/src/components/index-page/data-colocation/friend-list.tsx b/src/components/index-page/data-colocation/friend-list.tsx
new file mode 100644
index 0000000000..514b85b014
--- /dev/null
+++ b/src/components/index-page/data-colocation/friend-list.tsx
@@ -0,0 +1,114 @@
+import { friendAvatars } from "./friend-avatars"
+
+interface FriendList {
+  friends: FriendListItem[]
+}
+
+export function FriendList({ friends }: FriendList) {
+  return (
+    <section
+      className="overflow-hidden rounded-lg border border-neu-200 dark:border-neu-100"
+      data-sector="2"
+    >
+      <h3 className="typography-body-lg border-b border-neu-200 bg-neu-50 px-3 py-2 dark:border-neu-100 dark:bg-neu-50/50">
+        Friends
+      </h3>
+      <ul className="flex flex-col gap-6 p-3 lg:p-6 max-md:[&>*:not(:first-child)]:hidden">
+        {friends.map(friend => (
+          <FriendListItem key={friend.name} {...friend} />
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+interface FriendListItem extends FriendInfo {
+  name: string
+  profilePic: string
+  mutualFriendsCount: number
+  isSubscribed: boolean
+}
+
+export function FriendListItem({
+  isSubscribed,
+  mutualFriendsCount,
+  name,
+  profilePic,
+  ...friendInfo
+}: FriendListItem) {
+  const avatar =
+    friendAvatars[profilePic.replace(".webp", "") as keyof typeof friendAvatars]
+
+  return (
+    <li
+      className="-m-1 flex items-start gap-2 rounded-[5px] p-1"
+      data-sector="3"
+    >
+      <img
+        src={avatar.src}
+        alt=""
+        width={avatar.width}
+        height={avatar.height}
+        className="shrink-0 dark:opacity-95"
+      />
+      <div className="flex-1">
+        <div className="mb-2 flex justify-between gap-4">
+          <div>
+            <strong className="typography-body-md font-normal">{name}</strong>
+            <div className="typography-body-sm leading-[1.35] text-neu-700">
+              {mutualFriendsCount} mutual friends
+            </div>
+          </div>
+          <SubscribeIconButton />
+        </div>
+        <FriendInfo {...friendInfo} />
+      </div>
+    </li>
+  )
+}
+
+interface FriendInfo {
+  username: string
+  email: string
+  location: string
+}
+
+const friendInfoKeys: (keyof FriendInfo)[] = ["username", "email", "location"]
+
+export function FriendInfo(props: FriendInfo) {
+  return (
+    <dl
+      className="flex flex-col gap-0.5 rounded-[4px] border border-neu-100 bg-neu-50 px-1.5 py-1 dark:border-neu-50 dark:bg-neu-50/50"
+      data-sector="4"
+    >
+      {friendInfoKeys.map(key => (
+        <div
+          key={key}
+          className="typography-body-xs flex justify-between gap-4"
+        >
+          <dt className="capitalize text-neu-900">{key}</dt>
+          <dd className="text-neu-700">{props[key]}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+function SubscribeIconButton() {
+  return (
+    <div className="pointer-events-none size-8 bg-neu-50">
+      <svg width="32" height="33" viewBox="0 0 32 33" fill="currentColor">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M25.2198 14.5H23.7486V15.8333H25.2198V14.5ZM20.8052 15.8332H19.334V17.1665H20.8052V15.8332ZM22.2771 17.1668H20.8058V18.5001H22.2771V17.1668ZM22.2768 15.8332H23.748V17.1665H22.2768V15.8332Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.9991 9.8335H11.9992V11.1668H10.6661V15.1668H11.9994V11.1668H15.9991V9.8335ZM15.9991 15.1668H11.9992V16.5002H15.9991V15.1668ZM15.9993 11.1668H17.3326V15.1668H15.9993V11.1668ZM8.66602 19.1667H9.99931V17.8335H17.999V19.1668H9.99931V21.8335H17.9992V19.1667H19.3325V23.1667H19.3323V23.1668H8.66602V23.1667V21.8335V19.1667Z"
+        />
+      </svg>
+    </div>
+  )
+}
diff --git a/src/components/index-page/data-colocation/index.tsx b/src/components/index-page/data-colocation/index.tsx
new file mode 100644
index 0000000000..1f54f51de2
--- /dev/null
+++ b/src/components/index-page/data-colocation/index.tsx
@@ -0,0 +1,207 @@
+import * as React from "react"
+import { clsx } from "clsx"
+import { Code } from "nextra/components"
+import {
+  cloneElement,
+  ComponentPropsWithoutRef,
+  ReactElement,
+  useRef,
+} from "react"
+
+import { Pre } from "@/components/pre"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import InfoIcon from "@/app/conf/_design-system/pixelarticons/info.svg?svgr"
+import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
+import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
+
+import { ComponentTree } from "./component-tree"
+import { FriendList } from "./friend-list"
+
+import json from "./data-colocation.json"
+import Query from "./data-colocation.mdx"
+import "./data-colocation.css"
+
+const highlightedFragments = {
+  GetFriendList: 1,
+  FriendList: 2,
+  FriendListItem: 3,
+  FriendInfo: 4,
+}
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
+    <Pre
+      {...props}
+      // todo: this bg style might need to become global for all code blocks
+      className={clsx(
+        props.className,
+        "sector-opacity !border-none pr-4 leading-[1.459em] backdrop-blur-[6px] max-xs:leading-[16px] max-xs:[&_span]:!text-xs",
+      )}
+      tabIndex={-1}
+    />
+  ),
+  code: function Code2({
+    children,
+    ...rest
+  }: ComponentPropsWithoutRef<typeof Code>) {
+    const childrenTransformed = React.useMemo(() => {
+      let sectorIndex: number | undefined
+      let depth = 0
+
+      return React.Children.map(children, child => {
+        if (isSpanElement(child)) {
+          let children = (child as ReactElement).props.children
+
+          if (isSpanElement(children)) {
+            children = children.props.children
+          } else if (Array.isArray(children)) {
+            children = children
+              .map(child => {
+                if (isSpanElement(child)) {
+                  return child.props.children
+                }
+                return child
+              })
+              .join("")
+          }
+
+          if (/query|fragment/.test(children)) {
+            for (const [name, index] of Object.entries(highlightedFragments)) {
+              if (children.includes(` ${name} `)) sectorIndex = index
+              depth++
+            }
+          }
+
+          if (children.includes("{")) depth++
+          if (children.includes("}")) {
+            depth--
+            if (depth === 0) sectorIndex = undefined
+          }
+
+          if (sectorIndex) {
+            return cloneElement(child, {
+              ...child.props,
+              "data-sector": sectorIndex,
+            } as React.HTMLAttributes<HTMLSpanElement>)
+          }
+
+          return child
+        }
+
+        return child
+      })
+    }, [children])
+
+    return <Code {...rest}>{childrenTransformed}</Code>
+  },
+}
+
+export function DataColocation() {
+  const markSector = (event: React.MouseEvent<HTMLElement>) => {
+    const target =
+      event.target && event.target instanceof HTMLElement ? event.target : null
+
+    const sectorElement = target?.closest("[data-sector]") as HTMLElement | null
+    const sector = sectorElement?.dataset.sector
+
+    if (sector == null) return
+
+    const currentTarget = event.currentTarget
+
+    if (currentTarget.dataset.activeSector !== sector) {
+      currentTarget.dataset.activeSector = sector
+    }
+  }
+
+  const unmarkSector = (event: React.MouseEvent<HTMLElement>) => {
+    if (window.matchMedia("(hover: none)").matches) return
+
+    const target =
+      event.relatedTarget && event.relatedTarget instanceof HTMLElement
+        ? event.relatedTarget
+        : null
+
+    const currentTarget = event.currentTarget
+
+    const sectorElement = target?.closest("[data-sector]") as HTMLElement | null
+    const targetSector = sectorElement?.dataset.sector
+    const currentActiveSector = currentTarget.dataset.activeSector
+
+    if (!targetSector) {
+      delete currentTarget.dataset.activeSector
+      return
+    }
+
+    if (!currentActiveSector) return
+
+    currentTarget.dataset.activeSector = targetSector
+  }
+
+  const sectionRef = useRef<HTMLElement>(null)
+  const figureRef = useRef<HTMLElement>(null)
+  const componentTreeRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside([figureRef, componentTreeRef], () => {
+    const section = sectionRef.current
+    if (section && section.dataset.activeSector) {
+      delete section.dataset.activeSector
+    }
+  })
+
+  return (
+    <section
+      ref={sectionRef}
+      className="gql-container gql-section flex justify-between gap-4 max-xl:flex-wrap sm:max-xl:gap-y-8 xl:p-24"
+      onMouseOver={markSector}
+      onMouseOut={unmarkSector}
+      onPointerDown={markSector}
+    >
+      <div className="basis-full justify-between gap-x-8 sm:max-xl:flex lg:shrink">
+        <header>
+          <SectionLabel>Data Colocation</SectionLabel>
+          <h2 className="typography-h2 mt-6">Data Colocation</h2>
+          <p className="typography-body-md mt-6 text-pretty lg:max-w-[500px] xl:max-w-[438px]">
+            GraphQL fragments let you define each component’s data needs close
+            to it, and satisfy them with a single query.
+          </p>
+        </header>
+        <ComponentTree
+          ref={componentTreeRef}
+          className="mt-6 max-sm:mx-auto md:mt-8 lg:mt-12 xl:mt-16"
+          names={[
+            "Server",
+            "<FriendList>",
+            "<FriendListItem>",
+            "<FriendInfo/>",
+          ]}
+        />
+      </div>
+      <article
+        className="flex shrink-0 divide-neu-100 dark:divide-neu-50 dark:shadow-[0_.5px_20px_0_hsl(0_0_0/.25)] max-xl:w-full max-lg:gap-4 max-md:flex-col lg:rounded-lg lg:shadow-[0_.5px_20px_0_hsl(var(--color-neu-400))] lg:dark:bg-neu-50/10 xl:divide-x"
+        ref={figureRef}
+      >
+        <div className="flex shrink-0 grow flex-col gap-y-4 sm:flex-col-reverse lg:p-4">
+          <FigureInfo />
+          <div className="sector-ring">
+            <FriendList friends={json.friends} />
+          </div>
+        </div>
+        <div className="flex grow *:w-full *:rounded-lg *:border *:border-neu-100 *:bg-neu-50/50 lg:p-4">
+          <Query components={components} />
+        </div>
+      </article>
+    </section>
+  )
+}
+
+function FigureInfo() {
+  return (
+    <div className="flex w-full grow gap-2 hover-none:items-center xl:max-w-[240px]">
+      <InfoIcon className="size-4 shrink-0 hover-hover:size-5 hover-hover:translate-y-[0.5px]" />
+      <p className="typography-body-sm text-neu-800">
+        <span className="hover-hover:hidden">Click on</span>
+        <span className="hover-none:hidden">Hover over</span> the components to
+        see their GraphQL fragments.
+      </p>
+    </div>
+  )
+}
diff --git a/src/components/index-page/five-pillars.tsx b/src/components/index-page/five-pillars.tsx
new file mode 100644
index 0000000000..cad895efa7
--- /dev/null
+++ b/src/components/index-page/five-pillars.tsx
@@ -0,0 +1,83 @@
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+import GiftIcon from "@/app/conf/_design-system/pixelarticons/gift.svg?svgr"
+import TournamentIcon from "@/app/conf/_design-system/pixelarticons/tournament.svg?svgr"
+import ZapIcon from "@/app/conf/_design-system/pixelarticons/zap.svg?svgr"
+import BullseyeIcon from "@/app/conf/_design-system/pixelarticons/bullseye.svg?svgr"
+import SearchIcon from "@/app/conf/_design-system/pixelarticons/search.svg?svgr"
+
+const items = [
+  {
+    icon: GiftIcon,
+    title: "Product-centric",
+    description:
+      "GraphQL is unapologetically built for front-end engineers, aligning with their way of thinking, how views are structured and how data is consumed.",
+  },
+  {
+    icon: TournamentIcon,
+    title: "Hierarchical",
+    description:
+      "Most product development involves the creation and manipulation of view hierarchies. GraphQL queries mirror UI structures, ensuring a natural way to request data that matches the shape of the response.",
+  },
+  {
+    icon: ZapIcon,
+    title: "Strong-typing",
+    description:
+      "Every GraphQL service defines a type system, enabling tools to syntactically validate queries before execution and ensuring predictable responses.",
+  },
+  {
+    icon: BullseyeIcon,
+    title: "Client-specified response",
+    description:
+      "A GraphQL service publishes the capabilities that its clients are allowed to consume. It is the client who control the data they receive, requesting only what they need at a field level, unlike traditional fixed endpoints.",
+  },
+  {
+    icon: SearchIcon,
+    title: "Self-documenting",
+    description:
+      "GraphQL APIs can describe themselves, allowing tools and clients to query the schema for available types and capabilities. It serves as a powerful platform for building common tools and client software libraries.",
+  },
+]
+
+export function FivePillars() {
+  return (
+    <section className="gql-container gql-section xl:py-20">
+      <SectionLabel className="mb-6">design principles</SectionLabel>
+      <h2 className="typography-h2 mb-6 max-sm:text-center lg:mb-16">
+        Five Pillars of GraphQL
+      </h2>
+
+      <div className="gql-radial-gradient gap-px">
+        {items.map(({ title, icon: Icon, description }, index) => (
+          <div key={title}>
+            <div className="flex flex-col gap-2 bg-neu-0 py-6 max-sm:text-center lg:flex-row lg:items-center lg:gap-8 lg:py-8">
+              <div className="flex items-center max-sm:flex-col lg:w-[430px] lg:shrink-0 xl:w-[520px]">
+                <div className="pr-4 max-sm:p-6 md:max-lg:p-6">
+                  <Icon className="size-6 text-pri-base" />
+                </div>
+                <h3 className="typography-h3 sm:items-center lg:flex lg:h-[86px] lg:flex-1 lg:p-4">
+                  {title}
+                </h3>
+              </div>
+              <p className="typography-body-lg mt-6 lg:mt-0 lg:flex-1">
+                {description}
+              </p>
+            </div>
+            {index < items.length - 1 && <Separator />}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function Separator() {
+  return (
+    <div
+      className="h-px w-full"
+      style={{
+        background: `linear-gradient(90deg, hsl(var(--color-neu-100) / 0) 0%, hsl(var(--color-neu-300) / 0.75) 25%, hsl(var(--color-neu-400)) 50%, hsl(var(--color-neu-300) / 0.75) 75%, hsl(var(--color-neu-100) / 0) 100%)`,
+      }}
+    />
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/consistency.tsx b/src/components/index-page/graphql-advantages/consistency.tsx
new file mode 100644
index 0000000000..428bf507d4
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/consistency.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useRef } from "react"
+import { Code } from "nextra/components"
+
+import { LandingPagePre, Query, Schema } from "../../code-blocks"
+
+const components = {
+  pre: LandingPagePre,
+  code: Code,
+}
+
+export function ConsistencyFigure() {
+  const queryRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
+      "code",
+    ) as unknown as HTMLElement[]
+    let i = 0
+    const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12]
+    const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]
+    let timer: ReturnType<typeof setTimeout> | undefined = undefined
+
+    const highlightLine = () => {
+      // Reset previous line
+      queryCode.children[queryLines.at(i - 1)!].classList.remove("highlighted")
+      responseCode.children[typeLines.at(i - 1)!].classList.remove(
+        "highlighted",
+      )
+
+      queryCode.children[queryLines.at(i)!].classList.add("highlighted")
+      responseCode.children[typeLines.at(i)!].classList.add("highlighted")
+
+      // We're scrolling to top when the first line is highlighted and we're
+      // scrolling to the  bottom when the last line is highlighted.
+      const pre = responseCode.parentElement!
+      if (i === 0) {
+        pre.scrollTo({ top: 0, behavior: "smooth" })
+      } else if (i === typeLines.length - 3) {
+        pre.scrollTo({ top: pre.scrollHeight, behavior: "smooth" })
+      }
+
+      i = (i + 1) % typeLines.length
+
+      timer = setTimeout(highlightLine, 1_000 + Math.random() * 200)
+    }
+    highlightLine()
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <section
+      id="type-system"
+      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] dark:to-sec-darker/25 max-[380px]:px-0 xl:px-[46px] max-[380px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-[370px] md:[&_pre]:!h-[420px]"
+    >
+      <div
+        className="nextra-codeblocks grid w-full grid-cols-2 [&_.highlighted]:!bg-pri-lighter/50 dark:[&_.highlighted]:!bg-neu-200/10"
+        aria-hidden
+        ref={queryRef}
+      >
+        <Query components={components} />
+        <Schema components={components} />
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx
new file mode 100644
index 0000000000..5a1c8e9435
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/index.tsx
@@ -0,0 +1,131 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import { ReactNode } from "react"
+import { clsx } from "clsx"
+
+import { PrecisionFigure } from "./precision"
+import { OptimizationFigure } from "./optimization"
+import { ProductivityFigure } from "./productivity"
+import { ConsistencyFigure } from "./consistency"
+import { VersionlessFigure } from "./versionless"
+import { IntegrationFigure } from "./integration"
+
+export function GraphQLAdvantages() {
+  return (
+    <section className="overflow-x-hidden bg-neu-50 dark:bg-neu-50/25">
+      <div className="gql-container gql-section lg:py-16">
+        <SectionLabel>GraphQL advantages</SectionLabel>
+        <div className="mt-8 flex flex-col gap-y-10 lg:gap-y-16 xl:gap-y-24">
+          <Subsection
+            name="Precision"
+            bigText="Ask for what you need, get exactly that"
+            text="Send a GraphQL query to your API and get precisely the data you request — no over-fetching, no under-fetching. Predictable responses keep apps efficient and performant."
+            figure={<PrecisionFigure />}
+            cta={
+              <Button href="/learn" variant="secondary">
+                Learn GraphQL
+              </Button>
+            }
+          />
+          <Subsection
+            name="Optimization"
+            bigText="Retrieve multiple resources in one request"
+            text="GraphQL seamlessly follows relationships between data, eliminating multiple API calls. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request. Ideal for complex queries and optimizing network performance."
+            figure={<OptimizationFigure />}
+            cta={
+              <Button href="/learn" variant="secondary">
+                Read the docs
+              </Button>
+            }
+          />
+          <Subsection
+            name="Productivity"
+            bigText="Move faster with powerful, community-built tools"
+            text="Know exactly what you can request without leaving editor. Highlight potential issues before sending a query and take advantage of improved code intelligence. GraphQL makes it easy to build powerful tools. And many of them, like GraphiQL, are open source and built by the GraphQL community."
+            figure={<ProductivityFigure />}
+            cta={
+              <Button href="/community/tools-and-libraries" variant="secondary">
+                Explore GraphQL tools
+              </Button>
+            }
+          />
+          <Subsection
+            name="Consistency"
+            bigText="Build confidently with a type-safe schema"
+            text="GraphQL APIs are structured around types and fields, not endpoints. This ensures data consistency, self-documentation, and clear, actionable errors. Apps can use types to avoid writing manual parsing code."
+            figure={<ConsistencyFigure />}
+            cta={
+              <Button href="/learn/schema" variant="secondary">
+                Learn more about GraphQL schemas
+              </Button>
+            }
+          />
+          <Subsection
+            name="Versionless"
+            bigText="Evolve without versions"
+            text="Add new fields and types without impacting existing queries. Deprecate outdated fields while keeping APIs clean and future-proof. By using a single evolving version, GraphQL APIs give apps continuous access to new features and encourage more maintainable server code."
+            figure={<VersionlessFigure />}
+            cta={
+              <Button
+                href="/learn/schema-design/#versioning"
+                variant="secondary"
+              >
+                See more in docs
+              </Button>
+            }
+          />
+          <Subsection
+            name="Integration"
+            bigText="Bring your own data and code"
+            text="GraphQL is storage-agnostic — integrate databases, REST APIs, and third-party services into a single, cohesive data layer. Write GraphQL APIs that leverage your existing data and code with GraphQL engines available in many languages."
+            figure={<IntegrationFigure />}
+            cta={
+              <Button href="/learn" variant="secondary">
+                Learn more about this
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Subsection({
+  name,
+  bigText,
+  cta,
+  figure,
+  text,
+  className,
+}: {
+  name: string
+  bigText: ReactNode
+  cta: ReactNode
+  figure: ReactNode
+  text: ReactNode
+  className?: string
+}) {
+  return (
+    <article
+      className={clsx(
+        "grid gap-x-4 lg:grid-cols-2 lg:*:[grid-column:1] xl:gap-x-16 2xl:gap-x-24",
+        className,
+      )}
+    >
+      <h3 className="typography-body-sm size-min items-center justify-center bg-sec-light px-1 py-[1.5px] font-normal dark:bg-sec-darker">
+        {name}
+      </h3>
+      <strong className="typography-h3 mt-4 text-balance font-normal lg:mt-8">
+        {bigText}
+      </strong>
+      <div className="flex max-lg:mt-6 max-sm:-mx-4 lg:row-start-1 lg:row-end-6 lg:![grid-column:2]">
+        {figure}
+      </div>
+      <p className="typography-body-lg my-6 text-pretty lg:mb-4 lg:mt-8">
+        {text}
+      </p>
+      <div className="self-end lg:justify-self-start xl:mt-2">{cta}</div>
+    </article>
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/integration.tsx b/src/components/index-page/graphql-advantages/integration.tsx
new file mode 100644
index 0000000000..473cd12668
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/integration.tsx
@@ -0,0 +1,38 @@
+export function IntegrationFigure() {
+  const languages = [
+    "C SHARP",
+    "NODE.JS",
+    "PYTHON",
+    "RUST",
+    "POSTGRES",
+    "JAVASCRIPT",
+  ]
+
+  return (
+    <div
+      className="flex w-full max-w-[100vw] flex-col items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 sm:max-w-[calc(100vw-32px)] xl:min-h-[300px] xl:px-[46px]"
+      aria-hidden
+    >
+      <div className="flex w-full items-center justify-center bg-pri-lighter/50 px-10 py-6 dark:bg-pri-base/15">
+        <span className="font-mono text-xs font-normal uppercase tracking-wide text-pri-base dark:text-pri-light">
+          GRAPHQL
+        </span>
+      </div>
+
+      <div className="relative mt-5 w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_23%,white_77%,transparent)]">
+        <div className="flex animate-scroll gap-3 [--animation-duration:10s] lg:[--animation-duration:30s]">
+          {[...languages, ...languages].map((language, index) => (
+            <div
+              key={index}
+              className="flex shrink-0 items-center justify-center bg-sec-lighter px-10 py-6 dark:bg-sec-darker/30"
+            >
+              <span className="font-mono text-xs font-normal uppercase tracking-wide text-sec-dark dark:text-sec-light">
+                {language}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/optimization.svg b/src/components/index-page/graphql-advantages/optimization.svg
new file mode 100644
index 0000000000..ba18779d22
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/optimization.svg
@@ -0,0 +1,132 @@
+<svg width="622" height="320" viewBox="0 0 622 320" fill="none">
+  <line
+    x1="149.5"
+    y1="50"
+    x2="149.5"
+    y2="270"
+    stroke="#DBDED3"
+    stroke-dasharray="2 2"
+  />
+  <line
+    x1="472.5"
+    y1="50"
+    x2="472.5"
+    y2="270"
+    stroke="#DBDED3"
+    stroke-dasharray="2 2"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M473 172H149V148H473V172Z"
+    fill="url(#paint1_linear_1645_25989)"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M473 147.952L171.408 147.952V172.048L473 172.048V147.952Z"
+    fill="url(#paint2_linear_1645_25989)"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M270.108 94.3404C286.466 72.3526 308.653 60 331.788 60H473V84.0964H331.788C313.408 84.0964 295.781 93.9103 282.784 111.379L263.196 137.708C246.838 159.696 224.651 172.048 201.517 172.048H149.896V147.952H201.517C219.896 147.952 237.523 138.138 250.52 120.669L270.108 94.3404Z"
+    fill="url(#paint3_linear_1645_25989)"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M278.55 115.906C290.82 107.498 304.396 103.115 318.168 103.115L473 103.115V127.211H318.168C307.226 127.211 296.44 130.693 286.692 137.373L254.754 159.259C242.484 167.666 228.908 172.049 215.136 172.049H149.896V147.953H215.136C226.078 147.953 236.864 144.471 246.612 137.791L278.55 115.906Z"
+    fill="url(#paint4_linear_1645_25989)"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M278.55 204.094C290.82 212.502 304.396 216.885 318.168 216.885H473V192.789H318.168C307.226 192.789 296.44 189.307 286.692 182.627L254.754 160.741C242.484 152.334 228.908 147.951 215.136 147.951H149.896V172.047H215.136C226.078 172.047 236.864 175.529 246.612 182.209L278.55 204.094Z"
+    fill="url(#paint5_linear_1645_25989)"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M269.211 225.66C285.57 247.647 307.757 260 330.891 260H472.965V235.904H330.891C312.511 235.904 294.884 226.09 281.888 208.621L262.3 182.292C245.941 160.304 223.754 147.952 200.62 147.952H149V172.048H200.62C219 172.048 236.627 181.862 249.623 199.331L269.211 225.66Z"
+    fill="url(#paint6_linear_1645_25989)"
+  />
+  <defs>
+    <linearGradient
+      id="paint1_linear_1645_25989"
+      x1="473"
+      y1="160"
+      x2="149"
+      y2="160"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FF99DF" stop-opacity="0" />
+      <stop offset="1" stop-color="#FF99DF" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_1645_25989"
+      x1="474.89"
+      y1="160"
+      x2="171.408"
+      y2="160"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#83BD02" />
+      <stop offset="0.17" stop-color="#A0CF3B" stop-opacity="0.7" />
+      <stop offset="0.64" stop-color="#CDF27E" stop-opacity="0.2" />
+      <stop offset="1" stop-color="#EDFAD1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_1645_25989"
+      x1="475.369"
+      y1="116.024"
+      x2="149.896"
+      y2="116.024"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#83BD02" />
+      <stop offset="0.17" stop-color="#A0CF3B" stop-opacity="0.7" />
+      <stop offset="0.64" stop-color="#CDF27E" stop-opacity="0.2" />
+      <stop offset="1" stop-color="#EDFAD1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint4_linear_1645_25989"
+      x1="475.369"
+      y1="137.582"
+      x2="149.896"
+      y2="137.582"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#83BD02" />
+      <stop offset="0.17" stop-color="#A0CF3B" stop-opacity="0.7" />
+      <stop offset="0.64" stop-color="#CDF27E" stop-opacity="0.2" />
+      <stop offset="1" stop-color="#EDFAD1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint5_linear_1645_25989"
+      x1="475.369"
+      y1="182.418"
+      x2="149.896"
+      y2="182.418"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#83BD02" />
+      <stop offset="0.17" stop-color="#A0CF3B" stop-opacity="0.7" />
+      <stop offset="0.64" stop-color="#CDF27E" stop-opacity="0.2" />
+      <stop offset="1" stop-color="#EDFAD1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint6_linear_1645_25989"
+      x1="476.418"
+      y1="203.976"
+      x2="149"
+      y2="203.976"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#83BD02" />
+      <stop offset="0.17" stop-color="#A0CF3B" stop-opacity="0.7" />
+      <stop offset="0.64" stop-color="#CDF27E" stop-opacity="0.2" />
+      <stop offset="1" stop-color="#EDFAD1" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/src/components/index-page/graphql-advantages/optimization.tsx b/src/components/index-page/graphql-advantages/optimization.tsx
new file mode 100644
index 0000000000..35e1814655
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/optimization.tsx
@@ -0,0 +1,12 @@
+import OptimizationSvg from "./optimization.svg?svgr"
+
+export function OptimizationFigure() {
+  return (
+    <div
+      className="flex w-full items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px] [&_pre]:!h-48"
+      aria-hidden
+    >
+      <OptimizationSvg className="max-w-full max-sm:h-[200px]" />
+    </div>
+  )
+}
diff --git a/src/components/index-page/predictable-results/index.module.css b/src/components/index-page/graphql-advantages/precision.module.css
similarity index 100%
rename from src/components/index-page/predictable-results/index.module.css
rename to src/components/index-page/graphql-advantages/precision.module.css
diff --git a/src/components/index-page/graphql-advantages/precision.tsx b/src/components/index-page/graphql-advantages/precision.tsx
new file mode 100644
index 0000000000..fdbe24d1bb
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/precision.tsx
@@ -0,0 +1,128 @@
+import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
+import { Code } from "nextra/components"
+import { clsx } from "clsx"
+
+import { Pre } from "@/components/pre"
+
+import PredictableResult from "../../code-blocks/predictable-result.mdx"
+
+import classes from "./precision.module.css"
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
+    <Pre
+      {...props}
+      // todo: this bg style might need to become global for all code blocks
+      className={clsx(
+        props.className,
+        "!bg-neu-0/[.48] pr-4 leading-[21px] backdrop-blur-[6px] max-xs:leading-[16px] max-xs:[&_span]:!text-xs",
+      )}
+      tabIndex={-1}
+    />
+  ),
+  code: Code,
+}
+
+export function PrecisionFigure() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const showResponse = (num: Number) => {
+      const lines = ref.current!.querySelectorAll(
+        "code > span",
+      ) as unknown as HTMLSpanElement[] & { children: HTMLSpanElement[] }[]
+
+      if (num === 1) {
+        Array.from(lines[2].children).at(-1)!.style.display = "none"
+        lines[3].style.display = "none"
+        lines[4].style.display = "none"
+      } else if (num === 2 || num === 3) {
+        Array.from(lines[2].children).at(-1)!.style.display = "inline"
+        lines[3].style.display = "inline"
+        if (num === 2) {
+          Array.from(lines[3].children).at(-1)!.style.display = "none"
+        } else {
+          Array.from(lines[3].children).at(-1)!.style.display = "inline"
+          lines[4].style.display = "inline"
+        }
+      }
+    }
+    let i = 0
+    let forward = true
+    let timer: any
+    timer = setTimeout(type, 2000)
+    showResponse(1)
+
+    function type() {
+      if (forward) {
+        if (document.getElementById("ch" + i)) {
+          document.getElementById("ch" + i)!.style.display = "inline"
+          i++
+          if (i === 20) {
+            forward = false
+            showResponse(3)
+            timer = setTimeout(type, 1500)
+          } else if (i === 11) {
+            showResponse(2)
+            timer = setTimeout(type, 1500)
+          } else {
+            timer = setTimeout(type, Math.random() * 180 + 70)
+          }
+        }
+      } else {
+        i--
+        if (document.getElementById("ch" + i)) {
+          document.getElementById("ch" + i)!.style.display = "none"
+          if (i === 0) {
+            forward = true
+            showResponse(1)
+            timer = setTimeout(type, 2000)
+          } else {
+            timer = setTimeout(type, 80)
+          }
+        }
+      }
+    }
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const Pre = components.pre
+
+  return (
+    <div
+      ref={ref}
+      id="predictable-results"
+      className="nextra-codeblocks flex w-full max-w-[100vw] bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 max-[380px]:px-0 sm:max-w-[calc(100vw-32px)] xl:px-[46px] max-[380px]:[&_:is(.rounded-t-md,pre)]:rounded-none [&_pre]:!h-48"
+      aria-hidden
+    >
+      <Pre data-filename="Query" className="p-4">
+        {"{"}
+        {"\n  "}
+        <span className="!text-pri-base dark:!text-pri-light">{"hero"}</span>
+        {" {"}
+        <span className="!text-pri-base dark:!text-pri-light">
+          {"\n    name"}
+        </span>
+        {"\n    height\n    mass".split("").map((char, i) => (
+          <span
+            key={i}
+            id={"ch" + i}
+            className="hidden !text-pri-base dark:!text-pri-light"
+          >
+            {char === "\n" ? <br /> : char}
+          </span>
+        ))}
+        <span
+          className={clsx(
+            "-mb-0.5 ml-px inline-block h-4 w-2 !bg-pri-base/50 dark:!bg-pri-light/60",
+            classes.cursor,
+          )}
+        />
+        {"\n  }"}
+        {"\n}"}
+      </Pre>
+      <PredictableResult components={components} />
+    </div>
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/productivity.tsx b/src/components/index-page/graphql-advantages/productivity.tsx
new file mode 100644
index 0000000000..68963f278d
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/productivity.tsx
@@ -0,0 +1,38 @@
+const VIDEOS_DIR =
+  "https://github.com/graphql/graphql.github.io/raw/refs/heads/source/public/img"
+
+export function ProductivityFigure() {
+  return (
+    <div className="flex w-full items-center bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/20 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/5">
+      <div className="overflow-hidden rounded-lg shadow-[0px_0px_20px_0px_rgba(153,0,105,0.20)] dark:shadow-[0px_0px_20px_0px_hsl(218deg,60.3%,17.5%,.2)]">
+        <div className="h-px bg-[#FEFEFE] dark:bg-[#1F293A]" />
+        <video
+          disablePictureInPicture
+          autoPlay
+          muted
+          loop
+          playsInline
+          // the video is irrelevant to screen readers as its soundless
+          aria-hidden
+          // @ts-expect-error @types/react doesn't support fetchPriority yet
+          fetchpriority="low"
+        >
+          <source
+            src={`${VIDEOS_DIR}/graphiql-dark.mp4`}
+            media="(prefers-color-scheme: dark)"
+            type="video/mp4"
+          />
+          <source
+            src={`${VIDEOS_DIR}/graphiql-light.mp4`}
+            media="(prefers-color-scheme: light)"
+            type="video/mp4"
+          />
+        </video>
+        <div
+          /* the video is cropped a bit short at the bottom, so we're adding missing padding */
+          className="h-[7px] bg-[#FEFEFE] dark:bg-[#1F293A]"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/index-page/graphql-advantages/versionless.css b/src/components/index-page/graphql-advantages/versionless.css
new file mode 100644
index 0000000000..90aeb26a6f
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/versionless.css
@@ -0,0 +1,121 @@
+.add,
+.remove {
+  @apply shadow-[2px_0_currentColor_inset];
+}
+
+.add {
+  @apply !bg-green-200/35 text-green-300 dark:!bg-green-200/15;
+
+  &::before {
+    @apply absolute start-1.5 content-['+'];
+  }
+}
+
+.remove {
+  @apply !bg-red-200/35 text-red-300 dark:!bg-red-200/15;
+
+  &::before {
+    @apply absolute start-1.5 content-['-'];
+  }
+}
+
+.versionless-figure {
+  @apply relative left-0 flex h-full select-none;
+
+  & pre,
+  & code,
+  .v1,
+  .v2,
+  .v3,
+  .v4,
+  .v5 {
+    @apply h-full;
+  }
+
+  & pre {
+    @apply border-none;
+    background: none !important;
+  }
+
+  & code {
+    grid-auto-rows: min-content;
+  }
+
+  .v1,
+  .v2,
+  .v3,
+  .v4 {
+    @apply w-1/2 shrink-0 border-r border-neu-200 dark:border-neu-50;
+  }
+
+  .v5 {
+    @apply w-full shrink-0;
+  }
+
+  &[data-step="1"] {
+    .v2 {
+      opacity: 1;
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+
+  &[data-step="2"] {
+    left: calc(-1 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="3"] {
+    left: calc(-2 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="4"] {
+    left: calc(-3 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="5"] {
+    left: calc(-4 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="6"] {
+    .v5 {
+      left: calc(-4 * 50%);
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+
+  &[data-step="0"],
+  &[data-step="6"] {
+    .v2 {
+      @apply opacity-0;
+    }
+  }
+
+  &[data-step="1"] .v2 code > span:nth-child(5) {
+    @apply add;
+  }
+
+  &[data-step="2"] .v3 code > span:nth-child(6) {
+    @apply add;
+  }
+
+  &[data-step="3"] .v4 code > {
+    span:nth-child(7),
+    span:nth-last-child(-n + 5) {
+      @apply add;
+    }
+  }
+
+  &[data-step="4"] {
+    .v4 code > span:nth-child(6) {
+      @apply remove;
+    }
+
+    .v5 code > span:nth-child(6) {
+      @apply add;
+    }
+  }
+}
diff --git a/src/components/index-page/graphql-advantages/versionless.tsx b/src/components/index-page/graphql-advantages/versionless.tsx
new file mode 100644
index 0000000000..97e3d78352
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/versionless.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react"
+import { Code } from "nextra/components"
+import { clsx } from "clsx"
+
+import { LandingPagePre, V1, V2, V3, V4, V5 } from "../../code-blocks"
+
+import "./versionless.css"
+
+const components = {
+  pre: LandingPagePre,
+  code: Code,
+}
+
+export function VersionlessFigure() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let i = -1
+    const inView = ref.current!
+
+    function move() {
+      i = (i + 1) % 7
+      inView.dataset.step = i.toString()
+    }
+
+    move()
+    const interval = setInterval(move, 2200)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  return (
+    <section
+      className="flex w-full max-w-[100vw] bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/40 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/10 max-[360px]:px-0 sm:max-w-[calc(100vw-32px)] xl:px-[46px] max-[360px]:[&_div]:rounded-none"
+      id="without-versions"
+    >
+      <div
+        className={clsx(
+          "mx-auto w-full overflow-hidden",
+          "[&_div.nextra-code]:h-full",
+          "rounded-md border border-neu-200 bg-neu-0/[.64] dark:border-neu-50 dark:bg-neu-0/40 [&_pre]:h-full [&_pre]:rounded-none [&_pre]:ring-0",
+        )}
+        aria-hidden
+      >
+        <div className="versionless-figure" ref={ref}>
+          <div className="v1">
+            <V1 components={components} />
+          </div>
+          <div className="v2">
+            <V2 components={components} />
+          </div>
+          <div className="v3">
+            <V3 components={components} />
+          </div>
+          <div className="v4">
+            <V4 components={components} />
+          </div>
+          <div className="v5">
+            <V5 components={components} />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/index-page/hero.tsx b/src/components/index-page/hero.tsx
deleted file mode 100644
index 93797581ba..0000000000
--- a/src/components/index-page/hero.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Link from "next/link"
-import { CodeA, CodeB, CodeC } from "../code-blocks"
-import { GraphQLLogo } from "@/icons"
-import { clsx } from "clsx"
-
-export function Hero() {
-  return (
-    <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
-      <div className="conf-block container">
-        <section
-          className={clsx(
-            "flex flex-wrap items-center justify-center gap-14 max-sm:flex-col",
-            "[&_h3]:text-2xl [&_h3]:text-white max-lg:[&_h3]:text-center",
-            "[&_pre]:!bg-transparent [&_pre]:ring-0 [&_pre_span]:text-[--shiki-dark]",
-            "[&_h3]:font-extralight",
-            "[&_code]:whitespace-pre-wrap" /* fix scroll on mobile for code-blocks */,
-          )}
-        >
-          <div className="flex flex-col items-center gap-2 max-xl:w-full max-md:grow">
-            <GraphQLLogo className="w-24" />
-            <h1 className="text-3xl text-primary">GraphQL</h1>
-          </div>
-
-          <div>
-            <h3>Describe your data</h3>
-            <CodeA />
-          </div>
-
-          <div>
-            <h3>Ask for what you want</h3>
-            <CodeB />
-          </div>
-
-          <div>
-            <h3>Get predictable results</h3>
-            <CodeC />
-          </div>
-        </section>
-
-        <Link
-          className="index-button mx-auto mt-10 block w-fit border-white text-white"
-          href="/learn"
-        >
-          Get Started
-        </Link>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/index-page/hero/index.tsx b/src/components/index-page/hero/index.tsx
new file mode 100644
index 0000000000..ee935df106
--- /dev/null
+++ b/src/components/index-page/hero/index.tsx
@@ -0,0 +1,71 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
+import { Button } from "@/app/conf/_design-system/button"
+import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
+
+import logoBlurred from "./logo-blurred.webp"
+import Head from "next/head"
+
+export function Hero() {
+  return (
+    <div className="relative bg-neu-50 dark:bg-neu-50/10">
+      <div className="gql-container flex flex-col-reverse lg:grid lg:grid-cols-2">
+        <div className="flex max-w-4xl flex-col justify-center gap-4 p-4 lg:min-h-[800px] xl:gap-8 xl:py-24 xl:pl-24 xl:pr-10">
+          <h1 className="typography-h1 max-w-3xl text-neu-900">
+            The query language for modern APIs
+          </h1>
+
+          <ul className="flex flex-col gap-2">
+            {[
+              "Deliver high-performance user experience at any scale",
+              "Secure and stabilize your API with a strongly typed schema and validated requests",
+              "Reduce dependencies through efficient, distributed development",
+            ].map((item, index) => (
+              <li key={index} className="flex items-start gap-1">
+                <CheckIcon className="size-6 shrink-0 text-pri-base max-lg:mt-px" />
+                <p className="text-pretty text-neu-800">{item}</p>
+              </li>
+            ))}
+          </ul>
+
+          <div className="flex items-center gap-4">
+            <Button href="/learn" className="max-sm:w-full">
+              Learn more<span className="sr-only"> about GraphQL</span>
+            </Button>
+          </div>
+        </div>
+        <HeroStripes />
+      </div>
+    </div>
+  )
+}
+
+function HeroStripes() {
+  return (
+    <div className="pointer-events-none relative overflow-hidden max-lg:h-[210px]">
+      <Head>
+        <link
+          rel="preload"
+          as="image"
+          href={logoBlurred.src}
+          type="image/webp"
+          fetchPriority="high"
+        />
+      </Head>
+      <ImageLoaded
+        image={logoBlurred}
+        className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base sm:[mask-size:auto_300%] lg:[mask-position:7%_7%] lg:[mask-size:200%]"
+        style={{
+          maskImage: `url(${logoBlurred.src})`,
+          WebkitMaskImage: `url(${logoBlurred.src})`,
+          maskRepeat: "no-repeat",
+          WebkitMaskRepeat: "no-repeat",
+        }}
+      />
+      <StripesDecoration
+        stripeWidth="5px"
+        oddClassName="bg-gradient-to-b from-sec-base to-pri-lighter dark:from-sec-darker dark:to-pri-darker"
+      />
+    </div>
+  )
+}
diff --git a/src/components/index-page/hero/logo-blurred.webp b/src/components/index-page/hero/logo-blurred.webp
new file mode 100644
index 0000000000..be81d9fbbb
Binary files /dev/null and b/src/components/index-page/hero/logo-blurred.webp differ
diff --git a/src/components/index-page/how-it-works.tsx b/src/components/index-page/how-it-works.tsx
new file mode 100644
index 0000000000..e20aea999f
--- /dev/null
+++ b/src/components/index-page/how-it-works.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+import { CodeA, CodeB, CodeC } from "../code-blocks"
+
+const TRY_IT_OUT_URL = "https://graphql.org/swapi-graphql"
+
+export function HowItWorks() {
+  return (
+    <section className="gql-container gql-section xl:py-20">
+      <SectionLabel className="mb-6">How it works</SectionLabel>
+      <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
+      <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
+        <ListItem text="Describe your data" code={<CodeA />} />
+        <ListItem text="Ask for what you want" code={<CodeB />} />
+        <ListItem text="Get predictable results" code={<CodeC />} />
+      </ol>
+
+      <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
+        Try it out live
+      </Button>
+    </section>
+  )
+}
+
+function ListItem({
+  text,
+  code,
+}: {
+  text: React.ReactNode
+  code: React.ReactNode
+}) {
+  return (
+    <li className="[counter-increment:list-item]">
+      <div className="typography-body-md bg-neu-0 py-4 before:typography-body-sm before:mr-2 before:inline-flex before:size-5 before:translate-y-[-0.5px] before:items-center before:justify-center before:bg-neu-200 before:p-1 before:text-neu-800 before:content-[counter(list-item)] dark:before:bg-neu-50 md:py-6 md:before:ml-6">
+        {text}
+      </div>
+      <div className="mt-px bg-neu-0 md:pl-2 md:pt-2 max-md:[&_code>span]:!pl-0 [&_pre]:border-none [&_pre]:ring-0">
+        {code}
+      </div>
+    </li>
+  )
+}
diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 05c5da595f..9277e21c19 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -1,33 +1,39 @@
+import Head from "next/head"
+
 import { Hero } from "./hero"
-import { PredictableResults } from "./predictable-results"
-import { SingleRequest } from "./single-request"
-import { TypeSystem } from "./type-system"
-import { PowerFulTools } from "./powerful-tools"
-import { WithoutVersion } from "./without-version"
-import { BringYourOwnCode } from "./bring-your-own-code"
-import { WhoIsUsing } from "./who-is-using"
+import { TrustedBy } from "./trusted-by"
+import { HowItWorks } from "./how-it-works"
+import { ProvenSolution } from "./proven-solution"
+import { FivePillars } from "./five-pillars"
+import { PoweredByCommunity } from "./powered-by-community"
+import { GraphQLAdvantages } from "./graphql-advantages"
+import { QuotesFromTheIndustry } from "./quotes-from-the-industry"
+import { JoinTheCommunity } from "./join-the-community"
+import { DataColocation } from "./data-colocation"
+import { WhatIsGraphQL } from "./what-is-graphql"
+import { UseCases } from "./use-cases"
 
 export function IndexPage() {
   return (
-    <div className="index">
+    <div className="gql-all-anchors-focusable bg-neu-0">
+      <Head>
+        <meta
+          name="description"
+          content="GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
+        />
+      </Head>
       <Hero />
-      <section className="conf-block container flex max-w-3xl flex-col items-center text-center">
-        <h2>A query language for your API</h2>
-        <p>
-          GraphQL is a query language for APIs and a runtime for fulfilling
-          those queries with your existing data. GraphQL provides a complete and
-          understandable description of the data in your API, gives clients the
-          power to ask for exactly what they need and nothing more, makes it
-          easier to evolve APIs over time, and enables powerful developer tools.
-        </p>
-      </section>
-      <PredictableResults />
-      <SingleRequest />
-      <TypeSystem />
-      <PowerFulTools />
-      <WithoutVersion />
-      <BringYourOwnCode />
-      <WhoIsUsing />
+      <TrustedBy />
+      <WhatIsGraphQL />
+      <HowItWorks />
+      <ProvenSolution />
+      <FivePillars />
+      <PoweredByCommunity />
+      <GraphQLAdvantages />
+      <DataColocation />
+      <UseCases />
+      <QuotesFromTheIndustry />
+      <JoinTheCommunity />
     </div>
   )
 }
diff --git a/src/components/index-page/join-the-community.tsx b/src/components/index-page/join-the-community.tsx
new file mode 100644
index 0000000000..f43ca690f7
--- /dev/null
+++ b/src/components/index-page/join-the-community.tsx
@@ -0,0 +1,37 @@
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { DiscordIcon } from "@/icons"
+
+export function JoinTheCommunity() {
+  return (
+    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
+      <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker max-lg:flex-col">
+        <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
+          <h2 className="typography-h2 text-balance">Join the community</h2>
+          <p className="mt-8">
+            GraphQL is community-driven, backed by thousands of developers and
+            companies worldwide. Become part of a network shaping the future of
+            API development.
+          </p>
+        </div>
+        <div className="flex flex-col *:flex-1">
+          <Anchor
+            href="/community/tools-and-libraries"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Discord
+            <DiscordIcon className="size-8 fill-white" />
+          </Anchor>
+          <Anchor
+            href="/community/events"
+            className="flex items-center justify-between gap-4 whitespace-pre border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Explore community resources
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/index-page/powered-by-community.tsx b/src/components/index-page/powered-by-community.tsx
new file mode 100644
index 0000000000..2aafcaaedc
--- /dev/null
+++ b/src/components/index-page/powered-by-community.tsx
@@ -0,0 +1,46 @@
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+export function PoweredByCommunity() {
+  return (
+    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
+      <div className="gql-container dark typography-body-lg flex bg-pri-darker text-neu-900 max-lg:flex-col">
+        <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
+          <h2 className="typography-h2 text-balance">
+            Powered by the community
+          </h2>
+          <p className="mt-8">
+            GraphQL is an ecosystem shaped by thousands of collaborating
+            developers and companies around the world. From solo contributors to
+            full-time maintainers, the GraphQL community builds libraries, runs
+            meetups, funds innovation and helps move the technology forward.
+          </p>
+        </div>
+        <div>
+          <Anchor
+            href="/community/tools-and-libraries"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Browse libraries
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            href="/community/events"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Explore events & meetups
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            href="/community/foundation"
+            className="flex items-center justify-between gap-4 whitespace-pre px-6 py-8 hover:bg-white/10 focus-visible:!-outline-offset-8 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Learn about GraphQL Foundation
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/index-page/powerful-tools.tsx b/src/components/index-page/powerful-tools.tsx
index f56f703ee4..4944bd1f91 100644
--- a/src/components/index-page/powerful-tools.tsx
+++ b/src/components/index-page/powerful-tools.tsx
@@ -21,35 +21,6 @@ export function PowerFulTools() {
           by leveraging your API&rsquo;s type system.
         </p>
       </div>
-      <div className="overflow-hidden rounded-t-xl shadow-[0_0_0_1px_rgba(0,0,0,.2),0_16px_64px_rgba(0,0,0,.6)]">
-        <video
-          disablePictureInPicture
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="hidden dark:block"
-        >
-          {/* todo: sync with main branch in graphql.org repo */}
-          <source
-            src="https://github.com/dimaMachina/graphql.github.io/raw/nextra/static/img/graphiql-dark.mp4"
-            type="video/mp4"
-          />
-        </video>
-        <video
-          disablePictureInPicture
-          autoPlay
-          muted
-          loop
-          playsInline
-          className="block dark:hidden"
-        >
-          <source
-            src="https://github.com/dimaMachina/graphql.github.io/raw/nextra/static/img/graphiql-light.mp4"
-            type="video/mp4"
-          />
-        </video>
-      </div>
     </section>
   )
 }
diff --git a/src/components/index-page/predictable-results/index.tsx b/src/components/index-page/predictable-results/index.tsx
deleted file mode 100644
index 0d670546c7..0000000000
--- a/src/components/index-page/predictable-results/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useEffect, useRef } from "react"
-import { PredictableResult } from "../../code-blocks"
-import { Pre } from "nextra/components"
-import { clsx } from "clsx"
-import classes from "./index.module.css"
-
-export function PredictableResults() {
-  const ref = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    const showResponse = (num: Number) => {
-      const lines = ref.current!.querySelectorAll(
-        "code > span",
-      ) as unknown as HTMLSpanElement[] & { children: HTMLSpanElement[] }[]
-
-      if (num === 1) {
-        Array.from(lines[2].children).at(-1)!.style.display = "none"
-        lines[3].style.display = "none"
-        lines[4].style.display = "none"
-      } else if (num === 2 || num === 3) {
-        Array.from(lines[2].children).at(-1)!.style.display = "inline"
-        lines[3].style.display = "inline"
-        if (num === 2) {
-          Array.from(lines[3].children).at(-1)!.style.display = "none"
-        } else {
-          Array.from(lines[3].children).at(-1)!.style.display = "inline"
-          lines[4].style.display = "inline"
-        }
-      }
-    }
-    let i = 0
-    let forward = true
-    let timer: any
-    timer = setTimeout(type, 2000)
-    showResponse(1)
-
-    function type() {
-      if (forward) {
-        if (document.getElementById("ch" + i)) {
-          document.getElementById("ch" + i)!.style.display = "inline"
-          i++
-          if (i === 20) {
-            forward = false
-            showResponse(3)
-            timer = setTimeout(type, 1500)
-          } else if (i === 11) {
-            showResponse(2)
-            timer = setTimeout(type, 1500)
-          } else {
-            timer = setTimeout(type, Math.random() * 180 + 70)
-          }
-        }
-      } else {
-        i--
-        if (document.getElementById("ch" + i)) {
-          document.getElementById("ch" + i)!.style.display = "none"
-          if (i === 0) {
-            forward = true
-            showResponse(1)
-            timer = setTimeout(type, 2000)
-          } else {
-            timer = setTimeout(type, 80)
-          }
-        }
-      }
-    }
-
-    return () => clearTimeout(timer)
-  }, [])
-  return (
-    <div className="index-gradient">
-      <section
-        className="conf-block container flex flex-col justify-around gap-14 lg:flex-row-reverse lg:items-start lg:*:w-1/2"
-        id="predictable-results"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Ask for what you need, <br className="max-lg:hidden" />
-            get exactly that
-          </h2>
-          {/*[Illustration: just a simple query and response?]*/}
-          <p>
-            Send a GraphQL query to your API and get exactly what you need,
-            nothing more and nothing less. GraphQL queries always return
-            predictable results. Apps using GraphQL are fast and stable because
-            they control the data they get, not the server.
-          </p>
-        </div>
-        <div
-          ref={ref}
-          className="nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
-          aria-hidden
-        >
-          <Pre data-filename="Query" className="p-4">
-            {"{"}
-            {"\n  hero {"}
-            {"\n    name"}
-            {"\n    height\n    mass".split("").map((char, i) => (
-              <span key={i} id={"ch" + i} className="hidden">
-                {char === "\n" ? <br /> : char}
-              </span>
-            ))}
-            <span
-              className={clsx(
-                "-mb-0.5 ml-px inline-block h-4 w-2 !bg-primary/50",
-                classes.cursor,
-              )}
-            />
-            {"\n  }"}
-            {"\n}"}
-          </Pre>
-          <PredictableResult />
-        </div>
-      </section>
-    </div>
-  )
-}
diff --git a/src/components/index-page/proven-solution/blur-bean.webp b/src/components/index-page/proven-solution/blur-bean.webp
new file mode 100644
index 0000000000..8ee3171865
Binary files /dev/null and b/src/components/index-page/proven-solution/blur-bean.webp differ
diff --git a/src/components/index-page/proven-solution/index.tsx b/src/components/index-page/proven-solution/index.tsx
new file mode 100644
index 0000000000..1244906c18
--- /dev/null
+++ b/src/components/index-page/proven-solution/index.tsx
@@ -0,0 +1,126 @@
+import { ImageLoaded } from "@/app/conf/2025/components/image-loaded"
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
+
+import blurBean from "./blur-bean.webp"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+export function ProvenSolution() {
+  return (
+    <section className="dark relative overflow-hidden bg-pri-dark text-white dark:bg-pri-darker">
+      <Stripes />
+      <div className="gql-container py-8 xl:py-16">
+        <div className="gql-section relative">
+          <SectionLabel className="mb-6 !text-sec-light">
+            Business perspective
+          </SectionLabel>
+          <h2 className="typography-h2 mb-6 lg:mb-16">
+            A proven solution for startups and enterprises
+          </h2>
+          <div className="mb-12 grid gap-y-6 lg:grid-cols-3 lg:backdrop-blur-[6.4px] lg:[&>*:not(:first-child)]:border-l-0">
+            <ProvenSolutionCard
+              title={
+                <>
+                  The best user{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  experience
+                </>
+              }
+              description="Deliver high-performing user experiences at scale. The world’s leading apps use GraphQL to create faster, more responsive digital experiences."
+              bullets={[
+                "Faster data retrieval and load times",
+                "Improved bandwith efficiency",
+              ]}
+            />
+            <ProvenSolutionCard
+              title={
+                <>
+                  Stability &{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  Security
+                </>
+              }
+              description="Protect your APIs while maintaining full visibility into data consumption. GraphQL allows you to monitor, secure, and optimize API usage while ensuring compliance."
+              bullets={[
+                "Stronger access control",
+                "Improved business intelligence & cost analysis",
+              ]}
+            />
+            <ProvenSolutionCard
+              title={
+                <>
+                  Efficient distributed{" "}
+                  <br className="@[530px]/card:hidden max-lg:hidden" />
+                  development
+                </>
+              }
+              description="Let your teams ship faster with GraphQL’s flexible, decoupled architecture. GraphQL allows frontend and backend teams to work independently and efficiently."
+              bullets={[
+                "More rapid iterations",
+                "Improved cross-team collaboration",
+              ]}
+            />
+          </div>
+          <Button
+            className="mx-auto mt-8 w-fit lg:mt-16"
+            // todo: this should link to the Business Agregator page
+            href="/learn"
+          >
+            Learn more<span className="sr-only"> about GraphQL</span>
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function ProvenSolutionCard({
+  title,
+  description,
+  bullets,
+}: {
+  title: React.ReactNode
+  description: React.ReactNode
+  bullets: string[]
+}) {
+  return (
+    <div className="flex flex-col border border-pri-light bg-pri-lighter/20 @container/card dark:bg-pri-base/20 max-lg:backdrop-blur-[6.4px]">
+      <h3 className="border-b border-pri-light p-6 text-2xl @[331px]/card:typography-h3">
+        {title}
+      </h3>
+      <p className="typography-body-lg p-6">{description}</p>
+      <ul className="typography-body-md mt-auto flex flex-col gap-2 p-6 pt-0">
+        {bullets.map(bullet => (
+          <li key={bullet} className="flex items-center gap-2">
+            <CheckIcon className="size-4 shrink-0 text-sec-base" aria-hidden />
+            <span>{bullet}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function Stripes() {
+  return (
+    <ImageLoaded
+      role="presentation"
+      image={blurBean}
+      fetchPriority="low"
+      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value
+      className="pointer-events-none absolute inset-0 opacity-0 transition-[translate] duration-[400ms] ease-linear [mask-position:center_calc(100%+65vw)] [mask-size:200%] data-[loaded=true]:opacity-100 max-lg:rotate-[180deg] max-lg:scale-x-[-1] lg:[mask-position:center_500px] lg:[mask-size:150%] xl:translate-y-1/2 xl:[mask-position:center_top] xl:max-3xl:translate-y-[50%]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/0.2)_20%,hsl(var(--color-pri-base))_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-base)/.9)_20%,hsl(var(--color-pri-darker))_150%)]"
+        oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_20%,hsl(var(--color-pri-lighter)/.9)_150%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-darker)/.9)_20%,hsl(var(--color-pri-base)/.8)_150%)]"
+      />
+    </ImageLoaded>
+  )
+}
diff --git a/src/components/index-page/quotes-from-the-industry.tsx b/src/components/index-page/quotes-from-the-industry.tsx
new file mode 100644
index 0000000000..3b1951aef2
--- /dev/null
+++ b/src/components/index-page/quotes-from-the-industry.tsx
@@ -0,0 +1,77 @@
+import {
+  TestimonialsList,
+  type Testimonial,
+} from "@/app/conf/2025/components/testimonials"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+  {
+    quote:
+      "GraphQL is evolving to new use cases every day and it's really a competitive advantage to experience them first hand with everyone that matters.",
+    author: {
+      name: "Vincent Desmares",
+      role: "Teamstarter, CTO",
+      avatar:
+        "https://avatars.sched.co/d/cc/21066875/avatar.jpg.320x320px.jpg?f80",
+    },
+  },
+]
+
+export function QuotesFromTheIndustry() {
+  return (
+    <div className="gql-container py-8 max-md:px-4 md:pb-16 md:pt-24 md:[mask-image:linear-gradient(to_right,transparent,black_5%,black_95%,transparent)]">
+      <div className="gql-section !py-0">
+        <SectionLabel className="max-sm:-ml-1 max-sm:justify-center">
+          Quotes from the industry
+        </SectionLabel>
+        <h2 className="typography-h2 mt-6 text-balance max-sm:text-center">
+          Loved by world‑class devs
+        </h2>
+      </div>
+      <TestimonialsList
+        testimonials={testimonials}
+        className="gql-focus-visible focus-visible:!-outline-offset-4 lg:!mt-0 lg:*:px-16"
+      />
+    </div>
+  )
+}
diff --git a/src/components/index-page/single-request/index.module.css b/src/components/index-page/single-request/index.module.css
deleted file mode 100644
index 672158a126..0000000000
--- a/src/components/index-page/single-request/index.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.query,
-.response {
-  @apply absolute left-1/2;
-  @apply [&_pre]:bg-transparent [&_pre]:ring-0;
-}
-
-.query {
-  animation: query-up 8s 0s infinite ease-in both;
-  @apply -translate-x-full;
-
-  @keyframes query-up {
-    from {
-      opacity: 0;
-      top: 180px;
-    }
-
-    5%,
-    25% {
-      opacity: 1;
-    }
-
-    40% {
-      opacity: 0;
-    }
-
-    50%,
-    100% {
-      top: 70px;
-      opacity: 0;
-    }
-  }
-}
-
-.response {
-  animation: response-down 8s 2.5s infinite ease-in both;
-  @apply -translate-x-1/2;
-
-  @keyframes response-down {
-    0% {
-      opacity: 0;
-      top: 95px;
-    }
-
-    10% {
-      opacity: 0;
-    }
-
-    25%,
-    45% {
-      opacity: 1;
-    }
-
-    50%,
-    100% {
-      opacity: 0;
-      top: 160px;
-    }
-  }
-}
diff --git a/src/components/index-page/single-request/index.tsx b/src/components/index-page/single-request/index.tsx
deleted file mode 100644
index efab2127d6..0000000000
--- a/src/components/index-page/single-request/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { QueryHeroFriends, ResponseHeroFriends } from "../../code-blocks"
-import classes from "./index.module.css"
-import phoneImage from "public/img/phone.svg"
-import serverImage from "public/img/server.svg"
-import NextImage from "next-image-export-optimizer"
-
-export function SingleRequest() {
-  return (
-    <section
-      className="conf-block container flex !justify-around gap-14 *:w-full max-lg:flex-col lg:*:w-1/2 [&_pre]:!bg-transparent"
-      id="single-request"
-    >
-      <div className="max-lg:text-center">
-        <h2>
-          Get many resources <br className="max-lg:hidden" />
-          in a single request
-        </h2>
-        {/*Illustration: a query 2 or 3 levels deep]*/}
-        <p>
-          GraphQL queries access not just the properties of one resource but
-          also smoothly follow references between them. While typical REST APIs
-          require loading from multiple URLs, GraphQL APIs get all the data your
-          app needs in a single request. Apps using GraphQL can be quick even on
-          slow mobile network connections.
-        </p>
-      </div>
-      <div className="pointer-events-none relative -my-8 h-[520px]" aria-hidden>
-        <NextImage
-          src={serverImage}
-          alt="Server"
-          className="absolute left-1/2 -translate-x-1/2"
-        />
-        <NextImage
-          src={phoneImage}
-          alt="Phone"
-          className="absolute bottom-0 left-1/2 -translate-x-1/2"
-        />
-        <div className={classes.query}>
-          <QueryHeroFriends />
-        </div>
-        <div className={classes.response}>
-          <ResponseHeroFriends />
-        </div>
-      </div>
-    </section>
-  )
-}
diff --git a/src/components/index-page/trusted-by/index.tsx b/src/components/index-page/trusted-by/index.tsx
new file mode 100644
index 0000000000..42c2a987c4
--- /dev/null
+++ b/src/components/index-page/trusted-by/index.tsx
@@ -0,0 +1,146 @@
+import { clsx } from "clsx"
+
+import { Button } from "@/app/conf/_design-system/button"
+
+import MetaLockup from "./logos/Meta.svg?svgr"
+import IBMWordmark from "./logos/IBM.svg?svgr"
+import AirBnBLockup from "./logos/AirBnB.svg?svgr"
+import IntuitWordmark from "./logos/Intuit.svg?svgr"
+import AWSLogo from "./logos/AWS.svg?svgr"
+import PayPalWordmark from "./logos/PayPal.svg?svgr"
+import NewYorkTimesWordmark from "./logos/NewYorkTimes.svg?svgr"
+import StarbucksWordmark from "./logos/Starbucks.svg?svgr"
+import ShopifyLockup from "./logos/Shopify.svg?svgr"
+import ShopifyMonotoneLockup from "./logos/ShopifyMonotone.svg?svgr"
+import GitHubLockup from "./logos/GitHub.svg?svgr"
+
+import styles from "./style.module.css"
+
+const logos: LogoListItem[] = [
+  {
+    href: "https://meta.com",
+    alt: "Meta",
+    component: MetaLockup,
+  },
+  {
+    href: "https://aws.amazon.com",
+    alt: "AWS",
+    component: props => (
+      <AWSLogo
+        {...props}
+        className={clsx(props.className, "h-[48px] sm:w-[110px]")}
+      />
+    ),
+  },
+  // todo: Netflix?
+  // {
+  //   href: "https://netflix.com",
+  //   alt: "Netflix",
+  //   component: NetflixWordmark,
+  // },
+  {
+    href: "https://airbnb.com",
+    alt: "Airbnb",
+    component: AirBnBLockup,
+  },
+  {
+    href: "https://intuit.com",
+    alt: "Intuit",
+    component: IntuitWordmark,
+  },
+
+  {
+    href: "https://ibm.com",
+    alt: "IBM",
+    component: props => (
+      <IBMWordmark {...props} className={clsx(props.className, "w-[140px]")} />
+    ),
+  },
+
+  {
+    href: "https://paypal.com",
+    alt: "PayPal",
+    component: PayPalWordmark,
+  },
+  {
+    href: "https://nytimes.com",
+    alt: "New York Times",
+    component: NewYorkTimesWordmark,
+  },
+  {
+    href: "https://starbucks.com",
+    alt: "Starbucks",
+    component: StarbucksWordmark,
+  },
+  {
+    href: "https://shopify.com",
+    alt: "Shopify",
+    component: ({ className, ...rest }) => (
+      <div
+        role="img"
+        className={clsx(styles.shopify, "relative size-full flex-col")}
+      >
+        <ShopifyLockup
+          className="size-full opacity-0 group-hover:opacity-100 group-focus:opacity-100"
+          {...rest}
+        />
+        <ShopifyMonotoneLockup
+          className="absolute inset-0 size-full opacity-100 group-hover:opacity-0 group-focus:opacity-0"
+          {...rest}
+        />
+      </div>
+    ),
+  },
+  {
+    href: "https://github.com",
+    alt: "GitHub",
+    component: GitHubLockup,
+  },
+]
+
+export function TrustedBy() {
+  return (
+    <section className="gql-section gql-container bg-neu-0 py-8 lg:py-16 xl:py-24">
+      <div className="flex flex-wrap justify-between gap-6">
+        <h2 className="typography-h3 max-w-[474px] text-neu-800">
+          GraphQL is open source and trusted by the industry
+        </h2>
+        <p className="typography-body-md max-w-[624px] text-neu-700">
+          Facebook's mobile apps have been powered by GraphQL since 2012. The
+          GraphQL spec was open-sourced in 2015. Now it is used by
+          industry-leading companies worldwide and supported by the GraphQL
+          Foundation, hosted since 2018 by the non-profit Linux Foundation.
+        </p>
+      </div>
+      <div
+        className={clsx(
+          "gql-radial-gradient my-6 grid grid-cols-2 justify-center gap-px md:my-12 md:grid-cols-5 xl:my-16",
+          styles.logos,
+        )}
+      >
+        {logos.map(({ alt, href, component: Component }) => (
+          <a
+            key={alt}
+            aria-label={alt}
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className="group relative flex shrink-0 items-center justify-center bg-neu-0 p-10 *:z-[1] before:absolute before:inset-2 hover:before:bg-neu-100/50 focus-visible:z-[1] dark:hover:before:bg-[#202219]"
+          >
+            <Component className="size-full" />
+          </a>
+        ))}
+      </div>
+
+      <Button href="/users" className="mx-auto w-fit">
+        More GraphQL users
+      </Button>
+    </section>
+  )
+}
+
+interface LogoListItem {
+  href: string
+  alt: string
+  component: React.FC<{ className?: string }>
+}
diff --git a/src/components/index-page/trusted-by/logos/AWS.svg b/src/components/index-page/trusted-by/logos/AWS.svg
new file mode 100644
index 0000000000..ee21400eae
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/AWS.svg
@@ -0,0 +1,31 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 400 245"
+  width="400"
+  height="245"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    d="M116.454 91.17c0 4.713.51 8.533 1.401 11.335 1.02 2.802 2.293 5.858 4.076 9.17.637 1.019.891 2.037.891 2.929 0 1.273-.764 2.547-2.42 3.82l-8.023 5.35c-1.146.764-2.292 1.146-3.311 1.146-1.274 0-2.547-.637-3.82-1.783a39.4 39.4 0 0 1-4.586-5.986c-1.273-2.165-2.547-4.585-3.948-7.514-9.934 11.717-22.414 17.575-37.442 17.575-10.698 0-19.231-3.056-25.472-9.17-6.24-6.113-9.424-14.263-9.424-24.452 0-10.825 3.82-19.613 11.59-26.235 7.768-6.623 18.084-9.934 31.202-9.934 4.33 0 8.787.382 13.5 1.019 4.712.637 9.551 1.656 14.645 2.802v-9.297c0-9.68-2.037-16.43-5.985-20.377-4.076-3.948-10.953-5.859-20.76-5.859-4.457 0-9.042.51-13.754 1.656s-9.297 2.547-13.754 4.33c-2.038.892-3.566 1.401-4.458 1.656-.891.254-1.528.382-2.038.382-1.783 0-2.674-1.274-2.674-3.948v-6.24c0-2.038.255-3.567.891-4.458.637-.892 1.783-1.783 3.566-2.675 4.458-2.292 9.807-4.202 16.047-5.73 6.24-1.656 12.863-2.42 19.868-2.42 15.155 0 26.235 3.438 33.367 10.315 7.005 6.878 10.57 17.32 10.57 31.33V91.17zm-51.706 19.36c4.203 0 8.533-.765 13.118-2.293 4.584-1.528 8.66-4.33 12.098-8.15 2.038-2.42 3.566-5.095 4.33-8.151.765-3.057 1.274-6.75 1.274-11.08v-5.35c-3.693-.89-7.641-1.655-11.717-2.164a95.965 95.965 0 0 0-11.971-.765c-8.533 0-14.774 1.656-18.976 5.095-4.203 3.438-6.24 8.278-6.24 14.646 0 5.985 1.528 10.443 4.711 13.5 3.057 3.183 7.514 4.712 13.373 4.712zm102.267 13.754c-2.293 0-3.82-.382-4.84-1.274-1.019-.764-1.91-2.547-2.674-4.966l-29.929-98.447c-.764-2.547-1.146-4.202-1.146-5.094 0-2.038 1.019-3.184 3.056-3.184h12.481c2.42 0 4.076.382 4.967 1.274 1.02.764 1.783 2.547 2.547 4.967l21.396 84.31 19.868-84.31c.636-2.548 1.4-4.203 2.42-4.967 1.018-.764 2.801-1.274 5.094-1.274h10.188c2.42 0 4.076.382 5.094 1.274 1.02.764 1.91 2.547 2.42 4.967l20.122 85.328 22.033-85.328c.764-2.548 1.656-4.203 2.547-4.967 1.02-.764 2.675-1.274 4.967-1.274h11.844c2.038 0 3.184 1.019 3.184 3.184 0 .637-.127 1.274-.255 2.038-.127.764-.382 1.783-.891 3.184l-30.693 98.446c-.764 2.547-1.656 4.203-2.674 4.967-1.02.764-2.675 1.273-4.84 1.273h-10.953c-2.42 0-4.075-.382-5.094-1.273-1.019-.892-1.91-2.547-2.42-5.094l-19.74-82.145-19.613 82.017c-.636 2.547-1.4 4.203-2.42 5.094-1.018.892-2.801 1.274-5.094 1.274h-10.952zm163.652 3.439c-6.622 0-13.245-.765-19.612-2.293-6.368-1.528-11.335-3.184-14.646-5.094-2.038-1.146-3.439-2.42-3.948-3.566a8.99 8.99 0 0 1-.765-3.566v-6.495c0-2.675 1.02-3.948 2.93-3.948.764 0 1.528.127 2.292.382.764.255 1.91.764 3.184 1.273a69.274 69.274 0 0 0 14.01 4.458c5.093 1.019 10.06 1.528 15.154 1.528 8.024 0 14.264-1.4 18.594-4.203 4.33-2.801 6.623-6.877 6.623-12.098 0-3.566-1.146-6.496-3.439-8.915-2.292-2.42-6.622-4.585-12.863-6.623l-18.466-5.73c-9.297-2.93-16.174-7.26-20.377-12.991-4.203-5.604-6.368-11.844-6.368-18.467 0-5.349 1.146-10.061 3.439-14.136 2.292-4.076 5.349-7.642 9.17-10.444 3.82-2.929 8.15-5.094 13.244-6.622 5.094-1.528 10.443-2.165 16.047-2.165 2.802 0 5.731.127 8.533.51 2.93.381 5.604.89 8.278 1.4 2.547.637 4.967 1.274 7.26 2.038 2.292.764 4.075 1.528 5.348 2.292 1.783 1.02 3.057 2.038 3.821 3.184.764 1.02 1.146 2.42 1.146 4.203v5.986c0 2.674-1.019 4.075-2.929 4.075-1.019 0-2.674-.51-4.84-1.528-7.259-3.311-15.41-4.967-24.452-4.967-7.26 0-12.99 1.146-16.938 3.566-3.948 2.42-5.986 6.113-5.986 11.335 0 3.566 1.274 6.622 3.82 9.042 2.548 2.42 7.26 4.84 14.01 7.004l18.084 5.731c9.17 2.93 15.793 7.005 19.74 12.227 3.949 5.221 5.86 11.207 5.86 17.83 0 5.476-1.147 10.443-3.312 14.773-2.293 4.33-5.35 8.15-9.297 11.207-3.948 3.184-8.66 5.476-14.137 7.132-5.73 1.783-11.716 2.675-18.212 2.675z"
+    fill="#252f3e"
+  />
+  <path
+    class="st1"
+    d="M354.738 189.617c-41.9 30.947-102.777 47.376-155.12 47.376-73.357 0-139.455-27.127-189.379-72.21-3.948-3.567-.382-8.406 4.33-5.604 54 31.33 120.607 50.305 189.506 50.305 46.485 0 97.555-9.679 144.55-29.546 7.004-3.184 12.99 4.584 6.113 9.679z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#f90"
+  />
+  <path
+    class="st1"
+    d="M372.185 169.75c-5.349-6.878-35.405-3.312-49.032-1.657-4.075.51-4.712-3.056-1.019-5.73 23.943-16.812 63.296-11.972 67.881-6.368 4.585 5.73-1.273 45.084-23.688 63.932-3.439 2.93-6.75 1.401-5.222-2.42 5.095-12.608 16.43-41.008 11.08-47.758z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#f90"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/AirBnB.svg b/src/components/index-page/trusted-by/logos/AirBnB.svg
new file mode 100644
index 0000000000..a34faeca18
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/AirBnB.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320.1 99.9"
+  xml:space="preserve"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    fill="#FF5A5F"
+    d="M168.7 25.1c0 3.6-2.9 6.5-6.5 6.5s-6.5-2.9-6.5-6.5 2.8-6.5 6.5-6.5c3.7.1 6.5 3 6.5 6.5zm-26.8 13.1v1.6s-3.1-4-9.7-4c-10.9 0-19.4 8.3-19.4 19.8 0 11.4 8.4 19.8 19.4 19.8 6.7 0 9.7-4.1 9.7-4.1V73c0 .8.6 1.4 1.4 1.4h8.1V36.8h-8.1c-.8 0-1.4.7-1.4 1.4zm0 24.1c-1.5 2.2-4.5 4.1-8.1 4.1-6.4 0-11.3-4-11.3-10.8s4.9-10.8 11.3-10.8c3.5 0 6.7 2 8.1 4.1v13.4zm15.5-25.5h9.6v37.6h-9.6V36.8zm143.4-1c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8s-8.5-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-22.7-14.2v22.4h-9.6V53.2c0-6.2-2-8.7-7.4-8.7-2.9 0-5.9 1.5-7.8 3.7v26.2h-9.6V36.8h7.6c.8 0 1.4.7 1.4 1.4v1.6c2.8-2.9 6.5-4 10.2-4 4.2 0 7.7 1.2 10.5 3.6 3.4 2.8 4.7 6.4 4.7 12.7zm-57.7-16.3c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8.1-11.4-8.4-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-26-30.5c2.9 0 4.4.5 4.4.5v8.9s-8-2.7-13 3v26.3H173V36.8h8.1c.8 0 1.4.7 1.4 1.4v1.6c1.8-2.1 5.7-4 8.7-4zM91.5 71c-.5-1.2-1-2.5-1.5-3.6-.8-1.8-1.6-3.5-2.3-5.1l-.1-.1C80.7 47.2 73.3 32 65.5 17l-.3-.6c-.8-1.5-1.6-3.1-2.4-4.7-1-1.8-2-3.7-3.6-5.5C56 2.2 51.4 0 46.5 0c-5 0-9.5 2.2-12.8 6-1.5 1.8-2.6 3.7-3.6 5.5-.8 1.6-1.6 3.2-2.4 4.7l-.3.6C19.7 31.8 12.2 47 5.3 62l-.1.2c-.7 1.6-1.5 3.3-2.3 5.1-.5 1.1-1 2.3-1.5 3.6C.1 74.6-.3 78.1.2 81.7c1.1 7.5 6.1 13.8 13 16.6 2.6 1.1 5.3 1.6 8.1 1.6.8 0 1.8-.1 2.6-.2 3.3-.4 6.7-1.5 10-3.4 4.1-2.3 8-5.6 12.4-10.4 4.4 4.8 8.4 8.1 12.4 10.4 3.3 1.9 6.7 3 10 3.4.8.1 1.8.2 2.6.2 2.8 0 5.6-.5 8.1-1.6 7-2.8 11.9-9.2 13-16.6.8-3.5.4-7-.9-10.7zm-45.1 5.2C41 69.4 37.5 63 36.3 57.6c-.5-2.3-.6-4.3-.3-6.1.2-1.6.8-3 1.6-4.2 1.9-2.7 5.1-4.4 8.8-4.4 3.7 0 7 1.6 8.8 4.4.8 1.2 1.4 2.6 1.6 4.2.3 1.8.2 3.9-.3 6.1-1.2 5.3-4.7 11.7-10.1 18.6zm39.9 4.7c-.7 5.2-4.2 9.7-9.1 11.7-2.4 1-5 1.3-7.6 1-2.5-.3-5-1.1-7.6-2.6-3.6-2-7.2-5.1-11.4-9.7 6.6-8.1 10.6-15.5 12.1-22.1.7-3.1.8-5.9.5-8.5-.4-2.5-1.3-4.8-2.7-6.8-3.1-4.5-8.3-7.1-14.1-7.1s-11 2.7-14.1 7.1c-1.4 2-2.3 4.3-2.7 6.8-.4 2.6-.3 5.5.5 8.5 1.5 6.6 5.6 14.1 12.1 22.2-4.1 4.6-7.8 7.7-11.4 9.7-2.6 1.5-5.1 2.3-7.6 2.6-2.7.3-5.3-.1-7.6-1-4.9-2-8.4-6.5-9.1-11.7-.3-2.5-.1-5 .9-7.8.3-1 .8-2 1.3-3.2.7-1.6 1.5-3.3 2.3-5l.1-.2c6.9-14.9 14.3-30.1 22-44.9l.3-.6c.8-1.5 1.6-3.1 2.4-4.6.8-1.6 1.7-3.1 2.8-4.4 2.1-2.4 4.9-3.7 8-3.7 3.1 0 5.9 1.3 8 3.7 1.1 1.3 2 2.8 2.8 4.4.8 1.5 1.6 3.1 2.4 4.6l.3.6c7.6 14.9 15 30.1 21.9 45v.1c.8 1.6 1.5 3.4 2.3 5 .5 1.2 1 2.2 1.3 3.2.8 2.6 1.1 5.1.7 7.7z"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/GitHub.svg b/src/components/index-page/trusted-by/logos/GitHub.svg
new file mode 100644
index 0000000000..b1f0459b94
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/GitHub.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
+  version="1.1"
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 367.4 90"
+  style="enable-background: new 0 0 367.4 90"
+  xml:space="preserve"
+>
+  <style type="text/css">
+    .st0 {
+      fill: #1b1f24;
+    }
+
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <g>
+    <path
+      class="st0"
+      d="M46.1,0C20.6,0,0,20.6,0,46.1c0,20.4,13.2,37.7,31.5,43.8c2.3,0.4,3.2-1,3.2-2.2c0-1.1-0.1-4.7-0.1-8.6
+		c-11.6,2.1-14.6-2.8-15.5-5.4c-0.5-1.3-2.8-5.4-4.7-6.5c-1.6-0.9-3.9-3-0.1-3.1c3.6-0.1,6.2,3.3,7.1,4.7c4.2,7,10.8,5,13.4,3.8
+		c0.4-3,1.6-5,2.9-6.2c-10.3-1.2-21-5.1-21-22.8c0-5,1.8-9.2,4.7-12.4c-0.5-1.2-2.1-5.9,0.5-12.2c0,0,3.9-1.2,12.7,4.7
+		c3.7-1,7.6-1.6,11.5-1.6c3.9,0,7.8,0.5,11.5,1.6c8.8-6,12.7-4.7,12.7-4.7c2.5,6.3,0.9,11.1,0.5,12.2c2.9,3.2,4.7,7.3,4.7,12.4
+		c0,17.7-10.8,21.6-21.1,22.8c1.7,1.4,3.1,4.2,3.1,8.5c0,6.2-0.1,11.1-0.1,12.7c0,1.2,0.9,2.7,3.2,2.2c18.2-6.1,31.4-23.4,31.4-43.8
+		C92.3,20.6,71.6,0,46.1,0z"
+    />
+    <path
+      class="st0"
+      d="M221.6,67.1h-0.1C221.6,67.1,221.6,67.1,221.6,67.1L221.6,67.1L221.6,67.1z M221.6,67.1
+		c-0.5,0-1.8,0.3-3.2,0.3c-4.4,0-5.9-2-5.9-4.6V45.3h8.9c0.5,0,0.9-0.4,0.9-1.1v-9.5c0-0.5-0.4-0.9-0.9-0.9h-8.9V22.1
+		c0-0.4-0.3-0.7-0.8-0.7h-12c-0.5,0-0.8,0.3-0.8,0.7v12.1c0,0-6.1,1.5-6.5,1.6c-0.4,0.1-0.7,0.5-0.7,0.9v7.6c0,0.6,0.4,1.1,0.9,1.1
+		h6.2v18.3c0,13.6,9.5,15,16,15c3,0,6.5-0.9,7.1-1.2c0.3-0.1,0.5-0.5,0.5-0.9v-8.4C222.5,67.6,222.1,67.2,221.6,67.1z M353.8,54.9
+		c0-10.1-4.1-11.4-8.4-11c-3.3,0.2-6,1.9-6,1.9v19.6c0,0,2.7,1.9,6.8,2C352,67.6,353.8,65.5,353.8,54.9z M367.4,54
+		c0,19.1-6.2,24.6-17,24.6c-9.1,0-14.1-4.6-14.1-4.6s-0.2,2.6-0.5,2.9c-0.2,0.3-0.4,0.4-0.8,0.4h-8.3c-0.6,0-1.1-0.4-1.1-0.9l0.1-62
+		c0-0.5,0.4-0.9,0.9-0.9h11.9c0.5,0,0.9,0.4,0.9,0.9l-0.1,20.9c0,0,4.6-3,11.3-3h0.1C357.5,32.3,367.4,34.8,367.4,54z M318.7,33.8
+		H307c-0.6,0-0.9,0.4-0.9,1.1v30.3c0,0-3.1,2.2-7.3,2.2c-4.2,0-5.4-1.9-5.4-6.1V34.8c0-0.5-0.4-0.9-0.9-0.9h-11.9
+		c-0.5,0-0.9,0.4-0.9,0.9v28.5c0,12.3,6.9,15.3,16.3,15.3c7.8,0,14.1-4.3,14.1-4.3s0.3,2.2,0.4,2.5c0.1,0.3,0.5,0.5,0.9,0.5h7.5
+		c0.6,0,0.9-0.4,0.9-0.9l0.1-41.7C319.8,34.3,319.3,33.8,318.7,33.8z M186.5,33.8h-11.9c-0.5,0-0.9,0.5-0.9,1.1v40.9
+		c0,1.1,0.7,1.5,1.7,1.5h10.7c1.1,0,1.4-0.5,1.4-1.5V34.7C187.5,34.2,187,33.8,186.5,33.8z M180.7,14.9c-4.3,0-7.7,3.4-7.7,7.7
+		s3.4,7.7,7.7,7.7c4.2,0,7.6-3.4,7.6-7.7S184.9,14.9,180.7,14.9z M272.7,13.5h-11.8c-0.5,0-0.9,0.4-0.9,0.9v22.8h-18.5V14.5
+		c0-0.5-0.4-0.9-0.9-0.9h-11.9c-0.5,0-0.9,0.4-0.9,0.9v62c0,0.5,0.5,0.9,0.9,0.9h11.9c0.5,0,0.9-0.4,0.9-0.9V49.9h18.5l-0.1,26.5
+		c0,0.5,0.4,0.9,0.9,0.9h11.9c0.5,0,0.9-0.4,0.9-0.9v-62C273.6,14,273.2,13.5,272.7,13.5z M167.4,41v32c0,0.2-0.1,0.6-0.3,0.7
+		c0,0-7,5-18.5,5c-13.9,0-30.3-4.4-30.3-33c0-28.7,14.4-34.6,28.4-34.5c12.2,0,17.1,2.7,17.8,3.2c0.2,0.3,0.3,0.5,0.3,0.8l-2.3,9.9
+		c0,0.5-0.5,1.1-1.1,0.9c-2-0.6-5-1.8-12.1-1.8c-8.2,0-17,2.3-17,20.8s8.4,20.6,14.4,20.6c5.1,0,7-0.6,7-0.6V52.2h-8.2
+		c-0.6,0-1.1-0.4-1.1-0.9V41c0-0.5,0.4-0.9,1.1-0.9h20.9C167,40,167.4,40.5,167.4,41z"
+    />
+  </g>
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/IBM.svg b/src/components/index-page/trusted-by/logos/IBM.svg
new file mode 100644
index 0000000000..c080864325
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/IBM.svg
@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1075"
+  height="401.15"
+  viewBox="0 0 1075 401.15"
+  xml:space="preserve"
+  fill="#1f70c1"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    d="M0 373.17h194.43v27.932H0zm0-53.34h194.43v27.932H0zm55.468-53.29h83.399v27.932H55.468zm0-53.29h83.399v27.932H55.468zm0-53.29h83.399v27.932H55.468zm0-53.38h83.399v27.932H55.468zM0 53.288h194.43V81.22H0zM0 0h194.43v27.932H0zm222.17 400.85 207.11.297c27.734 0 52.793-10.697 71.513-27.932h-278.62zm0-53.09H521.2c5.051-8.617 8.815-18.027 11.094-27.932h-310.12zm55.56-81.22h83.3v27.932h-83.3zm166.7 0v27.932h90.927c0-9.608-1.288-19.017-3.764-27.932zm53.49-53.29H277.73v27.932h243.46c-6.34-10.698-14.165-20.107-23.277-27.932zm-220.19-53.29v27.932h220.19c9.311-7.825 17.135-17.235 23.277-27.932zm0-53.38h83.3v27.932h-83.3zm166.7 27.93h87.163c2.476-8.914 3.764-18.324 3.764-27.932H444.43zm76.77-81.222H222.17V81.22h310.12c-2.575-9.905-6.339-19.314-11.093-27.932zM429.28 0H222.17v27.932H500.7C482.079 10.697 456.822 0 429.286 0zm126.29 81.22h187.1l-9.61-27.932H555.57zm0-53.288h168.68L714.64 0H555.57zM861.03 401.17v-27.93H1000v27.93zm0-53.41v-27.93H1000v27.93zm-83.3-165.22-7.82-22.58H611.03v27.93h83.4v-25.65l8.82 25.65h148.97l8.81-25.65v25.65h83.4v-27.93H785.56zm166.7-75.96H803.98l-9.61 27.93h150.06zM1000 27.932V0H840.93l-9.61 27.932zM768.13 373.22l9.6 27.63 9.61-27.63zm-18.63-53.39 9.81 27.93h36.85l9.9-27.93zm-18.72-53.29 9.81 27.93h74.29l9.8-27.93zm-8.81-25.36H833.6l9.51-27.93H712.36zM611.03 134.51h150.06l-9.6-27.93H611.03zM1000 53.288H822.4l-9.5 27.932H1000zM555.57 373.22h138.97v27.932H555.57zm0-53.39h138.97v27.932H555.57zm55.46-53.29h83.399v27.932H611.03zm0-53.29h83.399v27.932H611.03zm250 0h83.399v27.932H861.03zm0 53.29h83.399v27.932H861.03zM1052 357.15a22 22 0 0 0-22 22 22 22 0 0 0 22 22 22 22 0 0 0 22-22 22 22 0 0 0-22-22zm0 4a18 18 0 0 1 18 18 18 18 0 0 1-18 18 18 18 0 0 1-18-18 18 18 0 0 1 18-18zm-9.3476 6.793v22.414h5.453v-7.7305h3.0978l4.164 7.7305h5.9804l-5.0234-8.582c2.4616-.96446 4.0624-3.2158 4.0624-6.75 0-4.0818-2.5594-7.082-7.582-7.082zm5.453 4.2891h4.0548c1.7114 0 2.668.75016 2.668 2.3555v1.6133c0 1.6053-.9566 2.3594-2.668 2.3594h-4.0548z"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/Intuit.svg b/src/components/index-page/trusted-by/logos/Intuit.svg
new file mode 100644
index 0000000000..4618f6f402
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/Intuit.svg
@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="68.746 119.561 587.013 118.012"
+  width="587.013px"
+  height="118.012px"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    d="M 370.114 187.859 C 370.114 216.579 393.926 237.573 424.189 237.573 C 454.454 237.573 478.31 216.579 478.31 187.859 L 478.31 121.878 L 449.001 121.878 L 449.001 184.451 C 449.001 199.947 438.277 210.399 424.099 210.399 C 409.921 210.399 399.197 199.992 399.197 184.451 L 399.197 121.878 L 369.887 121.878 L 370.069 187.859 L 370.114 187.859 Z M 556.561 148.28 L 591.506 148.28 L 591.506 235.437 L 620.815 235.437 L 620.815 148.28 L 655.759 148.28 L 655.759 121.833 L 556.561 121.833 L 556.561 148.28 Z M 537.612 121.833 L 508.302 121.833 L 508.302 235.437 L 537.612 235.437 L 537.612 121.833 Z M 251.739 148.28 L 286.684 148.28 L 286.684 235.437 L 315.993 235.437 L 315.993 148.28 L 350.937 148.28 L 350.937 121.833 L 251.739 121.833 L 251.739 148.28 Z M 98.056 121.833 L 68.746 121.833 L 68.746 235.437 L 98.056 235.437 L 98.056 121.833 Z M 236.334 169.274 C 236.334 140.555 212.478 119.561 182.213 119.561 C 151.95 119.561 128.138 140.555 128.138 169.274 L 128.138 235.437 L 157.448 235.437 L 157.448 172.818 C 157.448 157.323 168.172 146.871 182.349 146.871 C 196.528 146.871 207.251 157.277 207.251 172.818 L 207.251 235.391 L 236.562 235.391 L 236.38 169.228 L 236.334 169.274 Z"
+    fill="#236CFF"
+    style="stroke-width: 1"
+    transform="matrix(1, 0, 0, 1, -7.105427357601002e-15, 0)"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/Meta.svg b/src/components/index-page/trusted-by/logos/Meta.svg
new file mode 100644
index 0000000000..e677a07bb4
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/Meta.svg
@@ -0,0 +1,32 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="139"
+  height="28"
+  viewBox="0 0 139 28"
+  fill="#1C2A33"
+>
+  <style>
+    html[class~="dark"] .meta path {
+      fill: #fff;
+    }
+  </style>
+  <g class="meta" clip-path="url(#clip0_1645_25515)">
+    <path
+      d="M4.5533 18.4653C4.5533 20.075 4.9066 21.3108 5.36838 22.0584C5.97382 23.0377 6.87686 23.4526 7.79749 23.4526C8.98492 23.4526 10.0712 23.1579 12.1646 20.2626C13.8417 17.942 15.8178 14.6846 17.1474 12.6425L19.3992 9.18283C20.9634 6.78011 22.7738 4.10911 24.8496 2.29864C26.5443 0.820943 28.3724 0 30.2121 0C33.3009 0 36.2431 1.78995 38.4949 5.14702C40.9592 8.82367 42.1554 13.4547 42.1554 18.2337C42.1554 21.0748 41.5954 23.1623 40.6425 24.8115C39.7219 26.4065 37.9275 28 34.9091 28V23.4526C37.4936 23.4526 38.1386 21.0777 38.1386 18.3598C38.1386 14.4867 37.2356 10.1885 35.2463 7.11728C33.8346 4.93885 32.005 3.60775 29.9923 3.60775C27.8153 3.60775 26.0635 5.24963 24.0947 8.17717C23.048 9.73257 21.9734 11.6281 20.7669 13.7669L19.4387 16.1198C16.7707 20.8505 16.0949 21.928 14.7608 23.7062C12.4226 26.8199 10.426 28 7.79749 28C4.67937 28 2.70764 26.6498 1.48649 24.6151C0.489634 22.9571 0 20.7816 0 18.3026L4.5533 18.4653Z"
+    />
+    <path
+      d="M3.58984 5.46806C5.67738 2.25026 8.68995 0 12.1452 0C14.1463 0 16.1356 0.592251 18.2129 2.28838C20.4851 4.14283 22.9069 7.19644 25.9283 12.2291L27.0116 14.0352C29.6269 18.392 31.1149 20.6335 31.9857 21.6905C33.1057 23.048 33.8899 23.4526 34.9088 23.4526C37.4933 23.4526 38.1383 21.0777 38.1383 18.3598L42.1551 18.2337C42.1551 21.0748 41.5951 23.1623 40.6422 24.8115C39.7216 26.4065 37.9272 28 34.9088 28C33.0324 28 31.3699 27.5925 29.5316 25.8582C28.1184 24.5271 26.4663 22.1625 25.1953 20.0369L21.4146 13.7215C19.5176 10.552 17.7775 8.1889 16.7704 7.11874C15.687 5.96796 14.2943 4.57822 12.0719 4.57822C10.2732 4.57822 8.74565 5.84042 7.46733 7.7711L3.58984 5.46806Z"
+    />
+    <path
+      d="M12.0723 4.57822C10.2735 4.57822 8.74597 5.84042 7.46764 7.7711C5.6601 10.4993 4.5533 14.5629 4.5533 18.4653C4.5533 20.075 4.9066 21.3108 5.36838 22.0584L1.48649 24.6151C0.489634 22.9571 0 20.7816 0 18.3026C0 13.7948 1.23728 9.09633 3.59016 5.46806C5.6777 2.25026 8.69026 0 12.1455 0L12.0723 4.57822Z"
+    />
+    <path
+      d="M51.0078 0.885445H56.275L65.2306 17.0873L74.1877 0.885445H79.3406V27.5074H75.0438V7.10408L67.1892 21.2331H63.1578L55.3046 7.10408V27.5074H51.0078V0.885445ZM92.804 10.8115C89.7226 10.8115 87.8667 13.1307 87.4225 16.0025H97.8807C97.6652 13.0442 95.9588 10.8115 92.804 10.8115ZM83.1624 17.6385C83.1624 11.5958 87.0677 7.19791 92.8788 7.19791C98.5946 7.19791 102.007 11.5401 102.007 17.961V19.1412H87.4225C87.94 22.2651 90.0128 24.3703 93.3552 24.3703C96.0218 24.3703 97.6887 23.5567 99.269 22.0687L101.551 24.8643C99.4009 26.8419 96.6654 27.9824 93.2028 27.9824C86.9123 27.9824 83.1624 23.3954 83.1624 17.6385ZM107.217 11.1927H103.262V7.67435H107.217V1.85592H111.363V7.67435H117.372V11.1927H111.363V20.1102C111.363 23.155 112.337 24.2369 114.729 24.2369C115.821 24.2369 116.447 24.143 117.372 23.9891V27.4693C116.22 27.7948 115.12 27.9443 113.93 27.9443C109.455 27.9443 107.217 25.4991 107.217 20.6042V11.1927ZM134.829 14.6142C133.996 12.512 132.139 10.964 129.409 10.964C125.862 10.964 123.591 13.481 123.591 17.5814C123.591 21.5791 125.681 24.2178 129.239 24.2178C132.036 24.2178 134.033 22.5906 134.829 20.5661V14.6142ZM138.975 27.5074H134.905V24.7309C133.768 26.3654 131.698 27.9824 128.345 27.9824C122.953 27.9824 119.35 23.4687 119.35 17.5814C119.35 11.6383 123.04 7.19791 128.574 7.19791C131.309 7.19791 133.455 8.29152 134.905 10.2222V7.67435H138.975V27.5074Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_1645_25515">
+      <rect width="138.974" height="28" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/NewYorkTimes.svg b/src/components/index-page/trusted-by/logos/NewYorkTimes.svg
new file mode 100644
index 0000000000..6d413cad37
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/NewYorkTimes.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="185"
+  height="25"
+  viewBox="0 0 185 25"
+  fill="#000"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    d="M13.8 2.9c0-2-1.9-2.5-3.4-2.5v.3c.9 0 1.6.3 1.6 1 0 .4-.3 1-1.2 1-.7 0-2.2-.4-3.3-.8C6.2 1.4 5 1 4 1 2 1 .6 2.5.6 4.2c0 1.5 1.1 2 1.5 2.2l.1-.2c-.2-.2-.5-.4-.5-1 0-.4.4-1.1 1.4-1.1.9 0 2.1.4 3.7.9 1.4.4 2.9.7 3.7.8v3.1L9 10.2v.1l1.5 1.3v4.3c-.8.5-1.7.6-2.5.6-1.5 0-2.8-.4-3.9-1.6l4.1-2V6l-5 2.2C3.6 6.9 4.7 6 5.8 5.4l-.1-.3c-3 .8-5.7 3.6-5.7 7 0 4 3.3 7 7 7 4 0 6.6-3.2 6.6-6.5h-.2c-.6 1.3-1.5 2.5-2.6 3.1v-4.1l1.6-1.3v-.1l-1.6-1.3V5.8c1.5 0 3-1 3-2.9zm-8.7 11l-1.2.6c-.7-.9-1.1-2.1-1.1-3.8 0-.7 0-1.5.2-2.1l2.1-.9v6.2zm10.6 2.3l-1.3 1 .2.2.6-.5 2.2 2 3-2-.1-.2-.8.5-1-1V9.4l.8-.6 1.7 1.4v6.1c0 3.8-.8 4.4-2.5 5v.3c2.8.1 5.4-.8 5.4-5.7V9.3l.9-.7-.2-.2-.8.6-2.5-2.1L18.5 9V.8h-.2l-3.5 2.4v.2c.4.2 1 .4 1 1.5l-.1 11.3zM34 15.1L31.5 17 29 15v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.6l-1 .8.2.2.9-.7 3.4 2.5 4.5-3.6-.1-.4zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zM53.1 2c0-.3-.1-.6-.2-.9h-.2c-.3.8-.7 1.2-1.7 1.2-.9 0-1.5-.5-1.9-.9l-2.9 3.3.2.2 1-.9c.6.5 1.1.9 2.5 1v8.3L44 3.2c-.5-.8-1.2-1.9-2.6-1.9-1.6 0-3 1.4-2.8 3.6h.3c.1-.6.4-1.3 1.1-1.3.5 0 1 .5 1.3 1v3.3c-1.8 0-3 .8-3 2.3 0 .8.4 2 1.6 2.3v-.2c-.2-.2-.3-.4-.3-.7 0-.5.4-.9 1.1-.9h.5v4.2c-2.1 0-3.8 1.2-3.8 3.2 0 1.9 1.6 2.8 3.4 2.7v-.2c-1.1-.1-1.6-.6-1.6-1.3 0-.9.6-1.3 1.4-1.3.8 0 1.5.5 2 1.1l2.9-3.2-.2-.2-.7.8c-1.1-1-1.7-1.3-3-1.5V5l8 14h.6V5c1.5-.1 2.9-1.3 2.9-3zm7.3 13.1L57.9 17l-2.5-2v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.6l-1 .8.2.2.9-.7 3.4 2.5 4.5-3.6-.1-.4zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zM76.7 8l-.7.5-1.9-1.6-2.2 2 .9.9v7.5l-2.4-1.5V9.6l.8-.5-2.3-2.2-2.2 2 .9.9V17l-.3.2-2.1-1.5v-6c0-1.4-.7-1.8-1.5-2.3-.7-.5-1.1-.8-1.1-1.5 0-.6.6-.9.9-1.1v-.2c-.8 0-2.9.8-2.9 2.7 0 1 .5 1.4 1 1.9s1 .9 1 1.8v5.8l-1.1.8.2.2 1-.8 2.3 2 2.5-1.7 2.8 1.7 5.3-3.1V9.2l1.3-1-.2-.2zm18.6-5.5l-1 .9-2.2-2-3.3 2.4V1.6h-.3l.1 16.2c-.3 0-1.2-.2-1.9-.4l-.2-13.5c0-1-.7-2.4-2.5-2.4s-3 1.4-3 2.8h.3c.1-.6.4-1.1 1-1.1s1.1.4 1.1 1.7v3.9c-1.8.1-2.9 1.1-2.9 2.4 0 .8.4 2 1.6 2V13c-.4-.2-.5-.5-.5-.7 0-.6.5-.8 1.3-.8h.4v6.2c-1.5.5-2.1 1.6-2.1 2.8 0 1.7 1.3 2.9 3.3 2.9 1.4 0 2.6-.2 3.8-.5 1-.2 2.3-.5 2.9-.5.8 0 1.1.4 1.1.9 0 .7-.3 1-.7 1.1v.2c1.6-.3 2.6-1.3 2.6-2.8 0-1.5-1.5-2.4-3.1-2.4-.8 0-2.5.3-3.7.5-1.4.3-2.8.5-3.2.5-.7 0-1.5-.3-1.5-1.3 0-.8.7-1.5 2.4-1.5.9 0 2 .1 3.1.4 1.2.3 2.3.6 3.3.6 1.5 0 2.8-.5 2.8-2.6V3.7l1.2-1-.2-.2zm-4.1 6.1c-.3.3-.7.6-1.2.6s-1-.3-1.2-.6V4.2l1-.7 1.4 1.3v3.8zm0 3c-.2-.2-.7-.5-1.2-.5s-1 .3-1.2.5V9c.2.2.7.5 1.2.5s1-.3 1.2-.5v2.6zm0 4.7c0 .8-.5 1.6-1.6 1.6h-.8V12c.2-.2.7-.5 1.2-.5s.9.3 1.2.5v4.3zm13.7-7.1l-3.2-2.3-4.9 2.8v6.5l-1 .8.1.2.8-.6 3.2 2.4 5-3V9.2zm-5.4 6.3V8.3l2.5 1.8v7.1l-2.5-1.7zm14.9-8.4h-.2c-.3.2-.6.4-.9.4-.4 0-.9-.2-1.1-.5h-.2l-1.7 1.9-1.7-1.9-3 2 .1.2.8-.5 1 1.1v6.3l-1.3 1 .2.2.6-.5 2.4 2 3.1-2.1-.1-.2-.9.5-1.2-1V9c.5.5 1.1 1 1.8 1 1.4.1 2.2-1.3 2.3-2.9zm12 9.6L123 19l-4.6-7 3.3-5.1h.2c.4.4 1 .8 1.7.8s1.2-.4 1.5-.8h.2c-.1 2-1.5 3.2-2.5 3.2s-1.5-.5-2.1-.8l-.3.5 5 7.4 1-.6v.1zm-11-.5l-1.3 1 .2.2.6-.5 2.2 2 3-2-.2-.2-.8.5-1-1V.8h-.1l-3.6 2.4v.2c.4.2 1 .3 1 1.5v11.3zM143 2.9c0-2-1.9-2.5-3.4-2.5v.3c.9 0 1.6.3 1.6 1 0 .4-.3 1-1.2 1-.7 0-2.2-.4-3.3-.8-1.3-.4-2.5-.8-3.5-.8-2 0-3.4 1.5-3.4 3.2 0 1.5 1.1 2 1.5 2.2l.1-.2c-.3-.2-.6-.4-.6-1 0-.4.4-1.1 1.4-1.1.9 0 2.1.4 3.7.9 1.4.4 2.9.7 3.7.8V9l-1.5 1.3v.1l1.5 1.3V16c-.8.5-1.7.6-2.5.6-1.5 0-2.8-.4-3.9-1.6l4.1-2V6l-5 2.2c.5-1.3 1.6-2.2 2.6-2.9l-.1-.2c-3 .8-5.7 3.5-5.7 6.9 0 4 3.3 7 7 7 4 0 6.6-3.2 6.6-6.5h-.2c-.6 1.3-1.5 2.5-2.6 3.1v-4.1l1.6-1.3v-.1L140 8.8v-3c1.5 0 3-1 3-2.9zm-8.7 11l-1.2.6c-.7-.9-1.1-2.1-1.1-3.8 0-.7.1-1.5.3-2.1l2.1-.9-.1 6.2zm12.2-12h-.1l-2 1.7v.1l1.7 1.9h.2l2-1.7v-.1l-1.8-1.9zm3 14.8l-.8.5-1-1V9.3l1-.7-.2-.2-.7.6-1.8-2.1-2.9 2 .2.3.7-.5.9 1.1v6.5l-1.3 1 .1.2.7-.5 2.2 2 3-2-.1-.3zm16.7-.1l-.7.5-1.1-1V9.3l1-.8-.2-.2-.8.7-2.3-2.1-3 2.1-2.3-2.1L154 9l-1.8-2.1-2.9 2 .1.3.7-.5 1 1.1v6.5l-.8.8 2.3 1.9 2.2-2-.9-.9V9.3l.9-.6 1.5 1.4v6l-.8.8 2.3 1.9 2.2-2-.9-.9V9.3l.8-.5 1.6 1.4v6l-.7.7 2.3 2.1 3.1-2.1v-.3zm8.7-1.5l-2.5 1.9-2.5-2v-1.2l4.7-3.2v-.1l-2.4-3.6-5.2 2.8v6.8l3.5 2.5 4.5-3.6-.1-.3zm-5-1.7V8.5l.2-.1 2.2 3.5-2.4 1.5zm14.1-.9l-1.9-1.5c1.3-1.1 1.8-2.6 1.8-3.6v-.6h-.2c-.2.5-.6 1-1.4 1-.8 0-1.3-.4-1.8-1L176 9.3v3.6l1.7 1.3c-1.7 1.5-2 2.5-2 3.3 0 1 .5 1.7 1.3 2l.1-.2c-.2-.2-.4-.3-.4-.8 0-.3.4-.8 1.2-.8 1 0 1.6.7 1.9 1l4.3-2.6v-3.6h-.1zm-1.1-3c-.7 1.2-2.2 2.4-3.1 3l-1.1-.9V8.1c.4 1 1.5 1.8 2.6 1.8.7 0 1.1-.1 1.6-.4zm-1.7 8c-.5-1.1-1.7-1.9-2.9-1.9-.3 0-1.1 0-1.9.5.5-.8 1.8-2.2 3.5-3.2l1.2 1 .1 3.6z"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/PayPal.svg b/src/components/index-page/trusted-by/logos/PayPal.svg
new file mode 100644
index 0000000000..534e047567
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/PayPal.svg
@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="114"
+  height="38"
+  viewBox="0 0 114 38"
+  fill="currentColor"
+>
+  <g clip-path="url(#clip0_1645_25547)">
+    <path
+      d="M114 0V28.379H107.499V0H114ZM105.106 9.57779V28.4308H99.3279V26.8057C98.597 27.5146 97.7615 28.0505 96.8391 28.4308C95.9079 28.8285 94.8985 29.0359 93.8194 29.0359C92.4618 29.0359 91.2 28.7853 90.0426 28.2839C88.8852 27.7566 87.8757 27.0391 87.0229 26.1401C86.1614 25.2325 85.4826 24.1779 84.9779 22.9763C84.4992 21.7489 84.2643 20.4263 84.2643 19.0173C84.2643 17.6083 84.4992 16.303 84.9779 15.1014C85.4826 13.874 86.1614 12.8021 87.0229 11.8944C87.8737 10.9937 88.9015 10.2758 90.0426 9.78525C91.2 9.25795 92.4618 8.98998 93.8194 8.98998C94.8985 8.98998 95.9079 9.1888 96.8391 9.59507C97.7702 9.97542 98.6057 10.5114 99.3279 11.2202V9.59507H105.106V9.57779ZM94.8637 23.2962C96.0472 23.2962 97.0131 22.8985 97.7702 22.086C98.5534 21.2821 98.945 20.2534 98.945 19C98.945 17.7466 98.5534 16.7093 97.7702 15.914C97.0131 15.1101 96.0385 14.7038 94.8637 14.7038C93.6889 14.7038 92.6968 15.1015 91.9136 15.914C91.1565 16.7179 90.7823 17.7466 90.7823 19C90.7823 20.2534 91.1652 21.2907 91.9136 22.086C92.6968 22.8899 93.6802 23.2962 94.8637 23.2962ZM74.9876 0C76.702 0 78.164 0.242038 79.3736 0.717471C80.5832 1.1929 81.6014 1.85851 82.4368 2.71429C83.2896 3.596 83.9597 4.59873 84.4383 5.73112C84.917 6.86352 85.1519 8.08235 85.1519 9.38763C85.1519 10.6929 84.917 11.9117 84.4383 13.0441C83.9686 14.1661 83.2895 15.1897 82.4368 16.061C81.6101 16.9167 80.5832 17.5824 79.3736 18.0578C78.164 18.5332 76.702 18.7753 74.9876 18.7753H71.8548V28.4222H65.2411V0H74.9876ZM74.0391 12.9318C74.9267 12.9318 75.5968 12.8453 76.0841 12.6638C76.5889 12.465 77.0066 12.2056 77.3286 11.9117C78.0073 11.2807 78.3467 10.4422 78.3467 9.38762C78.3467 8.33302 78.0073 7.49454 77.3286 6.86351C76.9979 6.56096 76.5889 6.31892 76.0841 6.14604C75.6055 5.94722 74.9267 5.84349 74.0391 5.84349H71.8461V12.9318H74.0391ZM40.8747 9.57779H48.0541L52.9273 18.6197H53.0057L57.3481 9.57779H63.9967L49.751 38H43.1373L49.6379 24.9991L40.8747 9.57779ZM39.5954 9.57779V28.4308H33.8171V26.8057C33.0861 27.5146 32.2507 28.0505 31.3282 28.4308C30.3971 28.8285 29.3876 29.0359 28.3085 29.0359C26.951 29.0359 25.6892 28.7853 24.5318 28.2839C23.3743 27.7566 22.3649 27.0391 21.5121 26.1401C20.6592 25.2325 19.9718 24.1779 19.467 22.9763C18.9884 21.7489 18.7534 20.4263 18.7534 19.0173C18.7534 17.6083 18.9884 16.303 19.467 15.1014C19.9718 13.874 20.6505 12.8021 21.5121 11.8944C22.3612 10.9918 23.3894 10.2737 24.5318 9.78525C25.6892 9.25795 26.951 8.98998 28.3085 8.98998C29.3876 8.98998 30.3971 9.1888 31.3282 9.59507C32.2594 9.97542 33.0948 10.5114 33.8171 11.2202V9.59507H39.5954V9.57779ZM29.3528 23.2962C30.5363 23.2962 31.5023 22.8985 32.2681 22.086C33.0513 21.2821 33.4429 20.2534 33.4429 19C33.4429 17.7466 33.0513 16.7093 32.2681 15.914C31.511 15.1101 30.5363 14.7038 29.3528 14.7038C28.1693 14.7038 27.186 15.1015 26.4027 15.914C25.6456 16.7179 25.2714 17.7466 25.2714 19C25.2714 20.2534 25.6544 21.2907 26.4027 22.086C27.186 22.8899 28.1693 23.2962 29.3528 23.2962ZM9.74656 0C11.4609 0 12.9229 0.242038 14.1325 0.717471C15.3421 1.1929 16.3603 1.85851 17.1957 2.71429C18.0486 3.596 18.7186 4.59873 19.1973 5.73112C19.6759 6.86352 19.9108 8.08235 19.9108 9.38763C19.9108 10.6929 19.6759 11.9117 19.1973 13.0441C18.7275 14.1661 18.0484 15.1897 17.1957 16.061C16.369 16.9167 15.3421 17.5824 14.1325 18.0578C12.9229 18.5332 11.4609 18.7753 9.74656 18.7753H6.61374V28.4222H0V0H9.74656ZM8.80671 12.9318C9.69435 12.9318 10.3644 12.8453 10.8518 12.6638C11.3565 12.465 11.7742 12.2056 12.0962 11.9117C12.775 11.2807 13.1144 10.4422 13.1144 9.38762C13.1144 8.33302 12.775 7.49454 12.0962 6.86351C11.7655 6.56096 11.3565 6.31892 10.8518 6.14604C10.3731 5.94722 9.69435 5.84349 8.80671 5.84349H6.61374V12.9318H8.80671Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_1645_25547">
+      <rect width="114" height="38" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/Shopify.svg b/src/components/index-page/trusted-by/logos/Shopify.svg
new file mode 100755
index 0000000000..7022211575
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/Shopify.svg
@@ -0,0 +1,62 @@
+<svg
+  version="1.1"
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  x="0"
+  y="0"
+  viewBox="0 0 500 142.8"
+  style="enable-background: new 0 0 500 142.8"
+  xml:space="preserve"
+>
+  <style>
+    .st2 {
+      fill: #fff;
+    }
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    fill="#95bf47"
+    d="M107.4 27.1c-.1-.7-.7-1.1-1.2-1.1s-10.4-.2-10.4-.2-8.3-8-9.1-8.9c-.8-.8-2.4-.6-3-.4 0 0-1.6.5-4.2 1.3-.4-1.4-1.1-3.1-2-4.9-2.9-5.6-7.3-8.6-12.5-8.6-.4 0-.7 0-1.1.1-.2-.2-.3-.4-.5-.5C61.1 1.5 58.2.3 54.7.4 48 .6 41.3 5.5 35.8 14.1c-3.8 6.1-6.7 13.7-7.6 19.6-7.7 2.4-13.1 4.1-13.3 4.1-3.9 1.2-4 1.3-4.5 5C10.2 45.6 0 124.5 0 124.5l85.6 14.8 37.1-9.2c-.1 0-15.2-102.3-15.3-103zm-32.2-7.9c-2 .6-4.2 1.3-6.6 2.1 0-3.4-.5-8.2-2-12.2 5.1.8 7.6 6.6 8.6 10.1zm-11.1 3.4c-4.5 1.4-9.4 2.9-14.3 4.4 1.4-5.3 4-10.5 7.2-14 1.2-1.3 2.9-2.7 4.8-3.5 2 3.9 2.4 9.4 2.3 13.1zM54.9 4.9c1.6 0 2.9.3 4 1.1-1.8.9-3.6 2.3-5.2 4.1-4.3 4.6-7.6 11.7-8.9 18.6-4.1 1.3-8.1 2.5-11.7 3.6C35.5 21.4 44.6 5.2 54.9 4.9z"
+  />
+  <path
+    fill="#5e8e3e"
+    d="M106.2 26c-.5 0-10.4-.2-10.4-.2s-8.3-8-9.1-8.9c-.3-.3-.7-.5-1.1-.5v122.9l37.1-9.2s-15.1-102.3-15.2-103c-.2-.7-.8-1.1-1.3-1.1z"
+  />
+  <path
+    class="st2"
+    d="m65 45.1-4.3 16.1s-4.8-2.2-10.5-1.8c-8.4.5-8.4 5.8-8.4 7.1.5 7.2 19.4 8.8 20.5 25.7.8 13.3-7 22.4-18.4 23.1-13.6.7-21.1-7.3-21.1-7.3l2.9-12.3s7.6 5.7 13.6 5.3c3.9-.2 5.4-3.5 5.2-5.7-.6-9.4-16-8.8-17-24.3-.8-13 7.7-26.1 26.5-27.3 7.3-.5 11 1.4 11 1.4z"
+  />
+  <g class="st0">
+    <path
+      id="s_4_"
+      d="M172.9 79.4c-4.3-2.3-6.5-4.3-6.5-7 0-3.4 3.1-5.6 7.9-5.6 5.6 0 10.6 2.3 10.6 2.3l3.9-12s-3.6-2.8-14.2-2.8c-14.8 0-25.1 8.5-25.1 20.4 0 6.8 4.8 11.9 11.2 15.6 5.2 2.9 7 5 7 8.1 0 3.2-2.6 5.8-7.4 5.8-7.1 0-13.9-3.7-13.9-3.7l-4.2 12s6.2 4.2 16.7 4.2c15.2 0 26.2-7.5 26.2-21-.1-7.3-5.6-12.5-12.2-16.3z"
+    />
+    <path
+      id="h_4_"
+      d="M233.5 54.1c-7.5 0-13.4 3.6-17.9 9l-.2-.1 6.5-34H205l-16.5 86.6h16.9L211 86c2.2-11.2 8-18.1 13.4-18.1 3.8 0 5.3 2.6 5.3 6.3 0 2.3-.2 5.2-.7 7.5l-6.4 33.9h16.9l6.6-35c.7-3.7 1.2-8.1 1.2-11.1.1-9.6-4.9-15.4-13.8-15.4z"
+    />
+    <path
+      id="o_4_"
+      d="M285.7 54.1c-20.4 0-33.9 18.4-33.9 38.9 0 13.1 8.1 23.7 23.3 23.7 20 0 33.5-17.9 33.5-38.9.1-12.1-7-23.7-22.9-23.7zm-8.3 49.7c-5.8 0-8.2-4.9-8.2-11.1 0-9.7 5-25.5 14.2-25.5 6 0 8 5.2 8 10.2 0 10.4-5.1 26.4-14 26.4z"
+    />
+    <path
+      id="p_4_"
+      d="M352 54.1c-11.4 0-17.9 10.1-17.9 10.1h-.2l1-9.1h-15c-.7 6.1-2.1 15.5-3.4 22.5l-11.8 62h16.9l4.7-25.1h.4s3.5 2.2 9.9 2.2c19.9 0 32.9-20.4 32.9-41 0-11.4-5.1-21.6-17.5-21.6zM335.8 104c-4.4 0-7-2.5-7-2.5l2.8-15.8c2-10.6 7.5-17.6 13.4-17.6 5.2 0 6.8 4.8 6.8 9.3 0 11-6.5 26.6-16 26.6z"
+    />
+    <path
+      id="dot_4_"
+      d="M393.7 29.8c-5.4 0-9.7 4.3-9.7 9.8 0 5 3.2 8.5 8 8.5h.2c5.3 0 9.8-3.6 9.9-9.8 0-4.9-3.3-8.5-8.4-8.5z"
+    />
+    <path id="i_4_" d="M370 115.5h16.9l11.5-60h-17z" />
+    <path
+      id="f_4_"
+      d="M441.5 55.4h-11.8l.6-2.8c1-5.8 4.4-10.9 10.1-10.9 3 0 5.4.9 5.4.9l3.3-13.3s-2.9-1.5-9.2-1.5c-6 0-12 1.7-16.6 5.6-5.8 4.9-8.5 12-9.8 19.2l-.5 2.8h-7.9l-2.5 12.8h7.9l-9 47.4h16.9l9-47.4h11.7l2.4-12.8z"
+    />
+    <path
+      id="y_4_"
+      d="M482.3 55.5S471.7 82.2 467 96.8h-.2c-.3-4.7-4.2-41.3-4.2-41.3h-17.8l10.2 55.1c.2 1.2.1 2-.4 2.8-2 3.8-5.3 7.5-9.2 10.2-3.2 2.3-6.8 3.8-9.6 4.8l4.7 14.4c3.4-.7 10.6-3.6 16.6-9.2 7.7-7.2 14.9-18.4 22.2-33.6L500 55.5h-17.7z"
+    />
+  </g>
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/ShopifyMonotone.svg b/src/components/index-page/trusted-by/logos/ShopifyMonotone.svg
new file mode 100755
index 0000000000..31ef8769fc
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/ShopifyMonotone.svg
@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 446.3 127.5"
+  style="enable-background: new 0 0 446.3 127.5"
+  xml:space="preserve"
+  fill="currentColor"
+>
+  <path
+    d="M154.4 70.9c-3.8-2.1-5.8-3.8-5.8-6.2 0-3.1 2.7-5 7-5 5 0 9.4 2.1 9.4 2.1l3.5-10.7s-3.2-2.5-12.7-2.5c-13.2 0-22.4 7.6-22.4 18.2 0 6 4.3 10.6 10 13.9 4.6 2.6 6.2 4.5 6.2 7.2 0 2.9-2.3 5.2-6.6 5.2-6.4 0-12.4-3.3-12.4-3.3l-3.7 10.7s5.6 3.7 14.9 3.7c13.6 0 23.3-6.7 23.3-18.7.2-6.6-4.8-11.2-10.7-14.6zm54.2-22.5c-6.7 0-11.9 3.2-16 8l-.2-.1 5.8-30.4H183l-14.7 77.3h15.1l5-26.4c2-10 7.1-16.1 11.9-16.1 3.4 0 4.7 2.3 4.7 5.6 0 2.1-.2 4.6-.7 6.7l-5.7 30.3h15.1l5.9-31.2c.7-3.3 1.1-7.2 1.1-9.9.2-8.7-4.2-13.8-12.1-13.8zm46.5 0c-18.2 0-30.3 16.4-30.3 34.7 0 11.7 7.2 21.2 20.8 21.2 17.9 0 29.9-16 29.9-34.7.1-10.9-6.2-21.2-20.4-21.2zm-7.4 44.2c-5.2 0-7.3-4.4-7.3-9.9 0-8.7 4.5-22.8 12.7-22.8 5.4 0 7.1 4.6 7.1 9.1 0 9.4-4.5 23.6-12.5 23.6zm66.6-44.2c-10.2 0-16 9-16 9h-.2l.9-8.1h-13.4c-.7 5.5-1.9 13.8-3.1 20.1L272 124.6h15.1l4.2-22.4h.3s3.1 2 8.9 2c17.8 0 29.4-18.2 29.4-36.6 0-10.1-4.5-19.2-15.6-19.2zm-14.4 44.5c-3.9 0-6.2-2.2-6.2-2.2l2.5-14.1c1.8-9.4 6.7-15.7 11.9-15.7 4.6 0 6 4.3 6 8.3 0 9.7-5.8 23.7-14.2 23.7zm51.6-66.2c-4.8 0-8.7 3.8-8.7 8.8 0 4.5 2.8 7.6 7.1 7.6h.2c4.7 0 8.8-3.2 8.9-8.8.1-4.5-2.9-7.6-7.5-7.6zm-21.2 76.5h15.2l10.3-53.6h-15.3zm63.9-53.7h-10.5l.5-2.5c.9-5.2 3.9-9.8 9-9.8 2.7 0 4.8.8 4.8.8l3-11.8s-2.6-1.3-8.2-1.3c-5.4 0-10.7 1.5-14.8 5-5.2 4.4-7.6 10.7-8.8 17.1l-.4 2.5h-7l-2.2 11.4h7l-8 42.3h15.1l8-42.3h10.4l2.1-11.4zm36.4.1s-9.5 23.8-13.7 36.8h-.2c-.3-4.2-3.7-36.8-3.7-36.8h-15.9l9.1 49.2c.2 1.1.1 1.8-.3 2.5-1.8 3.4-4.7 6.7-8.2 9.1-2.8 2.1-6 3.4-8.5 4.3l4.2 12.8c3.1-.7 9.4-3.2 14.8-8.2 6.9-6.5 13.3-16.4 19.8-30l18.5-39.7h-15.9zM74.8 14.8s-1.4.4-3.7 1.1c-.4-1.3-1-2.8-1.8-4.4-2.6-5-6.5-7.7-11.1-7.7-.3 0-.6 0-1 .1-.1-.2-.3-.3-.4-.5-2-2.2-4.6-3.2-7.7-3.1-6 .2-12 4.5-16.8 12.2-3.4 5.4-6 12.2-6.7 17.5-6.9 2.1-11.7 3.6-11.8 3.7-3.5 1.1-3.6 1.2-4 4.5-.3 2.5-9.5 72.9-9.5 72.9l75.6 13.1V14.7c-.6 0-.9.1-1.1.1zm-17.5 5.4c-4 1.2-8.4 2.6-12.7 3.9 1.2-4.7 3.6-9.4 6.4-12.5 1.1-1.1 2.6-2.4 4.3-3.2 1.7 3.6 2.1 8.5 2 11.8zM49.1 4.4c1.4 0 2.6.3 3.6.9-1.6.8-3.2 2.1-4.7 3.6-3.8 4.1-6.7 10.5-7.9 16.6-3.6 1.1-7.2 2.2-10.5 3.2 2.2-9.6 10.3-24.1 19.5-24.3zm-11.6 55c.4 6.4 17.3 7.8 18.3 22.9.7 11.9-6.3 20-16.4 20.6-12.2.8-18.9-6.4-18.9-6.4l2.6-11s6.7 5.1 12.1 4.7c3.5-.2 4.8-3.1 4.7-5.1-.5-8.4-14.3-7.9-15.2-21.7-.8-11.6 6.8-23.3 23.6-24.4 6.5-.4 9.8 1.2 9.8 1.2l-3.8 14.4s-4.3-2-9.4-1.6c-7.4.5-7.5 5.2-7.4 6.4zM61.3 19c0-3-.4-7.3-1.8-10.9 4.6.9 6.8 6 7.8 9.1-1.8.5-3.8 1.1-6 1.8zm16.9 105 31.4-7.8S96.1 24.9 96 24.3c-.1-.6-.6-1-1.1-1-.5 0-9.3-.2-9.3-.2s-5.4-5.2-7.4-7.2V124z"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/logos/Starbucks.svg b/src/components/index-page/trusted-by/logos/Starbucks.svg
new file mode 100644
index 0000000000..ab524019ed
--- /dev/null
+++ b/src/components/index-page/trusted-by/logos/Starbucks.svg
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-3954.3799 -1988.5209 7818.8267 774.2706"
+  width="7818.83"
+  height="774.271"
+  fill="#036242"
+>
+  <style>
+    html[class~="dark"] .st0 {
+      fill: #fff;
+    }
+  </style>
+  <path
+    class="st0"
+    d="M1098.73632422-1567.69088281c0 230.2315-128.47 353.44-368.7428 353.44-235.7509 0-368.7429-126.6192-368.7429-351.2212v-407.9359h265.0926v394.97c0 109.5072 30.0815 157.74 101.4273 157.74 71.35 0 105.9491-43.787 105.9491-168.9267v-383.7833h265.0167Zm-3800.9335-217.0115v555.263h-267.76v-555.263h-224.12v-188.706h716v188.706h-224.12zm675.1753-19.039-65.9365 254.7936h133.6559Zm172.3331 574.3022-44.75-136.2505h-251.4596l-47.5651 136.2505h-266.9439l270.7979-743.9688h338.9572l267.8352 743.9688Zm3812.6403-57.8606-80.2376-192.8932c-47.4172 35.6352-95.2782 67.42-173.2207 67.42-104.9856 0-174.9241-86.4627-174.9241-191.7439 0-106.6887 61.5666-196.2617 170.85-196.2617 69.0508 0 129.1379 34.3793 177.2948 72.609l79.2022-188.5954c-88.5374-44.4887-177.1472-71.7555-298.9525-71.7555-224.9359 0-396.0059 153.996-396.0059 381.7845 0 240.3823 166.2562 392.4856 403.5623 392.4856 130.697-.0001 222.493-30.302 292.4315-73.0494Zm601.9783 57.8604-167.667-271.204v271.204h-260.051v-743.969h260.051v272.43l157.072-272.43h290.505l-244.127 366.672 275.464 377.297h-311.247zm-6201.5079 15.117c168.7028 0 343.6268-60.0871 343.6268-250.5336 0-171.5176-145.9539-218.2672-259.8311-242.8293-85.7949-18.4851-126.9151-27.115-126.9151-61.6044 0-45.4523 57.7921-49.0484 88.7612-49.0484 77.199 0 149.14 31.4886 211.0066 69.1988l69.4226-169.5531c-90.6882-39.0073-200.7834-69.8285-303.6219-69.8285-174.9961 0-311.99 84.5354-311.99 254.6457 0 139.4369 105.8011 193.1511 222.4171 221.9732 80.8331 19.9266 132.5482 25.9278 132.5482 65.9365 0 39.8608-39.7129 51.7151-78.0183 51.7151-85.0552 0-165.8844-37.0423-216.2681-80.09l-83.94 164.2911c90.7566 58.9044 201.2999 95.7269 312.802 95.7269Zm6906.8379 0c168.7029 0 343.6269-60.0871 343.6269-250.5336 0-171.5176-145.954-218.2672-259.9032-242.8293-85.7986-18.4851-126.9188-27.115-126.9188-61.6044 0-45.4523 57.8641-49.0484 88.8333-49.0484 77.1269 0 149.1445 31.4886 210.9345 69.1988l69.4224-169.5531c-90.6886-39.0073-200.7835-69.8285-303.5461-69.8285-175 0-311.99 84.5354-311.99 254.6457 0 139.4369 105.7253 193.1511 222.3413 221.9732 80.833 19.9266 132.5482 25.9278 132.5482 65.9365 0 39.8608-39.6367 51.7151-77.9426 51.7151-85.1307 0-165.96-37.0423-216.2677-80.09l-84.016 164.2911c90.7599 58.9044 201.3748 95.7269 312.8778 95.7269Zm-4147.228-293.2093c90.98-33.2679 140.4726-124.84 140.4726-210.6349 0-175.5575-120.0983-255.2414-290.5043-255.2414h-401.935v743.9688h257.98v-220.7482h65.1247l134.1 220.7482h278.282Zm-120.618-209.5993c0 48.8244-30.8931 77.127-81.6448 77.127h-91.6517v-155.3654h92.5393c48.9725 0 80.7572 24.93 80.7572 75.9776Zm1024.5078 107.7244c96.8376-20.7422 144.3266-75.1241 144.3266-166.18 0-126.5815-94.9063-197.8211-262.0541-197.8211h-424.2361v744.0447h407.4163c196.7815 0 294.73-69.3468 294.73-209.8573.0003-96.9097-61.3462-162.2582-160.1827-170.1863Zm-286.7262-202.7828h93.355c49.4922 0 81.4971 21.3038 81.4971 64.8288v1.9652c0 41.6019-31.1172 65.7923-82.3885 65.7923h-92.4636Zm178.7781 352.2229c0 43.7869-31.8568 69.1988-84.24 69.1988h-94.5385v-139.437h95.43c50.6 0 83.3481 22.3771 83.3481 68.1632Zm3868.7497-496.7933c44.4372 0 81.7239 35.1537 81.7239 81.6174 0 46.57-37.2867 81.7239-81.7239 81.7239-44.5955 0-81.6693-35.1538-81.6693-81.7239 0-46.4637 37.0738-81.6174 81.6693-81.6174Zm0 151.4441c37.29 0 67.2675-30.3 67.2675-69.8267 0-39.4745-29.9777-69.7748-67.2675-69.7748-37.5544 0-67.1582 30.3-67.1582 69.7748 0 39.5264 29.6038 69.8267 67.1582 69.8267Zm-31.1524-117.6232h36.06c22.5655 0 33.2337 8.961 33.2337 27.2056 0 17.3353-10.9359 24.5922-25.1792 26.1379l27.4734 42.0883h-15.6308l-25.9249-41.02h-15.5212v41.02h-14.511Zm14.511 42.5143h14.989c12.8559 0 25.3923-.6391 25.3923-16.0569 0-13.1754-11.4166-14.6148-21.3391-14.6148h-19.0422Z"
+  />
+</svg>
diff --git a/src/components/index-page/trusted-by/style.module.css b/src/components/index-page/trusted-by/style.module.css
new file mode 100644
index 0000000000..e71cc46a31
--- /dev/null
+++ b/src/components/index-page/trusted-by/style.module.css
@@ -0,0 +1,29 @@
+.logos {
+  & .shopify > svg {
+    transition: opacity 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+
+  & > a {
+    transition: background-color 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    &::before {
+      transition: background-color 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+
+    & :is(svg, path) {
+      transition: fill 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+
+    &:not(:hover) svg,
+    &:not(:hover) path {
+      fill: hsl(var(--color-neu-600));
+    }
+
+    html[class~="dark"] & {
+      &:not(:hover) svg,
+      &:not(:hover) path {
+        fill: hsl(var(--color-neu-200));
+      }
+    }
+  }
+}
diff --git a/src/components/index-page/type-system.tsx b/src/components/index-page/type-system.tsx
deleted file mode 100644
index 1b6d954f6e..0000000000
--- a/src/components/index-page/type-system.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useEffect, useRef } from "react"
-import { Query, Schema } from "../code-blocks"
-import { clsx } from "clsx"
-
-export function TypeSystem() {
-  const queryRef = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
-      "code",
-    ) as unknown as HTMLElement[]
-    let line = 0
-    const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12]
-    const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]
-    let timer: any
-
-    const highlightLine = () => {
-      // Reset previous line
-      queryCode.children[queryLines.at(line - 1)!].classList.remove(
-        "highlighted",
-      )
-      responseCode.children[typeLines.at(line - 1)!].classList.remove(
-        "highlighted",
-      )
-
-      queryCode.children[queryLines.at(line)!].classList.add("highlighted")
-      responseCode.children[typeLines.at(line)!].classList.add("highlighted")
-      line = (line + 1) % typeLines.length
-
-      timer = setTimeout(highlightLine, 1_000 + Math.random() * 200)
-    }
-    highlightLine()
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <div className="index-gradient">
-      <section
-        className={clsx(
-          "conf-block container flex gap-14 max-lg:flex-col lg:flex-row-reverse",
-          "lg:*:w-1/2",
-        )}
-        id="type-system"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Describe what's possible <br className="max-lg:hidden" />
-            with a type system
-          </h2>
-          {/*Illustration of a type IDL following a query by line*/}
-          {/*Under: a server <-> client (Capabilities, Requirements)?*/}
-          <p>
-            GraphQL APIs are organized in terms of types and fields, not
-            endpoints. Access the full capabilities of your data from a single
-            endpoint. GraphQL uses types to ensure Apps only ask for what's
-            possible and provide clear and helpful errors. Apps can use types to
-            avoid writing manual parsing code.
-          </p>
-        </div>
-        <div
-          className="nextra-codeblocks grid grid-cols-2 [&_.highlighted]:!bg-primary/50"
-          aria-hidden
-          ref={queryRef}
-        >
-          <Query />
-          <Schema />
-        </div>
-      </section>
-    </div>
-  )
-}
diff --git a/src/components/index-page/use-cases/blur-bean.webp b/src/components/index-page/use-cases/blur-bean.webp
new file mode 100644
index 0000000000..0b3b1a0e96
Binary files /dev/null and b/src/components/index-page/use-cases/blur-bean.webp differ
diff --git a/src/components/index-page/use-cases/index.tsx b/src/components/index-page/use-cases/index.tsx
new file mode 100644
index 0000000000..a190590ead
--- /dev/null
+++ b/src/components/index-page/use-cases/index.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import clsx from "clsx"
+import { useState, Fragment, ReactNode } from "react"
+
+import { Button } from "@/app/conf/_design-system/button"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+import blurBean from "./blur-bean.webp"
+
+type UseCase = {
+  label: string
+  description: ReactNode
+  cta: string
+  href: string
+}
+
+const USE_CASES: UseCase[] = [
+  {
+    label: "A large backend with many services",
+    description:
+      "GraphQL serves as a unified data layer across multiple services. This way you simplify API management and reduce dependencies between teams. It enables efficient data fetching while keeping the API surface flexible and maintainable.",
+    cta: "Best Practices for Large-Scale Systems",
+    href: "/learn/best-practices",
+  },
+  {
+    label: "A mobile app",
+    description: (
+      <>
+        GraphQL lets you request exactly what you need in one call with no
+        overfetching to preserve battery and work on slow networks. With
+        libraries like{" "}
+        <a
+          className="typography-link"
+          href="https://nearform.com/open-source/urql/docs/graphcache/offline/#offline-behavior"
+        >
+          GraphCache
+        </a>{" "}
+        your app can work offline on planes and trains, and versionless schema
+        evolution makes it easy to iterate without breaking old versions of the
+        app.
+      </>
+    ),
+    cta: "Performance Optimization",
+    href: "/learn/performance",
+  },
+  {
+    label: "A frontend-heavy app with advanced UI needs",
+    description:
+      "GraphQL makes building complex UIs easier by allowing components to declare their data needs directly alongside their code with no performance hit. You can aggregate data from multiple services into a single request and maintain consistent state without creating custom endpoints for every view.",
+    cta: "GraphQL Queries",
+    href: "/learn/queries",
+  },
+  {
+    label: "An app with real-time updates",
+    description:
+      "Replace polling and complex WebSocket management with GraphQL subscriptions. Your app gets notified instantly when data changes, using the same queries and types you already have. Real-time becomes part of your API instead of a separate system to maintain.",
+    cta: "Real-time with Subscriptions",
+    href: "/learn/subscriptions",
+  },
+  {
+    label: "A simple full stack TypeScript app",
+    description:
+      "Define your GraphQL schema once and GraphQL Codegen does the rest. Your frontend gets perfectly typed API calls, your backend stays in sync, and any schema changes immediately show up as TypeScript errors throughout your app. Full-stack type safety reduces bugs and makes pivots and refactors easier.",
+    cta: "Schema-First Development",
+    href: "/learn/schema",
+  },
+  {
+    label: "An AI-powered app",
+    description:
+      "Build apps with soft core using GraphQL MCP. Your schema documents itself, so AI agents can discover your API capabilities, understand data relationships, and generate valid queries without custom integration work.",
+    cta: "MCP GraphQL",
+    href: "https://github.com/graphql/graphql-mcp",
+  },
+]
+
+export function UseCases({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const selected = USE_CASES[selectedIndex]
+
+  return (
+    <section
+      id="graphql-use-cases"
+      className={clsx("gql-container dark:text-neu-0", className)}
+      {...props}
+    >
+      <div className="mx-auto flex max-w-[1440px] *:basis-1/2 max-lg:flex-col 3xl:min-h-[800px]">
+        <div className="relative flex flex-col bg-sec-light p-4 dark:bg-neu-50 dark:text-neu-900 lg:p-8 xl:p-16">
+          <h2 className="typography-h2">Is GraphQL right for&nbsp;me?</h2>
+          <p className="typography-body-lg mt-6 text-balance text-neu-800">
+            Choose a use case most relevant for your project and learn how
+            GraphQL can help you build faster, modern solutions.
+          </p>
+
+          <div className="3xl:flex-1" />
+          <div
+            role="tablist"
+            className="mt-8 divide-y divide-sec-dark border border-sec-dark max-lg:sr-only lg:mt-16"
+          >
+            {USE_CASES.map((useCase, i) => (
+              <button
+                role="tab"
+                aria-controls={`graphql-use-case-${i}`}
+                type="button"
+                key={useCase.label}
+                tabIndex={i === 0 ? 0 : -1}
+                onKeyDown={arrowsMoveSideways}
+                onPointerDown={() => setSelectedIndex(i)}
+                onFocus={() => setSelectedIndex(i)}
+                aria-selected={i === selectedIndex ? "true" : undefined}
+                className="gql-focus-visible group flex w-full items-center justify-between gap-6 border-sec-dark px-3 py-4 text-left transition-colors hover:bg-sec-lighter aria-selected:bg-sec-base aria-selected:hover:bg-sec-lighter hover:dark:bg-neu-100/25 dark:aria-selected:bg-sec-darker"
+              >
+                <span className="typography-body-lg">{useCase.label}</span>
+                <ArrowDownIcon className="size-10 shrink-0 -rotate-90 text-sec-dark opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-aria-selected:opacity-100 dark:text-neu-900" />
+              </button>
+            ))}
+          </div>
+          <div className="3xl:flex-1" />
+        </div>
+
+        <div className="relative flex h-auto flex-col bg-sec-base dark:bg-sec-darker">
+          <Stripes />
+          <div className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center">
+            {USE_CASES.map((useCase, i) => (
+              <Fragment key={useCase.label}>
+                <button
+                  type="button"
+                  role="none" // we already have one copy of this tab
+                  onPointerDown={() => setSelectedIndex(i)}
+                  onFocus={() => setSelectedIndex(i)}
+                  className={clsx(
+                    "z-[1] flex w-full items-center justify-between gap-6 border-b border-sec-dark bg-sec-light px-3 py-4 text-left first:border-t hover:bg-sec-lighter dark:bg-sec-darker dark:hover:bg-sec-dark max-lg:dark:bg-neu-50 lg:hidden",
+                  )}
+                >
+                  <span className="typography-body-lg text-neu-900">
+                    {useCase.label}
+                  </span>
+                  <ArrowDownIcon className="size-6 shrink-0 text-sec-dark transition-transform [[aria-selected=false]>&]:rotate-180" />
+                </button>
+                <div
+                  role="tabpanel"
+                  id={`graphql-use-case-${i}`}
+                  className={clsx(
+                    "relative h-full flex-1 p-8 lg:p-12 xl:p-16",
+                    selectedIndex === i ? "border-b border-sec-dark" : "hidden",
+                  )}
+                >
+                  <div className="relative z-10 my-auto max-h-[528px] max-w-2xl">
+                    <h3 className="typography-body-lg text-sec-darker dark:text-sec-lighter max-lg:hidden">
+                      {useCase.label}
+                    </h3>
+                    <p className="typography-h3 text-neu-800 lg:mt-10 lg:max-xl:text-xl">
+                      {useCase.description}
+                    </p>
+                    <div className="mt-8 flex xl:mt-[120px]">
+                      <Button href={useCase.href} variant="primary">
+                        {useCase.cta}
+                        <ArrowDownIcon className="size-6 shrink-0 -rotate-90 text-neu-0" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Stripes() {
+  const mask = `url(${blurBean.src})`
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskPosition: "bottom 150% right 50%",
+        WebkitMaskPosition: "bottom 150% right 50%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(0deg,_hsl(var(--color-sec-dark))_0%,_hsl(var(--color-sec-base))_100%)] dark:bg-[linear-gradient(0deg,_hsl(var(--color-sec-dark))_0%,_hsl(var(--color-sec-darker))_100%)]"
+        oddClassName="bg-[linear-gradient(0deg,_hsl(var(--color-sec-lighter))_0%,_hsl(79_81%_40%/0)_100%)] dark:bg-[linear-gradient(0deg,_hsl(var(--color-neu-dark))_0%,_rgba(133,185,19,0.00)_100%)]"
+      />
+    </div>
+  )
+}
+
+function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
+  if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+    const previousElement = event.currentTarget.previousElementSibling
+    if (previousElement) {
+      event.preventDefault()
+      ;(previousElement as HTMLElement).focus()
+    }
+  } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+    const nextElement = event.currentTarget.nextElementSibling
+    if (nextElement) {
+      event.preventDefault()
+      ;(nextElement as HTMLElement).focus()
+    }
+  }
+}
diff --git a/src/components/index-page/what-is-graphql/api-gateway-query.mdx b/src/components/index-page/what-is-graphql/api-gateway-query.mdx
new file mode 100644
index 0000000000..ff554c21ef
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/api-gateway-query.mdx
@@ -0,0 +1,11 @@
+```graphql word-wrap=false
+query getCity($city: String) {
+  cities(name: $city) {
+    population
+    weather {
+      temperature
+      precipitation
+    }
+  }
+}
+```
diff --git a/src/components/index-page/what-is-graphql/api-gateway-response.mdx b/src/components/index-page/what-is-graphql/api-gateway-response.mdx
new file mode 100644
index 0000000000..2e24120f72
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/api-gateway-response.mdx
@@ -0,0 +1,15 @@
+```json word-wrap=false
+{
+  "data": {
+    "cities": [
+      {
+        "population": 8675309,
+        "weather": {
+          "temperature": 22.5,
+          "precipitation": 1.2
+        }
+      }
+    ]
+  }
+}
+```
diff --git a/src/components/index-page/what-is-graphql/icons.tsx b/src/components/index-page/what-is-graphql/icons.tsx
new file mode 100644
index 0000000000..e2430faf6e
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/icons.tsx
@@ -0,0 +1,80 @@
+import { type SVGProps } from "react"
+
+export function DesktopIcon(props: SVGProps<SVGPathElement>) {
+  return <path d="M22 4V18H16V20H8V18H2V4H22ZM4 6V16H20V6H4Z" {...props} />
+}
+
+export function PhoneIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M18 21H6V3H18V21ZM8 19H16V5H14V7H10V5H8V19ZM13 17H11V15H13V17Z"
+      {...props}
+    />
+  )
+}
+
+export function TelevisionIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M9 2H7V4H9V2ZM17 2H15V4H17V2ZM22 20V6H15V4H13V6H11V4H9V6H2V20H22ZM4 18V8H20V18H4Z"
+      {...props}
+    />
+  )
+}
+
+export function TabletIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path d="M20 22H4V2H20V22ZM6 20H18V4H6V20ZM13 18H11V16H13V18Z" {...props} />
+  )
+}
+
+export function WristwatchIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M16 22H8V18H3V6H8V2H16V6H21V18H16V22ZM5 16H19V8H5V16Z"
+      {...props}
+    />
+  )
+}
+
+export function LabirynthIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M13 10H14V14H10V10H11V8H8V16H16V8H18V18H6V6H11V4H4V20H20V4H22V22H2V2H13V10Z"
+      {...props}
+    />
+  )
+}
+
+export function ServerIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M21 21H3V3H21V21ZM5 19H19V13H5V19ZM9 17H7V15H9V17ZM5 11H19V5H5V11ZM9 9H7V7H9V9Z"
+      {...props}
+    />
+  )
+}
+
+export function ModemIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <>
+      <path
+        d="M16 7H22V23H20V16H4V23H2V7H14V5H16V7ZM4 14H20V9H4V14ZM14 13H12V11H14V13ZM18 13H16V11H18V13ZM13 5H11V3H13V5ZM19 5H17V3H19V5ZM17 3H13V1H17V3Z"
+        {...props}
+      />
+      <path
+        d="M16 7H22V23H2V7H14V5H16V7ZM4 21H20V16H4V21ZM14 20H12V18H14V20ZM18 20H16V18H18V20ZM4 14H20V9H4V14ZM14 13H12V11H14V13ZM18 13H16V11H18V13ZM13 5H11V3H13V5ZM19 5H17V3H19V5ZM17 3H13V1H17V3Z"
+        {...props}
+      />
+    </>
+  )
+}
+
+export function CloudIcon(props: SVGProps<SVGPathElement>) {
+  return (
+    <path
+      d="M22 20H2V18H22V20ZM2 18H0V12H2V18ZM24 18H22V12H24V18ZM18 12V14H16V12H18ZM4 12H2V10H4V12ZM10 12H8V10H10V12ZM20 10H22V12H18V8H20V10ZM8 10H4V8H8V10ZM10 8H8V6H10V8ZM18 8H16V6H18V8ZM16 6H10V4H16V6Z"
+      {...props}
+    />
+  )
+}
diff --git a/src/components/index-page/what-is-graphql/index.tsx b/src/components/index-page/what-is-graphql/index.tsx
new file mode 100644
index 0000000000..6e71873dbc
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/index.tsx
@@ -0,0 +1,27 @@
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import { Button } from "@/app/conf/_design-system/button"
+
+import { Wires } from "./wires"
+
+export function WhatIsGraphQL() {
+  return (
+    <section id="what-is-graphql" className="gql-container gql-section">
+      <SectionLabel>Introduction</SectionLabel>
+      <div className="justify-between gap-4 lg:flex">
+        <h2 className="typography-h2 mt-6">What is GraphQL?</h2>
+        <p className="typography-body-lg mt-6 max-w-[624px] text-pretty text-neu-800">
+          GraphQL is an open‑source query language for APIs and
+          a&nbsp;server‑side runtime. It provides a strongly‑typed schema to
+          define relationships between data, making APIs more flexible and
+          predictable. And it isn’t tied to a specific database or storage
+          engine — it works with your existing code and data, making it easier
+          to evolve APIs over time.
+        </p>
+      </div>
+      <Wires className="mt-6 w-full max-sm:my-12" />
+      <Button className="mt-6 sm:mx-auto sm:w-fit" href="/learn">
+        Learn GraphQL
+      </Button>
+    </section>
+  )
+}
diff --git a/src/components/index-page/what-is-graphql/wires.module.css b/src/components/index-page/what-is-graphql/wires.module.css
new file mode 100644
index 0000000000..52b608861f
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/wires.module.css
@@ -0,0 +1,96 @@
+.wires {
+  & rect,
+  & path {
+    transition:
+      fill 1s linear,
+      stroke 1s linear,
+      opacity 1s linear,
+      stroke-width 1s linear;
+  }
+}
+
+.highlightsQuery,
+.highlightsResponse {
+  overflow: hidden;
+
+  & pre > code:global(.nextra-code) > span {
+    position: relative;
+
+    &::before {
+      transition: opacity 1s ease-out;
+    }
+  }
+}
+
+.highlightsQuery {
+  & pre > code:global(.nextra-code) > span::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition: opacity 1s ease-out;
+    transition-delay: 1s;
+    opacity: var(--highlight-opacity, 0);
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      @apply bg-pri-lighter/20 dark:bg-pri-light/5;
+    }
+    &:nth-child(4) {
+      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-light/20 dark:from-pri-light/5 dark:to-sec-light/5;
+      background-image: linear-gradient(
+        to bottom in oklch,
+        var(--tw-gradient-stops)
+      );
+    }
+    &:nth-child(5),
+    &:nth-child(6),
+    &:nth-child(7) {
+      @apply bg-sec-light/20 dark:bg-sec-light/5;
+    }
+  }
+}
+
+.highlightsResponse {
+  & pre > code:global(.nextra-code) > span::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition-delay: 1s;
+
+    &:nth-child(3),
+    &:nth-child(4),
+    &:nth-child(5) {
+      @apply bg-pri-lighter/20 dark:bg-pri-light/5;
+    }
+    &:nth-child(6) {
+      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-light/20 dark:from-pri-light/5 dark:to-sec-light/5;
+      background-image: linear-gradient(
+        to bottom in oklch,
+        var(--tw-gradient-stops)
+      );
+    }
+    &:nth-child(7),
+    &:nth-child(8),
+    &:nth-child(9) {
+      @apply bg-sec-light/20 dark:bg-sec-light/5;
+    }
+  }
+}
+
+@keyframes query-exit {
+  from {
+    transform: rotateX(0deg) translateY(0px) translateZ(150px);
+  }
+  to {
+    transform: rotateX(-90deg) translateY(60px) translateZ(150px);
+  }
+}
+
+@keyframes query-exit-sm {
+  from {
+    transform: rotateY(0deg) translateX(0px) translateZ(150px);
+  }
+  to {
+    transform: rotateY(90deg) translateX(60px) translateZ(150px);
+  }
+}
diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
new file mode 100644
index 0000000000..963bf4efd3
--- /dev/null
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -0,0 +1,892 @@
+import clsx from "clsx"
+import {
+  ComponentPropsWithoutRef,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react"
+import { throttle } from "@/app/conf/_design-system/utils/throttle"
+
+import { Code } from "nextra/components"
+
+import { Pre } from "@/components/pre"
+
+import {
+  DesktopIcon,
+  PhoneIcon,
+  TelevisionIcon,
+  TabletIcon,
+  WristwatchIcon,
+  CloudIcon,
+  LabirynthIcon,
+  ModemIcon,
+  ServerIcon,
+} from "./icons"
+import QueryMdx from "./api-gateway-query.mdx"
+import ResponseMdx from "./api-gateway-response.mdx"
+import styles from "./wires.module.css"
+
+const bigScreenClientEdges = [
+  "M514.5 220H424.5V76H72",
+  "M446 220H424.5V112H144",
+  "M446 220H424.5V147H72",
+  "M446 220H424.5V184H144",
+  "M528 220H514.206L72 220",
+  "M528 220L424.866 220V256H144",
+  "M446 220L424.5 220V291.75H72",
+  "M528.5 220H424.5V328H144",
+  "M528 220H424.772V365H72",
+]
+
+function ClientEdges({
+  highlightedEdge,
+  highlightedVisible,
+  edges,
+  baseStroke = "url(#paint_lr_light_linear_671_9150)",
+  highlightedStroke = "url(#paint_lr_dark_linear_671_9150)",
+}: {
+  highlightedEdge?: number
+  highlightedVisible: boolean
+  edges: string[]
+  baseStroke?: string
+  highlightedStroke?: string
+}) {
+  return (
+    <>
+      {moveHighlightedToTop(
+        highlightedEdge,
+        edges.map((path, index) => (
+          <Fragment key={index}>
+            <path d={path} stroke={baseStroke} strokeWidth="1" />
+            {highlightedEdge === index && (
+              <path
+                d={path}
+                stroke={highlightedStroke}
+                strokeWidth="3"
+                className={highlightedVisible ? "opacity-100" : "opacity-0"}
+              />
+            )}
+          </Fragment>
+        )),
+      )}
+    </>
+  )
+}
+
+const bigScreenServerEdges = [
+  "M696 159.5H811.5V75H1176",
+  "M696 175.5L833.5 175.5V112H1104.5",
+  "M696 191.5H855.5V148.5H1176",
+  "M696 206.5L876 206.5V184.5H1104",
+  "M696 220.5H704.5H1176",
+  "M696 234.5L876 234.5V256.5H1104",
+  "M696 249.5H855.5V292.5H1176",
+  "M696 265.5L833.5 265.5V329H1104",
+  "M696 281.5H811.5V366H1176",
+]
+
+function ServerEdges({
+  highlighted,
+  highlightedVisible,
+  edges,
+  baseStroke,
+  oddStroke,
+  evenStroke,
+}: {
+  highlighted: number[]
+  highlightedVisible: boolean
+  edges: string[]
+  baseStroke: string
+  oddStroke: string
+  evenStroke: string
+}) {
+  return (
+    <>
+      {edges.map((d, index) => {
+        const isHighlighted = highlighted?.includes(index)
+        return (
+          <Fragment key={index}>
+            <path d={d} strokeWidth={1} className={baseStroke} />
+            {isHighlighted && (
+              <path
+                d={d}
+                strokeWidth={3}
+                className={clsx(
+                  highlightedVisible ? "opacity-100" : "opacity-0",
+                  index % 2 ? oddStroke : evenStroke,
+                )}
+              />
+            )}
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+function Box({
+  transform,
+  children,
+  className,
+}: {
+  transform: string
+  fill?: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <g
+      transform={transform}
+      className={clsx(
+        "fill-neu-100 [&>path]:translate-x-3 [&>path]:translate-y-3 sm:[&>path]:translate-x-4 sm:[&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600",
+        className,
+      )}
+    >
+      <rect className="size-[48px] sm:size-[56px]" />
+      {children}
+    </g>
+  )
+}
+
+/* eslint-disable react/jsx-key */
+const bigScreenClientBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(16, 48)", <DesktopIcon />],
+  ["translate(88, 84)", <PhoneIcon />],
+  ["translate(16, 120)", <PhoneIcon />],
+  ["translate(88, 156)", <WristwatchIcon />],
+  ["translate(16, 192)", <TelevisionIcon />],
+  ["translate(88, 228)", <DesktopIcon />],
+  ["translate(16, 264)", <TabletIcon />],
+  ["translate(88, 300)", <PhoneIcon />],
+  ["translate(16, 336)", <WristwatchIcon />],
+]
+/* eslint-enable react/jsx-key */
+
+function ClientBoxes({
+  highlighted,
+  boxes,
+}: {
+  highlighted?: number
+  boxes: Array<[string, React.ReactNode]>
+}) {
+  return (
+    <>
+      {boxes.map(([transform, children], index) => {
+        const isHighlighted = index === highlighted
+        return (
+          <Box
+            key={index}
+            transform={transform}
+            className={
+              isHighlighted
+                ? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0 [&_rect]:fill-neu-300 dark:[&_rect]:fill-neu-400"
+                : undefined
+            }
+          >
+            {children}
+          </Box>
+        )
+      })}
+    </>
+  )
+}
+
+/* eslint-disable react/jsx-key */
+const bigScreenServerBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(1176, 48)", <LabirynthIcon />],
+  ["translate(1104, 84)", <ServerIcon />],
+  ["translate(1176, 120)", <ModemIcon />],
+  ["translate(1104, 156)", <CloudIcon />],
+  ["translate(1176, 192)", <LabirynthIcon />],
+  ["translate(1104, 228)", <ModemIcon />],
+  ["translate(1176, 264)", <CloudIcon />],
+  ["translate(1104, 300)", <CloudIcon />],
+  ["translate(1176, 336)", <ServerIcon />],
+]
+/* eslint-enable react/jsx-key */
+
+function ServerBoxes({
+  highlighted,
+  boxes,
+}: {
+  highlighted: number[]
+  boxes: Array<[string, React.ReactNode]>
+}) {
+  return (
+    <>
+      {boxes.map(([transform, children], index) => {
+        const isHighlighted = highlighted.includes(index)
+        return (
+          <Box
+            key={index}
+            transform={transform}
+            className={
+              isHighlighted
+                ? index % 2
+                  ? "fill-pri-lighter [&_path]:fill-pri-darker dark:[&_path]:fill-pri-lighter dark:[&_rect]:fill-pri-darker"
+                  : "fill-sec-light [&_path]:fill-sec-darker dark:[&_path]:fill-sec-lighter dark:[&_rect]:fill-sec-darker"
+                : undefined
+            }
+          >
+            {children}
+          </Box>
+        )
+      })}
+    </>
+  )
+}
+
+function SVGDefinitions() {
+  return (
+    <defs>
+      <linearGradient
+        id="paint_lr_light_linear_671_9150"
+        x1="446"
+        y1="41.7739"
+        x2="266.078"
+        y2="41.7739"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-50))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+      <linearGradient id="paint_lr_dark_linear_671_9150">
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop stopColor="hsl(var(--color-neu-700))">
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+      <linearGradient
+        id="paint_lr_dark_linear_static_671_9150"
+        x1="446"
+        y1="-17.6347"
+        x2="204.096"
+        y2="-17.6347"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="hsl(var(--color-neu-700))" />
+        <stop offset="1" stopColor="hsl(var(--color-neu-300))" />
+      </linearGradient>
+
+      <linearGradient
+        id="paint_sr_light_linear_671_9150"
+        x1="696"
+        y1="0"
+        x2="937.904"
+        y2="0"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-0))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+
+      <linearGradient id="paint_sr_sec_highlight_linear_static_671_9150">
+        <stop
+          stopColor="hsl(var(--color-sec-dark))"
+          className="dark:[stop-color:hsl(var(--color-sec-light))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        />
+      </linearGradient>
+      <linearGradient id="paint_sr_sec_highlight_linear_671_9150">
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-dark))"
+          className="dark:[stop-color:hsl(var(--color-sec-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
+      <linearGradient id="paint_sr_pri_highlight_linear_static_671_9150">
+        <stop
+          stopColor="hsl(var(--color-pri-dark))"
+          className="dark:[stop-color:hsl(var(--color-pri-light))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        />
+      </linearGradient>
+      <linearGradient id="paint_sr_pri_highlight_linear_671_9150">
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-dark))"
+          className="dark:[stop-color:hsl(var(--color-pri-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
+      <filter id="what-is-graphql--code-backdrop">
+        <feGaussianBlur stdDeviation="0 16" in="SourceGraphic" result="blur" />
+        <feBlend
+          in="blur"
+          in2="SourceGraphic"
+          mode="multiply"
+          result="multiply"
+        />
+        <feColorMatrix
+          type="saturate"
+          values="2.0"
+          in="multiply"
+          result="saturated"
+        />
+        <feGaussianBlur stdDeviation="0 2" in="saturated" result="blur1" />
+        <feColorMatrix
+          type="saturate"
+          values="1.7"
+          in="blur1"
+          result="blur1sat"
+        />
+        <feGaussianBlur stdDeviation="0 1" in="saturated" result="blur2" />
+        <feBlend in="blur1sat" in2="blur2" mode="multiply" result="blur" />
+      </filter>
+      <filter id="what-is-graphql--code-backdrop-2">
+        <feMorphology operator="erode" radius="2 2" />
+        <feComponentTransfer>
+          <feFuncR type="linear" slope="1.5" />
+          <feFuncG type="linear" slope="1.5" />
+          <feFuncB type="linear" slope="1.5" />
+          <feFuncA type="linear" slope="1" />
+        </feComponentTransfer>
+        <feGaussianBlur stdDeviation="16" />
+      </filter>
+      <filter id="what-is-graphql--code-backdrop-2-dark">
+        <feMorphology in="SourceGraphic" operator="dilate" radius="0 2" />
+        <feGaussianBlur stdDeviation="16" result="blur" />
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.01 0.5"
+          numOctaves="1"
+          seed="5"
+          result="turbulence"
+        />
+        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
+        <feDisplacementMap
+          in="blur"
+          in2="softMap"
+          scale="110"
+          xChannelSelector="R"
+          yChannelSelector="G"
+        />
+      </filter>
+    </defs>
+  )
+}
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
+    <Pre
+      {...props}
+      tabIndex={-1}
+      containerClassName="!absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-sm:scale-90 pointer-events-auto"
+      // the border color on white and black backgrounds blends into border-neu-200 (and border-neu-50 in dark mode)
+      className="overflow-hidden border-none !bg-transparent before:absolute before:inset-0 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-[rgba(55,72,13,0.12)] before:bg-clip-border before:[backdrop-filter:url(#what-is-graphql--code-backdrop)] after:absolute after:inset-[1.5px] after:z-[-9] after:rounded-[5px] after:bg-[linear-gradient(to_right,transparent,hsl(var(--color-neu-0))_15%,hsl(var(--color-neu-0))_85%,transparent)] after:[backdrop-filter:url(#what-is-graphql--code-backdrop-2)] safari:after:[backdrop-filter:blur(12px)] dark:before:border-[rgba(235,252,191,0.2)] dark:before:bg-none dark:before:backdrop-blur-xl dark:before:[backdrop-filter:url(#what-is-graphql--code-backdrop-2-dark)] dark:after:bg-[linear-gradient(to_right,hsl(var(--color-neu-0)/0.5),hsl(var(--color-neu-0)/.8)_10%,hsl(var(--color-neu-0)/.8)_83%,hsl(var(--color-neu-0)/0.4))] dark:after:[backdrop-filter:blur(24px)]"
+    >
+      {props.children}
+    </Pre>
+  ),
+  code: Code,
+}
+
+export function Wires({ className }: { className?: string }) {
+  const STEPS = 3
+  const [step, inc] = useReducer(x => (x + 1) % STEPS, 0)
+
+  const ref = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    const animate = document.querySelector(
+      "#paint_sr_pri_highlight_linear_671_9150 animate",
+    )
+
+    const onAnimationRepeat = () => {
+      inc()
+    }
+
+    if (animate && animate instanceof SVGAnimateElement) {
+      animate.addEventListener("repeatEvent", onAnimationRepeat)
+    }
+
+    return () => animate?.removeEventListener("repeatEvent", onAnimationRepeat)
+  }, [])
+
+  return (
+    <div
+      className={clsx(
+        className,
+        "relative isolate max-sm:flex max-sm:min-h-[240px] max-sm:items-center",
+        styles.wires,
+      )}
+    >
+      <MobileDiagram step={step} />
+      <svg
+        id="what-is-graphql--wires"
+        width="1248"
+        height="448"
+        viewBox="0 0 1248 448"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
+        className="relative h-auto min-h-[320px] w-full max-sm:hidden"
+        ref={ref}
+      >
+        <ClientEdges
+          highlightedEdge={0}
+          highlightedVisible={step === 0}
+          edges={bigScreenClientEdges}
+        />
+        <ClientBoxes
+          highlighted={step === 0 ? 0 : undefined}
+          boxes={bigScreenClientBoxes}
+        />
+        <ServerEdges
+          highlighted={[1, 6]}
+          highlightedVisible={step > 0}
+          edges={bigScreenServerEdges}
+          baseStroke="stroke-[url(#paint_sr_light_linear_671_9150)]"
+          oddStroke="stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
+          evenStroke="stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]"
+        />
+        <ServerBoxes
+          highlighted={step > 0 ? [1, 6] : []}
+          boxes={bigScreenServerBoxes}
+        />
+        <SVGDefinitions />
+      </svg>
+
+      {process.env.NODE_ENV === "development" && (
+        <NextStepButton onClick={inc} />
+      )}
+
+      <div
+        aria-hidden={step === 2}
+        data-step={step}
+        className={clsx(
+          "pointer-events-none absolute inset-0 transition duration-[600ms]",
+          styles.highlightsQuery,
+          step === 2
+            ? "[transform:rotateX(90deg)_translateY(60px)_translateZ(150px)] max-sm:[transform:rotateY(-90deg)_translateX(-60px)_translateZ(150px)]"
+            : "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)] max-sm:[transform:rotateY(0deg)_translateX(0px)_translateZ(150px)]",
+          "data-[step=2]:[animation:--animation] max-sm:data-[step=2]:[animation:--animation-sm]",
+        )}
+        style={
+          {
+            "--animation": `${styles["query-exit"]} 600ms`,
+            "--animation-sm": `${styles["query-exit-sm"]} 600ms`,
+            "--highlight-opacity": step === 1 ? 1 : 0,
+          } as React.CSSProperties
+        }
+      >
+        <QueryMdx components={components} />
+      </div>
+      <div
+        aria-hidden={step !== 2}
+        className={clsx(
+          "[&_pre]:[anchor-name:--response-pre]",
+          "pointer-events-none absolute inset-0 transition duration-[600ms]",
+          styles.highlightsResponse,
+          step === 2
+            ? "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)]"
+            : step === 1
+              ? "!duration-0 [transform:rotateX(90deg)_translateY(60px)_translateZ(150px)] max-sm:[transform:rotateY(-90deg)_translateX(-60px)_translateZ(150px)]"
+              : "[transform:rotateX(-90deg)_translateY(-60px)_translateZ(150px)] max-sm:[transform:rotateY(90deg)_translateX(60px)_translateZ(150px)]",
+        )}
+      >
+        <ResponseMdx components={components} />
+      </div>
+      <Curtain />
+    </div>
+  )
+}
+
+function moveHighlightedToTop(index: number | undefined, nodes: ReactNode[]) {
+  if (index === undefined) return nodes
+  const newNodes = nodes.filter((_, i) => i !== index)
+  newNodes.push(nodes[index] as ReactNode)
+  return newNodes
+}
+
+function Curtain() {
+  return (
+    <div
+      // we obscure part of the rotation with gradient so it's not garish
+      className="pointer-events-none absolute bottom-0 left-[anchor(left)] right-[anchor(right)] z-[2] h-[calc((100%-anchor-size(height))/2)] -translate-x-1/2 [position-anchor:--response-pre] max-md:hidden"
+      style={{
+        background:
+          "linear-gradient(to bottom, hsl(var(--color-neu-0)/0), hsl(var(--color-neu-0)) 50%)",
+      }}
+    />
+  )
+}
+
+const mobileClientEdges = [
+  "M154 157L155 85L24 84.8443L24 48",
+  "M154 157L154 84.9209L88 84.9209L88 48",
+  "M154 107.855L154 157L155 48",
+  "M154 157L154 85L219 85L219 48",
+  "M154 157L154.002 85L284 85L284 48",
+]
+
+/* eslint-disable react/jsx-key */
+const mobileClientBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(0, 0)", <DesktopIcon />],
+  ["translate(65, 0)", <PhoneIcon />],
+  ["translate(130, 0)", <PhoneIcon />],
+  ["translate(195, 0)", <WristwatchIcon />],
+  ["translate(260, 0)", <TelevisionIcon />],
+]
+
+const mobileServerBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(2, 454)", <LabirynthIcon />],
+  ["translate(67, 454)", <ServerIcon />],
+  ["translate(132, 454)", <ModemIcon />],
+  ["translate(197, 454)", <CloudIcon />],
+  ["translate(262, 454)", <CloudIcon />],
+]
+/* eslint-enable react/jsx-key */
+
+const mobileServerEdges = [
+  "M181.918 344L181.916 426L220.335 426L220.337 454",
+  "M210.512 344L210.512 398L286.008 398L286.008 454",
+  "M156.002 344L156.002 345.948L156.002 454",
+  "M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454",
+  "M130.094 344L130.094 426L91.6745 426L91.6745 454",
+]
+
+function MobileSVGDefinitions() {
+  return (
+    <defs>
+      <linearGradient
+        id="smallscreen_linear1"
+        x1="0.142323"
+        y1="124.751"
+        x2="0.142321"
+        y2="-122.582"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-50))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+      <linearGradient
+        id="smallscreen_linear1_high"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop stopColor="hsl(var(--color-neu-700))">
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
+      <linearGradient
+        id="smallscreen_linear2"
+        x1="66.6927"
+        y1="344"
+        x2="66.6927"
+        y2="399.436"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-50))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+
+      <linearGradient
+        id="smallscreen_linear2_pri"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-dark))"
+          className="dark:[stop-color:hsl(var(--color-pri-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
+      <linearGradient
+        id="smallscreen_linear2_sec"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-dark))"
+          className="dark:[stop-color:hsl(var(--color-sec-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+    </defs>
+  )
+}
+
+function MobileDiagram({ step }: { step: number }) {
+  return (
+    <svg
+      width="310"
+      height="490"
+      viewBox="0 0 310 502"
+      fill="none"
+      preserveAspectRatio="xMidYMid"
+      xmlns="http://www.w3.org/2000/svg"
+      className="mx-auto sm:hidden"
+      aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
+    >
+      <ClientEdges
+        edges={mobileClientEdges}
+        highlightedEdge={0}
+        highlightedVisible={step === 0}
+        baseStroke="url(#smallscreen_linear1)"
+        highlightedStroke="url(#smallscreen_linear1_high)"
+      />
+      <ClientBoxes
+        boxes={mobileClientBoxes}
+        highlighted={step === 0 ? 0 : undefined}
+      />
+      <ServerEdges
+        edges={mobileServerEdges}
+        highlighted={[1, 4]}
+        highlightedVisible={step > 0}
+        baseStroke="stroke-[url(#smallscreen_linear2)]"
+        evenStroke="stroke-[url(#smallscreen_linear2_pri)]"
+        oddStroke="stroke-[url(#smallscreen_linear2_sec)]"
+      />
+      <ServerBoxes
+        highlighted={step > 0 ? [1, 4] : []}
+        boxes={mobileServerBoxes}
+      />
+      <MobileSVGDefinitions />
+    </svg>
+  )
+}
+
+const NextStepButton =
+  process.env.NODE_ENV === "development"
+    ? ({ onClick }: { onClick: () => void }) => {
+        const backgroundRef = useRef<HTMLButtonElement>(null)
+
+        const onBackgroundClick = useMemo(
+          () =>
+            throttle(() => {
+              const button = backgroundRef.current
+              if (!button) return
+              button.disabled = true
+              onClick()
+              setTimeout(() => {
+                button.disabled = false
+              }, 750)
+            }, 500),
+          [],
+        )
+
+        return (
+          <button
+            ref={backgroundRef}
+            tabIndex={-1}
+            onClick={onBackgroundClick}
+            aria-label="Next step"
+            className="absolute inset-0 outline-none"
+          />
+        )
+      }
+    : () => null
diff --git a/src/components/index-page/who-is-using.tsx b/src/components/index-page/who-is-using.tsx
deleted file mode 100644
index d7c18ebbf3..0000000000
--- a/src/components/index-page/who-is-using.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Link from "next/link"
-import facebookLogo from "../../../public/users/logos/facebook.png"
-import githubLogo from "../../../public/users/logos/github.png"
-import pinterestLogo from "../../../public/users/logos/pinterest.png"
-import intuitLogo from "../../../public/users/logos/intuit.png"
-import courseraLogo from "../../../public/users/logos/coursera.png"
-import shopifyLogo from "../../../public/users/logos/shopify.png"
-import NextImage from "next-image-export-optimizer"
-import { clsx } from "clsx"
-
-export function WhoIsUsing() {
-  return (
-    <div className="index-gradient">
-      <section id="whos-using">
-        <div className="conf-block container flex flex-col items-center">
-          <h2>Who's using GraphQL?</h2>
-          <p className="text-balance text-center">
-            Facebook's mobile apps have been powered by GraphQL since 2012. A
-            GraphQL spec was open sourced in 2015 and is now available in many
-            environments and used by teams of all sizes.
-          </p>
-          <div className="mb-20 mt-10 flex flex-wrap justify-center gap-10 lg:gap-16">
-            {/* Waiting for permission from some of the below */}
-            {[
-              {
-                href: "https://facebook.com",
-                alt: "Facebook",
-                src: facebookLogo,
-              },
-              {
-                href: "https://docs.github.com/en/graphql",
-                alt: "GitHub",
-                src: githubLogo,
-                className: "dark:invert",
-              },
-              {
-                href: "https://pinterest.com",
-                alt: "Pinterest",
-                src: pinterestLogo,
-              },
-              {
-                href: "https://intuit.com",
-                alt: "Intuit",
-                src: intuitLogo,
-              },
-              {
-                href: "https://coursera.org",
-                alt: "Coursera",
-                src: courseraLogo,
-              },
-              {
-                href: "https://shopify.com",
-                alt: "Shopify",
-                src: shopifyLogo,
-              },
-            ].map(({ alt, src, className, href }) => (
-              <a
-                key={alt}
-                href={href}
-                target="_blank"
-                rel="noreferrer"
-                className="shrink-0"
-              >
-                <NextImage
-                  src={src}
-                  alt={alt}
-                  title={alt}
-                  className={clsx("h-16 w-auto lg:h-28", className)}
-                />
-              </a>
-            ))}
-            {/** /}
-             <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
-             <img src="/users/logos/twitter.png" title="Twitter" className="round" />
-             </a>
-             {/**/}
-            {/** /}
-             <a href="https://www.airbnb.com/" target="_blank" rel="noopener noreferrer">
-             <img src="/users/logos/airbnb.png" title="Airbnb" className="round" />
-             </a>
-             {/**/}
-          </div>
-
-          <Link href="/users" className="index-button">
-            More GraphQL Users
-          </Link>
-        </div>
-      </section>
-    </div>
-  )
-}
diff --git a/src/components/index-page/without-version.tsx b/src/components/index-page/without-version.tsx
deleted file mode 100644
index 64e9f50cfc..0000000000
--- a/src/components/index-page/without-version.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useEffect, useRef } from "react"
-import { V1, V2, V3, V4, V5 } from "../code-blocks"
-import { clsx } from "clsx"
-
-export function WithoutVersion() {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    let i = -1
-    const inView = ref.current!
-
-    function move() {
-      i = (i + 1) % 7
-      inView.className = "step" + i
-    }
-
-    move()
-    const interval = setInterval(move, 2200)
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
-
-  return (
-    <div className="index-gradient">
-      <section
-        className="conf-block container flex justify-around gap-14 max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2"
-        id="without-versions"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Evolve your API <br className="max-lg:hidden" />
-            without versions
-          </h2>
-          {/* Illustration showing more legs added to a graph? Or a type evolving over time? */}
-          <p>
-            Add new fields and types to your GraphQL API without impacting
-            existing queries. Aging fields can be deprecated and hidden from
-            tools. By using a single evolving version, GraphQL APIs give apps
-            continuous access to new features and encourage cleaner, more
-            maintainable server code.
-          </p>
-        </div>
-        <div
-          className={clsx(
-            "type-evolution mx-auto",
-            "[&_div.nextra-code]:h-full",
-            "rounded-md border border-gray-300 dark:border-neutral-700 [&_pre]:h-full [&_pre]:rounded-none [&_pre]:ring-0",
-            // Set background as nextra code block bg color
-            "_bg-white dark:_bg-black",
-          )}
-          aria-hidden
-        >
-          <div id="typeEvolveView" ref={ref}>
-            <div className="v1">
-              <V1 />
-            </div>
-            <div className="v2">
-              <V2 />
-            </div>
-            <div className="v3">
-              <V3 />
-            </div>
-            <div className="v4">
-              <V4 />
-            </div>
-            <div className="v5">
-              <V5 />
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}
diff --git a/src/components/marked/index.tsx b/src/components/marked/index.tsx
index 9cf4345f0f..39730051bc 100644
--- a/src/components/marked/index.tsx
+++ b/src/components/marked/index.tsx
@@ -1,998 +1,47 @@
-// @ts-nocheck
-/**
- * marked - a Markdown parser
- * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
- * https://github.com/chjj/marked
- */
-import { createElement } from "react"
-
-import { MiniGraphiQL } from "./mini-graphiQL"
+import dynamic from "next/dynamic"
 import { StarWarsSchema } from "./swapi-schema"
 import { UsersSchema } from "./users-schema"
 
-export function Marked(props: { children: string }) {
-  return marked(props.children, props)
-}
-
-/**
- * Block-Level Grammar
- */
-
-const block = {
-  newline: /^\n+/,
-  code: /^( {4}[^\n]+\n*)+/,
-  fences: noop,
-  hr: /^( *[-*_]){3,} *(?:\n+|$)/,
-  heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
-  nptable: noop,
-  lheading: /^([^\n]+)\n *(=|-){3,} *\n*/,
-  blockquote: /^( *>[^\n]+(\n[^\n]+)*\n*)+/,
-  list: /^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
-  html: /^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,
-  def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
-  table: noop,
-  paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
-  text: /^[^\n]+/,
-}
-
-block.bullet = /(?:[*+-]|\d+\.)/
-block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/
-block.item = replace(block.item, "gm")(/bull/g, block.bullet)()
-
-block.list = replace(block.list)(/bull/g, block.bullet)(
-  "hr",
-  /\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/,
-)()
-
-block._tag =
-  "(?!(?:" +
-  "a|em|strong|small|s|cite|q|dfn|abbr|data|time|code" +
-  "|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo" +
-  "|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b"
-
-block.html = replace(block.html)("comment", /<!--[\s\S]*?-->/)(
-  "closed",
-  /<(tag)[\s\S]+?<\/\1>/,
-)("closing", /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)(/tag/g, block._tag)()
-
-block.paragraph = replace(block.paragraph)("hr", block.hr)(
-  "heading",
-  block.heading,
-)("lheading", block.lheading)("blockquote", block.blockquote)(
-  "tag",
-  "<" + block._tag,
-)("def", block.def)()
-
-/**
- * Normal Block Grammar
- */
-
-block.normal = merge({}, block)
-
-/**
- * GFM Block Grammar
- */
-
-block.gfm = merge({}, block.normal, {
-  //fences: /^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
-  fences:
-    /^ *(`{3,}|~{3,}) *([^\s{]+)?(?: *\{ *((?:\d+(?: *- *\d+)?(?: *, *\d+(?: *- *\d+)?)*) *)?\})? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
-  paragraph: /^/,
-})
-
-block.gfm.paragraph = replace(block.paragraph)(
-  "(?!",
-  "(?!" + block.gfm.fences.source.replace("\\1", "\\2") + "|",
-)()
-
-/**
- * GFM + Tables Block Grammar
- */
-
-block.tables = merge({}, block.gfm, {
-  nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
-  table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/,
-})
-
-/**
- * Block Lexer
- */
-
-function Lexer(options) {
-  this.tokens = []
-  this.tokens.links = {}
-  this.options = options || marked.defaults
-  this.rules = block.normal
-
-  if (this.options.gfm) {
-    if (this.options.tables) {
-      this.rules = block.tables
-    } else {
-      this.rules = block.gfm
-    }
-  }
-}
-
-/**
- * Expose Block Rules
- */
-
-Lexer.rules = block
-
-/**
- * Static Lex Method
- */
-
-Lexer.lex = function (src, options) {
-  const lexer = new Lexer(options)
-  return lexer.lex(src)
-}
-
-/**
- * Preprocessing
- */
-
-Lexer.prototype.lex = function (src) {
-  src = src
-    .replace(/\r\n|\r/g, "\n")
-    .replace(/\t/g, "    ")
-    .replace(/\u00a0/g, " ")
-    .replace(/\u2424/g, "\n")
-
-  return this.token(src, true)
-}
-
-/**
- * Lexing
- */
-
-Lexer.prototype.token = function (src, top) {
-  src = src.replace(/^ +$/gm, "")
-  let next, loose, cap, bull, b, item, space, i, l
-
-  while (src) {
-    // newline
-    if ((cap = this.rules.newline.exec(src))) {
-      src = src.substring(cap[0].length)
-      if (cap[0].length > 1) {
-        this.tokens.push({
-          type: "space",
-        })
-      }
-    }
-
-    // code
-    if ((cap = this.rules.code.exec(src))) {
-      src = src.substring(cap[0].length)
-      cap = cap[0].replace(/^ {4}/gm, "")
-      this.tokens.push({
-        type: "code",
-        text: !this.options.pedantic ? cap.replace(/\n+$/, "") : cap,
-      })
-      continue
-    }
-
-    // fences (gfm)
-    if ((cap = this.rules.fences.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "code",
-        lang: cap[2],
-        line: cap[3],
-        text: cap[4],
-      })
-      continue
-    }
-
-    // heading
-    if ((cap = this.rules.heading.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "heading",
-        depth: cap[1].length,
-        text: cap[2],
-      })
-      continue
-    }
-
-    // table no leading pipe (gfm)
-    if (top && (cap = this.rules.nptable.exec(src))) {
-      src = src.substring(cap[0].length)
-
-      item = {
-        type: "table",
-        header: cap[1].replace(/^ *| *\| *$/g, "").split(/ *\| */),
-        align: cap[2].replace(/^ *|\| *$/g, "").split(/ *\| */),
-        cells: cap[3].replace(/\n$/, "").split("\n"),
-      }
-
-      for (i = 0; i < item.align.length; i++) {
-        if (/^ *-+: *$/.test(item.align[i])) {
-          item.align[i] = "right"
-        } else if (/^ *:-+: *$/.test(item.align[i])) {
-          item.align[i] = "center"
-        } else if (/^ *:-+ *$/.test(item.align[i])) {
-          item.align[i] = "left"
-        } else {
-          item.align[i] = null
-        }
-      }
-
-      for (i = 0; i < item.cells.length; i++) {
-        item.cells[i] = item.cells[i].split(/ *\| */)
-      }
-
-      this.tokens.push(item)
-
-      continue
-    }
-
-    // lheading
-    if ((cap = this.rules.lheading.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "heading",
-        depth: cap[2] === "=" ? 1 : 2,
-        text: cap[1],
-      })
-      continue
-    }
-
-    // hr
-    if ((cap = this.rules.hr.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "hr",
-      })
-      continue
-    }
-
-    // blockquote
-    if ((cap = this.rules.blockquote.exec(src))) {
-      src = src.substring(cap[0].length)
-
-      this.tokens.push({
-        type: "blockquote_start",
-      })
-
-      cap = cap[0].replace(/^ *> ?/gm, "")
+const SCHEMA_MAP = {
+  StarWars: StarWarsSchema,
+  Users: UsersSchema,
+} as const
 
-      // Pass `top` to keep the current
-      // "toplevel" state. This is exactly
-      // how markdown.pl works.
-      this.token(cap, top)
+type SchemaKey = keyof typeof SCHEMA_MAP
 
-      this.tokens.push({
-        type: "blockquote_end",
-      })
-
-      continue
-    }
-
-    // list
-    if ((cap = this.rules.list.exec(src))) {
-      src = src.substring(cap[0].length)
-      bull = cap[2]
-
-      this.tokens.push({
-        type: "list_start",
-        ordered: bull.length > 1,
-      })
-
-      // Get each top-level item.
-      cap = cap[0].match(this.rules.item)
-
-      next = false
-      l = cap.length
-      i = 0
-
-      for (; i < l; i++) {
-        item = cap[i]
-
-        // Remove the list item's bullet
-        // so it is seen as the next token.
-        space = item.length
-        item = item.replace(/^ *([*+-]|\d+\.) +/, "")
-
-        // Outdent whatever the
-        // list item contains. Hacky.
-        if (~item.indexOf("\n ")) {
-          space -= item.length
-          item = !this.options.pedantic
-            ? item.replace(new RegExp("^ {1," + space + "}", "gm"), "")
-            : item.replace(/^ {1,4}/gm, "")
-        }
-
-        // Determine whether the next list item belongs here.
-        // Backpedal if it does not belong in this list.
-        if (this.options.smartLists && i !== l - 1) {
-          b = block.bullet.exec(cap[i + 1])[0]
-          if (bull !== b && !(bull.length > 1 && b.length > 1)) {
-            src = cap.slice(i + 1).join("\n") + src
-            i = l - 1
-          }
-        }
-
-        // Determine whether item is loose or not.
-        // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
-        // for discount behavior.
-        loose = next || /\n\n(?!\s*$)/.test(item)
-        if (i !== l - 1) {
-          next = item[item.length - 1] === "\n"
-          if (!loose) loose = next
-        }
-
-        this.tokens.push({
-          type: loose ? "loose_item_start" : "list_item_start",
-        })
-
-        // Recurse.
-        this.token(item, false)
-
-        this.tokens.push({
-          type: "list_item_end",
-        })
-      }
-
-      this.tokens.push({
-        type: "list_end",
-      })
-
-      continue
-    }
-
-    // html
-    if ((cap = this.rules.html.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: this.options.sanitize ? "paragraph" : "html",
-        pre: cap[1] === "pre" || cap[1] === "script",
-        text: cap[0],
-      })
-      continue
-    }
-
-    // def
-    if (top && (cap = this.rules.def.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.links[cap[1].toLowerCase()] = {
-        href: cap[2],
-        title: cap[3],
-      }
-      continue
-    }
-
-    // table (gfm)
-    if (top && (cap = this.rules.table.exec(src))) {
-      src = src.substring(cap[0].length)
-
-      item = {
-        type: "table",
-        header: cap[1].replace(/^ *| *\| *$/g, "").split(/ *\| */),
-        align: cap[2].replace(/^ *|\| *$/g, "").split(/ *\| */),
-        cells: cap[3].replace(/(?: *\| *)?\n$/, "").split("\n"),
-      }
-
-      for (i = 0; i < item.align.length; i++) {
-        if (/^ *-+: *$/.test(item.align[i])) {
-          item.align[i] = "right"
-        } else if (/^ *:-+: *$/.test(item.align[i])) {
-          item.align[i] = "center"
-        } else if (/^ *:-+ *$/.test(item.align[i])) {
-          item.align[i] = "left"
-        } else {
-          item.align[i] = null
-        }
-      }
-
-      for (i = 0; i < item.cells.length; i++) {
-        item.cells[i] = item.cells[i]
-          .replace(/^ *\| *| *\| *$/g, "")
-          .split(/ *\| */)
-      }
-
-      this.tokens.push(item)
-
-      continue
-    }
-
-    // top-level paragraph
-    if (top && (cap = this.rules.paragraph.exec(src))) {
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "paragraph",
-        text: cap[1][cap[1].length - 1] === "\n" ? cap[1].slice(0, -1) : cap[1],
-      })
-      continue
-    }
-
-    // text
-    if ((cap = this.rules.text.exec(src))) {
-      // Top-level should never reach here.
-      src = src.substring(cap[0].length)
-      this.tokens.push({
-        type: "text",
-        text: cap[0],
-      })
-      continue
-    }
-
-    if (src) {
-      throw new Error("Infinite loop on byte: " + src.charCodeAt(0))
-    }
-  }
-
-  return this.tokens
-}
-
-/**
- * Inline-Level Grammar
- */
-
-const inline = {
-  escape: /^\\([\\`*{}[\]()#+\-.!_>])/,
-  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
-  url: noop,
-  tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
-  link: /^!?\[(inside)\]\(href\)/,
-  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
-  nolink: /^!?\[((?:\[[^\]]*\]|[^[\]])*)\]/,
-  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
-  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
-  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
-  br: /^ {2,}\n(?!\s*$)/,
-  del: noop,
-  text: /^[\s\S]+?(?=[\\<![_*`]| {2,}\n|$)/,
+type Metadata = {
+  graphiql?: boolean
+  variables?: unknown
+  schema?: SchemaKey
 }
 
-inline._inside = /(?:\[[^\]]*\]|[^\]]|\](?=[^[]*\]))*/
-inline._href = /\s*<?([^\s]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/
-
-inline.link = replace(inline.link)("inside", inline._inside)(
-  "href",
-  inline._href,
-)()
-
-inline.reflink = replace(inline.reflink)("inside", inline._inside)()
-
-/**
- * Normal Inline Grammar
- */
-
-inline.normal = merge({}, inline)
-
-/**
- * Pedantic Inline Grammar
- */
-
-inline.pedantic = merge({}, inline.normal, {
-  strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
-  em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/,
-})
-
-/**
- * GFM Inline Grammar
- */
-
-inline.gfm = merge({}, inline.normal, {
-  escape: replace(inline.escape)("])", "~|])")(),
-  url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
-  del: /^~~(?=\S)([\s\S]*?\S)~~/,
-  text: replace(inline.text)("]|", "~]|")("|", "|https?://|")(),
-})
-
-/**
- * GFM + Line Breaks Inline Grammar
- */
-
-inline.breaks = merge({}, inline.gfm, {
-  br: replace(inline.br)("{2,}", "*")(),
-  text: replace(inline.gfm.text)("{2,}", "*")(),
-})
-
-/**
- * Inline Lexer & Compiler
- */
-
-function InlineLexer(links, options) {
-  this.options = options || marked.defaults
-  this.links = links
-  this.rules = inline.normal
-
-  if (!this.links) {
-    throw new Error("Tokens array requires a `links` property.")
-  }
-
-  if (this.options.gfm) {
-    if (this.options.breaks) {
-      this.rules = inline.breaks
-    } else {
-      this.rules = inline.gfm
-    }
-  } else if (this.options.pedantic) {
-    this.rules = inline.pedantic
-  }
-}
+const MiniGraphiQL = dynamic(() => import("./mini-graphiQL"), { ssr: true })
 
-/**
- * Expose Inline Rules
- */
+export function Marked({ children }: { children: string }) {
+  const codeMatch = children.match(/```graphql\s*\n([\s\S]*?)```/)
+  const blockContent = codeMatch?.[1]
+  const [firstLine, ...rest] = (blockContent || "").split("\n")
+  // First line must contain the metadata JSON comment: # { … }
+  const metaMatch = firstLine.match(/^\s*#\s*({.*})\s*$/)
 
-InlineLexer.rules = inline
-
-/**
- * Static Lexing/Compiling Method
- */
-
-InlineLexer.output = function (src, links, options) {
-  const inline = new InlineLexer(links, options)
-  return inline.output(src)
-}
-
-/**
- * Lexing/Compiling
- */
-
-InlineLexer.prototype.output = function (src) {
-  const out = []
-  let link, text, href, cap
-
-  while (src) {
-    // escape
-    if ((cap = this.rules.escape.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(cap[1])
-      continue
-    }
-
-    // autolink
-    if ((cap = this.rules.autolink.exec(src))) {
-      src = src.substring(cap[0].length)
-      if (cap[2] === "@") {
-        text = cap[1][6] === ":" ? cap[1].substring(7) : cap[1]
-        href = "mailto:" + text
-      } else {
-        text = cap[1]
-        href = text
-      }
-
-      out.push(
-        createElement("a", { href: this.sanitizeUrl(href), key: href }, text),
-      )
-      continue
-    }
-
-    // url (gfm)
-    if ((cap = this.rules.url.exec(src))) {
-      src = src.substring(cap[0].length)
-      text = cap[1]
-      href = text
-      out.push(
-        createElement("a", { href: this.sanitizeUrl(href), key: href }, text),
-      )
-      continue
-    }
-
-    // tag
-    if ((cap = this.rules.tag.exec(src))) {
-      src = src.substring(cap[0].length)
-      // TODO(alpert): Don't escape if sanitize is false
-      out.push(cap[0])
-      continue
-    }
-
-    // link
-    if ((cap = this.rules.link.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(
-        this.outputLink(cap, {
-          href: cap[2],
-          title: cap[3],
-        }),
-      )
-      continue
-    }
-
-    // reflink, nolink
-    if (
-      (cap = this.rules.reflink.exec(src)) ||
-      (cap = this.rules.nolink.exec(src))
-    ) {
-      src = src.substring(cap[0].length)
-      link = (cap[2] || cap[1]).replace(/\s+/g, " ")
-      link = this.links[link.toLowerCase()]
-      if (!link || !link.href) {
-        out.push(...this.output(cap[0][0]))
-        src = cap[0].substring(1) + src
-        continue
-      }
-      out.push(this.outputLink(cap, link))
-      continue
-    }
-
-    // strong
-    if ((cap = this.rules.strong.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(
-        createElement(
-          "strong",
-          { key: src.length },
-          this.output(cap[2] || cap[1]),
-        ),
-      )
-      continue
-    }
-
-    // em
-    if ((cap = this.rules.em.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(
-        createElement("em", { key: src.length }, this.output(cap[2] || cap[1])),
-      )
-      continue
-    }
-
-    // code
-    if ((cap = this.rules.code.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(createElement("code", { key: src.length }, cap[2]))
-      continue
-    }
-
-    // br
-    if ((cap = this.rules.br.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(createElement("br", { key: src.length }, null))
-      continue
-    }
-
-    // del (gfm)
-    if ((cap = this.rules.del.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(createElement("del", { key: src.length }, this.output(cap[1])))
-      continue
-    }
-
-    // text
-    if ((cap = this.rules.text.exec(src))) {
-      src = src.substring(cap[0].length)
-      out.push(this.smartypants(cap[0]))
-      continue
-    }
-
-    if (src) {
-      throw new Error("Infinite loop on byte: " + src.charCodeAt(0))
-    }
-  }
-
-  return out
-}
-
-/**
- * Sanitize a URL for a link or image
- */
-
-InlineLexer.prototype.sanitizeUrl = function (url) {
-  if (this.options.sanitize) {
-    try {
-      const prot = decodeURIComponent(url)
-        .replace(/[^A-Za-z0-9:]/g, "")
-        .toLowerCase()
-      if (prot.indexOf("javascript:") === 0) {
-        return "#"
-      }
-    } catch (e) {
-      return "#"
-    }
-  }
-  return url
-}
-
-/**
- * Compile Link
- */
-
-InlineLexer.prototype.outputLink = function (cap, link) {
-  if (cap[0][0] !== "!") {
-    const shouldOpenInNewWindow =
-      link.href.charAt(0) !== "/" && link.href.charAt(0) !== "#"
-
-    return createElement(
-      "a",
-      {
-        href: this.sanitizeUrl(link.href),
-        title: link.title,
-        target: shouldOpenInNewWindow ? "_blank" : null,
-        rel: shouldOpenInNewWindow ? "nofollow noopener noreferrer" : null,
-        key: link.href,
-      },
-      this.output(cap[1]),
-    )
-  } else {
-    return createElement(
-      "img",
-      {
-        src: this.sanitizeUrl(link.href),
-        alt: cap[1],
-        title: link.title,
-        key: link.href,
-      },
-      null,
+  if (!metaMatch) {
+    throw new Error(
+      `Invalid GraphiQL metadata JSON: ${firstLine}. MiniGraphQL shouldn't be used here.`,
     )
   }
-}
-
-/**
- * Smartypants Transformations
- */
-
-InlineLexer.prototype.smartypants = function (text) {
-  if (!this.options.smartypants) return text
-  return text
-    .replace(/--/g, "\u2014")
-    .replace(/'([^']*)'/g, "\u2018$1\u2019")
-    .replace(/"([^"]*)"/g, "\u201C$1\u201D")
-    .replace(/\.{3}/g, "\u2026")
-}
-
-/**
- * Parsing & Compiling
- */
-
-function Parser(options) {
-  this.tokens = []
-  this.token = null
-  this.options = options || marked.defaults
-  this.usedSlugs = {}
-}
-
-/**
- * Static Parse Method
- */
-
-Parser.parse = function (src, options) {
-  const parser = new Parser(options)
-  return parser.parse(src)
-}
-
-/**
- * Parse Loop
- */
-
-Parser.prototype.parse = function (src) {
-  this.inline = new InlineLexer(src.links, this.options)
-  this.tokens = src.reverse()
-
-  const out = []
-  while (this.next()) {
-    out.push(this.tok())
-  }
-
-  return out
-}
-
-/**
- * Next Token
- */
 
-Parser.prototype.next = function () {
-  return (this.token = this.tokens.pop())
-}
-
-/**
- * Preview Next Token
- */
-
-Parser.prototype.peek = function () {
-  return this.tokens[this.tokens.length - 1] || 0
-}
-
-/**
- * Parse Text Tokens
- */
-
-Parser.prototype.parseText = function () {
-  let body = this.token.text
-
-  while (this.peek().type === "text") {
-    body += "\n" + this.next().text
-  }
-
-  return this.inline.output(body)
-}
-
-/**
- * Parse Current Token
- */
-
-Parser.prototype.tok = function () {
-  switch (this.token.type) {
-    case "code": {
-      if (this.token.lang === "graphql") {
-        const lines = this.token.text.split("\n")
-        const firstLine = lines.shift().match(/^\s*#\s*({.*})$/)
-        if (firstLine) {
-          let metaData
-          try {
-            metaData = JSON.parse(firstLine[1])
-          } catch (e) {
-            console.error("Invalid Metadata JSON:", firstLine[1])
-          }
-          if (metaData) {
-            const query = lines.join("\n")
-            const variables = metaData.variables
-              ? JSON.stringify(metaData.variables, null, 2)
-              : ""
-            const schemaMap = {
-              StarWars: StarWarsSchema,
-              Users: UsersSchema,
-            }
-            const schema = schemaMap[metaData.schema || "StarWars"]
-            return (
-              <MiniGraphiQL
-                schema={schema}
-                query={query}
-                variables={variables}
-                key={this.tokens.length}
-              />
-            )
-          }
-        }
-      }
-    }
-  }
-}
-
-function replace(regex, opt) {
-  regex = regex.source
-  opt = opt || ""
-  return function self(name, val) {
-    if (!name) return new RegExp(regex, opt)
-    val = val.source || val
-    val = val.replace(/(^|[^[])\^/g, "$1")
-    regex = regex.replace(name, val)
-    return self
-  }
-}
-
-function noop() {}
-
-noop.exec = noop
-
-function merge(obj) {
-  let i = 1,
-    target,
-    key
-
-  for (; i < arguments.length; i++) {
-    target = arguments[i]
-    for (key in target) {
-      if (Object.prototype.hasOwnProperty.call(target, key)) {
-        obj[key] = target[key]
-      }
-    }
-  }
-
-  return obj
-}
-
-/**
- * Marked
- */
-
-function marked(src, opt, callback) {
-  if (callback || typeof opt === "function") {
-    if (!callback) {
-      callback = opt
-      opt = null
-    }
-
-    if (opt) opt = merge({}, marked.defaults, opt)
-
-    const highlight = opt.highlight
-    let tokens,
-      pending,
-      i = 0
-
-    try {
-      tokens = Lexer.lex(src, opt)
-    } catch (e) {
-      return callback(e)
-    }
-
-    pending = tokens.length
-
-    const done = function (hi) {
-      let out, err
-
-      if (hi !== true) {
-        delete opt.highlight
-      }
-
-      try {
-        out = Parser.parse(tokens, opt)
-      } catch (e) {
-        err = e
-      }
-
-      opt.highlight = highlight
-
-      return err ? callback(err) : callback(null, out)
-    }
-
-    if (!highlight || highlight.length < 3) {
-      return done(true)
-    }
-
-    if (!pending) return done()
-
-    for (; i < tokens.length; i++) {
-      ;(function (token) {
-        if (token.type !== "code") {
-          return --pending || done()
-        }
-        return highlight(token.text, token.lang, function (err, code) {
-          if (code == null || code === token.text) {
-            return --pending || done()
-          }
-          token.text = code
-          token.escaped = true
-          --pending || done()
-        })
-      })(tokens[i])
-    }
-
-    return
-  }
+  let meta: Metadata
   try {
-    if (opt) opt = merge({}, marked.defaults, opt)
-    return Parser.parse(Lexer.lex(src, opt), opt)
-  } catch (e) {
-    e.message += "\nPlease report this to https://github.com/chjj/marked."
-    if ((opt || marked.defaults).silent) {
-      return [
-        createElement("p", null, "An error occurred:"),
-        createElement("pre", null, e.message),
-      ]
-    }
-    throw e
+    meta = JSON.parse(metaMatch[1]) as Metadata
+  } catch {
+    throw new Error(`Invalid GraphiQL metadata JSON: ${metaMatch[1]}`)
   }
-}
-
-/**
- * Options
- */
 
-marked.options = marked.setOptions = function (opt) {
-  merge(marked.defaults, opt)
-  return marked
-}
+  const query = rest.join("\n")
+  const variables = meta.variables
+    ? JSON.stringify(meta.variables, null, 2)
+    : ""
+  const schema = SCHEMA_MAP[meta.schema ?? "StarWars"]
 
-marked.defaults = {
-  gfm: true,
-  tables: true,
-  breaks: false,
-  pedantic: false,
-  sanitize: false,
-  smartLists: false,
-  silent: false,
-  highlight: null,
-  langPrefix: "lang-",
-  smartypants: false,
-  paragraphFn: null,
+  return <MiniGraphiQL schema={schema} query={query} variables={variables} />
 }
-
-/**
- * Expose
- */
-
-marked.Parser = Parser
-marked.parser = Parser.parse
-
-marked.Lexer = Lexer
-marked.lexer = Lexer.lex
-
-marked.InlineLexer = InlineLexer
-marked.inlineLexer = InlineLexer.output
-
-marked.parse = marked
diff --git a/src/components/marked/mini-graphiQL.tsx b/src/components/marked/mini-graphiQL.tsx
index 1ed44a30d1..37c1d3e8db 100644
--- a/src/components/marked/mini-graphiQL.tsx
+++ b/src/components/marked/mini-graphiQL.tsx
@@ -12,7 +12,13 @@ import { marked } from "marked"
 
 import { graphql, formatError, parse, typeFromAST } from "graphql"
 
-export class MiniGraphiQL extends Component {
+export type MiniGraphiQLProps = {
+  schema: GraphQLSchema
+  query: string
+  variables: string
+}
+
+export default class MiniGraphiQL extends Component<MiniGraphiQLProps> {
   // Lifecycle
 
   constructor(props) {
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
new file mode 100644
index 0000000000..536b69d279
--- /dev/null
+++ b/src/components/navbar/navbar.tsx
@@ -0,0 +1,279 @@
+import { MenuItem, Menu, MenuButton, MenuItems } from "@headlessui/react"
+import clsx from "clsx"
+// eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop
+import NextLink from "next/link"
+import { Button } from "nextra/components"
+import { useFSRoute } from "nextra/hooks"
+import type * as normalizePages from "nextra/normalize-pages"
+import { Fragment, useState, type ReactElement, type ReactNode } from "react"
+import { useMenu, useThemeConfig } from "nextra-theme-docs"
+import { Anchor } from "@/app/conf/_design-system/anchor"
+import { renderComponent } from "@/components/utils"
+
+import MenuIcon from "@/app/conf/_design-system/pixelarticons/menu.svg?svgr"
+import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
+
+type Item = normalizePages.PageItem | normalizePages.MenuItem
+export interface NavBarProps {
+  items: Item[]
+}
+
+const classes = {
+  link: "typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2",
+}
+
+function NavbarMenu({
+  menu,
+  children,
+  onSubmenuOpen,
+}: {
+  menu: normalizePages.MenuItem
+  children: ReactNode
+  onSubmenuOpen: (open: boolean) => void
+}): ReactElement {
+  const routes = Object.fromEntries(
+    (menu.children || []).map(route => [route.name, route]),
+  )
+  return (
+    <Menu>
+      <MenuButton as={Fragment}>
+        {({ focus, open }) => {
+          // I'm sorry, I know this is so cursed.
+          // I need to migrate out of HeadlessUI to something with change handlers.
+          onSubmenuOpen(open)
+
+          return (
+            <button
+              onClick={() => onSubmenuOpen(open)}
+              className={clsx(
+                classes.link,
+                "flex items-center gap-1.5 whitespace-nowrap max-md:hidden",
+                focus && "nextra-focusable",
+              )}
+            >
+              {children}
+            </button>
+          )
+        }}
+      </MenuButton>
+      <MenuItems
+        transition
+        modal={false}
+        className={({ open }) =>
+          // eslint-disable-next-line tailwindcss/no-custom-classname
+          clsx(
+            "gql-navbar-menu-items",
+            "motion-reduce:transition-none",
+            "focus-visible:outline-none",
+            open ? "opacity-100" : "opacity-0",
+            "nextra-scrollbar overflow-visible transition-opacity",
+            "z-20 rounded-md py-1 text-sm",
+            // headlessui adds max-height as style, use !important to override
+            "!max-h-[min(calc(100vh-5rem),256px)]",
+          )
+        }
+        anchor={{ to: "top start", gap: 21, padding: 16, offset: -8 }}
+      >
+        {Object.entries(menu.items || {}).map(([key, item]) => (
+          <MenuItem key={key}>
+            <Anchor
+              href={item.href || routes[key]?.route}
+              className="block py-1.5 pl-2 pr-9"
+              target={item.newWindow ? "_blank" : undefined}
+            >
+              <span className="typography-menu px-3 py-1 underline-offset-2 [[data-active]>&]:underline">
+                {item.title}
+              </span>
+            </Anchor>
+          </MenuItem>
+        ))}
+      </MenuItems>
+    </Menu>
+  )
+}
+
+export function Navbar({ items }: NavBarProps): ReactElement {
+  const themeConfig = useThemeConfig()
+
+  const activeRoute = useFSRoute()
+  const { menu, setMenu } = useMenu()
+  const [submenuOpen, setSubmenuOpen] = useState(false)
+
+  return (
+    <div
+      className={clsx(
+        "nextra-nav-container top-0 z-20 w-full bg-transparent print:hidden",
+        activeRoute === "/" ? "fixed" : "sticky",
+      )}
+    >
+      <BackdropBlur />
+      <nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[120rem] items-center justify-end pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
+        {themeConfig.logoLink ? (
+          <NextLink
+            href={
+              typeof themeConfig.logoLink === "string"
+                ? themeConfig.logoLink
+                : "/"
+            }
+            className="nextra-focus flex items-center hover:opacity-75"
+          >
+            {renderComponent(themeConfig.logo)}
+          </NextLink>
+        ) : (
+          <div className="flex items-center">
+            {renderComponent(themeConfig.logo)}
+          </div>
+        )}
+        <div className="flex-1" />
+        <div className="-mx-2 flex overflow-x-auto px-2 py-1.5 lg:gap-2 xl:absolute xl:left-1/2 xl:-translate-x-1/2">
+          {items.map(pageOrMenu => {
+            if (pageOrMenu.display === "hidden") return null
+
+            if (pageOrMenu.type === "menu") {
+              const menu = pageOrMenu as normalizePages.MenuItem
+              return (
+                <NavbarMenu
+                  key={menu.title}
+                  menu={menu}
+                  onSubmenuOpen={open => {
+                    if (typeof window !== "undefined") {
+                      if (open) {
+                        document.body.style.overflow = "hidden"
+                      } else {
+                        document.body.style.overflow = "auto"
+                      }
+                    }
+                    setSubmenuOpen(open)
+                  }}
+                >
+                  {menu.title}
+                </NavbarMenu>
+              )
+            }
+            const page = pageOrMenu as normalizePages.PageItem
+            let href = page.href || page.route || "#"
+
+            // If it's a directory
+            if (page.children) {
+              href =
+                (page.withIndexPage ? page.route : page.firstChildRoute) || href
+            }
+
+            const isActive =
+              page.route === activeRoute ||
+              activeRoute.startsWith(page.route + "/")
+
+            return (
+              <Anchor
+                href={href}
+                key={href}
+                className={clsx(
+                  classes.link,
+                  "whitespace-nowrap max-md:hidden",
+                  isActive && !page.newWindow && "underline",
+                )}
+                target={page.newWindow ? "_blank" : undefined}
+                aria-current={!page.newWindow && isActive}
+              >
+                {page.title}
+              </Anchor>
+            )
+          })}
+        </div>
+
+        {process.env.NEXTRA_SEARCH &&
+          renderComponent(themeConfig.search.component, {
+            className:
+              "max-md:_hidden [&>input]:bg-neu-0/[.55] [&>input::placeholder]:text-neu-700 [&>input]:text-neu-900",
+          })}
+
+        {themeConfig.project.link ? (
+          <Anchor href={themeConfig.project.link}>
+            {renderComponent(themeConfig.project.icon)}
+          </Anchor>
+        ) : null}
+
+        {themeConfig.chat.link ? (
+          <Anchor href={themeConfig.chat.link}>
+            {renderComponent(themeConfig.chat.icon)}
+          </Anchor>
+        ) : null}
+
+        {renderComponent(themeConfig.navbar.extraContent)}
+
+        <Button
+          aria-label="Menu"
+          className={({ active }) =>
+            clsx(
+              "nextra-hamburger p-2 text-pri-base md:hidden",
+              active && "bg-neu-400/20",
+            )
+          }
+          onClick={() => setMenu(!menu)}
+        >
+          {menu ? (
+            <CloseIcon className="size-5" />
+          ) : (
+            <MenuIcon className="size-5" />
+          )}
+        </Button>
+      </nav>
+      <SubmenuBackdrop className={submenuOpen ? "opacity-100" : "opacity-0"} />
+    </div>
+  )
+}
+
+function BackdropBlur() {
+  const thickness = "1px"
+
+  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
+  const edgeMask = `linear-gradient(to bottom, black 0, black ${thickness}, transparent ${thickness})`
+  return (
+    <>
+      <div
+        className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
+        style={{
+          maskImage: mask,
+          WebkitMaskImage: mask,
+          background:
+            "linear-gradient(to bottom,rgb(var(--nextra-bg),.97) 0%, rgb(var(--nextra-bg),.5) 50% 100%)",
+        }}
+      />
+      <div
+        className="pointer-events-none absolute inset-0 h-full translate-y-full bg-white/10"
+        style={{
+          backdropFilter: "blur(8px) brightness(120%) saturate(113%)",
+          maskImage: edgeMask,
+          WebkitMaskImage: edgeMask,
+        }}
+      />
+    </>
+  )
+}
+
+export function NavbarPlaceholder({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      // placeholder: the colors here on `before` must match the ones on Hero `before` strip
+      className={clsx(
+        "absolute h-[calc(var(--nextra-navbar-height)+1px)] w-full before:absolute before:top-0 before:h-[calc(var(--nextra-navbar-height)+1px)] before:w-full",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+function SubmenuBackdrop({ className }: { className: string }) {
+  return (
+    <div
+      className={clsx(
+        "pointer-events-none fixed inset-0 top-[calc(var(--nextra-navbar-height)+1px)] bg-[rgb(var(--nextra-bg),.4)] backdrop-blur-[6.4px] transition-opacity",
+        className,
+      )}
+    />
+  )
+}
diff --git a/src/components/pre/index.tsx b/src/components/pre/index.tsx
new file mode 100644
index 0000000000..25bf431ff8
--- /dev/null
+++ b/src/components/pre/index.tsx
@@ -0,0 +1,95 @@
+import cn from "clsx"
+import type { ComponentPropsWithoutRef, FC, ReactElement } from "react"
+import { useRef } from "react"
+import { WordWrapIcon } from "nextra/icons"
+import { Button, CopyToClipboard } from "nextra/components"
+
+import classes from "./pre.module.css"
+
+interface PreProps extends ComponentPropsWithoutRef<"pre"> {
+  "data-filename"?: string
+  "data-copy"?: ""
+  "data-language"?: string
+  "data-word-wrap"?: ""
+  icon?: FC<{ className?: string }>
+  containerClassName?: string
+}
+
+export function Pre({
+  children,
+  className,
+  "data-filename": filename,
+  "data-copy": copy,
+  "data-language": _language,
+  "data-word-wrap": hasWordWrap,
+  icon: Icon,
+  containerClassName,
+  ...props
+}: PreProps): ReactElement {
+  const preRef = useRef<HTMLPreElement | null>(null)
+
+  const copyButton = copy === "" && (
+    <CopyToClipboard
+      tabIndex={props.tabIndex}
+      className={filename ? "_ml-auto" : ""}
+      getValue={() => preRef.current?.querySelector("code")?.textContent || ""}
+    />
+  )
+
+  return (
+    <div className={cn(classes.pre, "relative", containerClassName)}>
+      {filename && (
+        <div
+          className={cn(
+            classes.filename,
+            "flex items-center gap-1.5 rounded-t-md border border-b-0 border-neu-200 bg-neu-0/[.64] px-4 py-2 text-sm text-neu-0/[.64] text-neu-800 backdrop-blur-[6px] dark:border-neu-50",
+          )}
+        >
+          {Icon && <Icon className="_h-4 _w-auto _max-w-6 _shrink-0" />}
+          <span className="_truncate">{filename}</span>
+          {copyButton}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "nextra-focus overflow-x-auto border border-neu-200 py-4 text-[.9em] subpixel-antialiased contrast-more:contrast-150 dark:border-neu-50",
+          filename ? "rounded-b-md" : "rounded-md",
+          className,
+        )}
+        ref={preRef}
+        {...props}
+      >
+        {children}
+      </pre>
+      <div
+        className={cn(
+          "_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100",
+          "_flex _gap-1 _absolute _right-4",
+          filename ? "_top-14" : "_top-2",
+        )}
+      >
+        {hasWordWrap === "" && (
+          <Button
+            onClick={toggleWordWrap}
+            className="md:_hidden"
+            title="Toggle word wrap"
+            variant="outline"
+          >
+            <WordWrapIcon height="16" />
+          </Button>
+        )}
+        {!filename && copyButton}
+      </div>
+    </div>
+  )
+}
+
+function toggleWordWrap() {
+  const htmlDataset = document.documentElement.dataset
+  const hasWordWrap = "nextraWordWrap" in htmlDataset
+  if (hasWordWrap) {
+    delete htmlDataset.nextraWordWrap
+  } else {
+    htmlDataset.nextraWordWrap = ""
+  }
+}
diff --git a/src/components/pre/pre.module.css b/src/components/pre/pre.module.css
new file mode 100644
index 0000000000..54a0ddf66a
--- /dev/null
+++ b/src/components/pre/pre.module.css
@@ -0,0 +1,32 @@
+.pre {
+  & :global(._h-12) {
+    height: unset;
+  }
+}
+
+:global(.nextra-codeblocks) div.pre:not(:last-child) > div:first-child {
+  border-right: none;
+}
+
+:global(.nextra-codeblocks) {
+  & .pre pre {
+    height: 100%;
+  }
+
+  & .pre:not(:last-child) pre {
+    border-right: none;
+    border-bottom-right-radius: 0;
+  }
+
+  & :not(:last-child) .filename {
+    border-top-right-radius: 0;
+  }
+
+  & :not(:first-child) .filename {
+    border-top-left-radius: 0;
+  }
+
+  & .pre:not(:first-child) pre {
+    border-bottom-left-radius: 0;
+  }
+}
diff --git a/src/components/utils.tsx b/src/components/utils.tsx
new file mode 100644
index 0000000000..9074a85647
--- /dev/null
+++ b/src/components/utils.tsx
@@ -0,0 +1,8 @@
+export function renderComponent<T>(
+  ComponentOrNode: React.FC<T> | React.ReactNode,
+  props?: T,
+) {
+  if (!ComponentOrNode) return null
+  if (typeof ComponentOrNode !== "function") return ComponentOrNode
+  return <ComponentOrNode {...props!} />
+}
diff --git a/src/globals.css b/src/globals.css
index ac04ce6d8d..432e4f3ef1 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./nextra-theme-docs.css";
+@import "tailwindcss/base";
+@import "tailwindcss/utilities";
+@import "tailwindcss/components";
 
 :root {
   --foreground-rgb: 0, 0, 0;
@@ -102,14 +103,6 @@ div[id^="headlessui-menu-items"] {
     @apply first:mr-0 hover:!text-primary;
   }
 
-  button[id^="headlessui-menu-button"] {
-    @apply hover:text-primary;
-
-    + div > a {
-      @apply hover:text-primary;
-    }
-  }
-
   .nextra-search {
     @apply ml-auto;
 
@@ -149,7 +142,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 ::selection {
-  @apply bg-primary/50 dark:bg-primary/50;
+  @apply bg-pri-base/25 dark:bg-pri-light/50;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -286,20 +279,6 @@ div[id^="headlessui-menu-items"] {
   @apply rounded border border-current px-2.5 py-1 text-sm font-bold transition-colors;
 }
 
-.index {
-  p {
-    @apply mb-5 max-w-2xl text-lg lg:text-xl/9;
-  }
-
-  h2 {
-    @apply mb-10 text-balance text-3xl font-bold lg:text-5xl;
-  }
-
-  pre {
-    @apply bg-white;
-  }
-}
-
 .add,
 .remove {
   @apply shadow-[2px_0_currentColor_inset];
@@ -321,38 +300,6 @@ div[id^="headlessui-menu-items"] {
   }
 }
 
-.step0,
-.step6 {
-  .v2 {
-    @apply opacity-0;
-  }
-}
-
-.step1 .v2 code > span:nth-child(5) {
-  @apply add;
-}
-
-.step2 .v3 code > span:nth-child(6) {
-  @apply add;
-}
-
-.step3 .v4 code > {
-  span:nth-child(7),
-  span:nth-last-child(-n + 5) {
-    @apply add;
-  }
-}
-
-.step4 {
-  .v4 code > span:nth-child(6) {
-    @apply remove;
-  }
-
-  .v5 code > span:nth-child(6) {
-    @apply add;
-  }
-}
-
 .index-button {
   @apply rounded-md border border-current px-6 py-2.5 transition-colors;
 
@@ -416,60 +363,6 @@ div[id^="headlessui-menu-items"] {
   @apply bg-gradient-to-b from-transparent to-primary/5 dark:to-primary/10;
 }
 
-.type-evolution {
-  @apply w-full overflow-hidden;
-
-  #typeEvolveView {
-    @apply relative left-0 flex h-full select-none;
-
-    .v1,
-    .v2,
-    .v3,
-    .v4 {
-      @apply w-1/2 shrink-0 border-r dark:border-neutral-800;
-    }
-
-    .v5 {
-      @apply w-full shrink-0;
-    }
-
-    &.step1 {
-      .v2 {
-        opacity: 1;
-        transition: opacity 0.5s ease-in-out;
-      }
-    }
-
-    &.step2 {
-      left: calc(-1 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step3 {
-      left: calc(-2 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step4 {
-      left: calc(-3 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step5 {
-      left: calc(-4 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step6 {
-      .v5 {
-        left: calc(-4 * 50%);
-        opacity: 0;
-        transition: opacity 0.5s ease-in-out;
-      }
-    }
-  }
-}
-
 .apiIndex {
   @apply mt-6;
 }
@@ -516,18 +409,34 @@ div[id^="headlessui-menu-items"] {
   @apply focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[5px] focus-visible:outline-neu-900;
 }
 
-.gql-conf-container {
+.gql-container {
   @apply mx-auto w-full max-w-[120rem];
 }
 
-.gql-conf-section {
+.gql-section {
   @apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px];
 }
 
+.gql-navbar-strip,
 .gql-conf-navbar-strip {
   @apply relative [contain:paint] before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-[''];
 }
 
+.gql-navbar-strip {
+  --navbar-h: var(--nextra-navbar-height);
+}
+
+.gql-radial-gradient {
+  background-image: radial-gradient(
+    ellipse at 50% 50%,
+    hsl(var(--color-neu-600)) 0%,
+    transparent 75%
+  );
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 :root {
   --navbar-h: 70px;
 }
@@ -537,3 +446,33 @@ html:has([role="listbox"][data-open]),
 html:has([role="menu"][data-open]) {
   overflow: visible !important;
 }
+
+@supports (background: -webkit-named-image(i)) {
+  html {
+    /* Safari moves the fixed Navbar when overscrolling and it looks bad */
+    overscroll-behavior-y: none;
+  }
+}
+
+.flowchart {
+  --mermaid-node-fill: hsl(var(--color-neu-100));
+  --mermaid-node-stroke: hsl(var(--color-neu-200));
+  --mermaid-arrow: hsl(var(--color-neu-500));
+
+  margin: 1.5rem auto 0 auto;
+
+  & .label text,
+  span {
+    font-size: 14px !important;
+  }
+
+  & div:has(> .nodeLabel) {
+    display: unset !important;
+  }
+}
+
+.dark .flowchart {
+  --mermaid-node-fill: hsl(var(--color-neu-50) / 0.5);
+  --mermaid-node-stroke: hsl(var(--color-neu-100));
+  --mermaid-arrow: hsl(var(--color-neu-300));
+}
diff --git a/src/nextra-theme-docs.css b/src/nextra-theme-docs.css
new file mode 100644
index 0000000000..40b2f0449f
--- /dev/null
+++ b/src/nextra-theme-docs.css
@@ -0,0 +1,2977 @@
+*,
+:before,
+:after,
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #3b82f680;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
+}
+*,
+:before,
+:after {
+  box-sizing: border-box;
+  border: 0 solid #e5e7eb;
+}
+:before,
+:after {
+  --tw-content: "";
+}
+html,
+:host {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
+    Noto Color Emoji;
+  line-height: 1.5;
+}
+body {
+  line-height: inherit;
+  margin: 0;
+}
+hr {
+  color: inherit;
+  border-top-width: 1px;
+  height: 0;
+}
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp,
+pre {
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
+  -webkit-appearance: button;
+  background-color: #0000;
+  background-image: none;
+}
+:-moz-focusring {
+  outline: auto;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+progress {
+  vertical-align: baseline;
+}
+::-webkit-inner-spin-button {
+  height: auto;
+}
+::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+summary {
+  display: list-item;
+}
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+legend {
+  padding: 0;
+}
+ol,
+ul,
+menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+dialog {
+  padding: 0;
+}
+textarea {
+  resize: vertical;
+}
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+button,
+[role="button"] {
+  cursor: pointer;
+}
+:disabled {
+  cursor: default;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  vertical-align: middle;
+  display: block;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+._sr-only {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+._pointer-events-none {
+  pointer-events: none;
+}
+._fixed {
+  position: fixed;
+}
+._absolute {
+  position: absolute;
+}
+._relative {
+  position: relative;
+}
+._sticky {
+  position: sticky;
+}
+._inset-0 {
+  inset: 0;
+}
+._bottom-0 {
+  bottom: 0;
+}
+._right-4 {
+  right: 1rem;
+}
+._top-0 {
+  top: 0;
+}
+._top-14 {
+  top: 3.5rem;
+}
+._top-2 {
+  top: 0.5rem;
+}
+._top-\[--nextra-navbar-height\] {
+  top: var(--nextra-navbar-height);
+}
+._z-10 {
+  z-index: 10;
+}
+._z-20 {
+  z-index: 20;
+}
+._z-\[1\] {
+  z-index: 1;
+}
+._order-first {
+  order: -9999;
+}
+._order-last {
+  order: 9999;
+}
+._m-0 {
+  margin: 0;
+}
+._-mx-6 {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+._mx-1\.5 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+._mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+._mx-2\.5 {
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+}
+._mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+._mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+._mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+._my-1\.5 {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+._my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+._my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+._my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+._-mb-0\.5 {
+  margin-bottom: -0.125rem;
+}
+._mb-12 {
+  margin-bottom: 3rem;
+}
+._mb-2 {
+  margin-bottom: 0.5rem;
+}
+._mb-8 {
+  margin-bottom: 2rem;
+}
+._ml-1 {
+  margin-left: 0.25rem;
+}
+._ml-2 {
+  margin-left: 0.5rem;
+}
+._ml-auto {
+  margin-left: auto;
+}
+._ms-12 {
+  margin-inline-start: 3rem;
+}
+._ms-16 {
+  margin-inline-start: 4rem;
+}
+._ms-4 {
+  margin-inline-start: 1rem;
+}
+._ms-8 {
+  margin-inline-start: 2rem;
+}
+._mt-1 {
+  margin-top: 0.25rem;
+}
+._mt-1\.5 {
+  margin-top: 0.375rem;
+}
+._mt-10 {
+  margin-top: 2.5rem;
+}
+._mt-12 {
+  margin-top: 3rem;
+}
+._mt-16 {
+  margin-top: 4rem;
+}
+._mt-2 {
+  margin-top: 0.5rem;
+}
+._mt-4 {
+  margin-top: 1rem;
+}
+._mt-6 {
+  margin-top: 1.5rem;
+}
+._mt-8 {
+  margin-top: 2rem;
+}
+._block {
+  display: block;
+}
+._inline-block {
+  display: inline-block;
+}
+._inline {
+  display: inline;
+}
+._flex {
+  display: flex;
+}
+._inline-flex {
+  display: inline-flex;
+}
+._grid {
+  display: grid;
+}
+._hidden {
+  display: none;
+}
+._size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+._h-0 {
+  height: 0;
+}
+._h-12 {
+  height: 3rem;
+}
+._h-3\.5 {
+  height: 0.875rem;
+}
+._h-4 {
+  height: 1rem;
+}
+._h-5 {
+  height: 1.25rem;
+}
+._h-7 {
+  height: 1.75rem;
+}
+._h-\[var\(--nextra-banner-height\)\] {
+  height: var(--nextra-banner-height);
+}
+._h-\[var\(--nextra-navbar-height\)\] {
+  height: var(--nextra-navbar-height);
+}
+.\!_max-h-\[min\(calc\(100vh-5rem\)\,256px\)\] {
+  max-height: min(100vh - 5rem, 256px) !important;
+}
+._max-h-64 {
+  max-height: 16rem;
+}
+._max-h-\[calc\(100vh-var\(--nextra-navbar-height\)\)\] {
+  max-height: calc(100vh - var(--nextra-navbar-height));
+}
+._min-h-\[calc\(100vh-var\(--nextra-navbar-height\)\)\] {
+  min-height: calc(100vh - var(--nextra-navbar-height));
+}
+._w-5 {
+  width: 1.25rem;
+}
+._w-64 {
+  width: 16rem;
+}
+._w-auto {
+  width: auto;
+}
+._w-full {
+  width: 100%;
+}
+._min-w-0 {
+  min-width: 0;
+}
+._min-w-6 {
+  min-width: 1.5rem;
+}
+._min-w-\[--button-width\] {
+  min-width: var(--button-width);
+}
+.\!_max-w-2xl {
+  max-width: 42rem !important;
+}
+._max-w-6 {
+  max-width: 1.5rem;
+}
+._max-w-6xl {
+  max-width: 72rem;
+}
+._max-w-\[50\%\] {
+  max-width: 50%;
+}
+._max-w-\[90rem\] {
+  max-width: 90rem;
+}
+._shrink-0 {
+  flex-shrink: 0;
+}
+._grow {
+  flex-grow: 1;
+}
+._-rotate-90 {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+._transform-gpu {
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@keyframes _spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+._animate-spin {
+  animation: 1s linear infinite _spin;
+}
+._cursor-default {
+  cursor: default;
+}
+._cursor-pointer {
+  cursor: pointer;
+}
+._select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+._scroll-m-12 {
+  scroll-margin: 3rem;
+}
+._scroll-my-6 {
+  scroll-margin-top: 1.5rem;
+  scroll-margin-bottom: 1.5rem;
+}
+._scroll-py-6 {
+  scroll-padding-top: 1.5rem;
+  scroll-padding-bottom: 1.5rem;
+}
+._list-decimal {
+  list-style-type: decimal;
+}
+._list-disc {
+  list-style-type: disc;
+}
+._list-none {
+  list-style-type: none;
+}
+._grid-rows-\[min-content_1fr_min-content\] {
+  grid-template-rows: min-content 1fr min-content;
+}
+._flex-col {
+  flex-direction: column;
+}
+._flex-wrap {
+  flex-wrap: wrap;
+}
+._items-start {
+  align-items: flex-start;
+}
+._items-center {
+  align-items: center;
+}
+._justify-start {
+  justify-content: flex-start;
+}
+._justify-end {
+  justify-content: flex-end;
+}
+._justify-center {
+  justify-content: center;
+}
+._justify-between {
+  justify-content: space-between;
+}
+._gap-1 {
+  gap: 0.25rem;
+}
+._gap-1\.5 {
+  gap: 0.375rem;
+}
+._gap-2 {
+  gap: 0.5rem;
+}
+._gap-3 {
+  gap: 0.75rem;
+}
+._gap-4 {
+  gap: 1rem;
+}
+._overflow-hidden {
+  overflow: hidden;
+}
+._overflow-x-auto {
+  overflow-x: auto;
+}
+._overflow-y-auto {
+  overflow-y: auto;
+}
+._overflow-y-hidden {
+  overflow-y: hidden;
+}
+._overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+._overscroll-x-contain {
+  overscroll-behavior-x: contain;
+}
+._truncate {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+._text-ellipsis {
+  text-overflow: ellipsis;
+}
+._hyphens-auto {
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+._whitespace-nowrap {
+  white-space: nowrap;
+}
+._whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+._break-words {
+  overflow-wrap: break-word;
+}
+._rounded {
+  border-radius: 0.25rem;
+}
+._rounded-full {
+  border-radius: 9999px;
+}
+._rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+._rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+._rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+._border {
+  border-width: 1px;
+}
+._border-b {
+  border-bottom-width: 1px;
+}
+._border-b-0 {
+  border-bottom-width: 0;
+}
+._border-b-2 {
+  border-bottom-width: 2px;
+}
+._border-s {
+  border-inline-start-width: 1px;
+}
+._border-t {
+  border-top-width: 1px;
+}
+._border-black\/10 {
+  border-color: #0000001a;
+}
+._border-black\/5 {
+  border-color: #0000000d;
+}
+._border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+._border-current {
+  border-color: currentColor;
+}
+._border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+._border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+._border-neutral-200\/70 {
+  border-color: #e5e5e5b3;
+}
+._border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
+}
+._border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
+._border-transparent {
+  border-color: #0000;
+}
+._border-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 249 195 / var(--tw-border-opacity, 1));
+}
+._bg-\[rgb\(var\(--nextra-bg\)\,\.8\)\] {
+  background-color: rgb(var(--nextra-bg), 0.8);
+}
+._bg-black\/80 {
+  background-color: #000c;
+}
+._bg-black\/\[\.05\] {
+  background-color: #0000000d;
+}
+._bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+._bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+._bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+._bg-gray-400\/20 {
+  background-color: #9ca3af33;
+}
+._bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+}
+._bg-orange-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
+}
+._bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 49%) / var(--tw-bg-opacity, 1)
+  );
+}
+._bg-primary-50 {
+  --tw-bg-opacity: 1;
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 52%) / var(--tw-bg-opacity, 1)
+  );
+}
+._bg-primary-500\/10 {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 5%) / 0.1
+  );
+}
+._bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+._bg-transparent {
+  background-color: #0000;
+}
+._bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+._bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+}
+._p-0 {
+  padding: 0;
+}
+._p-0\.5 {
+  padding: 0.125rem;
+}
+._p-1 {
+  padding: 0.25rem;
+}
+._p-1\.5 {
+  padding: 0.375rem;
+}
+._p-2 {
+  padding: 0.5rem;
+}
+._p-4 {
+  padding: 1rem;
+}
+._p-8 {
+  padding: 2rem;
+}
+._px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+._px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+._px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+._px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+._px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+._px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+._px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+._py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+._py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+._py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+._py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+._py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+._py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+._pb-1 {
+  padding-bottom: 0.25rem;
+}
+._pb-1\.5 {
+  padding-bottom: 0.375rem;
+}
+._pb-2 {
+  padding-bottom: 0.5rem;
+}
+._pb-4 {
+  padding-bottom: 1rem;
+}
+._pb-8 {
+  padding-bottom: 2rem;
+}
+._pb-\[env\(safe-area-inset-bottom\)\] {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+._pb-px {
+  padding-bottom: 1px;
+}
+._pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
+  padding-left: max(env(safe-area-inset-left), 1.5rem);
+}
+._pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] {
+  padding-right: calc(env(safe-area-inset-right) - 1.5rem);
+}
+._pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
+  padding-right: max(env(safe-area-inset-right), 1.5rem);
+}
+._ps-10 {
+  padding-inline-start: 2.5rem;
+}
+._ps-6 {
+  padding-inline-start: 1.5rem;
+}
+._pt-1 {
+  padding-top: 0.25rem;
+}
+._pt-4 {
+  padding-top: 1rem;
+}
+._pt-6 {
+  padding-top: 1.5rem;
+}
+._pt-8 {
+  padding-top: 2rem;
+}
+._text-left {
+  text-align: left;
+}
+._text-center {
+  text-align: center;
+}
+._font-mono {
+  @apply font-mono;
+}
+._text-2xl {
+  font-size: 1.5rem;
+}
+._text-3xl {
+  font-size: 1.875rem;
+}
+._text-4xl {
+  font-size: 2.25rem;
+}
+._text-\[\.9em\] {
+  font-size: 0.9em;
+}
+._text-\[11px\] {
+  font-size: 11px;
+}
+._text-base {
+  font-size: 1rem;
+}
+._text-lg {
+  font-size: 1.125rem;
+}
+._text-sm {
+  font-size: 0.875rem;
+}
+._text-xl {
+  font-size: 1.25rem;
+}
+._text-xs {
+  font-size: 0.75rem;
+}
+._font-bold {
+  font-weight: 700;
+}
+._font-extrabold {
+  font-weight: 800;
+}
+._font-medium {
+  font-weight: 500;
+}
+._font-normal {
+  font-weight: 400;
+}
+._font-semibold {
+  font-weight: 600;
+}
+._uppercase {
+  text-transform: uppercase;
+}
+._capitalize {
+  text-transform: capitalize;
+}
+._italic {
+  font-style: italic;
+}
+._leading-5 {
+  line-height: 1.25rem;
+}
+._leading-7 {
+  line-height: 1.75rem;
+}
+._leading-\[1\.35rem\] {
+  line-height: 1.35rem;
+}
+._leading-tight {
+  line-height: 1.25;
+}
+._tracking-tight {
+  letter-spacing: -0.015em;
+}
+._text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+._text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
+}
+._text-current {
+  color: currentColor;
+}
+._text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+._text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+._text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+._text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+._text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+._text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+._text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+._text-orange-800 {
+  --tw-text-opacity: 1;
+  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
+}
+._text-primary-800 {
+  --tw-text-opacity: 1;
+  color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + -13%) / var(--tw-text-opacity, 1)
+  );
+}
+._text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+._text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
+}
+._text-slate-50 {
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+}
+._text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
+._text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
+}
+._underline {
+  text-decoration-line: underline;
+}
+._no-underline {
+  text-decoration-line: none;
+}
+._decoration-from-font {
+  text-decoration-thickness: from-font;
+}
+._subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+._opacity-0 {
+  opacity: 0;
+}
+._opacity-100 {
+  opacity: 1;
+}
+._opacity-25 {
+  opacity: 0.25;
+}
+._opacity-60 {
+  opacity: 0.6;
+}
+._opacity-75 {
+  opacity: 0.75;
+}
+._opacity-80 {
+  opacity: 0.8;
+}
+._shadow {
+  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --tw-shadow-colored:
+    0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+._shadow-\[0_12px_16px_rgb\(var\(--nextra-bg\)\)\] {
+  --tw-shadow: 0 12px 16px rgb(var(--nextra-bg));
+  --tw-shadow-colored: 0 12px 16px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+._shadow-lg {
+  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --tw-shadow-colored:
+    0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+._shadow-sm {
+  --tw-shadow: 0 1px 2px 0 #0000000d;
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+._shadow-xl {
+  --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+  --tw-shadow-colored:
+    0 20px 25px -5px var(--tw-shadow-color),
+    0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+._shadow-gray-100 {
+  --tw-shadow-color: #f3f4f6;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+._outline-none {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+._ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+}
+._ring-inset {
+  --tw-ring-inset: inset;
+}
+._ring-gray-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
+}
+._backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
+}
+._transition {
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    -webkit-backdrop-filter,
+    backdrop-filter;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._transition-all {
+  transition-property: all;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._transition-colors {
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._transition-opacity {
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+._duration-200 {
+  transition-duration: 0.2s;
+}
+._ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.\[counter-reset\:line\] {
+  counter-reset: line;
+}
+.\[text-underline-position\:from-font\] {
+  text-underline-position: from-font;
+}
+.\[transition\:background-color_1\.5s_ease\] {
+  transition: background-color 1.5s;
+}
+.\[word-break\:break-word\] {
+  word-break: break-word;
+}
+.nextra-code span {
+  background-color: var(--shiki-light-bg);
+  color: var(--shiki-light);
+}
+.nextra-code span:is(html[class~="dark"] *) {
+  background-color: var(--shiki-dark-bg);
+  color: var(--shiki-dark);
+}
+code.nextra-code {
+  -webkit-box-decoration-break: slice;
+  box-decoration-break: slice;
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1,
+    "ss01" 1;
+  font-size: 0.875rem;
+}
+:not(pre) > code.nextra-code:not([class*="twoslash-"]) {
+  overflow-wrap: break-word;
+  border-width: 1px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+  --tw-border-opacity: 0.04;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  --tw-bg-opacity: 0.03;
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.25em;
+  font-size: 0.9em;
+}
+:not(pre)
+  > code.nextra-code:not([class*="twoslash-"]):is(html[class~="dark"] *) {
+  background-color: #ffffff1a;
+  border-color: #ffffff1a;
+}
+pre code.nextra-code:not([class*="twoslash-"]) {
+  display: grid;
+}
+pre code.nextra-code:not([class*="twoslash-"])[data-line-numbers] > span {
+  padding-left: 0.5rem;
+}
+pre
+  code.nextra-code:not([class*="twoslash-"])[data-line-numbers]
+  > span:before {
+  counter-increment: line;
+  content: counter(line);
+  text-align: right;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  min-width: 2.6rem;
+  padding-right: 1rem;
+  display: inline-block;
+}
+pre code.nextra-code:not([class*="twoslash-"]) > span {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+pre code.nextra-code:not([class*="twoslash-"]) > span[data-highlighted-line] {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.1
+  );
+  --tw-shadow: 2px 0 currentColor inset;
+  --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+  color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.8
+  ) !important;
+}
+pre
+  code.nextra-code:not([class*="twoslash-"])
+  > span[data-highlighted-line]:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.2
+  );
+}
+pre code.nextra-code:not([class*="twoslash-"]) > span [data-highlighted-chars] {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.2
+  );
+  border-radius: 0.125rem;
+}
+pre
+  code.nextra-code:not([class*="twoslash-"])
+  > span
+  [data-highlighted-chars]:is(html[class~="dark"] *) {
+  --tw-ring-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.4
+  );
+}
+pre code.nextra-code:not([class*="twoslash-"]) > span [data-highlighted-chars] {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.2
+  );
+}
+pre
+  code.nextra-code:not([class*="twoslash-"])
+  > span
+  [data-highlighted-chars]:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 0%) / 0.4
+  );
+}
+@media not all and (min-width: 768px) {
+  html[data-nextra-word-wrap] pre code.nextra-code:not([class*="twoslash-"]) {
+    white-space: pre-wrap;
+  }
+}
+.nextra-copy-icon {
+  animation: 0.3s forwards fade-in;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+:root {
+  --twoslash-border-color: #8888;
+  --twoslash-underline-color: currentColor;
+  --twoslash-highlighted-border: 195, 125, 13;
+  --twoslash-popup-bg: #f8f8f8;
+  --twoslash-popup-color: inherit;
+  --twoslash-popup-shadow: #000 0px 1px 4px;
+  --twoslash-docs-color: #888;
+  --twoslash-docs-font: sans-serif;
+  --twoslash-matched-color: inherit;
+  --twoslash-unmatched-color: #888;
+  --twoslash-cursor-color: #8888;
+  --twoslash-error-color: 212, 86, 86;
+  --twoslash-error-bg: rgba(var(--twoslash-error-color), 0.13);
+  --twoslash-tag-color: 55, 114, 207;
+  --twoslash-tag-warn-color: 195, 125, 13;
+  --twoslash-tag-annotate-color: 27, 166, 115;
+}
+.dark {
+  --twoslash-popup-bg: #000;
+  --twoslash-border-color: #404040;
+}
+@media (prefers-reduced-motion: reduce) {
+  .twoslash * {
+    transition: none !important;
+  }
+}
+.twoslash:hover .twoslash-hover {
+  border-color: var(--twoslash-underline-color);
+}
+.twoslash-hover {
+  border-bottom: 1px dotted #0000;
+  transition: border-color 0.3s;
+  position: relative;
+}
+.twoslash-popup-container {
+  z-index: 10;
+  color: var(--twoslash-popup-color);
+  border: 1px solid var(--twoslash-border-color);
+  text-align: left;
+  border-radius: 0.25rem;
+  flex-direction: column;
+  margin-top: 0.375rem;
+  transition-property: opacity;
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  position: absolute;
+  transform: translateY(1.1em);
+  background: var(--twoslash-popup-bg) !important;
+}
+.twoslash-query-presisted .twoslash-popup-container {
+  z-index: 9;
+  transform: translateY(1.5em);
+}
+.twoslash-popup-arrow {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-color: var(--twoslash-border-color);
+  background-color: var(--twoslash-popup-bg);
+  pointer-events: none;
+  width: 0.375rem;
+  height: 0.375rem;
+  position: absolute;
+  top: -0.25rem;
+  left: 1em;
+}
+.twoslash-popup-code,
+.twoslash-popup-docs {
+  padding: 6px 8px;
+}
+.twoslash-popup-docs {
+  color: var(--twoslash-docs-color);
+  font-size: 0.875rem;
+  font-family: var(--twoslash-docs-font);
+  border-top: 1px solid var(--twoslash-border-color);
+}
+.twoslash-popup-docs-tags {
+  font-family: var(--twoslash-docs-font);
+  flex-direction: column;
+  display: flex;
+}
+.twoslash-popup-docs-tags,
+.twoslash-popup-docs-tag-name {
+  margin-right: 0.5em;
+}
+.twoslash-error-line {
+  background-color: var(--twoslash-error-bg);
+  color: rgb(var(--twoslash-error-color));
+  border-left: 3px solid;
+  margin: 0.2em 0;
+  padding: 6px 12px;
+  position: relative;
+}
+.twoslash-error {
+  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+    0 100% repeat-x;
+  padding-bottom: 2px;
+}
+.twoslash-completion-cursor {
+  position: relative;
+}
+.twoslash-completion-cursor .twoslash-completion-list {
+  background: var(--twoslash-popup-bg);
+  border-width: 1px;
+  border-color: var(--twoslash-border-color);
+  border-radius: 0.25rem;
+  position: absolute;
+  top: 0.25rem;
+  left: 0;
+  transform: translateY(1.2em);
+}
+.twoslash-completion-list {
+  width: 15rem;
+  padding: 0.25rem 0.5rem;
+}
+.twoslash-completion-list:before {
+  background-color: var(--twoslash-cursor-color);
+  content: " ";
+  width: 2px;
+  height: 1.4em;
+  position: absolute;
+  top: -1.6em;
+  left: -1px;
+}
+.twoslash-completion-list li {
+  align-items: center;
+  gap: 0.25em;
+  line-height: 1em;
+  display: flex;
+  overflow: hidden;
+}
+.twoslash-completion-list li span.twoslash-completions-unmatched {
+  color: var(--twoslash-unmatched-color);
+}
+.twoslash-completion-list .deprecated {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+.twoslash-completion-list li span.twoslash-completions-matched {
+  color: var(--twoslash-matched-color);
+}
+.twoslash-highlighted {
+  background-color: rgba(var(--twoslash-highlighted-border), 0.13);
+  border: 1px solid rgba(var(--twoslash-highlighted-border), 0.31);
+  border-radius: 4px;
+  margin: -1px -3px;
+  padding: 1px 2px;
+}
+.twoslash-completion-list .twoslash-completions-icon {
+  color: var(--twoslash-unmatched-color);
+  flex: none;
+  width: 1em;
+}
+.twoslash-tag-line {
+  background-color: rgba(var(--twoslash-tag-color), 0.13);
+  color: rgb(var(--twoslash-tag-color));
+  border-left: 3px solid;
+  align-items: center;
+  gap: 0.3em;
+  margin: 0.2em 0;
+  padding: 6px 10px;
+  display: flex;
+  position: relative;
+}
+.twoslash-tag-line .twoslash-tag-icon {
+  color: inherit;
+  width: 1.1em;
+}
+.twoslash-tag-line.twoslash-tag-error-line {
+  background-color: var(--twoslash-error-bg);
+  color: rgb(var(--twoslash-error-color));
+}
+.twoslash-tag-line.twoslash-tag-warn-line {
+  background-color: rgba(var(--twoslash-tag-warn-color), 0.13);
+  color: rgb(var(--twoslash-tag-warn-color));
+}
+.twoslash-tag-line.twoslash-tag-annotate-line {
+  background-color: rgba(var(--twoslash-tag-annotate-color), 0.13);
+  color: rgb(var(--twoslash-tag-annotate-color));
+}
+.subheading-anchor {
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.subheading-anchor:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 0.25rem;
+}
+.subheading-anchor:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0.25rem;
+}
+:target > .subheading-anchor,
+.subheading-anchor:hover,
+.subheading-anchor:focus {
+  opacity: 1;
+}
+:target > .subheading-anchor:after {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+:target > .subheading-anchor:is(html[class~="dark"] *):after {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
+}
+.subheading-anchor:after {
+  --tw-content: "#";
+  content: var(--tw-content);
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.subheading-anchor:is(html[class~="dark"] *):after {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
+}
+.nextra-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #73737366 transparent;
+  scrollbar-gutter: stable;
+}
+.nextra-scrollbar::-webkit-scrollbar {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.nextra-scrollbar::-webkit-scrollbar-track {
+  background-color: #0000;
+}
+.nextra-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+.nextra-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--tw-shadow-color);
+  --tw-shadow-color: #73737333;
+  --tw-shadow: var(--tw-shadow-colored);
+  background-clip: content-box;
+  border: 3px solid #0000;
+}
+.nextra-scrollbar::-webkit-scrollbar-thumb:hover:hover {
+  --tw-shadow-color: #73737366;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.nextra-steps h2,
+.nextra-steps h3,
+.nextra-steps h4 {
+  counter-increment: var(--counter-id);
+  letter-spacing: -0.015em;
+  border-width: 0;
+  margin-top: 2rem;
+  padding-bottom: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.nextra-steps h2:before,
+.nextra-steps h3:before,
+.nextra-steps h4:before {
+  border-width: 4px;
+  border-color: rgb(var(--nextra-bg));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  width: 33px;
+  height: 33px;
+  position: absolute;
+}
+.nextra-steps h2:is(html[class~="dark"] *):before,
+.nextra-steps h3:is(html[class~="dark"] *):before,
+.nextra-steps h4:is(html[class~="dark"] *):before {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+.nextra-steps h2:before,
+.nextra-steps h3:before,
+.nextra-steps h4:before {
+  text-align: center;
+  text-indent: -1px;
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+  margin-top: 3px;
+  content: counter(var(--counter-id));
+  border-radius: 9999px;
+  margin-inline-start: -41px;
+  font-size: 1rem;
+  font-weight: 400;
+}
+.nextra-cards {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)
+  );
+}
+.nextra-card img {
+  -webkit-user-select: none;
+  user-select: none;
+}
+.nextra-card svg {
+  color: #0000004d;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: auto;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    -webkit-backdrop-filter,
+    backdrop-filter;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.nextra-card svg:is(html[class~="dark"] *) {
+  color: #fff6;
+}
+.nextra-card:hover svg {
+  color: currentColor !important;
+}
+.nextra-card p {
+  margin-top: 0.5rem;
+}
+[data-rmiz-ghost] {
+  pointer-events: none;
+  position: absolute;
+}
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  background-color: #000000b3;
+  border-radius: 9999px;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+[data-rmiz-btn-zoom]:is(html[class~="dark"] *),
+[data-rmiz-btn-unzoom]:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+  background-color: #ffffffb3;
+}
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  outline-offset: 2px;
+  touch-action: manipulation;
+  appearance: none;
+  padding: 9px;
+}
+[data-rmiz-btn-zoom] {
+  cursor: zoom-in;
+  position: absolute;
+  inset: 10px 10px auto auto;
+}
+[data-rmiz-btn-zoom]:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  pointer-events: none;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+[data-rmiz-btn-unzoom] {
+  cursor: zoom-out;
+  z-index: 1;
+  position: absolute;
+  inset: 20px 20px auto auto;
+}
+[data-rmiz-content="found"] img,
+[data-rmiz-content="found"] svg,
+[data-rmiz-content="found"] [role="img"],
+[data-rmiz-content="found"] [data-zoom] {
+  cursor: zoom-in;
+}
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+[data-rmiz-modal][open] {
+  background: 0 0;
+  border: 0;
+  width: 100dvw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+}
+[data-rmiz-modal-overlay] {
+  background: rgba(var(--nextra-bg), 0.8);
+  transition: opacity 0.3s;
+  position: absolute;
+  inset: 0;
+}
+[data-rmiz-modal-overlay="hidden"] {
+  opacity: 0;
+}
+[data-rmiz-modal-overlay="visible"] {
+  opacity: 1;
+}
+[data-rmiz-modal-content] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+[data-rmiz-modal-img] {
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: 0 0;
+  transition: transform 0.3s;
+  position: absolute;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay],
+  [data-rmiz-modal-img] {
+    transition-duration: 0.01ms;
+  }
+  .nextra-hamburger svg g,
+  .nextra-hamburger svg path {
+    transition-property: none !important;
+  }
+}
+.nextra-hamburger svg {
+  --transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
+}
+.nextra-hamburger svg g {
+  transform-origin: 50%;
+  transition: var(--transition);
+}
+.nextra-hamburger svg path {
+  opacity: 1;
+  transition:
+    var(--transition) 0.15s,
+    opacity 0.15s ease 0.15s;
+}
+.nextra-hamburger svg.open path {
+  transition:
+    var(--transition),
+    opacity 0s ease 0.15s;
+}
+.nextra-hamburger svg.open g {
+  transition: var(--transition) 0.15s;
+}
+.nextra-hamburger svg.open > path {
+  opacity: 0;
+}
+.nextra-hamburger svg.open > g:first-of-type {
+  transform: rotate(45deg);
+}
+.nextra-hamburger svg.open > g:first-of-type path {
+  transform: translateY(6px);
+}
+.nextra-hamburger svg.open > g:nth-of-type(2) {
+  transform: rotate(-45deg);
+}
+.nextra-hamburger svg.open > g:nth-of-type(2) path {
+  transform: translateY(-6px);
+}
+article.nextra-body-typesetting-article {
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1;
+  font-size: 17px;
+}
+article.nextra-body-typesetting-article h1 {
+  text-align: center;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+}
+article.nextra-body-typesetting-article h2 {
+  border-style: none;
+}
+article.nextra-body-typesetting-article a {
+  text-decoration-line: none;
+}
+article.nextra-body-typesetting-article a:hover {
+  text-decoration-line: underline;
+}
+article.nextra-body-typesetting-article p {
+  line-height: 2rem;
+}
+article.nextra-body-typesetting-article code {
+  border-style: none;
+}
+article.nextra-body-typesetting-article code:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
+}
+article.nextra-body-typesetting-article pre code:is(html[class~="dark"] *) {
+  background-color: #0000;
+}
+article.nextra-body-typesetting-article .subheading-anchor:hover {
+  text-decoration-line: none;
+}
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1,
+    "ss01" 1;
+  -webkit-tap-highlight-color: transparent;
+  font-size: 1rem;
+}
+html:not(:has(:focus)) {
+  scroll-padding-top: var(--nextra-navbar-height);
+}
+body {
+  width: 100%;
+}
+body:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+.nextra-focusable,
+.nextra-focus:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 41%) / var(--tw-ring-opacity, 1)
+  );
+  --tw-ring-offset-width: 1px;
+  --tw-ring-offset-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 32%)
+  );
+}
+.nextra-focusable:is(html[class~="dark"] *),
+.nextra-focus:focus-visible:is(html[class~="dark"] *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + -13%) / var(--tw-ring-opacity, 1)
+  );
+  --tw-ring-offset-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + -6%)
+  );
+}
+.nextra-focusable:focus-visible,
+.nextra-focus:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+.nextra-content {
+  --tw-text-opacity: 1;
+  color: hsl(var(--color-neu-800) / var(--tw-text-opacity, 1));
+}
+@media (max-width: 767px) {
+  .nextra-sidebar-container {
+    z-index: 15;
+    overscroll-behavior: contain;
+    padding-top: calc(var(--nextra-navbar-height));
+    will-change: transform, opacity;
+    contain: layout style;
+    backface-visibility: hidden;
+    width: 100%;
+    transition: transform 0.6s cubic-bezier(0.52, 0.16, 0.04, 1);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+  }
+  .nextra-sidebar-container > .nextra-scrollbar {
+    -webkit-mask-image:
+      linear-gradient(#0000, #000 20px),
+      linear-gradient(270deg, #000 10px, #0000 10px);
+    mask-image:
+      linear-gradient(#0000, #000 20px),
+      linear-gradient(270deg, #000 10px, #0000 10px);
+  }
+  .nextra-banner-container ~ div .nextra-sidebar-container {
+    padding-top: 6.5rem;
+  }
+  .nextra-banner-container ~ div.nextra-nav-container {
+    top: 2.5rem;
+  }
+  @media (min-width: 768px) {
+    .nextra-banner-container ~ div.nextra-nav-container {
+      top: 0;
+    }
+  }
+  .nextra-banner-hidden
+    .nextra-banner-container
+    ~ div
+    .nextra-sidebar-container {
+    padding-top: 4rem;
+  }
+  .nextra-banner-hidden .nextra-nav-container {
+    top: 0 !important;
+  }
+  .nextra-search .excerpt {
+    text-overflow: ellipsis;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+@media (min-width: 768px) {
+  .nextra-toc > .div,
+  .nextra-sidebar-container {
+    -webkit-mask-image:
+      linear-gradient(#0000, #000 20px),
+      linear-gradient(270deg, #000 10px, #0000 10px);
+    mask-image:
+      linear-gradient(#0000, #000 20px),
+      linear-gradient(270deg, #000 10px, #0000 10px);
+  }
+}
+.contains-task-list {
+  margin-left: 0;
+  list-style-type: none;
+}
+.contains-task-list input[type="checkbox"] {
+  margin-right: 0.25rem;
+}
+.nextra-sidebar-container [data-toggle-animation="show"] button {
+  opacity: 0;
+  animation: 1s 0.2s forwards nextra-fadein;
+}
+.nextra-sidebar-container [data-toggle-animation="hide"] button {
+  opacity: 0;
+  animation: 1s 0.2s forwards nextra-fadein2;
+}
+.footnotes a[data-footnote-backref] {
+  font-family: initial;
+}
+@keyframes nextra-fadein {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes nextra-fadein2 {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+body,
+.nextra-nav-container-blur,
+.nextra-sidebar-footer {
+  background-color: rgb(var(--nextra-bg));
+}
+@media not all and (min-width: 768px) {
+  .nextra-sidebar-container {
+    background-color: rgb(var(--nextra-bg));
+  }
+}
+.nextra-toc-footer,
+.nextra-sidebar-footer {
+  border-top-width: 1px;
+}
+.nextra-toc-footer:is(html[class~="dark"] *),
+.nextra-sidebar-footer:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+}
+@media (prefers-contrast: more) {
+  .nextra-toc-footer,
+  .nextra-sidebar-footer {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow:
+      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+  .nextra-toc-footer:is(html[class~="dark"] *),
+  .nextra-sidebar-footer:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+  }
+}
+.nextra-toc-footer,
+.nextra-sidebar-footer {
+  --tw-shadow: 0 -12px 16px rgb(var(--nextra-bg));
+  --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.\*\:_origin-center > * {
+  transform-origin: 50%;
+}
+.\*\:_rotate-90 > * {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.\*\:_transition-transform > * {
+  transition-property: transform;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.placeholder\:_text-gray-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.before\:_absolute:before {
+  content: var(--tw-content);
+  position: absolute;
+}
+.before\:_inset-y-1:before {
+  content: var(--tw-content);
+  top: 0.25rem;
+  bottom: 0.25rem;
+}
+.before\:_w-px:before {
+  content: var(--tw-content);
+  width: 1px;
+}
+.before\:_bg-gray-200:before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.before\:_opacity-25:before {
+  content: var(--tw-content);
+  opacity: 0.25;
+}
+.before\:_content-\[\"\"\]:before {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.before\:_content-\[\"\#\"\]:before {
+  --tw-content: "#";
+  content: var(--tw-content);
+}
+.after\:_transition-transform:after {
+  content: var(--tw-content);
+  transition-property: transform;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.after\:_duration-75:after {
+  content: var(--tw-content);
+  transition-duration: 75ms;
+}
+.after\:_content-\[\"→\"\]:after {
+  --tw-content: "→";
+  content: var(--tw-content);
+}
+.first\:\*\:_origin-\[35\%\] > :first-child {
+  transform-origin: 35%;
+}
+.first\:\*\:_rotate-180 > :first-child {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.even\:_bg-gray-100:nth-child(2n) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.empty\:_invisible:empty {
+  visibility: hidden;
+}
+.focus-within\:_opacity-100:focus-within {
+  opacity: 1;
+}
+.hover\:_border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+.hover\:_bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.hover\:_bg-gray-800\/5:hover {
+  background-color: #1f29370d;
+}
+.hover\:_bg-slate-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
+}
+.hover\:_text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+.hover\:_text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.hover\:_no-underline:hover {
+  text-decoration-line: none;
+}
+.hover\:_opacity-75:hover {
+  opacity: 0.75;
+}
+.hover\:_shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --tw-shadow-colored:
+    0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.hover\:_shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --tw-shadow-colored:
+    0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.hover\:_shadow-gray-100:hover {
+  --tw-shadow-color: #f3f4f6;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.focus\:_not-sr-only:focus {
+  clip: auto;
+  white-space: normal;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  position: static;
+  overflow: visible;
+}
+.focus\:_fixed:focus {
+  position: fixed;
+}
+.focus\:_z-50:focus {
+  z-index: 50;
+}
+.focus\:_m-3:focus {
+  margin: 0.75rem;
+}
+.focus\:_ml-4:focus {
+  margin-left: 1rem;
+}
+.focus\:_h-\[calc\(var\(--nextra-navbar-height\)-1\.5rem\)\]:focus {
+  height: calc(var(--nextra-navbar-height) - 1.5rem);
+}
+.focus\:_rounded-lg:focus {
+  border-radius: 0.5rem;
+}
+.focus\:_border:focus {
+  border-width: 1px;
+}
+.focus\:_border-neutral-400:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+}
+.focus\:_bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+.focus\:_px-3:focus {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.focus\:_py-2:focus {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.focus\:_align-middle:focus {
+  vertical-align: middle;
+}
+.focus\:_text-sm:focus {
+  font-size: 0.875rem;
+}
+.focus\:_font-bold:focus {
+  font-weight: 700;
+}
+.focus\:_text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.active\:_shadow-sm:active {
+  --tw-shadow: 0 1px 2px 0 #0000000d;
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.active\:_shadow-gray-200:active {
+  --tw-shadow-color: #e5e7eb;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+._group:hover .after\:group-hover\:_translate-x-0\.5:after {
+  content: var(--tw-content);
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:_transform-none {
+    transform: none;
+  }
+  .motion-reduce\:_transition-none,
+  .motion-reduce\:\*\:_transition-none > * {
+    transition-property: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .contrast-more\:_border {
+    border-width: 1px;
+  }
+  .contrast-more\:_border-current {
+    border-color: currentColor;
+  }
+  .contrast-more\:_border-gray-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:_border-gray-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:_border-neutral-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:_border-primary-500 {
+    --tw-border-opacity: 1;
+    border-color: hsl(
+      var(--nextra-primary-hue) var(--nextra-primary-saturation)
+        calc(var(--nextra-primary-lightness) + 5%) / var(--tw-border-opacity, 1)
+    );
+  }
+  .contrast-more\:_border-transparent {
+    border-color: #0000;
+  }
+  .contrast-more\:_font-bold {
+    font-weight: 700;
+  }
+  .contrast-more\:_text-current {
+    color: currentColor;
+  }
+  .contrast-more\:_text-gray-700 {
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:_text-gray-800 {
+    --tw-text-opacity: 1;
+    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:_text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:_underline {
+    text-decoration-line: underline;
+  }
+  .contrast-more\:_shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow:
+      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+  .contrast-more\:_ring-gray-900 {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity, 1));
+  }
+  .contrast-more\:_contrast-150 {
+    --tw-contrast: contrast(1.5);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+  .contrast-more\:hover\:_border-gray-900:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
+  }
+}
+.dark\:_border-blue-200\/30:is(html[class~="dark"] *) {
+  border-color: #bfdbfe4d;
+}
+.dark\:_border-gray-100\/20:is(html[class~="dark"] *) {
+  border-color: #f3f4f633;
+}
+.dark\:_border-gray-600:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
+}
+.dark\:_border-gray-700:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+.dark\:_border-neutral-700:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
+}
+.dark\:_border-neutral-800:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+}
+.dark\:_border-orange-400\/30:is(html[class~="dark"] *) {
+  border-color: #fb923c4d;
+}
+.dark\:_border-primary-100\/10:is(html[class~="dark"] *) {
+  border-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 49%) / 0.1
+  );
+}
+.dark\:_border-red-200\/30:is(html[class~="dark"] *) {
+  border-color: #fecaca4d;
+}
+.dark\:_border-white\/20:is(html[class~="dark"] *) {
+  border-color: #fff3;
+}
+.dark\:_border-yellow-200\/30:is(html[class~="dark"] *) {
+  border-color: #fef08a4d;
+}
+.dark\:_bg-black:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+.dark\:_bg-black\/50:is(html[class~="dark"] *) {
+  background-color: #00000080;
+}
+.dark\:_bg-black\/60:is(html[class~="dark"] *) {
+  background-color: #0009;
+}
+.dark\:_bg-blue-900\/30:is(html[class~="dark"] *) {
+  background-color: #1e3a8a4d;
+}
+.dark\:_bg-gray-50\/10:is(html[class~="dark"] *) {
+  background-color: #f9fafb1a;
+}
+.dark\:_bg-neutral-800:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+.dark\:_bg-neutral-900:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+}
+.dark\:_bg-orange-400\/20:is(html[class~="dark"] *) {
+  background-color: #fb923c33;
+}
+.dark\:_bg-primary-100\/10:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 49%) / 0.1
+  );
+}
+.dark\:_bg-primary-100\/5:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 49%) / 0.05
+  );
+}
+.dark\:_bg-primary-400\/10:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 21%) / 0.1
+  );
+}
+.dark\:_bg-primary-500\/10:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 5%) / 0.1
+  );
+}
+.dark\:_bg-red-900\/30:is(html[class~="dark"] *) {
+  background-color: #7f1d1d4d;
+}
+.dark\:_bg-yellow-700\/30:is(html[class~="dark"] *) {
+  background-color: #a162074d;
+}
+.dark\:_bg-\[linear-gradient\(1deg\,\#383838\,\#212121\)\]:is(
+    html[class~="dark"] *
+  ) {
+  background-image: linear-gradient(1deg, #383838, #212121);
+}
+.dark\:_text-blue-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-gray-100:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-gray-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-gray-300:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-gray-400:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-gray-50:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-neutral-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-neutral-400:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-neutral-600:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-orange-300:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-red-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-slate-100:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-white:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.dark\:_text-yellow-200:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
+}
+.dark\:_shadow-none:is(html[class~="dark"] *) {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.dark\:_ring-neutral-700:is(html[class~="dark"] *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity, 1));
+}
+.dark\:placeholder\:_text-gray-400:is(html[class~="dark"] *)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark\:before\:_bg-neutral-800:is(html[class~="dark"] *):before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+.even\:dark\:_bg-gray-600\/20:is(html[class~="dark"] *):nth-child(2n) {
+  background-color: #4b556333;
+}
+.dark\:hover\:_border-neutral-500:hover:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(115 115 115 / var(--tw-border-opacity, 1));
+}
+.dark\:hover\:_border-neutral-700:hover:is(html[class~="dark"] *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
+}
+.dark\:hover\:_bg-gray-100\/5:hover:is(html[class~="dark"] *) {
+  background-color: #f3f4f60d;
+}
+.dark\:hover\:_bg-neutral-700:hover:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
+}
+.dark\:hover\:_bg-neutral-800:hover:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+.dark\:hover\:_bg-neutral-900:hover:is(html[class~="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+}
+.dark\:hover\:_bg-primary-100\/5:hover:is(html[class~="dark"] *) {
+  background-color: hsl(
+    var(--nextra-primary-hue) var(--nextra-primary-saturation)
+      calc(var(--nextra-primary-lightness) + 49%) / 0.05
+  );
+}
+.dark\:hover\:_text-gray-100:hover:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:_text-gray-200:hover:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:_text-gray-300:hover:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:_text-gray-50:hover:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:_text-neutral-50:hover:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:_shadow-none:hover:is(html[class~="dark"] *) {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.focus\:dark\:_border-neutral-800:is(html[class~="dark"] *):focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+}
+.focus\:dark\:_bg-neutral-900:is(html[class~="dark"] *):focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+}
+.focus\:dark\:_text-gray-100:is(html[class~="dark"] *):focus {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+@media (prefers-contrast: more) {
+  .contrast-more\:dark\:_border-current:is(html[class~="dark"] *) {
+    border-color: currentColor;
+  }
+  .contrast-more\:dark\:_border-gray-50:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:dark\:_border-neutral-400:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:dark\:_border-primary-500:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: hsl(
+      var(--nextra-primary-hue) var(--nextra-primary-saturation)
+        calc(var(--nextra-primary-lightness) + 5%) / var(--tw-border-opacity, 1)
+    );
+  }
+  .dark\:contrast-more\:_border-neutral-400:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
+  }
+  .contrast-more\:dark\:_text-current:is(html[class~="dark"] *) {
+    color: currentColor;
+  }
+  .contrast-more\:dark\:_text-gray-100:is(html[class~="dark"] *) {
+    --tw-text-opacity: 1;
+    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:dark\:_text-gray-300:is(html[class~="dark"] *) {
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:dark\:_text-gray-50:is(html[class~="dark"] *) {
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
+  }
+  .contrast-more\:dark\:_ring-gray-50:is(html[class~="dark"] *) {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity, 1));
+  }
+  .contrast-more\:dark\:hover\:_border-gray-50:hover:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
+  }
+}
+@media not all and (min-width: 1280px) {
+  .max-xl\:_hidden {
+    display: none;
+  }
+}
+@media not all and (min-width: 768px) {
+  .max-md\:_sticky {
+    position: sticky;
+  }
+  .max-md\:_hidden {
+    display: none;
+  }
+  .max-md\:_h-full {
+    height: 100%;
+  }
+  .max-md\:_grow {
+    flex-grow: 1;
+  }
+  .max-md\:_overflow-hidden {
+    overflow: hidden;
+  }
+  .max-md\:\[transform\:translate3d\(0\,-100\%\,0\)\] {
+    transform: translateY(-100%);
+  }
+  .max-md\:\[transform\:translate3d\(0\,0\,0\)\] {
+    transform: translate(0, 0);
+  }
+}
+@media not all and (min-width: 640px) {
+  .max-sm\:_hidden {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .md\:_sticky {
+    position: sticky;
+  }
+  .md\:_top-16 {
+    top: 4rem;
+  }
+  .md\:_-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+  .md\:_hidden {
+    display: none;
+  }
+  .md\:_h-\[100px\] {
+    height: 100px;
+  }
+  .md\:_h-\[calc\(100vh-var\(--nextra-navbar-height\)-var\(--nextra-menu-height\)\)\] {
+    height: calc(
+      100vh - var(--nextra-navbar-height) - var(--nextra-menu-height)
+    );
+  }
+  .md\:\!_max-h-\[min\(calc\(100vh-5rem\)\,400px\)\] {
+    max-height: min(100vh - 5rem, 400px) !important;
+  }
+  .md\:_w-20 {
+    width: 5rem;
+  }
+  .md\:_w-64 {
+    width: 16rem;
+  }
+  .md\:_w-\[576px\] {
+    width: 576px;
+  }
+  .md\:_shrink-0 {
+    flex-shrink: 0;
+  }
+  .md\:_justify-start {
+    justify-content: flex-start;
+  }
+  .md\:_self-start {
+    align-self: flex-start;
+  }
+  .md\:_px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+  .md\:_text-lg {
+    font-size: 1.125rem;
+  }
+  .md\:_text-sm {
+    font-size: 0.875rem;
+  }
+}
+@media (min-width: 1536px) {
+  .\32 xl\:_-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+}
+.ltr\:_right-1\.5:where([dir="ltr"], [dir="ltr"] *) {
+  right: 0.375rem;
+}
+.ltr\:_ml-3:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 0.75rem;
+}
+.ltr\:_ml-6:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 1.5rem;
+}
+.ltr\:_ml-auto:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: auto;
+}
+.ltr\:_mr-auto:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right: auto;
+}
+.ltr\:_rotate-180:where([dir="ltr"], [dir="ltr"] *) {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.ltr\:_border-l-2:where([dir="ltr"], [dir="ltr"] *) {
+  border-left-width: 2px;
+}
+.ltr\:_pl-3:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 0.75rem;
+}
+.ltr\:_pl-4:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 1rem;
+}
+.ltr\:_pl-6:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 1.5rem;
+}
+.ltr\:_pr-2:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 0.5rem;
+}
+.ltr\:_pr-4:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 1rem;
+}
+.ltr\:_pr-9:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 2.25rem;
+}
+.ltr\:_text-right:where([dir="ltr"], [dir="ltr"] *) {
+  text-align: right;
+}
+.\*\:ltr\:_rotate-90:where([dir="ltr"], [dir="ltr"] *) > * {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.ltr\:before\:_left-0:where([dir="ltr"], [dir="ltr"] *):before {
+  content: var(--tw-content);
+  left: 0;
+}
+@media (min-width: 1280px) {
+  .ltr\:xl\:_ml-\[calc\(50\%-50vw\+16rem\)\]:where([dir="ltr"], [dir="ltr"] *) {
+    margin-left: calc(50% - 50vw + 16rem);
+  }
+  .ltr\:xl\:_mr-\[calc\(50\%-50vw\)\]:where([dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(50% - 50vw);
+  }
+}
+.rtl\:_left-1\.5:where([dir="rtl"], [dir="rtl"] *) {
+  left: 0.375rem;
+}
+.rtl\:_ml-auto:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: auto;
+}
+.rtl\:_mr-3:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0.75rem;
+}
+.rtl\:_mr-6:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 1.5rem;
+}
+.rtl\:_mr-auto:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: auto;
+}
+.rtl\:_rotate-180:where([dir="rtl"], [dir="rtl"] *) {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.rtl\:_border-r-2:where([dir="rtl"], [dir="rtl"] *) {
+  border-right-width: 2px;
+}
+.rtl\:_pl-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.5rem;
+}
+.rtl\:_pl-4:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 1rem;
+}
+.rtl\:_pl-9:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 2.25rem;
+}
+.rtl\:_pr-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.75rem;
+}
+.rtl\:_pr-4:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 1rem;
+}
+.rtl\:_pr-6:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 1.5rem;
+}
+.rtl\:_text-left:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: left;
+}
+.\*\:rtl\:_-rotate-180:where([dir="rtl"], [dir="rtl"] *) > * {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.\*\:rtl\:_rotate-\[-270deg\]:where([dir="rtl"], [dir="rtl"] *) > * {
+  --tw-rotate: -270deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.rtl\:before\:_right-0:where([dir="rtl"], [dir="rtl"] *):before {
+  content: var(--tw-content);
+  right: 0;
+}
+@media (min-width: 1280px) {
+  .rtl\:xl\:_ml-\[calc\(50\%-50vw\)\]:where([dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(50% - 50vw);
+  }
+  .rtl\:xl\:_mr-\[calc\(50\%-50vw\+16rem\)\]:where([dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(50% - 50vw + 16rem);
+  }
+}
+@media print {
+  .print\:_hidden {
+    display: none;
+  }
+  .print\:_bg-transparent {
+    background-color: #0000;
+  }
+}
+.\[\&\:\:-webkit-details-marker\]\:_hidden::-webkit-details-marker {
+  display: none;
+}
+.\[\&\:\:-webkit-search-cancel-button\]\:_appearance-none::-webkit-search-cancel-button {
+  appearance: none;
+}
+.\[\&\:not\(\:first-child\)\]\:_mt-4:not(:first-child) {
+  margin-top: 1rem;
+}
+.\[\&\:not\(\:first-child\)\]\:_mt-5:not(:first-child) {
+  margin-top: 1.25rem;
+}
+.\[\&\:not\(\:first-child\)\]\:_mt-6:not(:first-child) {
+  margin-top: 1.5rem;
+}
+.\[\&_svg\]\:_text-red-500 svg {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.resizing .\[\.resizing_\&\]\:_transition-none {
+  transition-property: none;
+}
+:is(ol, ul) .\[\:is\(ol\,ul\)_\&\]\:_my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+[data-expanded]
+  > summary:first-child
+  > .\[\[data-expanded\]\>summary\:first-child\>\&\]\:_rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* additions */
+
+body.nextra-banner-hidden .\[body\.nextra-banner-hidden_\&\]\:_hidden {
+  display: none;
+}
+div:hover > .\[div\:hover\>\&\]\:_opacity-100 {
+  opacity: 1;
+}
+
+kbd._border._gap-1 {
+  border-bottom-width: 2px;
+  gap: 0.125rem;
+  border-color: hsl(var(--color-neu-300));
+  color: hsl(var(--color-neu-700));
+
+  .dark & {
+    border-color: hsl(var(--color-neu-100) / 0.8);
+    color: hsl(var(--color-neu-500));
+  }
+}
+
+.nextra-search-results {
+  & .\_text-primary-600 {
+    color: hsl(var(--color-pri-base));
+  }
+}
+.dark .nextra-search-results {
+  & .\_text-primary-600 {
+    color: hsl(var(--color-pri-light));
+  }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e76f2a8888..bb88615211 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,16 +2,12 @@ import type { AppProps } from "next/app"
 import { Roboto_Flex, Roboto_Mono } from "next/font/google"
 import { useRouter } from "next/router"
 import { useEffect } from "react"
-import "@/globals.css"
-import "@/codemirror.less"
 
-const robotoFlex = Roboto_Flex({
-  subsets: ["latin"],
-})
+import { NewFontsStyleTag } from "@/app/fonts"
 
-const robotoMono = Roboto_Mono({
-  subsets: ["latin"],
-})
+import "@/globals.css"
+import "@/codemirror.less"
+import "@/app/colors.css"
 
 const gaId = process.env.NEXT_PUBLIC_GA_ID
 
@@ -32,15 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <style jsx global>{`
-        html {
-          font-family: ${robotoFlex.style.fontFamily};
-        }
-
-        .roboto-mono {
-          font-family: ${robotoMono.style.fontFamily};
-        }
-      `}</style>
+      <NewFontsStyleTag />
       <Component {...pageProps} />
     </>
   )
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 04fc78f7b8..097cb7ff3a 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document"
+
 export default function Document() {
   return (
     <Html lang="en">
diff --git a/src/pages/_meta.tsx b/src/pages/_meta.tsx
index 104bf3ae14..20083b625b 100644
--- a/src/pages/_meta.tsx
+++ b/src/pages/_meta.tsx
@@ -35,7 +35,7 @@ export default {
   },
   spec: {
     type: "page",
-    title: <span className="after:font-sans after:content-['_↗']">Spec</span>,
+    title: "Spec",
     href: "https://spec.graphql.org",
     newWindow: true,
   },
@@ -80,7 +80,12 @@ export default {
   },
   conf: {
     type: "page",
-    title: "GraphQLConf",
+    title: (
+      <Emphasis>
+        GraphQLConf
+        <span className="max-xl:hidden"> 2025</span>
+      </Emphasis>
+    ),
     route: "/conf/2025",
   },
   "graphql-js": {
@@ -88,3 +93,11 @@ export default {
     title: "GraphQL.JS Tutorial",
   },
 }
+
+function Emphasis({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="[a:has(>&)]:[a:has(>&)]:border [a:has(>&)]:border [a:has(>&)]:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:border-transparent [a:hover:has(>&)]:no-underline">
+      {children}
+    </span>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b33ded3675..66593ba6dd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,6 +3,8 @@ import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
 import plugin from "tailwindcss/plugin"
 import containerQueries from "@tailwindcss/container-queries"
+import browserPlugin from "@igorkowalczyk/is-browser"
+
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
   theme: {
@@ -190,7 +192,7 @@ const config: Config = {
 
       addBase({
         ".typography-link": {
-          color: "theme('colors.neu-800')",
+          color: "hsl(var(--color-neu-900) / var(--tw-text-opacity, 1))",
           textDecoration: "underline",
           "&:hover": {
             textDecoration: "none",
@@ -198,7 +200,17 @@ const config: Config = {
         },
       })
     }),
+    tailwindMediaHover(),
+    browserPlugin,
   ],
   darkMode: ["class", 'html[class~="dark"]'],
 }
+
 export default config
+
+function tailwindMediaHover() {
+  return plugin(({ addVariant }) => {
+    addVariant("hover-hover", "@media (hover: hover)")
+    addVariant("hover-none", "@media (hover: none)")
+  })
+}
diff --git a/test/e2e/graphql-interactive.spec.ts b/test/e2e/graphql-interactive.spec.ts
new file mode 100644
index 0000000000..990db07467
--- /dev/null
+++ b/test/e2e/graphql-interactive.spec.ts
@@ -0,0 +1,144 @@
+import { test, expect, type Locator } from "@playwright/test"
+
+test.describe("interactive examples", () => {
+  test("adds appearsIn field to hero query and gets correct response", async ({
+    page,
+  }) => {
+    await page.goto("/learn")
+    await page.waitForSelector(".CodeMirror", { timeout: 10000 })
+
+    const editors = page.locator(".miniGraphiQL")
+    let heroEditor: Locator | null = null
+
+    for (let i = 0; i < (await editors.count()); i++) {
+      const editor = editors.nth(i)
+      const content = await editor.textContent()
+      if (content && content.includes("hero")) {
+        heroEditor = editor
+        break
+      }
+    }
+
+    if (!heroEditor) {
+      throw new Error("Could not find hero GraphQL editor")
+    }
+
+    const codeMirrorEditor = heroEditor.locator(".CodeMirror").first()
+    await expect(codeMirrorEditor).toBeVisible()
+
+    await codeMirrorEditor.click()
+
+    const codeLines = codeMirrorEditor.locator(".CodeMirror-line")
+
+    // Find the line containing "name" and click after it
+    for (let i = 0; i < (await codeLines.count()); i++) {
+      const line = codeLines.nth(i)
+      const lineText = await line.textContent()
+      if (lineText && lineText.includes("name")) {
+        await line.click()
+        // Move to end of line
+        await page.keyboard.press("End")
+        // Add new line
+        await page.keyboard.press("Enter")
+        break
+      }
+    }
+
+    await page.keyboard.type("ap")
+    await page.keyboard.press("Control+Space")
+
+    const autoCompleteMenu = page.locator(".CodeMirror-hints")
+    await expect(autoCompleteMenu).toBeVisible({ timeout: 5000 })
+
+    const appearsInSuggestion = page
+      .locator(".CodeMirror-hints li")
+      .filter({ hasText: "appearsIn" })
+
+    if (await appearsInSuggestion.isVisible()) {
+      await appearsInSuggestion.click()
+    } else {
+      await page.keyboard.press("Enter")
+    }
+
+    const resultViewer = heroEditor.locator(".result-window")
+    await expect(resultViewer).toBeVisible()
+
+    await expect
+      .poll(async () => {
+        const resultContent = await resultViewer.textContent()
+        const jsonMatch = resultContent?.match(/\{[\s\S]*\}/)
+        if (jsonMatch) {
+          const responseJson = JSON.parse(jsonMatch[0])
+          return responseJson
+        }
+
+        return {}
+      })
+      .toStrictEqual({
+        data: {
+          hero: {
+            name: "R2-D2",
+            appearsIn: ["NEWHOPE", "EMPIRE", "JEDI"],
+          },
+        },
+      })
+  })
+
+  test("edits variables and receives an expected mutation result", async ({
+    page,
+  }) => {
+    await page.goto("/learn/mutations")
+    await page.waitForLoadState("networkidle")
+
+    // Find the mutation example that has GraphiQL enabled
+    const editors = page.locator(".miniGraphiQL")
+    let mutationEditor: Locator | null = null
+
+    for (let i = 0; i < (await editors.count()); i++) {
+      const editor = editors.nth(i)
+      const content = await editor.textContent()
+      if (content && content.includes("CreateReviewForEpisode")) {
+        mutationEditor = editor
+        break
+      }
+    }
+
+    if (!mutationEditor) {
+      throw new Error("Could not find mutation GraphQL editor")
+    }
+
+    const variableEditor = mutationEditor.locator(".variable-editor").first()
+
+    if (await variableEditor.isVisible()) {
+      await variableEditor.click()
+
+      await page.getByText('"This is a great movie!"').first().click()
+      await page.keyboard.press("ControlOrMeta+ArrowRight")
+      for (let i = 0; i < 4; i++)
+        await page.keyboard.press("Alt+Shift+ArrowLeft")
+      await page.keyboard.type('almost as good as Andor"')
+
+      const resultViewer = mutationEditor.locator(".result-window")
+      await expect(resultViewer).toBeVisible()
+
+      await expect
+        .poll(async () => {
+          const resultContent = await resultViewer.textContent()
+          const jsonMatch = resultContent?.match(/\{[\s\S]*\}/)
+          if (jsonMatch) {
+            const responseJson = JSON.parse(jsonMatch[0])
+            return responseJson
+          }
+          return {}
+        })
+        .toStrictEqual({
+          data: {
+            createReview: {
+              stars: 5,
+              commentary: "This is almost as good as Andor",
+            },
+          },
+        })
+    }
+  })
+})
diff --git a/theme.config.tsx b/theme.config.tsx
index 54763f4984..3d832af82d 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -1,174 +1,20 @@
 import { DocsThemeConfig, ThemeSwitch, useConfig } from "nextra-theme-docs"
-import NextLink from "next/link"
-import {
-  GraphQLWordmarkLogo,
-  StackOverflowIcon,
-  GitHubIcon,
-  DiscordIcon,
-  TwitterIcon,
-} from "./src/icons"
+
+import { Navbar } from "@/components/navbar/navbar"
 import { useRouter } from "next/router"
-// import { createElement } from "react"
-// import NextImage from "next-image-export-optimizer"
+
+import { GraphQLWordmarkLogo } from "./src/icons"
+import { Footer } from "@/components/footer"
+import { mdxComponents } from "@/_design-system/mdx-components"
 
 const graphQLLogo = (
-  <GraphQLWordmarkLogo className="nextra-logo h-8" title="GraphQL" />
+  <GraphQLWordmarkLogo className="nextra-logo h-6" title="GraphQL" />
 )
 
-const classes = {
-  link: "hover:underline decoration-from-font [text-underline-position:from-font]",
-}
-
-function List({
-  title,
-  items,
-}: {
-  title: string
-  items: { title: string; url: string }[]
-}) {
-  return (
-    <ul className="flex flex-col gap-4 text-sm max-lg:w-[46%]">
-      <h3 className="text-lg font-bold">{title}</h3>
-      {items.map(item => (
-        <li key={item.title}>
-          <NextLink href={item.url} className={classes.link}>
-            {item.title}
-          </NextLink>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-function Footer() {
-  return (
-    <div className="w-full">
-      <div className="mb-24 flex flex-wrap items-start justify-between gap-10">
-        <NextLink href="/" className="max-lg:w-full">
-          {graphQLLogo}
-        </NextLink>
-        <List
-          title="Learn"
-          items={[
-            { title: "Introduction to GraphQL", url: "/learn" },
-            { title: "Best Practices", url: "/learn/best-practices" },
-            { title: "Frequently Asked Questions", url: "/faq" },
-            {
-              title: "Training Courses",
-              url: "/community/resources/training-courses",
-            },
-          ]}
-        />
-        <List
-          title="Code"
-          items={[
-            { title: "GitHub", url: "https://github.com/graphql" },
-            {
-              title: "GraphQL Specification",
-              url: "https://spec.graphql.org",
-            },
-            { title: "Libraries & Tools", url: "/code" },
-            { title: "Services & Vendors", url: "/code/?tags=services" },
-          ]}
-        />
-        <List
-          title="Community"
-          items={[
-            {
-              title: "Resources",
-              url: "/community/resources/official-channels",
-            },
-            { title: "Events & Meetups", url: "/community/events" },
-            {
-              title: "Contribute to GraphQL",
-              url: "/community/contribute/essential-links",
-            },
-            { title: "Landscape", url: "https://landscape.graphql.org" },
-            { title: "Shop", url: "https://store.graphql.org" },
-          ]}
-        />
-        <List
-          title="& More"
-          items={[
-            { title: "Blog", url: "/blog" },
-            { title: "GraphQL Foundation", url: "/foundation" },
-            {
-              title: "GraphQL Community Grant",
-              url: "/foundation/community-grant",
-            },
-            { title: "Logo and Brand Guidelines", url: "/brand" },
-            { title: "Code of Conduct", url: "/codeofconduct" },
-          ]}
-        />
-      </div>
-      <div className="flex flex-wrap justify-between gap-10">
-        <p className="text-sm">
-          Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
-          rights reserved.
-          <br />
-          For web site terms of use, trademark policy and general project
-          policies please see{" "}
-          <a
-            href="https://lfprojects.org"
-            target="_blank"
-            rel="noreferrer"
-            className={`text-primary ${classes.link}`}
-          >
-            https://lfprojects.org
-          </a>
-        </p>
-        <div className="flex flex-col gap-4 lg:items-end">
-          <ul className="flex gap-5">
-            {[
-              { url: "https://github.com/graphql", icon: GitHubIcon },
-              { url: "https://discord.graphql.org", icon: DiscordIcon },
-              { url: "https://twitter.com/graphql", icon: TwitterIcon },
-              {
-                url: "http://stackoverflow.com/questions/tagged/graphql",
-                icon: StackOverflowIcon,
-              },
-            ].map(({ url, icon: Icon }) => (
-              <li key={url}>
-                <a
-                  href={url}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="block transition-colors hover:text-primary"
-                >
-                  <Icon className="h-5 w-auto *:fill-current" />
-                </a>
-              </li>
-            ))}
-          </ul>
-          <a
-            href="https://nextra.site"
-            target="_blank"
-            rel="noreferrer"
-            className="flex items-center gap-2 text-xs transition-colors hover:text-primary"
-          >
-            Powered by{" "}
-            <svg
-              viewBox="0 0 361 70"
-              fill="currentColor"
-              className="h-3 shrink-0"
-            >
-              <path d="M114.913 33.2763v28.7642h-11.57V12.9496h11.059v8.3416h.575c1.129-2.7485 2.93-4.9325 5.401-6.5518 2.493-1.6193 5.572-2.429 9.237-2.429 3.388 0 6.339.7244 8.853 2.1733 2.535 1.4489 4.496 3.5476 5.88 6.2962 1.407 2.7486 2.099 6.0831 2.078 10.0035v31.2571h-11.57V32.5732c0-3.2813-.852-5.8487-2.557-7.7024-1.683-1.8537-4.016-2.7806-6.999-2.7806-2.024 0-3.824.4475-5.401 1.3424-1.556.8736-2.781 2.1413-3.676 3.8032-.873 1.662-1.31 3.6755-1.31 6.0405Zm61.407 29.723c-4.922 0-9.172-1.0227-12.752-3.0681-3.558-2.0668-6.296-4.9858-8.214-8.7572-1.917-3.7926-2.876-8.2563-2.876-13.3913 0-5.0497.959-9.4815 2.876-13.2954 1.939-3.8353 4.645-6.8182 8.118-8.9489 3.473-2.152 7.553-3.228 12.241-3.228 3.026 0 5.881.4901 8.565 1.4702 2.706.9588 5.093 2.4503 7.159 4.4744 2.088 2.0242 3.729 4.6023 4.922 7.7344 1.193 3.1108 1.79 6.8182 1.79 11.1221v3.5476h-40.238v-7.7983h29.148c-.021-2.2159-.501-4.1868-1.438-5.9126-.938-1.7472-2.248-3.1215-3.931-4.1229-1.662-1.0014-3.601-1.5021-5.817-1.5021-2.365 0-4.443.5753-6.232 1.7258-1.79 1.1293-3.186 2.6208-4.187 4.4745-.98 1.8324-1.481 3.8459-1.502 6.0405v6.8075c0 2.8551.522 5.3054 1.566 7.3508 1.044 2.0242 2.503 3.5796 4.378 4.6662 1.875 1.0654 4.07 1.598 6.584 1.598 1.683 0 3.207-.2343 4.57-.7031 1.364-.49 2.546-1.2038 3.548-2.1413 1.001-.9375 1.758-2.0987 2.269-3.4837l10.803 1.2145c-.682 2.8551-1.982 5.348-3.9 7.4787-1.896 2.1094-4.325 3.75-7.286 4.9219-2.962 1.1506-6.35 1.7258-10.164 1.7258Zm34.777-50.0497 9.908 18.1215 10.067-18.1215h12.241l-14.798 24.5455 15.054 24.5454h-12.177l-10.387-17.674-10.291 17.674h-12.273l14.957-24.5454-14.574-24.5455h12.273Zm63.878 0v8.9489h-28.221v-8.9489h28.221ZM253.722 1.18825h11.569V47.2749c0 1.5554.235 2.7486.704 3.5795.49.8097 1.129 1.3637 1.917 1.662s1.662.4474 2.621.4474c.724 0 1.385-.0532 1.981-.1598.618-.1065 1.087-.2024 1.407-.2876l1.949 9.0447c-.618.2131-1.502.4475-2.652.7031-1.13.2557-2.515.4049-4.155.4475-2.898.0852-5.508-.3516-7.831-1.3104-2.322-.9801-4.165-2.4929-5.529-4.5383-1.342-2.0455-2.003-4.6023-1.981-7.6705V1.18825Zm29.129 60.85225V12.9496h11.218v8.1818h.512c.895-2.8338 2.429-5.0177 4.602-6.5518 2.173-1.5554 4.677-2.3331 7.511-2.3331 1.321 0 2.535.1598 3.643.4794 1.108.3196 2.088.7564 2.94 1.3104l-3.579 9.588c-.618-.2983-1.3-.5433-2.046-.7351-.745-.1917-1.587-.2876-2.524-.2876-2.003 0-3.814.4474-5.434 1.3423-1.619.8949-2.908 2.1414-3.867 3.7394-.937 1.5767-1.406 3.4091-1.406 5.4971v28.8601h-11.57Zm51.222.863c-3.856 0-7.308-.9908-10.355-2.9723-3.047-1.9816-5.454-4.858-7.223-8.6293-1.768-3.7713-2.652-8.3523-2.652-13.7429 0-5.4546.894-10.0568 2.684-13.8068 1.811-3.7713 4.251-6.6158 7.319-8.5334 3.068-1.9389 6.488-2.9084 10.259-2.9084 2.877 0 5.242.4901 7.095 1.4702 1.854.9588 3.324 2.12 4.411 3.4836 1.087 1.3424 1.928 2.6101 2.525 3.8033h.479v-8.1179h11.602v49.0909h-11.378v-7.7343h-.703c-.597 1.1931-1.46 2.4609-2.589 3.8032-1.129 1.321-2.621 2.4503-4.474 3.3878-1.854.9375-4.187 1.4063-7 1.4063Zm3.228-9.4922c2.451 0 4.539-.6605 6.265-1.9816 1.725-1.3423 3.036-3.2066 3.931-5.593s1.342-5.1669 1.342-8.3416c0-3.1747-.447-5.934-1.342-8.2777-.874-2.3438-2.174-4.1655-3.9-5.4652-1.704-1.2997-3.803-1.9496-6.296-1.9496-2.578 0-4.73.6712-6.456 2.0135s-3.025 3.196-3.899 5.5611c-.873 2.365-1.31 5.071-1.31 8.1179 0 3.0682.437 5.8061 1.31 8.2138.895 2.3863 2.205 4.272 3.931 5.6569 1.747 1.3636 3.889 2.0455 6.424 2.0455Z" />
-              <path
-                d="m64.8833 1.81335-2.8464 2.84638C47.1274 19.5692 22.9543 19.5692 8.04485 4.65972L5.19848 1.81335c-.93479-.93478-2.45037-.93478-3.38515 0-.93479.93478-.93478 2.45037 0 3.38515L4.6597 8.04487c14.9095 14.90953 14.9095 39.08263 0 53.99213l-2.84637 2.8463c-.93479.9348-.93479 2.4504 0 3.3852.93478.9348 2.45037.9348 3.38515 0l2.84637-2.8464c14.90955-14.9095 39.08255-14.9095 53.99205 0l2.8464 2.8464c.9348.9348 2.4504.9348 3.3852 0 .9347-.9348.9347-2.4504 0-3.3852l-2.8464-2.8463c-14.9095-14.9095-14.9095-39.0826 0-53.99213l2.8464-2.84637c.9347-.93478.9347-2.45037 0-3.38515-.9348-.93478-2.4504-.93478-3.3852 0Z"
-                stroke="currentColor"
-                strokeWidth="2"
-              />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 export default {
   backgroundColor: {
-    dark: "27,27,27",
+    light: "251,251,249",
+    dark: "13.7,14.7,10.8",
   },
   head: function useHead() {
     const { frontMatter, title: pageTitle } = useConfig()
@@ -201,34 +47,43 @@ export default {
       </>
     )
   },
-  banner: {
-    content: (
-      <>
-        📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam •{" "}
-        <NextLink
-          href="/conf/2025"
-          className="underline after:font-sans after:content-['_→']"
-        >
-          Register Today!
-        </NextLink>
-      </>
-    ),
-    key: "graphqlconf-2024",
-  },
+  // Hidden for now, new design is done, but not implemented yet.
+  // banner: {
+  //   content: (
+  //     <>
+  //     📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam •{" "}
+  //     <NextLink
+  //       href="/conf/2025"
+  //       className="underline after:font-sans after:content-['_→']"
+  //     >
+  //       Register Today!
+  //     </NextLink>
+  //   </>
+  // )
+  //   key: "graphqlconf-2024",
+  // },
   logo: graphQLLogo,
   docsRepositoryBase:
     "https://github.com/graphql/graphql.github.io/tree/source",
   color: {
     hue: 319,
+    lightness: {
+      light: 44.1,
+      dark: 90,
+    },
   },
   sidebar: {
     defaultMenuCollapseLevel: 1,
   },
   footer: {
-    content: Footer,
+    component: () => <Footer />,
+    content: "Copyright © 2025 The GraphQL Foundation. All rights reserved.",
   },
   navbar: {
-    extraContent: <ThemeSwitch lite className="[&_span]:hidden" />,
+    component: Navbar,
+    extraContent: (
+      <ThemeSwitch lite className="max-lg:hidden [&_span]:hidden" />
+    ),
   },
   toc: {
     backToTop: true,
@@ -236,10 +91,5 @@ export default {
   search: {
     placeholder: "Search…",
   },
-  // TODO: @dimaMachina try to remove pnpm patch for `nextra` package later
-  // components: {
-  //   // Override `next/image` imports from `nextra-theme-docs`
-  //   img: (props: any) =>
-  //     createElement(typeof props.src === "object" ? NextImage : "img", props),
-  // },
+  components: mdxComponents,
 } satisfies DocsThemeConfig
diff --git a/vercel.json b/vercel.json
index 7b49cfd44c..79f2e7a835 100644
--- a/vercel.json
+++ b/vercel.json
@@ -577,9 +577,19 @@
     },
     {
       "source": "/schedule/",
-      "destination": "/conf/2024/schedule/",
+      "destination": "/conf/2025/schedule/",
       "permanent": false
     },
+    {
+      "source": "/spec",
+      "destination": "https://spec.graphql.org",
+      "permanent": true
+    },
+    {
+      "source": "/landscape",
+      "destination": "https://landscape.graphql.org",
+      "permanent": true
+    },
     {
       "source": "/conf/2025/event-resources",
       "destination": "https://sites.google.com/linuxfoundation.org/graphqlconf2025event-resources/event-resources",