From e92be71749ded96334b4753e6b4368e51325f161 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 30 Jan 2024 11:24:02 +0100
Subject: [PATCH] docs: new structure (#1282)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Chopin <seb@nuxt.com>
---
 docs/app.vue                                  |  55 +-
 docs/components/BranchSelect.vue              |  44 +-
 docs/components/Footer.vue                    |  38 +-
 docs/components/Header.vue                    |   8 +-
 docs/components/ads/AdsPro.vue                |   6 +-
 .../examples/AccordionExampleBasic.vue        |   2 +-
 .../examples/AccordionExampleDefaultSlot.vue  |   2 +-
 .../examples/AccordionExampleItemSlot.vue     |   2 +-
 .../examples/BreadcrumbExampleBasic.vue       |   2 +-
 .../examples/BreadcrumbExampleDefaultSlot.vue |   2 +-
 .../examples/BreadcrumbExampleDividerSlot.vue |   2 +-
 .../examples/BreadcrumbExampleIconSlot.vue    |   2 +-
 .../content/examples/CheckboxExample.vue      |   2 +-
 .../content/examples/ChipExampleShow.vue      |   2 +-
 .../examples/CommandPaletteExampleAsync.vue   |   4 +-
 .../examples/CommandPaletteExampleBasic.vue   |   2 +-
 .../examples/CommandPaletteExampleFilter.vue  |   2 +-
 .../examples/CommandPaletteExampleGroups.vue  |   2 +-
 .../examples/CommandPaletteExampleModal.vue   |   2 +-
 .../CommandPaletteExampleThemeAlgolia.vue     |  13 +-
 .../CommandPaletteExampleThemeRaycast.vue     |   2 +-
 .../content/examples/ContextMenuExample.vue   |   2 +-
 .../examples/ContextMenuExampleArrow.vue      |   2 +-
 .../examples/ContextMenuExampleOffset.vue     |   2 +-
 .../examples/ContextMenuExamplePlacement.vue  |   2 +-
 .../content/examples/DatePickerExample.vue    |  11 +-
 .../examples/DatePickerRangeExample.vue       |  48 ++
 .../examples/DividerExampleOrientation.vue    |   2 +-
 .../content/examples/DropdownExampleArrow.vue |   2 +-
 .../content/examples/DropdownExampleBasic.vue |   2 +-
 .../content/examples/DropdownExampleMode.vue  |   2 +-
 .../examples/DropdownExampleOffset.vue        |   2 +-
 .../content/examples/DropdownExampleOpen.vue  |   2 +-
 .../examples/DropdownExamplePlacement.vue     |   2 +-
 .../content/examples/DropdownExampleSlot.vue  |   2 +-
 .../FormGroupEagerValidationExample.vue       |   2 +-
 .../examples/HorizontalNavigationExample.vue  |   4 +-
 ...HorizontalNavigationExampleDefaultSlot.vue |   6 +-
 .../HorizontalNavigationExampleSections.vue   |   4 +-
 .../content/examples/InputExample.vue         |   2 +-
 .../examples/InputMenuExampleBasic.vue        |   2 +-
 .../examples/InputMenuExampleEmptySlot.vue    |   2 +-
 .../examples/InputMenuExampleObjects.vue      |   8 +-
 .../InputMenuExampleObjectsValueAttribute.vue |   2 +-
 .../InputMenuExampleOptionEmptySlot.vue       |   2 +-
 .../examples/InputMenuExampleOptionSlot.vue   |   2 +-
 .../examples/InputMenuExamplePopperArrow.vue  |   2 +-
 .../examples/InputMenuExamplePopperOffset.vue |   2 +-
 .../InputMenuExamplePopperPlacement.vue       |   2 +-
 .../examples/InputMenuExampleSearchAsync.vue  |   6 +-
 .../InputMenuExampleSearchAttributes.vue      |   2 +-
 .../examples/InputMenuExampleSearchQuery.vue  |   2 +-
 .../content/examples/KbdExample.vue           |   2 +-
 .../examples/MeterSlotIndicatorExample.vue    |   2 +-
 .../examples/MeterSlotLabelExample.vue        |   2 +-
 .../content/examples/ModalExampleBasic.vue    |   2 +-
 .../content/examples/ModalExampleCard.vue     |   2 +-
 .../examples/ModalExampleDisableOverlay.vue   |   2 +-
 .../ModalExampleDisableTransition.vue         |   2 +-
 .../examples/ModalExampleFullscreen.vue       |   2 +-
 .../examples/ModalExamplePreventClose.vue     |   2 +-
 .../examples/NotificationExampleActions.vue   |   2 +-
 .../examples/NotificationExampleBasic.vue     |   2 +-
 .../examples/NotificationExampleCallback.vue  |   2 +-
 .../examples/NotificationExampleClick.vue     |   2 +-
 .../examples/NotificationExampleHtml.vue      |   2 +-
 .../examples/PaginationExampleBasic.vue       |   2 +-
 .../PaginationExampleFirstLastSlots.vue       |   2 +-
 .../PaginationExamplePrevNextSlots.vue        |   2 +-
 .../content/examples/PaginationExampleRTL.vue |  68 --
 .../PaginationExampleThemeRounded.vue         |  21 -
 .../content/examples/PopoverExampleOpen.vue   |   2 +-
 .../examples/ProgressExampleSlotIndicator.vue |   2 +-
 .../examples/ProgressExampleSlotStep.vue      |   2 +-
 .../content/examples/RadioExample.vue         |   2 +-
 .../content/examples/RadioGroupExample.vue    |   2 +-
 .../examples/RadioGroupLabelExample.vue       |   2 +-
 .../content/examples/RangeExample.vue         |   2 +-
 .../content/examples/SelectExample.vue        |   2 +-
 .../content/examples/SelectExampleObjects.vue |   2 +-
 .../examples/SelectMenuExampleArrow.vue       |   2 +-
 .../examples/SelectMenuExampleBasic.vue       |   2 +-
 .../examples/SelectMenuExampleButton.vue      |   2 +-
 .../examples/SelectMenuExampleCreatable.vue   |   2 +-
 .../SelectMenuExampleCreatableAlways.vue      |   2 +-
 .../examples/SelectMenuExampleEmptySlot.vue   |   2 +-
 .../examples/SelectMenuExampleMultiple.vue    |   2 +-
 .../SelectMenuExampleMultipleSlot.vue         |   2 +-
 .../examples/SelectMenuExampleObjects.vue     |   8 +-
 ...SelectMenuExampleObjectsValueAttribute.vue |   2 +-
 .../examples/SelectMenuExampleOffset.vue      |   2 +-
 .../SelectMenuExampleOptionEmptySlot.vue      |   2 +-
 .../examples/SelectMenuExampleOptionSlot.vue  |   2 +-
 .../examples/SelectMenuExamplePlacement.vue   |   2 +-
 .../examples/SelectMenuExampleSearchAsync.vue |   6 +-
 .../SelectMenuExampleSearchAttributes.vue     |   2 +-
 .../examples/SelectMenuExampleSearchQuery.vue |   2 +-
 .../examples/SlideoverExampleBasic.vue        |   2 +-
 .../content/examples/SlideoverExampleCard.vue |   2 +-
 .../SlideoverExampleDisableOverlay.vue        |   2 +-
 .../SlideoverExampleDisableTransition.vue     |   2 +-
 .../examples/SlideoverExamplePreventClose.vue |   2 +-
 .../content/examples/TableExampleBasic.vue    |   2 +-
 .../examples/TableExampleClickable.vue        |   2 +-
 .../content/examples/TableExampleColumns.vue  |   2 +-
 .../TableExampleColumnsSelectable.vue         |   2 +-
 .../examples/TableExampleColumnsSortable.vue  |   4 +-
 .../examples/TableExampleEmptySlot.vue        |   2 +-
 .../examples/TableExampleLoadingSlot.vue      |   2 +-
 .../examples/TableExamplePaginable.vue        |   2 +-
 .../examples/TableExampleReactiveSorting.vue  |   6 +-
 .../examples/TableExampleSearchable.vue       |   2 +-
 .../examples/TableExampleSelectable.vue       |   2 +-
 .../content/examples/TableExampleSlots.vue    |   2 +-
 .../content/examples/TableExampleStyle.vue    |   2 +-
 .../content/examples/TabsExampleBasic.vue     |   2 +-
 .../content/examples/TabsExampleChange.vue    |   2 +-
 .../examples/TabsExampleDefaultSlot.vue       |   2 +-
 .../content/examples/TabsExampleIndex.vue     |   2 +-
 .../examples/TabsExampleItemCustomSlot.vue    |   2 +-
 .../content/examples/TabsExampleItemSlot.vue  |   2 +-
 .../content/examples/TabsExampleVModel.vue    |   2 +-
 .../content/examples/TabsExampleVertical.vue  |   2 +-
 .../content/examples/TextareaExample.vue      |   2 +-
 .../content/examples/ToggleExample.vue        |   2 +-
 .../examples/VerticalNavigationExample.vue    |   6 +-
 .../VerticalNavigationExampleAvatarSlot.vue   |   2 +-
 .../VerticalNavigationExampleBadgeSlot.vue    |   2 +-
 .../VerticalNavigationExampleDefaultSlot.vue  |   8 +-
 .../VerticalNavigationExampleIconSlot.vue     |   4 +-
 .../VerticalNavigationExampleSections.vue     |   6 +-
 ...VerticalNavigationExampleThemeTailwind.vue |   5 +-
 docs/components/date-picker/DatePicker.vue    |  41 +-
 docs/components/home/HomeProDemo.vue          |  31 +
 docs/components/home/HomeProDemoBlock.vue     |  59 ++
 docs/composables/useContentSource.ts          |  63 +-
 docs/content/1.getting-started/1.index.md     |   6 +-
 .../1.getting-started/2.installation.md       |   7 +-
 docs/content/1.getting-started/3.theming.md   |  48 +-
 docs/content/1.getting-started/4.shortcuts.md |   6 +-
 docs/content/1.getting-started/5.examples.md  | 182 -----
 .../1.getting-started/6.contributing.md       |   3 +-
 .../accordion.md}                             |   4 +-
 .../2.alert.md => 2.components/alert.md}      |   6 +-
 .../3.avatar.md => 2.components/avatar.md}    |   0
 .../4.badge.md => 2.components/badge.md}      |   0
 .../breadcrumb.md}                            |   0
 .../5.button.md => 2.components/button.md}    |   2 +-
 .../1.card.md => 2.components/card.md}        |   0
 .../carousel.md}                              |   0
 .../checkbox.md}                              |   0
 .../12.chip.md => 2.components/chip.md}       |   0
 .../command-palette.md}                       |  38 +-
 .../container.md}                             |   0
 .../context-menu.md}                          |   0
 docs/content/2.components/date-picker.md      | 112 +++
 .../4.divider.md => 2.components/divider.md}  |   2 +-
 .../dropdown.md}                              |   2 +-
 .../form-group.md}                            |   4 +-
 .../10.form.md => 2.components/form.md}       |   2 +-
 .../horizontal-navigation.md}                 |   4 +-
 .../7.icon.md => 2.components/icon.md}        |   0
 .../input-menu.md}                            |   6 +-
 .../1.input.md => 2.components/input.md}      |   4 +-
 .../8.kbd.md => 2.components/kbd.md}          |   0
 .../9.link.md => 2.components/link.md}        |   4 +-
 .../11.meter.md => 2.components/meter.md}     |   2 +-
 .../1.modal.md => 2.components/modal.md}      |   2 +-
 .../notification.md}                          |   6 +-
 .../pagination.md}                            |   0
 .../3.popover.md => 2.components/popover.md}  |   0
 .../progress.md}                              |   2 +-
 .../radio-group.md}                           |   0
 .../8.range.md => 2.components/range.md}      |   0
 .../select-menu.md}                           |   4 +-
 .../3.select.md => 2.components/select.md}    |   2 +-
 .../skeleton.md}                              |   0
 .../slideover.md}                             |   2 +-
 .../1.table.md => 2.components/table.md}      |  52 +-
 .../4.tabs.md => 2.components/tabs.md}        |   0
 .../textarea.md}                              |   0
 .../7.toggle.md => 2.components/toggle.md}    |   0
 .../4.tooltip.md => 2.components/tooltip.md}  |   0
 .../vertical-navigation.md}                   |  14 +-
 docs/content/index.yml                        | 174 +++--
 docs/error.vue                                |  52 +-
 docs/nuxt.config.ts                           |   4 +
 docs/pages/[...slug].vue                      |  40 +-
 docs/pages/index.vue                          | 685 ++++++++++++++++--
 docs/public/illustrations/data-dark.svg       |  95 ---
 docs/public/illustrations/data-light.svg      |  90 ---
 docs/public/illustrations/elements-dark.svg   |  66 --
 docs/public/illustrations/elements-light.svg  |  76 --
 docs/public/illustrations/forms-dark.svg      |  40 -
 docs/public/illustrations/forms-light.svg     |  37 -
 docs/public/illustrations/layout-dark.svg     |  76 --
 docs/public/illustrations/layout-light.svg    |  71 --
 docs/public/illustrations/navigation-dark.svg |  65 --
 .../public/illustrations/navigation-light.svg |  65 --
 docs/public/illustrations/overlays-dark.svg   |  33 -
 docs/public/illustrations/overlays-light.svg  |  33 -
 docs/public/illustrations/pro-dark.svg        | 207 +-----
 docs/public/illustrations/pro-light.svg       | 169 +----
 docs/types/index.d.ts                         |  12 +
 docs/vercel.json                              | 152 ++++
 pnpm-lock.yaml                                |   1 +
 206 files changed, 1725 insertions(+), 1851 deletions(-)
 create mode 100644 docs/components/content/examples/DatePickerRangeExample.vue
 delete mode 100644 docs/components/content/examples/PaginationExampleRTL.vue
 delete mode 100644 docs/components/content/examples/PaginationExampleThemeRounded.vue
 create mode 100644 docs/components/home/HomeProDemo.vue
 create mode 100644 docs/components/home/HomeProDemoBlock.vue
 delete mode 100644 docs/content/1.getting-started/5.examples.md
 rename docs/content/{2.elements/1.accordion.md => 2.components/accordion.md} (94%)
 rename docs/content/{2.elements/2.alert.md => 2.components/alert.md} (87%)
 rename docs/content/{2.elements/3.avatar.md => 2.components/avatar.md} (100%)
 rename docs/content/{2.elements/4.badge.md => 2.components/badge.md} (100%)
 rename docs/content/{5.navigation/5.breadcrumb.md => 2.components/breadcrumb.md} (100%)
 rename docs/content/{2.elements/5.button.md => 2.components/button.md} (98%)
 rename docs/content/{7.layout/1.card.md => 2.components/card.md} (100%)
 rename docs/content/{2.elements/13.carousel.md => 2.components/carousel.md} (100%)
 rename docs/content/{3.forms/5.checkbox.md => 2.components/checkbox.md} (100%)
 rename docs/content/{2.elements/12.chip.md => 2.components/chip.md} (100%)
 rename docs/content/{5.navigation/2.command-palette.md => 2.components/command-palette.md} (86%)
 rename docs/content/{7.layout/2.container.md => 2.components/container.md} (100%)
 rename docs/content/{6.overlays/5.context-menu.md => 2.components/context-menu.md} (100%)
 create mode 100644 docs/content/2.components/date-picker.md
 rename docs/content/{7.layout/4.divider.md => 2.components/divider.md} (94%)
 rename docs/content/{2.elements/6.dropdown.md => 2.components/dropdown.md} (97%)
 rename docs/content/{3.forms/9.form-group.md => 2.components/form-group.md} (94%)
 rename docs/content/{3.forms/10.form.md => 2.components/form.md} (97%)
 rename docs/content/{5.navigation/6.horizontal-navigation.md => 2.components/horizontal-navigation.md} (95%)
 rename docs/content/{2.elements/7.icon.md => 2.components/icon.md} (100%)
 rename docs/content/{3.forms/2.input-menu.md => 2.components/input-menu.md} (90%)
 rename docs/content/{3.forms/1.input.md => 2.components/input.md} (96%)
 rename docs/content/{2.elements/8.kbd.md => 2.components/kbd.md} (100%)
 rename docs/content/{2.elements/9.link.md => 2.components/link.md} (89%)
 rename docs/content/{2.elements/11.meter.md => 2.components/meter.md} (98%)
 rename docs/content/{6.overlays/1.modal.md => 2.components/modal.md} (91%)
 rename docs/content/{6.overlays/6.notification.md => 2.components/notification.md} (93%)
 rename docs/content/{5.navigation/3.pagination.md => 2.components/pagination.md} (100%)
 rename docs/content/{6.overlays/3.popover.md => 2.components/popover.md} (100%)
 rename docs/content/{2.elements/10.progress.md => 2.components/progress.md} (97%)
 rename docs/content/{3.forms/6.radio-group.md => 2.components/radio-group.md} (100%)
 rename docs/content/{3.forms/8.range.md => 2.components/range.md} (100%)
 rename docs/content/{3.forms/4.select-menu.md => 2.components/select-menu.md} (92%)
 rename docs/content/{3.forms/3.select.md => 2.components/select.md} (98%)
 rename docs/content/{7.layout/3.skeleton.md => 2.components/skeleton.md} (100%)
 rename docs/content/{6.overlays/2.slideover.md => 2.components/slideover.md} (91%)
 rename docs/content/{4.data/1.table.md => 2.components/table.md} (91%)
 rename docs/content/{5.navigation/4.tabs.md => 2.components/tabs.md} (100%)
 rename docs/content/{3.forms/2.textarea.md => 2.components/textarea.md} (100%)
 rename docs/content/{3.forms/7.toggle.md => 2.components/toggle.md} (100%)
 rename docs/content/{6.overlays/4.tooltip.md => 2.components/tooltip.md} (100%)
 rename docs/content/{5.navigation/1.vertical-navigation.md => 2.components/vertical-navigation.md} (86%)
 delete mode 100644 docs/public/illustrations/data-dark.svg
 delete mode 100644 docs/public/illustrations/data-light.svg
 delete mode 100644 docs/public/illustrations/elements-dark.svg
 delete mode 100644 docs/public/illustrations/elements-light.svg
 delete mode 100644 docs/public/illustrations/forms-dark.svg
 delete mode 100644 docs/public/illustrations/forms-light.svg
 delete mode 100644 docs/public/illustrations/layout-dark.svg
 delete mode 100644 docs/public/illustrations/layout-light.svg
 delete mode 100644 docs/public/illustrations/navigation-dark.svg
 delete mode 100644 docs/public/illustrations/navigation-light.svg
 delete mode 100644 docs/public/illustrations/overlays-dark.svg
 delete mode 100644 docs/public/illustrations/overlays-light.svg
 create mode 100644 docs/types/index.d.ts
 create mode 100644 docs/vercel.json

diff --git a/docs/app.vue b/docs/app.vue
index c47a6e21..85aa057e 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,6 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
+    <NuxtLoadingIndicator />
+
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
@@ -10,7 +12,7 @@
     <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 1000 }" />
     </ClientOnly>
 
     <UNotifications>
@@ -30,7 +32,7 @@ const searchRef = ref()
 
 const route = useRoute()
 const colorMode = useColorMode()
-const { branch, branches } = useContentSource()
+const { branch } = useContentSource()
 
 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
@@ -51,51 +53,28 @@ const navigation = computed(() => {
   return nav.value.filter(item => item._path !== '/dev')
 })
 
-const groups = computed(() => {
-  if (route.path === '/') {
-    return []
-  }
-
-  return [{ key: 'branch', label: 'Branch', commands: branches.value }]
-})
-
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
-    label: 'Documentation',
+    label: 'Docs',
     icon: 'i-heroicons-book-open',
-    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Roadmap',
-    icon: 'i-heroicons-academic-cap',
-    to: '/roadmap'
-  }, !!navigation.value.find(item => item._path === '/pro') && {
+    to: branch.value?.name === 'dev' ? '/dev/getting-started' : '/getting-started',
+    active: branch.value?.name === 'dev' ? (route.path.startsWith('/dev/getting-started') || route.path.startsWith('/dev/components')) : (route.path.startsWith('/getting-started') || route.path.startsWith('/components'))
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
     label: 'Pro',
     icon: 'i-heroicons-square-3-stack-3d',
     to: '/pro',
-    children: [{
-      label: 'Features',
-      to: '/pro',
-      exact: true,
-      icon: 'i-heroicons-beaker',
-      description: 'Discover all the features of Nuxt UI Pro.'
-    }, {
-      label: 'Guide',
-      to: '/pro/guide',
-      icon: 'i-heroicons-book-open',
-      description: 'Learn how to use Nuxt UI Pro in your app.'
-    }, {
-      label: 'Components',
-      to: '/pro/components',
-      icon: 'i-heroicons-cube-transparent',
-      description: 'Discover all the components available in Nuxt UI Pro.'
-    }]
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components')
   }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
     to: '/releases'
diff --git a/docs/components/BranchSelect.vue b/docs/components/BranchSelect.vue
index 26d2f98d..676fa569 100644
--- a/docs/components/BranchSelect.vue
+++ b/docs/components/BranchSelect.vue
@@ -1,36 +1,34 @@
 <template>
   <div class="mb-3 lg:mb-6">
-    <label for="branch" class="block mb-1.5 font-semibold text-sm/6">Version</label>
-
-    <USelectMenu
-      id="branch"
-      :model-value="branch"
-      name="branch"
-      :options="branches"
+    <UDropdown
+      class="w-full"
+      :items="[branches]"
       color="gray"
-      :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
-      :ui-menu="{ option: { container: 'gap-1.5' } }"
-      @update:model-value="select"
+      mode="hover"
+      :ui="{ width: 'w-full' }"
+      :popper="{ strategy: 'absolute', placement: 'bottom' }"
     >
-      <template #label>
+      <UButton color="gray" class="w-full">
         <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
 
-        <span class="font-medium">{{ branch.label }}</span>
+        <span class="text-gray-900 dark:text-white">{{ branch.label }}</span>
 
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+        <span class="text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+
+        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400 dark:text-gray-500 ml-auto -mr-1" />
+      </UButton>
+
+      <template #item="{ item }">
+        <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span>{{ item.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ item.suffix }}</span>
       </template>
-
-      <template #option="{ option }">
-        <UIcon v-if="option.icon" :name="option.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
-
-        <span class="font-medium">{{ option.label }}</span>
-
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ option.suffix }}</span>
-      </template>
-    </USelectMenu>
+    </UDropdown>
   </div>
 </template>
 
 <script setup lang="ts">
-const { branches, branch, select } = useContentSource()
+const { branches, branch } = useContentSource()
 </script>
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index 713e45fb..2e86c29f 100644
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -5,21 +5,19 @@
     </div>
   </div>
 
-  <UFooter>
+  <UFooter :links="links">
     <template #left>
-      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
-        Purchase Nuxt UI Pro
-      </a>
-      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
-        Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
-          MIT License
-        </NuxtLink>
-      </span>
+      <NuxtLink v-if="$route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Purchase <span class="text-gray-900 dark:text-white">Nuxt UI Pro</span>
+      </NuxtLink>
+      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Published under <span class="text-gray-900 dark:text-white">MIT License</span>
+      </NuxtLink>
     </template>
 
     <template #right>
       <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($ui.button.secondary as any)" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/invite/ps2h6QT" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
     </template>
@@ -27,5 +25,23 @@
 </template>
 
 <script setup lang="ts">
-// force typescript
+const links = [{
+  icon: 'i-simple-icons-figma',
+  label: 'Figma Kit',
+  to: 'https://www.figma.com/community/file/1288455405058138934/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch',
+  to: '/releases'
+}]
 </script>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index 60f8ef55..d4dc751b 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -7,8 +7,10 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
+
+        <UBadge v-if="$route.path.startsWith('/pro')" label="Pro" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold" />
       </NuxtLink>
     </template>
 
@@ -33,9 +35,9 @@
     <template #panel>
       <UAsideLinks :links="links" />
 
-      <UDivider type="dashed" class="mt-4 mb-3" />
+      <UDivider type="dashed" class="my-4" />
 
-      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+      <BranchSelect />
 
       <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
     </template>
diff --git a/docs/components/ads/AdsPro.vue b/docs/components/ads/AdsPro.vue
index 21936a92..14eaa1a3 100644
--- a/docs/components/ads/AdsPro.vue
+++ b/docs/components/ads/AdsPro.vue
@@ -5,8 +5,8 @@
     </NuxtLink>
 
     <UColorModeImage
-      light="/pro/illustrations/docs-light.svg"
-      dark="/pro/illustrations/docs-dark.svg"
+      light="/illustrations/pro-light.svg"
+      dark="/illustrations/pro-dark.svg"
       alt="Nuxt UI Pro"
       loading="lazy"
       class="w-full"
@@ -16,7 +16,7 @@
       <div class="inline-flex gap-1.5">
         <Logo class="h-4 w-auto" />
 
-        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold" />
+        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold rounded" />
       </div>
 
       <p class="text-sm text-gray-500 dark:text-gray-400 group-hover/ad:text-gray-700 dark:group-hover/ad:text-gray-200 mt-1 transition-colors">
diff --git a/docs/components/content/examples/AccordionExampleBasic.vue b/docs/components/content/examples/AccordionExampleBasic.vue
index 1225ad9a..17d0ca32 100644
--- a/docs/components/content/examples/AccordionExampleBasic.vue
+++ b/docs/components/content/examples/AccordionExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',
diff --git a/docs/components/content/examples/AccordionExampleDefaultSlot.vue b/docs/components/content/examples/AccordionExampleDefaultSlot.vue
index 1b3dd4b0..2b88a6eb 100644
--- a/docs/components/content/examples/AccordionExampleDefaultSlot.vue
+++ b/docs/components/content/examples/AccordionExampleDefaultSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',
diff --git a/docs/components/content/examples/AccordionExampleItemSlot.vue b/docs/components/content/examples/AccordionExampleItemSlot.vue
index 6e5e2da3..4bc0bccd 100644
--- a/docs/components/content/examples/AccordionExampleItemSlot.vue
+++ b/docs/components/content/examples/AccordionExampleItemSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',
diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
index 1ed31c34..12732a8a 100644
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ b/docs/components/content/examples/BreadcrumbExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',
diff --git a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
index e2638602..2210e616 100644
--- a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
index 0a279176..810bc4c3 100644
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',
diff --git a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
index 9cd758a7..8b941306 100644
--- a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
+++ b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'
diff --git a/docs/components/content/examples/CheckboxExample.vue b/docs/components/content/examples/CheckboxExample.vue
index 4196909d..6d75d1c5 100644
--- a/docs/components/content/examples/CheckboxExample.vue
+++ b/docs/components/content/examples/CheckboxExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const selected = ref(true)
 </script>
 
diff --git a/docs/components/content/examples/ChipExampleShow.vue b/docs/components/content/examples/ChipExampleShow.vue
index e1712d65..ec3b40b4 100644
--- a/docs/components/content/examples/ChipExampleShow.vue
+++ b/docs/components/content/examples/ChipExampleShow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   name: 'messages',
   icon: 'i-heroicons-chat-bubble-oval-left',
diff --git a/docs/components/content/examples/CommandPaletteExampleAsync.vue b/docs/components/content/examples/CommandPaletteExampleAsync.vue
index 76533809..ce8859e8 100644
--- a/docs/components/content/examples/CommandPaletteExampleAsync.vue
+++ b/docs/components/content/examples/CommandPaletteExampleAsync.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const groups = [{
   key: 'users',
   label: q => q && `Users matching “${q}”...`,
@@ -7,7 +7,7 @@ const groups = [{
       return []
     }
 
-    const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+    const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
     return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
   }
diff --git a/docs/components/content/examples/CommandPaletteExampleBasic.vue b/docs/components/content/examples/CommandPaletteExampleBasic.vue
index e69d250e..84ca8456 100644
--- a/docs/components/content/examples/CommandPaletteExampleBasic.vue
+++ b/docs/components/content/examples/CommandPaletteExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper' },
   { id: 2, label: 'Arlene Mccoy' },
diff --git a/docs/components/content/examples/CommandPaletteExampleFilter.vue b/docs/components/content/examples/CommandPaletteExampleFilter.vue
index d5f77e24..5a7afbe0 100644
--- a/docs/components/content/examples/CommandPaletteExampleFilter.vue
+++ b/docs/components/content/examples/CommandPaletteExampleFilter.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper', child: true },
   { id: 2, label: 'Arlene Mccoy' },
diff --git a/docs/components/content/examples/CommandPaletteExampleGroups.vue b/docs/components/content/examples/CommandPaletteExampleGroups.vue
index 3a9caf1c..89d2e173 100644
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const router = useRouter()
 const toast = useToast()
 
diff --git a/docs/components/content/examples/CommandPaletteExampleModal.vue b/docs/components/content/examples/CommandPaletteExampleModal.vue
index a5291abe..5abe16b1 100644
--- a/docs/components/content/examples/CommandPaletteExampleModal.vue
+++ b/docs/components/content/examples/CommandPaletteExampleModal.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 
 const people = [
diff --git a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
index b8c1f286..bee0dbae 100644
--- a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
@@ -1,8 +1,11 @@
-<script setup>
+<script setup lang="ts">
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { Button } from '#ui/types'
+
 const commandPaletteRef = ref()
 
-const navigation = inject('navigation')
-const files = inject('files')
+const navigation = inject<Ref<NavItem[]>>('navigation')
+const files = inject<Ref<ParsedContent[]>>('files')
 
 const groups = computed(() => navigation.value.map(item => ({
   key: item._path,
@@ -63,8 +66,8 @@ const ui = {
     ref="commandPaletteRef"
     :groups="groups"
     :ui="ui"
-    :close-button="closeButton"
-    :empty-state="emptyState"
+    :close-button="(closeButton as Button)"
+    :empty-state="(emptyState as any)"
     :autoselect="false"
     command-attribute="title"
     :fuse="{
diff --git a/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue b/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
index bcc107fa..86264bca 100644
--- a/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const commandPaletteRef = ref()
 
 const suggestions = [
diff --git a/docs/components/content/examples/ContextMenuExample.vue b/docs/components/content/examples/ContextMenuExample.vue
index 3afaa36b..54599fc0 100644
--- a/docs/components/content/examples/ContextMenuExample.vue
+++ b/docs/components/content/examples/ContextMenuExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 
diff --git a/docs/components/content/examples/ContextMenuExampleArrow.vue b/docs/components/content/examples/ContextMenuExampleArrow.vue
index 1e337170..e6c3d267 100644
--- a/docs/components/content/examples/ContextMenuExampleArrow.vue
+++ b/docs/components/content/examples/ContextMenuExampleArrow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 
diff --git a/docs/components/content/examples/ContextMenuExampleOffset.vue b/docs/components/content/examples/ContextMenuExampleOffset.vue
index 34520660..593307f4 100644
--- a/docs/components/content/examples/ContextMenuExampleOffset.vue
+++ b/docs/components/content/examples/ContextMenuExampleOffset.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 
diff --git a/docs/components/content/examples/ContextMenuExamplePlacement.vue b/docs/components/content/examples/ContextMenuExamplePlacement.vue
index b714c616..557c9077 100644
--- a/docs/components/content/examples/ContextMenuExamplePlacement.vue
+++ b/docs/components/content/examples/ContextMenuExamplePlacement.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 
diff --git a/docs/components/content/examples/DatePickerExample.vue b/docs/components/content/examples/DatePickerExample.vue
index 785e9ae8..f5e9a05c 100644
--- a/docs/components/content/examples/DatePickerExample.vue
+++ b/docs/components/content/examples/DatePickerExample.vue
@@ -1,16 +1,15 @@
-<script setup>
-const date = ref(new Date())
+<script setup lang="ts">
+import { format } from 'date-fns'
 
-const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-)
+const date = ref(new Date())
 </script>
 
 <template>
   <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
+    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
 
     <template #panel="{ close }">
-      <LazyDatePicker v-model="date" @close="close" />
+      <DatePicker v-model="date" @close="close" />
     </template>
   </UPopover>
 </template>
diff --git a/docs/components/content/examples/DatePickerRangeExample.vue b/docs/components/content/examples/DatePickerRangeExample.vue
new file mode 100644
index 00000000..37c0992a
--- /dev/null
+++ b/docs/components/content/examples/DatePickerRangeExample.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { sub, format, isSameDay, type Duration } from 'date-fns'
+
+const ranges = [
+  { label: 'Last 7 days', duration: { days: 7 } },
+  { label: 'Last 14 days', duration: { days: 14 } },
+  { label: 'Last 30 days', duration: { days: 30 } },
+  { label: 'Last 3 months', duration: { months: 3 } },
+  { label: 'Last 6 months', duration: { months: 6 } },
+  { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
+function isRangeSelected (duration: Duration) {
+  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange (duration: Duration) {
+  selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+</script>
+
+<template>
+  <UPopover :popper="{ placement: 'bottom-start' }">
+    <UButton icon="i-heroicons-calendar-days-20-solid">
+      {{ format(selected.start, 'd MMM, yyy') }} - {{ format(selected.end, 'd MMM, yyy') }}
+    </UButton>
+
+    <template #panel="{ close }">
+      <div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800">
+        <div class="flex flex-col py-4">
+          <UButton
+            v-for="(range, index) in ranges"
+            :key="index"
+            :label="range.label"
+            color="gray"
+            variant="ghost"
+            class="rounded-none px-6"
+            :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+            @click="selectRange(range.duration)"
+          />
+        </div>
+
+        <DatePicker v-model="selected" @close="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/components/content/examples/DividerExampleOrientation.vue b/docs/components/content/examples/DividerExampleOrientation.vue
index 3b54c9ed..d51cd67a 100644
--- a/docs/components/content/examples/DividerExampleOrientation.vue
+++ b/docs/components/content/examples/DividerExampleOrientation.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const form = reactive({ email: 'mail@example.com', password: 'password' })
 </script>
 
diff --git a/docs/components/content/examples/DropdownExampleArrow.vue b/docs/components/content/examples/DropdownExampleArrow.vue
index cee7daf5..6a40c953 100644
--- a/docs/components/content/examples/DropdownExampleArrow.vue
+++ b/docs/components/content/examples/DropdownExampleArrow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExampleBasic.vue b/docs/components/content/examples/DropdownExampleBasic.vue
index 81988405..b4daba0f 100644
--- a/docs/components/content/examples/DropdownExampleBasic.vue
+++ b/docs/components/content/examples/DropdownExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExampleMode.vue b/docs/components/content/examples/DropdownExampleMode.vue
index af40fa61..4a9b96b0 100644
--- a/docs/components/content/examples/DropdownExampleMode.vue
+++ b/docs/components/content/examples/DropdownExampleMode.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExampleOffset.vue b/docs/components/content/examples/DropdownExampleOffset.vue
index 7a648f27..3aa90841 100644
--- a/docs/components/content/examples/DropdownExampleOffset.vue
+++ b/docs/components/content/examples/DropdownExampleOffset.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExampleOpen.vue b/docs/components/content/examples/DropdownExampleOpen.vue
index 771878e1..d5668f59 100644
--- a/docs/components/content/examples/DropdownExampleOpen.vue
+++ b/docs/components/content/examples/DropdownExampleOpen.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExamplePlacement.vue b/docs/components/content/examples/DropdownExamplePlacement.vue
index 2b4853a1..894e48f6 100644
--- a/docs/components/content/examples/DropdownExamplePlacement.vue
+++ b/docs/components/content/examples/DropdownExamplePlacement.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',
diff --git a/docs/components/content/examples/DropdownExampleSlot.vue b/docs/components/content/examples/DropdownExampleSlot.vue
index 80a3dea0..fa025f42 100644
--- a/docs/components/content/examples/DropdownExampleSlot.vue
+++ b/docs/components/content/examples/DropdownExampleSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'ben@example.com',
diff --git a/docs/components/content/examples/FormGroupEagerValidationExample.vue b/docs/components/content/examples/FormGroupEagerValidationExample.vue
index d17d5a9a..726effce 100644
--- a/docs/components/content/examples/FormGroupEagerValidationExample.vue
+++ b/docs/components/content/examples/FormGroupEagerValidationExample.vue
@@ -6,7 +6,7 @@
   </UForm>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { z } from 'zod'
 
 const schema = z.object({
diff --git a/docs/components/content/examples/HorizontalNavigationExample.vue b/docs/components/content/examples/HorizontalNavigationExample.vue
index dbc0f8f8..2e0c72cf 100644
--- a/docs/components/content/examples/HorizontalNavigationExample.vue
+++ b/docs/components/content/examples/HorizontalNavigationExample.vue
@@ -14,11 +14,11 @@ const links = [{
 }, {
   label: 'Horizontal Navigation',
   icon: 'i-heroicons-chart-bar',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
 }, {
   label: 'Command Palette',
   icon: 'i-heroicons-command-line',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }]
 </script>
 
diff --git a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue b/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
index fac15872..80670c12 100644
--- a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
+++ b/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
@@ -3,13 +3,13 @@ const route = useRoute()
 
 const links = [{
   label: 'Horizontal Navigation',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
 }, {
   label: 'Command Palette',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }, {
   label: 'Table',
-  to: '/data/table'
+  to: '/components/table'
 }]
 </script>
 
diff --git a/docs/components/content/examples/HorizontalNavigationExampleSections.vue b/docs/components/content/examples/HorizontalNavigationExampleSections.vue
index e702cf5b..9fca52fe 100644
--- a/docs/components/content/examples/HorizontalNavigationExampleSections.vue
+++ b/docs/components/content/examples/HorizontalNavigationExampleSections.vue
@@ -9,11 +9,11 @@ const links = [
   }, {
     label: 'Horizontal Navigation',
     icon: 'i-heroicons-chart-bar',
-    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
   }, {
     label: 'Command Palette',
     icon: 'i-heroicons-command-line',
-    to: '/navigation/command-palette'
+    to: '/components/command-palette'
   }], [{
     label: 'Examples',
     icon: 'i-heroicons-light-bulb'
diff --git a/docs/components/content/examples/InputExample.vue b/docs/components/content/examples/InputExample.vue
index 50dc64a4..a42e4875 100644
--- a/docs/components/content/examples/InputExample.vue
+++ b/docs/components/content/examples/InputExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref('')
 </script>
 
diff --git a/docs/components/content/examples/InputMenuExampleBasic.vue b/docs/components/content/examples/InputMenuExampleBasic.vue
index 97b1e4d8..05abc93b 100644
--- a/docs/components/content/examples/InputMenuExampleBasic.vue
+++ b/docs/components/content/examples/InputMenuExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/InputMenuExampleEmptySlot.vue b/docs/components/content/examples/InputMenuExampleEmptySlot.vue
index 3a7285b7..8cc1c57e 100644
--- a/docs/components/content/examples/InputMenuExampleEmptySlot.vue
+++ b/docs/components/content/examples/InputMenuExampleEmptySlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = []
 
 const selected = ref()
diff --git a/docs/components/content/examples/InputMenuExampleObjects.vue b/docs/components/content/examples/InputMenuExampleObjects.vue
index f6527d43..ff78ac50 100644
--- a/docs/components/content/examples/InputMenuExampleObjects.vue
+++ b/docs/components/content/examples/InputMenuExampleObjects.vue
@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { Avatar } from '#ui/types'
+
 const people = [{
   id: 'benjamincanac',
   label: 'benjamincanac',
@@ -29,8 +31,8 @@ const selected = ref(people[0])
 <template>
   <UInputMenu v-model="selected" :options="people">
     <template #leading>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
+      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
     </template>
   </UInputMenu>
 </template>
diff --git a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue
index 31904b25..c8dca6ac 100644
--- a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue
+++ b/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Wade Cooper'
diff --git a/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue b/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue
index 409329e1..d86683bd 100644
--- a/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue
+++ b/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/InputMenuExampleOptionSlot.vue b/docs/components/content/examples/InputMenuExampleOptionSlot.vue
index 666087a1..b9df5520 100644
--- a/docs/components/content/examples/InputMenuExampleOptionSlot.vue
+++ b/docs/components/content/examples/InputMenuExampleOptionSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { name: 'Wade Cooper', online: true },
   { name: 'Arlene Mccoy', online: false },
diff --git a/docs/components/content/examples/InputMenuExamplePopperArrow.vue b/docs/components/content/examples/InputMenuExamplePopperArrow.vue
index 45527692..0b645a77 100644
--- a/docs/components/content/examples/InputMenuExamplePopperArrow.vue
+++ b/docs/components/content/examples/InputMenuExamplePopperArrow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/InputMenuExamplePopperOffset.vue b/docs/components/content/examples/InputMenuExamplePopperOffset.vue
index 2b3ef6fb..9274d078 100644
--- a/docs/components/content/examples/InputMenuExamplePopperOffset.vue
+++ b/docs/components/content/examples/InputMenuExamplePopperOffset.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/InputMenuExamplePopperPlacement.vue b/docs/components/content/examples/InputMenuExamplePopperPlacement.vue
index 20e6411c..cb264281 100644
--- a/docs/components/content/examples/InputMenuExamplePopperPlacement.vue
+++ b/docs/components/content/examples/InputMenuExamplePopperPlacement.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/InputMenuExampleSearchAsync.vue b/docs/components/content/examples/InputMenuExampleSearchAsync.vue
index b09984e9..65dfde30 100644
--- a/docs/components/content/examples/InputMenuExampleSearchAsync.vue
+++ b/docs/components/content/examples/InputMenuExampleSearchAsync.vue
@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 const loading = ref(false)
 const selected = ref()
 
-async function search (q) {
+async function search (q: string) {
   loading.value = true
 
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
   loading.value = false
 
diff --git a/docs/components/content/examples/InputMenuExampleSearchAttributes.vue b/docs/components/content/examples/InputMenuExampleSearchAttributes.vue
index 0df49da7..c7e861a9 100644
--- a/docs/components/content/examples/InputMenuExampleSearchAttributes.vue
+++ b/docs/components/content/examples/InputMenuExampleSearchAttributes.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
   { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
diff --git a/docs/components/content/examples/InputMenuExampleSearchQuery.vue b/docs/components/content/examples/InputMenuExampleSearchQuery.vue
index ba84bb16..783c0e92 100644
--- a/docs/components/content/examples/InputMenuExampleSearchQuery.vue
+++ b/docs/components/content/examples/InputMenuExampleSearchQuery.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref()
diff --git a/docs/components/content/examples/KbdExample.vue b/docs/components/content/examples/KbdExample.vue
index 4eac225e..d8c5cbd6 100644
--- a/docs/components/content/examples/KbdExample.vue
+++ b/docs/components/content/examples/KbdExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { metaSymbol } = useShortcuts()
 </script>
 
diff --git a/docs/components/content/examples/MeterSlotIndicatorExample.vue b/docs/components/content/examples/MeterSlotIndicatorExample.vue
index 73f4fa69..75b92d84 100644
--- a/docs/components/content/examples/MeterSlotIndicatorExample.vue
+++ b/docs/components/content/examples/MeterSlotIndicatorExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42
diff --git a/docs/components/content/examples/MeterSlotLabelExample.vue b/docs/components/content/examples/MeterSlotLabelExample.vue
index d7e51d0a..2d946e7a 100644
--- a/docs/components/content/examples/MeterSlotLabelExample.vue
+++ b/docs/components/content/examples/MeterSlotLabelExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42
diff --git a/docs/components/content/examples/ModalExampleBasic.vue b/docs/components/content/examples/ModalExampleBasic.vue
index 36900395..7bee2355 100644
--- a/docs/components/content/examples/ModalExampleBasic.vue
+++ b/docs/components/content/examples/ModalExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/ModalExampleCard.vue b/docs/components/content/examples/ModalExampleCard.vue
index 9f3799a8..faf6fab5 100644
--- a/docs/components/content/examples/ModalExampleCard.vue
+++ b/docs/components/content/examples/ModalExampleCard.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/ModalExampleDisableOverlay.vue b/docs/components/content/examples/ModalExampleDisableOverlay.vue
index c4e460bc..6b1bd4d1 100644
--- a/docs/components/content/examples/ModalExampleDisableOverlay.vue
+++ b/docs/components/content/examples/ModalExampleDisableOverlay.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/ModalExampleDisableTransition.vue b/docs/components/content/examples/ModalExampleDisableTransition.vue
index b8a24890..96989399 100644
--- a/docs/components/content/examples/ModalExampleDisableTransition.vue
+++ b/docs/components/content/examples/ModalExampleDisableTransition.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/ModalExampleFullscreen.vue b/docs/components/content/examples/ModalExampleFullscreen.vue
index a8a0fff0..acdbcf55 100644
--- a/docs/components/content/examples/ModalExampleFullscreen.vue
+++ b/docs/components/content/examples/ModalExampleFullscreen.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/ModalExamplePreventClose.vue b/docs/components/content/examples/ModalExamplePreventClose.vue
index 6e4f78eb..89062cd8 100644
--- a/docs/components/content/examples/ModalExamplePreventClose.vue
+++ b/docs/components/content/examples/ModalExamplePreventClose.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/NotificationExampleActions.vue b/docs/components/content/examples/NotificationExampleActions.vue
index f1acc074..d7ac9910 100644
--- a/docs/components/content/examples/NotificationExampleActions.vue
+++ b/docs/components/content/examples/NotificationExampleActions.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 const actions = ref([{
diff --git a/docs/components/content/examples/NotificationExampleBasic.vue b/docs/components/content/examples/NotificationExampleBasic.vue
index 8fc85da0..cad5f2b5 100644
--- a/docs/components/content/examples/NotificationExampleBasic.vue
+++ b/docs/components/content/examples/NotificationExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>
 
diff --git a/docs/components/content/examples/NotificationExampleCallback.vue b/docs/components/content/examples/NotificationExampleCallback.vue
index c3e525b9..325d95da 100644
--- a/docs/components/content/examples/NotificationExampleCallback.vue
+++ b/docs/components/content/examples/NotificationExampleCallback.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onCallback () {
diff --git a/docs/components/content/examples/NotificationExampleClick.vue b/docs/components/content/examples/NotificationExampleClick.vue
index dca5952f..a272e0c6 100644
--- a/docs/components/content/examples/NotificationExampleClick.vue
+++ b/docs/components/content/examples/NotificationExampleClick.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onClick () {
diff --git a/docs/components/content/examples/NotificationExampleHtml.vue b/docs/components/content/examples/NotificationExampleHtml.vue
index 84553704..b14fd537 100644
--- a/docs/components/content/examples/NotificationExampleHtml.vue
+++ b/docs/components/content/examples/NotificationExampleHtml.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>
 
diff --git a/docs/components/content/examples/PaginationExampleBasic.vue b/docs/components/content/examples/PaginationExampleBasic.vue
index be40c31b..e5c34596 100644
--- a/docs/components/content/examples/PaginationExampleBasic.vue
+++ b/docs/components/content/examples/PaginationExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>
diff --git a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue b/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
index de65122d..95841e15 100644
--- a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
+++ b/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>
diff --git a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue b/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
index 17ce1bc8..7a1a2fed 100644
--- a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
+++ b/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>
diff --git a/docs/components/content/examples/PaginationExampleRTL.vue b/docs/components/content/examples/PaginationExampleRTL.vue
deleted file mode 100644
index 2735ea58..00000000
--- a/docs/components/content/examples/PaginationExampleRTL.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <div class="w-full divide-y divide-gray-200 dark:divide-gray-700 space-y-4">
-    <div class="flex flex-wrap gap-1 justify-between w-full">
-      <div dir="ltr">
-        <UInput
-          icon="i-heroicons-magnifying-glass-20-solid"
-          size="sm"
-          color="white"
-          placeholder="Search..."
-          :trailing="false"
-        />
-      </div>
-
-      <div dir="rtl">
-        <UInput
-          icon="i-heroicons-magnifying-glass-20-solid"
-          size="sm"
-          color="white"
-          placeholder="ابحث..."
-          :trailing="false"
-        />
-      </div>
-    </div>
-
-    <div class="flex flex-wrap gap-1 justify-between w-full pt-4">
-      <div dir="ltr">
-        <UPagination
-          v-model="page"
-          :total="items.length"
-          :prev-button="{
-            icon: 'i-heroicons-arrow-small-left-20-solid',
-            label: 'Prev',
-            color: 'gray'
-          }"
-          :next-button="{
-            icon: 'i-heroicons-arrow-small-right-20-solid',
-            trailing: true,
-            label: 'Next',
-            color: 'gray'
-          }"
-        />
-      </div>
-
-      <div dir="rtl">
-        <UPagination
-          v-model="page"
-          :total="items.length"
-          :prev-button="{
-            icon: 'i-heroicons-arrow-small-left-20-solid',
-            label: 'السابق',
-            color: 'gray'
-          }"
-          :next-button="{
-            icon: 'i-heroicons-arrow-small-right-20-solid',
-            trailing: true,
-            label: 'التالي',
-            color: 'gray'
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/docs/components/content/examples/PaginationExampleThemeRounded.vue b/docs/components/content/examples/PaginationExampleThemeRounded.vue
deleted file mode 100644
index 633e4473..00000000
--- a/docs/components/content/examples/PaginationExampleThemeRounded.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination
-    v-model="page"
-    :total="items.length"
-    :ui="{
-      wrapper: 'flex items-center gap-1',
-      rounded: '!rounded-full min-w-[32px] justify-center'
-    }"
-    :prev-button="null"
-    :next-button="{
-      icon: 'i-heroicons-arrow-small-right-20-solid',
-      color: 'primary',
-      variant: 'outline'
-    }"
-  />
-</template>
diff --git a/docs/components/content/examples/PopoverExampleOpen.vue b/docs/components/content/examples/PopoverExampleOpen.vue
index 41fc3470..2394d3fe 100644
--- a/docs/components/content/examples/PopoverExampleOpen.vue
+++ b/docs/components/content/examples/PopoverExampleOpen.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const open = ref(true)
 
 defineShortcuts({
diff --git a/docs/components/content/examples/ProgressExampleSlotIndicator.vue b/docs/components/content/examples/ProgressExampleSlotIndicator.vue
index 8a5f2ca3..bb93b0a0 100644
--- a/docs/components/content/examples/ProgressExampleSlotIndicator.vue
+++ b/docs/components/content/examples/ProgressExampleSlotIndicator.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const temp = ref(35)
 
 const color = computed(() => {
diff --git a/docs/components/content/examples/ProgressExampleSlotStep.vue b/docs/components/content/examples/ProgressExampleSlotStep.vue
index 709e484a..28291bf8 100644
--- a/docs/components/content/examples/ProgressExampleSlotStep.vue
+++ b/docs/components/content/examples/ProgressExampleSlotStep.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const task = ref(1)
 
 const steps = [
diff --git a/docs/components/content/examples/RadioExample.vue b/docs/components/content/examples/RadioExample.vue
index 36ae7223..c6b265e6 100644
--- a/docs/components/content/examples/RadioExample.vue
+++ b/docs/components/content/examples/RadioExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const methods = [
   { value: 'email', label: 'Email' },
   { value: 'sms', label: 'Phone (SMS)' },
diff --git a/docs/components/content/examples/RadioGroupExample.vue b/docs/components/content/examples/RadioGroupExample.vue
index 24747f72..ddc8acb3 100644
--- a/docs/components/content/examples/RadioGroupExample.vue
+++ b/docs/components/content/examples/RadioGroupExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [{
   value: 'email',
   label: 'Email'
diff --git a/docs/components/content/examples/RadioGroupLabelExample.vue b/docs/components/content/examples/RadioGroupLabelExample.vue
index 6861ebee..a9a58f96 100644
--- a/docs/components/content/examples/RadioGroupLabelExample.vue
+++ b/docs/components/content/examples/RadioGroupLabelExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
   { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
diff --git a/docs/components/content/examples/RangeExample.vue b/docs/components/content/examples/RangeExample.vue
index 9fa16e4c..61ea025f 100644
--- a/docs/components/content/examples/RangeExample.vue
+++ b/docs/components/content/examples/RangeExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref(50)
 </script>
 
diff --git a/docs/components/content/examples/SelectExample.vue b/docs/components/content/examples/SelectExample.vue
index 47c3abe2..19c82733 100644
--- a/docs/components/content/examples/SelectExample.vue
+++ b/docs/components/content/examples/SelectExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const countries = ['United States', 'Canada', 'Mexico']
 
 const country = ref(countries[0])
diff --git a/docs/components/content/examples/SelectExampleObjects.vue b/docs/components/content/examples/SelectExampleObjects.vue
index 0c9ea1b0..33c3ed6d 100644
--- a/docs/components/content/examples/SelectExampleObjects.vue
+++ b/docs/components/content/examples/SelectExampleObjects.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const countries = [{
   name: 'United States',
   value: 'US'
diff --git a/docs/components/content/examples/SelectMenuExampleArrow.vue b/docs/components/content/examples/SelectMenuExampleArrow.vue
index 1e458855..8cd45c7b 100644
--- a/docs/components/content/examples/SelectMenuExampleArrow.vue
+++ b/docs/components/content/examples/SelectMenuExampleArrow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/SelectMenuExampleBasic.vue b/docs/components/content/examples/SelectMenuExampleBasic.vue
index af46105b..a674ad0e 100644
--- a/docs/components/content/examples/SelectMenuExampleBasic.vue
+++ b/docs/components/content/examples/SelectMenuExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/SelectMenuExampleButton.vue b/docs/components/content/examples/SelectMenuExampleButton.vue
index a588ac54..a77f5d4a 100644
--- a/docs/components/content/examples/SelectMenuExampleButton.vue
+++ b/docs/components/content/examples/SelectMenuExampleButton.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[3])
diff --git a/docs/components/content/examples/SelectMenuExampleCreatable.vue b/docs/components/content/examples/SelectMenuExampleCreatable.vue
index 1a867d9c..500f5041 100644
--- a/docs/components/content/examples/SelectMenuExampleCreatable.vue
+++ b/docs/components/content/examples/SelectMenuExampleCreatable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = ref([
   { id: 1, name: 'bug', color: 'd73a4a' },
   { id: 2, name: 'documentation', color: '0075ca' },
diff --git a/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue b/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue
index df50b680..ffd929bf 100644
--- a/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue
+++ b/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = ref([
   { id: 1, name: 'bug' },
   { id: 2, name: 'documentation' },
diff --git a/docs/components/content/examples/SelectMenuExampleEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleEmptySlot.vue
index b7de74bc..974070e8 100644
--- a/docs/components/content/examples/SelectMenuExampleEmptySlot.vue
+++ b/docs/components/content/examples/SelectMenuExampleEmptySlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = []
 
 const selected = ref()
diff --git a/docs/components/content/examples/SelectMenuExampleMultiple.vue b/docs/components/content/examples/SelectMenuExampleMultiple.vue
index ea68128c..8cc2afc4 100644
--- a/docs/components/content/examples/SelectMenuExampleMultiple.vue
+++ b/docs/components/content/examples/SelectMenuExampleMultiple.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref([])
diff --git a/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue b/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue
index 282dd831..93620481 100644
--- a/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue
+++ b/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref([])
diff --git a/docs/components/content/examples/SelectMenuExampleObjects.vue b/docs/components/content/examples/SelectMenuExampleObjects.vue
index 766e1d7d..94959fe4 100644
--- a/docs/components/content/examples/SelectMenuExampleObjects.vue
+++ b/docs/components/content/examples/SelectMenuExampleObjects.vue
@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { Avatar } from '#ui/types'
+
 const people = [{
   id: 'benjamincanac',
   label: 'benjamincanac',
@@ -29,8 +31,8 @@ const selected = ref(people[0])
 <template>
   <USelectMenu v-model="selected" :options="people">
     <template #leading>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
+      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
     </template>
   </USelectMenu>
 </template>
diff --git a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
index af7f301a..3af61ae0 100644
--- a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
+++ b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Wade Cooper'
diff --git a/docs/components/content/examples/SelectMenuExampleOffset.vue b/docs/components/content/examples/SelectMenuExampleOffset.vue
index 2dbf9290..f549c1f4 100644
--- a/docs/components/content/examples/SelectMenuExampleOffset.vue
+++ b/docs/components/content/examples/SelectMenuExampleOffset.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
index 999580ce..a5373b20 100644
--- a/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
+++ b/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/SelectMenuExampleOptionSlot.vue b/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
index 71deeb36..ba31cf87 100644
--- a/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
+++ b/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { name: 'Wade Cooper', online: true },
   { name: 'Arlene Mccoy', online: false },
diff --git a/docs/components/content/examples/SelectMenuExamplePlacement.vue b/docs/components/content/examples/SelectMenuExamplePlacement.vue
index 6b1850a1..8301851f 100644
--- a/docs/components/content/examples/SelectMenuExamplePlacement.vue
+++ b/docs/components/content/examples/SelectMenuExamplePlacement.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])
diff --git a/docs/components/content/examples/SelectMenuExampleSearchAsync.vue b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
index fa320cff..9a98038b 100644
--- a/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
+++ b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 const loading = ref(false)
 const selected = ref([])
 
-async function search (q) {
+async function search (q: string) {
   loading.value = true
 
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
   loading.value = false
 
diff --git a/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue b/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
index 008a6f63..0e39b891 100644
--- a/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
+++ b/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
   { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
diff --git a/docs/components/content/examples/SelectMenuExampleSearchQuery.vue b/docs/components/content/examples/SelectMenuExampleSearchQuery.vue
index db05eafb..8703a4cf 100644
--- a/docs/components/content/examples/SelectMenuExampleSearchQuery.vue
+++ b/docs/components/content/examples/SelectMenuExampleSearchQuery.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref()
diff --git a/docs/components/content/examples/SlideoverExampleBasic.vue b/docs/components/content/examples/SlideoverExampleBasic.vue
index 14e0d6e1..f2e7d93e 100644
--- a/docs/components/content/examples/SlideoverExampleBasic.vue
+++ b/docs/components/content/examples/SlideoverExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/SlideoverExampleCard.vue b/docs/components/content/examples/SlideoverExampleCard.vue
index 39081456..40121b80 100644
--- a/docs/components/content/examples/SlideoverExampleCard.vue
+++ b/docs/components/content/examples/SlideoverExampleCard.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
index c13de9b0..be1575b7 100644
--- a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
+++ b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/SlideoverExampleDisableTransition.vue b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
index b3ca92d7..b48c9865 100644
--- a/docs/components/content/examples/SlideoverExampleDisableTransition.vue
+++ b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/SlideoverExamplePreventClose.vue b/docs/components/content/examples/SlideoverExamplePreventClose.vue
index 68fdf4f4..2985bc31 100644
--- a/docs/components/content/examples/SlideoverExamplePreventClose.vue
+++ b/docs/components/content/examples/SlideoverExamplePreventClose.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/TableExampleBasic.vue b/docs/components/content/examples/TableExampleBasic.vue
index bde7d169..1c2539f0 100644
--- a/docs/components/content/examples/TableExampleBasic.vue
+++ b/docs/components/content/examples/TableExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
diff --git a/docs/components/content/examples/TableExampleClickable.vue b/docs/components/content/examples/TableExampleClickable.vue
index de85826d..0aa31778 100644
--- a/docs/components/content/examples/TableExampleClickable.vue
+++ b/docs/components/content/examples/TableExampleClickable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
diff --git a/docs/components/content/examples/TableExampleColumns.vue b/docs/components/content/examples/TableExampleColumns.vue
index 4659f01c..73a389ea 100644
--- a/docs/components/content/examples/TableExampleColumns.vue
+++ b/docs/components/content/examples/TableExampleColumns.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: 'ID'
diff --git a/docs/components/content/examples/TableExampleColumnsSelectable.vue b/docs/components/content/examples/TableExampleColumnsSelectable.vue
index d0e5e7f9..3985d75d 100644
--- a/docs/components/content/examples/TableExampleColumnsSelectable.vue
+++ b/docs/components/content/examples/TableExampleColumnsSelectable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: 'ID'
diff --git a/docs/components/content/examples/TableExampleColumnsSortable.vue b/docs/components/content/examples/TableExampleColumnsSortable.vue
index 4f18df37..7629bab6 100644
--- a/docs/components/content/examples/TableExampleColumnsSortable.vue
+++ b/docs/components/content/examples/TableExampleColumnsSortable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: 'ID'
@@ -14,7 +14,7 @@ const columns = [{
   key: 'email',
   label: 'Email',
   sortable: true,
-  direction: 'desc'
+  direction: 'desc' as const
 }, {
   key: 'role',
   label: 'Role'
diff --git a/docs/components/content/examples/TableExampleEmptySlot.vue b/docs/components/content/examples/TableExampleEmptySlot.vue
index d4b4cf29..575abf52 100644
--- a/docs/components/content/examples/TableExampleEmptySlot.vue
+++ b/docs/components/content/examples/TableExampleEmptySlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'name',
   label: 'Name'
diff --git a/docs/components/content/examples/TableExampleLoadingSlot.vue b/docs/components/content/examples/TableExampleLoadingSlot.vue
index 26650178..5de1a833 100644
--- a/docs/components/content/examples/TableExampleLoadingSlot.vue
+++ b/docs/components/content/examples/TableExampleLoadingSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'name',
   label: 'Name'
diff --git a/docs/components/content/examples/TableExamplePaginable.vue b/docs/components/content/examples/TableExamplePaginable.vue
index e783577c..0a5ec67f 100644
--- a/docs/components/content/examples/TableExamplePaginable.vue
+++ b/docs/components/content/examples/TableExamplePaginable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
diff --git a/docs/components/content/examples/TableExampleReactiveSorting.vue b/docs/components/content/examples/TableExampleReactiveSorting.vue
index b8a22c01..20a3aa70 100644
--- a/docs/components/content/examples/TableExampleReactiveSorting.vue
+++ b/docs/components/content/examples/TableExampleReactiveSorting.vue
@@ -1,7 +1,7 @@
-<script setup>
+<script setup lang="ts">
 const sort = ref({
   column: 'name',
-  direction: 'desc'
+  direction: 'desc' as const
 })
 
 const columns = [{
@@ -22,7 +22,7 @@ const columns = [{
   key: 'role',
   label: 'Role',
   sortable: true,
-  direction: 'desc'
+  direction: 'desc' as const
 }]
 
 const people = [{
diff --git a/docs/components/content/examples/TableExampleSearchable.vue b/docs/components/content/examples/TableExampleSearchable.vue
index 1f3d3f0e..50795211 100644
--- a/docs/components/content/examples/TableExampleSearchable.vue
+++ b/docs/components/content/examples/TableExampleSearchable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: 'ID'
diff --git a/docs/components/content/examples/TableExampleSelectable.vue b/docs/components/content/examples/TableExampleSelectable.vue
index 5fb7dc54..29e38ba2 100644
--- a/docs/components/content/examples/TableExampleSelectable.vue
+++ b/docs/components/content/examples/TableExampleSelectable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
diff --git a/docs/components/content/examples/TableExampleSlots.vue b/docs/components/content/examples/TableExampleSlots.vue
index 5038f344..4e89c7c8 100644
--- a/docs/components/content/examples/TableExampleSlots.vue
+++ b/docs/components/content/examples/TableExampleSlots.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'name',
   label: 'Name'
diff --git a/docs/components/content/examples/TableExampleStyle.vue b/docs/components/content/examples/TableExampleStyle.vue
index 905f9288..5b5bd2d8 100644
--- a/docs/components/content/examples/TableExampleStyle.vue
+++ b/docs/components/content/examples/TableExampleStyle.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: '#'
diff --git a/docs/components/content/examples/TabsExampleBasic.vue b/docs/components/content/examples/TabsExampleBasic.vue
index 6d3a1c2b..d2357ea7 100644
--- a/docs/components/content/examples/TabsExampleBasic.vue
+++ b/docs/components/content/examples/TabsExampleBasic.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Tab1',
   content: 'This is the content shown for Tab1'
diff --git a/docs/components/content/examples/TabsExampleChange.vue b/docs/components/content/examples/TabsExampleChange.vue
index 751e7741..d893e7e7 100644
--- a/docs/components/content/examples/TabsExampleChange.vue
+++ b/docs/components/content/examples/TabsExampleChange.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Tab1',
   content: 'This is the content shown for Tab1'
diff --git a/docs/components/content/examples/TabsExampleDefaultSlot.vue b/docs/components/content/examples/TabsExampleDefaultSlot.vue
index 1e12b16c..6d335b87 100644
--- a/docs/components/content/examples/TabsExampleDefaultSlot.vue
+++ b/docs/components/content/examples/TabsExampleDefaultSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',
diff --git a/docs/components/content/examples/TabsExampleIndex.vue b/docs/components/content/examples/TabsExampleIndex.vue
index 4ab99511..1482d147 100644
--- a/docs/components/content/examples/TabsExampleIndex.vue
+++ b/docs/components/content/examples/TabsExampleIndex.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Tab1',
   content: 'This is the content shown for Tab1'
diff --git a/docs/components/content/examples/TabsExampleItemCustomSlot.vue b/docs/components/content/examples/TabsExampleItemCustomSlot.vue
index 903f1c0e..5a15e10a 100644
--- a/docs/components/content/examples/TabsExampleItemCustomSlot.vue
+++ b/docs/components/content/examples/TabsExampleItemCustomSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   slot: 'account',
   label: 'Account'
diff --git a/docs/components/content/examples/TabsExampleItemSlot.vue b/docs/components/content/examples/TabsExampleItemSlot.vue
index c991b8f0..9bc2a33a 100644
--- a/docs/components/content/examples/TabsExampleItemSlot.vue
+++ b/docs/components/content/examples/TabsExampleItemSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   key: 'account',
   label: 'Account',
diff --git a/docs/components/content/examples/TabsExampleVModel.vue b/docs/components/content/examples/TabsExampleVModel.vue
index aa76745b..97c690b4 100644
--- a/docs/components/content/examples/TabsExampleVModel.vue
+++ b/docs/components/content/examples/TabsExampleVModel.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Tab1',
   content: 'This is the content shown for Tab1'
diff --git a/docs/components/content/examples/TabsExampleVertical.vue b/docs/components/content/examples/TabsExampleVertical.vue
index a5f73297..e49802ea 100644
--- a/docs/components/content/examples/TabsExampleVertical.vue
+++ b/docs/components/content/examples/TabsExampleVertical.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Tab1',
   content: 'This is the content shown for Tab1'
diff --git a/docs/components/content/examples/TextareaExample.vue b/docs/components/content/examples/TextareaExample.vue
index 9aa4a05f..cbcb27d5 100644
--- a/docs/components/content/examples/TextareaExample.vue
+++ b/docs/components/content/examples/TextareaExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref('')
 </script>
 
diff --git a/docs/components/content/examples/ToggleExample.vue b/docs/components/content/examples/ToggleExample.vue
index a23f8044..85d91463 100644
--- a/docs/components/content/examples/ToggleExample.vue
+++ b/docs/components/content/examples/ToggleExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const selected = ref(false)
 </script>
 
diff --git a/docs/components/content/examples/VerticalNavigationExample.vue b/docs/components/content/examples/VerticalNavigationExample.vue
index 7b5bd7c0..f6b30567 100644
--- a/docs/components/content/examples/VerticalNavigationExample.vue
+++ b/docs/components/content/examples/VerticalNavigationExample.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 const links = [{
@@ -14,11 +14,11 @@ const links = [{
 }, {
   label: 'Vertical Navigation',
   icon: 'i-heroicons-chart-bar',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/vertical-navigation`
 }, {
   label: 'Command Palette',
   icon: 'i-heroicons-command-line',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }]
 </script>
 
diff --git a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
index 02ded2cf..9532cee1 100644
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
diff --git a/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue b/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue
index 701a2330..cecacf96 100644
--- a/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: '.github',
   icon: 'i-heroicons-folder-20-solid',
diff --git a/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue b/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue
index 48118a7c..c99dd4f8 100644
--- a/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue
@@ -1,13 +1,13 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Vertical Navigation',
-  to: '/navigation/vertical-navigation'
+  to: '/components/vertical-navigation'
 }, {
   label: 'Command Palette',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }, {
   label: 'Table',
-  to: '/data/table'
+  to: '/components/table'
 }]
 </script>
 
diff --git a/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue b/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue
index 16a5afb9..10806722 100644
--- a/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const types = {
   bug: {
     icon: 'i-heroicons-bug-ant-20-solid',
@@ -32,7 +32,7 @@ const links = [{
 </script>
 
 <template>
-  <UVerticalNavigation 
+  <UVerticalNavigation
     :links="links"
     :ui="{ wrapper: 'truncate' }"
   >
diff --git a/docs/components/content/examples/VerticalNavigationExampleSections.vue b/docs/components/content/examples/VerticalNavigationExampleSections.vue
index 8d4b22fa..5cf73ebf 100644
--- a/docs/components/content/examples/VerticalNavigationExampleSections.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleSections.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 const links = [
@@ -15,11 +15,11 @@ const links = [
   }, {
     label: 'Vertical Navigation',
     icon: 'i-heroicons-chart-bar',
-    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/vertical-navigation`
   }, {
     label: 'Command Palette',
     icon: 'i-heroicons-command-line',
-    to: '/navigation/command-palette'
+    to: '/components/command-palette'
   }], [{
     label: 'Examples',
     icon: 'i-heroicons-light-bulb'
diff --git a/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue b/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
index cccea365..922e3bf6 100644
--- a/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Introduction',
   to: '/getting-started'
@@ -11,9 +11,6 @@ const links = [{
 }, {
   label: 'Shortcuts',
   to: '/getting-started/shortcuts'
-}, {
-  label: 'Examples',
-  to: '/getting-started/examples'
 }]
 </script>
 
diff --git a/docs/components/date-picker/DatePicker.vue b/docs/components/date-picker/DatePicker.vue
index 0b0dd689..aab18eaa 100644
--- a/docs/components/date-picker/DatePicker.vue
+++ b/docs/components/date-picker/DatePicker.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
 import 'v-calendar/dist/style.css'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps({
   modelValue: {
-    type: Date,
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
     default: null
   }
 })
 
 const emit = defineEmits(['update:model-value', 'close'])
 
-const colorMode = useColorMode()
-
-const isDark = computed(() => colorMode.value === 'dark')
-
 const date = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -23,28 +24,18 @@ const date = computed({
   }
 })
 
-const attrs = [{
-  key: 'today',
-  highlight: {
-    color: 'blue',
-    fillMode: 'outline',
-    class: '!bg-gray-100 dark:!bg-gray-800'
-  },
-  dates: new Date()
-}]
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2
+}
 </script>
 
 <template>
-  <VCalendarDatePicker
-    v-model="date"
-    transparent
-    borderless
-    :attributes="attrs"
-    :is-dark="isDark"
-    title-position="left"
-    trim-weeks
-    :first-day-of-week="2"
-  />
+  <VCalendarDatePicker v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
 </template>
 
 <style>
@@ -61,7 +52,7 @@ const attrs = [{
   --vc-gray-900: rgb(var(--color-gray-900));
 }
 
-.vc-blue {
+.vc-primary {
   --vc-accent-50: rgb(var(--color-primary-50));
   --vc-accent-100: rgb(var(--color-primary-100));
   --vc-accent-200: rgb(var(--color-primary-200));
diff --git a/docs/components/home/HomeProDemo.vue b/docs/components/home/HomeProDemo.vue
new file mode 100644
index 00000000..4e70fa74
--- /dev/null
+++ b/docs/components/home/HomeProDemo.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="rounded-xl border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 p-4 flex-1 w-full">
+    <div class="relative h-full">
+      <TransitionGroup name="fade">
+        <HomeProDemoBlock v-for="(block, index) in blocks" :key="index" :block="block">
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </HomeProDemoBlock>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HomeProBlock } from '~/types'
+
+defineProps<{ blocks: HomeProBlock[] }>()
+</script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/docs/components/home/HomeProDemoBlock.vue b/docs/components/home/HomeProDemoBlock.vue
new file mode 100644
index 00000000..8e48901a
--- /dev/null
+++ b/docs/components/home/HomeProDemoBlock.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    :id="block.id"
+    :class="twMerge(
+      'absolute rounded-lg flex items-center justify-center',
+      block.class,
+      !block.slot && (block.inactive || block.inactive === undefined ? 'border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 transition-[background,text] duration-500' : 'bg-primary transition-[background,text] duration-500'),
+      block.name?.startsWith('#') && 'border-dashed'
+    )"
+    :style="block.style"
+  >
+    <NuxtLink v-if="block.to && !block.inactive" :to="block.to" class="focus:outline-none" tabindex="-1">
+      <span class="absolute inset-0" aria-hidden="true" />
+    </NuxtLink>
+
+    <template v-if="block.inactive">
+      <TransitionGroup name="fade">
+        <HomeProDemoBlock v-for="(subComponent, subIndex) in block.children" :key="subIndex" :block="subComponent">
+          <template v-for="(_, name) in $slots" #[name]="slotData: any">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </HomeProDemoBlock>
+      </TransitionGroup>
+    </template>
+    <template v-else-if="block.slot">
+      <slot :name="block.slot" />
+    </template>
+    <p
+      v-else
+      class="font-semibold flex flex-col gap-1 text-center"
+      :class="[
+        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
+      ]"
+    >
+      {{ block.name }}
+
+      <span v-if="block.description" class="font-normal">{{ block.description }}</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+import type { HomeProBlock } from '~/types'
+
+defineProps<{ block: HomeProBlock }>()
+</script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/docs/composables/useContentSource.ts b/docs/composables/useContentSource.ts
index 552c3f1d..a378c0db 100644
--- a/docs/composables/useContentSource.ts
+++ b/docs/composables/useContentSource.ts
@@ -4,27 +4,59 @@ export const useContentSource = () => {
   const config = useRuntimeConfig().public
 
   const branches = computed(() => [{
-    id: 'dev',
-    name: 'dev',
-    icon: 'i-heroicons-cube',
-    suffix: 'dev',
-    label: 'Edge',
-    disabled: route.path.startsWith('/dev'),
-    click: () => select({ name: 'dev' })
-  }, {
     id: 'main',
     name: 'main',
+    label: 'nuxt/ui',
     icon: 'i-heroicons-cube',
-    suffix: 'latest',
-    label: `v${config.version}`,
-    disabled: !route.path.startsWith('/dev'),
+    suffix: `v${config.version}`,
     click: () => select({ name: 'main' })
+  }, {
+    id: 'dev',
+    name: 'dev',
+    label: 'nuxt/ui-edge',
+    icon: 'i-heroicons-cube-transparent',
+    suffix: 'dev',
+    click: () => select({ name: 'dev' })
+  }, {
+    id: 'pro',
+    name: 'pro',
+    label: 'nuxt/ui-pro',
+    icon: 'i-heroicons-cube',
+    suffix: `v${config.proVersion}`,
+    click: () => select({ name: 'pro' })
+  }, {
+    id: 'pro-edge',
+    name: 'pro-edge',
+    label: 'nuxt/ui-pro-edge',
+    icon: 'i-heroicons-cube-transparent',
+    suffix: 'dev',
+    disabled: true,
+    click: () => select({ name: 'pro-dev' })
   }])
 
-  const branch = computed(() => branches.value.find(b => b.name === (route.path.startsWith('/dev') ? 'dev' : 'main')))
+  const branch = computed(() => branches.value.find(b => b.name === (route.path.startsWith('/dev') ? 'dev' : route.path.startsWith('/pro') ? 'pro' : 'main')))
 
-  function select (branch) {
-    if (branch.name === 'dev') {
+  function select (b) {
+    if (b.name === branch.value.name) {
+      return
+    }
+
+    if (b.name === 'pro') {
+      router.push('/pro/getting-started')
+      return
+    }
+
+    if (branch.value.name === 'pro') {
+      if (b.name === 'dev') {
+        router.push('/dev/getting-started')
+      } else {
+        router.push('/getting-started')
+      }
+
+      return
+    }
+
+    if (b.name === 'dev') {
       if (route.path.startsWith('/dev')) {
         return
       }
@@ -37,7 +69,6 @@ export const useContentSource = () => {
 
   return {
     branches,
-    branch,
-    select
+    branch
   }
 }
diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md
index 6cd8d978..88a00ead 100644
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -3,11 +3,9 @@ title: Introduction
 description: 'Fully styled and customizable components for Nuxt.'
 ---
 
-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.
+Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
 
-::callout{icon="i-heroicons-light-bulb"}
-[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
-::
+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.
 
 ## Features
 
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 1774227d..a2b2ba7f 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -1,8 +1,9 @@
 ---
-description: 'Learn how to install and configure the module in your Nuxt app.'
+title: Installation
+description: 'Learn how to install and configure Nuxt UI in your application.'
 ---
 
-## Quick Start
+## Setup
 
 1. Install `@nuxt/ui` dependency to your project:
 
@@ -91,7 +92,7 @@ You can read more about this in the [Theming](/getting-started/theming#dark-mode
 This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
 
 ::callout{icon="i-heroicons-light-bulb"}
-You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/elements/icon) component page.
+You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/components/icon) component page.
 ::
 
 ## TypeScript
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 130051c1..65a6c557 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -2,8 +2,6 @@
 description: 'Learn how to customize the look and feel of the components.'
 ---
 
-## Overview
-
 This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
 
 ## Colors
@@ -70,7 +68,7 @@ The `primary` color also has a `DEFAULT` shade that changes based on the theme.
 
 ### Smart Safelisting
 
-Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [RadioGroup](/forms/radio-group), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components having a `color` prop like [Avatar](/components/avatar#chip), [Badge](/components/badge#style), [Button](/components/button#style), [Input](/components/input#style) (inherited in [Select](/components/select) and [SelectMenu](/components/select-menu)), [RadioGroup](/components/radio-group), [Checkbox](/components/checkbox), [Toggle](/components/toggle), [Range](/components/range) and [Notification](/components/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
 
@@ -227,10 +225,6 @@ All the components are styled with dark mode in mind.
 
 Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
 
-::callout{icon="i-heroicons-puzzle-piece"}
-Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
-::
-
 You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
 
 ```ts [nuxt.config.ts]
@@ -245,6 +239,42 @@ export default defineNuxtConfig({
 If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
 ::
 
+You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
+
+::component-example
+#default
+:color-mode-button
+
+#code
+```vue
+<script setup>
+const colorMode = useColorMode()
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+```
+::
+
 ## Icons
 
 You can use any icon (100,000+) from [Iconify](https://iconify.design/).
@@ -257,7 +287,7 @@ Some components have an `icon` prop that allows you to add an icon to the compon
 </template>
 ```
 
-You can also use the [Icon](/elements/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
 
 ```vue
 <template>
@@ -347,7 +377,7 @@ export default defineNuxtConfig({
 
 The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
 
-Read more about this in the [Icon](/elements/icon#dynamic) component page.
+Read more about this in the [Icon](/components/icon#dynamic) component page.
 
 ### Defaults
 
diff --git a/docs/content/1.getting-started/4.shortcuts.md b/docs/content/1.getting-started/4.shortcuts.md
index a6eb62c8..65dfce63 100644
--- a/docs/content/1.getting-started/4.shortcuts.md
+++ b/docs/content/1.getting-started/4.shortcuts.md
@@ -2,15 +2,13 @@
 description: 'Learn how to display and define keyboard shortcuts in your app.'
 ---
 
-## Overview
-
-Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
+Some components like [Dropdown](/components/dropdown), [Command Palette](/components/command-palette) and [Tooltip](/components/tooltip) support the display of keyboard shortcuts.
 
 ```vue
 <UDropdown :items="[[{ label: 'Edit', shortcuts: ['E'] }]]" />
 ```
 
-Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
+Shortcuts are displayed and styled through the [Kbd](/components/kbd) component.
 
 ```vue
 <template>
diff --git a/docs/content/1.getting-started/5.examples.md b/docs/content/1.getting-started/5.examples.md
deleted file mode 100644
index 0635ad88..00000000
--- a/docs/content/1.getting-started/5.examples.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: Examples
-description: Discover some real-life examples of components you can build.
----
-
-::callout{icon="i-heroicons-wrench-screwdriver"}
-If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxt/ui/issues/297).
-::
-
-## Components
-
-You can mix and match components to build your own UI.
-
-### ColorModeButton
-
-You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
-
-::component-example
-#default
-:color-mode-button
-
-#code
-```vue
-<script setup>
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-</script>
-
-<template>
-  <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
-      variant="ghost"
-      aria-label="Theme"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
-</template>
-```
-::
-
-### DatePicker
-
-Here is an example of a date picker component built with [v-calendar](https://github.com/nathanreyes/v-calendar).
-
-```vue [components/DatePicker.vue]
-<script setup lang="ts">
-import { DatePicker as VCalendarDatePicker } from 'v-calendar'
-import 'v-calendar/dist/style.css'
-
-const props = defineProps({
-  modelValue: {
-    type: Date,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:model-value', 'close'])
-
-const colorMode = useColorMode()
-
-const isDark = computed(() => colorMode.value === 'dark')
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:model-value', value)
-    emit('close')
-  }
-})
-
-const attrs = [{
-  key: 'today',
-  highlight: {
-    color: 'blue',
-    fillMode: 'outline',
-    class: '!bg-gray-100 dark:!bg-gray-800'
-  },
-  dates: new Date()
-}]
-</script>
-
-<template>
-  <VCalendarDatePicker
-    v-model="date"
-    transparent
-    borderless
-    :attributes="attrs"
-    :is-dark="isDark"
-    title-position="left"
-    trim-weeks
-    :first-day-of-week="2"
-  />
-</template>
-```
-
-You can use it inside a [Popover](/overlays/popover) component to display it when clicking on a [Button](/elements/button).
-
-:component-example{component="date-picker-example"}
-
-### Table
-
-Here is an example of a Table component with all its features implemented.
-
-:component-example{component="table-example-advanced" hiddenCode :padding="false" }
-
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
-Take a look at the component!
-::
-
-## Theming
-
-Our theming system provides a lot of flexibility to customize the components.
-
-### CommandPalette
-
-Here is some examples of what you can do with the [CommandPalette](/navigation/command-palette).
-
-#### Algolia
-
-::component-example
----
-padding: false
-component: 'command-palette-example-theme-algolia'
-componentProps:
-  class: 'max-h-[480px] rounded-md'
-hiddenCode: true
----
-::
-
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
-Take a look at the component!
-::
-
-#### Raycast
-
-::component-example
----
-padding: false
-component: 'command-palette-example-theme-raycast'
-componentProps:
-  class: 'max-h-[480px] rounded-md'
-hiddenCode: true
----
-::
-
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
-Take a look at the component!
-::
-
-### VerticalNavigation
-
-:component-example{component="vertical-navigation-example-theme-tailwind"}
-
-### Pagination
-
-:component-example{component="pagination-example-theme-rounded"}
-
-## RTL Support
-
-Here are some examples of how components look like in RTL mode.
-
-### Pagination
-
-:component-example{component="pagination-example-r-t-l" hiddenCode}
-
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue" target="_blank"}
-Take a look at the component!
-::
diff --git a/docs/content/1.getting-started/6.contributing.md b/docs/content/1.getting-started/6.contributing.md
index 62e27542..ac5a6fcc 100644
--- a/docs/content/1.getting-started/6.contributing.md
+++ b/docs/content/1.getting-started/6.contributing.md
@@ -1,10 +1,9 @@
 ---
 title: Contributing
 description: Learn how to contribute to Nuxt UI.
+navigation: false
 ---
 
-## Overview
-
 Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback.
 
 Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues).
diff --git a/docs/content/2.elements/1.accordion.md b/docs/content/2.components/accordion.md
similarity index 94%
rename from docs/content/2.elements/1.accordion.md
rename to docs/content/2.components/accordion.md
index 5c6cd08e..7f3a0229 100644
--- a/docs/content/2.elements/1.accordion.md
+++ b/docs/content/2.components/accordion.md
@@ -11,7 +11,7 @@ links:
 
 ## Usage
 
-Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/elements/button) component such as `label`, `icon`, `color`, `variant`, `size`, etc. but also:
+Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/components/button) component such as `label`, `icon`, `color`, `variant`, `size`, etc. but also:
 
 - `slot` - A key to customize the item with a slot.
 - `content` - The content to display in the panel by default.
@@ -23,7 +23,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 
 ### Style
 
-You can also pass any prop from the [Button](/elements/button) component directly to the Accordion component to style the buttons.
+You can also pass any prop from the [Button](/components/button) component directly to the Accordion component to style the buttons.
 
 ::component-card
 ---
diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.components/alert.md
similarity index 87%
rename from docs/content/2.elements/2.alert.md
rename to docs/content/2.components/alert.md
index 48f834f8..0d74544c 100644
--- a/docs/content/2.elements/2.alert.md
+++ b/docs/content/2.components/alert.md
@@ -48,7 +48,7 @@ excludedProps:
 
 ### Avatar
 
-Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
 
 ::component-card
 ---
@@ -93,7 +93,7 @@ excludedProps:
 
 Use the `close-button` prop to hide or customize the close button on the Alert.
 
-You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`.
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`.
 
 It defaults to `null` which means no close button will be displayed. A `close` event will be emitted when the close button is clicked.
 
@@ -116,7 +116,7 @@ excludedProps:
 
 Use the `actions` prop to add actions to the Alert.
 
-Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`.
+Like for `closeButton`, you can pass all the props of the [Button](/components/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`.
 
 ::component-card
 ---
diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.components/avatar.md
similarity index 100%
rename from docs/content/2.elements/3.avatar.md
rename to docs/content/2.components/avatar.md
diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.components/badge.md
similarity index 100%
rename from docs/content/2.elements/4.badge.md
rename to docs/content/2.components/badge.md
diff --git a/docs/content/5.navigation/5.breadcrumb.md b/docs/content/2.components/breadcrumb.md
similarity index 100%
rename from docs/content/5.navigation/5.breadcrumb.md
rename to docs/content/2.components/breadcrumb.md
diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.components/button.md
similarity index 98%
rename from docs/content/2.elements/5.button.md
rename to docs/content/2.components/button.md
index fa593b70..fb8b8b13 100644
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.components/button.md
@@ -310,7 +310,7 @@ code: |
 :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
 ::
 
-This can also work with an [Input](/forms/input) component for example:
+This can also work with an [Input](/components/input) component for example:
 
 ::component-card{slug="UButtonGroup"}
 ---
diff --git a/docs/content/7.layout/1.card.md b/docs/content/2.components/card.md
similarity index 100%
rename from docs/content/7.layout/1.card.md
rename to docs/content/2.components/card.md
diff --git a/docs/content/2.elements/13.carousel.md b/docs/content/2.components/carousel.md
similarity index 100%
rename from docs/content/2.elements/13.carousel.md
rename to docs/content/2.components/carousel.md
diff --git a/docs/content/3.forms/5.checkbox.md b/docs/content/2.components/checkbox.md
similarity index 100%
rename from docs/content/3.forms/5.checkbox.md
rename to docs/content/2.components/checkbox.md
diff --git a/docs/content/2.elements/12.chip.md b/docs/content/2.components/chip.md
similarity index 100%
rename from docs/content/2.elements/12.chip.md
rename to docs/content/2.components/chip.md
diff --git a/docs/content/5.navigation/2.command-palette.md b/docs/content/2.components/command-palette.md
similarity index 86%
rename from docs/content/5.navigation/2.command-palette.md
rename to docs/content/2.components/command-palette.md
index 9d9265ee..5ed0cb49 100644
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/2.components/command-palette.md
@@ -96,7 +96,7 @@ excludedProps:
 
 Use the `close-button` prop to display a close button on the right side of the input.
 
-You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
 
 ::component-card
 ---
@@ -257,3 +257,39 @@ When accessing the component via a template ref, you can use the following:
 ## Config
 
 :component-preset
+
+## Example
+
+Here are a few examples illustrating how you can customize the appearance of the `CommandPalette` component by utilizing its `ui` prop.
+
+### Algolia
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-theme-algolia'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
+Take a look at the component!
+::
+
+### Raycast
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-theme-raycast'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
+Take a look at the component!
+::
diff --git a/docs/content/7.layout/2.container.md b/docs/content/2.components/container.md
similarity index 100%
rename from docs/content/7.layout/2.container.md
rename to docs/content/2.components/container.md
diff --git a/docs/content/6.overlays/5.context-menu.md b/docs/content/2.components/context-menu.md
similarity index 100%
rename from docs/content/6.overlays/5.context-menu.md
rename to docs/content/2.components/context-menu.md
diff --git a/docs/content/2.components/date-picker.md b/docs/content/2.components/date-picker.md
new file mode 100644
index 00000000..1ae6b7de
--- /dev/null
+++ b/docs/content/2.components/date-picker.md
@@ -0,0 +1,112 @@
+---
+title: DatePicker
+description: 'An example of a date picker component built with v-calendar.'
+---
+
+## Installation
+
+This example is a composition of a [Popover](/components/popover) and [v-calendar](https://github.com/nathanreyes/v-calendar). We also use [date-fns](https://date-fns.org/) to format dates.
+
+::callout{icon="i-heroicons-light-bulb"}
+Note that you can use any calendar library you want.
+::
+
+Let's start by installing the `v-calendar` and `date-fns` dependency:
+
+::code-group
+
+```bash [pnpm]
+pnpm add v-calendar
+```
+
+```bash [yarn]
+yarn add v-calendar
+```
+
+```bash [npm]
+npm install v-calendar
+```
+
+::
+
+## Usage
+
+You can create a `DatePicker.vue` component based on the `DatePicker` from `v-calendar`.
+
+The following example is styled based on the `primary` and `gray` colors and supports the `dark` mode. It also supports a `v-model` or `v-model.range` depending on the type of date you want to use.
+
+```vue [components/DatePicker.vue]
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2,
+}
+</script>
+
+<template>
+  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-primary {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+</style>
+```
+
+## Examples
+
+### DatePicker
+
+:component-example{component="date-picker-example"}
+
+### DateRangePicker
+
+:component-example{component="date-picker-range-example"}
diff --git a/docs/content/7.layout/4.divider.md b/docs/content/2.components/divider.md
similarity index 94%
rename from docs/content/7.layout/4.divider.md
rename to docs/content/2.components/divider.md
index 82661a9b..c89bb4bb 100644
--- a/docs/content/7.layout/4.divider.md
+++ b/docs/content/2.components/divider.md
@@ -34,7 +34,7 @@ excludedProps:
 
 ### Avatar
 
-Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
 
 ::component-card
 ---
diff --git a/docs/content/2.elements/6.dropdown.md b/docs/content/2.components/dropdown.md
similarity index 97%
rename from docs/content/2.elements/6.dropdown.md
rename to docs/content/2.components/dropdown.md
index a7c218aa..fd4f6b6f 100644
--- a/docs/content/2.elements/6.dropdown.md
+++ b/docs/content/2.components/dropdown.md
@@ -17,7 +17,7 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 - `labelClass` - The class of the item label.
 - `icon` - The icon of the item.
 - `iconClass` - The class of the item icon.
-- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
+- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/components/avatar) component.
 - `shortcuts` - The shortcuts of the item.
 - `slot` - The slot of the item.
 - `disabled` - Whether the item is disabled.
diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/2.components/form-group.md
similarity index 94%
rename from docs/content/3.forms/9.form-group.md
rename to docs/content/2.components/form-group.md
index 605b22e7..02bcbca3 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/docs/content/2.components/form-group.md
@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-Use the FormGroup component around an [Input](/forms/input), [Textarea](/forms/textarea), [Select](/forms/select) or a [SelectMenu](/forms/select-menu) with a `label`. The `<label>` will automatically be associated with the form element so it gets focused on click.
+Use the FormGroup component around an [Input](/components/input), [Textarea](/components/textarea), [Select](/components/select) or a [SelectMenu](/components/select-menu) with a `label`. The `<label>` will automatically be associated with the form element so it gets focused on click.
 
 ::component-card
 ---
@@ -129,7 +129,7 @@ code: >-
 :u-input{model-value="benjamincanac" placeholder="you@example.com"}
 ::
 
-::callout{icon="i-heroicons-light-bulb" to="/forms/form"}
+::callout{icon="i-heroicons-light-bulb" to="/components/form"}
   Learn more about form validation in the `Form` component.
 ::
 
diff --git a/docs/content/3.forms/10.form.md b/docs/content/2.components/form.md
similarity index 97%
rename from docs/content/3.forms/10.form.md
rename to docs/content/2.components/form.md
index cb92d2c9..6278057d 100644
--- a/docs/content/3.forms/10.form.md
+++ b/docs/content/2.components/form.md
@@ -162,7 +162,7 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
 
 ::callout{icon="i-heroicons-light-bulb"}
-Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/forms/form-group#eager-validation) prop on [`FormGroup`](/forms/form-group) to `true`.
+Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/components/form-group#eager-validation) prop on [`FormGroup`](/components/form-group) to `true`.
 ::
 
 ::component-example
diff --git a/docs/content/5.navigation/6.horizontal-navigation.md b/docs/content/2.components/horizontal-navigation.md
similarity index 95%
rename from docs/content/5.navigation/6.horizontal-navigation.md
rename to docs/content/2.components/horizontal-navigation.md
index 27a3df5e..2db2568c 100644
--- a/docs/content/5.navigation/6.horizontal-navigation.md
+++ b/docs/content/2.components/horizontal-navigation.md
@@ -17,8 +17,8 @@ Pass an array to the `links` prop of the HorizontalNavigation component. Each li
 - `labelClass` - The class of the link label.
 - `icon` - The icon of the link.
 - `iconClass` - The class of the link icon.
-- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
-- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
+- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
 - `click` - The click handler of the link.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
diff --git a/docs/content/2.elements/7.icon.md b/docs/content/2.components/icon.md
similarity index 100%
rename from docs/content/2.elements/7.icon.md
rename to docs/content/2.components/icon.md
diff --git a/docs/content/3.forms/2.input-menu.md b/docs/content/2.components/input-menu.md
similarity index 90%
rename from docs/content/3.forms/2.input-menu.md
rename to docs/content/2.components/input-menu.md
index 3b247ef7..ec9c1d6e 100644
--- a/docs/content/3.forms/2.input-menu.md
+++ b/docs/content/2.components/input-menu.md
@@ -12,7 +12,7 @@ links:
 
 ## Usage
 
-The `InputMenu` component renders by default an [Input](/forms/input) component and is based on the `ui.input` preset. You can use most of the `Input` props to configure the display such as [color](/forms/input#style), [variant](/forms/input#style), [size](/forms/input#size), [placeholder](/forms/input#placeholder), [icon](/forms/input#icon), [disabled](/forms/input#disabled), etc.
+The `InputMenu` component renders by default an [Input](/components/input) component and is based on the `ui.input` preset. You can use most of the `Input` props to configure the display such as [color](/components/input#style), [variant](/components/input#style), [size](/components/input#size), [placeholder](/components/input#placeholder), [icon](/components/input#icon), [disabled](/components/input#disabled), etc.
 
 You can use the `ui` prop like the `Input` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
 
@@ -27,7 +27,7 @@ componentProps:
 ::
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
-This component does not support multiple values. Use the [SelectMenu](/forms/select-menu#multiple) component instead.
+This component does not support multiple values. Use the [SelectMenu](/components/select-menu#multiple) component instead.
 ::
 
 ### Objects
@@ -95,7 +95,7 @@ excludedProps:
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-Learn how to customize icons from the [Input](/forms/input#icon) component.
+Learn how to customize icons from the [Input](/components/input#icon) component.
 ::
 
 ## Searchable
diff --git a/docs/content/3.forms/1.input.md b/docs/content/2.components/input.md
similarity index 96%
rename from docs/content/3.forms/1.input.md
rename to docs/content/2.components/input.md
index 795591ec..2d17c5fa 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/2.components/input.md
@@ -71,7 +71,7 @@ props:
 
 Use the `type` prop to change the input type, the default `type` is set to `text`, you can check all the available types at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
 
-We have improved the implementation of certain types such as [Checkbox](/forms/checkbox), [Radio](/forms/radio-group), etc.
+We have improved the implementation of certain types such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc.
 
 ::component-card
 ---
@@ -197,7 +197,7 @@ baseProps:
   [EUR]{class="text-gray-500 dark:text-gray-400 text-xs"}
 ::
 
-You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered.
+You can for example create a clearable Input by injecting a [Button](/components/button) in the `trailing` slot that displays when some text is entered.
 
 :component-example{component="input-example-clearable"}
 
diff --git a/docs/content/2.elements/8.kbd.md b/docs/content/2.components/kbd.md
similarity index 100%
rename from docs/content/2.elements/8.kbd.md
rename to docs/content/2.components/kbd.md
diff --git a/docs/content/2.elements/9.link.md b/docs/content/2.components/link.md
similarity index 89%
rename from docs/content/2.elements/9.link.md
rename to docs/content/2.components/link.md
index 53017748..012c1ec6 100644
--- a/docs/content/2.elements/9.link.md
+++ b/docs/content/2.components/link.md
@@ -20,7 +20,7 @@ The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2
 ::component-card
 ---
 props:
-  to: /elements/link
+  to: /components/link
   activeClass: 'text-primary'
   inactiveClass: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
 code: ' Link '
@@ -31,7 +31,7 @@ Link
 
 It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
 
-It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
+It is used underneath by the [Button](/components/button), [Dropdown](/components/dropdown) and [VerticalNavigation](/components/vertical-navigation) components.
 
 ## Props
 
diff --git a/docs/content/2.elements/11.meter.md b/docs/content/2.components/meter.md
similarity index 98%
rename from docs/content/2.elements/11.meter.md
rename to docs/content/2.components/meter.md
index e8ee4fd3..2a9dcc8c 100644
--- a/docs/content/2.elements/11.meter.md
+++ b/docs/content/2.components/meter.md
@@ -19,7 +19,7 @@ props:
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-Check out the [Range](/forms/range) component for inputs
+Check out the [Range](/components/range) component for inputs
 ::
 
 ### Min & Max
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/2.components/modal.md
similarity index 91%
rename from docs/content/6.overlays/1.modal.md
rename to docs/content/2.components/modal.md
index c2f2a3fa..82e6c3e5 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/2.components/modal.md
@@ -15,7 +15,7 @@ Use a `v-model` to control the Modal state.
 
 :component-example{component="modal-example-basic"}
 
-You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
+You can put a [Card](/components/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
 
 :component-example{component="modal-example-card"}
 
diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/2.components/notification.md
similarity index 93%
rename from docs/content/6.overlays/6.notification.md
rename to docs/content/2.components/notification.md
index b99186f0..d75df262 100644
--- a/docs/content/6.overlays/6.notification.md
+++ b/docs/content/2.components/notification.md
@@ -114,7 +114,7 @@ excludedProps:
 
 ### Avatar
 
-Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
 
 ::component-card
 ---
@@ -188,7 +188,7 @@ Use the `callback` prop to execute a function when the Notification expires.
 
 Use the `close-button` prop to hide or customize the close button on the Notification.
 
-You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
 
 ::component-card
 ---
@@ -216,7 +216,7 @@ Use the `actions` prop to add actions to the Notification.
 
 :component-example{component="notification-example-actions"}
 
-Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
+Like for `closeButton`, you can pass all the props of the [Button](/components/button) component inside the action or globally through `ui.notification.default.actionButton`.
 
 ::component-card
 ---
diff --git a/docs/content/5.navigation/3.pagination.md b/docs/content/2.components/pagination.md
similarity index 100%
rename from docs/content/5.navigation/3.pagination.md
rename to docs/content/2.components/pagination.md
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/2.components/popover.md
similarity index 100%
rename from docs/content/6.overlays/3.popover.md
rename to docs/content/2.components/popover.md
diff --git a/docs/content/2.elements/10.progress.md b/docs/content/2.components/progress.md
similarity index 97%
rename from docs/content/2.elements/10.progress.md
rename to docs/content/2.components/progress.md
index a701d71c..a33ba7cb 100644
--- a/docs/content/2.elements/10.progress.md
+++ b/docs/content/2.components/progress.md
@@ -19,7 +19,7 @@ props:
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-Check out the [Range](/forms/range) component for forms.
+Check out the [Range](/components/range) component for forms.
 ::
 
 ### Max
diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/2.components/radio-group.md
similarity index 100%
rename from docs/content/3.forms/6.radio-group.md
rename to docs/content/2.components/radio-group.md
diff --git a/docs/content/3.forms/8.range.md b/docs/content/2.components/range.md
similarity index 100%
rename from docs/content/3.forms/8.range.md
rename to docs/content/2.components/range.md
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/2.components/select-menu.md
similarity index 92%
rename from docs/content/3.forms/4.select-menu.md
rename to docs/content/2.components/select-menu.md
index a8a3573c..9dbe0a0f 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/2.components/select-menu.md
@@ -12,7 +12,7 @@ links:
 
 ## Usage
 
-The `SelectMenu` component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
+The `SelectMenu` component renders by default a [Select](/components/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/components/select#style), [variant](/components/select#style), [size](/components/select#size), [placeholder](/components/select#placeholder), [icon](/components/select#icon), [disabled](/components/select#disabled), etc.
 
 You can use the `ui` prop like the `Select` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
 
@@ -78,7 +78,7 @@ excludedProps:
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-Learn how to customize icons from the [Select](/forms/select#icon) component.
+Learn how to customize icons from the [Select](/components/select#icon) component.
 ::
 
 ## Searchable
diff --git a/docs/content/3.forms/3.select.md b/docs/content/2.components/select.md
similarity index 98%
rename from docs/content/3.forms/3.select.md
rename to docs/content/2.components/select.md
index 0627a637..50e1238e 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/2.components/select.md
@@ -8,7 +8,7 @@ links:
 
 ## Usage
 
-The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
+The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/components/select-menu) component.
 
 Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
 
diff --git a/docs/content/7.layout/3.skeleton.md b/docs/content/2.components/skeleton.md
similarity index 100%
rename from docs/content/7.layout/3.skeleton.md
rename to docs/content/2.components/skeleton.md
diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/2.components/slideover.md
similarity index 91%
rename from docs/content/6.overlays/2.slideover.md
rename to docs/content/2.components/slideover.md
index 6a471cb9..37b3a561 100644
--- a/docs/content/6.overlays/2.slideover.md
+++ b/docs/content/2.components/slideover.md
@@ -15,7 +15,7 @@ Use a `v-model` to control the Slideover state.
 
 :component-example{component="slideover-example-basic"}
 
-You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
+You can put a [Card](/components/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
 
 :component-example{component="slideover-example-card"}
 
diff --git a/docs/content/4.data/1.table.md b/docs/content/2.components/table.md
similarity index 91%
rename from docs/content/4.data/1.table.md
rename to docs/content/2.components/table.md
index 09aefb8b..7d9be7cf 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/2.components/table.md
@@ -6,10 +6,6 @@ links:
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
 ---
 
-::callout{icon="i-heroicons-puzzle-piece" to="/getting-started/examples#table"}
-Check out an example of a Table with advanced features like sorting, pagination, search, etc.
-::
-
 ## Usage
 
 Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
@@ -43,7 +39,7 @@ componentProps:
 ---
 ::
 
-You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
+You can easily use the [SelectMenu](/components/select-menu) component to change the columns to display.
 
 ::component-example{class="grid"}
 ---
@@ -54,6 +50,19 @@ componentProps:
 ---
 ::
 
+You can apply styles to `tr` and `td` elements by passing a `class` to rows.
+
+Also, you can apply styles to `th` elements by passing a `class` to columns.
+
+::component-example{class="grid"}
+---
+padding: false
+component: 'table-example-style'
+componentProps:
+  class: 'w-full'
+---
+::
+
 ### Sortable
 
 You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
@@ -147,7 +156,7 @@ We pass a function to `useLazyFetch` here make the url reactive but you can use
 
 #### Custom sorting
 
-Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
+Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/components/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
 
 ::component-card{class="grid"}
 ---
@@ -257,7 +266,7 @@ componentProps:
 
 ### Searchable
 
-You can easily use the [Input](/forms/input) component to filter the rows.
+You can easily use the [Input](/components/input) component to filter the rows.
 
 ::component-example{class="grid"}
 ---
@@ -270,7 +279,7 @@ componentProps:
 
 ### Paginable
 
-You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
+You can easily use the [Pagination](/components/pagination) component to paginate the rows.
 
 ::component-example{class="grid"}
 ---
@@ -362,21 +371,6 @@ excludedProps:
 ---
 ::
 
-## Styling
-
-You can apply styles to `tr` and `td` elements by passing a `class` to rows.
-
-Also, you can apply styles to `th` elements by passing a `class` to columns.
-
-::component-example{class="grid"}
----
-padding: false
-component: 'table-example-style'
-componentProps:
-  class: 'w-full'
----
-::
-
 ## Slots
 
 You can use slots to customize the header and data cells of the table.
@@ -400,7 +394,7 @@ Even though you can customize the sort button as mentioned in the [Sortable](#so
 
 Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row`, `column` and `getRowData` properties in the slot scope.
 
-You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
+You can for example create an extra column for actions with a [Dropdown](/components/dropdown) component inside or change the color of the rows based on a selection.
 
 ::component-example{class="grid"}
 ---
@@ -444,3 +438,13 @@ componentProps:
 ## Config
 
 :component-preset
+
+## Example
+
+Here is an example of a Table component with all its features implemented.
+
+:component-example{component="table-example-advanced" hiddenCode :padding="false" }
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
+Take a look at the component!
+::
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/2.components/tabs.md
similarity index 100%
rename from docs/content/5.navigation/4.tabs.md
rename to docs/content/2.components/tabs.md
diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/2.components/textarea.md
similarity index 100%
rename from docs/content/3.forms/2.textarea.md
rename to docs/content/2.components/textarea.md
diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/2.components/toggle.md
similarity index 100%
rename from docs/content/3.forms/7.toggle.md
rename to docs/content/2.components/toggle.md
diff --git a/docs/content/6.overlays/4.tooltip.md b/docs/content/2.components/tooltip.md
similarity index 100%
rename from docs/content/6.overlays/4.tooltip.md
rename to docs/content/2.components/tooltip.md
diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/2.components/vertical-navigation.md
similarity index 86%
rename from docs/content/5.navigation/1.vertical-navigation.md
rename to docs/content/2.components/vertical-navigation.md
index a2c5d736..4bfb247c 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/docs/content/2.components/vertical-navigation.md
@@ -15,18 +15,14 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
 - `labelClass` - The class of the link label.
 - `icon` - The icon of the link.
 - `iconClass` - The class of the link icon.
-- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
-- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
+- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
 - `click` - The click handler of the link.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
 :component-example{component="vertical-navigation-example"}
 
-::callout{icon="i-heroicons-light-bulb"}
-Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
-::
-
 ## Sections
 
 Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
@@ -68,3 +64,9 @@ Use the `#badge` slot to customize the link badge. You will have access to the `
 ## Config
 
 :component-preset
+
+## Example
+
+Here is an example illustrating how you can customize the appearance of the `VerticalNavigation` component by utilizing its `ui` prop.
+
+:component-example{component="vertical-navigation-example-theme-tailwind"}
diff --git a/docs/content/index.yml b/docs/content/index.yml
index fa468463..1f03407f 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -62,64 +62,130 @@ sections:
           height: 160
         orientation: 'horizontal'
     links:
-      - label: Explore docs
-        to: /getting-started/theming
+      - label: Explore 40+ components
+        to: /components
+        color: black
+        size: lg
+        icon: i-heroicons-cube
+      - label: Star on GitHub
+        to: https://github.com/nuxt/ui
+        target: _blank
         color: white
         size: lg
-        trailingIcon: i-heroicons-arrow-right-20-solid
-  - title: 'A collection of <span class="text-primary">40+</span> components'
-    description: 'Get access to 40+ 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: Explore components
-        to: /elements/accordion
-        color: white
-        size: lg
-        trailingIcon: i-heroicons-arrow-right-20-solid
-    categories:
-      - label: Elements
-        to: /elements/dropdown
-        image:
-          path: /illustrations/elements
-        badge: 15
-      - label: Forms
-        to: /forms/form
-        image:
-          path: /illustrations/forms
-        badge: 12
-      - label: Data
-        to: /data/table
-        image:
-          path: /illustrations/data
-        badge: 1
-      - label: Navigation
-        to: /navigation/command-palette
-        image:
-          path: /illustrations/navigation
-        badge: 5
-      - label: Overlays
-        to: /overlays/modal
-        image:
-          path: /illustrations/overlays
-        badge: 7
-      - label: Layout
-        to: /layout/card
-        image:
-          path: /illustrations/layout
-        badge: 4
+        icon: i-simple-icons-github
 cta:
   title: Trusted and supported by our<br class="hidden lg:block"> amazing community
 pro:
-  title: 'Upgrade to <span class="text-primary">UI Pro</span> for more components'
-  description: 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
-  image:
-    path: /illustrations/pro
-    width: 1216
-    height: 424
+  title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
+  description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
   links:
-    - label: Explore Pro
-      to: /pro
-      color: white
+    - label: View plans
+      to: /pro/pricing
+      color: gray
+      icon: i-heroicons-credit-card
       size: lg
-      trailingIcon: i-heroicons-arrow-right-20-solid
+    - label: Explore templates
+      to: /pro/templates
+      color: gray
+      icon: i-heroicons-computer-desktop
+      size: lg
+  sections:
+    - title: The freedom to build anything
+      description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
+      id: features
+      align: left
+      features:
+        - name: Fully customizable
+          description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
+          icon: i-heroicons-wrench-screwdriver
+        - name: Slots for everything
+          description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
+          icon: i-heroicons-square-3-stack-3d
+        - name: Responsive by design
+          description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
+          icon: i-heroicons-device-phone-mobile
+      links:
+        - label: Explore components
+          to: /pro/components
+          color: gray
+          icon: i-heroicons-arrow-right-20-solid
+          trailing: true
+          size: md
+          class: ml-8
+      code: |
+        ```vue [app.vue]
+        <script setup lang="ts">
+        const links = [
+          { to: '/', label: 'Home' },
+          { to: '/about', label: 'About' },
+          { to: '/contact', label: 'Contact' }
+        ]
+        </script>
+
+        <template>
+          <UHeader :links="links" />
+
+          <UMain>
+            <ULandingHero title="Hello World" />
+
+            <ULandingSection title="Features">
+              <UPageGrid>
+                <ULandingCard title="First Card" />
+                <ULandingCard title="Second Card" />
+                <ULandingCard title="Third Card" />
+              </UPageGrid>
+            </ULandingSection>
+          </UMain>
+
+          <UFooter />
+        </template>
+        ```
+    - title: The flexibility to control your data
+      description: Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
+      align: right
+      features:
+        - name: 'Write Markdown with ease'
+          description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
+          icon: i-simple-icons-markdown
+        - name: 'Beautiful Typography styles'
+          description: Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
+          icon: i-heroicons-paint-brush
+        - name: Full-Text Search out of the box
+          description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
+          icon: i-heroicons-magnifying-glass
+      links:
+        - label: Nuxt Content integration
+          to: /pro/getting-started/content
+          color: gray
+          icon: i-heroicons-arrow-right-20-solid
+          trailing: true
+          size: md
+          class: ml-8
+      code: |
+        ```vue [pages/\[...slug\\].vue]
+        <script setup lang="ts">
+        const route = useRoute()
+
+        const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+        </script>
+
+        <template>
+          <UPage>
+            <UPageHeader :title="page.title" :description="page.description" :links="page.links" />
+
+            <UPageBody prose>
+              <ContentRenderer v-if="page.body" :value="page" />
+            </UPageBody>
+
+            <template #right>
+              <UDocsToc :links="page.body.toc.links" />
+            </template>
+          </UPage>
+        </template>
+        ```
+  landing:
+    title: Start with a landing page
+    description: Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.
+  docs:
+    title: Build your docs in seconds
+    description: Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.
diff --git a/docs/error.vue b/docs/error.vue
index 8a6d1b22..1248b82c 100644
--- a/docs/error.vue
+++ b/docs/error.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <NuxtLoadingIndicator />
+
     <Header :links="links" />
 
     <UContainer>
@@ -11,7 +13,7 @@
     </UContainer>
 
     <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+      <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 1000 }" />
     </ClientOnly>
 
     <UNotifications />
@@ -31,6 +33,7 @@ defineProps<{
   error: NuxtError
 }>()
 
+const route = useRoute()
 const { branch } = useContentSource()
 
 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
@@ -44,49 +47,34 @@ const navigation = computed(() => {
     const pro = nav.value.find(item => item._path === '/pro')
 
     return [
-      ...(pro ? [pro] : []),
-      ...dev
+      ...dev,
+      ...(pro ? [pro] : [])
     ]
   }
 
-  return nav.value?.filter(item => item._path !== '/dev') || []
+  return nav.value.filter(item => item._path !== '/dev')
 })
 
 const links = computed(() => {
   return [{
-    label: 'Documentation',
+    label: 'Docs',
     icon: 'i-heroicons-book-open',
-    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Roadmap',
-    icon: 'i-heroicons-academic-cap',
-    to: '/roadmap'
-  }, !!navigation.value.find(item => item._path === '/pro') && {
+    to: branch.value?.name === 'dev' ? '/dev/getting-started' : '/getting-started',
+    active: branch.value?.name === 'dev' ? (route.path.startsWith('/dev/getting-started') || route.path.startsWith('/dev/components')) : (route.path.startsWith('/getting-started') || route.path.startsWith('/components'))
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
     label: 'Pro',
     icon: 'i-heroicons-square-3-stack-3d',
     to: '/pro',
-    children: [{
-      label: 'Features',
-      to: '/pro',
-      exact: true,
-      icon: 'i-heroicons-beaker',
-      description: 'Discover all the features of Nuxt UI Pro.'
-    }, {
-      label: 'Guide',
-      to: '/pro/guide',
-      icon: 'i-heroicons-book-open',
-      description: 'Learn how to use Nuxt UI Pro in your app.'
-    }, {
-      label: 'Components',
-      to: '/pro/components',
-      icon: 'i-heroicons-cube-transparent',
-      description: 'Discover all the components available in Nuxt UI Pro.'
-    }]
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components')
   }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
     to: '/releases'
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 58b6c5de..fe865072 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -90,6 +90,10 @@ export default defineNuxtConfig({
       ignore: !process.env.NUXT_UI_PRO_PATH && !process.env.NUXT_GITHUB_TOKEN ? ['/pro'] : []
     }
   },
+  routeRules: {
+    '/components': { redirect: '/components/accordion', prerender: false },
+    '/dev/components': { redirect: '/dev/components/accordion', prerender: false }
+  },
   componentMeta: {
     exclude: [
       '@nuxt/content',
diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
index dca1b816..ef021367 100644
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -1,5 +1,5 @@
 <template>
-  <UPage>
+  <UPage v-if="page">
     <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
     <UPageBody prose>
@@ -16,7 +16,11 @@
           <div class="hidden lg:block space-y-6 !mt-6">
             <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
 
-            <UPageLinks title="Community" :links="links" />
+            <UPageLinks title="Community" :links="communityLinks" />
+
+            <UDivider type="dashed" />
+
+            <UPageLinks title="Resources" :links="resourcesLinks" />
 
             <UDivider type="dashed" />
 
@@ -78,7 +82,7 @@ defineOgImage({
   headline: headline.value
 })
 
-const links = computed(() => [{
+const communityLinks = computed(() => [{
   icon: 'i-heroicons-pencil-square',
   label: 'Edit this page',
   to: `https://github.com/nuxt/ui/edit/dev/docs/content/${branch.value?.name === 'dev' ? page?.value?._file.split('/').slice(1).join('/') : page?.value?._file}`,
@@ -89,19 +93,29 @@ const links = computed(() => [{
   to: 'https://github.com/nuxt/ui',
   target: '_blank'
 }, {
-  icon: 'i-heroicons-chat-bubble-bottom-center-text',
-  label: 'Chat on Discord',
-  to: 'https://discord.com/channels/473401852243869706/1153996761426300948',
-  target: '_blank'
-}, {
-  icon: 'i-heroicons-book-open',
-  label: 'Nuxt docs',
-  to: 'https://nuxt.com',
-  target: '_blank'
+  icon: 'i-heroicons-lifebuoy',
+  label: 'Contributing',
+  to: '/getting-started/contributing'
 }, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}])
+
+const resourcesLinks = [{
   icon: 'i-simple-icons-figma',
   label: 'Figma Kit',
   to: 'https://www.figma.com/community/file/1288455405058138934/nuxt-ui',
   target: '_blank'
-}])
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  icon: 'i-simple-icons-nuxtdotjs',
+  label: 'Nuxt docs',
+  to: 'https://nuxt.com',
+  target: '_blank'
+}]
 </script>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index e89e302f..e9b89d2e 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -4,12 +4,12 @@
     <ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
       <template #headline>
         <UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
-          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version}`" target="_blank" class="focus:outline-none" tabindex="-1">
+          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version.split('.').slice(0, -1).join('.')}.0`" target="_blank" class="focus:outline-none" tabindex="-1">
             <span class="absolute inset-0" aria-hidden="true" />
           </NuxtLink>
 
           <span class="flex items-center gap-1">
-            Nuxt UI {{ config.version.split('.').slice(0, -1).join('.') }} is out!
+            Nuxt UI v{{ config.version.split('.').slice(0, -1).join('.') }} is out!
           </span>
         </UBadge>
       </template>
@@ -23,7 +23,7 @@
       </template>
 
       <template #links>
-        <UButton label="Get Started" icon="i-heroicons-rocket-launch" size="lg" to="/getting-started/installation" />
+        <UButton label="Get Started" trailing-icon="i-heroicons-arrow-right-20-solid" size="lg" to="/getting-started/installation" />
 
         <UInput
           v-model="source"
@@ -95,35 +95,9 @@
           </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.path}-light.svg`"
-              :dark="`${category.image.path}-dark.svg`"
-              width="363"
-              height="190"
-              :alt="category.label"
-              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">
+    <ULandingSection class="!pt-0 dark:bg-gradient-to-b from-gray-950/50 to-gray-900">
       <ULandingCTA
         align="left"
         card
@@ -189,30 +163,237 @@
       </ULandingCTA>
     </ULandingSection>
 
-    <ULandingSection :links="page.pro.links">
-      <template #title>
-        <span v-html="page.pro.title" />
-      </template>
+    <template v-if="navigation.find(item => item._path === '/pro')">
+      <ULandingHero :links="page.pro.links" :ui="{ title: 'sm:text-6xl' }">
+        <template #title>
+          <span v-html="page.pro.title" />
+        </template>
 
-      <template #description>
-        <span v-html="page.pro.description" />
-      </template>
+        <template #description>
+          <span v-html="page.pro.description" />
+        </template>
+      </ULandingHero>
 
-      <UColorModeImage
-        :light="`${page.pro.image.path}-light.svg`"
-        :dark="`${page.pro.image.path}-dark.svg`"
-        :width="page.pro.image.width"
-        :height="page.pro.image.height"
-        :alt="page.pro.title"
-        loading="lazy"
-        class="w-full lg:-mb-16"
-      />
-    </ULandingSection>
+      <ULandingSection v-for="(section, index) in page.pro.sections" :key="index" v-bind="section" class="!pt-0">
+        <MDC
+          v-if="section.code"
+          :value="section.code"
+          tag="pre"
+          class="prose prose-primary dark:prose-invert max-w-none"
+        />
+      </ULandingSection>
+
+      <div ref="sectionRef" :style="{ '--y': `${y}px`, '--inc': `${inc}px` }" class="_screen_xl">
+        <ULandingSection class="sticky h-screen top-0 flex !pb-16" :ui="{ container: 'flex-1 sm:gap-y-12' }">
+          <template #title>
+            <Transition name="fade" mode="out-in">
+              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.title" />
+              <span v-else v-html="page.pro.landing?.title" />
+            </Transition>
+          </template>
+
+          <template #description>
+            <Transition name="fade" mode="out-in">
+              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.description" />
+              <span v-else v-html="page.pro.landing?.description" />
+            </Transition>
+          </template>
+
+          <HomeProDemo ref="demoRef" :blocks="(blocks as HomeProBlock[])">
+            <template #header-left>
+              <Logo class="w-auto h-6" />
+            </template>
+
+            <template #header-center>
+              <UHeaderLinks :links="headerLinks" />
+            </template>
+
+            <template #header-right>
+              <div class="flex items-center gap-1.5">
+                <UColorModeButton />
+
+                <UButton
+                  to="https://github.com/nuxt/ui"
+                  target="_blank"
+                  icon="i-simple-icons-github"
+                  aria-label="GitHub"
+                  class="hidden lg:inline-flex"
+                  v-bind="($ui.button.secondary as any)"
+                />
+              </div>
+            </template>
+
+            <template #footer-left>
+              <span class="text-sm text-gray-500 dark:text-gray-400">
+                Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
+                  MIT License
+                </NuxtLink>
+              </span>
+            </template>
+
+            <template #footer-right>
+              <div class="flex items-center gap-1.5">
+                <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
+                <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="($ui.button.secondary as any)" />
+                <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
+              </div>
+            </template>
+
+            <template #aside-top>
+              <UDocsSearchButton size="md" class="w-full" />
+            </template>
+
+            <template #aside-default>
+              <UNavigationTree
+                class="w-full h-full [&>div>div>div>nav]:border-gray-800/10 dark:[&>div>div>div>nav]:border-gray-200/10 overflow-y-auto"
+                :links="navigationLinks"
+              />
+            </template>
+
+            <template #page-header>
+              <UPageHeader
+                title="Installation"
+                description="Learn how to install and configure the module in your Nuxt app."
+                headline="Getting Started"
+                class="!p-0 !border-0"
+                :ui="{ headline: 'mb-1 text-xs', title: '!text-2xl', description: 'mt-1 text-sm' }"
+              />
+            </template>
+
+            <template #page-body>
+              <div class="-mt-8 prose prose-primary prose-sm dark:prose-invert max-w-none">
+                <MDC :value="md" tag="div" />
+
+              <!-- <hr class="border-gray-800/10 dark:border-gray-200/10 !mt-5"> -->
+              </div>
+            </template>
+
+            <template #docs-surround>
+              <UDocsSurround
+                :surround="(surround as unknown as ParsedContent[])"
+                class="w-full gap-4"
+                :ui="{
+                  link: {
+                    wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
+                    icon: {
+                      wrapper: 'mb-2 p-1',
+                      base: 'h-4 w-4',
+                    },
+                    title: 'text-sm',
+                    description: 'text-xs'
+                  }
+                }"
+              />
+            </template>
+
+            <template #docs-toc>
+              <div class="absolute top-0 left-0 right-0 space-y-3">
+                <UDocsToc :links="toc" class="bg-transparent relative max-h-full overflow-hidden top-0" :ui="({ container: { base: '!pt-0 !pb-4' } } as any)" />
+
+                <UDivider type="dashed" :ui="{ border: { base: 'border-gray-800/10 dark:border-gray-200/10' } }" />
+
+                <UPageLinks title="Community" :links="communityLinks" class="mt-4" />
+              </div>
+            </template>
+
+            <template #landing-hero>
+              <ULandingHero class="!p-0" :ui="{ title: '!text-5xl', description: 'text-base' }">
+                <template #title>
+                  A <span class="text-primary">UI Library</span> for<br> Modern Web Apps
+                </template>
+
+                <template #description>
+                  Nuxt UI simplifies the creation of stunning and responsive web applications with its<br> comprehensive collection of fully styled and customizable UI components designed for Nuxt.
+                </template>
+
+                <template #links>
+                  <UButton label="Get Started" icon="i-heroicons-rocket-launch" size="md" />
+
+                  <UInput
+                    model-value="npm i @nuxt/ui"
+                    color="gray"
+                    readonly
+                    autocomplete="off"
+                    icon="i-heroicons-command-line"
+                    input-class="select-none"
+                    aria-label="Install @nuxt/ui"
+                    size="md"
+                    :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+                  />
+                </template>
+              </ULandingHero>
+            </template>
+
+            <template #landing-section>
+              <ULandingSection :ui="{ title: '!text-3xl', description: 'text-base' }" class="!p-0">
+                <template #title>
+                  Everything you expect from a<br> <span class="text-primary">UI component library</span>
+                </template>
+              </ULandingSection>
+            </template>
+
+            <template #landing-card-1>
+              <ULandingCard icon="i-heroicons-swatch" title="Color Palette" description="Choose a primary and a gray color from your Tailwind CSS color palette." />
+            </template>
+            <template #landing-card-2>
+              <ULandingCard icon="i-heroicons-wrench-screwdriver" title="Fully Customizable" description="Change the style of any component in your App Config or with ui prop." />
+            </template>
+            <template #landing-card-3>
+              <ULandingCard icon="i-heroicons-face-smile" title="Icons" description="Choose any of the 100k+ icons from the most popular icon libraries." />
+            </template>
+            <template #landing-card-4>
+              <ULandingCard icon="i-heroicons-computer-desktop" title="Keyboard Shortcuts" description="Nuxt UI comes with a set of Vue composables to easily handle shortcuts." />
+            </template>
+
+            <template #landing-cta>
+              <ULandingCTA card :links="[{ label: 'Get started', color: 'black', size: 'md' }, { label: 'Learn more', color: 'black', variant: 'link', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :ui="{ title: '!text-3xl', description: 'text-base' }" class="w-full h-full rounded-md">
+                <template #title>
+                  Trusted and supported by our<br> amazing community
+                </template>
+              </ULandingCTA>
+            </template>
+          </HomeProDemo>
+        </ULandingSection>
+
+        <div class="h-[calc(var(--inc)*42)]" />
+      </div>
+
+      <div class="_not_screen_xl">
+        <ULandingSection>
+          <template #title>
+            <span v-html="page.pro.landing?.title" />
+          </template>
+          <template #description>
+            <span v-html="page.pro.landing?.description" />
+          </template>
+          <video poster="https://res.cloudinary.com/nuxt/video/upload/so_14.4/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.jpg" controls>
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.webm" type="video/webm">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.mp4" type="video/mp4">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.ogg" type="video/ogg">
+          </video>
+        </ULandingSection>
+        <ULandingSection>
+          <template #title>
+            <span v-html="page.pro.docs?.title" />
+          </template>
+          <template #description>
+            <span v-html="page.pro.docs?.description" />
+          </template>
+          <video poster="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.jpg" controls>
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.webm" type="video/webm">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.mp4" type="video/mp4">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.ogg" type="video/ogg">
+          </video>
+        </ULandingSection>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import type { ParsedContent, NavItem } from '@nuxt/content/dist/runtime/types'
+import { useElementBounding, useWindowScroll, useElementSize, breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import type { HomeProBlock } from '~/types'
 
 const { data: page } = await useAsyncData('index', () => queryContent('/dev').findOne())
 const { data: module } = await useFetch<{
@@ -227,15 +408,7 @@ const { data: module } = await useFetch<{
   transform: ({ stats, contributors }) => ({ stats, contributors })
 })
 
-const source = ref('npm i @nuxt/ui')
-
-const config = useRuntimeConfig().public
-const { copy, copied } = useClipboard({ source })
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const mdAndLarger = breakpoints.greaterOrEqual('md')
-const lgAndLarger = breakpoints.greaterOrEqual('lg')
-const xlAndLarger = breakpoints.greaterOrEqual('xl')
+const navigation = inject<Ref<NavItem[]>>('navigation')
 
 useSeoMeta({
   titleTemplate: '',
@@ -247,5 +420,401 @@ useSeoMeta({
   twitterImage: 'https://ui.nuxt.com/social-card.png'
 })
 
-const { format } = Intl.NumberFormat('en-GB', { notation: 'compact' })
+const source = ref('npm i @nuxt/ui')
+const sectionRef = ref()
+const demoRef = ref()
+const start = ref(0)
+
+const { height } = useElementSize(demoRef)
+const { top } = useElementBounding(sectionRef)
+const { y } = useWindowScroll()
+const config = useRuntimeConfig().public
+const { copy, copied } = useClipboard({ source })
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const mdAndLarger = breakpoints.greaterOrEqual('md')
+const lgAndLarger = breakpoints.greaterOrEqual('lg')
+const xlAndLarger = breakpoints.greaterOrEqual('xl')
+
+const { format } = Intl.NumberFormat('en', { notation: 'compact' })
+
+const steps = {
+  header: 0,
+  footer: 5,
+  landing: 10,
+  docs: 27
+}
+
+// Computed
+
+const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)
+
+const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) ? [{
+  class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
+  inactive: true,
+  children: [{
+    name: 'ULandingHero',
+    to: '/pro/components/landing/landing-hero',
+    class: [
+      'inset-4',
+      isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--step-y': `${getStepY(steps.landing + 2)}px`
+    },
+    inactive: isAfterStep(steps.landing + 1),
+    children: [{
+      slot: 'landing-hero',
+      class: 'inset-4'
+    }]
+  }, isAfterStep(steps.landing + 2) && {
+    name: 'ULandingSection',
+    to: '/pro/components/landing/landing-section',
+    class: [
+      'inset-4',
+      isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
+      isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--height': (inc.value * 4) + 'px',
+      '--step-y': `${getStepY(steps.landing + 10)}px`,
+      '--prev-step-y': `${getStepY(steps.landing + 2)}px`
+    },
+    inactive: isAfterStep(steps.landing + 7),
+    children: [{
+      slot: 'landing-section',
+      class: 'inset-x-4 top-16'
+    }, {
+      name: 'ULandingGrid',
+      to: '/pro/components/landing/landing-grid',
+      class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
+      inactive: isAfterStep(steps.landing + 8),
+      children: [isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-1',
+        class: '!relative'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-2',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-3',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-4',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }]
+    }]
+  }, isAfterStep(steps.landing + 10) && {
+    name: 'ULandingSection',
+    to: '/pro/components/landing/landing-section',
+    class: [
+      'inset-4',
+      isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--height': (inc.value * 4) + 'px',
+      '--step-y': `${getStepY(steps.landing + 18)}px`,
+      '--prev-step-y': `${getStepY(steps.landing + 10)}px`
+    },
+    inactive: isAfterStep(steps.landing + 15),
+    children: [{
+      name: 'ULandingCTA',
+      class: 'inset-4',
+      inactive: isAfterStep(steps.landing + 16),
+      children: [{
+        slot: 'landing-cta',
+        class: 'inset-0'
+      }]
+    }]
+  }].filter(Boolean)
+}] : [])
+
+const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
+  name: 'UPage',
+  to: '/pro/components/page/page',
+  class: 'inset-x-0 top-20 bottom-20',
+  inactive: isAfterStep(steps.docs + 1),
+  children: [isAfterStep(steps.docs + 2) ? {
+    name: 'UAside',
+    to: '/pro/components/aside/aside',
+    class: 'left-4 inset-y-4 w-64',
+    inactive: isAfterStep(steps.docs + 3),
+    children: [isAfterStep(steps.docs + 4) ? {
+      slot: 'aside-top',
+      class: 'inset-x-4 top-4'
+    } : {
+      name: '#top',
+      class: 'inset-x-4 top-4 h-9'
+    }, isAfterStep(steps.docs + 5) ? {
+      name: 'UNavigationTree',
+      to: '/pro/components/navigation/navigation-tree',
+      class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
+      inactive: isAfterStep(steps.docs + 6),
+      children: [{
+        slot: 'aside-default',
+        class: 'inset-0'
+      }]
+    } : {
+      name: '#default',
+      class: 'inset-x-4 top-[4.25rem] bottom-4'
+    }]
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.docs + 7) ? {
+    name: 'UPage',
+    to: '/pro/components/page/page',
+    class: 'left-72 right-4 inset-y-4',
+    inactive: isAfterStep(steps.docs + 8),
+    children: [...(isAfterStep(steps.docs + 9) ? [{
+      name: 'UPageHeader',
+      to: '/pro/components/page/page-header',
+      class: 'top-4 left-4 right-72 h-32',
+      inactive: isAfterStep(steps.docs + 10),
+      children: [{
+        slot: 'page-header',
+        class: 'inset-4 justify-start'
+      }]
+    }, {
+      name: 'UPageBody',
+      to: '/pro/components/page/page-body',
+      class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
+      inactive: isAfterStep(steps.docs + 11),
+      children: [{
+        slot: 'page-body',
+        class: 'inset-x-4 top-4 justify-start'
+      }, isAfterStep(steps.docs + 12) ? {
+        slot: 'docs-surround',
+        class: 'bottom-4 inset-x-4 h-28'
+      } : {
+        name: 'UDocsSurround',
+        to: '/pro/components/docs/docs-surround',
+        class: 'bottom-4 inset-x-4 h-28',
+        inactive: false
+      }]
+    }] : [{
+      name: '#default',
+      class: 'left-4 right-72 inset-y-4'
+    }]), isAfterStep(steps.docs + 13) ? {
+      name: 'UDocsToc',
+      to: '/pro/components/docs/docs-toc',
+      class: 'right-4 inset-y-4 w-64',
+      inactive: isAfterStep(steps.docs + 14),
+      children: [{
+        slot: 'docs-toc',
+        class: 'inset-4 overflow-y-auto'
+      }]
+    } : {
+      name: '#right',
+      class: 'right-4 inset-y-4 w-64'
+    }]
+  } : {
+    name: '#default',
+    class: 'left-72 right-4 inset-y-4'
+  }]
+}].filter(Boolean))
+
+const blocks = computed(() => [isAfterStep(steps.header) && {
+  name: 'UHeader',
+  to: '/pro/components/header/header',
+  class: 'h-16 inset-x-0 top-0',
+  inactive: isAfterStep(steps.header + 1),
+  children: [isAfterStep(steps.header + 2) ? {
+    slot: 'header-left',
+    class: 'left-4 top-4'
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.header + 3) ? {
+    slot: 'header-center',
+    class: 'inset-x-72 top-5'
+  } : {
+    name: '#center',
+    class: 'inset-x-72 inset-y-4'
+  }, isAfterStep(steps.header + 4) ? {
+    slot: 'header-right',
+    class: 'right-4 top-4'
+  } : {
+    name: '#right',
+    class: 'right-4 inset-y-4 w-64'
+  }]
+}, isAfterStep(steps.footer) && {
+  name: 'UFooter',
+  to: '/pro/components/footer/footer',
+  class: 'h-16 inset-x-0 bottom-0',
+  inactive: isAfterStep(steps.footer + 1),
+  children: [isAfterStep(steps.footer + 2) ? {
+    slot: 'footer-left',
+    class: 'left-4 bottom-5'
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.footer + 3) ? {
+    slot: 'footer-center',
+    class: 'inset-x-72 bottom-5'
+  } : {
+    name: '#center',
+    class: 'inset-x-72 inset-y-4'
+  }, isAfterStep(steps.footer + 4) ? {
+    slot: 'footer-right',
+    class: 'right-4 bottom-4'
+  } : {
+    name: '#right',
+    class: 'right-4 inset-y-4 w-64'
+  }]
+}, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean))
+
+// Methods
+
+function isBeforeStep (i = 0) {
+  return y.value < (start.value + (i * inc.value))
+}
+
+function isAfterStep (i = 0) {
+  return y.value >= (start.value + (i * inc.value))
+}
+
+function getStepY (step: number) {
+  return start.value + (step * inc.value)
+}
+
+// Hooks
+
+onMounted(() => {
+  nextTick(() => {
+    start.value = top.value
+  })
+})
+
+// Slots Data
+
+const headerLinks = [{
+  label: 'Documentation',
+  active: true
+}, {
+  label: 'Playground'
+}, {
+  label: 'Roadmap'
+}, {
+  label: 'Pro'
+}]
+
+const navigationLinks = [{
+  label: 'Getting Started',
+  children: [{
+    label: 'Introduction'
+  }, {
+    label: 'Installation',
+    active: true
+  }, {
+    label: 'Theming'
+  }, {
+    label: 'Shortcuts'
+  }, {
+    label: 'Examples'
+  }, {
+    label: 'Roadmap'
+  }]
+}, {
+  label: 'Elements',
+  children: [{
+    label: 'Alert'
+  }, {
+    label: 'Avatar'
+  }, {
+    label: 'Badge'
+  }, {
+    label: 'Button'
+  }]
+}]
+
+const surround = [{
+  title: 'Introduction',
+  description: 'Fully styled and customizable components for Nuxt.'
+}, {
+  title: 'Theming',
+  description: 'Learn how to customize the look and feel of the components.'
+}]
+
+const md = `
+## Edge
+
+To use the latest updates pushed on the [\`dev\`](https://github.com/nuxt/ui/tree/dev) branch, you can use \`@nuxt/ui-edge\`.
+`
+
+const toc = [{
+  id: 'quick-start',
+  depth: 2,
+  text: 'Quick Start'
+}, {
+  id: 'intellisense',
+  depth: 2,
+  text: 'IntelliSense'
+}, {
+  id: 'options',
+  depth: 2,
+  text: 'Options'
+}, {
+  id: 'edge',
+  depth: 2,
+  text: 'Edge'
+}]
+
+const communityLinks = [{
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page'
+}, {
+  icon: 'i-heroicons-star',
+  label: 'Star on GitHub',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-book-open',
+  label: 'Nuxt documentation',
+  to: 'https://nuxt.com',
+  target: '_blank'
+}]
 </script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+._screen_xl {
+  display: none;
+}
+@media (min-width: 1280px) and (min-height: 955px) {
+  ._screen_xl {
+    display: block;
+  }
+  ._not_screen_xl {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/public/illustrations/data-dark.svg b/docs/public/illustrations/data-dark.svg
deleted file mode 100644
index 38eeb979..00000000
--- a/docs/public/illustrations/data-dark.svg
+++ /dev/null
@@ -1,95 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/data-light.svg b/docs/public/illustrations/data-light.svg
deleted file mode 100644
index ffedf296..00000000
--- a/docs/public/illustrations/data-light.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/elements-dark.svg b/docs/public/illustrations/elements-dark.svg
deleted file mode 100644
index 4354f3a8..00000000
--- a/docs/public/illustrations/elements-dark.svg
+++ /dev/null
@@ -1,66 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/elements-light.svg b/docs/public/illustrations/elements-light.svg
deleted file mode 100644
index 94656551..00000000
--- a/docs/public/illustrations/elements-light.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/forms-dark.svg b/docs/public/illustrations/forms-dark.svg
deleted file mode 100644
index adbb38d1..00000000
--- a/docs/public/illustrations/forms-dark.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/forms-light.svg b/docs/public/illustrations/forms-light.svg
deleted file mode 100644
index 22ae28c7..00000000
--- a/docs/public/illustrations/forms-light.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/layout-dark.svg b/docs/public/illustrations/layout-dark.svg
deleted file mode 100644
index 95fa079a..00000000
--- a/docs/public/illustrations/layout-dark.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/layout-light.svg b/docs/public/illustrations/layout-light.svg
deleted file mode 100644
index 6442c9c6..00000000
--- a/docs/public/illustrations/layout-light.svg
+++ /dev/null
@@ -1,71 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/navigation-dark.svg b/docs/public/illustrations/navigation-dark.svg
deleted file mode 100644
index c5ca0040..00000000
--- a/docs/public/illustrations/navigation-dark.svg
+++ /dev/null
@@ -1,65 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/navigation-light.svg b/docs/public/illustrations/navigation-light.svg
deleted file mode 100644
index d6291911..00000000
--- a/docs/public/illustrations/navigation-light.svg
+++ /dev/null
@@ -1,65 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/overlays-dark.svg b/docs/public/illustrations/overlays-dark.svg
deleted file mode 100644
index 4b04df7b..00000000
--- a/docs/public/illustrations/overlays-dark.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/overlays-light.svg b/docs/public/illustrations/overlays-light.svg
deleted file mode 100644
index db374168..00000000
--- a/docs/public/illustrations/overlays-light.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<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>
diff --git a/docs/public/illustrations/pro-dark.svg b/docs/public/illustrations/pro-dark.svg
index ef63e48d..264d59db 100644
--- a/docs/public/illustrations/pro-dark.svg
+++ b/docs/public/illustrations/pro-dark.svg
@@ -1,189 +1,44 @@
-<svg width="1134" height="395" viewBox="0 0 1134 395" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.24" clip-path="url(#clip0_476_5530)">
-<rect x="661.5" y="0.5" width="470" height="262" rx="7.5" fill="url(#paint0_linear_476_5530)" fill-opacity="0.4" stroke="url(#paint1_linear_476_5530)"/>
-<rect x="681.25" y="13.25" width="430.5" height="31.5" rx="2.75" fill="url(#paint2_linear_476_5530)" fill-opacity="0.2" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<rect x="681.25" y="61.25" width="430.5" height="212.5" rx="2.75" fill="url(#paint3_linear_476_5530)" fill-opacity="0.2" stroke="url(#paint4_linear_476_5530)" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<path d="M707.464 37H716.386C716.669 37 716.948 36.9261 717.193 36.7857C717.438 36.6452 717.642 36.4432 717.784 36.2C717.925 35.9567 718 35.6808 718 35.3999C718 35.1191 717.925 34.8432 717.783 34.6001L711.792 24.3144C711.65 24.0712 711.446 23.8692 711.201 23.7288C710.955 23.5884 710.677 23.5144 710.394 23.5144C710.111 23.5144 709.832 23.5884 709.587 23.7288C709.341 23.8692 709.138 24.0712 708.996 24.3144L707.464 26.9461L704.469 21.7998C704.327 21.5566 704.123 21.3547 703.878 21.2143C703.632 21.0739 703.354 21 703.071 21C702.787 21 702.509 21.0739 702.263 21.2143C702.018 21.3547 701.814 21.5566 701.672 21.7998L694.217 34.6001C694.075 34.8432 694 35.1191 694 35.3999C694 35.6808 694.074 35.9567 694.216 36.2C694.358 36.4432 694.561 36.6452 694.807 36.7857C695.052 36.9261 695.331 37 695.614 37H701.214C703.433 37 705.07 36.034 706.196 34.1494L708.929 29.4572L710.393 26.9461L714.788 34.4889H708.929L707.464 37ZM701.123 34.4863L697.215 34.4854L703.073 24.429L705.996 29.4572L704.039 32.818C703.291 34.0408 702.442 34.4863 701.123 34.4863Z" fill="#94A3B8"/>
-<line x1="832" y1="30" x2="860" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="880" y1="30" x2="908" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="929" y1="30" x2="957" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<rect x="1049" y="23" width="46" height="11" rx="3" fill="#94A3B8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M885 90C883.895 90 883 90.8954 883 92C883 93.1046 883.895 94 885 94H909C910.105 94 911 93.1046 911 92C911 90.8954 910.105 90 909 90H885ZM806.5 106C804.015 106 802 108.015 802 110.5C802 112.985 804.015 115 806.5 115H987.5C989.985 115 992 112.985 992 110.5C992 108.015 989.985 106 987.5 106H806.5ZM842 129.5C842 127.015 844.015 125 846.5 125H949.5C951.985 125 954 127.015 954 129.5C954 131.985 951.985 134 949.5 134H846.5C844.015 134 842 131.985 842 129.5ZM768 192C765.791 192 764 193.791 764 196V268H1031V196C1031 193.791 1029.21 192 1027 192H768ZM845 156C845 154.343 846.343 153 848 153H889C890.657 153 892 154.343 892 156V162C892 163.657 890.657 165 889 165H848C846.343 165 845 163.657 845 162V156ZM907 153C905.343 153 904 154.343 904 156V162C904 163.657 905.343 165 907 165H948C949.657 165 951 163.657 951 162V156C951 154.343 949.657 153 948 153H907Z" fill="url(#paint5_linear_476_5530)" fill-opacity="0.6"/>
-</g>
-<g opacity="0.24" clip-path="url(#clip1_476_5530)">
-<rect x="0.5" y="0.5" width="470" height="262" rx="7.5" fill="url(#paint6_linear_476_5530)" fill-opacity="0.4" stroke="url(#paint7_linear_476_5530)"/>
-<rect x="20.25" y="13.25" width="430.5" height="31.5" rx="2.75" fill="url(#paint8_linear_476_5530)" fill-opacity="0.2" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<path d="M46.4641 37H55.3858C55.6692 37 55.9476 36.9261 56.193 36.7857C56.4384 36.6452 56.6422 36.4432 56.7838 36.2C56.9254 35.9567 56.9999 35.6808 56.9998 35.3999C56.9997 35.1191 56.9249 34.8432 56.7831 34.6001L50.7915 24.3144C50.6499 24.0712 50.4462 23.8692 50.2008 23.7288C49.9555 23.5884 49.6771 23.5144 49.3938 23.5144C49.1105 23.5144 48.8322 23.5884 48.5868 23.7288C48.3415 23.8692 48.1377 24.0712 47.9961 24.3144L46.4641 26.9461L43.4687 21.7998C43.327 21.5566 43.1232 21.3547 42.8778 21.2143C42.6324 21.0739 42.354 21 42.0706 21C41.7873 21 41.5089 21.0739 41.2635 21.2143C41.0181 21.3547 40.8142 21.5566 40.6725 21.7998L33.2167 34.6001C33.0749 34.8432 33.0001 35.1191 33 35.3999C32.9999 35.6808 33.0744 35.9567 33.216 36.2C33.3576 36.4432 33.5614 36.6452 33.8068 36.7857C34.0522 36.9261 34.3306 37 34.614 37H40.2143C42.4332 37 44.0696 36.034 45.1955 34.1494L47.9292 29.4572L49.3934 26.9461L53.7877 34.4889H47.9292L46.4641 37ZM40.123 34.4863L36.2147 34.4854L42.0732 24.429L44.9964 29.4572L43.0392 32.818C42.2915 34.0408 41.442 34.4863 40.123 34.4863Z" fill="#94A3B8"/>
-<line x1="171" y1="30" x2="199" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="219" y1="30" x2="247" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="268" y1="30" x2="296" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<rect x="388" y="23" width="46" height="11" rx="3" fill="#94A3B8"/>
-<rect x="20.2509" y="61.2509" width="430.498" height="76.4981" rx="2.76023" fill="url(#paint9_linear_476_5530)" fill-opacity="0.2" stroke="#94A3B8" stroke-width="0.501861" stroke-dasharray="1.91 1.91"/>
-<rect x="20.2509" y="155.251" width="431.498" height="76.4981" rx="2.74907" fill="url(#paint10_linear_476_5530)" fill-opacity="0.2" stroke="url(#paint11_linear_476_5530)" stroke-width="0.501861" stroke-dasharray="1.91 1.91"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M263 71.001C261.343 71.001 260 72.3441 260 74.001V126.001C260 127.658 261.343 129.001 263 129.001H432C433.657 129.001 435 127.658 435 126.001V74.001C435 72.3441 433.657 71.001 432 71.001H263ZM35.5 79.001C34.1193 79.001 33 80.1203 33 81.501C33 82.8817 34.1193 84.001 35.5 84.001H97.5C98.8807 84.001 100 82.8817 100 81.501C100 80.1203 98.8807 79.001 97.5 79.001H35.5ZM35.5 91.001C34.1193 91.001 33 92.1203 33 93.501C33 94.8817 34.1193 96.001 35.5 96.001H210.5C211.881 96.001 213 94.8817 213 93.501C213 92.1203 211.881 91.001 210.5 91.001H35.5ZM33 104.501C33 103.12 34.1193 102.001 35.5 102.001H171.5C172.881 102.001 174 103.12 174 104.501C174 105.882 172.881 107.001 171.5 107.001H35.5C34.1193 107.001 33 105.882 33 104.501ZM33 117.001C33 115.896 33.8954 115.001 35 115.001H124C125.105 115.001 126 115.896 126 117.001V122.001C126 123.106 125.105 124.001 124 124.001H35C33.8954 124.001 33 123.106 33 122.001V117.001ZM132 115.001C130.895 115.001 130 115.896 130 117.001V122.001C130 123.106 130.895 124.001 132 124.001H158C159.105 124.001 160 123.106 160 122.001V117.001C160 115.896 159.105 115.001 158 115.001H132Z" fill="url(#paint12_linear_476_5530)" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35 169.001C35 167.896 35.8954 167.001 37 167.001H118C119.105 167.001 120 167.896 120 169.001V213.001C120 214.106 119.105 215.001 118 215.001H37C35.8954 215.001 35 214.106 35 213.001V169.001ZM35 224.001C35 222.896 35.8954 222.001 37 222.001H61C62.1046 222.001 63 222.896 63 224.001C63 225.106 62.1046 226.001 61 226.001H37C35.8954 226.001 35 225.106 35 224.001ZM37 233.001C35.8954 233.001 35 233.896 35 235.001C35 236.106 35.8954 237.001 37 237.001H110C111.105 237.001 112 236.106 112 235.001C112 233.896 111.105 233.001 110 233.001H37Z" fill="url(#paint13_linear_476_5530)" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M246 169.001C246 167.896 246.895 167.001 248 167.001H329C330.105 167.001 331 167.896 331 169.001V213.001C331 214.106 330.105 215.001 329 215.001H248C246.895 215.001 246 214.106 246 213.001V169.001ZM246 224C246 222.896 246.895 222 248 222H272C273.105 222 274 222.896 274 224C274 225.105 273.105 226 272 226H248C246.895 226 246 225.105 246 224ZM248 233C246.895 233 246 233.896 246 235C246 236.105 246.895 237 248 237H321C322.105 237 323 236.105 323 235C323 233.896 322.105 233 321 233H248Z" fill="url(#paint14_linear_476_5530)" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140 169.001C140 167.896 140.895 167.001 142 167.001H223C224.105 167.001 225 167.896 225 169.001V213.001C225 214.106 224.105 215.001 223 215.001H142C140.895 215.001 140 214.106 140 213.001V169.001ZM140 224.001C140 222.896 140.895 222.001 142 222.001H166C167.105 222.001 168 222.896 168 224.001C168 225.106 167.105 226.001 166 226.001H142C140.895 226.001 140 225.106 140 224.001ZM142 233.001C140.895 233.001 140 233.896 140 235.001C140 236.106 140.895 237.001 142 237.001H215C216.105 237.001 217 236.106 217 235.001C217 233.896 216.105 233.001 215 233.001H142Z" fill="url(#paint15_linear_476_5530)" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M352 169.001C352 167.896 352.895 167.001 354 167.001H435C436.105 167.001 437 167.896 437 169.001V213.001C437 214.106 436.105 215.001 435 215.001H354C352.895 215.001 352 214.106 352 213.001V169.001ZM352 224.001C352 222.896 352.895 222.001 354 222.001H378C379.105 222.001 380 222.896 380 224.001C380 225.106 379.105 226.001 378 226.001H354C352.895 226.001 352 225.106 352 224.001ZM354 233.001C352.895 233.001 352 233.896 352 235.001C352 236.106 352.895 237.001 354 237.001H427C428.105 237.001 429 236.106 429 235.001C429 233.896 428.105 233.001 427 233.001H354Z" fill="url(#paint16_linear_476_5530)" fill-opacity="0.6"/>
-</g>
-<g clip-path="url(#clip2_476_5530)" filter="url(#filter0_d_476_5530)">
-<g clip-path="url(#clip3_476_5530)">
-<rect x="320" y="61" width="495" height="277" rx="8" fill="#0F172A"/>
-<rect x="320" y="61" width="495" height="277" rx="8" fill="url(#paint17_linear_476_5530)" fill-opacity="0.4"/>
-<rect x="320.5" y="61.5" width="494" height="276" rx="7.5" stroke="url(#paint18_linear_476_5530)" stroke-opacity="0.6"/>
-<rect x="340.25" y="126.25" width="83.5" height="212.5" rx="2.75" fill="url(#paint19_linear_476_5530)" fill-opacity="0.2" stroke="url(#paint20_linear_476_5530)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="340.25" y="75.25" width="452.5" height="33.5" rx="2.75" fill="url(#paint21_linear_476_5530)" fill-opacity="0.21" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="448.25" y="126.25" width="237.5" height="223.5" rx="2.75" fill="url(#paint22_linear_476_5530)" fill-opacity="0.2" stroke="url(#paint23_linear_476_5530)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="710.25" y="126.25" width="83.5" height="212.5" rx="2.75" fill="url(#paint24_linear_476_5530)" fill-opacity="0.2" stroke="url(#paint25_linear_476_5530)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<path d="M369.305 101H378.785C379.086 101 379.382 100.921 379.642 100.772C379.903 100.623 380.12 100.408 380.27 100.15C380.421 99.8915 380.5 99.5983 380.5 99.2999C380.499 99.0015 380.42 98.7084 380.269 98.4501L373.903 87.5215C373.753 87.2631 373.536 87.0485 373.276 86.8993C373.015 86.7501 372.719 86.6716 372.418 86.6716C372.117 86.6716 371.821 86.7501 371.561 86.8993C371.3 87.0485 371.084 87.2631 370.933 87.5215L369.305 90.3177L366.123 84.8498C365.972 84.5914 365.756 84.3769 365.495 84.2277C365.234 84.0785 364.938 84 364.637 84C364.336 84 364.04 84.0785 363.78 84.2277C363.519 84.3769 363.302 84.5914 363.152 84.8498L355.23 98.4501C355.079 98.7084 355 99.0015 355 99.2999C355 99.5983 355.079 99.8915 355.229 100.15C355.38 100.408 355.596 100.623 355.857 100.772C356.118 100.921 356.414 101 356.715 101H362.665C365.023 101 366.761 99.9736 367.958 97.9712L370.862 92.9858L372.418 90.3177L377.087 98.332H370.862L369.305 101ZM362.568 98.3292L358.415 98.3283L364.64 87.6433L367.746 92.9858L365.666 96.5566C364.872 97.8558 363.969 98.3292 362.568 98.3292Z" fill="#94A3B8"/>
-<line x1="500.5" y1="92.5" x2="529.5" y2="92.5" stroke="#94A3B8" stroke-width="5" stroke-linecap="round"/>
-<line x1="551.5" y1="92.5" x2="580.5" y2="92.5" stroke="#94A3B8" stroke-width="5" stroke-linecap="round"/>
-<line x1="602.5" y1="92.5" x2="631.5" y2="92.5" stroke="#94A3B8" stroke-width="5" stroke-linecap="round"/>
-<rect x="728" y="86" width="49" height="12" rx="3" fill="#94A3B8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M357.5 145C356.119 145 355 146.119 355 147.5C355 148.881 356.119 150 357.5 150H366.5C367.88 150 369 148.881 369 147.5C369 146.119 367.88 145 366.5 145H357.5ZM357.5 230C356.119 230 355 231.119 355 232.5C355 233.881 356.119 235 357.5 235H366.5C367.88 235 369 233.881 369 232.5C369 231.119 367.88 230 366.5 230H357.5ZM355 190.5C355 189.119 356.119 188 357.5 188H361.5C362.88 188 364 189.119 364 190.5C364 191.881 362.88 193 361.5 193H357.5C356.119 193 355 191.881 355 190.5ZM357.5 273C356.119 273 355 274.119 355 275.5C355 276.881 356.119 278 357.5 278H361.5C362.88 278 364 276.881 364 275.5C364 274.119 362.88 273 361.5 273H357.5ZM355 161.5C355 160.119 356.119 159 357.5 159H399.5C400.88 159 402 160.119 402 161.5C402 162.881 400.88 164 399.5 164H357.5C356.119 164 355 162.881 355 161.5ZM357.5 245C356.119 245 355 246.119 355 247.5C355 248.881 356.119 250 357.5 250H399.5C400.88 250 402 248.881 402 247.5C402 246.119 400.88 245 399.5 245H357.5ZM355 204.5C355 203.119 356.119 202 357.5 202H379.5C380.88 202 382 203.119 382 204.5C382 205.881 380.88 207 379.5 207H357.5C356.119 207 355 205.881 355 204.5ZM357.5 287C356.119 287 355 288.119 355 289.5C355 290.881 356.119 292 357.5 292H379.5C380.88 292 382 290.881 382 289.5C382 288.119 380.88 287 379.5 287H357.5ZM355 175.5C355 174.119 356.119 173 357.5 173H399.5C400.88 173 402 174.119 402 175.5C402 176.881 400.88 178 399.5 178H357.5C356.119 178 355 176.881 355 175.5ZM357.5 259C356.119 259 355 260.119 355 261.5C355 262.881 356.119 264 357.5 264H399.5C400.88 264 402 262.881 402 261.5C402 260.119 400.88 259 399.5 259H357.5ZM355 218.5C355 217.119 356.119 216 357.5 216H379.5C380.88 216 382 217.119 382 218.5C382 219.881 380.88 221 379.5 221H357.5C356.119 221 355 219.881 355 218.5ZM357.5 301C356.119 301 355 302.119 355 303.5C355 304.881 356.119 306 357.5 306H379.5C380.88 306 382 304.881 382 303.5C382 302.119 380.88 301 379.5 301H357.5Z" fill="url(#paint26_linear_476_5530)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M724 146.5C724 145.12 725.119 144 726.5 144H731.5C732.88 144 734 145.12 734 146.5C734 147.881 732.88 149 731.5 149H726.5C725.119 149 724 147.881 724 146.5ZM724 188.5C724 187.12 725.119 186 726.5 186H737.5C738.88 186 740 187.12 740 188.5C740 189.881 738.88 191 737.5 191H726.5C725.119 191 724 189.881 724 188.5ZM726.5 228C725.119 228 724 229.12 724 230.5C724 231.881 725.119 233 726.5 233H731.5C732.88 233 734 231.881 734 230.5C734 229.12 732.88 228 731.5 228H726.5ZM724 202.5C724 201.12 725.119 200 726.5 200H774.5C775.88 200 777 201.12 777 202.5C777 203.881 775.88 205 774.5 205H726.5C725.119 205 724 203.881 724 202.5ZM726.5 158C725.119 158 724 159.12 724 160.5C724 161.881 725.119 163 726.5 163H751.5C752.88 163 754 161.881 754 160.5C754 159.12 752.88 158 751.5 158H726.5ZM724 245.5C724 244.12 725.119 243 726.5 243H751.5C752.88 243 754 244.12 754 245.5C754 246.881 752.88 248 751.5 248H726.5C725.119 248 724 246.881 724 245.5ZM726.5 214C725.119 214 724 215.12 724 216.5C724 217.881 725.119 219 726.5 219H774.5C775.88 219 777 217.881 777 216.5C777 215.12 775.88 214 774.5 214H726.5ZM724 174.5C724 173.12 725.119 172 726.5 172H751.5C752.88 172 754 173.12 754 174.5C754 175.881 752.88 177 751.5 177H726.5C725.119 177 724 175.881 724 174.5ZM726.5 257C725.119 257 724 258.12 724 259.5C724 260.881 725.119 262 726.5 262H751.5C752.88 262 754 260.881 754 259.5C754 258.12 752.88 257 751.5 257H726.5Z" fill="url(#paint27_linear_476_5530)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M467 147.5C467 146.119 468.119 145 469.5 145H494.5C495.88 145 497 146.119 497 147.5C497 148.881 495.88 150 494.5 150H469.5C468.119 150 467 148.881 467 147.5ZM467 285.5C467 284.119 468.119 283 469.5 283H511.5C512.88 283 514 284.119 514 285.5C514 286.881 512.88 288 511.5 288H469.5C468.119 288 467 286.881 467 285.5ZM469.5 164C468.119 164 467 165.119 467 166.5C467 167.881 468.119 169 469.5 169H664.5C665.88 169 667 167.881 667 166.5C667 165.119 665.88 164 664.5 164H469.5ZM467 305.5C467 304.119 468.119 303 469.5 303H614.5C615.88 303 617 304.119 617 305.5C617 306.881 615.88 308 614.5 308H469.5C468.119 308 467 306.881 467 305.5ZM469.5 182C468.119 182 467 183.119 467 184.5C467 185.881 468.119 187 469.5 187H664.5C665.88 187 667 185.881 667 184.5C667 183.119 665.88 182 664.5 182H469.5ZM467 323.5C467 322.119 468.119 321 469.5 321H614.5C615.88 321 617 322.119 617 323.5C617 324.881 615.88 326 614.5 326H469.5C468.119 326 467 324.881 467 323.5ZM472 198C469.238 198 467 200.239 467 203V246C467 248.761 469.238 251 472 251H663C665.761 251 668 248.761 668 246V203C668 200.239 665.761 198 663 198H472Z" fill="url(#paint28_linear_476_5530)" fill-opacity="0.6"/>
+<svg width="320" height="180" viewBox="0 0 320 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_476_8099)">
+<g clip-path="url(#clip1_476_8099)">
+<rect width="320" height="180" rx="6" fill="url(#paint0_linear_476_8099)" fill-opacity="0.4"/>
+<rect x="0.5" y="0.5" width="319" height="179" rx="5.5" stroke="url(#paint1_linear_476_8099)" stroke-opacity="0.6"/>
+<path d="M33.2566 25H39.3903C39.5851 25 39.7765 24.9492 39.9452 24.8527C40.1139 24.7561 40.254 24.6172 40.3514 24.45C40.4487 24.2827 40.4999 24.093 40.4999 23.8999C40.4998 23.7069 40.4484 23.5172 40.3509 23.35L36.2317 16.2786C36.1343 16.1114 35.9942 15.9726 35.8256 15.876C35.6569 15.7795 35.4655 15.7287 35.2707 15.7287C35.076 15.7287 34.8846 15.7795 34.7159 15.876C34.5473 15.9726 34.4072 16.1114 34.3098 16.2786L33.2566 18.0879L31.1973 14.5499C31.0998 14.3827 30.9597 14.2439 30.791 14.1473C30.6222 14.0508 30.4309 14 30.236 14C30.0412 14 29.8499 14.0508 29.6811 14.1473C29.5124 14.2439 29.3723 14.3827 29.2748 14.5499L24.149 23.35C24.0515 23.5172 24.0001 23.7069 24 23.8999C23.9999 24.093 24.0511 24.2827 24.1485 24.45C24.2459 24.6172 24.386 24.7561 24.5547 24.8527C24.7234 24.9492 24.9148 25 25.1096 25H28.9598C30.4853 25 31.6103 24.3359 32.3844 23.0402L34.2638 19.8143L35.2704 18.0879L38.2916 23.2736H34.2638L33.2566 25ZM28.897 23.2718L26.2101 23.2712L30.2378 16.3574L32.2475 19.8143L30.902 22.1249C30.3879 22.9655 29.8039 23.2718 28.897 23.2718Z" fill="#475569"/>
+<line x1="117.5" y1="19.5" x2="136.5" y2="19.5" stroke="#475569" stroke-width="3" stroke-linecap="round"/>
+<line x1="150.5" y1="19.5" x2="169.5" y2="19.5" stroke="#475569" stroke-width="3" stroke-linecap="round"/>
+<line x1="183.5" y1="19.5" x2="202.5" y2="19.5" stroke="#475569" stroke-width="3" stroke-linecap="round"/>
+<rect x="265" y="15" width="31" height="7" rx="2" fill="#475569"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5 43C24.6716 43 24 43.6716 24 44.5C24 45.3284 24.6716 46 25.5 46H31.5C32.3284 46 33 45.3284 33 44.5C33 43.6716 32.3284 43 31.5 43H25.5ZM25.5 98C24.6716 98 24 98.6716 24 99.5C24 100.328 24.6716 101 25.5 101H31.5C32.3284 101 33 100.328 33 99.5C33 98.6716 32.3284 98 31.5 98H25.5ZM24 72.5C24 71.6716 24.6716 71 25.5 71H27.5C28.3284 71 29 71.6716 29 72.5C29 73.3284 28.3284 74 27.5 74H25.5C24.6716 74 24 73.3284 24 72.5ZM25.5 126C24.6716 126 24 126.672 24 127.5C24 128.328 24.6716 129 25.5 129H27.5C28.3284 129 29 128.328 29 127.5C29 126.672 28.3284 126 27.5 126H25.5ZM24 53.5C24 52.6716 24.6716 52 25.5 52H52.5C53.3284 52 54 52.6716 54 53.5C54 54.3284 53.3284 55 52.5 55H25.5C24.6716 55 24 54.3284 24 53.5ZM25.5 108C24.6716 108 24 108.672 24 109.5C24 110.328 24.6716 111 25.5 111H52.5C53.3284 111 54 110.328 54 109.5C54 108.672 53.3284 108 52.5 108H25.5ZM24 81.5C24 80.6716 24.6716 80 25.5 80H39.5C40.3284 80 41 80.6716 41 81.5C41 82.3284 40.3284 83 39.5 83H25.5C24.6716 83 24 82.3284 24 81.5ZM25.5 135C24.6716 135 24 135.672 24 136.5C24 137.328 24.6716 138 25.5 138H39.5C40.3284 138 41 137.328 41 136.5C41 135.672 40.3284 135 39.5 135H25.5ZM24 62.5C24 61.6716 24.6716 61 25.5 61H52.5C53.3284 61 54 61.6716 54 62.5C54 63.3284 53.3284 64 52.5 64H25.5C24.6716 64 24 63.3284 24 62.5ZM25.5 117C24.6716 117 24 117.672 24 118.5C24 119.328 24.6716 120 25.5 120H52.5C53.3284 120 54 119.328 54 118.5C54 117.672 53.3284 117 52.5 117H25.5ZM24 90.5C24 89.6716 24.6716 89 25.5 89H39.5C40.3284 89 41 89.6716 41 90.5C41 91.3284 40.3284 92 39.5 92H25.5C24.6716 92 24 91.3284 24 90.5ZM25.5 144C24.6716 144 24 144.672 24 145.5C24 146.328 24.6716 147 25.5 147H39.5C40.3284 147 41 146.328 41 145.5C41 144.672 40.3284 144 39.5 144H25.5Z" fill="url(#paint2_linear_476_8099)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262 44.5C262 43.6716 262.672 43 263.5 43H266.5C267.328 43 268 43.6716 268 44.5C268 45.3284 267.328 46 266.5 46H263.5C262.672 46 262 45.3284 262 44.5ZM262 72.5C262 71.6716 262.672 71 263.5 71H270.5C271.328 71 272 71.6716 272 72.5C272 73.3284 271.328 74 270.5 74H263.5C262.672 74 262 73.3284 262 72.5ZM263.5 98C262.672 98 262 98.6716 262 99.5C262 100.328 262.672 101 263.5 101H266.5C267.328 101 268 100.328 268 99.5C268 98.6716 267.328 98 266.5 98H263.5ZM262 81.5C262 80.6716 262.672 80 263.5 80H294.5C295.328 80 296 80.6716 296 81.5C296 82.3284 295.328 83 294.5 83H263.5C262.672 83 262 82.3284 262 81.5ZM263.5 52C262.672 52 262 52.6716 262 53.5C262 54.3284 262.672 55 263.5 55H279.5C280.328 55 281 54.3284 281 53.5C281 52.6716 280.328 52 279.5 52H263.5ZM262 109.5C262 108.672 262.672 108 263.5 108H279.5C280.328 108 281 108.672 281 109.5C281 110.328 280.328 111 279.5 111H263.5C262.672 111 262 110.328 262 109.5ZM263.5 89C262.672 89 262 89.6716 262 90.5C262 91.3284 262.672 92 263.5 92H294.5C295.328 92 296 91.3284 296 90.5C296 89.6716 295.328 89 294.5 89H263.5ZM262 62.5C262 61.6716 262.672 61 263.5 61H279.5C280.328 61 281 61.6716 281 62.5C281 63.3284 280.328 64 279.5 64H263.5C262.672 64 262 63.3284 262 62.5ZM263.5 117C262.672 117 262 117.672 262 118.5C262 119.328 262.672 120 263.5 120H279.5C280.328 120 281 119.328 281 118.5C281 117.672 280.328 117 279.5 117H263.5Z" fill="url(#paint3_linear_476_8099)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 44.5C96 43.6716 96.6716 43 97.5 43H113.5C114.328 43 115 43.6716 115 44.5C115 45.3284 114.328 46 113.5 46H97.5C96.6716 46 96 45.3284 96 44.5ZM96 134.5C96 133.672 96.6716 133 97.5 133H124.5C125.328 133 126 133.672 126 134.5C126 135.328 125.328 136 124.5 136H97.5C96.6716 136 96 135.328 96 134.5ZM97.5 55C96.6716 55 96 55.6716 96 56.5C96 57.3284 96.6716 58 97.5 58H224.5C225.328 58 226 57.3284 226 56.5C226 55.6716 225.328 55 224.5 55H97.5ZM96 147.5C96 146.672 96.6716 146 97.5 146H191.5C192.328 146 193 146.672 193 147.5C193 148.328 192.328 149 191.5 149H97.5C96.6716 149 96 148.328 96 147.5ZM97.5 67C96.6716 67 96 67.6716 96 68.5C96 69.3284 96.6716 70 97.5 70H224.5C225.328 70 226 69.3284 226 68.5C226 67.6716 225.328 67 224.5 67H97.5ZM96 158.5C96 157.672 96.6716 157 97.5 157H191.5C192.328 157 193 157.672 193 158.5C193 159.328 192.328 160 191.5 160H97.5C96.6716 160 96 159.328 96 158.5ZM99 77C97.3431 77 96 78.3431 96 80V108C96 109.657 97.3431 111 99 111H223C224.657 111 226 109.657 226 108V80C226 78.3431 224.657 77 223 77H99Z" fill="url(#paint4_linear_476_8099)"/>
 </g>
 </g>
 <defs>
-<filter id="filter0_d_476_5530" x="279" y="24" width="577" height="371" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="20.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0588235 0 0 0 0 0.0901961 0 0 0 0 0.164706 0 0 0 1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_476_5530"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_476_5530" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_476_5530" x1="896.5" y1="0" x2="896.5" y2="136.811" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_476_5530" x1="896.5" y1="-1.56064e-07" x2="896.532" y2="178.744" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_476_5530" x1="896.5" y1="13" x2="896.722" y2="45.0001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_476_5530" x1="896.5" y1="61" x2="896.5" y2="157.907" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint4_linear_476_5530" x1="896.5" y1="61" x2="896.523" y2="205.763" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint5_linear_476_5530" x1="899.095" y1="69.1854" x2="899.012" y2="271.119" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="0.899985" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint6_linear_476_5530" x1="235.5" y1="0" x2="235.5" y2="136.811" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint7_linear_476_5530" x1="235.5" y1="-1.56064e-07" x2="235.532" y2="178.744" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint8_linear_476_5530" x1="235.5" y1="13" x2="235.722" y2="45.0001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint9_linear_476_5530" x1="235.5" y1="61" x2="235.5" y2="96.0322" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint10_linear_476_5530" x1="236" y1="155" x2="236" y2="190.032" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint11_linear_476_5530" x1="236" y1="155" x2="236" y2="232" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint12_linear_476_5530" x1="157.987" y1="82.5411" x2="157.959" y2="176.034" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
+<linearGradient id="paint0_linear_476_8099" x1="160" y1="0" x2="160" y2="93.6351" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
 <stop offset="1" stop-color="#475569" stop-opacity="0"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint13_linear_476_5530" x1="93.9862" y1="156.526" x2="93.8971" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint1_linear_476_8099" x1="160" y1="-1.06812e-07" x2="160.022" y2="122.335" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint14_linear_476_5530" x1="305.671" y1="156.526" x2="305.582" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint2_linear_476_8099" x1="39.9551" y1="43.3382" x2="40.1182" y2="161.319" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint15_linear_476_5530" x1="199.829" y1="156.526" x2="199.74" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint3_linear_476_8099" x1="279.437" y1="43.4901" x2="279.515" y2="129.869" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint16_linear_476_5530" x1="411.513" y1="156.526" x2="411.424" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint4_linear_476_8099" x1="161.834" y1="36.6396" x2="161.777" y2="175.779" gradientUnits="userSpaceOnUse">
+<stop stop-color="#475569"/>
+<stop offset="1" stop-color="#475569" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint17_linear_476_5530" x1="567.5" y1="61" x2="567.5" y2="205.094" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint18_linear_476_5530" x1="567.5" y1="61" x2="567.533" y2="249.259" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint19_linear_476_5530" x1="382" y1="126" x2="382" y2="222.907" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint20_linear_476_5530" x1="382" y1="126" x2="382.117" y2="270.762" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint21_linear_476_5530" x1="566.5" y1="75" x2="566.739" y2="109" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint22_linear_476_5530" x1="567" y1="126" x2="567" y2="227.912" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint23_linear_476_5530" x1="567" y1="126" x2="567.045" y2="278.239" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint24_linear_476_5530" x1="752" y1="126" x2="752" y2="222.907" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint25_linear_476_5530" x1="752" y1="126" x2="752.117" y2="270.762" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint26_linear_476_5530" x1="379.535" y1="145.273" x2="379.786" y2="326.701" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint27_linear_476_5530" x1="750.5" y1="143.969" x2="750.619" y2="276.801" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint28_linear_476_5530" x1="568.115" y1="134.972" x2="568.026" y2="348.937" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_476_5530">
-<rect width="472" height="274" fill="white" transform="translate(661)"/>
+<clipPath id="clip0_476_8099">
+<rect width="320" height="180" fill="white"/>
 </clipPath>
-<clipPath id="clip1_476_5530">
-<rect width="472" height="274" fill="white"/>
-</clipPath>
-<clipPath id="clip2_476_5530">
-<rect width="495" height="289" fill="white" transform="translate(320 61)"/>
-</clipPath>
-<clipPath id="clip3_476_5530">
-<rect width="495" height="289" fill="white" transform="translate(320 61)"/>
+<clipPath id="clip1_476_8099">
+<rect width="320" height="180" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/docs/public/illustrations/pro-light.svg b/docs/public/illustrations/pro-light.svg
index 29613b07..deea6081 100644
--- a/docs/public/illustrations/pro-light.svg
+++ b/docs/public/illustrations/pro-light.svg
@@ -1,150 +1,43 @@
-<svg width="1134" height="395" viewBox="0 0 1134 395" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.4" clip-path="url(#clip0_476_5797)">
-<g clip-path="url(#clip1_476_5797)">
-<rect x="661.5" y="0.5" width="470" height="262" rx="7.5" stroke="url(#paint0_linear_476_5797)"/>
-<rect x="681.25" y="13.25" width="430.5" height="31.5" rx="2.75" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<rect x="681.25" y="61.25" width="430.5" height="212.5" rx="2.75" stroke="url(#paint1_linear_476_5797)" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<path d="M707.464 37H716.386C716.669 37 716.948 36.9261 717.193 36.7857C717.438 36.6452 717.642 36.4432 717.784 36.2C717.925 35.9567 718 35.6808 718 35.3999C718 35.1191 717.925 34.8432 717.783 34.6001L711.792 24.3144C711.65 24.0712 711.446 23.8692 711.201 23.7288C710.956 23.5884 710.677 23.5144 710.394 23.5144C710.111 23.5144 709.832 23.5884 709.587 23.7288C709.342 23.8692 709.138 24.0712 708.996 24.3144L707.464 26.9461L704.469 21.7998C704.327 21.5566 704.123 21.3547 703.878 21.2143C703.632 21.0739 703.354 21 703.071 21C702.787 21 702.509 21.0739 702.264 21.2143C702.018 21.3547 701.814 21.5566 701.673 21.7998L694.217 34.6001C694.075 34.8432 694 35.1191 694 35.3999C694 35.6808 694.074 35.9567 694.216 36.2C694.358 36.4432 694.561 36.6452 694.807 36.7857C695.052 36.9261 695.331 37 695.614 37H701.214C703.433 37 705.07 36.034 706.196 34.1494L708.929 29.4572L710.393 26.9461L714.788 34.4889H708.929L707.464 37ZM701.123 34.4863L697.215 34.4854L703.073 24.429L705.996 29.4572L704.039 32.818C703.292 34.0408 702.442 34.4863 701.123 34.4863Z" fill="#94A3B8"/>
-<line x1="832" y1="30" x2="860" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="880" y1="30" x2="908" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="929" y1="30" x2="957" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<rect x="1049" y="23" width="46" height="11" rx="3" fill="#94A3B8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M885 90C883.895 90 883 90.8954 883 92C883 93.1046 883.895 94 885 94H909C910.105 94 911 93.1046 911 92C911 90.8954 910.105 90 909 90H885ZM806.5 106C804.015 106 802 108.015 802 110.5C802 112.985 804.015 115 806.5 115H987.5C989.985 115 992 112.985 992 110.5C992 108.015 989.985 106 987.5 106H806.5ZM842 129.5C842 127.015 844.015 125 846.5 125H949.5C951.985 125 954 127.015 954 129.5C954 131.985 951.985 134 949.5 134H846.5C844.015 134 842 131.985 842 129.5ZM768 192C765.791 192 764 193.791 764 196V268H1031V196C1031 193.791 1029.21 192 1027 192H768ZM845 156C845 154.343 846.343 153 848 153H889C890.657 153 892 154.343 892 156V162C892 163.657 890.657 165 889 165H848C846.343 165 845 163.657 845 162V156ZM907 153C905.343 153 904 154.343 904 156V162C904 163.657 905.343 165 907 165H948C949.657 165 951 163.657 951 162V156C951 154.343 949.657 153 948 153H907Z" fill="url(#paint2_linear_476_5797)" fill-opacity="0.5"/>
-</g>
-</g>
-<g opacity="0.4" clip-path="url(#clip2_476_5797)">
-<g clip-path="url(#clip3_476_5797)">
-<rect x="0.500046" y="0.5" width="470" height="262" rx="7.5" stroke="url(#paint3_linear_476_5797)"/>
-<rect x="20.25" y="13.25" width="430.5" height="31.5" rx="2.75" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="1.9 1.9"/>
-<path d="M46.4642 37H55.3859C55.6693 37 55.9477 36.9261 56.1931 36.7857C56.4385 36.6452 56.6422 36.4432 56.7838 36.2C56.9255 35.9567 57 35.6808 56.9998 35.3999C56.9997 35.1191 56.925 34.8432 56.7831 34.6001L50.7916 24.3144C50.6499 24.0712 50.4462 23.8692 50.2009 23.7288C49.9555 23.5884 49.6772 23.5144 49.3939 23.5144C49.1105 23.5144 48.8322 23.5884 48.5869 23.7288C48.3415 23.8692 48.1378 24.0712 47.9962 24.3144L46.4642 26.9461L43.4688 21.7998C43.3271 21.5566 43.1232 21.3547 42.8778 21.2143C42.6324 21.0739 42.354 21 42.0707 21C41.7873 21 41.5089 21.0739 41.2635 21.2143C41.0181 21.3547 40.8143 21.5566 40.6725 21.7998L33.2168 34.6001C33.0749 34.8432 33.0002 35.1191 33 35.3999C32.9999 35.6808 33.0744 35.9567 33.216 36.2C33.3577 36.4432 33.5614 36.6452 33.8068 36.7857C34.0522 36.9261 34.3306 37 34.614 37H40.2143C42.4332 37 44.0696 36.034 45.1956 34.1494L47.9292 29.4572L49.3934 26.9461L53.7878 34.4889H47.9292L46.4642 37ZM40.123 34.4863L36.2147 34.4854L42.0733 24.429L44.9965 29.4572L43.0393 32.818C42.2915 34.0408 41.442 34.4863 40.123 34.4863Z" fill="#94A3B8"/>
-<line x1="171" y1="30" x2="199" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="219" y1="30" x2="247" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<line x1="268" y1="30" x2="296" y2="30" stroke="#94A3B8" stroke-width="4" stroke-linecap="round"/>
-<rect x="388" y="23" width="46" height="11" rx="3" fill="#94A3B8"/>
-<rect x="20.251" y="61.2509" width="430.498" height="76.4981" rx="2.76023" stroke="#94A3B8" stroke-width="0.501861" stroke-dasharray="1.91 1.91"/>
-<rect x="20.251" y="155.251" width="431.498" height="76.4981" rx="2.74907" stroke="url(#paint4_linear_476_5797)" stroke-width="0.501861" stroke-dasharray="1.91 1.91"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M263 71.001C261.343 71.001 260 72.3441 260 74.001V126.001C260 127.658 261.343 129.001 263 129.001H432C433.657 129.001 435 127.658 435 126.001V74.001C435 72.3441 433.657 71.001 432 71.001H263ZM35.5 79.001C34.1193 79.001 33 80.1203 33 81.501C33 82.8817 34.1193 84.001 35.5 84.001H97.5C98.8808 84.001 100 82.8817 100 81.501C100 80.1203 98.8808 79.001 97.5 79.001H35.5ZM35.5 91.001C34.1193 91.001 33 92.1203 33 93.501C33 94.8817 34.1193 96.001 35.5 96.001H210.5C211.881 96.001 213 94.8817 213 93.501C213 92.1203 211.881 91.001 210.5 91.001H35.5ZM33 104.501C33 103.12 34.1193 102.001 35.5 102.001H171.5C172.881 102.001 174 103.12 174 104.501C174 105.882 172.881 107.001 171.5 107.001H35.5C34.1193 107.001 33 105.882 33 104.501ZM33 117.001C33 115.896 33.8955 115.001 35 115.001H124C125.105 115.001 126 115.896 126 117.001V122.001C126 123.106 125.105 124.001 124 124.001H35C33.8955 124.001 33 123.106 33 122.001V117.001ZM132 115.001C130.895 115.001 130 115.896 130 117.001V122.001C130 123.106 130.895 124.001 132 124.001H158C159.105 124.001 160 123.106 160 122.001V117.001C160 115.896 159.105 115.001 158 115.001H132Z" fill="url(#paint5_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35 169.001C35 167.896 35.8955 167.001 37 167.001H118C119.105 167.001 120 167.896 120 169.001V213.001C120 214.106 119.105 215.001 118 215.001H37C35.8955 215.001 35 214.106 35 213.001V169.001ZM35 224.001C35 222.896 35.8955 222.001 37 222.001H61C62.1046 222.001 63 222.896 63 224.001C63 225.106 62.1046 226.001 61 226.001H37C35.8955 226.001 35 225.106 35 224.001ZM37 233.001C35.8955 233.001 35 233.896 35 235.001C35 236.106 35.8955 237.001 37 237.001H110C111.105 237.001 112 236.106 112 235.001C112 233.896 111.105 233.001 110 233.001H37Z" fill="url(#paint6_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M246 169.001C246 167.896 246.895 167.001 248 167.001H329C330.105 167.001 331 167.896 331 169.001V213.001C331 214.106 330.105 215.001 329 215.001H248C246.895 215.001 246 214.106 246 213.001V169.001ZM246 224C246 222.896 246.895 222 248 222H272C273.105 222 274 222.896 274 224C274 225.105 273.105 226 272 226H248C246.895 226 246 225.105 246 224ZM248 233C246.895 233 246 233.896 246 235C246 236.105 246.895 237 248 237H321C322.105 237 323 236.105 323 235C323 233.896 322.105 233 321 233H248Z" fill="url(#paint7_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140 169.001C140 167.896 140.895 167.001 142 167.001H223C224.105 167.001 225 167.896 225 169.001V213.001C225 214.106 224.105 215.001 223 215.001H142C140.895 215.001 140 214.106 140 213.001V169.001ZM140 224.001C140 222.896 140.895 222.001 142 222.001H166C167.105 222.001 168 222.896 168 224.001C168 225.106 167.105 226.001 166 226.001H142C140.895 226.001 140 225.106 140 224.001ZM142 233.001C140.895 233.001 140 233.896 140 235.001C140 236.106 140.895 237.001 142 237.001H215C216.105 237.001 217 236.106 217 235.001C217 233.896 216.105 233.001 215 233.001H142Z" fill="url(#paint8_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M352 169.001C352 167.896 352.895 167.001 354 167.001H435C436.105 167.001 437 167.896 437 169.001V213.001C437 214.106 436.105 215.001 435 215.001H354C352.895 215.001 352 214.106 352 213.001V169.001ZM352 224.001C352 222.896 352.895 222.001 354 222.001H378C379.105 222.001 380 222.896 380 224.001C380 225.106 379.105 226.001 378 226.001H354C352.895 226.001 352 225.106 352 224.001ZM354 233.001C352.895 233.001 352 233.896 352 235.001C352 236.106 352.895 237.001 354 237.001H427C428.105 237.001 429 236.106 429 235.001C429 233.896 428.105 233.001 427 233.001H354Z" fill="url(#paint9_linear_476_5797)" fill-opacity="0.5"/>
-</g>
-</g>
-<g clip-path="url(#clip4_476_5797)" filter="url(#filter0_d_476_5797)">
-<g clip-path="url(#clip5_476_5797)">
-<rect x="320" y="61" width="495" height="277" rx="8" fill="white"/>
-<rect x="320.5" y="61.5" width="494" height="276" rx="7.5" stroke="url(#paint10_linear_476_5797)" stroke-opacity="0.6"/>
-<rect x="340.25" y="126.25" width="83.5" height="212.5" rx="2.75" stroke="url(#paint11_linear_476_5797)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="340.25" y="75.25" width="452.5" height="33.5" rx="2.75" stroke="#94A3B8" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="448.25" y="126.25" width="237.5" height="223.5" rx="2.75" stroke="url(#paint12_linear_476_5797)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<rect x="710.25" y="126.25" width="83.5" height="212.5" rx="2.75" stroke="url(#paint13_linear_476_5797)" stroke-width="0.5" stroke-dasharray="2 2"/>
-<path d="M369.305 101H378.785C379.086 101 379.382 100.921 379.642 100.772C379.903 100.623 380.12 100.408 380.27 100.15C380.421 99.8915 380.5 99.5983 380.5 99.2999C380.499 99.0015 380.42 98.7084 380.269 98.4501L373.903 87.5215C373.753 87.2631 373.536 87.0485 373.276 86.8993C373.015 86.7501 372.719 86.6716 372.418 86.6716C372.117 86.6716 371.821 86.7501 371.561 86.8993C371.3 87.0485 371.084 87.2631 370.933 87.5215L369.305 90.3177L366.123 84.8498C365.972 84.5914 365.756 84.3769 365.495 84.2277C365.234 84.0785 364.938 84 364.637 84C364.336 84 364.04 84.0785 363.78 84.2277C363.519 84.3769 363.302 84.5914 363.152 84.8498L355.23 98.4501C355.079 98.7084 355 99.0015 355 99.2999C355 99.5983 355.079 99.8915 355.229 100.15C355.38 100.408 355.596 100.623 355.857 100.772C356.118 100.921 356.414 101 356.715 101H362.665C365.023 101 366.761 99.9736 367.958 97.9712L370.862 92.9858L372.418 90.3177L377.087 98.332H370.862L369.305 101ZM362.568 98.3292L358.415 98.3283L364.64 87.6433L367.746 92.9858L365.666 96.5566C364.872 97.8558 363.969 98.3292 362.568 98.3292Z" fill="#94A3B8" fill-opacity="0.5"/>
-<line x1="500.5" y1="92.5" x2="529.5" y2="92.5" stroke="#94A3B8" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round"/>
-<line x1="551.5" y1="92.5" x2="580.5" y2="92.5" stroke="#94A3B8" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round"/>
-<line x1="602.5" y1="92.5" x2="631.5" y2="92.5" stroke="#94A3B8" stroke-opacity="0.5" stroke-width="5" stroke-linecap="round"/>
-<rect x="728" y="86" width="49" height="12" rx="3" fill="#94A3B8" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M357.5 145C356.119 145 355 146.119 355 147.5C355 148.881 356.119 150 357.5 150H366.5C367.88 150 369 148.881 369 147.5C369 146.119 367.88 145 366.5 145H357.5ZM357.5 230C356.119 230 355 231.119 355 232.5C355 233.881 356.119 235 357.5 235H366.5C367.88 235 369 233.881 369 232.5C369 231.119 367.88 230 366.5 230H357.5ZM355 190.5C355 189.119 356.119 188 357.5 188H361.5C362.88 188 364 189.119 364 190.5C364 191.881 362.88 193 361.5 193H357.5C356.119 193 355 191.881 355 190.5ZM357.5 273C356.119 273 355 274.119 355 275.5C355 276.881 356.119 278 357.5 278H361.5C362.88 278 364 276.881 364 275.5C364 274.119 362.88 273 361.5 273H357.5ZM355 161.5C355 160.119 356.119 159 357.5 159H399.5C400.88 159 402 160.119 402 161.5C402 162.881 400.88 164 399.5 164H357.5C356.119 164 355 162.881 355 161.5ZM357.5 245C356.119 245 355 246.119 355 247.5C355 248.881 356.119 250 357.5 250H399.5C400.88 250 402 248.881 402 247.5C402 246.119 400.88 245 399.5 245H357.5ZM355 204.5C355 203.119 356.119 202 357.5 202H379.5C380.88 202 382 203.119 382 204.5C382 205.881 380.88 207 379.5 207H357.5C356.119 207 355 205.881 355 204.5ZM357.5 287C356.119 287 355 288.119 355 289.5C355 290.881 356.119 292 357.5 292H379.5C380.88 292 382 290.881 382 289.5C382 288.119 380.88 287 379.5 287H357.5ZM355 175.5C355 174.119 356.119 173 357.5 173H399.5C400.88 173 402 174.119 402 175.5C402 176.881 400.88 178 399.5 178H357.5C356.119 178 355 176.881 355 175.5ZM357.5 259C356.119 259 355 260.119 355 261.5C355 262.881 356.119 264 357.5 264H399.5C400.88 264 402 262.881 402 261.5C402 260.119 400.88 259 399.5 259H357.5ZM355 218.5C355 217.119 356.119 216 357.5 216H379.5C380.88 216 382 217.119 382 218.5C382 219.881 380.88 221 379.5 221H357.5C356.119 221 355 219.881 355 218.5ZM357.5 301C356.119 301 355 302.119 355 303.5C355 304.881 356.119 306 357.5 306H379.5C380.88 306 382 304.881 382 303.5C382 302.119 380.88 301 379.5 301H357.5Z" fill="url(#paint14_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M724 146.5C724 145.12 725.119 144 726.5 144H731.5C732.88 144 734 145.12 734 146.5C734 147.881 732.88 149 731.5 149H726.5C725.119 149 724 147.881 724 146.5ZM724 188.5C724 187.12 725.119 186 726.5 186H737.5C738.88 186 740 187.12 740 188.5C740 189.881 738.88 191 737.5 191H726.5C725.119 191 724 189.881 724 188.5ZM726.5 228C725.119 228 724 229.12 724 230.5C724 231.881 725.119 233 726.5 233H731.5C732.88 233 734 231.881 734 230.5C734 229.12 732.88 228 731.5 228H726.5ZM724 202.5C724 201.12 725.119 200 726.5 200H774.5C775.88 200 777 201.12 777 202.5C777 203.881 775.88 205 774.5 205H726.5C725.119 205 724 203.881 724 202.5ZM726.5 158C725.119 158 724 159.12 724 160.5C724 161.881 725.119 163 726.5 163H751.5C752.88 163 754 161.881 754 160.5C754 159.12 752.88 158 751.5 158H726.5ZM724 245.5C724 244.12 725.119 243 726.5 243H751.5C752.88 243 754 244.12 754 245.5C754 246.881 752.88 248 751.5 248H726.5C725.119 248 724 246.881 724 245.5ZM726.5 214C725.119 214 724 215.12 724 216.5C724 217.881 725.119 219 726.5 219H774.5C775.88 219 777 217.881 777 216.5C777 215.12 775.88 214 774.5 214H726.5ZM724 174.5C724 173.12 725.119 172 726.5 172H751.5C752.88 172 754 173.12 754 174.5C754 175.881 752.88 177 751.5 177H726.5C725.119 177 724 175.881 724 174.5ZM726.5 257C725.119 257 724 258.12 724 259.5C724 260.881 725.119 262 726.5 262H751.5C752.88 262 754 260.881 754 259.5C754 258.12 752.88 257 751.5 257H726.5Z" fill="url(#paint15_linear_476_5797)" fill-opacity="0.5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M467 147.5C467 146.119 468.119 145 469.5 145H494.5C495.88 145 497 146.119 497 147.5C497 148.881 495.88 150 494.5 150H469.5C468.119 150 467 148.881 467 147.5ZM467 285.5C467 284.119 468.119 283 469.5 283H511.5C512.88 283 514 284.119 514 285.5C514 286.881 512.88 288 511.5 288H469.5C468.119 288 467 286.881 467 285.5ZM469.5 164C468.119 164 467 165.119 467 166.5C467 167.881 468.119 169 469.5 169H664.5C665.88 169 667 167.881 667 166.5C667 165.119 665.88 164 664.5 164H469.5ZM467 305.5C467 304.119 468.119 303 469.5 303H614.5C615.88 303 617 304.119 617 305.5C617 306.881 615.88 308 614.5 308H469.5C468.119 308 467 306.881 467 305.5ZM469.5 182C468.119 182 467 183.119 467 184.5C467 185.881 468.119 187 469.5 187H664.5C665.88 187 667 185.881 667 184.5C667 183.119 665.88 182 664.5 182H469.5ZM467 323.5C467 322.119 468.119 321 469.5 321H614.5C615.88 321 617 322.119 617 323.5C617 324.881 615.88 326 614.5 326H469.5C468.119 326 467 324.881 467 323.5ZM472 198C469.238 198 467 200.239 467 203V246C467 248.761 469.238 251 472 251H663C665.761 251 668 248.761 668 246V203C668 200.239 665.761 198 663 198H472Z" fill="url(#paint16_linear_476_5797)" fill-opacity="0.5"/>
+<svg width="320" height="180" viewBox="0 0 320 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_469_4402)">
+<g clip-path="url(#clip1_469_4402)">
+<rect x="0.5" y="0.5" width="319" height="179" rx="5.5" fill="url(#paint0_linear_469_4402)" fill-opacity="0.15" stroke="url(#paint1_linear_469_4402)"/>
+<path d="M33.2566 25H39.3903C39.5851 25 39.7765 24.9492 39.9452 24.8527C40.1139 24.7561 40.254 24.6172 40.3514 24.45C40.4487 24.2827 40.4999 24.093 40.4999 23.8999C40.4998 23.7069 40.4484 23.5172 40.3509 23.35L36.2317 16.2786C36.1343 16.1114 35.9942 15.9726 35.8256 15.876C35.6569 15.7795 35.4655 15.7287 35.2707 15.7287C35.076 15.7287 34.8846 15.7795 34.7159 15.876C34.5473 15.9726 34.4072 16.1114 34.3098 16.2786L33.2566 18.0879L31.1973 14.5499C31.0998 14.3827 30.9597 14.2439 30.791 14.1473C30.6222 14.0508 30.4309 14 30.236 14C30.0412 14 29.8499 14.0508 29.6811 14.1473C29.5124 14.2439 29.3723 14.3827 29.2748 14.5499L24.149 23.35C24.0515 23.5172 24.0001 23.7069 24 23.8999C23.9999 24.093 24.0511 24.2827 24.1485 24.45C24.2459 24.6172 24.386 24.7561 24.5547 24.8527C24.7234 24.9492 24.9148 25 25.1096 25H28.9598C30.4853 25 31.6103 24.3359 32.3844 23.0402L34.2638 19.8143L35.2704 18.0879L38.2916 23.2736H34.2638L33.2566 25ZM28.897 23.2718L26.2101 23.2712L30.2378 16.3574L32.2475 19.8143L30.902 22.1249C30.3879 22.9655 29.8039 23.2718 28.897 23.2718Z" fill="#CBD5E1"/>
+<line x1="117.5" y1="19.5" x2="136.5" y2="19.5" stroke="#CBD5E1" stroke-width="3" stroke-linecap="round"/>
+<line x1="150.5" y1="19.5" x2="169.5" y2="19.5" stroke="#CBD5E1" stroke-width="3" stroke-linecap="round"/>
+<line x1="183.5" y1="19.5" x2="202.5" y2="19.5" stroke="#CBD5E1" stroke-width="3" stroke-linecap="round"/>
+<rect x="265" y="15" width="31" height="7" rx="2" fill="#CBD5E1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5 43C24.6716 43 24 43.6716 24 44.5C24 45.3284 24.6716 46 25.5 46H31.5C32.3284 46 33 45.3284 33 44.5C33 43.6716 32.3284 43 31.5 43H25.5ZM25.5 98C24.6716 98 24 98.6716 24 99.5C24 100.328 24.6716 101 25.5 101H31.5C32.3284 101 33 100.328 33 99.5C33 98.6716 32.3284 98 31.5 98H25.5ZM24 72.5C24 71.6716 24.6716 71 25.5 71H27.5C28.3284 71 29 71.6716 29 72.5C29 73.3284 28.3284 74 27.5 74H25.5C24.6716 74 24 73.3284 24 72.5ZM25.5 126C24.6716 126 24 126.672 24 127.5C24 128.328 24.6716 129 25.5 129H27.5C28.3284 129 29 128.328 29 127.5C29 126.672 28.3284 126 27.5 126H25.5ZM24 53.5C24 52.6716 24.6716 52 25.5 52H52.5C53.3284 52 54 52.6716 54 53.5C54 54.3284 53.3284 55 52.5 55H25.5C24.6716 55 24 54.3284 24 53.5ZM25.5 108C24.6716 108 24 108.672 24 109.5C24 110.328 24.6716 111 25.5 111H52.5C53.3284 111 54 110.328 54 109.5C54 108.672 53.3284 108 52.5 108H25.5ZM24 81.5C24 80.6716 24.6716 80 25.5 80H39.5C40.3284 80 41 80.6716 41 81.5C41 82.3284 40.3284 83 39.5 83H25.5C24.6716 83 24 82.3284 24 81.5ZM25.5 135C24.6716 135 24 135.672 24 136.5C24 137.328 24.6716 138 25.5 138H39.5C40.3284 138 41 137.328 41 136.5C41 135.672 40.3284 135 39.5 135H25.5ZM24 62.5C24 61.6716 24.6716 61 25.5 61H52.5C53.3284 61 54 61.6716 54 62.5C54 63.3284 53.3284 64 52.5 64H25.5C24.6716 64 24 63.3284 24 62.5ZM25.5 117C24.6716 117 24 117.672 24 118.5C24 119.328 24.6716 120 25.5 120H52.5C53.3284 120 54 119.328 54 118.5C54 117.672 53.3284 117 52.5 117H25.5ZM24 90.5C24 89.6716 24.6716 89 25.5 89H39.5C40.3284 89 41 89.6716 41 90.5C41 91.3284 40.3284 92 39.5 92H25.5C24.6716 92 24 91.3284 24 90.5ZM25.5 144C24.6716 144 24 144.672 24 145.5C24 146.328 24.6716 147 25.5 147H39.5C40.3284 147 41 146.328 41 145.5C41 144.672 40.3284 144 39.5 144H25.5Z" fill="url(#paint2_linear_469_4402)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262 44.5C262 43.6716 262.672 43 263.5 43H266.5C267.328 43 268 43.6716 268 44.5C268 45.3284 267.328 46 266.5 46H263.5C262.672 46 262 45.3284 262 44.5ZM262 72.5C262 71.6716 262.672 71 263.5 71H270.5C271.328 71 272 71.6716 272 72.5C272 73.3284 271.328 74 270.5 74H263.5C262.672 74 262 73.3284 262 72.5ZM263.5 98C262.672 98 262 98.6716 262 99.5C262 100.328 262.672 101 263.5 101H266.5C267.328 101 268 100.328 268 99.5C268 98.6716 267.328 98 266.5 98H263.5ZM262 81.5C262 80.6716 262.672 80 263.5 80H294.5C295.328 80 296 80.6716 296 81.5C296 82.3284 295.328 83 294.5 83H263.5C262.672 83 262 82.3284 262 81.5ZM263.5 52C262.672 52 262 52.6716 262 53.5C262 54.3284 262.672 55 263.5 55H279.5C280.328 55 281 54.3284 281 53.5C281 52.6716 280.328 52 279.5 52H263.5ZM262 109.5C262 108.672 262.672 108 263.5 108H279.5C280.328 108 281 108.672 281 109.5C281 110.328 280.328 111 279.5 111H263.5C262.672 111 262 110.328 262 109.5ZM263.5 89C262.672 89 262 89.6716 262 90.5C262 91.3284 262.672 92 263.5 92H294.5C295.328 92 296 91.3284 296 90.5C296 89.6716 295.328 89 294.5 89H263.5ZM262 62.5C262 61.6716 262.672 61 263.5 61H279.5C280.328 61 281 61.6716 281 62.5C281 63.3284 280.328 64 279.5 64H263.5C262.672 64 262 63.3284 262 62.5ZM263.5 117C262.672 117 262 117.672 262 118.5C262 119.328 262.672 120 263.5 120H279.5C280.328 120 281 119.328 281 118.5C281 117.672 280.328 117 279.5 117H263.5Z" fill="url(#paint3_linear_469_4402)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 44.5C96 43.6716 96.6716 43 97.5 43H113.5C114.328 43 115 43.6716 115 44.5C115 45.3284 114.328 46 113.5 46H97.5C96.6716 46 96 45.3284 96 44.5ZM96 134.5C96 133.672 96.6716 133 97.5 133H124.5C125.328 133 126 133.672 126 134.5C126 135.328 125.328 136 124.5 136H97.5C96.6716 136 96 135.328 96 134.5ZM97.5 55C96.6716 55 96 55.6716 96 56.5C96 57.3284 96.6716 58 97.5 58H224.5C225.328 58 226 57.3284 226 56.5C226 55.6716 225.328 55 224.5 55H97.5ZM96 147.5C96 146.672 96.6716 146 97.5 146H191.5C192.328 146 193 146.672 193 147.5C193 148.328 192.328 149 191.5 149H97.5C96.6716 149 96 148.328 96 147.5ZM97.5 67C96.6716 67 96 67.6716 96 68.5C96 69.3284 96.6716 70 97.5 70H224.5C225.328 70 226 69.3284 226 68.5C226 67.6716 225.328 67 224.5 67H97.5ZM96 158.5C96 157.672 96.6716 157 97.5 157H191.5C192.328 157 193 157.672 193 158.5C193 159.328 192.328 160 191.5 160H97.5C96.6716 160 96 159.328 96 158.5ZM99 77C97.3431 77 96 78.3431 96 80V108C96 109.657 97.3431 111 99 111H223C224.657 111 226 109.657 226 108V80C226 78.3431 224.657 77 223 77H99Z" fill="url(#paint4_linear_469_4402)"/>
 </g>
 </g>
 <defs>
-<filter id="filter0_d_476_5797" x="279" y="24" width="577" height="371" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="20.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.796078 0 0 0 0 0.835294 0 0 0 0 0.882353 0 0 0 0.21 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_476_5797"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_476_5797" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_476_5797" x1="896.5" y1="-1.56064e-07" x2="896.532" y2="178.744" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint0_linear_469_4402" x1="160" y1="0" x2="160" y2="81.8934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint1_linear_476_5797" x1="896.5" y1="61" x2="896.523" y2="205.763" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint1_linear_469_4402" x1="160" y1="-1.06812e-07" x2="160.022" y2="122.335" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint2_linear_476_5797" x1="899.095" y1="69.1854" x2="899.013" y2="271.119" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="0.899985" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint2_linear_469_4402" x1="39.9551" y1="43.3382" x2="40.1182" y2="161.319" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint3_linear_476_5797" x1="235.5" y1="-1.56064e-07" x2="235.532" y2="178.744" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint3_linear_469_4402" x1="279.437" y1="43.4901" x2="279.515" y2="129.869" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint4_linear_476_5797" x1="236" y1="155" x2="236" y2="232" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
+<linearGradient id="paint4_linear_469_4402" x1="161.834" y1="36.6396" x2="161.777" y2="175.779" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CBD5E1"/>
+<stop offset="1" stop-color="#CBD5E1" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint5_linear_476_5797" x1="157.987" y1="82.5411" x2="157.959" y2="176.034" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#475569" stop-opacity="0"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint6_linear_476_5797" x1="93.9862" y1="156.526" x2="93.8971" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint7_linear_476_5797" x1="305.671" y1="156.526" x2="305.582" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint8_linear_476_5797" x1="199.829" y1="156.526" x2="199.74" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint9_linear_476_5797" x1="411.513" y1="156.526" x2="411.424" y2="269.114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint10_linear_476_5797" x1="567.5" y1="61" x2="567.533" y2="249.259" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint11_linear_476_5797" x1="382" y1="126" x2="382.117" y2="270.762" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint12_linear_476_5797" x1="567" y1="126" x2="567.045" y2="278.239" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint13_linear_476_5797" x1="752" y1="126" x2="752.117" y2="270.762" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint14_linear_476_5797" x1="379.535" y1="145.273" x2="379.786" y2="326.701" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint15_linear_476_5797" x1="750.5" y1="143.969" x2="750.619" y2="276.801" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint16_linear_476_5797" x1="568.115" y1="134.972" x2="568.026" y2="348.937" gradientUnits="userSpaceOnUse">
-<stop stop-color="#94A3B8"/>
-<stop offset="1" stop-color="#94A3B8" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_476_5797">
-<rect width="472" height="274" fill="white" transform="translate(661)"/>
+<clipPath id="clip0_469_4402">
+<rect width="320" height="180" fill="white"/>
 </clipPath>
-<clipPath id="clip1_476_5797">
-<rect width="472" height="274" fill="white" transform="translate(661)"/>
-</clipPath>
-<clipPath id="clip2_476_5797">
-<rect width="472" height="274" fill="white"/>
-</clipPath>
-<clipPath id="clip3_476_5797">
-<rect width="472" height="274" fill="white"/>
-</clipPath>
-<clipPath id="clip4_476_5797">
-<rect width="495" height="289" fill="white" transform="translate(320 61)"/>
-</clipPath>
-<clipPath id="clip5_476_5797">
-<rect width="495" height="289" fill="white" transform="translate(320 61)"/>
+<clipPath id="clip1_469_4402">
+<rect width="320" height="180" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/docs/types/index.d.ts b/docs/types/index.d.ts
new file mode 100644
index 00000000..88ad0903
--- /dev/null
+++ b/docs/types/index.d.ts
@@ -0,0 +1,12 @@
+export interface HomeProBlock {
+  id?: string
+  to?: string
+  name?: string
+  description?: string
+  slot?: string
+  class: string
+  style?: any
+  inactive?: boolean
+  transparent?: boolean
+  children?: ProBlock[]
+}
diff --git a/docs/vercel.json b/docs/vercel.json
new file mode 100644
index 00000000..f1d02cd6
--- /dev/null
+++ b/docs/vercel.json
@@ -0,0 +1,152 @@
+{
+  "github": {
+    "silent": true
+  },
+  "redirects": [
+    {
+      "source": "/elements/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/forms/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/data/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/navigation/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/overlays/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/layout/:path(.*)",
+      "destination": "/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/elements/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/forms/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/data/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/navigation/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/overlays/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/dev/layout/:path(.*)",
+      "destination": "/dev/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/guide",
+      "destination": "/pro/getting-started",
+      "permanent": true
+    },
+    {
+      "source": "/pro/guide/usage",
+      "destination": "/pro/getting-started/theming",
+      "permanent": true
+    },
+    {
+      "source": "/pro/guide/content",
+      "destination": "/pro/getting-started/content",
+      "permanent": true
+    },
+    {
+      "source": "/pro/guide/templates",
+      "destination": "/pro/templates",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/header/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/main/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/footer/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/landing/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/pricing/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/blog/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/page/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/aside/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/navigation/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/auth/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/docs/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/color-mode/:path(.*)",
+      "destination": "/pro/components/:path",
+      "permanent": true
+    },
+    {
+      "source": "/pro/components/prose/:path(.*)",
+      "destination": "/pro/prose/:path",
+      "permanent": true
+    }
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18c3db60..76879a5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8433,6 +8433,7 @@ packages:
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    requiresBuild: true
 
   /mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}