docs: landing page (#611)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>
2026-01-14 12:14:41 +01:00 · 2023-09-07 12:34:55 +02:00
parent 190378aaa9
commit 9f9d8f5cec
58 changed files with 3366 additions and 209 deletions
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -1 +1,4 @@
+# To use Nuxt Elements in production
 NUXT_ELEMENTS_TOKEN=
+# Used when pre-rendering the docs for dynamic OG images
+NUXT_PUBLIC_SITE_URL=
--- a/docs/app.config.ts
+++ b/docs/app.config.ts
@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'slate'
+  }
+})
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -3,20 +3,11 @@
  <div>
    <Header />

-    <UMain>
-      <UContainer>
-        <UPage>
-          <template #left>
-            <UAside :links="anchors">
-              <BranchSelect />
-              <UNavigationTree :links="mapContentNavigation(navigation)" />
-            </UAside>
-          </template>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>

-          <NuxtPage />
-        </UPage>
-      </UContainer>
-    </UMain>
+    <Footer />

    <ClientOnly>
      <LazyUDocsSearch :files="files" :navigation="navigation" />
@@ -35,9 +26,10 @@
 </template>

 <script setup lang="ts">
+import { withoutTrailingSlash } from 'ufo'
+const route = useRoute()
 const colorMode = useColorMode()
 const { prefix, removePrefixFromNavigation, removePrefixFromFiles } = useContentSource()
-const { mapContentNavigation } = useElementsHelpers()

 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())

@@ -46,24 +38,7 @@ const { data: search } = useLazyFetch('/api/search.json', {
  server: false
 })

-const anchors = [{
-  label: 'Documentation',
-  icon: 'i-heroicons-book-open-solid',
-  to: '/getting-started'
-}, {
-  label: 'Playground',
-  icon: 'i-simple-icons-stackblitz',
-  to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
-  target: '_blank'
-}, {
-  label: 'Releases',
-  icon: 'i-heroicons-rocket-launch-solid',
-  to: 'https://github.com/nuxtlabs/ui/releases',
-  target: '_blank'
-}]
-
 // Computed
-
 const navigation = computed(() => {
  const navigation = nav.value.find(link => link._path === prefix.value)?.children || []

@@ -79,29 +54,26 @@ const files = computed(() => {
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')

 // Head
-
 useHead({
-  titleTemplate: title => title && title.includes('Nuxt UI') ? title : `${title} - Nuxt UI`,
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
    { key: 'theme-color', name: 'theme-color', content: color }
  ],
  link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'canonical', href: `https://ui.nuxtlabs.com${withoutTrailingSlash(route.path)}` }
  ],
  htmlAttrs: {
    lang: 'en'
  }
 })

-useSeoMeta({
-  ogImage: '/social-preview.jpg',
-  twitterImage: '/social-preview.jpg',
+useServerSeoMeta({
+  ogSiteName: 'Nuxt UI',
  twitterCard: 'summary_large_image'
 })

 // Provide
-
 provide('navigation', navigation)
 provide('files', files)
 </script>
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -1,23 +1,32 @@
 <template>
-  <footer class="flex items-center gap-1.5 mt-12">
-    <div class="flex-1 flex items-baseline gap-1.5 text-sm text-gray-600 dark:text-gray-300 leading-6">
-      Made by
-      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
-        <LogoLabs class="text-gray-900 dark:text-white w-14 h-auto" />
-      </NuxtLink>
+  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+    <div class="bg-white dark:bg-gray-900 px-4">
+      <LogoOnly class="w-5 h-5" />
    </div>
+  </div>

-    <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank" class="inline-flex">
-      <UBadge :label="`v${config.version}`" variant="subtle" />
-    </NuxtLink>
+  <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
+    <template #left>
+      <div class="text-sm text-gray-600 dark:text-gray-300">
+        Made by
+        <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
+          <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
+        </NuxtLink>
+      </div>
+    </template>

-    <div class="flex-1 flex items-center justify-end gap-1.5 -my-1 lg:hidden">
-      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" />
-      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" />
-    </div>
-  </footer>
+    <template #center>
+      <span class="text-sm text-gray-600 dark:text-gray-300">
+        Published under <NuxtLink to="https://github.com/nuxtlabs/ui" target="_blank" class="text-gray-900 dark:text-white">
+          MIT License
+        </NuxtLink>
+      </span>
+    </template>
+
+    <template #right>
+      <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
+      <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
+      <USocialButton aria-label="Nuxt Image on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui" />
+    </template>
+  </UFooter>
 </template>
-
-<script setup lang="ts">
-const config = useRuntimeConfig().public
-</script>
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -1,26 +1,34 @@
 <template>
-  <UHeader>
+  <UHeader
+    :links="links"
+    :class="{
+      'border-primary-200/75 dark:border-primary-900/50': $route.path === '/',
+      'border-gray-200 dark:border-gray-800': $route.path !== '/'
+    }"
+  >
    <template #left>
-      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
        <Logo class="w-auto h-6" />
      </NuxtLink>
    </template>

-    <template #center>
+    <template v-if="$route.path !== '/'" #center>
      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
    </template>

    <template #right>
      <ColorPicker />

-      <UColorModeButton />
+      <UDocsSearchButton v-if="$route.path === '/'" icon-only />
+
+      <UColorModeButton v-if="!$colorMode.forced" />

-      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
    </template>

    <template #panel>
      <BranchSelect />
+
      <UNavigationTree :links="mapContentNavigation(navigation)" />
    </template>
  </UHeader>
@@ -29,7 +37,30 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'

+const route = useRoute()
 const { mapContentNavigation } = useElementsHelpers()

 const navigation = inject<Ref<NavItem[]>>('navigation')
+
+const links = computed(() => {
+  if (route.path !== '/') {
+    return []
+  }
+
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open-solid',
+    to: '/getting-started'
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
+    target: '_blank'
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch-solid',
+    to: 'https://github.com/nuxtlabs/ui/releases',
+    target: '_blank'
+  }]
+})
 </script>
--- a/docs/components/LogoGreen.vue
+++ b/docs/components/LogoGreen.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg width="1020" height="200" viewBox="0 0 1020 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z" fill="currentColor" />
+    <path d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z" fill="currentColor" />
+    <path d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z" fill="currentColor" />
+    <path d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z" fill="currentColor" />
+    <path d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z" fill="#00DC82" />
+    <path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="#00DC82" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="#00DC82" />
+  </svg>
+</template>
--- a/docs/components/LogoLabs.vue
+++ b/docs/components/LogoLabs.vue
@@ -1,9 +1,13 @@
 <template>
-  <svg width="312" height="78" viewBox="0 0 312 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M65.6381 78H109.132C110.513 78.0002 111.87 77.6398 113.067 76.9552C114.263 76.2705 115.257 75.2857 115.947 74.0998C116.637 72.9139 117.001 71.5688 117 70.1996C116.999 68.8305 116.635 67.4856 115.944 66.3003L86.7343 16.1575C86.0439 14.9719 85.0508 13.9873 83.8547 13.3028C82.6586 12.6183 81.3017 12.2579 79.9205 12.2579C78.5393 12.2579 77.1825 12.6183 75.9864 13.3028C74.7903 13.9873 73.7971 14.9719 73.1067 16.1575L65.6381 28.9873L51.0356 3.89908C50.3446 2.71356 49.351 1.72914 48.1546 1.04472C46.9581 0.360308 45.6011 0 44.2196 0C42.8382 0 41.4811 0.360308 40.2847 1.04472C39.0883 1.72914 38.0947 2.71356 37.4037 3.89908L1.05644 66.3003C0.364965 67.4856 0.000601816 68.8305 7.44871e-07 70.1996C-0.000600326 71.5688 0.362582 72.9139 1.05302 74.0998C1.74346 75.2857 2.7368 76.2705 3.93315 76.9552C5.12949 77.6398 6.48665 78.0002 7.86812 78H35.1699C45.9872 78 53.9645 73.2907 59.4537 64.1032L72.7803 41.2289L79.9184 28.9873L101.341 65.7584H72.7803L65.6381 78ZM34.7248 65.7458L15.6717 65.7416L44.2324 16.7162L58.483 41.2289L48.9416 57.6127C45.2963 63.5739 41.155 65.7458 34.7248 65.7458Z" fill="currentColor" />
-    <path d="M175.417 77.3598V66.9562H149.03V21.3406H136.5V77.3598H175.417Z" fill="currentColor" />
-    <path d="M198.81 78C203.706 78 208.103 76.0793 210.178 73.1183V77.3598H221.795V37.026H210.178V41.0274C207.854 38.2264 203.706 36.3858 198.644 36.3858C186.446 36.3858 179.061 44.6286 179.061 57.1929C179.061 69.7572 186.446 78 198.81 78ZM200.635 68.3967C194.495 68.3967 190.429 63.9152 190.429 57.1929C190.429 50.3906 194.495 45.909 200.635 45.909C206.859 45.909 210.925 50.3906 210.925 57.1929C210.925 63.9152 206.859 68.3967 200.635 68.3967Z" fill="currentColor" />
-    <path d="M254.606 78C266.97 78 274.604 69.7572 274.604 57.1929C274.604 44.6286 266.97 36.3858 254.772 36.3858C249.544 36.3858 245.478 38.3064 243.155 41.2674V19.5H231.621V77.3598H243.155V72.9583C245.478 76.0793 249.793 78 254.606 78ZM252.78 68.3967C246.557 68.3967 242.491 63.9152 242.491 57.1929C242.491 50.3906 246.557 45.909 252.78 45.909C258.838 45.909 262.987 50.3906 262.987 57.1929C262.987 63.9152 258.838 68.3967 252.78 68.3967Z" fill="currentColor" />
-    <path d="M295.736 78C305.528 78 312 72.9583 312 65.2757C312 47.0294 289.098 56.3926 289.098 48.1498C289.098 45.5889 291.339 44.2285 294.575 44.2285C297.728 44.2285 300.964 46.0691 301.462 49.5103H311.502C311.087 41.5876 304.283 36.3858 294.243 36.3858C285.696 36.3858 279.307 41.4275 279.307 48.5499C279.307 65.5157 301.794 57.433 301.794 65.6758C301.794 67.9166 299.304 69.5971 295.736 69.5971C291.422 69.5971 288.517 67.3564 288.102 63.7551H278.145C278.56 72.4781 285.53 78 295.736 78Z" fill="currentColor" />
+  <svg width="1240" height="200" viewBox="0 0 1240 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z" fill="currentColor" />
+    <path d="M375 200C377.16 200 379 198.209 379 196V103C379 103 384 112 393 127L432 194C433.785 197.74 437.744 200 441 200H468V50H441C439.202 50 437 51.4941 437 54V148L419 116L383 55C381.248 51.8912 377.479 50 374 50H348V200H375Z" fill="currentColor" />
+    <path d="M724 92H737C740.314 92 743 89.3137 743 86V60H771V92H798V116H771V159C771 169.5 776.057 174 785 174H798V200H781C757.948 200 743 185.071 743 160V116H724V92Z" fill="currentColor" />
+    <path d="M589 154V92H573L572.832 92.0002L572.498 92.001H572.497C571.979 92.0023 571.294 92.004 571 92L570.912 91.9988C567.987 91.9592 565.941 91.9315 564 94C561.769 96.378 561 98.5652 561 102V154C561 162.059 560.543 167.037 557 171C553.457 174.831 550.217 176 543 176C535.914 176 531.543 174.831 528 171C524.457 167.037 524 162.059 524 154V102C524 98.5652 523.231 97.2459 521 95C518.769 92.622 515.412 92 512 92H496V154C496 168.004 501.389 179.809 509 188C516.742 196.191 528.434 200 543 200C557.566 200 568.258 196.191 576 188C583.742 179.809 589 168.004 589 154Z" fill="currentColor" />
+    <path d="M674 144L708 92H682C678.723 92 675.812 93.1758 674 96L658 120L643 97C641.188 94.1758 637.277 92 634 92H609L643 143L606 200H632C635.25 200 638.182 196.787 640 194L658 167L677 195C678.818 197.787 681.75 200 685 200H711L674 144Z" fill="currentColor" />
+    <path d="M931 200V175H868V66C868 62.6863 865.314 60 862 60H838V194C838 197.314 840.686 200 844 200H931Z" fill="currentColor" />
+    <path d="M1202 200C1225.14 200 1240 187.277 1240 169C1240 143.04 1220.69 140.838 1205.16 139.067C1194.72 137.877 1186 136.882 1186 129C1186 122.908 1190.35 120 1198 120C1205.45 120 1213.82 123.813 1215 132H1232.68C1236.12 132 1238.91 129.086 1238.06 125.757C1234.16 110.512 1218.99 101 1198 101C1177.8 101 1163 113.056 1163 130C1163 153.784 1181.4 156.618 1196.52 158.946C1207.06 160.569 1216 161.946 1216 170C1216 175.331 1209.43 179 1201 179C1190.8 179 1183.98 174.567 1183 166H1166.29C1162.87 166 1160.08 168.888 1160.81 172.233C1164.58 189.368 1180.39 200 1202 200Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1151 149C1151 179.068 1133.34 200 1104 200C1092.58 200 1081.51 195.469 1076 188V200H1049V60H1076V111C1081.51 103.914 1091.59 100 1104 100C1132.95 100 1151 118.932 1151 149ZM1075 150C1075 166.088 1084.23 177 1099 177C1113.37 177 1123 166.088 1123 150C1123 133.721 1113.37 122 1099 122C1084.23 122 1075 133.721 1075 150Z" fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1005 105C998.647 101.954 991.004 101 983 101C974.487 101 967.353 101.954 961 105C954.647 108.046 949.558 112.669 946 118C943.659 121.424 941.966 124.9 940.973 128.721C940.105 132.063 942.911 135 946.364 135H963C963.254 130.685 964.951 127.919 968 125C971.176 122.081 975.537 120 981 120C986.336 120 990.951 121.462 994 124C997.049 126.412 999 129.938 999 134C999 136.031 998.271 137.604 997 139C995.729 140.269 993.287 141 991 141H975C964.454 141 956.48 143.542 950 149C943.647 154.331 940 161.608 940 171C940 176.458 941.332 181.558 944 186C946.668 190.315 950.299 193.462 955 196C959.828 198.412 965.901 200 972 200C978.607 200 984.172 198.667 989 196.002C993.955 193.21 997.348 189.442 999 185V200H1025V137C1025 129.892 1022.68 123.331 1019 118C1015.44 112.542 1011.35 107.919 1005 105ZM993.173 174.679C989.615 178.74 984.66 180.771 978.307 180.771C974.623 180.771 971.573 179.819 969.159 177.915C966.745 175.885 965.538 173.283 965.538 170.11C965.538 166.429 966.809 163.446 969.35 161.162C971.891 158.877 975.194 157.735 979.26 157.735H998.7V159.067C998.7 165.413 996.857 170.617 993.173 174.679Z" fill="currentColor" />
  </svg>
 </template>
--- a/docs/components/LogoOnly.vue
+++ b/docs/components/LogoOnly.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg width="264" height="264" viewBox="0 0 264 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M146.496 211.2H234.822C237.627 211.2 240.383 210.468 242.813 209.078C245.242 207.688 247.259 205.688 248.662 203.279C250.064 200.871 250.801 198.139 250.8 195.359C250.799 192.579 250.059 189.847 248.655 187.44L189.337 85.612C187.935 83.2043 185.918 81.2049 183.489 79.8147C181.06 78.4246 178.305 77.6927 175.5 77.6927C172.695 77.6927 169.94 78.4246 167.511 79.8147C165.082 81.2049 163.065 83.2043 161.663 85.612L146.496 111.666L116.841 60.7179C115.438 58.3104 113.42 56.3113 110.991 54.9214C108.561 53.5315 105.805 52.7998 103 52.7998C100.195 52.7998 97.4386 53.5315 95.0089 54.9214C92.5793 56.3113 90.5615 58.3104 89.1583 60.7179L15.3453 187.44C13.9411 189.847 13.2012 192.579 13.2 195.359C13.1987 198.139 13.9363 200.871 15.3384 203.279C16.7405 205.688 18.7578 207.688 21.1873 209.078C23.6168 210.468 26.3728 211.2 29.1783 211.2H84.6219C106.589 211.2 122.789 201.636 133.937 182.979L161 136.526L175.496 111.666L219 186.34H161L146.496 211.2ZM83.7181 186.314L45.0255 186.306L103.026 86.7466L131.966 136.526L112.589 169.798C105.186 181.904 96.7763 186.314 83.7181 186.314Z" fill="currentColor" />
+  </svg>
+</template>
--- a/docs/components/OgImage/OgImageDocs.vue
+++ b/docs/components/OgImage/OgImageDocs.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-between items-start bg-[#020420] p-20 pt-32 pb-16">
+    <div
+      style="position: absolute;width: 1156px;height: 1000px;left: -215px;top: -337px;background: radial-gradient(50% 50% at 50% 50%, #00DC82 0%, rgba(0, 220, 130, 0) 100%);filter: blur(180.5px);opacity: 0.5;"
+    />
+    <div>
+      <h1 class="text-8xl mb-4 text-white">
+        {{ title }}
+      </h1>
+      <p class="text-5xl text-gray-200 leading-tight pr-10">
+        {{ description }}
+      </p>
+    </div>
+    <LogoGreen class="w-[306px] h-[60px] text-white" />
+  </div>
+</template>
--- a/docs/components/color-picker/ColorPicker.vue
+++ b/docs/components/color-picker/ColorPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <UPopover>
+  <UPopover mode="hover">
    <template #default="{ open }">
      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']">
        <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -41,9 +41,7 @@
        <ContentSlot v-if="$slots.default" :use="$slots.default" />

        <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-          <ClientOnly>
-            <ContentSlot v-if="$slots[slot]" :use="$slots[slot]" />
-          </ClientOnly>
+          <ContentSlot :name="slot" />
        </template>
      </component>
    </div>
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue
@@ -1,34 +1,34 @@
 <script setup>
 const router = useRouter()
+const toast = useToast()

 const commandPaletteRef = ref()

 const users = [
-  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
-  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
-  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x' } }
 ]

 const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
 ]

-const groups = computed(() => commandPaletteRef.value?.query
-  ? [{
+const groups = computed(() =>
+  [commandPaletteRef.value?.query ? {
    key: 'users',
    commands: users
-  }]
-  : [{
+  } : {
    key: 'recent',
    label: 'Recent searches',
    commands: users.slice(0, 1)
  }, {
    key: 'actions',
    commands: actions
-  }])
+  }].filter(Boolean))

 function onSelect (option) {
  if (option.click) {
--- a/docs/components/content/examples/InputExampleClearable.vue
+++ b/docs/components/content/examples/InputExampleClearable.vue
@@ -1,5 +1,12 @@
 <template>
-  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
+  <UInput
+    v-model="q"
+    name="q"
+    placeholder="Search..."
+    icon="i-heroicons-magnifying-glass-20-solid"
+    autocomplete="off"
+    :ui="{ icon: { trailing: { pointer: '' } } }"
+  >
    <template #trailing>
      <UButton
        v-show="q !== ''"
--- a/docs/components/content/examples/TableExampleClickable.vue
+++ b/docs/components/content/examples/TableExampleClickable.vue
@@ -29,12 +29,6 @@ const people = [{
  title: 'Senior Designer',
  email: 'leonard.krasner@example.com',
  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
 }]

 function select (row) {
--- a/docs/components/content/examples/TabsExampleCard.vue
+++ b/docs/components/content/examples/TabsExampleCard.vue
@@ -1,17 +0,0 @@
-<script setup>
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  disabled: true,
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" />
-</template>
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
@@ -1,11 +1,28 @@
 <script setup>
 const links = [{
  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
  },
-  label: 'Benjamin Canac'
+  label: 'benjamincanac',
+  to: 'https://github.com/benjamincanac',
+  target: '_blank'
 }, {
-  label: 'KeJun'
+  avatar: {
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
+  },
+  label: 'Atinux',
+  to: 'https://github.com/Atinux',
+  target: '_blank'
+}, {
+  avatar: {
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
+  },
+  label: 'smarroufin',
+  to: 'https://github.com/smarroufin',
+  target: '_blank'
 }]

 const { ui } = useAppConfig()
--- a/docs/components/home/HomeDemo.vue
+++ b/docs/components/home/HomeDemo.vue
@@ -0,0 +1,99 @@
+<template>
+  <Transition appear name="fade">
+    <ULandingGrid class="lg:grid-cols-10 lg:gap-8">
+      <div class="col-span-8 flex items-center">
+        <RangeExample />
+      </div>
+
+      <div class="col-span-2 row-span-2 flex items-center">
+        <RadioExample />
+      </div>
+
+      <div class="col-span-2">
+        <DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
+      </div>
+
+      <div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
+        <UAvatarGroup :max="2">
+          <UAvatar
+            src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
+            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
+            alt="benjamincanac"
+          />
+          <UAvatar
+            src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
+            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
+            alt="Atinux"
+          />
+          <UAvatar
+            src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
+            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
+            alt="smarroufin"
+          />
+        </UAvatarGroup>
+
+        <UButton label="Button" icon="i-heroicons-pencil-square" />
+
+        <UBadge label="Badge" />
+
+        <UColorModeToggle />
+
+        <PaginationExampleBasic />
+      </div>
+
+      <div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
+        <UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />
+
+        <TabsExampleItemCustomSlot />
+
+        <UCard class="flex-shrink-0">
+          <div class="flex items-center gap-4 justify-center">
+            <USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
+            <div class="space-y-3 flex-1">
+              <USkeleton class="h-4 w-full" />
+              <USkeleton class="h-4 w-2/3" />
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <div class="col-span-5 row-span-2 flex flex-col">
+        <UCard :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }" class="col-span-4 row-span-6 flex-1 flex flex-col">
+          <CommandPaletteExampleGroups />
+        </UCard>
+      </div>
+
+      <div class="col-span-2 row-span-2 gap-6 flex flex-col">
+        <CheckboxExample />
+
+        <InputExampleClearable />
+
+        <UFormGroup label="Labels">
+          <SelectMenuExampleCreatable />
+        </UFormGroup>
+
+        <UCard :ui="{ body: { padding: '!p-1' } }">
+          <VerticalNavigationExampleAvatarSlot />
+        </UCard>
+      </div>
+
+      <div class="col-span-7 row-span-6">
+        <UCard :ui="{ body: { padding: '' } }">
+          <TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
+        </UCard>
+      </div>
+    </ULandingGrid>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/docs/components/home/HomeTetris.vue
+++ b/docs/components/home/HomeTetris.vue
@@ -0,0 +1,108 @@
+<template>
+  <Transition appear name="fade">
+    <div
+      :style="{
+        '--cell': `${width / cols}px`,
+        '--rows': rows - 1
+      }"
+    >
+      <div
+        ref="el"
+        class="absolute inset-0 grid justify-center auto-rows-[var(--cell)] -space-y-px"
+      >
+        <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
+          <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="transition-[background] duration-1000 border border-primary-200/50 dark:border-primary-900/25 bg-opacity-10 hover:bg-opacity-20 dark:bg-opacity-5 dark:hover:bg-opacity-10" :class="[cell && `bg-primary-500 dark:bg-primary-400 cursor-pointer`]" @click="removeCell(rowIndex, cellIndex)" />
+        </div>
+
+        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { useElementSize } from '@vueuse/core'
+
+const el = ref(null)
+const grid = ref([])
+const rows = ref(0)
+const cols = ref(0)
+
+const colors = useAppConfig()?.ui.colors
+const { width, height } = useElementSize(el)
+
+function getRandomColor () {
+  return colors[Math.floor(Math.random() * (colors.length - 1))]
+}
+
+function createGrid () {
+  grid.value = []
+
+  for (let i = 0; i <= rows.value; i++) {
+    grid.value.push(new Array(cols.value).fill(null))
+  }
+}
+
+function createNewCell () {
+  const color = getRandomColor()
+  const x = Math.floor(Math.random() * cols.value)
+
+  grid.value[0][x] = color
+}
+
+function moveCellsDown () {
+  for (let row = rows.value - 1; row >= 0; row--) {
+    for (let col = 0; col < cols.value; col++) {
+      if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
+        grid.value[row + 1][col] = grid.value[row][col]
+        grid.value[row][col] = null
+      }
+    }
+  }
+
+  setTimeout(() => {
+    if (grid.value[rows.value].every(cell => cell !== null)) {
+      for (let col = 0; col < cols.value; col++) {
+        grid.value[rows.value][col] = null
+      }
+    }
+  }, 500)
+}
+
+function removeCell (row, col) {
+  grid.value[row][col] = null
+}
+
+function calcGrid () {
+  const base = Math.ceil(width.value / 60)
+  const cell = width.value / base
+
+  rows.value = Math.ceil(height.value / cell)
+  cols.value = width.value / cell
+
+  createGrid()
+}
+
+watch(width, calcGrid)
+
+onMounted(() => {
+  setTimeout(calcGrid, 50)
+
+  setInterval(() => {
+    moveCellsDown()
+    createNewCell()
+  }, 1000)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -1,9 +1,6 @@
 ---
 title: Introduction
 description: 'Fully styled and customizable components for Nuxt.'
-head:
-  title: 'Nuxt UI: Fully styled and customizable components for Nuxt'
-  description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
 ---

 This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio.md
@@ -103,6 +103,7 @@ Use the `disabled` prop to disable the Radio.
 ---
 baseProps:
  name: 'radio5'
+  label: 'Label'
  value: true
 props:
  disabled: true
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/5.navigation/1.vertical-navigation.md
@@ -121,10 +121,10 @@ const links = [{
  avatar: {
    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  },
-  label: 'Benjamin Canac'
-}, {
-  label: 'KeJun'
-}]
+  label: 'Benjamin Canac',
+  to: 'https://github.com/benjamincanac',
+  target: '_blank'
+}, ...]

 const { ui } = useAppConfig()
 </script>
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/5.navigation/2.command-palette.md
@@ -113,6 +113,7 @@ padding: false
 ```vue
 <script setup>
 const router = useRouter()
+const toast = useToast()

 const commandPaletteRef = ref()

@@ -123,25 +124,24 @@ const users = [
 ]

 const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
 ]

-const groups = computed(() => commandPaletteRef.value?.query
-  ? [{
-      key: 'users',
-      commands: users
-    }]
-  : [{
-      key: 'recent',
-      label: 'Recent searches',
-      commands: users.slice(0, 1)
-    }, {
-      key: 'actions',
-      commands: actions
-    }])
+const groups = computed(() =>
+  [commandPaletteRef.value?.query ? {
+    key: 'users',
+    commands: users
+  } : {
+    key: 'recent',
+    label: 'Recent searches',
+    commands: users.slice(0, 1)
+  }, {
+    key: 'actions',
+    commands: actions
+  }].filter(Boolean))

 function onSelect (option) {
  if (option.click) {
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -0,0 +1,91 @@
+navigation: false
+title: 'Nuxt UI: Fully styled and customizable components for Nuxt'
+description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
+hero:
+  title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
+  description: 'Nuxt UI simplifies the creation of stunning and responsive web applications with its<br class="hidden lg:block"> comprehensive collection of fully styled and customizable UI components designed for Nuxt.'
+sections:
+  - slot: demo
+    class: 'hidden lg:block dark:bg-gradient-to-b from-gray-900 to-gray-950/50 !pt-0'
+  - title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
+    slot: features
+    class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950/50 dark:lg:bg-none dark:lg:bg-gray-950/50'
+    features:
+      - title: Color Palette
+        description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
+        icon: i-heroicons-swatch
+        to: /getting-started/theming#colors
+        class: 'col-span-7 row-span-3'
+        image: /illustrations/color-palette
+        orientation: 'horizontal'
+      - title: Fully Customizable
+        description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
+        icon: i-heroicons-wrench-screwdriver
+        to: /getting-started/theming#components
+        image: /illustrations/fully-customizable
+        class: 'col-span-5 row-span-5 lg:mb-10'
+        orientation: 'vertical'
+      - title: Icons
+        description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
+        icon: i-heroicons-face-smile
+        to: /getting-started/theming#icons
+        image: /illustrations/icon-library
+        class: 'col-span-7 row-span-3'
+        orientation: 'horizontal'
+      - title: Light & Dark
+        description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
+        to: /getting-started/theming#dark-mode
+        icon: i-heroicons-moon
+        image: /illustrations/dark-mode
+        class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
+        orientation: 'vertical'
+      - title: Keyboard Shortcuts
+        description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
+        icon: i-heroicons-computer-desktop
+        to: /getting-started/shortcuts
+        class: 'col-span-7 row-span-3'
+        image: /illustrations/keyboard-shortcuts
+        orientation: 'horizontal'
+    links:
+      - label: Learn more
+        to: /getting-started/theming
+        color: white
+        size: lg
+        trailingIcon: i-heroicons-arrow-right-20-solid
+  - title: 'A collection of <span class="text-primary">30+</span> components'
+    description: 'Get access to 30+ beautifully designed and fully customizable components built for Nuxt. These components<br class="hidden lg:block"> are updated regularly to ensure that you always have the latest features and functionalities.'
+    class: 'dark:bg-gradient-to-b from-gray-950/50 to-gray-900'
+    slot: categories
+    links:
+      - label: View all components
+        to: /elements/accordion
+        color: white
+        size: lg
+        trailingIcon: i-heroicons-arrow-right-20-solid
+    categories:
+      - label: Elements
+        to: /elements/dropdown
+        image: /illustrations/elements
+        badge: 9
+      - label: Forms
+        to: /forms/form
+        image: /illustrations/forms
+        badge: 10
+      - label: Data
+        to: /data/table
+        image: /illustrations/data
+        badge: 1
+      - label: Navigation
+        to: /navigation/command-palette
+        image: /illustrations/navigation
+        badge: 4
+      - label: Overlays
+        to: /overlays/modal
+        image: /illustrations/overlays
+        badge: 6
+      - label: Layout
+        to: /layout/card
+        image: /illustrations/layout
+        badge: 3
+cta:
+  title: Trusted and supported by our<br class="hidden lg:block"> amazing community
--- a/docs/layouts/default.vue
+++ b/docs/layouts/default.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
--- a/docs/layouts/docs.vue
+++ b/docs/layouts/docs.vue
@@ -0,0 +1,41 @@
+<template>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UAside :links="anchors">
+            <BranchSelect />
+
+            <UNavigationTree :links="mapContentNavigation(navigation)" />
+          </UAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const { mapContentNavigation } = useElementsHelpers()
+
+const navigation = inject<NavItem[]>('navigation')
+
+const anchors = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open-solid',
+  to: '/getting-started'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
+  target: '_blank'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxtlabs/ui/releases',
+  target: '_blank'
+}]
+</script>
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
  extends: process.env.NUXT_ELEMENTS_PATH || '@nuxthq/elements',
  modules: [
    '@nuxt/content',
+    'nuxt-og-image',
    // '@nuxt/devtools',
    // '@nuxthq/studio',
    module,
@@ -47,17 +48,20 @@ export default defineNuxtConfig({
      }
    }
  },
-  googleFonts: {
-    families: {
-      Inter: [400, 500, 600, 700]
-    }
+  fontMetrics: {
+    fonts: ['DM Sans']
  },
-  routeRules: {
-    '/': { redirect: '/getting-started', prerender: false }
+  googleFonts: {
+    display: 'swap',
+    download: true,
+    families: {
+      'DM+Sans': [400, 500, 600, 700]
+    }
  },
  nitro: {
    prerender: {
      routes: [
+        '/',
        '/getting-started',
        '/dev/getting-started',
        '/api/search.json'
@@ -66,7 +70,7 @@ export default defineNuxtConfig({
  },
  componentMeta: {
    globalsOnly: true,
-    exclude: [resolve('./components'), resolve('@nuxthq/elements/components')],
+    exclude: ['@nuxtjs/mdc', resolve('./components'), resolve('@nuxthq/elements/components')],
    metaFields: {
      props: true,
      slots: false,
@@ -79,14 +83,13 @@ export default defineNuxtConfig({
    includeWorkspace: true
  },
  hooks: {
-    // TODO: Uncomment after Nuxt v3.7 upgrade
    // Related to https://github.com/nuxt/nuxt/pull/22558
-    // 'components:extend': (components) => {
-    //   components.forEach((component) => {
-    //     if (component.global) {
-    //       component.global = 'sync'
-    //     }
-    //   })
-    // }
+    'components:extend': (components) => {
+      components.forEach((component) => {
+        if (component.global) {
+          component.global = 'sync'
+        }
+      })
+    }
  }
 })
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
    "@nuxt/content": "^2.8.2",
    "@nuxt/devtools": "^0.8.2",
    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28233316.1bf97d4",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28233683.5219c54",
    "@nuxthq/studio": "^0.13.4",
    "@nuxtjs/fontaine": "^0.4.1",
    "@nuxtjs/google-fonts": "^3.0.2",
@@ -21,7 +21,9 @@
    "nuxt": "^3.7.1",
    "nuxt-component-meta": "^0.5.3",
    "nuxt-lodash": "^2.5.0",
+    "nuxt-og-image": "^2.0.25",
    "typescript": "^5.2.2",
+    "ufo": "^1.3.0",
    "v-calendar": "^3.0.3",
    "yup": "^1.2.0",
    "zod": "^3.22.2"
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -5,19 +5,21 @@
    <UPageBody prose>
      <ContentRenderer v-if="page.body" :value="page" />

-      <div class="mt-12 not-prose">
-        <UButton :to="githubLink" variant="link" icon="i-heroicons-pencil-square" label="Edit this page on GitHub" :padded="false" />
-      </div>
-
-      <hr v-if="surround?.length" class="my-8">
+      <UDivider v-if="surround?.length" />

      <UDocsSurround :surround="removePrefixFromFiles(surround)" />
-
-      <Footer class="not-prose" />
    </UPageBody>

    <template v-if="page.body?.toc?.links?.length" #right>
-      <UDocsToc :links="page.body.toc.links" />
+      <UDocsToc :links="page.body.toc.links">
+        <template #bottom>
+          <div class="hidden lg:block space-y-6 !mt-6">
+            <UDivider v-if="page.body?.toc?.links?.length" dashed />
+
+            <UPageLinks title="Community" :links="links" />
+          </div>
+        </template>
+      </UDocsToc>
    </template>
  </UPage>
 </template>
@@ -27,6 +29,10 @@ const route = useRoute()
 const { prefix, removePrefixFromFiles } = useContentSource()
 const { findPageHeadline } = useElementsHelpers()

+definePageMeta({
+  layout: 'docs'
+})
+
 const path = computed(() => route.path.startsWith(prefix.value) ? route.path : `${prefix.value}${route.path}`)

 const { data: page } = await useAsyncData(path.value, () => queryContent(path.value).findOne())
@@ -40,8 +46,36 @@ const { data: surround } = await useAsyncData(`${path.value}-surround`, () => {
    .findSurround((path.value.endsWith('/') ? path.value.slice(0, -1) : path.value))
 })

-useContentHead(page)
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title: page.value.title,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  description: page.value.description,
+  ogDescription: page.value.description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title: page.value.title,
+  description: page.value.description
+})

-const githubLink = computed(() => `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`)
 const headline = computed(() => findPageHeadline(page.value))
+
+const links = computed(() => [{
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page',
+  to: `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`,
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-star',
+  label: 'Star on GitHub',
+  to: 'https://github.com/nuxtlabs/ui',
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-book-open',
+  label: 'Nuxt documentation',
+  to: 'https://nuxt.com',
+  target: '_blank'
+}])
 </script>
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]' }" class="mb-[calc(var(--header-height)*2)]">
+      <template #title>
+        <span v-html="page.hero?.title" />
+      </template>
+
+      <template #description>
+        <span v-html="page.hero?.description" />
+      </template>
+
+      <template #links>
+        <UButton label="Get Started" icon="i-heroicons-rocket-launch" size="lg" to="/getting-started/installation" />
+
+        <UInput
+          v-model="source"
+          color="gray"
+          readonly
+          autocomplete="off"
+          icon="i-heroicons-command-line"
+          input-class="select-none"
+          size="lg"
+          :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+        >
+          <template #trailing>
+            <UButton
+              aria-label="Copy Code"
+              :color="copied ? 'primary' : 'gray'"
+              variant="link"
+              size="2xs"
+              :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
+              @click="copy(source)"
+            />
+          </template>
+        </UInput>
+      </template>
+
+      <ClientOnly>
+        <HomeTetris />
+      </ClientOnly>
+    </ULandingHero>
+
+    <ULandingSection v-for="(section, index) of page.sections" :key="index" v-bind="section">
+      <template v-if="section.title" #title>
+        <span v-html="section?.title" />
+      </template>
+
+      <template v-if="section.description" #description>
+        <span v-html="section.description" />
+      </template>
+
+      <template #demo>
+        <ClientOnly>
+          <HomeDemo v-if="lgAndLarger" />
+        </ClientOnly>
+      </template>
+
+      <template #features>
+        <ULandingGrid class="lg:-mb-20 lg:auto-rows-[3rem]">
+          <ULandingCard
+            v-for="(feature, subIndex) of section.features"
+            :key="subIndex"
+            v-bind="feature"
+            :ui="{
+              background: 'dark:bg-gray-900/50 dark:lg:bg-gradient-to-b from-gray-700/50 to-gray-950/50',
+              body: {
+                base: 'flex-1',
+                background: 'dark:bg-gray-800/50 dark:lg:bg-gray-900/50 backdrop-blur-lg'
+              }
+            }"
+            class="flex flex-col"
+          >
+            <div v-if="feature.image">
+              <UColorModeImage :light="`${feature.image}-light.svg`" :dark="`${feature.image}-dark.svg`" class="object-cover w-full" />
+            </div>
+          </ULandingCard>
+        </ULandingGrid>
+      </template>
+
+      <template #categories>
+        <UPageGrid class="lg:gap-16">
+          <NuxtLink
+            v-for="(category, subIndex) of section.categories"
+            :key="subIndex"
+            :to="category.to"
+            class="hover:bg-gradient-to-b hover:from-gray-200/50 dark:hover:from-gray-800/50 rounded-lg"
+          >
+            <UColorModeImage :light="`${category.image}-light.svg`" :dark="`${category.image}-dark.svg`" class="object-cover w-full" />
+
+            <div class="flex items-center justify-center gap-2 mt-1 mb-2">
+              <span class="font-semibold text-lg">{{ category.label }}</span>
+
+              <UBadge v-if="category.badge" :label="category.badge" variant="subtle" size="xs" />
+            </div>
+          </NuxtLink>
+        </UPageGrid>
+      </template>
+    </ULandingSection>
+
+    <ULandingSection class="!pt-0">
+      <ULandingCTA
+        align="left"
+        card
+        :ui="{
+          background: 'dark:bg-gradient-to-b from-gray-800 to-gray-900',
+          shadow: 'dark:shadow-2xl',
+          body: {
+            background: 'bg-gray-50/50 dark:bg-gray-900/50'
+          },
+          title: 'text-center lg:text-left',
+          links: 'justify-center lg:justify-start'
+        }"
+      >
+        <template #title>
+          <span v-html="page.cta.title" />
+        </template>
+
+        <template #links>
+          <UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
+            <UTooltip
+              v-for="(contributor, index) of module.contributors"
+              :key="index"
+              :text="contributor.username"
+              class="rounded-full"
+              :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
+              :popper="{ offsetDistance: 16 }"
+            >
+              <UAvatar
+                :alt="contributor.username"
+                :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
+                :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
+                class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
+                size="md"
+              >
+                <NuxtLink :to="`https://github.com/${contributor.username}`" target="_blank" class="focus:outline-none" tabindex="-1">
+                  <span class="absolute inset-0" aria-hidden="true" />
+                </NuxtLink>
+              </UAvatar>
+            </UTooltip>
+          </UAvatarGroup>
+        </template>
+
+        <div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
+          <NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxthq/ui" target="_blank">
+            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+              {{ format(module.stats.downloads) }}+
+            </p>
+            <p>monthly downloads</p>
+          </NuxtLink>
+
+          <NuxtLink class="text-center group" to="https://github.com/nuxtlabs/ui" target="_blank">
+            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+              {{ format(module.stats.stars) }}+
+            </p>
+            <p>stars</p>
+          </NuxtLink>
+        </div>
+      </ULandingCTA>
+    </ULandingSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pick } from 'lodash-es'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+const { data: module } = await useFetch<{
+  stats: {
+    downloads: number
+    stars: number
+  }
+  contributors: {
+    username: string
+  }[]
+}>('https://api.nuxt.com/modules/nuxtlabs-ui', {
+  transform: (module) => pick(module, ['stats', 'contributors'])
+})
+
+const source = ref('npm i @nuxthq/ui')
+
+const { copy, copied } = useClipboard({ source })
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const mdAndLarger = breakpoints.greaterOrEqual('md')
+const lgAndLarger = breakpoints.greaterOrEqual('lg')
+const xlAndLarger = breakpoints.greaterOrEqual('xl')
+
+useSeoMeta({
+  titleTemplate: '',
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description,
+  ogImage: 'https://ui.nuxtlabs.com/social-card.png',
+  twitterImage: 'https://ui.nuxtlabs.com/social-card.png'
+})
+
+const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' })
+</script>
--- a/docs/plugins/ui.ts
+++ b/docs/plugins/ui.ts
@@ -3,9 +3,8 @@ import colors from '#tailwind-config/theme/colors'

 export default defineNuxtPlugin({
  enforce: 'post',
-  setup (nuxtApp) {
+  setup () {
    const appConfig = useAppConfig()
-    const head = nuxtApp.vueApp._context.provides.usehead

    const root = computed(() => {
      const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
@@ -33,7 +32,7 @@ export default defineNuxtPlugin({
      appConfig.ui.gray = window.localStorage.getItem('nuxt-ui-gray') || appConfig.ui.gray
    }
    if (process.server) {
-      head.push({
+      useHead({
        script: [
          {
            innerHTML: `
--- a/docs/public/illustrations/color-palette-dark.svg
+++ b/docs/public/illustrations/color-palette-dark.svg
@@ -0,0 +1,79 @@
+<svg width="363" height="152" viewBox="0 0 363 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M358 0C360.209 0 362 1.79086 362 4V13.8182L324 13.8182V4C324 1.79086 325.791 0 328 0L358 0Z" fill="#F8FAFC"/>
+<rect x="362" y="13.8182" width="13.8182" height="38" transform="rotate(90 362 13.8182)" fill="#F1F5F9"/>
+<rect x="362" y="27.6364" width="13.8182" height="38" transform="rotate(90 362 27.6364)" fill="#E2E8F0"/>
+<rect x="362" y="41.4546" width="13.8182" height="38" transform="rotate(90 362 41.4546)" fill="#CBD5E1"/>
+<rect x="362" y="55.2727" width="13.8182" height="38" transform="rotate(90 362 55.2727)" fill="#94A3B8"/>
+<rect x="362" y="69.0909" width="13.8182" height="38" transform="rotate(90 362 69.0909)" fill="#64748B"/>
+<rect x="362" y="82.9091" width="13.8182" height="38" transform="rotate(90 362 82.9091)" fill="#475569"/>
+<rect x="362" y="96.7273" width="13.8182" height="38" transform="rotate(90 362 96.7273)" fill="#334155"/>
+<rect x="362" y="110.545" width="13.8182" height="38" transform="rotate(90 362 110.545)" fill="#1E293B"/>
+<rect x="362" y="124.364" width="13.8182" height="38" transform="rotate(90 362 124.364)" fill="#0F172A"/>
+<path d="M362 138.182V148C362 150.209 360.209 152 358 152H328C325.791 152 324 150.209 324 148V138.182H362Z" fill="#020420"/>
+<path d="M304 0C306.209 0 308 1.79086 308 4V13.8182L270 13.8182V4C270 1.79086 271.791 0 274 0L304 0Z" fill="#EEF2FF"/>
+<rect x="308" y="13.8182" width="13.8182" height="38" transform="rotate(90 308 13.8182)" fill="#E0E7FF"/>
+<rect x="308" y="27.6364" width="13.8182" height="38" transform="rotate(90 308 27.6364)" fill="#C7D2FE"/>
+<rect x="308" y="41.4546" width="13.8182" height="38" transform="rotate(90 308 41.4546)" fill="#A5B4FC"/>
+<rect x="308" y="55.2727" width="13.8182" height="38" transform="rotate(90 308 55.2727)" fill="#818CF8"/>
+<rect x="308" y="69.0909" width="13.8182" height="38" transform="rotate(90 308 69.0909)" fill="#6366F1"/>
+<rect x="308" y="82.9091" width="13.8182" height="38" transform="rotate(90 308 82.9091)" fill="#4F46E5"/>
+<rect x="308" y="96.7273" width="13.8182" height="38" transform="rotate(90 308 96.7273)" fill="#4338CA"/>
+<rect x="308" y="110.545" width="13.8182" height="38" transform="rotate(90 308 110.545)" fill="#3730A3"/>
+<rect x="308" y="124.364" width="13.8182" height="38" transform="rotate(90 308 124.364)" fill="#312E81"/>
+<path d="M308 138.182V148C308 150.209 306.209 152 304 152H274C271.791 152 270 150.209 270 148V138.182H308Z" fill="#1E1B4B"/>
+<path d="M250 0C252.209 0 254 1.79086 254 4V13.8182L216 13.8182V4C216 1.79086 217.791 0 220 0L250 0Z" fill="#F5F3FF"/>
+<rect x="254" y="13.8182" width="13.8182" height="38" transform="rotate(90 254 13.8182)" fill="#EDE9FE"/>
+<rect x="254" y="27.6364" width="13.8182" height="38" transform="rotate(90 254 27.6364)" fill="#DDD6FE"/>
+<rect x="254" y="41.4546" width="13.8182" height="38" transform="rotate(90 254 41.4546)" fill="#C4B5FD"/>
+<rect x="254" y="55.2727" width="13.8182" height="38" transform="rotate(90 254 55.2727)" fill="#A78BFA"/>
+<rect x="254" y="69.0909" width="13.8182" height="38" transform="rotate(90 254 69.0909)" fill="#8B5CF6"/>
+<rect x="254" y="82.9091" width="13.8182" height="38" transform="rotate(90 254 82.9091)" fill="#7C3AED"/>
+<rect x="254" y="96.7273" width="13.8182" height="38" transform="rotate(90 254 96.7273)" fill="#6D28D9"/>
+<rect x="254" y="110.545" width="13.8182" height="38" transform="rotate(90 254 110.545)" fill="#5B21B6"/>
+<rect x="254" y="124.364" width="13.8182" height="38" transform="rotate(90 254 124.364)" fill="#4C1D95"/>
+<path d="M254 138.182V148C254 150.209 252.209 152 250 152H220C217.791 152 216 150.209 216 148V138.182H254Z" fill="#2E1065"/>
+<path d="M34 0C36.2091 0 38 1.79086 38 4V13.8182L0 13.8182V4C0 1.79086 1.79086 0 4 0L34 0Z" fill="#FFF1F2"/>
+<rect x="38" y="13.8182" width="13.8182" height="38" transform="rotate(90 38 13.8182)" fill="#FFE4E6"/>
+<rect x="38" y="27.6364" width="13.8182" height="38" transform="rotate(90 38 27.6364)" fill="#FECDD3"/>
+<rect x="38" y="41.4546" width="13.8182" height="38" transform="rotate(90 38 41.4546)" fill="#FDA4AF"/>
+<rect x="38" y="55.2727" width="13.8182" height="38" transform="rotate(90 38 55.2727)" fill="#FB7185"/>
+<rect x="38" y="69.0909" width="13.8182" height="38" transform="rotate(90 38 69.0909)" fill="#F43F5E"/>
+<rect x="38" y="82.9091" width="13.8182" height="38" transform="rotate(90 38 82.9091)" fill="#E11D48"/>
+<rect x="38" y="96.7273" width="13.8182" height="38" transform="rotate(90 38 96.7273)" fill="#BE123C"/>
+<rect x="38" y="110.545" width="13.8182" height="38" transform="rotate(90 38 110.545)" fill="#9F1239"/>
+<rect x="38" y="124.364" width="13.8182" height="38" transform="rotate(90 38 124.364)" fill="#881337"/>
+<path d="M38 138.182V148C38 150.209 36.2091 152 34 152H4C1.79086 152 0 150.209 0 148V138.182H38Z" fill="#4C0519"/>
+<path d="M88 0C90.2091 0 92 1.79086 92 4V13.8182L54 13.8182V4C54 1.79086 55.7909 0 58 0L88 0Z" fill="#F0F9FF"/>
+<rect x="92" y="13.8182" width="13.8182" height="38" transform="rotate(90 92 13.8182)" fill="#E0F2FE"/>
+<rect x="92" y="27.6364" width="13.8182" height="38" transform="rotate(90 92 27.6364)" fill="#BAE6FD"/>
+<rect x="92" y="41.4546" width="13.8182" height="38" transform="rotate(90 92 41.4546)" fill="#7DD3FC"/>
+<rect x="92" y="55.2727" width="13.8182" height="38" transform="rotate(90 92 55.2727)" fill="#38BDF8"/>
+<rect x="92" y="69.0909" width="13.8182" height="38" transform="rotate(90 92 69.0909)" fill="#0EA5E9"/>
+<rect x="92" y="82.9091" width="13.8182" height="38" transform="rotate(90 92 82.9091)" fill="#0284C7"/>
+<rect x="92" y="96.7273" width="13.8182" height="38" transform="rotate(90 92 96.7273)" fill="#0369A1"/>
+<rect x="92" y="110.545" width="13.8182" height="38" transform="rotate(90 92 110.545)" fill="#075985"/>
+<rect x="92" y="124.364" width="13.8182" height="38" transform="rotate(90 92 124.364)" fill="#0C4A6E"/>
+<path d="M92 138.182V148C92 150.209 90.2091 152 88 152H58C55.7909 152 54 150.209 54 148V138.182H92Z" fill="#082F49"/>
+<path d="M142 0C144.209 0 146 1.79086 146 4V13.8182L108 13.8182V4C108 1.79086 109.791 0 112 0L142 0Z" fill="#F0FDFA"/>
+<rect x="146" y="13.8182" width="13.8182" height="38" transform="rotate(90 146 13.8182)" fill="#CCFBF1"/>
+<rect x="146" y="27.6364" width="13.8182" height="38" transform="rotate(90 146 27.6364)" fill="#99F6E4"/>
+<rect x="146" y="41.4546" width="13.8182" height="38" transform="rotate(90 146 41.4546)" fill="#5EEAD4"/>
+<rect x="146" y="55.2727" width="13.8182" height="38" transform="rotate(90 146 55.2727)" fill="#2DD4BF"/>
+<rect x="146" y="69.0909" width="13.8182" height="38" transform="rotate(90 146 69.0909)" fill="#14B8A6"/>
+<rect x="146" y="82.9091" width="13.8182" height="38" transform="rotate(90 146 82.9091)" fill="#0D9488"/>
+<rect x="146" y="96.7273" width="13.8182" height="38" transform="rotate(90 146 96.7273)" fill="#0F766E"/>
+<rect x="146" y="110.545" width="13.8182" height="38" transform="rotate(90 146 110.545)" fill="#115E59"/>
+<rect x="146" y="124.364" width="13.8182" height="38" transform="rotate(90 146 124.364)" fill="#134E4A"/>
+<path d="M146 138.182V148C146 150.209 144.209 152 142 152H112C109.791 152 108 150.209 108 148V138.182H146Z" fill="#042F2E"/>
+<path d="M196 0C198.209 0 200 1.79086 200 4V13.8182L162 13.8182V4C162 1.79086 163.791 0 166 0L196 0Z" fill="#F0FDF4"/>
+<rect x="200" y="13.8182" width="13.8182" height="38" transform="rotate(90 200 13.8182)" fill="#DCFCE7"/>
+<rect x="200" y="27.6364" width="13.8182" height="38" transform="rotate(90 200 27.6364)" fill="#BBF7D0"/>
+<rect x="200" y="41.4546" width="13.8182" height="38" transform="rotate(90 200 41.4546)" fill="#86EFAC"/>
+<rect x="200" y="55.2727" width="13.8182" height="38" transform="rotate(90 200 55.2727)" fill="#4ADE80"/>
+<rect x="200" y="69.0909" width="13.8182" height="38" transform="rotate(90 200 69.0909)" fill="#22C55E"/>
+<rect x="200" y="82.9091" width="13.8182" height="38" transform="rotate(90 200 82.9091)" fill="#16A34A"/>
+<rect x="200" y="96.7273" width="13.8182" height="38" transform="rotate(90 200 96.7273)" fill="#15803D"/>
+<rect x="200" y="110.545" width="13.8182" height="38" transform="rotate(90 200 110.545)" fill="#166534"/>
+<rect x="200" y="124.364" width="13.8182" height="38" transform="rotate(90 200 124.364)" fill="#14532D"/>
+<path d="M200 138.182V148C200 150.209 198.209 152 196 152H166C163.791 152 162 150.209 162 148V138.182H200Z" fill="#052E16"/>
+</svg>
--- a/docs/public/illustrations/color-palette-light.svg
+++ b/docs/public/illustrations/color-palette-light.svg
@@ -0,0 +1,79 @@
+<svg width="363" height="152" viewBox="0 0 363 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M358 0C360.209 0 362 1.79086 362 4V13.8182L324 13.8182V4C324 1.79086 325.791 0 328 0L358 0Z" fill="#F8FAFC"/>
+<rect x="362" y="13.8182" width="13.8182" height="38" transform="rotate(90 362 13.8182)" fill="#F1F5F9"/>
+<rect x="362" y="27.6364" width="13.8182" height="38" transform="rotate(90 362 27.6364)" fill="#E2E8F0"/>
+<rect x="362" y="41.4545" width="13.8182" height="38" transform="rotate(90 362 41.4545)" fill="#CBD5E1"/>
+<rect x="362" y="55.2727" width="13.8182" height="38" transform="rotate(90 362 55.2727)" fill="#94A3B8"/>
+<rect x="362" y="69.0909" width="13.8182" height="38" transform="rotate(90 362 69.0909)" fill="#64748B"/>
+<rect x="362" y="82.9091" width="13.8182" height="38" transform="rotate(90 362 82.9091)" fill="#475569"/>
+<rect x="362" y="96.7273" width="13.8182" height="38" transform="rotate(90 362 96.7273)" fill="#334155"/>
+<rect x="362" y="110.545" width="13.8182" height="38" transform="rotate(90 362 110.545)" fill="#1E293B"/>
+<rect x="362" y="124.364" width="13.8182" height="38" transform="rotate(90 362 124.364)" fill="#0F172A"/>
+<path d="M362 138.182V148C362 150.209 360.209 152 358 152H328C325.791 152 324 150.209 324 148V138.182H362Z" fill="#020420"/>
+<path d="M304 0C306.209 0 308 1.79086 308 4V13.8182L270 13.8182V4C270 1.79086 271.791 0 274 0L304 0Z" fill="#EEF2FF"/>
+<rect x="308" y="13.8182" width="13.8182" height="38" transform="rotate(90 308 13.8182)" fill="#E0E7FF"/>
+<rect x="308" y="27.6364" width="13.8182" height="38" transform="rotate(90 308 27.6364)" fill="#C7D2FE"/>
+<rect x="308" y="41.4545" width="13.8182" height="38" transform="rotate(90 308 41.4545)" fill="#A5B4FC"/>
+<rect x="308" y="55.2727" width="13.8182" height="38" transform="rotate(90 308 55.2727)" fill="#818CF8"/>
+<rect x="308" y="69.0909" width="13.8182" height="38" transform="rotate(90 308 69.0909)" fill="#6366F1"/>
+<rect x="308" y="82.9091" width="13.8182" height="38" transform="rotate(90 308 82.9091)" fill="#4F46E5"/>
+<rect x="308" y="96.7273" width="13.8182" height="38" transform="rotate(90 308 96.7273)" fill="#4338CA"/>
+<rect x="308" y="110.545" width="13.8182" height="38" transform="rotate(90 308 110.545)" fill="#3730A3"/>
+<rect x="308" y="124.364" width="13.8182" height="38" transform="rotate(90 308 124.364)" fill="#312E81"/>
+<path d="M308 138.182V148C308 150.209 306.209 152 304 152H274C271.791 152 270 150.209 270 148V138.182H308Z" fill="#1E1B4B"/>
+<path d="M250 0C252.209 0 254 1.79086 254 4V13.8182L216 13.8182V4C216 1.79086 217.791 0 220 0L250 0Z" fill="#F5F3FF"/>
+<rect x="254" y="13.8182" width="13.8182" height="38" transform="rotate(90 254 13.8182)" fill="#EDE9FE"/>
+<rect x="254" y="27.6364" width="13.8182" height="38" transform="rotate(90 254 27.6364)" fill="#DDD6FE"/>
+<rect x="254" y="41.4545" width="13.8182" height="38" transform="rotate(90 254 41.4545)" fill="#C4B5FD"/>
+<rect x="254" y="55.2727" width="13.8182" height="38" transform="rotate(90 254 55.2727)" fill="#A78BFA"/>
+<rect x="254" y="69.0909" width="13.8182" height="38" transform="rotate(90 254 69.0909)" fill="#8B5CF6"/>
+<rect x="254" y="82.9091" width="13.8182" height="38" transform="rotate(90 254 82.9091)" fill="#7C3AED"/>
+<rect x="254" y="96.7273" width="13.8182" height="38" transform="rotate(90 254 96.7273)" fill="#6D28D9"/>
+<rect x="254" y="110.545" width="13.8182" height="38" transform="rotate(90 254 110.545)" fill="#5B21B6"/>
+<rect x="254" y="124.364" width="13.8182" height="38" transform="rotate(90 254 124.364)" fill="#4C1D95"/>
+<path d="M254 138.182V148C254 150.209 252.209 152 250 152H220C217.791 152 216 150.209 216 148V138.182H254Z" fill="#2E1065"/>
+<path d="M34 0C36.2091 0 38 1.79086 38 4V13.8182L0 13.8182V4C0 1.79086 1.79086 0 4 0L34 0Z" fill="#FFF1F2"/>
+<rect x="38" y="13.8182" width="13.8182" height="38" transform="rotate(90 38 13.8182)" fill="#FFE4E6"/>
+<rect x="38" y="27.6364" width="13.8182" height="38" transform="rotate(90 38 27.6364)" fill="#FECDD3"/>
+<rect x="38" y="41.4545" width="13.8182" height="38" transform="rotate(90 38 41.4545)" fill="#FDA4AF"/>
+<rect x="38" y="55.2727" width="13.8182" height="38" transform="rotate(90 38 55.2727)" fill="#FB7185"/>
+<rect x="38" y="69.0909" width="13.8182" height="38" transform="rotate(90 38 69.0909)" fill="#F43F5E"/>
+<rect x="38" y="82.9091" width="13.8182" height="38" transform="rotate(90 38 82.9091)" fill="#E11D48"/>
+<rect x="38" y="96.7273" width="13.8182" height="38" transform="rotate(90 38 96.7273)" fill="#BE123C"/>
+<rect x="38" y="110.545" width="13.8182" height="38" transform="rotate(90 38 110.545)" fill="#9F1239"/>
+<rect x="38" y="124.364" width="13.8182" height="38" transform="rotate(90 38 124.364)" fill="#881337"/>
+<path d="M38 138.182V148C38 150.209 36.2091 152 34 152H4C1.79086 152 0 150.209 0 148V138.182H38Z" fill="#4C0519"/>
+<path d="M88 0C90.2091 0 92 1.79086 92 4V13.8182L54 13.8182V4C54 1.79086 55.7909 0 58 0L88 0Z" fill="#F0F9FF"/>
+<rect x="92" y="13.8182" width="13.8182" height="38" transform="rotate(90 92 13.8182)" fill="#E0F2FE"/>
+<rect x="92" y="27.6364" width="13.8182" height="38" transform="rotate(90 92 27.6364)" fill="#BAE6FD"/>
+<rect x="92" y="41.4545" width="13.8182" height="38" transform="rotate(90 92 41.4545)" fill="#7DD3FC"/>
+<rect x="92" y="55.2727" width="13.8182" height="38" transform="rotate(90 92 55.2727)" fill="#38BDF8"/>
+<rect x="92" y="69.0909" width="13.8182" height="38" transform="rotate(90 92 69.0909)" fill="#0EA5E9"/>
+<rect x="92" y="82.9091" width="13.8182" height="38" transform="rotate(90 92 82.9091)" fill="#0284C7"/>
+<rect x="92" y="96.7273" width="13.8182" height="38" transform="rotate(90 92 96.7273)" fill="#0369A1"/>
+<rect x="92" y="110.545" width="13.8182" height="38" transform="rotate(90 92 110.545)" fill="#075985"/>
+<rect x="92" y="124.364" width="13.8182" height="38" transform="rotate(90 92 124.364)" fill="#0C4A6E"/>
+<path d="M92 138.182V148C92 150.209 90.2091 152 88 152H58C55.7909 152 54 150.209 54 148V138.182H92Z" fill="#082F49"/>
+<path d="M142 0C144.209 0 146 1.79086 146 4V13.8182L108 13.8182V4C108 1.79086 109.791 0 112 0L142 0Z" fill="#F0FDFA"/>
+<rect x="146" y="13.8182" width="13.8182" height="38" transform="rotate(90 146 13.8182)" fill="#CCFBF1"/>
+<rect x="146" y="27.6364" width="13.8182" height="38" transform="rotate(90 146 27.6364)" fill="#99F6E4"/>
+<rect x="146" y="41.4545" width="13.8182" height="38" transform="rotate(90 146 41.4545)" fill="#5EEAD4"/>
+<rect x="146" y="55.2727" width="13.8182" height="38" transform="rotate(90 146 55.2727)" fill="#2DD4BF"/>
+<rect x="146" y="69.0909" width="13.8182" height="38" transform="rotate(90 146 69.0909)" fill="#14B8A6"/>
+<rect x="146" y="82.9091" width="13.8182" height="38" transform="rotate(90 146 82.9091)" fill="#0D9488"/>
+<rect x="146" y="96.7273" width="13.8182" height="38" transform="rotate(90 146 96.7273)" fill="#0F766E"/>
+<rect x="146" y="110.545" width="13.8182" height="38" transform="rotate(90 146 110.545)" fill="#115E59"/>
+<rect x="146" y="124.364" width="13.8182" height="38" transform="rotate(90 146 124.364)" fill="#134E4A"/>
+<path d="M146 138.182V148C146 150.209 144.209 152 142 152H112C109.791 152 108 150.209 108 148V138.182H146Z" fill="#042F2E"/>
+<path d="M196 0C198.209 0 200 1.79086 200 4V13.8182L162 13.8182V4C162 1.79086 163.791 0 166 0L196 0Z" fill="#F0FDF4"/>
+<rect x="200" y="13.8182" width="13.8182" height="38" transform="rotate(90 200 13.8182)" fill="#DCFCE7"/>
+<rect x="200" y="27.6364" width="13.8182" height="38" transform="rotate(90 200 27.6364)" fill="#BBF7D0"/>
+<rect x="200" y="41.4545" width="13.8182" height="38" transform="rotate(90 200 41.4545)" fill="#86EFAC"/>
+<rect x="200" y="55.2727" width="13.8182" height="38" transform="rotate(90 200 55.2727)" fill="#4ADE80"/>
+<rect x="200" y="69.0909" width="13.8182" height="38" transform="rotate(90 200 69.0909)" fill="#22C55E"/>
+<rect x="200" y="82.9091" width="13.8182" height="38" transform="rotate(90 200 82.9091)" fill="#16A34A"/>
+<rect x="200" y="96.7273" width="13.8182" height="38" transform="rotate(90 200 96.7273)" fill="#15803D"/>
+<rect x="200" y="110.545" width="13.8182" height="38" transform="rotate(90 200 110.545)" fill="#166534"/>
+<rect x="200" y="124.364" width="13.8182" height="38" transform="rotate(90 200 124.364)" fill="#14532D"/>
+<path d="M200 138.182V148C200 150.209 198.209 152 196 152H166C163.791 152 162 150.209 162 148V138.182H200Z" fill="#052E16"/>
+</svg>
--- a/docs/public/illustrations/dark-mode-dark.svg
+++ b/docs/public/illustrations/dark-mode-dark.svg
--- a/docs/public/illustrations/dark-mode-light.svg
+++ b/docs/public/illustrations/dark-mode-light.svg
--- a/docs/public/illustrations/data-dark.svg
+++ b/docs/public/illustrations/data-dark.svg
@@ -0,0 +1,95 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2410)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2410)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2410)"/>
+<rect x="36" y="24" width="256" height="118" rx="3" fill="url(#paint2_linear_993_2410)" fill-opacity="0.26"/>
+<g clip-path="url(#clip1_993_2410)">
+<line x1="45" y1="35" x2="46" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
+<line x1="61" y1="35" x2="85" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
+<line x1="120.5" y1="35" x2="151.5" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
+<line x1="179" y1="35" x2="202" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
+<line x1="240.5" y1="35" x2="263.5" y2="35" stroke="#475569" stroke-opacity="0.4" stroke-width="6" stroke-linecap="round"/>
+</g>
+<path d="M37 25H291H37ZM291 46.5H37V45.5H291V46.5ZM37 46V25V46ZM291 25V46V25Z" fill="#475569" fill-opacity="0.3" mask="url(#path-4-inside-1_993_2410)"/>
+<g clip-path="url(#clip2_993_2410)">
+<line x1="44" y1="55" x2="45" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="55" x2="83" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="55" x2="142.5" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="55" x2="205" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="55" x2="253.5" y2="55" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 63.7H37V64.3H291V63.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-11-inside-2_993_2410)"/>
+<g clip-path="url(#clip3_993_2410)">
+<line x1="44" y1="74" x2="45" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="74" x2="91" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="74" x2="135.5" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="74" x2="191" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="74" x2="261.5" y2="74" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 82.7H37V83.3H291V82.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-18-inside-3_993_2410)"/>
+<g clip-path="url(#clip4_993_2410)">
+<line x1="44" y1="93" x2="45" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="93" x2="73" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="93" x2="142.5" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="93" x2="200" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="93" x2="275.5" y2="93" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 101.7H37V102.3H291V101.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-25-inside-4_993_2410)"/>
+<g opacity="0.59">
+<g clip-path="url(#clip5_993_2410)">
+<line x1="44" y1="112" x2="45" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="112" x2="76" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="112" x2="142.5" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="112" x2="211" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="112" x2="261.5" y2="112" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 120.7H37V121.3H291V120.7Z" fill="#475569" fill-opacity="0.3" mask="url(#path-32-inside-5_993_2410)"/>
+</g>
+<g opacity="0.35" clip-path="url(#clip6_993_2410)">
+<line x1="44" y1="131" x2="45" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="131" x2="83" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="131" x2="134.5" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="131" x2="200" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="131" x2="272.5" y2="131" stroke="#475569" stroke-opacity="0.3" stroke-width="4" stroke-linecap="round"/>
+</g>
+<rect x="36.5" y="24.5" width="255" height="117" rx="2.5" stroke="url(#paint3_linear_993_2410)" stroke-opacity="0.1"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2410" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2410" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2410" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_2410" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2410">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2410">
+<path d="M37 27C37 25.8954 37.8954 25 39 25H289C290.105 25 291 25.8954 291 27V46H37V27Z" fill="white"/>
+</clipPath>
+<clipPath id="clip2_993_2410">
+<path d="M37 47H291V64H37V47Z" fill="white"/>
+</clipPath>
+<clipPath id="clip3_993_2410">
+<path d="M37 66H291V83H37V66Z" fill="white"/>
+</clipPath>
+<clipPath id="clip4_993_2410">
+<path d="M37 85H291V102H37V85Z" fill="white"/>
+</clipPath>
+<clipPath id="clip5_993_2410">
+<path d="M37 104H291V121H37V104Z" fill="white"/>
+</clipPath>
+<clipPath id="clip6_993_2410">
+<rect width="254" height="17" fill="white" transform="translate(37 123)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/data-light.svg
+++ b/docs/public/illustrations/data-light.svg
@@ -0,0 +1,90 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2931)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2931)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2931)"/>
+<g clip-path="url(#clip1_993_2931)">
+<line x1="45" y1="35" x2="46" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
+<line x1="61" y1="35" x2="85" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
+<line x1="120.5" y1="35" x2="151.5" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
+<line x1="179" y1="35" x2="202" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
+<line x1="240.5" y1="35" x2="263.5" y2="35" stroke="#CBD5E1" stroke-opacity="0.55" stroke-width="6" stroke-linecap="round"/>
+</g>
+<path d="M37 25H291H37ZM291 46.5H37V45.5H291V46.5ZM37 46V25V46ZM291 25V46V25Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-5-inside-1_993_2931)"/>
+<g clip-path="url(#clip2_993_2931)">
+<line x1="44" y1="55" x2="45" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="55" x2="83" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="55" x2="142.5" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="55" x2="205" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="55" x2="253.5" y2="55" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 63.7H37V64.3H291V63.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-12-inside-2_993_2931)"/>
+<g clip-path="url(#clip3_993_2931)">
+<line x1="44" y1="74" x2="45" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="74" x2="91" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="74" x2="135.5" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="74" x2="191" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="74" x2="261.5" y2="74" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 82.7H37V83.3H291V82.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-19-inside-3_993_2931)"/>
+<g clip-path="url(#clip4_993_2931)">
+<line x1="44" y1="93" x2="45" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="93" x2="73" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="93" x2="142.5" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="93" x2="200" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="93" x2="275.5" y2="93" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 101.7H37V102.3H291V101.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-26-inside-4_993_2931)"/>
+<g opacity="0.59">
+<g clip-path="url(#clip5_993_2931)">
+<line x1="44" y1="112" x2="45" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="112" x2="76" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="112" x2="142.5" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="112" x2="211" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="112" x2="261.5" y2="112" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M291 120.7H37V121.3H291V120.7Z" fill="#CBD5E1" fill-opacity="0.5" mask="url(#path-33-inside-5_993_2931)"/>
+</g>
+<g opacity="0.35" clip-path="url(#clip6_993_2931)">
+<line x1="44" y1="131" x2="45" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="61" y1="131" x2="83" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="120.5" y1="131" x2="134.5" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="178" y1="131" x2="200" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+<line x1="239.5" y1="131" x2="272.5" y2="131" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round"/>
+</g>
+<rect x="36.5" y="24.5" width="255" height="117" rx="2.5" stroke="url(#paint2_linear_993_2931)" stroke-opacity="0.7"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2931" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2931" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2931" x1="164" y1="24" x2="164" y2="142" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2931">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2931">
+<path d="M37 27C37 25.8954 37.8954 25 39 25H289C290.105 25 291 25.8954 291 27V46H37V27Z" fill="white"/>
+</clipPath>
+<clipPath id="clip2_993_2931">
+<path d="M37 47H291V64H37V47Z" fill="white"/>
+</clipPath>
+<clipPath id="clip3_993_2931">
+<path d="M37 66H291V83H37V66Z" fill="white"/>
+</clipPath>
+<clipPath id="clip4_993_2931">
+<path d="M37 85H291V102H37V85Z" fill="white"/>
+</clipPath>
+<clipPath id="clip5_993_2931">
+<path d="M37 104H291V121H37V104Z" fill="white"/>
+</clipPath>
+<clipPath id="clip6_993_2931">
+<rect width="254" height="17" fill="white" transform="translate(37 123)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/elements-dark.svg
+++ b/docs/public/illustrations/elements-dark.svg
@@ -0,0 +1,66 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2342)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2342)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2342)"/>
+<rect x="111.597" y="24" width="55" height="18" rx="3" fill="#475569" fill-opacity="0.32"/>
+<line x1="119.597" y1="33" x2="139.597" y2="33" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<path d="M158.194 32.398L158.195 32.3982C158.212 32.4153 158.226 32.4356 158.235 32.4579C158.244 32.4802 158.249 32.5042 158.249 32.5284C158.249 32.5526 158.244 32.5766 158.235 32.5989C158.226 32.6212 158.212 32.6414 158.195 32.6584C158.195 32.6585 158.195 32.6585 158.195 32.6586L156.229 34.6016L156.229 34.6015L156.227 34.6035C156.21 34.6207 156.19 34.6343 156.167 34.6436L156.273 34.8975L156.167 34.6436C156.145 34.6529 156.121 34.6577 156.097 34.6577C156.073 34.6577 156.049 34.6529 156.026 34.6436L155.92 34.8975L156.026 34.6436C156.004 34.6343 155.984 34.6207 155.967 34.6035L155.967 34.6035L155.966 34.6027L154.022 32.6594L154.022 32.6594L154.022 32.6586C154.004 32.6415 153.991 32.6212 153.981 32.5989C153.972 32.5766 153.967 32.5526 153.967 32.5284C153.967 32.5042 153.972 32.4802 153.981 32.4579C153.991 32.4356 154.004 32.4153 154.022 32.3982L154.022 32.398C154.056 32.3639 154.103 32.3447 154.151 32.3447C154.199 32.3447 154.246 32.3638 154.28 32.3978C154.28 32.3979 154.28 32.3979 154.28 32.398L155.902 34.0199L156.095 34.213L156.29 34.0213L157.935 32.3988L157.936 32.398C157.97 32.3639 158.017 32.3447 158.065 32.3447C158.114 32.3447 158.16 32.3639 158.194 32.398Z" stroke="#475569" stroke-opacity="0.32" stroke-width="0.55"/>
+<g clip-path="url(#clip1_993_2342)">
+<rect x="111.597" y="47.0852" width="106.418" height="126.663" rx="3" fill="url(#paint2_linear_993_2342)" fill-opacity="0.32"/>
+<ellipse cx="122.306" cy="58.5852" rx="4.5669" ry="4.56691" fill="#475569" fill-opacity="0.3"/>
+<line x1="134.806" y1="59.0852" x2="154.806" y2="59.0852" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="111.597" y="70.0852" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
+<path d="M120.25 82.9019L120.818 81.4824C120.909 81.2561 121.044 81.0505 121.217 80.8781L124.33 77.7647C124.703 77.3919 125.308 77.3919 125.68 77.7647C126.053 78.1375 126.053 78.7419 125.68 79.1147L122.567 82.2281C122.394 82.4005 122.189 82.5361 121.962 82.6266L120.543 83.1944C120.359 83.2679 120.177 83.0856 120.25 82.9019Z" fill="#475569" fill-opacity="0.32"/>
+<path d="M119.381 79.2269C119.381 78.9162 119.632 78.6644 119.943 78.6644H122.306C122.492 78.6644 122.643 78.5133 122.643 78.3269C122.643 78.1405 122.492 77.9894 122.306 77.9894H119.943C119.26 77.9894 118.706 78.5434 118.706 79.2269V83.5019C118.706 84.1853 119.26 84.7394 119.943 84.7394H124.218C124.902 84.7394 125.456 84.1853 125.456 83.5019V81.1394C125.456 80.953 125.304 80.8019 125.118 80.8019C124.932 80.8019 124.781 80.953 124.781 81.1394V83.5019C124.781 83.8125 124.529 84.0644 124.218 84.0644H119.943C119.632 84.0644 119.381 83.8125 119.381 83.5019V79.2269Z" fill="#475569" fill-opacity="0.32"/>
+<line x1="134.806" y1="81.6394" x2="154.806" y2="81.6394" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="199.806" y="76.6394" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M120.956 96.2144C120.956 95.8416 121.258 95.5394 121.631 95.5394H123.376C123.555 95.5394 123.727 95.6105 123.853 95.7371L125.258 97.1417C125.385 97.2683 125.456 97.44 125.456 97.619V100.264C125.456 100.637 125.154 100.939 124.781 100.939H124.331V99.419C124.331 99.061 124.189 98.7176 123.935 98.4644L122.531 97.0598C122.278 96.8067 121.934 96.6644 121.576 96.6644H120.956V96.2144Z" fill="#475569" fill-opacity="0.32"/>
+<path d="M119.831 97.3394C119.458 97.3394 119.156 97.6416 119.156 98.0144V102.064C119.156 102.437 119.458 102.739 119.831 102.739H122.981C123.354 102.739 123.656 102.437 123.656 102.064V99.419C123.656 99.24 123.585 99.0683 123.458 98.9417L122.053 97.5371C121.927 97.4105 121.755 97.3394 121.576 97.3394H119.831Z" fill="#475569" fill-opacity="0.32"/>
+<line x1="134.806" y1="99.6394" x2="164.806" y2="99.6394" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="199.806" y="94.6394" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="111.597" y="110.639" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
+<g clip-path="url(#clip2_993_2342)">
+<path d="M118.706 118.544C118.457 118.544 118.256 118.745 118.256 118.994V119.444C118.256 119.692 118.457 119.894 118.706 119.894H125.906C126.154 119.894 126.356 119.692 126.356 119.444V118.994C126.356 118.745 126.154 118.544 125.906 118.544H118.706Z" fill="#475569" fill-opacity="0.32"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M118.706 120.569H125.906L125.541 124.038C125.492 124.496 125.106 124.844 124.646 124.844H119.966C119.506 124.844 119.119 124.496 119.071 124.038L118.706 120.569ZM120.956 122.144C120.956 121.895 121.157 121.694 121.406 121.694H123.206C123.454 121.694 123.656 121.895 123.656 122.144C123.656 122.392 123.454 122.594 123.206 122.594H121.406C121.157 122.594 120.956 122.392 120.956 122.144Z" fill="#475569" fill-opacity="0.32"/>
+</g>
+<line x1="134.806" y1="122.194" x2="156.806" y2="122.194" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<g opacity="0.36">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.306 143.294C124.294 143.294 125.906 141.682 125.906 139.694C125.906 137.706 124.294 136.094 122.306 136.094C120.317 136.094 118.706 137.706 118.706 139.694C118.706 141.682 120.317 143.294 122.306 143.294ZM120.843 139.356C120.657 139.356 120.506 139.507 120.506 139.694C120.506 139.88 120.657 140.031 120.843 140.031H122.909L121.963 140.909C121.827 141.036 121.819 141.249 121.946 141.386C122.073 141.522 122.286 141.53 122.423 141.404L123.998 139.941C124.066 139.877 124.106 139.788 124.106 139.694C124.106 139.6 124.066 139.51 123.998 139.446L122.423 137.984C122.286 137.857 122.073 137.865 121.946 138.002C121.819 138.138 121.827 138.352 121.963 138.479L122.909 139.356H120.843Z" fill="#475569" fill-opacity="0.32"/>
+<line x1="134.806" y1="140.194" x2="150.806" y2="140.194" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+</g>
+<rect x="111.597" y="151.194" width="106.418" height="0.55426" fill="#475569" fill-opacity="0.23"/>
+<g opacity="0.06">
+<g clip-path="url(#clip3_993_2342)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.743 158.198C121.06 158.198 120.506 158.752 120.506 159.435V159.635C120.148 159.669 119.793 159.714 119.441 159.769C119.257 159.798 119.131 159.97 119.16 160.154C119.189 160.339 119.361 160.465 119.545 160.436L119.612 160.426L119.991 165.159C120.042 165.802 120.579 166.298 121.224 166.298H123.387C124.033 166.298 124.569 165.802 124.621 165.159L125 160.426L125.066 160.436C125.25 160.465 125.423 160.339 125.452 160.154C125.48 159.97 125.354 159.798 125.17 159.769C124.819 159.714 124.464 159.669 124.106 159.635V159.435C124.106 158.752 123.552 158.198 122.868 158.198H121.743ZM122.306 159.548C122.684 159.548 123.059 159.559 123.431 159.582V159.435C123.431 159.125 123.179 158.873 122.868 158.873H121.743C121.433 158.873 121.181 159.125 121.181 159.435V159.582C121.553 159.559 121.928 159.548 122.306 159.548ZM123.704 161.252C123.713 161.02 123.532 160.823 123.299 160.814C123.066 160.805 122.87 160.986 122.861 161.219L122.726 164.594C122.717 164.827 122.898 165.023 123.131 165.032C123.363 165.041 123.56 164.86 123.569 164.627L123.704 161.252ZM121.751 161.219C121.742 160.986 121.545 160.805 121.313 160.814C121.08 160.823 120.899 161.02 120.908 161.252L121.043 164.627C121.052 164.86 121.248 165.041 121.481 165.032C121.714 165.023 121.895 164.827 121.886 164.594L121.751 161.219Z" fill="#475569"/>
+</g>
+<line x1="134.806" y1="162.748" x2="164.806" y2="162.748" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="199.806" y="157.748" width="9" height="9" rx="2" fill="#475569" fill-opacity="0.3"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2342" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2342" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2342" x1="164.806" y1="47.0852" x2="164.806" y2="173.748" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2342">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2342">
+<rect width="106.418" height="131.097" fill="white" transform="translate(111.597 42.6511)"/>
+</clipPath>
+<clipPath id="clip2_993_2342">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(117.806 117.194)"/>
+</clipPath>
+<clipPath id="clip3_993_2342">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(117.806 157.748)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/elements-light.svg
+++ b/docs/public/illustrations/elements-light.svg
@@ -0,0 +1,76 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2863)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2863)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2863)"/>
+<line x1="119.597" y1="33" x2="139.597" y2="33" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<path d="M158.194 32.398L158.195 32.3982C158.212 32.4152 158.226 32.4355 158.235 32.4579C158.244 32.4802 158.249 32.5042 158.249 32.5284C158.249 32.5526 158.244 32.5765 158.235 32.5989C158.226 32.6212 158.212 32.6414 158.195 32.6584C158.195 32.6584 158.195 32.6585 158.195 32.6585L156.229 34.6015L156.229 34.6015L156.227 34.6035C156.21 34.6206 156.19 34.6343 156.167 34.6436L156.273 34.8974L156.167 34.6436C156.145 34.6529 156.121 34.6577 156.097 34.6577C156.073 34.6577 156.049 34.6529 156.026 34.6436L155.92 34.8974L156.026 34.6436C156.004 34.6343 155.984 34.6206 155.967 34.6035L155.967 34.6035L155.966 34.6027L154.022 32.6593L154.022 32.6593L154.022 32.6585C154.004 32.6415 153.991 32.6212 153.981 32.5989C153.972 32.5765 153.967 32.5526 153.967 32.5284C153.967 32.5042 153.972 32.4802 153.981 32.4579C153.991 32.4355 154.004 32.4152 154.022 32.3982L154.022 32.398C154.056 32.3638 154.103 32.3447 154.151 32.3447C154.199 32.3447 154.246 32.3638 154.28 32.3978C154.28 32.3978 154.28 32.3979 154.28 32.398L155.902 34.0199L156.095 34.213L156.29 34.0213L157.935 32.3988L157.936 32.398C157.97 32.3638 158.017 32.3447 158.065 32.3447C158.114 32.3447 158.16 32.3638 158.194 32.398Z" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="0.55"/>
+<rect x="112.097" y="24.5" width="54" height="17" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
+<g clip-path="url(#clip1_993_2863)">
+<ellipse cx="122.709" cy="58.9341" rx="4.5669" ry="4.56691" fill="#CBD5E1" fill-opacity="0.5"/>
+<line x1="135.209" y1="59.4341" x2="155.209" y2="59.4341" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="112" y="70.4341" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
+<g clip-path="url(#clip2_993_2863)">
+<path d="M120.654 83.2508L121.222 81.8313C121.312 81.605 121.448 81.3994 121.62 81.227L124.734 78.1136C125.106 77.7408 125.711 77.7408 126.084 78.1136C126.456 78.4864 126.456 79.0908 126.084 79.4636L122.97 82.577C122.798 82.7494 122.592 82.885 122.366 82.9755L120.946 83.5433C120.763 83.6168 120.58 83.4345 120.654 83.2508Z" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M119.784 79.5758C119.784 79.2651 120.036 79.0133 120.346 79.0133H122.709C122.895 79.0133 123.046 78.8622 123.046 78.6758C123.046 78.4894 122.895 78.3383 122.709 78.3383H120.346C119.663 78.3383 119.109 78.8923 119.109 79.5758V83.8508C119.109 84.5342 119.663 85.0883 120.346 85.0883H124.621C125.305 85.0883 125.859 84.5342 125.859 83.8508V81.4883C125.859 81.3019 125.708 81.1508 125.521 81.1508C125.335 81.1508 125.184 81.3019 125.184 81.4883V83.8508C125.184 84.1614 124.932 84.4133 124.621 84.4133H120.346C120.036 84.4133 119.784 84.1614 119.784 83.8508V79.5758Z" fill="#CBD5E1" fill-opacity="0.5"/>
+</g>
+<line x1="135.209" y1="81.9883" x2="155.209" y2="81.9883" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="200.209" y="76.9883" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<g clip-path="url(#clip3_993_2863)">
+<path d="M121.359 96.5634C121.359 96.1906 121.661 95.8884 122.034 95.8884H123.779C123.959 95.8884 124.13 95.9595 124.257 96.0861L125.661 97.4907C125.788 97.6173 125.859 97.789 125.859 97.968V100.613C125.859 100.986 125.557 101.288 125.184 101.288H124.734V99.768C124.734 99.4099 124.592 99.0666 124.339 98.8134L122.934 97.4088C122.681 97.1556 122.338 97.0134 121.979 97.0134H121.359V96.5634Z" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M120.234 97.6884C119.861 97.6884 119.559 97.9906 119.559 98.3634V102.413C119.559 102.786 119.861 103.088 120.234 103.088H123.384C123.757 103.088 124.059 102.786 124.059 102.413V99.768C124.059 99.589 123.988 99.4173 123.861 99.2907L122.457 97.8861C122.33 97.7595 122.159 97.6884 121.979 97.6884H120.234Z" fill="#CBD5E1" fill-opacity="0.5"/>
+</g>
+<line x1="135.209" y1="99.9883" x2="165.209" y2="99.9883" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="200.209" y="94.9883" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="112" y="110.988" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
+<g clip-path="url(#clip4_993_2863)">
+<path d="M119.109 118.893C118.86 118.893 118.659 119.094 118.659 119.343V119.793C118.659 120.041 118.86 120.243 119.109 120.243H126.309C126.557 120.243 126.759 120.041 126.759 119.793V119.343C126.759 119.094 126.557 118.893 126.309 118.893H119.109Z" fill="#CBD5E1" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.109 120.918H126.309L125.944 124.387C125.895 124.845 125.509 125.193 125.048 125.193H120.369C119.908 125.193 119.522 124.845 119.474 124.387L119.109 120.918ZM121.359 122.493C121.359 122.244 121.56 122.043 121.809 122.043H123.609C123.857 122.043 124.059 122.244 124.059 122.493C124.059 122.741 123.857 122.943 123.609 122.943H121.809C121.56 122.943 121.359 122.741 121.359 122.493Z" fill="#CBD5E1" fill-opacity="0.5"/>
+</g>
+<line x1="135.209" y1="122.543" x2="157.209" y2="122.543" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<g opacity="0.36">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.709 143.643C124.697 143.643 126.309 142.031 126.309 140.043C126.309 138.054 124.697 136.443 122.709 136.443C120.721 136.443 119.109 138.054 119.109 140.043C119.109 142.031 120.721 143.643 122.709 143.643ZM121.246 139.705C121.06 139.705 120.909 139.856 120.909 140.043C120.909 140.229 121.06 140.38 121.246 140.38H123.312L122.367 141.258C122.23 141.385 122.222 141.598 122.349 141.735C122.476 141.871 122.689 141.879 122.826 141.752L124.401 140.29C124.47 140.226 124.509 140.136 124.509 140.043C124.509 139.949 124.47 139.859 124.401 139.795L122.826 138.333C122.689 138.206 122.476 138.214 122.349 138.35C122.222 138.487 122.23 138.701 122.367 138.827L123.312 139.705H121.246Z" fill="#CBD5E1" fill-opacity="0.5"/>
+<line x1="135.209" y1="140.543" x2="151.209" y2="140.543" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+</g>
+<rect x="112" y="151.543" width="106.418" height="0.55426" fill="#CBD5E1" fill-opacity="0.32"/>
+<g opacity="0.06">
+<g clip-path="url(#clip5_993_2863)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.147 158.547C121.463 158.547 120.909 159.101 120.909 159.784V159.983C120.551 160.018 120.196 160.063 119.845 160.118C119.66 160.147 119.534 160.319 119.563 160.503C119.592 160.687 119.764 160.813 119.949 160.785L120.015 160.775L120.394 165.508C120.445 166.151 120.982 166.647 121.627 166.647H123.791C124.436 166.647 124.973 166.151 125.024 165.508L125.403 160.775L125.47 160.785C125.654 160.813 125.826 160.687 125.855 160.503C125.884 160.319 125.758 160.147 125.574 160.118C125.222 160.063 124.867 160.018 124.509 159.983V159.784C124.509 159.101 123.955 158.547 123.272 158.547H122.147ZM122.709 159.897C123.087 159.897 123.462 159.908 123.834 159.93V159.784C123.834 159.474 123.582 159.222 123.272 159.222H122.147C121.836 159.222 121.584 159.474 121.584 159.784V159.931C121.956 159.908 122.331 159.897 122.709 159.897ZM124.107 161.601C124.117 161.369 123.935 161.172 123.703 161.163C123.47 161.154 123.274 161.335 123.264 161.568L123.129 164.943C123.12 165.175 123.301 165.372 123.534 165.381C123.767 165.39 123.963 165.209 123.972 164.976L124.107 161.601ZM122.154 161.568C122.145 161.335 121.949 161.154 121.716 161.163C121.483 161.172 121.302 161.369 121.311 161.601L121.446 164.976C121.456 165.209 121.652 165.39 121.885 165.381C122.117 165.372 122.299 165.175 122.289 164.943L122.154 161.568Z" fill="#CBD5E1"/>
+</g>
+<line x1="135.209" y1="163.097" x2="165.209" y2="163.097" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="200.209" y="158.097" width="9" height="9" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+</g>
+<rect x="112.5" y="47.9341" width="105.418" height="125.663" rx="2.5" stroke="url(#paint2_linear_993_2863)" stroke-opacity="0.7"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2863" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2863" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2863" x1="165.209" y1="47.4341" x2="165.209" y2="174.097" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2863">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2863">
+<rect width="106.418" height="131.097" fill="white" transform="translate(112 43)"/>
+</clipPath>
+<clipPath id="clip2_993_2863">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 76.9883)"/>
+</clipPath>
+<clipPath id="clip3_993_2863">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 94.9883)"/>
+</clipPath>
+<clipPath id="clip4_993_2863">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 117.543)"/>
+</clipPath>
+<clipPath id="clip5_993_2863">
+<rect width="8.99999" height="8.99999" fill="white" transform="translate(118.209 158.097)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/forms-dark.svg
+++ b/docs/public/illustrations/forms-dark.svg
@@ -0,0 +1,40 @@
+<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2387)">
+<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2387)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2387)"/>
+<line x1="83.5" y1="29" x2="95.5" y2="29" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="80.5" y="37.9034" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
+<g clip-path="url(#clip1_993_2387)">
+<path d="M91.7515 43.1536V46.6536C91.7515 46.8525 91.6724 47.0432 91.5318 47.1839C91.3911 47.3245 91.2004 47.4036 91.0015 47.4036H86.0015C85.8026 47.4036 85.6118 47.3245 85.4711 47.1839C85.3305 47.0432 85.2515 46.8525 85.2515 46.6536V43.1536M91.7515 43.1536C91.7515 42.9547 91.6724 42.7639 91.5318 42.6232C91.3911 42.4826 91.2004 42.4036 91.0015 42.4036H86.0015C85.8026 42.4036 85.6118 42.4826 85.4711 42.6232C85.3305 42.7639 85.2515 42.9547 85.2515 43.1536M91.7515 43.1536V43.2346C91.7515 43.3626 91.7187 43.4885 91.6563 43.6003C91.5938 43.7121 91.5038 43.8061 91.3948 43.8732L88.8948 45.4116C88.7765 45.4844 88.6404 45.523 88.5015 45.523C88.3626 45.523 88.2264 45.4844 88.1081 45.4116L85.6081 43.8736C85.4991 43.8064 85.4091 43.7125 85.3467 43.6007C85.2842 43.4889 85.2515 43.3629 85.2515 43.2349V43.1536" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<line x1="100.5" y1="44.9034" x2="166.5" y2="44.9034" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="38.4034" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
+<g opacity="0.8">
+<line x1="83.5" y1="73" x2="118.5" y2="73" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="80.5" y="81.9034" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
+<line x1="87.5" y1="88.9034" x2="153.5" y2="88.9034" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="82.4034" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
+</g>
+<g opacity="0.4">
+<line x1="83.5" y1="117" x2="118.5" y2="117" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="80.5" y="125.903" width="168" height="14" rx="3" fill="#475569" fill-opacity="0.13"/>
+<line x1="87.5" y1="132.903" x2="153.5" y2="132.903" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="126.403" width="167" height="13" rx="2.5" stroke="#475569" stroke-opacity="0.3"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2387" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2387" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2387">
+<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
+</clipPath>
+<clipPath id="clip1_993_2387">
+<rect width="8" height="8" fill="white" transform="translate(84.5 40.9034)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/forms-light.svg
+++ b/docs/public/illustrations/forms-light.svg
@@ -0,0 +1,37 @@
+<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2908)">
+<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2908)" fill-opacity="0.15" stroke="url(#paint1_linear_993_2908)"/>
+<line x1="83.5" y1="29" x2="95.5" y2="29" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<g clip-path="url(#clip1_993_2908)">
+<path d="M91.7515 43.1535V46.6535C91.7515 46.8524 91.6724 47.0432 91.5318 47.1839C91.3911 47.3245 91.2004 47.4035 91.0015 47.4035H86.0015C85.8026 47.4035 85.6118 47.3245 85.4711 47.1839C85.3305 47.0432 85.2515 46.8524 85.2515 46.6535V43.1535M91.7515 43.1535C91.7515 42.9546 91.6724 42.7639 91.5318 42.6232C91.3911 42.4826 91.2004 42.4035 91.0015 42.4035H86.0015C85.8026 42.4035 85.6118 42.4826 85.4711 42.6232C85.3305 42.7639 85.2515 42.9546 85.2515 43.1535M91.7515 43.1535V43.2345C91.7515 43.3626 91.7187 43.4885 91.6563 43.6003C91.5938 43.7121 91.5038 43.806 91.3948 43.8732L88.8948 45.4115C88.7765 45.4844 88.6404 45.523 88.5015 45.523C88.3626 45.523 88.2264 45.4844 88.1081 45.4115L85.6081 43.8735C85.4991 43.8064 85.4091 43.7124 85.3467 43.6006C85.2842 43.4888 85.2515 43.3629 85.2515 43.2349V43.1535" stroke="#CBD5E1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<line x1="100.5" y1="44.9034" x2="166.5" y2="44.9034" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="38.4034" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
+<g opacity="0.8">
+<line x1="83.5" y1="73" x2="118.5" y2="73" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<line x1="87.5" y1="88.9034" x2="153.5" y2="88.9034" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="82.4034" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
+</g>
+<g opacity="0.4">
+<line x1="83.5" y1="117" x2="118.5" y2="117" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<line x1="87.5" y1="132.903" x2="153.5" y2="132.903" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="81" y="126.403" width="167" height="13" rx="2.5" stroke="#CBD5E1" stroke-opacity="0.7"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2908" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2908" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2908">
+<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
+</clipPath>
+<clipPath id="clip1_993_2908">
+<rect width="8" height="8" fill="white" transform="translate(84.5 40.9034)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/fully-customizable-dark.svg
+++ b/docs/public/illustrations/fully-customizable-dark.svg
--- a/docs/public/illustrations/fully-customizable-light.svg
+++ b/docs/public/illustrations/fully-customizable-light.svg
--- a/docs/public/illustrations/icon-library-dark.svg
+++ b/docs/public/illustrations/icon-library-dark.svg
--- a/docs/public/illustrations/icon-library-light.svg
+++ b/docs/public/illustrations/icon-library-light.svg
--- a/docs/public/illustrations/keyboard-shortcuts-dark.svg
+++ b/docs/public/illustrations/keyboard-shortcuts-dark.svg
@@ -0,0 +1,177 @@
+<svg width="444" height="160" viewBox="0 0 444 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_5983)">
+<g filter="url(#filter0_f_993_5983)">
+<rect x="112.809" y="113" width="24" height="32" transform="rotate(36 112.809 113)" fill="url(#paint0_radial_993_5983)"/>
+</g>
+<g filter="url(#filter1_f_993_5983)">
+<rect x="274.809" y="64" width="24" height="32" transform="rotate(36 274.809 64)" fill="url(#paint1_radial_993_5983)"/>
+</g>
+<rect width="444" height="160" rx="8" fill="url(#paint2_linear_993_5983)" fill-opacity="0.12"/>
+<rect x="11" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="39" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="67" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="95" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="123" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="151" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="179" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="207" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="235" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="263" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="291" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="320" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="348" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="376" y="29" width="23" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="404" y="29" width="29" height="20" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="325" y="128" width="23" height="21" rx="2" fill="url(#paint3_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="353" y="140" width="23.7037" height="9" rx="2" fill="url(#paint4_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="381.642" y="140" width="23.7037" height="9" rx="2" fill="url(#paint5_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="409.296" y="140" width="23.7037" height="9" rx="2" fill="url(#paint6_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="381.642" y="128" width="23.7037" height="9" rx="2" fill="url(#paint7_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="11" y="128" width="23" height="21" rx="2" fill="url(#paint8_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="39" y="128" width="23" height="21" rx="2" fill="url(#paint9_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="67" y="128" width="23" height="21" rx="2" fill="url(#paint10_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="95" y="128" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
+<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="url(#paint11_linear_993_5983)" stroke-opacity="0.5"/>
+<rect x="293" y="128" width="27" height="21" rx="2" fill="url(#paint12_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="123" y="128" width="165" height="21" rx="2" fill="url(#paint13_linear_993_5983)" fill-opacity="0.16"/>
+<rect x="327" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="299" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="271" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="243" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="215" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="187" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="159" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="131" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="103" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="75" y="103" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="355" y="103" width="78" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="11" y="103" width="59" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="393" y="53" width="40" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="365" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="337" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="309" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="281" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="253" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="225" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="197" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="169" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="141" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="113" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="85" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="57" y="53" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="11" y="53" width="41" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="60" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="88" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="116" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="144" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="172" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="200" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="228" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="256" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="#475569" stroke-opacity="0.2"/>
+<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="url(#paint14_linear_993_5983)" stroke-opacity="0.5"/>
+<rect x="284" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="312" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="340" y="78" width="23" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="368" y="78" width="65" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="11" y="78" width="44" height="21" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="11" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="39" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="67" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="95" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="123" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="151" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="179" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="207" y="10" width="24" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="236" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="264" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="292" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="320" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="348" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="376" y="10" width="23" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<rect x="404" y="10" width="29" height="15" rx="2" fill="#475569" fill-opacity="0.16"/>
+<path d="M264 94V83H265.383V87.9814L270.189 83H271.934L267.654 87.3843L272 94H270.321L266.667 88.4057L265.383 89.71V94H264Z" fill="#94A3B8"/>
+<path d="M109.75 139.5H108.5V137.5H109.75C110.195 137.5 110.63 137.368 111 137.121C111.37 136.874 111.658 136.522 111.829 136.111C111.999 135.7 112.044 135.248 111.957 134.811C111.87 134.375 111.656 133.974 111.341 133.659C111.026 133.344 110.625 133.13 110.189 133.043C109.752 132.956 109.3 133.001 108.889 133.171C108.478 133.342 108.126 133.63 107.879 134C107.632 134.37 107.5 134.805 107.5 135.25V136.5H105.5V135.25C105.5 134.805 105.368 134.37 105.121 134C104.874 133.63 104.522 133.342 104.111 133.171C103.7 133.001 103.248 132.956 102.811 133.043C102.375 133.13 101.974 133.344 101.659 133.659C101.344 133.974 101.13 134.375 101.043 134.811C100.956 135.248 101.001 135.7 101.171 136.111C101.342 136.522 101.63 136.874 102 137.121C102.37 137.368 102.805 137.5 103.25 137.5H104.5V139.5H103.25C102.805 139.5 102.37 139.632 102 139.879C101.63 140.126 101.342 140.478 101.171 140.889C101.001 141.3 100.956 141.752 101.043 142.189C101.13 142.625 101.344 143.026 101.659 143.341C101.974 143.656 102.375 143.87 102.811 143.957C103.248 144.044 103.7 143.999 104.111 143.829C104.522 143.658 104.874 143.37 105.121 143C105.368 142.63 105.5 142.195 105.5 141.75V140.5H107.5V141.75C107.5 142.195 107.632 142.63 107.879 143C108.126 143.37 108.478 143.658 108.889 143.829C109.3 143.999 109.752 144.044 110.189 143.957C110.625 143.87 111.026 143.656 111.341 143.341C111.656 143.026 111.87 142.625 111.957 142.189C112.044 141.752 111.999 141.3 111.829 140.889C111.658 140.478 111.37 140.126 111 139.879C110.63 139.632 110.195 139.5 109.75 139.5ZM108.5 135.25C108.5 135.003 108.573 134.761 108.711 134.556C108.848 134.35 109.043 134.19 109.272 134.095C109.5 134.001 109.751 133.976 109.994 134.024C110.236 134.072 110.459 134.191 110.634 134.366C110.809 134.541 110.928 134.764 110.976 135.006C111.024 135.249 110.999 135.5 110.905 135.728C110.81 135.957 110.65 136.152 110.444 136.289C110.239 136.427 109.997 136.5 109.75 136.5H108.5V135.25ZM102 135.25C102 134.918 102.132 134.601 102.366 134.366C102.601 134.132 102.918 134 103.25 134C103.582 134 103.899 134.132 104.134 134.366C104.368 134.601 104.5 134.918 104.5 135.25V136.5H103.25C102.919 136.498 102.602 136.366 102.368 136.132C102.134 135.898 102.002 135.581 102 135.25ZM104.5 141.75C104.5 141.997 104.427 142.239 104.289 142.444C104.152 142.65 103.957 142.81 103.728 142.905C103.5 142.999 103.249 143.024 103.006 142.976C102.764 142.928 102.541 142.809 102.366 142.634C102.191 142.459 102.072 142.236 102.024 141.994C101.976 141.751 102.001 141.5 102.095 141.272C102.19 141.043 102.35 140.848 102.556 140.711C102.761 140.573 103.003 140.5 103.25 140.5H104.5V141.75ZM105.5 137.5H107.5V139.5H105.5V137.5ZM109.75 143C109.419 142.998 109.102 142.866 108.868 142.632C108.634 142.398 108.502 142.081 108.5 141.75V140.5H109.75C110.082 140.5 110.399 140.632 110.634 140.866C110.868 141.101 111 141.418 111 141.75C111 142.082 110.868 142.399 110.634 142.634C110.399 142.868 110.082 143 109.75 143Z" fill="#94A3B8"/>
+<rect x="0.5" y="0.5" width="443" height="159" rx="7.5" stroke="url(#paint15_linear_993_5983)" stroke-opacity="0.5"/>
+</g>
+<defs>
+<filter id="filter0_f_993_5983" x="82" y="101" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
+</filter>
+<filter id="filter1_f_993_5983" x="244" y="52" width="62.2256" height="63.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_993_5983"/>
+</filter>
+<radialGradient id="paint0_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124.809 129) rotate(90) scale(16 12)">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_993_5983" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.809 80) rotate(90) scale(16 12)">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint2_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_5983" x1="336.52" y1="119.214" x2="330.425" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_993_5983" x1="364.873" y1="136.235" x2="363.746" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_993_5983" x1="393.515" y1="136.235" x2="392.388" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_993_5983" x1="421.169" y1="136.235" x2="420.042" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_993_5983" x1="393.515" y1="124.235" x2="392.388" y2="136.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_993_5983" x1="22.5202" y1="119.214" x2="16.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_993_5983" x1="50.5202" y1="119.214" x2="44.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_993_5983" x1="78.5202" y1="119.214" x2="72.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_993_5983" x1="117.406" y1="126.25" x2="103.679" y2="128.103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_993_5983" x1="306.524" y1="119.214" x2="301.269" y2="148.046" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_993_5983" x1="205.645" y1="119.214" x2="204.757" y2="148.978" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_993_5983" x1="278.406" y1="76.25" x2="264.679" y2="78.1028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_993_5983" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_5983">
+<rect width="444" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/keyboard-shortcuts-light.svg
+++ b/docs/public/illustrations/keyboard-shortcuts-light.svg
@@ -0,0 +1,172 @@
+<svg width="444" height="160" viewBox="0 0 444 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_963_1452)">
+<rect x="11" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="39" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="67" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="95" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="123" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="151" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="179" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="207" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="235" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="263" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="291" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="320" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="348" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="376" y="29" width="23" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="404" y="29" width="29" height="20" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="325" y="128" width="23" height="21" rx="2" fill="url(#paint0_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="353" y="140" width="23.7037" height="9" rx="2" fill="url(#paint1_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="381.642" y="140" width="23.7037" height="9" rx="2" fill="url(#paint2_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="409.296" y="140" width="23.7037" height="9" rx="2" fill="url(#paint3_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="381.642" y="128" width="23.7037" height="9" rx="2" fill="url(#paint4_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="11" y="128" width="23" height="21" rx="2" fill="url(#paint5_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="39" y="128" width="23" height="21" rx="2" fill="url(#paint6_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="67" y="128" width="23" height="21" rx="2" fill="url(#paint7_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="95" y="128" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.07"/>
+<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="#CBD5E1" stroke-opacity="0.25"/>
+<rect x="95.5" y="128.5" width="22" height="20" rx="1.5" stroke="url(#paint8_linear_963_1452)" stroke-opacity="0.51"/>
+<rect x="293" y="128" width="27" height="21" rx="2" fill="url(#paint9_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="123" y="128" width="165" height="21" rx="2" fill="url(#paint10_linear_963_1452)" fill-opacity="0.22"/>
+<rect x="327" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="299" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="271" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="243" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="215" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="187" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="159" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="131" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="103" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="75" y="103" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="355" y="103" width="78" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="11" y="103" width="59" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="393" y="53" width="40" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="365" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="337" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="309" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="281" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="253" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="225" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="197" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="169" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="141" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="113" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="85" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="57" y="53" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="11" y="53" width="41" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="60" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="88" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="116" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="144" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="172" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="200" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="228" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="256" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.07"/>
+<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="#CBD5E1" stroke-opacity="0.25"/>
+<rect x="256.5" y="78.5" width="22" height="20" rx="1.5" stroke="url(#paint11_linear_963_1452)" stroke-opacity="0.51"/>
+<rect x="284" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="312" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="340" y="78" width="23" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="368" y="78" width="65" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="11" y="78" width="44" height="21" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="11" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="39" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="67" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="95" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="123" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="151" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="179" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="207" y="10" width="24" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="236" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="264" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="292" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="320" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="348" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="376" y="10" width="23" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<rect x="404" y="10" width="29" height="15" rx="2" fill="#CBD5E1" fill-opacity="0.22"/>
+<path d="M264 94V83H265.383V87.9814L270.189 83H271.934L267.654 87.3843L272 94H270.321L266.667 88.4057L265.383 89.71V94H264Z" fill="#94A3B8"/>
+<path d="M109.75 139.5H108.5V137.5H109.75C110.195 137.5 110.63 137.368 111 137.121C111.37 136.874 111.658 136.522 111.829 136.111C111.999 135.7 112.044 135.248 111.957 134.811C111.87 134.375 111.656 133.974 111.341 133.659C111.026 133.344 110.625 133.13 110.189 133.043C109.752 132.956 109.3 133.001 108.889 133.171C108.478 133.342 108.126 133.63 107.879 134C107.632 134.37 107.5 134.805 107.5 135.25V136.5H105.5V135.25C105.5 134.805 105.368 134.37 105.121 134C104.874 133.63 104.522 133.342 104.111 133.171C103.7 133.001 103.248 132.956 102.811 133.043C102.375 133.13 101.974 133.344 101.659 133.659C101.344 133.974 101.13 134.375 101.043 134.811C100.956 135.248 101.001 135.7 101.171 136.111C101.342 136.522 101.63 136.874 102 137.121C102.37 137.368 102.805 137.5 103.25 137.5H104.5V139.5H103.25C102.805 139.5 102.37 139.632 102 139.879C101.63 140.126 101.342 140.478 101.171 140.889C101.001 141.3 100.956 141.752 101.043 142.189C101.13 142.625 101.344 143.026 101.659 143.341C101.974 143.656 102.375 143.87 102.811 143.957C103.248 144.044 103.7 143.999 104.111 143.829C104.522 143.658 104.874 143.37 105.121 143C105.368 142.63 105.5 142.195 105.5 141.75V140.5H107.5V141.75C107.5 142.195 107.632 142.63 107.879 143C108.126 143.37 108.478 143.658 108.889 143.829C109.3 143.999 109.752 144.044 110.189 143.957C110.625 143.87 111.026 143.656 111.341 143.341C111.656 143.026 111.87 142.625 111.957 142.189C112.044 141.752 111.999 141.3 111.829 140.889C111.658 140.478 111.37 140.126 111 139.879C110.63 139.632 110.195 139.5 109.75 139.5ZM108.5 135.25C108.5 135.003 108.573 134.761 108.711 134.556C108.848 134.35 109.043 134.19 109.272 134.095C109.5 134.001 109.751 133.976 109.994 134.024C110.236 134.072 110.459 134.191 110.634 134.366C110.809 134.541 110.928 134.764 110.976 135.006C111.024 135.249 110.999 135.5 110.905 135.728C110.81 135.957 110.65 136.152 110.444 136.289C110.239 136.427 109.997 136.5 109.75 136.5H108.5V135.25ZM102 135.25C102 134.918 102.132 134.601 102.366 134.366C102.601 134.132 102.918 134 103.25 134C103.582 134 103.899 134.132 104.134 134.366C104.368 134.601 104.5 134.918 104.5 135.25V136.5H103.25C102.919 136.498 102.602 136.366 102.368 136.132C102.134 135.898 102.002 135.581 102 135.25ZM104.5 141.75C104.5 141.997 104.427 142.239 104.289 142.444C104.152 142.65 103.957 142.81 103.728 142.905C103.5 142.999 103.249 143.024 103.006 142.976C102.764 142.928 102.541 142.809 102.366 142.634C102.191 142.459 102.072 142.236 102.024 141.994C101.976 141.751 102.001 141.5 102.095 141.272C102.19 141.043 102.35 140.848 102.556 140.711C102.761 140.573 103.003 140.5 103.25 140.5H104.5V141.75ZM105.5 137.5H107.5V139.5H105.5V137.5ZM109.75 143C109.419 142.998 109.102 142.866 108.868 142.632C108.634 142.398 108.502 142.081 108.5 141.75V140.5H109.75C110.082 140.5 110.399 140.632 110.634 140.866C110.868 141.101 111 141.418 111 141.75C111 142.082 110.868 142.399 110.634 142.634C110.399 142.868 110.082 143 109.75 143Z" fill="#94A3B8"/>
+<rect x="0.5" y="0.5" width="443" height="159" rx="7.5" stroke="url(#paint12_linear_963_1452)" stroke-opacity="0.8"/>
+<g filter="url(#filter0_f_963_1452)">
+<rect x="113.809" y="113" width="24" height="32" transform="rotate(36 113.809 113)" fill="url(#paint13_radial_963_1452)"/>
+</g>
+<g filter="url(#filter1_f_963_1452)">
+<rect x="274.809" y="63" width="24" height="32" transform="rotate(36 274.809 63)" fill="url(#paint14_radial_963_1452)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_963_1452" x="75" y="93" width="78.2256" height="79.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_963_1452"/>
+</filter>
+<filter id="filter1_f_963_1452" x="236" y="43" width="78.2256" height="79.9954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_963_1452"/>
+</filter>
+<linearGradient id="paint0_linear_963_1452" x1="336.52" y1="119.214" x2="330.425" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_963_1452" x1="364.873" y1="136.235" x2="363.746" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_963_1452" x1="393.515" y1="136.235" x2="392.388" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_963_1452" x1="421.169" y1="136.235" x2="420.042" y2="148.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_963_1452" x1="393.515" y1="124.235" x2="392.388" y2="136.902" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_963_1452" x1="22.5202" y1="119.214" x2="16.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_963_1452" x1="50.5202" y1="119.214" x2="44.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_963_1452" x1="78.5202" y1="119.214" x2="72.4252" y2="147.7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_963_1452" x1="117.406" y1="126.25" x2="103.679" y2="128.103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_963_1452" x1="306.524" y1="119.214" x2="301.269" y2="148.046" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_963_1452" x1="205.645" y1="119.214" x2="204.757" y2="148.978" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_963_1452" x1="278.406" y1="76.25" x2="264.679" y2="78.1028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_963_1452" x1="222" y1="0" x2="222" y2="88.5496" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint13_radial_963_1452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(125.809 129) rotate(90) scale(16 12)">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_963_1452" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.809 79) rotate(90) scale(16 12)">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_963_1452">
+<rect width="444" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/layout-dark.svg
+++ b/docs/public/illustrations/layout-dark.svg
@@ -0,0 +1,76 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2547)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2547)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2547)"/>
+<g clip-path="url(#clip1_993_2547)">
+<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="url(#paint2_linear_993_2547)" fill-opacity="0.21"/>
+<g clip-path="url(#clip2_993_2547)">
+<path d="M-94.3474 179.245L86.5752 -8.10548M-89.1113 179.154L91.8113 -8.19687M-83.8752 179.063L97.0474 -8.28827M-78.6391 178.971L102.284 -8.37967M-73.4029 178.88L107.52 -8.47106M-68.1668 178.788L112.756 -8.56246M-62.9307 178.697L117.992 -8.65386M-57.6946 178.606L123.228 -8.74525M-52.4585 178.514L128.464 -8.83665M-47.2224 178.423L133.7 -8.92805M-41.9863 178.331L138.936 -9.01944M-36.7501 178.24L144.172 -9.11084M-31.514 178.149L149.409 -9.20224M-26.2779 178.057L154.645 -9.29363M-21.0418 177.966L159.881 -9.38503M-15.8057 177.874L165.117 -9.47643M-10.5696 177.783L170.353 -9.56782M-5.33344 177.692L175.589 -9.65922M-0.0973381 177.6L180.825 -9.75062M5.13878 177.509L186.061 -9.84201M10.3749 177.417L191.297 -9.93341M15.611 177.326L196.534 -10.0248M20.8471 177.235L201.77 -10.1162M26.0832 177.143L207.006 -10.2076M31.3194 177.052L212.242 -10.299M36.5555 176.96L217.478 -10.3904M41.7916 176.869L222.714 -10.4818M47.0277 176.778L227.95 -10.5732M52.2638 176.686L233.186 -10.6646M57.4999 176.595L238.423 -10.756M62.736 176.503L243.659 -10.8474M67.9722 176.412L248.895 -10.9388M73.2083 176.321L254.131 -11.0302M78.4444 176.229L259.367 -11.1216M83.6805 176.138L264.603 -11.213M88.9166 176.046L269.839 -11.3044M94.1527 175.955L275.075 -11.3958M99.3888 175.864L280.311 -11.4872M104.625 175.772L285.548 -11.5786M109.861 175.681L290.784 -11.6699M115.097 175.589L296.02 -11.7613M120.333 175.498L301.256 -11.8527M125.569 175.407L306.492 -11.9441M130.806 175.315L311.728 -12.0355M136.042 175.224L316.964 -12.1269M141.278 175.133L322.2 -12.2183M146.514 175.041L327.436 -12.3097M151.75 174.95L332.673 -12.4011M156.986 174.858L337.909 -12.4925M162.222 174.767L343.145 -12.5839M167.458 174.676L348.381 -12.6753M172.694 174.584L353.617 -12.7667M177.931 174.493L358.853 -12.8581M183.167 174.401L364.089 -12.9495M188.403 174.31L369.325 -13.0409M193.639 174.219L374.562 -13.1323M198.875 174.127L379.798 -13.2237M204.111 174.036L385.034 -13.3151M209.347 173.944L390.27 -13.4065M214.583 173.853L395.506 -13.4979M219.819 173.762L400.742 -13.5893M225.056 173.67L405.978 -13.6807M230.292 173.579L411.214 -13.7721M235.528 173.487L416.45 -13.8635M240.764 173.396L421.687 -13.9549M246 173.305L426.923 -14.0463M251.236 173.213L432.159 -14.1377M256.472 173.122L437.395 -14.2291" stroke="url(#paint3_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="32.15" width="198.7" height="19.7" rx="1.85" stroke="#475569" stroke-opacity="0.9" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+<rect x="56.7998" y="60" width="215" height="0.5" fill="#475569" fill-opacity="0.2"/>
+<g clip-path="url(#clip3_993_2547)">
+<path d="M-94.3474 215.745L86.5752 28.3945M-89.1113 215.654L91.8113 28.3031M-83.8752 215.563L97.0474 28.2117M-78.6391 215.471L102.284 28.1203M-73.4029 215.38L107.52 28.0289M-68.1668 215.288L112.756 27.9375M-62.9307 215.197L117.992 27.8461M-57.6946 215.106L123.228 27.7547M-52.4585 215.014L128.464 27.6634M-47.2224 214.923L133.7 27.572M-41.9863 214.831L138.936 27.4806M-36.7501 214.74L144.172 27.3892M-31.514 214.649L149.409 27.2978M-26.2779 214.557L154.645 27.2064M-21.0418 214.466L159.881 27.115M-15.8057 214.374L165.117 27.0236M-10.5696 214.283L170.353 26.9322M-5.33344 214.192L175.589 26.8408M-0.0973381 214.1L180.825 26.7494M5.13878 214.009L186.061 26.658M10.3749 213.917L191.297 26.5666M15.611 213.826L196.534 26.4752M20.8471 213.735L201.77 26.3838M26.0832 213.643L207.006 26.2924M31.3194 213.552L212.242 26.201M36.5555 213.46L217.478 26.1096M41.7916 213.369L222.714 26.0182M47.0277 213.278L227.95 25.9268M52.2638 213.186L233.186 25.8354M57.4999 213.095L238.423 25.744M62.736 213.003L243.659 25.6526M67.9722 212.912L248.895 25.5612M73.2083 212.821L254.131 25.4698M78.4444 212.729L259.367 25.3784M83.6805 212.638L264.603 25.287M88.9166 212.546L269.839 25.1956M94.1527 212.455L275.075 25.1042M99.3888 212.364L280.311 25.0128M104.625 212.272L285.548 24.9214M109.861 212.181L290.784 24.8301M115.097 212.089L296.02 24.7387M120.333 211.998L301.256 24.6473M125.569 211.907L306.492 24.5559M130.806 211.815L311.728 24.4645M136.042 211.724L316.964 24.3731M141.278 211.633L322.2 24.2817M146.514 211.541L327.436 24.1903M151.75 211.45L332.673 24.0989M156.986 211.358L337.909 24.0075M162.222 211.267L343.145 23.9161M167.458 211.176L348.381 23.8247M172.694 211.084L353.617 23.7333M177.931 210.993L358.853 23.6419M183.167 210.901L364.089 23.5505M188.403 210.81L369.325 23.4591M193.639 210.719L374.562 23.3677M198.875 210.627L379.798 23.2763M204.111 210.536L385.034 23.1849M209.347 210.444L390.27 23.0935M214.583 210.353L395.506 23.0021M219.819 210.262L400.742 22.9107M225.056 210.17L405.978 22.8193M230.292 210.079L411.214 22.7279M235.528 209.987L416.45 22.6365M240.764 209.896L421.687 22.5451M246 209.805L426.923 22.4537M251.236 209.713L432.159 22.3623M256.472 209.622L437.395 22.2709" stroke="url(#paint4_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="68.65" width="198.7" height="50.7" rx="1.85" stroke="url(#paint5_linear_993_2547)" stroke-opacity="0.9" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+<rect opacity="0.5" x="56.7998" y="127.5" width="215" height="0.5" fill="#475569" fill-opacity="0.2"/>
+<g clip-path="url(#clip4_993_2547)">
+<path d="M-94.3474 283.245L86.5752 95.8945M-89.1113 283.154L91.8113 95.8031M-83.8752 283.063L97.0474 95.7117M-78.6391 282.971L102.284 95.6203M-73.4029 282.88L107.52 95.5289M-68.1668 282.788L112.756 95.4375M-62.9307 282.697L117.992 95.3461M-57.6946 282.606L123.228 95.2547M-52.4585 282.514L128.464 95.1634M-47.2224 282.423L133.7 95.072M-41.9863 282.331L138.936 94.9806M-36.7501 282.24L144.172 94.8892M-31.514 282.149L149.409 94.7978M-26.2779 282.057L154.645 94.7064M-21.0418 281.966L159.881 94.615M-15.8057 281.874L165.117 94.5236M-10.5696 281.783L170.353 94.4322M-5.33344 281.692L175.589 94.3408M-0.0973381 281.6L180.825 94.2494M5.13878 281.509L186.061 94.158M10.3749 281.417L191.297 94.0666M15.611 281.326L196.534 93.9752M20.8471 281.235L201.77 93.8838M26.0832 281.143L207.006 93.7924M31.3194 281.052L212.242 93.701M36.5555 280.96L217.478 93.6096M41.7916 280.869L222.714 93.5182M47.0277 280.778L227.95 93.4268M52.2638 280.686L233.186 93.3354M57.4999 280.595L238.423 93.244M62.736 280.503L243.659 93.1526M67.9722 280.412L248.895 93.0612M73.2083 280.321L254.131 92.9698M78.4444 280.229L259.367 92.8784M83.6805 280.138L264.603 92.787M88.9166 280.046L269.839 92.6956M94.1527 279.955L275.075 92.6042M99.3888 279.864L280.311 92.5128M104.625 279.772L285.548 92.4214M109.861 279.681L290.784 92.3301M115.097 279.589L296.02 92.2387M120.333 279.498L301.256 92.1473M125.569 279.407L306.492 92.0559M130.806 279.315L311.728 91.9645M136.042 279.224L316.964 91.8731M141.278 279.133L322.2 91.7817M146.514 279.041L327.436 91.6903M151.75 278.95L332.673 91.5989M156.986 278.858L337.909 91.5075M162.222 278.767L343.145 91.4161M167.458 278.676L348.381 91.3247M172.694 278.584L353.617 91.2333M177.931 278.493L358.853 91.1419M183.167 278.401L364.089 91.0505M188.403 278.31L369.325 90.9591M193.639 278.219L374.562 90.8677M198.875 278.127L379.798 90.7763M204.111 278.036L385.034 90.6849M209.347 277.944L390.27 90.5935M214.583 277.853L395.506 90.5021M219.819 277.762L400.742 90.4107M225.056 277.67L405.978 90.3193M230.292 277.579L411.214 90.2279M235.528 277.487L416.45 90.1365M240.764 277.396L421.687 90.0451M246 277.305L426.923 89.9537M251.236 277.213L432.159 89.8623M256.472 277.122L437.395 89.7709" stroke="url(#paint6_linear_993_2547)" stroke-opacity="0.2" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="136.15" width="198.7" height="19.7" rx="1.85" stroke="url(#paint7_linear_993_2547)" stroke-opacity="0.4" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+</g>
+<rect x="57.2998" y="24.5" width="214" height="139" rx="3.5" stroke="url(#paint8_linear_993_2547)" stroke-opacity="0.42"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2547" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2547" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2547" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_2547" x1="166.463" y1="23.2012" x2="166.491" y2="86.5041" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_993_2547" x1="166.629" y1="90.8018" x2="166.425" y2="130.157" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_993_2547" x1="164.3" y1="68.5" x2="164.3" y2="119.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0.16"/>
+</linearGradient>
+<linearGradient id="paint6_linear_993_2547" x1="166.463" y1="127.201" x2="166.491" y2="190.504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_993_2547" x1="164.3" y1="136" x2="164" y2="154.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_993_2547" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2547">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2547">
+<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="white"/>
+</clipPath>
+<clipPath id="clip2_993_2547">
+<rect x="64.7998" y="32" width="199" height="20" rx="2" fill="white"/>
+</clipPath>
+<clipPath id="clip3_993_2547">
+<rect x="64.7998" y="68.5" width="199" height="51" rx="2" fill="white"/>
+</clipPath>
+<clipPath id="clip4_993_2547">
+<rect x="64.7998" y="136" width="199" height="20" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/layout-light.svg
+++ b/docs/public/illustrations/layout-light.svg
@@ -0,0 +1,71 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_3064)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3064)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3064)"/>
+<g clip-path="url(#clip1_993_3064)">
+<g clip-path="url(#clip2_993_3064)">
+<path d="M-94.3474 179.245L86.5752 -8.10548M-89.1113 179.154L91.8113 -8.19687M-83.8752 179.063L97.0474 -8.28827M-78.6391 178.971L102.284 -8.37967M-73.4029 178.88L107.52 -8.47106M-68.1668 178.788L112.756 -8.56246M-62.9307 178.697L117.992 -8.65386M-57.6946 178.606L123.228 -8.74525M-52.4585 178.514L128.464 -8.83665M-47.2224 178.423L133.7 -8.92805M-41.9863 178.331L138.936 -9.01944M-36.7501 178.24L144.172 -9.11084M-31.514 178.149L149.409 -9.20224M-26.2779 178.057L154.645 -9.29363M-21.0418 177.966L159.881 -9.38503M-15.8057 177.874L165.117 -9.47643M-10.5696 177.783L170.353 -9.56782M-5.33344 177.692L175.589 -9.65922M-0.0973381 177.6L180.825 -9.75062M5.13878 177.509L186.061 -9.84201M10.3749 177.417L191.297 -9.93341M15.611 177.326L196.534 -10.0248M20.8471 177.235L201.77 -10.1162M26.0832 177.143L207.006 -10.2076M31.3194 177.052L212.242 -10.299M36.5555 176.96L217.478 -10.3904M41.7916 176.869L222.714 -10.4818M47.0277 176.778L227.95 -10.5732M52.2638 176.686L233.186 -10.6646M57.4999 176.595L238.423 -10.756M62.736 176.503L243.659 -10.8474M67.9722 176.412L248.895 -10.9388M73.2083 176.321L254.131 -11.0302M78.4444 176.229L259.367 -11.1216M83.6805 176.138L264.603 -11.213M88.9166 176.046L269.839 -11.3044M94.1527 175.955L275.075 -11.3958M99.3888 175.864L280.311 -11.4872M104.625 175.772L285.548 -11.5786M109.861 175.681L290.784 -11.6699M115.097 175.589L296.02 -11.7613M120.333 175.498L301.256 -11.8527M125.569 175.407L306.492 -11.9441M130.806 175.315L311.728 -12.0355M136.042 175.224L316.964 -12.1269M141.278 175.133L322.2 -12.2183M146.514 175.041L327.436 -12.3097M151.75 174.95L332.673 -12.4011M156.986 174.858L337.909 -12.4925M162.222 174.767L343.145 -12.5839M167.458 174.676L348.381 -12.6753M172.694 174.584L353.617 -12.7667M177.931 174.493L358.853 -12.8581M183.167 174.401L364.089 -12.9495M188.403 174.31L369.325 -13.0409M193.639 174.219L374.562 -13.1323M198.875 174.127L379.798 -13.2237M204.111 174.036L385.034 -13.3151M209.347 173.944L390.27 -13.4065M214.583 173.853L395.506 -13.4979M219.819 173.762L400.742 -13.5893M225.056 173.67L405.978 -13.6807M230.292 173.579L411.214 -13.7721M235.528 173.487L416.45 -13.8635M240.764 173.396L421.687 -13.9549M246 173.305L426.923 -14.0463M251.236 173.213L432.159 -14.1377M256.472 173.122L437.395 -14.2291" stroke="url(#paint2_linear_993_3064)" stroke-opacity="0.5" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="32.15" width="198.7" height="19.7" rx="1.85" stroke="#CBD5E1" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+<rect x="56.7998" y="60" width="215" height="0.5" fill="#CBD5E1" fill-opacity="0.32"/>
+<g clip-path="url(#clip3_993_3064)">
+<path d="M-94.3474 215.745L86.5752 28.3945M-89.1113 215.654L91.8113 28.3031M-83.8752 215.563L97.0474 28.2117M-78.6391 215.471L102.284 28.1203M-73.4029 215.38L107.52 28.0289M-68.1668 215.288L112.756 27.9375M-62.9307 215.197L117.992 27.8461M-57.6946 215.106L123.228 27.7547M-52.4585 215.014L128.464 27.6634M-47.2224 214.923L133.7 27.572M-41.9863 214.831L138.936 27.4806M-36.7501 214.74L144.172 27.3892M-31.514 214.649L149.409 27.2978M-26.2779 214.557L154.645 27.2064M-21.0418 214.466L159.881 27.115M-15.8057 214.374L165.117 27.0236M-10.5696 214.283L170.353 26.9322M-5.33344 214.192L175.589 26.8408M-0.0973381 214.1L180.825 26.7494M5.13878 214.009L186.061 26.658M10.3749 213.917L191.297 26.5666M15.611 213.826L196.534 26.4752M20.8471 213.735L201.77 26.3838M26.0832 213.643L207.006 26.2924M31.3194 213.552L212.242 26.201M36.5555 213.46L217.478 26.1096M41.7916 213.369L222.714 26.0182M47.0277 213.278L227.95 25.9268M52.2638 213.186L233.186 25.8354M57.4999 213.095L238.423 25.744M62.736 213.003L243.659 25.6526M67.9722 212.912L248.895 25.5612M73.2083 212.821L254.131 25.4698M78.4444 212.729L259.367 25.3784M83.6805 212.638L264.603 25.287M88.9166 212.546L269.839 25.1956M94.1527 212.455L275.075 25.1042M99.3888 212.364L280.311 25.0128M104.625 212.272L285.548 24.9214M109.861 212.181L290.784 24.8301M115.097 212.089L296.02 24.7387M120.333 211.998L301.256 24.6473M125.569 211.907L306.492 24.5559M130.806 211.815L311.728 24.4645M136.042 211.724L316.964 24.3731M141.278 211.633L322.2 24.2817M146.514 211.541L327.436 24.1903M151.75 211.45L332.673 24.0989M156.986 211.358L337.909 24.0075M162.222 211.267L343.145 23.9161M167.458 211.176L348.381 23.8247M172.694 211.084L353.617 23.7333M177.931 210.993L358.853 23.6419M183.167 210.901L364.089 23.5505M188.403 210.81L369.325 23.4591M193.639 210.719L374.562 23.3677M198.875 210.627L379.798 23.2763M204.111 210.536L385.034 23.1849M209.347 210.444L390.27 23.0935M214.583 210.353L395.506 23.0021M219.819 210.262L400.742 22.9107M225.056 210.17L405.978 22.8193M230.292 210.079L411.214 22.7279M235.528 209.987L416.45 22.6365M240.764 209.896L421.687 22.5451M246 209.805L426.923 22.4537M251.236 209.713L432.159 22.3623M256.472 209.622L437.395 22.2709" stroke="url(#paint3_linear_993_3064)" stroke-opacity="0.5" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="68.65" width="198.7" height="50.7" rx="1.85" stroke="url(#paint4_linear_993_3064)" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+<rect opacity="0.5" x="56.7998" y="127.5" width="215" height="0.5" fill="#CBD5E1" fill-opacity="0.32"/>
+<g clip-path="url(#clip4_993_3064)">
+<path d="M-94.3474 283.245L86.5752 95.8945M-89.1113 283.154L91.8113 95.8031M-83.8752 283.063L97.0474 95.7117M-78.6391 282.971L102.284 95.6203M-73.4029 282.88L107.52 95.5289M-68.1668 282.788L112.756 95.4375M-62.9307 282.697L117.992 95.3461M-57.6946 282.606L123.228 95.2547M-52.4585 282.514L128.464 95.1633M-47.2224 282.423L133.7 95.0719M-41.9863 282.331L138.936 94.9805M-36.7501 282.24L144.172 94.8891M-31.514 282.149L149.409 94.7977M-26.2779 282.057L154.645 94.7063M-21.0418 281.966L159.881 94.6149M-15.8057 281.874L165.117 94.5235M-10.5696 281.783L170.353 94.4321M-5.33344 281.692L175.589 94.3407M-0.0973381 281.6L180.825 94.2493M5.13878 281.509L186.061 94.1579M10.3749 281.417L191.297 94.0665M15.611 281.326L196.534 93.9751M20.8471 281.235L201.77 93.8837M26.0832 281.143L207.006 93.7923M31.3194 281.052L212.242 93.7009M36.5555 280.96L217.478 93.6095M41.7916 280.869L222.714 93.5181M47.0277 280.778L227.95 93.4268M52.2638 280.686L233.186 93.3354M57.4999 280.595L238.423 93.244M62.736 280.503L243.659 93.1526M67.9722 280.412L248.895 93.0612M73.2083 280.321L254.131 92.9698M78.4444 280.229L259.367 92.8784M83.6805 280.138L264.603 92.787M88.9166 280.046L269.839 92.6956M94.1527 279.955L275.075 92.6042M99.3888 279.864L280.311 92.5128M104.625 279.772L285.548 92.4214M109.861 279.681L290.784 92.33M115.097 279.589L296.02 92.2386M120.333 279.498L301.256 92.1472M125.569 279.407L306.492 92.0558M130.806 279.315L311.728 91.9644M136.042 279.224L316.964 91.873M141.278 279.132L322.2 91.7816M146.514 279.041L327.436 91.6902M151.75 278.95L332.673 91.5988M156.986 278.858L337.909 91.5074M162.222 278.767L343.145 91.416M167.458 278.675L348.381 91.3246M172.694 278.584L353.617 91.2332M177.931 278.493L358.853 91.1418M183.167 278.401L364.089 91.0504M188.403 278.31L369.325 90.959M193.639 278.218L374.562 90.8676M198.875 278.127L379.798 90.7762M204.111 278.036L385.034 90.6848M209.347 277.944L390.27 90.5935M214.583 277.853L395.506 90.5021M219.819 277.761L400.742 90.4107M225.056 277.67L405.978 90.3193M230.292 277.579L411.214 90.2279M235.528 277.487L416.45 90.1365M240.764 277.396L421.687 90.0451M246 277.305L426.923 89.9537M251.236 277.213L432.159 89.8623M256.472 277.122L437.395 89.7709" stroke="url(#paint5_linear_993_3064)" stroke-opacity="0.4" stroke-width="0.436409"/>
+</g>
+<rect x="64.9498" y="136.15" width="198.7" height="19.7" rx="1.85" stroke="url(#paint6_linear_993_3064)" stroke-opacity="0.7" stroke-width="0.3" stroke-dasharray="1.37 1.37"/>
+</g>
+<rect x="57.2998" y="24.5" width="214" height="139" rx="3.5" stroke="url(#paint7_linear_993_3064)" stroke-opacity="0.7"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_3064" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_3064" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_3064" x1="166.463" y1="23.2012" x2="166.491" y2="86.5041" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_3064" x1="166.629" y1="90.8018" x2="166.425" y2="130.157" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_993_3064" x1="164.3" y1="68.5" x2="164.3" y2="119.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0.16"/>
+</linearGradient>
+<linearGradient id="paint5_linear_993_3064" x1="166.463" y1="127.201" x2="166.491" y2="190.504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_993_3064" x1="164.3" y1="136" x2="164" y2="154.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_993_3064" x1="164.3" y1="24" x2="164.3" y2="164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_3064">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_3064">
+<rect x="56.7998" y="24" width="215" height="140" rx="4" fill="white"/>
+</clipPath>
+<clipPath id="clip2_993_3064">
+<rect x="64.7998" y="32" width="199" height="20" rx="2" fill="white"/>
+</clipPath>
+<clipPath id="clip3_993_3064">
+<rect x="64.7998" y="68.5" width="199" height="51" rx="2" fill="white"/>
+</clipPath>
+<clipPath id="clip4_993_3064">
+<rect x="64.7998" y="136" width="199" height="20" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/navigation-dark.svg
+++ b/docs/public/illustrations/navigation-dark.svg
@@ -0,0 +1,65 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2485)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2485)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2485)"/>
+<rect x="36" y="24" width="256" height="112" rx="3" fill="url(#paint2_linear_993_2485)" fill-opacity="0.26"/>
+<g clip-path="url(#clip1_993_2485)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0499 33.5749C45.683 33.5749 44.5749 34.683 44.5749 36.0499C44.5749 37.4168 45.683 38.5249 47.0499 38.5249C47.7334 38.5249 48.3517 38.2482 48.8 37.8C49.2482 37.3517 49.5249 36.7334 49.5249 36.0499C49.5249 34.683 48.4168 33.5749 47.0499 33.5749ZM43.8999 36.0499C43.8999 34.3102 45.3102 32.8999 47.0499 32.8999C48.7896 32.8999 50.1999 34.3102 50.1999 36.0499C50.1999 36.798 49.9388 37.4856 49.5032 38.0259L51.001 39.5237C51.1328 39.6555 51.1328 39.8692 51.001 40.001C50.8692 40.1328 50.6555 40.1328 50.5237 40.001L49.0259 38.5032C48.4856 38.9388 47.798 39.1999 47.0499 39.1999C45.3102 39.1999 43.8999 37.7896 43.8999 36.0499Z" fill="#475569" fill-opacity="0.88"/>
+</g>
+<line x1="57.8506" y1="36.5369" x2="77.8506" y2="36.5369" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<path d="M292 47.5H36V48.5H292V47.5Z" fill="#475569" fill-opacity="0.2" mask="url(#path-3-inside-1_993_2485)"/>
+<line x1="57" y1="59" x2="102" y2="59" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="56" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="56" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M49.3125 60.3438V59.3594C49.3125 59.0237 49.1792 58.7018 48.9418 58.4644C48.7045 58.2271 48.3825 58.0938 48.0469 58.0938H47.4844C47.3725 58.0938 47.2652 58.0493 47.1861 57.9702C47.1069 57.8911 47.0625 57.7838 47.0625 57.6719V57.1094C47.0625 56.7737 46.9292 56.4518 46.6918 56.2144C46.4545 55.9771 46.1325 55.8438 45.7969 55.8438H45.0938M46.5 59.2188V61.4688M47.625 60.3438H45.375M45.9375 55.8438H44.1094C43.8765 55.8438 43.6875 56.0328 43.6875 56.2656V62.7344C43.6875 62.9672 43.8765 63.1562 44.1094 63.1562H48.8906C49.1235 63.1562 49.3125 62.9672 49.3125 62.7344V59.2188C49.3125 58.3236 48.9569 57.4652 48.324 56.8323C47.691 56.1993 46.8326 55.8438 45.9375 55.8438Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="72" x2="142" y2="72" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="69" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="69" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M46.5 72.2061V74.4561M47.625 73.3311H45.375M46.8975 70.6348L46.1025 69.8398C46.0503 69.7875 45.9883 69.746 45.92 69.7177C45.8517 69.6894 45.7785 69.6748 45.7046 69.6748H43.6875C43.4637 69.6748 43.2491 69.7637 43.0909 69.9219C42.9326 70.0802 42.8438 70.2948 42.8438 70.5186V75.0186C42.8438 75.2423 42.9326 75.4569 43.0909 75.6152C43.2491 75.7734 43.4637 75.8623 43.6875 75.8623H49.3125C49.5363 75.8623 49.7509 75.7734 49.9091 75.6152C50.0674 75.4569 50.1562 75.2423 50.1562 75.0186V71.6436C50.1562 71.4198 50.0674 71.2052 49.9091 71.0469C49.7509 70.8887 49.5363 70.7998 49.3125 70.7998H47.2954C47.1462 70.7997 47.0029 70.7403 46.8975 70.6348Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="85" x2="121" y2="85" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="82" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="82" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M43.9688 84.0938H49.5938M43.4062 86.9062H49.0312M48.3563 81.8438L46.8938 89.1562M46.1062 81.8438L44.6438 89.1562" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="98" x2="203" y2="98" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="95" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="95" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<g clip-path="url(#clip2_993_2485)">
+<path d="M45.588 95.125H43.9688C43.745 95.125 43.5304 95.2139 43.3721 95.3721C43.2139 95.5304 43.125 95.745 43.125 95.9688V97.588C43.125 97.8119 43.2139 98.0268 43.3721 98.1846L46.965 101.777C47.2271 102.04 47.6325 102.104 47.9426 101.901C48.7232 101.39 49.39 100.723 49.9012 99.9426C50.1045 99.6325 50.0396 99.2271 49.7775 98.965L46.185 95.3725C46.1066 95.294 46.0136 95.2318 45.9111 95.1893C45.8087 95.1469 45.6989 95.125 45.588 95.125Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.25 96.25H44.253V96.253H44.25V96.25Z" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.5">
+<line x1="57" y1="111" x2="171" y2="111" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="108" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="108" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M45.375 110.094H44.8125C44.5887 110.094 44.3741 110.183 44.2159 110.341C44.0576 110.499 43.9688 110.714 43.9688 110.938V114.312C43.9688 114.536 44.0576 114.751 44.2159 114.909C44.3741 115.067 44.5887 115.156 44.8125 115.156H48.1875C48.4113 115.156 48.6259 115.067 48.7841 114.909C48.9424 114.751 49.0312 114.536 49.0312 114.312V110.938C49.0312 110.714 48.9424 110.499 48.7841 110.341C48.6259 110.183 48.4113 110.094 48.1875 110.094H47.625M45.375 111.5L46.5 112.625M46.5 112.625L47.625 111.5M46.5 112.625V107.844" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.32">
+<line x1="57" y1="124" x2="109" y2="124" stroke="#475569" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="121" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<rect x="271" y="121" width="7.00001" height="7" rx="2" fill="#475569" fill-opacity="0.3"/>
+<path d="M44.25 125.062V121.406M44.25 125.062C44.3992 125.062 44.5423 125.122 44.6477 125.227C44.7532 125.333 44.8125 125.476 44.8125 125.625C44.8125 125.774 44.7532 125.917 44.6477 126.023C44.5423 126.128 44.3992 126.188 44.25 126.188M44.25 125.062C44.1008 125.062 43.9577 125.122 43.8523 125.227C43.7468 125.333 43.6875 125.476 43.6875 125.625C43.6875 125.774 43.7468 125.917 43.8523 126.023C43.9577 126.128 44.1008 126.188 44.25 126.188M44.25 126.188V127.594M48.75 125.062V121.406M48.75 125.062C48.8992 125.062 49.0423 125.122 49.1477 125.227C49.2532 125.333 49.3125 125.476 49.3125 125.625C49.3125 125.774 49.2532 125.917 49.1477 126.023C49.0423 126.128 48.8992 126.188 48.75 126.188M48.75 125.062C48.6008 125.062 48.4577 125.122 48.3523 125.227C48.2468 125.333 48.1875 125.476 48.1875 125.625C48.1875 125.774 48.2468 125.917 48.3523 126.023C48.4577 126.128 48.6008 126.188 48.75 126.188M48.75 126.188V127.594M46.5 122.812V121.406M46.5 122.812C46.6492 122.812 46.7923 122.872 46.8977 122.977C47.0032 123.083 47.0625 123.226 47.0625 123.375C47.0625 123.524 47.0032 123.667 46.8977 123.773C46.7923 123.878 46.6492 123.938 46.5 123.938M46.5 122.812C46.3508 122.812 46.2077 122.872 46.1023 122.977C45.9968 123.083 45.9375 123.226 45.9375 123.375C45.9375 123.524 45.9968 123.667 46.1023 123.773C46.2077 123.878 46.3508 123.938 46.5 123.938M46.5 123.938V127.594" stroke="#475569" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2485" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2485" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2485" x1="164" y1="24" x2="164" y2="136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2485">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_2485">
+<rect width="8.99998" height="8.99998" fill="white" transform="translate(43 32)"/>
+</clipPath>
+<clipPath id="clip2_993_2485">
+<rect width="9" height="9" fill="white" transform="translate(42 94)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/navigation-light.svg
+++ b/docs/public/illustrations/navigation-light.svg
@@ -0,0 +1,65 @@
+<svg width="329" height="173" viewBox="0 0 329 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_3006)">
+<rect x="0.5" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3006)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3006)"/>
+<g clip-path="url(#clip1_993_3006)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0499 33.575C45.683 33.575 44.5749 34.6831 44.5749 36.05C44.5749 37.4169 45.683 38.525 47.0499 38.525C47.7334 38.525 48.3517 38.2484 48.8 37.8001C49.2482 37.3518 49.5249 36.7336 49.5249 36.05C49.5249 34.6831 48.4168 33.575 47.0499 33.575ZM43.8999 36.05C43.8999 34.3103 45.3102 32.9 47.0499 32.9C48.7896 32.9 50.1999 34.3103 50.1999 36.05C50.1999 36.7982 49.9388 37.4858 49.5032 38.026L51.001 39.5239C51.1328 39.6557 51.1328 39.8694 51.001 40.0012C50.8692 40.133 50.6555 40.133 50.5237 40.0012L49.0259 38.5033C48.4856 38.9389 47.798 39.2 47.0499 39.2C45.3102 39.2 43.8999 37.7897 43.8999 36.05Z" fill="#CBD5E1" fill-opacity="0.88"/>
+</g>
+<line x1="57.8506" y1="36.5369" x2="77.8506" y2="36.5369" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<path d="M292 47.5H36V48.5H292V47.5Z" fill="#CBD5E1" fill-opacity="0.32" mask="url(#path-4-inside-1_993_3006)"/>
+<line x1="57" y1="59" x2="102" y2="59" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="56" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="56" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M49.3125 60.3438V59.3594C49.3125 59.0237 49.1792 58.7018 48.9418 58.4644C48.7045 58.2271 48.3825 58.0938 48.0469 58.0938H47.4844C47.3725 58.0938 47.2652 58.0493 47.1861 57.9702C47.1069 57.8911 47.0625 57.7838 47.0625 57.6719V57.1094C47.0625 56.7737 46.9292 56.4518 46.6918 56.2144C46.4545 55.9771 46.1325 55.8438 45.7969 55.8438H45.0938M46.5 59.2188V61.4688M47.625 60.3438H45.375M45.9375 55.8438H44.1094C43.8765 55.8438 43.6875 56.0328 43.6875 56.2656V62.7344C43.6875 62.9672 43.8765 63.1562 44.1094 63.1562H48.8906C49.1235 63.1562 49.3125 62.9672 49.3125 62.7344V59.2188C49.3125 58.3236 48.9569 57.4652 48.324 56.8323C47.691 56.1993 46.8326 55.8438 45.9375 55.8438Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="72" x2="142" y2="72" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="69" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="69" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M46.5 72.2059V74.4559M47.625 73.3309H45.375M46.8975 70.6347L46.1025 69.8397C46.0503 69.7874 45.9883 69.7459 45.92 69.7176C45.8517 69.6893 45.7785 69.6747 45.7046 69.6747H43.6875C43.4637 69.6747 43.2491 69.7636 43.0909 69.9218C42.9326 70.08 42.8438 70.2947 42.8438 70.5184V75.0184C42.8438 75.2422 42.9326 75.4568 43.0909 75.6151C43.2491 75.7733 43.4637 75.8622 43.6875 75.8622H49.3125C49.5363 75.8622 49.7509 75.7733 49.9091 75.6151C50.0674 75.4568 50.1562 75.2422 50.1562 75.0184V71.6434C50.1562 71.4197 50.0674 71.205 49.9091 71.0468C49.7509 70.8886 49.5363 70.7997 49.3125 70.7997H47.2954C47.1462 70.7996 47.0029 70.7402 46.8975 70.6347Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="85" x2="121" y2="85" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="82" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="82" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M43.9688 84.0938H49.5938M43.4062 86.9062H49.0312M48.3563 81.8438L46.8938 89.1562M46.1062 81.8438L44.6438 89.1562" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="57" y1="98" x2="203" y2="98" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="95" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="95" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<g clip-path="url(#clip2_993_3006)">
+<path d="M45.588 95.125H43.9688C43.745 95.125 43.5304 95.2139 43.3721 95.3721C43.2139 95.5304 43.125 95.745 43.125 95.9688V97.588C43.125 97.8119 43.2139 98.0268 43.3721 98.1846L46.965 101.777C47.2271 102.04 47.6325 102.104 47.9426 101.901C48.7232 101.39 49.39 100.723 49.9012 99.9426C50.1045 99.6325 50.0396 99.2271 49.7775 98.965L46.185 95.3725C46.1066 95.294 46.0136 95.2318 45.9111 95.1893C45.8087 95.1469 45.6989 95.125 45.588 95.125Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.25 96.25H44.253V96.253H44.25V96.25Z" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.5">
+<line x1="57" y1="111" x2="171" y2="111" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="108" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="108" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M45.375 110.094H44.8125C44.5887 110.094 44.3741 110.183 44.2159 110.341C44.0576 110.499 43.9688 110.714 43.9688 110.938V114.312C43.9688 114.536 44.0576 114.751 44.2159 114.909C44.3741 115.067 44.5887 115.156 44.8125 115.156H48.1875C48.4113 115.156 48.6259 115.067 48.7841 114.909C48.9424 114.751 49.0312 114.536 49.0312 114.312V110.938C49.0312 110.714 48.9424 110.499 48.7841 110.341C48.6259 110.183 48.4113 110.094 48.1875 110.094H47.625M45.375 111.5L46.5 112.625M46.5 112.625L47.625 111.5M46.5 112.625V107.844" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.32">
+<line x1="57" y1="124" x2="109" y2="124" stroke="#CBD5E1" stroke-opacity="0.5" stroke-width="6" stroke-linecap="round"/>
+<rect x="279" y="121" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<rect x="271" y="121" width="7.00001" height="7" rx="2" fill="#CBD5E1" fill-opacity="0.5"/>
+<path d="M44.25 125.062V121.406M44.25 125.062C44.3992 125.062 44.5423 125.122 44.6477 125.227C44.7532 125.333 44.8125 125.476 44.8125 125.625C44.8125 125.774 44.7532 125.917 44.6477 126.023C44.5423 126.128 44.3992 126.188 44.25 126.188M44.25 125.062C44.1008 125.062 43.9577 125.122 43.8523 125.227C43.7468 125.333 43.6875 125.476 43.6875 125.625C43.6875 125.774 43.7468 125.917 43.8523 126.023C43.9577 126.128 44.1008 126.188 44.25 126.188M44.25 126.188V127.594M48.75 125.062V121.406M48.75 125.062C48.8992 125.062 49.0423 125.122 49.1477 125.227C49.2532 125.333 49.3125 125.476 49.3125 125.625C49.3125 125.774 49.2532 125.917 49.1477 126.023C49.0423 126.128 48.8992 126.188 48.75 126.188M48.75 125.062C48.6008 125.062 48.4577 125.122 48.3523 125.227C48.2468 125.333 48.1875 125.476 48.1875 125.625C48.1875 125.774 48.2468 125.917 48.3523 126.023C48.4577 126.128 48.6008 126.188 48.75 126.188M48.75 126.188V127.594M46.5 122.812V121.406M46.5 122.812C46.6492 122.812 46.7923 122.872 46.8977 122.977C47.0032 123.083 47.0625 123.226 47.0625 123.375C47.0625 123.524 47.0032 123.667 46.8977 123.773C46.7923 123.878 46.6492 123.938 46.5 123.938M46.5 122.812C46.3508 122.812 46.2077 122.872 46.1023 122.977C45.9968 123.083 45.9375 123.226 45.9375 123.375C45.9375 123.524 45.9968 123.667 46.1023 123.773C46.2077 123.878 46.3508 123.938 46.5 123.938M46.5 123.938V127.594" stroke="#CBD5E1" stroke-opacity="0.88" stroke-width="0.5625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect x="36.5" y="24.5" width="255" height="111" rx="2.5" stroke="url(#paint2_linear_993_3006)" stroke-opacity="0.7"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_3006" x1="164.5" y1="0" x2="164.5" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_3006" x1="164.5" y1="-1.02658e-07" x2="164.52" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_3006" x1="164" y1="24" x2="164" y2="136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_3006">
+<rect width="329" height="173" fill="white"/>
+</clipPath>
+<clipPath id="clip1_993_3006">
+<rect width="8.99998" height="8.99998" fill="white" transform="translate(43 32)"/>
+</clipPath>
+<clipPath id="clip2_993_3006">
+<rect width="9" height="9" fill="white" transform="translate(42 94)"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/overlays-dark.svg
+++ b/docs/public/illustrations/overlays-dark.svg
@@ -0,0 +1,33 @@
+<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_2599)">
+<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_2599)" fill-opacity="0.5" stroke="url(#paint1_linear_993_2599)"/>
+<g clip-path="url(#clip1_993_2599)">
+<path d="M-343.757 284.451L84.4375 -57.6226M-331.414 284.236L96.7796 -57.838M-319.072 284.021L109.122 -58.0534M-306.73 283.805L121.464 -58.2689M-294.388 283.59L133.806 -58.4843M-282.046 283.374L146.148 -58.6997M-269.704 283.159L158.49 -58.9152M-257.361 282.943L170.833 -59.1306M-245.019 282.728L183.175 -59.346M-232.677 282.513L195.517 -59.5615M-220.335 282.297L207.859 -59.7769M-207.993 282.082L220.201 -59.9923M-195.651 281.866L232.543 -60.2078M-183.308 281.651L244.886 -60.4232M-170.966 281.435L257.228 -60.6386M-158.624 281.22L269.57 -60.8541M-146.282 281.004L281.912 -61.0695M-133.94 280.789L294.254 -61.2849M-121.598 280.574L306.596 -61.5004M-109.255 280.358L318.939 -61.7158M-96.9133 280.143L331.281 -61.9312M-84.5711 279.927L343.623 -62.1467M-72.229 279.712L355.965 -62.3621M-59.8868 279.496L368.307 -62.5775M-47.5447 279.281L380.649 -62.793M-35.2025 279.066L392.992 -63.0084M-22.8603 278.85L405.334 -63.2238M-10.5182 278.635L417.676 -63.4393M1.82397 278.419L430.018 -63.6547M14.1661 278.204L442.36 -63.8701M26.5083 277.988L454.702 -64.0856M38.8505 277.773L467.044 -64.301M51.1926 277.558L479.387 -64.5164M63.5348 277.342L491.729 -64.7319M75.8769 277.127L504.071 -64.9473M88.2191 276.911L516.413 -65.1627M100.561 276.696L528.755 -65.3782M112.903 276.48L541.097 -65.5936M125.246 276.265L553.44 -65.809M137.588 276.05L565.782 -66.0245M149.93 275.834L578.124 -66.2399M162.272 275.619L590.466 -66.4553M174.614 275.403L602.808 -66.6708M186.956 275.188L615.15 -66.8862M199.299 274.972L627.493 -67.1016M211.641 274.757L639.835 -67.3171M223.983 274.541L652.177 -67.5325M236.325 274.326L664.519 -67.7479M248.667 274.111L676.861 -67.9634M261.009 273.895L689.203 -68.1788M273.352 273.68L701.546 -68.3942M285.694 273.464L713.888 -68.6097M298.036 273.249L726.23 -68.8251M310.378 273.033L738.572 -69.0405M322.72 272.818L750.914 -69.256M335.062 272.603L763.256 -69.4714M347.404 272.387L775.598 -69.6868M359.747 272.172L787.941 -69.9023M372.089 271.956L800.283 -70.1177M384.431 271.741L812.625 -70.3331M396.773 271.525L824.967 -70.5486M409.115 271.31L837.309 -70.764M421.457 271.095L849.651 -70.9794M433.8 270.879L861.994 -71.1949M446.142 270.664L874.336 -71.4103M458.484 270.448L886.678 -71.6257M470.826 270.233L899.02 -71.8412M483.168 270.017L911.362 -72.0566" stroke="url(#paint2_linear_993_2599)" stroke-opacity="0.32" stroke-width="0.721516"/>
+</g>
+<rect x="32.9331" y="24.5" width="263" height="124" rx="3.5" stroke="url(#paint3_linear_993_2599)" stroke-opacity="0.7" stroke-dasharray="2.26 2.26"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_2599" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2599" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2599" x1="272.533" y1="55" x2="272.533" y2="126.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_2599" x1="164.433" y1="24" x2="164.433" y2="149" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_2599">
+<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
+</clipPath>
+<clipPath id="clip1_993_2599">
+<rect x="32.4331" y="24" width="264" height="125" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/illustrations/overlays-light.svg
+++ b/docs/public/illustrations/overlays-light.svg
@@ -0,0 +1,33 @@
+<svg width="330" height="173" viewBox="0 0 330 173" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_993_3056)">
+<rect x="1" y="0.5" width="328" height="172" rx="5.5" fill="url(#paint0_linear_993_3056)" fill-opacity="0.15" stroke="url(#paint1_linear_993_3056)"/>
+<g clip-path="url(#clip1_993_3056)">
+<path d="M-343.757 284.451L84.4375 -57.6226M-331.414 284.236L96.7796 -57.838M-319.072 284.021L109.122 -58.0534M-306.73 283.805L121.464 -58.2689M-294.388 283.59L133.806 -58.4843M-282.046 283.374L146.148 -58.6997M-269.704 283.159L158.49 -58.9152M-257.361 282.943L170.833 -59.1306M-245.019 282.728L183.175 -59.346M-232.677 282.513L195.517 -59.5615M-220.335 282.297L207.859 -59.7769M-207.993 282.082L220.201 -59.9923M-195.651 281.866L232.543 -60.2078M-183.308 281.651L244.886 -60.4232M-170.966 281.435L257.228 -60.6386M-158.624 281.22L269.57 -60.8541M-146.282 281.004L281.912 -61.0695M-133.94 280.789L294.254 -61.2849M-121.598 280.574L306.596 -61.5004M-109.255 280.358L318.939 -61.7158M-96.9133 280.143L331.281 -61.9312M-84.5711 279.927L343.623 -62.1467M-72.229 279.712L355.965 -62.3621M-59.8868 279.496L368.307 -62.5775M-47.5447 279.281L380.649 -62.793M-35.2025 279.066L392.992 -63.0084M-22.8603 278.85L405.334 -63.2238M-10.5182 278.635L417.676 -63.4393M1.82397 278.419L430.018 -63.6547M14.1661 278.204L442.36 -63.8701M26.5083 277.988L454.702 -64.0856M38.8505 277.773L467.044 -64.301M51.1926 277.558L479.387 -64.5164M63.5348 277.342L491.729 -64.7319M75.8769 277.127L504.071 -64.9473M88.2191 276.911L516.413 -65.1627M100.561 276.696L528.755 -65.3782M112.903 276.48L541.097 -65.5936M125.246 276.265L553.44 -65.809M137.588 276.05L565.782 -66.0245M149.93 275.834L578.124 -66.2399M162.272 275.619L590.466 -66.4553M174.614 275.403L602.808 -66.6708M186.956 275.188L615.15 -66.8862M199.299 274.972L627.493 -67.1016M211.641 274.757L639.835 -67.3171M223.983 274.541L652.177 -67.5325M236.325 274.326L664.519 -67.7479M248.667 274.111L676.861 -67.9634M261.009 273.895L689.203 -68.1788M273.352 273.68L701.546 -68.3942M285.694 273.464L713.888 -68.6097M298.036 273.249L726.23 -68.8251M310.378 273.033L738.572 -69.0405M322.72 272.818L750.914 -69.256M335.062 272.603L763.256 -69.4714M347.404 272.387L775.598 -69.6868M359.747 272.172L787.941 -69.9023M372.089 271.956L800.283 -70.1177M384.431 271.741L812.625 -70.3331M396.773 271.525L824.967 -70.5486M409.115 271.31L837.309 -70.764M421.457 271.095L849.651 -70.9794M433.8 270.879L861.994 -71.1949M446.142 270.664L874.336 -71.4103M458.484 270.448L886.678 -71.6257M470.826 270.233L899.02 -71.8412M483.168 270.017L911.362 -72.0566" stroke="url(#paint2_linear_993_3056)" stroke-opacity="0.45" stroke-width="0.721516"/>
+</g>
+<rect x="32.9331" y="24.5" width="263" height="124" rx="3.5" stroke="url(#paint3_linear_993_3056)" stroke-opacity="0.8" stroke-dasharray="2.26 2.26"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_993_3056" x1="165" y1="0" x2="165" y2="78.7086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_3056" x1="165" y1="-1.02658e-07" x2="165.02" y2="117.577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_3056" x1="272.533" y1="55" x2="272.533" y2="126.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_3056" x1="164.433" y1="24" x2="164.433" y2="149" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_993_3056">
+<rect width="329" height="173" fill="white" transform="translate(0.5)"/>
+</clipPath>
+<clipPath id="clip1_993_3056">
+<rect x="32.4331" y="24" width="264" height="125" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/docs/public/social-card.png
+++ b/docs/public/social-card.png
--- a/docs/public/social-preview.jpg
+++ b/docs/public/social-preview.jpg
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -2,24 +2,33 @@ import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'

 export default <Partial<Config>>{
+  content: {
+    files: [
+      'content/**/*.yml'
+    ]
+  },
  theme: {
    extend: {
      fontFamily: {
-        sans: ['Inter', 'Inter fallback', ...defaultTheme.fontFamily.sans]
+        sans: ['DM Sans', 'DM Sans fallback', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        green: {
-          50: '#d6ffee',
-          100: '#acffdd',
-          200: '#83ffcc',
-          300: '#30ffaa',
-          400: '#00dc82',
-          500: '#00bd6f',
-          600: '#009d5d',
-          700: '#007e4a',
-          800: '#005e38',
-          900: '#003f25'
+          50: '#EFFDF5',
+          100: '#D9FBE8',
+          200: '#B3F5D1',
+          300: '#75EDAE',
+          400: '#00DC82',
+          500: '#00C16A',
+          600: '#00A155',
+          700: '#007F45',
+          800: '#016538',
+          900: '#0A5331',
+          950: '#052e16'
        }
+      },
+      gridRow: {
+        'span-8': 'span 8 / span 8'
      }
    }
  }
--- a/package.json
+++ b/package.json
@@ -64,9 +64,6 @@
    "yup": "^1.2.0",
    "zod": "^3.22.2"
  },
-  "resolutions": {
-    "@nuxtjs/mdc": "npm:@nuxtjs/mdc-edge@0.1.4-28223495.3036a1e"
-  },
  "pnpm": {
    "patchedDependencies": {
      "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/runtime/plugins/colors.ts
+++ b/src/runtime/plugins/colors.ts
@@ -3,9 +3,9 @@ import { hexToRgb } from '../utils'
 import { defineNuxtPlugin, useAppConfig } from '#imports'
 import colors from '#tailwind-config/theme/colors'

-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {
  const appConfig = useAppConfig()
-  const head = nuxtApp.vueApp._context.provides.usehead
+  const nuxtApp = useNuxtApp()

  const root = computed(() => {
    const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
@@ -53,6 +53,5 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
    }]
  }

-  // Workaround for https://github.com/nuxt/nuxt/issues/22763
-  head.push(headData)
+  useHead(headData)
 })