diff --git a/nuxtjs.org/components/AButton.vue b/nuxtjs.org/components/AButton.vue
index 22512ca7d..9ca36d0b7 100644
--- a/nuxtjs.org/components/AButton.vue
+++ b/nuxtjs.org/components/AButton.vue
@@ -24,7 +24,7 @@
   </Component>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, ref } from '@vue/composition-api'
 
 export default defineComponent({
   props: {
@@ -58,27 +58,27 @@ export default defineComponent({
     }
   },
   setup() {
-    let focusedByMouse = false
-    let focus = false
-    let focusVisible = false
+    const focusedByMouse = ref(false)
+    const focus = ref(false)
+    const focusVisible = ref(false)
 
     function mousedownHandler() {
-      focusedByMouse = true
+      focusedByMouse.value = true
     }
 
     function handleFocus(state) {
       if (state) {
         if (focusedByMouse) {
-          focus = true
-          focusVisible = false
+          focus.value = true
+          focusVisible.value = false
         } else {
-          focus = true
-          focusVisible = true
+          focus.value = true
+          focusVisible.value = true
         }
       } else {
-        focus = false
-        focusVisible = false
-        focusedByMouse = false
+        focus.value = false
+        focusVisible.value = false
+        focusedByMouse.value = false
       }
     }
 
diff --git a/nuxtjs.org/components/ALabel.vue b/nuxtjs.org/components/ALabel.vue
index c2186a49b..738babbff 100644
--- a/nuxtjs.org/components/ALabel.vue
+++ b/nuxtjs.org/components/ALabel.vue
@@ -3,6 +3,7 @@
     <slot />
   </Component>
 </template>
+
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 export default defineComponent({
diff --git a/nuxtjs.org/components/ASelectNative.vue b/nuxtjs.org/components/ASelectNative.vue
index be601497e..4bbd2b6d9 100644
--- a/nuxtjs.org/components/ASelectNative.vue
+++ b/nuxtjs.org/components/ASelectNative.vue
@@ -13,12 +13,7 @@
       </option>
 
       <template v-for="(option, i) in normalizedOptions">
-        <optgroup
-          v-if="option.options"
-          :key="`${option.value}-${i}`"
-          :label="option.label"
-          :disabled="option.disabled"
-        >
+        <optgroup v-if="option.options" :key="`${option.value}-${i}`" :label="option.label" :disabled="option.disabled">
           <option
             v-for="(optGroupOption, i2) in option.options"
             :key="`${optGroupOption.value}-${i}-${i2}`"
@@ -28,21 +23,15 @@
           </option>
         </optgroup>
 
-        <option
-          v-else
-          :key="`${option.value}-${i}`"
-          :value="option.value"
-          :disabled="option.disabled"
-        >
+        <option v-else :key="`${option.value}-${i}`" :value="option.value" :disabled="option.disabled">
           {{ option.text }}
         </option>
       </template>
     </select>
-    <div
-      class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center"
-    >
+
+    <div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
       <svg
-        class="h-4 w-4 dark:text-white light:text-gray-500"
+        class="h-4 w-4 dark:text-secondary light:text-gray-300"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
@@ -117,9 +106,7 @@ export default defineComponent({
       return {
         label: optgroup.label,
         disabled: optgroup.disabled,
-        options: optgroup.options
-          .map((option) => this.normalizeOption(option))
-          .filter(Boolean)
+        options: optgroup.options.map(option => this.normalizeOption(option)).filter(Boolean)
       }
     }
 
@@ -166,11 +153,7 @@ export default defineComponent({
     normalizedOptions() {
       if (Array.isArray(this.options)) {
         return this.options
-          .map((option) =>
-            option.options
-              ? this.normalizeOptionGroup(option)
-              : this.normalizeOption(option)
-          )
+          .map(option => (option.options ? this.normalizeOptionGroup(option) : this.normalizeOption(option)))
           .filter(Boolean)
       }
 
diff --git a/nuxtjs.org/components/AnimFromCliCodeblock.vue b/nuxtjs.org/components/AnimFromCliCodeblock.vue
index cc74ea638..0597ad5e6 100644
--- a/nuxtjs.org/components/AnimFromCliCodeblock.vue
+++ b/nuxtjs.org/components/AnimFromCliCodeblock.vue
@@ -60,15 +60,11 @@
           </p>
           <p class="flex">
             <span class="fromcli__seconddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__cd"
-              >cd <span class="text-primary-green">My Project</span></span
-            >
+            ><span class="fromcli__yarn__cd">cd <span class="text-primary-green">My Project</span></span>
           </p>
           <p class="flex">
             <span class="fromcli__thirddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__run"
-              >yarn run <span class="text-primary-green">dev</span></span
-            >
+            ><span class="fromcli__yarn__run">yarn run <span class="text-primary-green">dev</span></span>
           </p>
         </div>
         <div class="fromcli__code__ide">
@@ -94,28 +90,22 @@
             </p>
             <p>
               <!-- Logo component -->
-              <span>&lt;</span><span class="text-red-400">Logo</span
-              ><span>/&gt;</span>
+              <span>&lt;</span><span class="text-red-400">Logo</span><span>/&gt;</span>
             </p>
             <p>
               <!-- Nuxt Card component -->
-              <span>&lt;</span><span class="text-red-400">NuxtCard</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">NuxtCard</span><span>&#47;&gt;</span>
             </p>
             <p>
               <!-- Nuxt Card component -->
-              <span>&lt;</span><span class="text-red-400">NuxtCard</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">NuxtCard</span><span>&#47;&gt;</span>
             </p>
             <p>
               <!-- AlertBanner component -->
-              <span>&lt;</span><span class="text-red-400">AlertBanner</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">AlertBanner</span><span>&#47;&gt;</span>
             </p>
             <p>
-              <span>&lt;</span>&#47;<span class="text-red-400">{{
-                'template'
-              }}</span
+              <span>&lt;</span>&#47;<span class="text-red-400">{{ 'template' }}</span
               ><span>&gt;</span>
             </p>
           </div>
@@ -124,22 +114,14 @@
     </div>
     <div class="fromcli__display">
       <div class="fromcli__display_loading">
-        <img
-          loading="lazy"
-          class="fromcli__display__logo"
-          src="~/static/img/home/learn/master/logo.svg"
-        />
+        <img loading="lazy" class="fromcli__display__logo" src="~/static/img/home/learn/master/logo.svg" />
         <div class="fromcli__display__progressbar">
           <div class="fromcli__display__progressbar__background"></div>
           <div class="fromcli__display__progressbar__progress"></div>
         </div>
       </div>
       <div class="fromcli__display__content">
-        <img
-          loading="lazy"
-          class="fromcli__display__content__logo"
-          src="~/static/img/home/learn/master/logo.svg"
-        />
+        <img loading="lazy" class="fromcli__display__content__logo" src="~/static/img/home/learn/master/logo.svg" />
         <img
           loading="lazy"
           class="fromcli__display__content__content1"
@@ -179,8 +161,7 @@
 
 .fromcli__display_loading {
   @apply overflow-hidden opacity-0;
-  animation: appear 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 3.5s,
-    disappear 200ms forwards 10.4s;
+  animation: appear 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 3.5s, disappear 200ms forwards 10.4s;
 }
 
 .fromcli__display__content {
@@ -192,20 +173,17 @@
   & img:first-child {
     @apply self-start mb-4;
     height: 36px;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        10.9s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 10.9s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 10.9s;
   }
   & img:nth-child(2) {
     @apply mb-4 w-full;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        11.1s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.1s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.1s;
   }
   & img:last-child {
     @apply w-full;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        11.3s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.3s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.3s;
   }
 }
@@ -240,16 +218,13 @@ span[class*='fromcli__yarn'] {
   border-right: 0.15em solid transparent;
   letter-spacing: 0.75px;
   &.fromcli__yarn__createnuxtapp {
-    animation: typingVeryLong 1.5s steps(12, end) forwards,
-      blink-caret 0.75s step-end 4 backwards;
+    animation: typingVeryLong 1.5s steps(12, end) forwards, blink-caret 0.75s step-end 4 backwards;
   }
   &.fromcli__yarn__cd {
-    animation: typingSmall 1s steps(12, end) forwards 7.6s,
-      blink-caret 0.75s step-end 2 backwards 7.6s;
+    animation: typingSmall 1s steps(12, end) forwards 7.6s, blink-caret 0.75s step-end 2 backwards 7.6s;
   }
   &.fromcli__yarn__run {
-    animation: typingRunDev 1s steps(12, end) forwards 8.6s,
-      blink-caret 0.75s step-end 3 backwards 8.6s;
+    animation: typingRunDev 1s steps(12, end) forwards 8.6s, blink-caret 0.75s step-end 3 backwards 8.6s;
   }
 }
 
@@ -280,14 +255,12 @@ span[class*='fromcli__yarn'] {
 
 .fromcli__question2__answer1 {
   @apply opacity-0 overflow-hidden;
-  animation: appear 150ms ease forwards 3.5s,
-    heightDisappear 150ms ease forwards 4.2s;
+  animation: appear 150ms ease forwards 3.5s, heightDisappear 150ms ease forwards 4.2s;
 }
 
 .fromcli__question2__answer2 {
   @apply opacity-0 overflow-hidden;
-  animation: appear 150ms ease forwards 3.65s,
-    heightDisappear 150ms ease forwards 4.2s;
+  animation: appear 150ms ease forwards 3.65s, heightDisappear 150ms ease forwards 4.2s;
 }
 
 .fromcli__question3,
diff --git a/nuxtjs.org/components/AppFooter.vue b/nuxtjs.org/components/AppFooter.vue
index fec370c0a..0d7729ef2 100644
--- a/nuxtjs.org/components/AppFooter.vue
+++ b/nuxtjs.org/components/AppFooter.vue
@@ -1,8 +1,5 @@
 <template>
-  <footer
-    class="light:bg-gray-50 dark:bg-secondary-darker"
-    aria-labelledby="footerHeading"
-  >
+  <footer class="light:bg-gray-50 dark:bg-secondary-black" aria-labelledby="footerHeading">
     <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
       <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
         <div class="grid grid-cols-2 gap-8 xl:col-span-4">
@@ -16,10 +13,24 @@
         <MFooterLanguage class="mt-12 xl:mt-0" />
       </div>
       <MFooterNewsLetter
-        class="border-t light:border-gray-200 dark:border-gray-600 pt-8 lg:flex lg:items-center lg:justify-between xl:mt-0"
+        class="
+          border-t
+          light:border-gray-200
+          dark:border-secondary-darker
+          pt-8
+          lg:flex lg:items-center lg:justify-between
+          xl:mt-0
+        "
       />
       <MFooterFoot
-        class="mt-8 border-t border-gray-200 dark:border-gray-600 pt-8 md:flex md:items-center md:justify-between flex-row-reverse"
+        class="
+          mt-8
+          border-t border-gray-200
+          dark:border-secondary-darker
+          pt-8
+          md:flex md:items-center md:justify-between
+          flex-row-reverse
+        "
       />
     </div>
   </footer>
diff --git a/nuxtjs.org/components/CategoryLabel.vue b/nuxtjs.org/components/CategoryLabel.vue
new file mode 100644
index 000000000..5c6a2aa57
--- /dev/null
+++ b/nuxtjs.org/components/CategoryLabel.vue
@@ -0,0 +1,16 @@
+<template>
+  <span class="text-terciary font-bold text-lg">{{ label }}</span>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
index 5f288b1eb..debd71732 100644
--- a/nuxtjs.org/components/HeaderNavigation.vue
+++ b/nuxtjs.org/components/HeaderNavigation.vue
@@ -10,10 +10,8 @@
       >
         <NuxtLink
           :to="`/${link.slug}/${link.children[0].slug || ''}`"
-          class="pb-2"
           :class="{
-            'text-primary-green': currentSlug === link.slug,
-            'mt-4': $route.path !== '/'
+            'text-primary-green': currentSlug === link.slug
           }"
         >
           {{ link.title }}
diff --git a/nuxtjs.org/components/HeroDescription.vue b/nuxtjs.org/components/HeroDescription.vue
new file mode 100644
index 000000000..75e9288b8
--- /dev/null
+++ b/nuxtjs.org/components/HeroDescription.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="font-normal text-body-base xs:text-body-lg md:text-body-xl 2xl:text-body-2xl">
+    <slot />
+  </p>
+</template>
diff --git a/nuxtjs.org/components/HeroParallax.vue b/nuxtjs.org/components/HeroParallax.vue
new file mode 100644
index 000000000..e9cb81e10
--- /dev/null
+++ b/nuxtjs.org/components/HeroParallax.vue
@@ -0,0 +1,83 @@
+<template>
+  <div ref="containerImg" class="absolute top-0 left-0 -z-0 w-full h-full select-none pointer-events-none">
+    <img
+      ref="gem1"
+      data-speed="2"
+      loading="lazy"
+      :src="`/img/home/hero/gem-1.svg`"
+      class="hidden lg:block absolute left-0 top-0 ml-0 md:ml-12 ml-20 mt-0 md:mt-4 mt-8"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+    <img
+      ref="gem2"
+      data-speed="-5"
+      loading="lazy"
+      :src="`/img/home/hero/gem-2.svg`"
+      class="absolute left-1/3 sm:left-auto mt-4 sm:ml-0 sm:right-0 top-0 sm:mr-20 lg:mr-60 lg:mt-20"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+    <img
+      ref="gem3"
+      data-speed="1"
+      loading="lazy"
+      :src="`/img/home/hero/gem-3.svg`"
+      class="hidden lg:block absolute right-0 top-1/4"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+    <img
+      ref="gem4"
+      data-speed="-3"
+      loading="lazy"
+      :src="`/img/home/hero/gem-4.svg`"
+      class="absolute right-0 bottom-0 mb-20 sm:mb-0 sm:bottom-1/4 mr-8 sm:mr-16 md:mr-28 lg:mr-40"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+    <img
+      ref="gem5"
+      data-speed="-5"
+      loading="lazy"
+      :src="`/img/home/hero/gem-5.svg`"
+      class="absolute left-0 bottom-0 sm:bottom-1/4 mb-20 sm:mb-0 ml-0 md:ml-12 lg:ml-40"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+    <img
+      ref="gem6"
+      data-speed="-2"
+      loading="lazy"
+      :src="`/img/home/hero/gem-2.svg`"
+      class="hidden sm:block absolute left-0 top-0 mt-20 lg:top-1/4 lg:mt-8 rotate-45"
+      alt="An image of a green gem from nuxt galaxy"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onBeforeUnmount } from '@vue/composition-api'
+
+export default defineComponent({
+  setup() {
+    const containerImg = ref(null)
+
+    function parallax(e) {
+      const images = Array.from(containerImg.value.children)
+
+      for (const el of images) {
+        const image = el
+        const speed = parseInt(image.getAttribute('data-speed'))
+        const x = (window.innerWidth - e.pageX * speed) / 100
+        const y = (window.innerHeight - e.pageY * speed) / 100
+        image.style.transform = `translateX(${x}px) translateY(${y}px)`
+      }
+    }
+
+    window.addEventListener('mousemove', parallax)
+
+    onBeforeUnmount(() => window.removeEventListener('mousemove', parallax))
+
+    return {
+      containerImg,
+      parallax
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HeroMain.vue b/nuxtjs.org/components/HeroTemplate.vue
similarity index 91%
rename from nuxtjs.org/components/HeroMain.vue
rename to nuxtjs.org/components/HeroTemplate.vue
index 85c726eaf..49d411b8a 100644
--- a/nuxtjs.org/components/HeroMain.vue
+++ b/nuxtjs.org/components/HeroTemplate.vue
@@ -4,7 +4,7 @@
       <slot name="illustration" />
       <div class="flex flex-wrap justify-center py-0 section" :class="{ 'lg:justify-between': !contentCenter }">
         <section
-          class="flex flex-col justify-start w-full px-4 pt-36 pb-52 md:pt-44 lg:pb-56 lg:pt-52 xl:pb-60 xl:pt-28 text-center sm:px-0 sm:w-4/5 md:w-2/3"
+          class="flex flex-col justify-start w-full px-4 pt-36 pb-52 md:pt-44 lg:pb-56 lg:pt-52 text-center"
           :class="{ 'lg:text-left xl:w-1/2': !contentCenter }"
         >
           <slot name="title" />
diff --git a/nuxtjs.org/components/HeroTitle.vue b/nuxtjs.org/components/HeroTitle.vue
new file mode 100644
index 000000000..42b0eb025
--- /dev/null
+++ b/nuxtjs.org/components/HeroTitle.vue
@@ -0,0 +1,20 @@
+<template>
+  <Component
+    :is="tag"
+    class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'h1'
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HomeCampfire.vue b/nuxtjs.org/components/HomeCampfire.vue
index c51b44f80..dec3229e2 100644
--- a/nuxtjs.org/components/HomeCampfire.vue
+++ b/nuxtjs.org/components/HomeCampfire.vue
@@ -3,44 +3,23 @@
     <template #section-content>
       <SectionContent class="col-span-12 items-center">
         <template #category>
-          <ALabel tag="span" class="text-primary-green font-bold text-lg"
-            >Campfire</ALabel
-          >
+          <CategoryLabel label="Campfire" />
         </template>
+
         <template #title>
-          <SectionTitle class="text-center" size="sm"
-            >Sharing is
-            <span class="font-serif text-terciary italic"
-              >Caring</span
-            ></SectionTitle
+          <SectionTitle class="text-center"
+            >Sharing is <span class="text-primary-green italic">Caring</span></SectionTitle
           >
         </template>
+
         <template #content>
-          <ul
-            class="grid grid-cols-1 sm:grid-cols-2 gap-20 sm:gap-12 md:gap-16 lg:gap-24 xl:gap-32 2xl:gap-40 py-8"
-          >
-            <li
-              v-for="(article, index) in articles"
-              :key="article.title"
-              class="flex flex-col self-start space-y-4"
-            >
-              <img
-                :src="`/img/home/campfire/article-${index + 1}.svg`"
-                class="h-2/3"
-              />
-              <ALabel tag="span" class="text-primary-green font-bold">{{
-                article.category
-              }}</ALabel>
-              <ALabel tag="h4" class="text-lg font-bold">{{
-                article.title
-              }}</ALabel>
-              <ALabel tag="p">{{ article.description }}</ALabel>
-              <MMarketingLink
-                color="primary-green"
-                name="Read article"
-                icon="IconChevronRight"
-                :to="'#'"
-              />
+          <ul class="grid grid-cols-1 sm:grid-cols-2 gap-16 sm:gap-8 lg:gap-16 py-8">
+            <li v-for="(article, index) in articles" :key="article.title" class="flex flex-col self-start">
+              <img :src="`/img/home/campfire/article-${index + 1}.svg`" class="mb-4 h-2/3" />
+              <span class="text-cloud-light text-body-base lg:text-body-lg font-bold mb-2">{{ article.category }}</span>
+              <h3 class="text-body-xl lg:text-body-2xl font-bold mb-2">{{ article.title }}</h3>
+              <p class="mb-4 text-body-base lg:text-body-lg">{{ article.description }}</p>
+              <MMarketingLink color="primary-green" name="Read article" icon="IconChevronRight" :to="'#'" />
             </li>
           </ul>
         </template>
@@ -57,14 +36,12 @@ export default defineComponent({
       {
         category: 'Tips',
         title: 'Creating a Nuxt Module',
-        description:
-          'Lorem ipsum dolor sit amet dolor sit amet dolsor sit amet, consectetur adipiscing elit, se...'
+        description: 'Lorem ipsum dolor sit amet dolor sit amet dolsor sit amet, consectetur adipiscing elit, se...'
       },
       {
         category: 'Tips',
         title: 'Improve your developer experience with Nuxt Components',
-        description:
-          'Lorem ipsum dolor sit amet dolor sit amet dolor sit amet, consectetur adipiscing elit, se...'
+        description: 'Lorem ipsum dolor sit amet dolor sit amet dolor sit amet, consectetur adipiscing elit, se...'
       }
     ]
 
diff --git a/nuxtjs.org/components/HomeCommunity.vue b/nuxtjs.org/components/HomeCommunity.vue
index 928d22f44..6c8c27c2d 100644
--- a/nuxtjs.org/components/HomeCommunity.vue
+++ b/nuxtjs.org/components/HomeCommunity.vue
@@ -1,35 +1,41 @@
 <template>
-  <HomeSection class="dark:bg-secondary-dark">
+  <HomeSection class="">
     <template #header-illustration>
       <img
         loading="lazy"
         :src="`/img/home/community/dark/landscape-community-t.svg`"
-        class="w-full h-20 object-fill light:hidden"
+        class="w-full h-20 object-fill light:hidden pointer-events-none"
         alt="A landscape image"
       />
 
       <img
         loading="lazy"
         :src="`/img/home/community/light/landscape-community-t.svg`"
-        class="w-full h-20 object-fill dark:hidden"
+        class="w-full h-20 object-fill dark:hidden pointer-events-none"
         alt="A landscape image"
       />
     </template>
+
     <template #section-content>
       <SectionContent class="col-span-12 items-center pt-20 pb-60">
         <template #category>
-          <ALabel tag="span" class="text-primary-green font-bold text-lg">Community</ALabel>
+          <CategoryLabel label="Community" />
         </template>
+
         <template #title>
-          <SectionTitle class="text-center font-serif" size="sm">Testimonials</SectionTitle>
+          <SectionTitle class="text-center font-serif"
+            >Developers <span class="text-primary-green italic">Love </span>it</SectionTitle
+          >
         </template>
+
         <template #paragraph>
-          <SectionDescription class="pb-16 text-center" size="md"
-            >Learn from experts about what they think of Nuxt.</SectionDescription
+          <SectionDescription class="text-center"
+            >Be part of the Nuxt.js community and help us Nuxtify the world.</SectionDescription
           >
         </template>
+
         <template #content>
-          <ul class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-4 lg:gap-8 pb-8 sm:mx-20 md:mx-0">
+          <ul class="grid grid-cols-1 md:grid-cols-3 gap-18 md:gap-8 lg:gap-12">
             <li
               v-for="testimonial in testimonials"
               :key="testimonial.author"
@@ -37,64 +43,37 @@
                 relative
                 flex flex-col
                 items-center
-                justify-between
-                space-y-4
-                border-3 border-gray-200
+                border-2 border-gray-200
+                dark:border-secondary-light
                 rounded-lg
-                p-4
+                p-6
               "
             >
-              <ALabel tag="p" class="text-left" v-html="testimonial.testimonial"></ALabel>
-              <div class="flex w-full justify-between items-center">
-                <a :href="testimonial.authorUrl" target="_blank" rel="noopener">
-                  <img
-                    :src="`/img/home/community/${testimonial.authorIcon}.png`"
-                    width="48"
-                    height="48"
-                    class="h-12 w-12"
-                  />
-                </a>
-                <a
-                  :href="testimonial.authorUrl"
-                  target="_blank"
-                  rel="noopener"
-                  class="flex flex-1 pl-4 text-left flex-col"
-                >
-                  <ALabel tag="span" class="font-bold text-base">{{ testimonial.author }}</ALabel>
-                  <ALabel tag="span" class="text-sm">{{ testimonial.job }}</ALabel>
-                </a>
-                <a :href="testimonial.jobUrl" target="_blank" rel="noopener sponsored" class="hidden xl:block">
-                  <img
-                    :src="`/img/home/community/${testimonial.jobIcon}.svg`"
-                    width="28"
-                    height="28"
-                    :class="{ 'light-img': testimonial.jobIconDark }"
-                  />
-                  <img
-                    v-if="testimonial.jobIconDark"
-                    :src="`/img/home/community/${testimonial.jobIconDark}.svg`"
-                    width="28"
-                    height="28"
-                    class="dark-img"
-                  />
-                </a>
-              </div>
+              <img :src="`/img/home/community/${testimonial.icon_author}.png`" class="absolute h-12 bottom-0 -mb-9" />
+              <img
+                :src="`/img/home/community/${testimonial.icon_job}.svg`"
+                class="md:hidden lg:block absolute h-7 bottom-0 right-0 mr-4 mb-4"
+              />
+              <p class="text-center mb-4">{{ testimonial.testimonial }}</p>
+              <span class="font-bold text-center text-base">{{ testimonial.author }}</span>
+              <span class="text-center text-sm dark:text-secondary-lightest">{{ testimonial.job }}</span>
             </li>
           </ul>
         </template>
       </SectionContent>
     </template>
+
     <template #footer-illustration>
       <img
         loading="lazy"
         :src="`/img/home/community/dark/landscape-community-b.svg`"
-        class="absolute w-full h-40 object-fill -mt-32 light:hidden"
+        class="absolute w-full h-40 object-fill -mt-32 light:hidden pointer-events-none"
         alt="A landscape image"
       />
       <img
         loading="lazy"
         :src="`/img/home/community/${$colorMode.value}/landscape-community-b.svg`"
-        class="absolute w-full h-40 object-fill -mt-32 dark:hidden"
+        class="absolute w-full h-40 object-fill -mt-32 dark:hidden pointer-events-none"
         alt="A landscape image"
       />
     </template>
diff --git a/nuxtjs.org/components/HomeDiscover.vue b/nuxtjs.org/components/HomeDiscover.vue
index 9cb7ebda7..b426137a3 100644
--- a/nuxtjs.org/components/HomeDiscover.vue
+++ b/nuxtjs.org/components/HomeDiscover.vue
@@ -3,13 +3,13 @@
     <img
       loading="lazy"
       :src="`/img/home/discover/modules/dark/landscape-discover-modules-t.svg`"
-      class="absolute w-full h-40 object-fill left-0 -mt-20 light:hidden"
+      class="absolute w-full h-40 object-fill left-0 -mt-24 light:hidden"
       alt="A landscape image"
     />
     <img
       loading="lazy"
       :src="`/img/home/discover/modules/light/landscape-discover-modules-t.svg`"
-      class="absolute w-full h-40 object-fill left-0 -mt-20 dark:hidden"
+      class="absolute w-full h-40 object-fill left-0 -mt-24 dark:hidden"
       alt="A landscape image"
     />
 
@@ -17,36 +17,31 @@
       <template #section-content>
         <SectionContent class="col-span-6 justify-center">
           <template #category>
-            <ALabel tag="span" class="text-terciary font-bold text-lg"
-              >Discover</ALabel
-            >
+            <CategoryLabel label="Discover" />
           </template>
+
           <template #title>
-            <SectionTitle class="font-serif" size="sm">
+            <SectionTitle>
               Easier
-              <span class="text-primary-green italic">life, </span>from<span
-                class="text-primary-green italic"
-              >
-                code</span
+              <span class="text-primary-green italic">Life</span>, from<span class="text-primary-green italic">
+                Code</span
               >
-              to<span class="text-primary-green italic"> cloud</span>
+              to<span class="text-primary-green italic"> Cloud</span>
             </SectionTitle>
           </template>
+
           <template #paragraph>
             <SectionDescription class="pb-8" size="md">
-              Nuxt is an Open Source web framework based on official Vue.js
-              libraries, Node.js and using powerful development tools such as
-              Vite, Webpack, Babel and PostCSS. Nuxt's purpose is to make web
-              application development intuitive and performant with a great
-              developer experience in mind.
+              Nuxt is an Open Source web framework based on official Vue.js libraries, Node.js and using powerful
+              development tools such as Vite, Webpack, Babel and PostCSS. Nuxt's purpose is to make web application
+              development intuitive and performant with a great developer experience in mind.
             </SectionDescription>
           </template>
         </SectionContent>
       </template>
+
       <template #right-illustration>
-        <div
-          class="col-span-6 w-full flex justify-center items-center md:justify-end"
-        >
+        <div class="col-span-6 w-full flex justify-center items-center md:justify-end">
           <img
             class="sm:w-3/5 md:w-3/4 lg:w-4/6 xl:w-3/5"
             loading="lazy"
@@ -56,6 +51,7 @@
         </div>
       </template>
     </HomeSection>
+
     <img
       loading="lazy"
       :src="`/img/home/discover/modules/dark/landscape-discover-modules-b.svg`"
diff --git a/nuxtjs.org/components/HomeDiscoverDx.vue b/nuxtjs.org/components/HomeDiscoverDx.vue
index 4c403844b..40d4e03f3 100644
--- a/nuxtjs.org/components/HomeDiscoverDx.vue
+++ b/nuxtjs.org/components/HomeDiscoverDx.vue
@@ -1,35 +1,30 @@
 <template>
   <div>
-    <HomeSection class="pt-40 pb-20 dark:bg-secondary-dark">
+    <HomeSection class="pt-40 pb-20">
       <template #section-content>
         <SectionContent class="col-span-12 items-center">
           <template #category>
-            <ALabel tag="span" class="text-terciary font-bold text-lg"
-              >Discover</ALabel
-            >
+            <CategoryLabel label="Discover" />
           </template>
+
           <template #title>
-            <SectionTitle class="font-serif pb-16 text-center" size="sm">
-              Intuitive <span class="text-primary-green italic">D</span>eveloper
-              E<span class="text-primary-green italic">x</span>perience
+            <SectionTitle class="pb-16 text-center">
+              Intuitive <span class="text-primary-green italic">D</span>eveloper E<span
+                class="text-primary-green italic"
+                >x</span
+              >perience
             </SectionTitle>
           </template>
+
           <template #content>
-            <ul class="grid grid-cols-2 md:grid-cols-4 gap-8 sm:gap-12">
-              <li v-for="exp in experiences" :key="exp.title">
-                <div class="flex flex-col items-center space-y-4">
-                  <img
-                    :src="`/img/home/discover/dx/${exp.icon}.svg`"
-                    :alt="`A ${exp.title} image`"
-                  />
-                  <ALabel tag="h5" class="text-center font-bold">{{
-                    exp.title
-                  }}</ALabel>
-                  <ALabel tag="p" class="text-center text-sm">{{
-                    exp.description
-                  }}</ALabel>
-                </div>
-              </li>
+            <ul class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-12">
+              <SectionContentItem
+                v-for="exp in experiences"
+                :key="exp.title"
+                :image="`/img/home/discover/dx/${exp.icon}.svg`"
+                :title="exp.title"
+                :description="exp.description"
+              />
             </ul>
           </template>
         </SectionContent>
@@ -46,50 +41,42 @@ export default defineComponent({
     const experiences = [
       {
         title: 'Zero Configuration',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'zero-config'
       },
       {
         title: 'File-system Routing',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'file-system-routing'
       },
       {
         title: 'Components Auto-import',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'auto-import'
       },
       {
         title: 'Plugins Auto-injection',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'auto-inject'
       },
       {
         title: 'Hybrid: SSG or SSR',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'hybrid'
       },
       {
         title: 'Modular Architecture',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'modular'
       },
       {
         title: 'TypeScript Support',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'typescript'
       },
       {
         title: 'SEO Friendly',
-        description:
-          'Automatic compilation and bundling. Optimised for production from the start.',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
         icon: 'seo'
       }
     ]
diff --git a/nuxtjs.org/components/HomeDiscoverPartners.vue b/nuxtjs.org/components/HomeDiscoverPartners.vue
index 6cec3e34a..a4bd28f9c 100644
--- a/nuxtjs.org/components/HomeDiscoverPartners.vue
+++ b/nuxtjs.org/components/HomeDiscoverPartners.vue
@@ -1,28 +1,29 @@
 <template>
-  <HomeSection class="pt-20 dark:bg-secondary-dark">
+  <HomeSection class="pt-20">
     <template #section-content>
       <SectionContent class="col-span-12 items-center">
         <template #category>
-          <ALabel tag="span" class="text-terciary font-bold text-lg"
-            >Discover</ALabel
-          >
+          <CategoryLabel label="Discover" />
         </template>
+
         <template #title>
-          <SectionTitle class="font-serif text-center" size="sm"
-            >Art in the making</SectionTitle
+          <SectionTitle class="text-center"
+            >Art in the <span class="text-primary-green italic">Making</span></SectionTitle
           >
         </template>
+
         <template #paragraph>
-          <SectionDescription class="pb-16 text-center" size="md"
-            >Be part of the Nuxt.js community and help us Nuxtify the
-            world.</SectionDescription
+          <SectionDescription class="text-center"
+            >Be part of the Nuxt.js community and help us Nuxtify the world.</SectionDescription
           >
         </template>
+
         <template #banner>
           <MPartnersBanner class="pb-0" :partners-logo="partners" />
         </template>
       </SectionContent>
     </template>
+
     <template #footer-illustration>
       <img
         loading="lazy"
diff --git a/nuxtjs.org/components/HomeExplore.vue b/nuxtjs.org/components/HomeExplore.vue
index 551b46f8a..a908dfc97 100644
--- a/nuxtjs.org/components/HomeExplore.vue
+++ b/nuxtjs.org/components/HomeExplore.vue
@@ -1,61 +1,57 @@
 <template>
-  <HomeSection class="dark:bg-secondary-dark">
+  <HomeSection class="">
     <template #header-illustration>
       <img
         loading="lazy"
         :src="`/img/home/explore/dark/landscape-explore.svg`"
-        class="w-full h-40 object-fill left-0 pb-32 light:hidden"
+        class="w-full h-40 object-fill left-0 light:hidden"
         alt="A landscape image"
       />
       <img
         loading="lazy"
         :src="`/img/home/explore/light/landscape-explore.svg`"
-        class="w-full h-40 object-fill left-0 pb-32 dark:hidden"
+        class="w-full h-40 object-fill left-0 dark:hidden"
         alt="A landscape image"
       />
     </template>
+
     <template #section-content>
-      <SectionContent class="col-span-12 items-center">
+      <SectionContent class="col-span-12 items-center mt-12">
         <template #category>
-          <ALabel tag="span" class="text-primary-green font-bold text-lg"
-            >Explore</ALabel
-          >
+          <CategoryLabel label="Explore" />
         </template>
+
         <template #title>
-          <SectionTitle class="text-center" size="sm"
-            >Need to go forward ? So much to
-            <span class="font-serif text-terciary italic">explore</span
-            >.</SectionTitle
+          <SectionTitle class="text-center"
+            >Need to go <span class="text-primary-green italic">Forward</span>? So much to
+            <span class="text-primary-green italic">Explore</span>.</SectionTitle
           >
         </template>
+
         <template #content>
-          <ul class="grid grid-cols-2 md:grid-cols-4 gap-12 py-8">
-            <li
+          <ul class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-16 xs:gap-8 md:gap-6 py-8">
+            <SectionContentItem
               v-for="(explore, index) in explores"
               :key="explore.title"
-              class="flex flex-col items-center space-y-4"
+              :title="explore.title"
+              :description="explore.description"
             >
-              <div
-                class="relative group transition-opacity duration-500 relative"
-              >
-                <img
-                  :src="`/img/home/explore/gem-${index + 1}-hover.svg`"
-                  class="absolute bottom-0 opacity-0 hover:opacity-100 z-20 transition-opacity duration-500 h-32"
-                />
-                <img
-                  :src="`/img/home/explore/gem-${index + 1}.svg`"
-                  class="hover:opacity-0 z-10 transition-opacity duration-500 h-32"
-                />
-              </div>
-              <ALabel tag="h5" size="md" class="font-bold text-center">{{
-                explore.title
-              }}</ALabel>
-              <ALabel tag="p" size="sm" class="text-center">{{
-                explore.description
-              }}</ALabel>
-            </li>
+              <template #image>
+                <div class="relative group transition-opacity duration-500 relative mb-4">
+                  <img
+                    :src="`/img/home/explore/gem-${index + 1}-hover.svg`"
+                    class="absolute bottom-0 opacity-0 hover:opacity-100 z-20 transition-opacity duration-500 h-32"
+                  />
+                  <img
+                    :src="`/img/home/explore/gem-${index + 1}.svg`"
+                    class="hover:opacity-0 z-10 transition-opacity duration-500 h-32"
+                  />
+                </div>
+              </template>
+            </SectionContentItem>
           </ul>
         </template>
+
         <template #button>
           <SectionButton
             to="#"
@@ -68,6 +64,7 @@
         </template>
       </SectionContent>
     </template>
+
     <template #footer-illustration>
       <img
         loading="lazy"
@@ -92,7 +89,7 @@ export default defineComponent({
   setup() {
     const explores = [
       {
-        title: 'Exemples',
+        title: 'Examples',
         description: 'NuxtJS has been a discovery for our development teams.'
       },
       {
diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
index bd6990b53..10c437f03 100644
--- a/nuxtjs.org/components/HomeHero.vue
+++ b/nuxtjs.org/components/HomeHero.vue
@@ -1,84 +1,26 @@
 <template>
-  <div class="dark:bg-secondary-dark" @mousemove="parallax">
-    <HeroMain
-      content-center
-      height="60vh"
-      min-height="560px"
-      class="mx-auto max-w-8xl"
-    >
+  <div class="overflow-hidden">
+    <HeroTemplate content-center class="mx-auto max-w-8xl">
       <template #illustration>
-        <div ref="containerImg">
-          <img
-            ref="gem1"
-            data-speed="2"
-            loading="lazy"
-            :src="`/img/home/hero/gem-1.svg`"
-            class="hidden lg:block absolute left-0 top-0 ml-0 md:ml-12 ml-20 mt-0 md:mt-4 mt-8"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-          <img
-            ref="gem2"
-            data-speed="-5"
-            loading="lazy"
-            :src="`/img/home/hero/gem-2.svg`"
-            class="absolute left-1/3 sm:left-auto mt-4 sm:ml-0 sm:right-0 top-0 sm:mr-20 lg:mr-60 lg:mt-20"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-          <img
-            ref="gem3"
-            data-speed="1"
-            loading="lazy"
-            :src="`/img/home/hero/gem-3.svg`"
-            class="hidden lg:block absolute right-0 top-1/4"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-          <img
-            ref="gem4"
-            data-speed="-3"
-            loading="lazy"
-            :src="`/img/home/hero/gem-4.svg`"
-            class="absolute right-0 bottom-0 mb-20 sm:mb-0 sm:bottom-1/4 mr-8 sm:mr-16 md:mr-28 lg:mr-40"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-          <img
-            ref="gem5"
-            data-speed="-5"
-            loading="lazy"
-            :src="`/img/home/hero/gem-5.svg`"
-            class="absolute left-0 bottom-0 sm:bottom-1/4 mb-20 sm:mb-0 ml-0 md:ml-12 lg:ml-40"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-          <img
-            ref="gem6"
-            data-speed="-2"
-            loading="lazy"
-            :src="`/img/home/hero/gem-2.svg`"
-            class="hidden sm:block absolute left-0 top-0 mt-20 lg:top-1/4 lg:mt-8 rotate-45"
-            alt="An image of a green gem from nuxt galaxy"
-          />
-        </div>
+        <HeroParallax />
       </template>
+
       <template #title>
-        <SectionTitle class="mb-4 text-cloud-surface font-serif" size="md"
-          >The Intuitive Vue <br />Framework</SectionTitle
-        >
+        <HeroTitle class="mb-4">The Intuitive Vue <br />Framework</HeroTitle>
       </template>
 
       <template #description>
-        <SectionDescription
-          class="mb-8 text-cloud-surface px-8 sm:px-0"
-          size="md"
-        >
-          Build your next Vue.js application with confidence using NuxtJS.<br
-            class="hidden sm:block"
-          />An open source framework making web development simple and powerful.
-        </SectionDescription>
+        <HeroDescription class="mb-8 px-8 sm:px-0">
+          Build your next Vue.js application with confidence using NuxtJS.<br class="hidden sm:block" />An open source
+          framework making web development simple and powerful.
+        </HeroDescription>
       </template>
+
       <template #buttons>
         <SectionButton
           to="#"
           aria-label="Get started"
-          size="sm"
+          size="md"
           class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
           icon-left="IconPlay"
         >
@@ -87,40 +29,13 @@
         <SectionButton
           to="#"
           aria-label="GitHub Stars"
-          size="sm"
+          size="md"
           class="bg-white border rounded-md shadow-sm border-gray-700 text-gray-800 focus:bg-gray-200 hover:bg-gray-200"
           icon-left="IconGitHub"
         >
           GitHub Stars
         </SectionButton>
       </template>
-    </HeroMain>
+    </HeroTemplate>
   </div>
 </template>
-
-<script>
-import { defineComponent, ref } from '@vue/composition-api'
-
-export default defineComponent({
-  setup() {
-    const containerImg = ref(null)
-
-    function parallax(e) {
-      const images = Array.from(containerImg.value.children)
-
-      for (const el of images) {
-        const image = el
-        const speed = parseInt(image.getAttribute('data-speed'))
-        const x = (window.innerWidth - e.pageX * speed) / 100
-        const y = (window.innerHeight - e.pageY * speed) / 100
-        image.style.transform = `translateX(${x}px) translateY(${y}px)`
-      }
-    }
-
-    return {
-      containerImg,
-      parallax
-    }
-  }
-})
-</script>
diff --git a/nuxtjs.org/components/HomeLearnGuides.vue b/nuxtjs.org/components/HomeLearnGuides.vue
index 8abd6d9ac..89cf91f4f 100644
--- a/nuxtjs.org/components/HomeLearnGuides.vue
+++ b/nuxtjs.org/components/HomeLearnGuides.vue
@@ -3,44 +3,33 @@
     <template #section-content>
       <SectionContent class="col-span-12 items-center">
         <template #category>
-          <ALabel tag="span" class="text-primary-green font-bold text-lg"
-            >Learn</ALabel
-          >
+          <CategoryLabel label="Learn" />
         </template>
+
         <template #title>
-          <SectionTitle class="text-center" size="sm"
-            >Follow our
-            <span class="font-serif text-terciary italic"
-              >Guides</span
-            ></SectionTitle
+          <SectionTitle class="text-center"
+            >Follow our <span class="text-primary-green italic">Guides</span></SectionTitle
           >
         </template>
+
         <template #paragraph>
-          <SectionDescription class="pb-16 text-center" size="md"
-            >From an Idea to a Masterpiece, guides show the path to follow to
-            become a Nuxter.</SectionDescription
+          <SectionDescription class="text-center"
+            >From an Idea to a Masterpiece, guides show the path to follow to become a Nuxter.</SectionDescription
           >
         </template>
+
         <template #content>
           <ul class="grid grid-cols-1 sm:grid-cols-3 gap-20 pb-8">
-            <li
+            <SectionContentItem
               v-for="guide in guides"
               :key="guide.title"
-              class="flex flex-col items-center space-y-4"
-            >
-              <img
-                :src="`/img/home/learn/guides/${guide.icon}.svg`"
-                class="h-32"
-              />
-              <ALabel tag="h5" size="md" class="font-bold text-center">{{
-                guide.title
-              }}</ALabel>
-              <ALabel tag="p" size="sm" class="text-center">{{
-                guide.description
-              }}</ALabel>
-            </li>
+              :image="`/img/home/learn/guides/${guide.icon}.svg`"
+              :title="guide.title"
+              :description="guide.description"
+            />
           </ul>
         </template>
+
         <template #button>
           <SectionButton
             to="#"
diff --git a/nuxtjs.org/components/HomeLearnMaster.vue b/nuxtjs.org/components/HomeLearnMaster.vue
index 82eddb3c6..1dcad7c0d 100644
--- a/nuxtjs.org/components/HomeLearnMaster.vue
+++ b/nuxtjs.org/components/HomeLearnMaster.vue
@@ -3,22 +3,26 @@
     <template #section-content>
       <SectionContent class="col-span-12 items-center">
         <template #category>
-          <ALabel tag="span" class="text-primary-green font-bold text-lg">Learn</ALabel>
+          <CategoryLabel label="Learn" />
         </template>
+
         <template #title>
-          <SectionTitle class="text-center" size="sm"
-            ><span class="font-serif text-terciary italic">Easy </span>to learn,
-            <span class="font-serif text-terciary italic">easy</span> to master</SectionTitle
+          <SectionTitle class="text-center"
+            ><span class="text-primary-green italic">Easy </span>to learn.
+            <span class="text-primary-green italic">Easy</span> to master</SectionTitle
           >
         </template>
+
         <template #paragraph>
-          <SectionDescription class="pb-16 text-center" size="md"
+          <SectionDescription class="text-center"
             >Be part of the Nuxt.js community and help us Nuxtify the world.</SectionDescription
           >
         </template>
+
         <template #content>
-          <OCodeBlockAnimation class="w-full text-gray-50 pb-4" />
+          <OCodeBlockAnimation class="w-full text-gray-50" />
         </template>
+
         <template #button>
           <div class="w-full self-start">
             <SectionButton
diff --git a/nuxtjs.org/components/MFooterFoot.vue b/nuxtjs.org/components/MFooterFoot.vue
index 64ca2efa7..90f721007 100644
--- a/nuxtjs.org/components/MFooterFoot.vue
+++ b/nuxtjs.org/components/MFooterFoot.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <MFooterSocialLinks />
-    <ALabel class="mt-8 text-base light:text-gray-400 dark:text-gray-100 md:mt-0 md:order-1"
-      >&copy; 2020 Workflow, Inc. All rights reserved.</ALabel
-    >
+    <p class="mt-8 text-base light:text-gray-400 dark:text-secondary-lightest md:mt-0 md:order-1">
+      &copy; 2020 Workflow, Inc. All rights reserved.
+    </p>
   </div>
 </template>
diff --git a/nuxtjs.org/components/MFooterLanguage.vue b/nuxtjs.org/components/MFooterLanguage.vue
index 89168ab7d..d9ac90e59 100644
--- a/nuxtjs.org/components/MFooterLanguage.vue
+++ b/nuxtjs.org/components/MFooterLanguage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ALabel tag="h3" class="text-lg font-semibold light:text-gray-400 dark:text-gray-100">Language</ALabel>
+    <h3 class="text-lg font-semibold light:text-gray-400 dark:text-secondary-light">Language</h3>
     <form class="mt-4 sm:max-w-xs">
       <fieldset class="w-full">
         <MFooterLocaleSelector />
diff --git a/nuxtjs.org/components/MFooterLink.vue b/nuxtjs.org/components/MFooterLink.vue
index 2ea69c17b..2be79bc73 100644
--- a/nuxtjs.org/components/MFooterLink.vue
+++ b/nuxtjs.org/components/MFooterLink.vue
@@ -1,20 +1,17 @@
 <template>
   <div>
     <div v-for="(link, index) in links" :key="link.title">
-      <ALabel
-        tag="h3"
-        class="font-semibold light:text-gray-400 dark:text-gray-100 text-lg"
+      <h3
+        class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg"
         :class="{ 'mt-16 md:mt-0': index !== 0 }"
-        >{{ link.title }}</ALabel
       >
+        {{ link.title }}
+      </h3>
       <ul class="mt-4 space-y-4">
         <li v-for="subLink in link.subLinks" :key="subLink.title">
-          <ALink
-            :href="subLink.href"
-            :aria-label="subLink.title"
-            class="light:text-gray-500 dark:text-white"
-            >{{ subLink.title }}</ALink
-          >
+          <ALink :href="subLink.href" :aria-label="subLink.title" class="light:text-gray-500 dark:text-white">{{
+            subLink.title
+          }}</ALink>
         </li>
       </ul>
     </div>
diff --git a/nuxtjs.org/components/MFooterLocaleSelector.vue b/nuxtjs.org/components/MFooterLocaleSelector.vue
index 9574cf6f9..11df3e648 100644
--- a/nuxtjs.org/components/MFooterLocaleSelector.vue
+++ b/nuxtjs.org/components/MFooterLocaleSelector.vue
@@ -2,7 +2,7 @@
   <ASelectNative
     v-model="locale"
     :options="locales"
-    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-wite rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-gray-100 focus:outline-none light:focus:ring-black dark:focus:ring-white light:focvus:border-white dark:focus:border-white sm:text-sm"
+    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-white dark:focus:border-secondary-light sm:text-sm"
   />
 </template>
 
diff --git a/nuxtjs.org/components/MFooterNewsLetter.vue b/nuxtjs.org/components/MFooterNewsLetter.vue
index 03c44677f..357bc042d 100644
--- a/nuxtjs.org/components/MFooterNewsLetter.vue
+++ b/nuxtjs.org/components/MFooterNewsLetter.vue
@@ -1,18 +1,12 @@
 <template>
   <div>
     <div>
-      <ALabel
-        tag="h3"
-        class="font-semibold light:text-gray-400 dark:text-gray-100 text-lg"
-        >Subscribe to our newsletter</ALabel
-      >
-      <ALabel tag="p" class="mt-2 text-base text-gray-500 dark:text-white">
+      <h3 class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg">Subscribe to our newsletter</h3>
+      <p class="mt-2 text-base text-gray-500 dark:text-secondary-surface">
         The latest news, articles, and resources, sent to your inbox weekly.
-      </ALabel>
+      </p>
     </div>
-    <MInputGroupButton v-model="email" placeholder="Enter your email"
-      >Subscribe</MInputGroupButton
-    >
+    <MInputGroupButton v-model="email" placeholder="Enter your email">Subscribe</MInputGroupButton>
   </div>
 </template>
 
diff --git a/nuxtjs.org/components/MFooterSocialLinks.vue b/nuxtjs.org/components/MFooterSocialLinks.vue
index 81eab8af5..51699f1f6 100644
--- a/nuxtjs.org/components/MFooterSocialLinks.vue
+++ b/nuxtjs.org/components/MFooterSocialLinks.vue
@@ -4,7 +4,7 @@
       <ALink :href="social.href">
         <Component
           :is="social.icon"
-          class="h-6 w-6 text-gray-400 dark:text-gray-100 hover:text-primary-green"
+          class="h-6 w-6 text-gray-400 dark:text-secondary-surface hover:text-primary-green"
         />
       </ALink>
     </li>
diff --git a/nuxtjs.org/components/MInputGroupButton.vue b/nuxtjs.org/components/MInputGroupButton.vue
index 0cb836f65..e8362ffc4 100644
--- a/nuxtjs.org/components/MInputGroupButton.vue
+++ b/nuxtjs.org/components/MInputGroupButton.vue
@@ -3,14 +3,52 @@
     <ATextInput
       :value="value"
       :placeholder="placeholder"
-      class="white:placeholder-gray-400 dark:placeholder-gray-300 appearance-none min-w-0 sm:max-w-xs block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-wite rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-white focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-white dark:focus:border-white sm:text-sm"
+      class="
+        white:placeholder-gray-400
+        dark:placeholder-secondary
+        appearance-none
+        min-w-0
+        sm:max-w-xs
+        block
+        w-full
+        bg-none
+        dark:bg-transparent
+        light:bg-white
+        border
+        light:border-gray-200
+        dark:border-secondary-dark
+        rounded-md
+        py-2
+        pl-3
+        pr-10
+        text-base
+        light:text-gray-500
+        dark:text-white
+        focus:outline-none
+        light:focus:ring-black
+        dark:focus:ring-white
+        light:focus:border-white
+        dark:focus:border-secondary-light
+        sm:text-sm
+      "
       @input="$emit('input', $event)"
     />
     <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
       <AButton
         type="submit"
         aria-label="Submit"
-        class="bg-primary-green w-full rounded-md text-sm px-4 h-10 font-medium text-gray-800 hover:bg-green-300 focus:bg-green-300"
+        class="
+          bg-primary-green
+          w-full
+          rounded-md
+          text-sm
+          px-4
+          h-10
+          font-medium
+          text-gray-800
+          hover:bg-green-300
+          focus:bg-green-300
+        "
         @click="submit"
       >
         <slot />
diff --git a/nuxtjs.org/components/MMarketingLink.vue b/nuxtjs.org/components/MMarketingLink.vue
index d6946c4af..0252fdaa0 100644
--- a/nuxtjs.org/components/MMarketingLink.vue
+++ b/nuxtjs.org/components/MMarketingLink.vue
@@ -1,14 +1,14 @@
 <template>
   <NuxtLink
     :key="name"
-    class="relative inline-flex items-center text-lg font-bold group flex-nowrap max-w-max"
+    class="relative inline-flex items-center text-body-base lg:text-base-xl font-bold group flex-nowrap max-w-max"
     :class="'text-' + color"
     :to="`${to}`"
   >
     {{ name }}
     <Component :is="icon" class="ml-2 h-5 w-5" />
 
-    <span class="absolute -bottom-1 h-0.5 w-8 group-hover:w-full transition-all" :class="'bg-' + color" />
+    <span class="absolute -bottom-2 h-0.5 w-8 group-hover:w-full transition-all" :class="'bg-' + color" />
   </NuxtLink>
 </template>
 
diff --git a/nuxtjs.org/components/SectionContent.vue b/nuxtjs.org/components/SectionContent.vue
index 5359e91f5..01007a7c2 100644
--- a/nuxtjs.org/components/SectionContent.vue
+++ b/nuxtjs.org/components/SectionContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col w-full space-y-4"
+    class="flex flex-col w-full"
     :class="{
       'items-start': position === 'left',
       'items-center text-center': position === 'center',
@@ -8,10 +8,18 @@
     }"
   >
     <slot name="icon" />
-    <slot name="category" />
-    <slot name="title" />
-    <slot name="paragraph" />
-    <slot name="content" />
+    <div v-if="$scopedSlots.category" class="mb-2">
+      <slot name="category" />
+    </div>
+    <div v-if="$scopedSlots.title" class="mb-2">
+      <slot name="title" />
+    </div>
+    <div v-if="$scopedSlots.paragraph" class="mb-8">
+      <slot name="paragraph" />
+    </div>
+    <div v-if="$scopedSlots.content" class="w-full my-8">
+      <slot name="content" />
+    </div>
     <slot name="link" />
     <slot name="banner" />
     <slot name="button" />
diff --git a/nuxtjs.org/components/SectionContentItem.vue b/nuxtjs.org/components/SectionContentItem.vue
new file mode 100644
index 000000000..814b17430
--- /dev/null
+++ b/nuxtjs.org/components/SectionContentItem.vue
@@ -0,0 +1,32 @@
+<template>
+  <li>
+    <div class="flex flex-col items-center">
+      <slot name="image">
+        <img class="mb-4" :src="image" :alt="`A ${title} image`" />
+      </slot>
+      <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">{{ title }}</h3>
+      <p class="text-center text-sm lg:text-base dark:text-secondary-lightest">{{ description }}</p>
+    </div>
+  </li>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    image: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/SectionDescription.vue b/nuxtjs.org/components/SectionDescription.vue
index 7d7e75140..faf6158bc 100644
--- a/nuxtjs.org/components/SectionDescription.vue
+++ b/nuxtjs.org/components/SectionDescription.vue
@@ -1,32 +1,5 @@
 <template>
-  <ALabel
-    tag="p"
-    class="font-normal leading-relaxed"
-    :class="{
-      'text-sm 2xl:text-md': size === 'sm',
-      'text-md lg:text-lg 2xl:text-lg': size === 'md',
-      'text-lg 2xl:text-xl': size === 'lg'
-    }"
-  >
+  <p class="font-normal text-body-base md:text-body-lg 2xl:text-body-xl">
     <slot />
-  </ALabel>
+  </p>
 </template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-export default defineComponent({
-  props: {
-    tag: {
-      type: String,
-      default: 'p'
-    },
-    size: {
-      type: String,
-      default: 'lg',
-      validator(value) {
-        return ['sm', 'md', 'lg'].includes(value)
-      }
-    }
-  }
-})
-</script>
diff --git a/nuxtjs.org/components/SectionTitle.vue b/nuxtjs.org/components/SectionTitle.vue
index 82ee955b4..37efe6ec8 100644
--- a/nuxtjs.org/components/SectionTitle.vue
+++ b/nuxtjs.org/components/SectionTitle.vue
@@ -1,15 +1,7 @@
 <template>
-  <Label
-    :tag="tag"
-    class="font-bold"
-    :class="{
-      'sm:text-display-5 text-display-6 2xl:text-display-4': size === 'sm',
-      'text-display-5 sm:text-display-4 md:text-display-3 2xl:text-display-2': size === 'md',
-      'sm:text-display-2 text-display-3 2xl:text-display-1': size === 'lg'
-    }"
-  >
+  <Component :is="tag" class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4">
     <slot />
-  </Label>
+  </Component>
 </template>
 
 <script>
@@ -18,7 +10,7 @@ export default defineComponent({
   props: {
     tag: {
       type: String,
-      default: 'h1'
+      default: 'h2'
     },
     size: {
       type: String,
diff --git a/nuxtjs.org/content/index.md b/nuxtjs.org/content/index.md
index 16d3c8a34..b2c6cedb5 100644
--- a/nuxtjs.org/content/index.md
+++ b/nuxtjs.org/content/index.md
@@ -12,6 +12,7 @@ layout:
 
 ::home-discover-dx
 ::
+
 ::home-discover-partners
 ::
 
diff --git a/nuxtjs.org/docus.config.ts b/nuxtjs.org/docus.config.ts
index 5b063237c..94b9a56a0 100644
--- a/nuxtjs.org/docus.config.ts
+++ b/nuxtjs.org/docus.config.ts
@@ -13,7 +13,14 @@ export default {
       title: false
     },
     colors: {
-      primary: '#00DC82'
+      primary: '#00DC82',
+      test: 'red'
+    },
+    shortcuts: {
+      'body-bg': 'bg-white dark:bg-secondary-black',
+      'docus-body-text-color': 'text-secondary-darker dark:text-white', // text-secondary dark:text-white
+      'bg-header': 'bg-white bg-opacity-80 dark:bg-secondary-black dark:bg-opacity-80',
+      'border-header': 'border-none'
     }
   }
 }
diff --git a/nuxtjs.org/nuxt.config.ts b/nuxtjs.org/nuxt.config.ts
index 92833a8b2..1b0f1ace3 100644
--- a/nuxtjs.org/nuxt.config.ts
+++ b/nuxtjs.org/nuxt.config.ts
@@ -6,15 +6,21 @@ export default withDocus({
   rootDir: __dirname,
   head: {
     link: [
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap' },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap'
+      },
       { rel: 'preconnect', href: 'https://fonts.gstatic.com' }
-    ]
+    ],
+    bodyAttrs: {
+      class: ['min-w-xs']
+    }
   },
+  buildModules: ['@nuxt/typescript-build'],
   windicss: {
     root: resolve(__dirname),
     config: resolve(__dirname, 'windi.config.js')
   },
-  buildModules: ['@nuxt/typescript-build'],
   vite: {
     optimizeDeps: {
       include: ['cookie', 'js-cookie', 'property-information', 'clipboard'],
diff --git a/nuxtjs.org/static/img/home/campfire/dark/landscape-campfire.svg b/nuxtjs.org/static/img/home/campfire/dark/landscape-campfire.svg
index 86778cbaf..0969f98bd 100644
--- a/nuxtjs.org/static/img/home/campfire/dark/landscape-campfire.svg
+++ b/nuxtjs.org/static/img/home/campfire/dark/landscape-campfire.svg
@@ -1 +1 @@
-<svg width="1440" height="85" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.1871 23.5974H0V85h1440V9.75318l-41.99 4.87662-48.09-4.87662L1331.83 6.15l-58.27-2.96832L1202.68 6.15l-74.57 3.60318h-63.13l-42.72-1.11208L978.544 6.15l-16.735-2.96832H859.013l-13.706-.70252h-40.749L763.413 0h-69.748l-55.837 2.47916L596.239 0H519.027l-81.568 4.65469-36.193 4.5327-44.961 4.82841h-88.124L228.89 16.476l-16.957 3.933h-42.396l-13.367 1.8072-21.276 1.5656-16.899 1.1169-17.651-1.1169-18.5909-1.5656H69.4578L50.915 24.7695l-8.7563 1.0212-26.9716-2.1933z" fill="#00181F"/></svg>
+<svg width="1440" height="85" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.1871 23.5974H0V85h1440V9.75318l-41.99 4.87662-48.09-4.87662L1331.83 6.15l-58.27-2.96832L1202.68 6.15l-74.57 3.60318h-63.13l-42.72-1.11208L978.544 6.15l-16.735-2.96832H859.013l-13.706-.70252h-40.749L763.413 0h-69.748l-55.837 2.47916L596.239 0H519.027l-81.568 4.65469-36.193 4.5327-44.961 4.82841h-88.124L228.89 16.476l-16.957 3.933h-42.396l-13.367 1.8072-21.276 1.5656-16.899 1.1169-17.651-1.1169-18.5909-1.5656H69.4578L50.915 24.7695l-8.7563 1.0212-26.9716-2.1933z" fill="#012A35"/></svg>
diff --git a/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg b/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg
index 411d62338..9f27b6a71 100644
--- a/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg
+++ b/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg
@@ -1 +1 @@
-<svg width="1440" height="189" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M188.857 41.0815l3.902-4.3005 11.262-8.4924c4.229-3.1892 9.809-4.0633 14.738-2.6695 9.451 2.6727 24.021 6.3608 24.999 5.7859.597-.3508 2.23-2.1269 4.174-4.2404 2.64-2.8704 5.852-6.363 7.816-7.7523l11.671-6.4099c3.384-1.6255 7.299-.7689 9.905 2.1671l.646.7277 4.428 5.2731 7.803 1.7023c.783.1708 1.506.5918 2.085 1.2132l4.214 4.5272c1.842 1.9781 4.697 2.0856 6.651.2505l.59-.555c1.33-1.2491 3.201-1.4426 4.708-.487l5.652 3.5835 9.113 5.376h1.52c3.997 0 7.785 2.0262 10.325 5.5234l.945 1.3h7.354c3.957 0 7.822-1.3558 11.087-3.8895l2.782-2.1585c.65-.5051 1.421-.7754 2.21-.7754h8.062c1.011 0 1.967.5177 2.601 1.4084l6.511 9.1369 6.714-3.7219 12.31 3.7219h13.11l18.238 5.0189 19.971-11.4288h14.708l14.548 2.688 10.383-11.6512c.313-.3512.735-.5482 1.176-.5482h10.024l10.871-8.2709 13.749-3.7218 11.67-9.098 18.066-8.68434c5.403-2.79526 11.73-1.950695 16.412 2.19076l.424.37486 30.166 18.93852 11.67 8.2709 18.699 3.2521 11.148-3.2521.986-1.2025c1.259-1.5367 3.381-1.621 4.733-.1879l3.961 4.1996 7.499.4429 2.269-2.1309c4.614-4.3329 10.419-6.7041 16.412-6.7041l7.034-2.688 14.868-9.7182h11.991l18.705 5.9964 6.394 6.4098 16.147 2.6881 4.317 8.2708h26.858l9.77-4.6192 13.436-15.4626c1.78-2.0487 4.352-2.9424 6.84-2.3766l10.234 5.0897 12.303 6.4098 7.049-9.0979 4.149-3.9603c1.415-1.3514 3.531-1.1421 4.718.4669l4.562 6.1815 3.837 9.0979 9.794 5.1072c1.528.7968 2.979 1.7717 4.328 2.9089l5.702 4.8037 5.874-1.8369c5.446-1.7027 11.282-.3313 15.681 3.6846l1.147 1.0471h5.26c1.446 0 2.888.1181 4.316.3525l12.2-6.7441.441-.3494c4.866-3.8597 11.223-4.3299 16.49-1.2198l17.642 9.7382 11.237 9.7739 13.559 4.5277 10.477 8.9008 10.012.5913c.44.0259.85.2476 1.15.6168l4.02 5.0117 17.89 5.7309 2.57-.3211 14.69.8675 15.2 9.8553 6.81 2.1827 15.85-3.3832 13.1.7732 12.46-2.9907 6.53 4.1128 6.93-8.7405c.67-.8521 1.65-1.3127 2.66-1.2531l8.05.4756c.79.0465 1.54.3619 2.17.9047l2.68 2.3196c3.14 2.7228 6.94 4.3048 10.89 4.5382l7.35.4338 1-1.2427c2.7-3.3426 6.57-5.1426 10.56-4.9069l1.52.0897 9.35-4.8313 5.81-3.2452c1.55-.8654 3.41-.5618 4.68.764l.56.5891c1.87 1.9479 4.73 2.0089 6.66.1421l4.41-4.2725c.61-.5865 1.35-.9642 2.14-1.0886l7.87-1.2397 4.66-5.0049.68-.6886c2.74-2.7783 6.69-3.4028 9.99-1.58l11.36 7.0896c1.9 1.5033 4.95 5.1807 7.45 8.2029 1.85 2.2253 3.4 4.0953 3.98 4.4807.95.6319 15.67-2.1919 25.23-4.3035 4.99-1.1012 10.52.1008 14.59 3.5351l10.86 9.1451 3.7 4.5249c2.43 2.9716 5.42 5.2856 8.75 6.7696l7.72 5.383 4.12 2.879h8.53l6.76-2.879h9.06l26.61-27.8186c2.13-2.2227 5.74-2.0166 7.6.4337l11.56 15.2323 11.12 3.6636 8.27 8.489 9.18 9.725 5.92 7.285 6.42 4.684 6.42 4.163V184H568.257l-208.05-11.077-167.448.534L0 172.906v-66.423l7.27319 3.345 10.72841-3.332 7.947-6.087h4.8422l6.7585-3.9438 3.8399-3.7147 6.811-3.1641 8.7418 7.8152 5.0226-4.6511 4.7463-1.9234 6.3731-6.8332 4.5201-7.2429 8.3443-6.303 8.7418-8.1039 16.6888-15.0178 20.357 15.0178 32.152-5.1785 15.923-9.8393c3.39-1.2858 6.482-3.4202 9.046-6.2448z" fill="#003543"/><path d="M1251.14 123.755l-3.9-1.964-11.26-3.877c-4.23-1.456-9.81-1.855-14.74-1.218-9.45 1.22-24.02 2.904-25 2.641-.59-.16-2.23-.971-4.17-1.936-2.64-1.31-5.85-2.905-7.82-3.539l-11.67-2.926c-3.38-.742-7.3-.351-9.9.989l-.65.332-4.43 2.408-7.8.777c-.78.078-1.51.27-2.09.554l-4.21 2.066c-1.84.903-4.7.953-6.65.115l-.59-.254c-1.33-.57-3.2-.658-4.71-.222l-5.65 1.636-9.11 2.454h-1.52c-4 0-7.79.925-10.33 2.522l-.94.593h-7.36c-3.95 0-7.82-.619-11.09-1.775l-2.78-.986c-.65-.23-1.42-.354-2.21-.354h-8.06c-1.01 0-1.97.237-2.6.643l-6.51 4.171-6.72-1.699-12.31 1.699h-13.1l-18.24 2.292-19.974-5.218h-14.708l-14.548 1.227-10.383-5.319c-.313-.16-.735-.25-1.176-.25h-10.024l-10.871-3.776-13.749-1.699-11.67-4.153-18.066-3.965c-5.403-1.276-11.73-.89-16.412 1l-.424.171-30.166 8.646-11.67 3.776-18.699 1.485-11.148-1.485-.986-.549c-1.259-.701-3.381-.74-4.733-.086l-3.961 1.918-7.499.202-2.269-.973c-4.614-1.978-10.419-3.061-16.412-3.061l-7.034-1.227-14.868-4.436h-11.991l-18.705 2.737-6.394 2.926-16.147 1.228-4.317 3.775h-26.858l-9.77-2.108-13.436-7.059c-1.78-.936-4.352-1.344-6.84-1.085l-10.234 2.323-12.303 2.926-7.049-4.153-4.149-1.808c-1.415-.617-3.531-.521-4.718.213l-4.562 2.822-3.837 4.154-9.794 2.331c-1.528.364-2.979.809-4.328 1.328l-5.702 2.193-5.874-.839c-5.446-.777-11.282-.151-15.681 1.683l-1.147.478h-5.26c-1.446 0-2.888.053-4.316.161l-12.2-3.079-.441-.16c-4.866-1.762-11.223-1.977-16.49-.557l-17.642 4.446-11.237 4.462-13.559 2.067-10.477 4.063-10.01.27c-.44.012-.853.113-1.149.282l-4.024 2.288-17.886 2.616-2.576-.146-14.688.396-15.199 4.499-6.812.996-15.851-1.544-13.092.353-12.464-1.366-6.535 1.878-6.921-3.99c-.675-.389-1.654-.6-2.662-.572l-8.052.217c-.788.021-1.545.165-2.172.413l-2.678 1.059c-3.145 1.243-6.942 1.965-10.894 2.072l-7.344.198-1.003-.568c-2.697-1.526-6.573-2.347-10.564-2.24l-1.519.041-9.347-2.205-5.809-1.482c-1.549-.395-3.409-.256-4.679.349l-.565.269c-1.866.889-4.723.917-6.653.065l-4.416-1.951c-.607-.268-1.349-.44-2.138-.497l-7.871-.566-4.663-2.285-.679-.314c-2.738-1.268-6.687-1.554-9.992-.721l-11.36 3.236c-1.898.687-4.945 2.365-7.449 3.745-1.844 1.016-3.394 1.87-3.974 2.046-.95.288-15.67-1.001-25.231-1.965-4.987-.503-10.518.046-14.595 1.614l-10.857 4.175-3.699 2.065c-2.43 1.357-5.42 2.414-8.747 3.091l-7.724 2.457-4.117 1.315h-8.531l-6.761-1.315h-9.0609l-28.2377-13.475c-1.5152-.723-3.2921-.638-4.7307.228l-12.7999 7.699-11.1197 1.673-8.2672 3.875-9.1857 4.44-5.921 3.326-6.41859 2.138L0 166.676V189h871.743l208.047-5.057 167.45.244 192.76-.252v-30.323l-7.27 1.527-10.73-1.521-7.95-2.779h-4.84l-6.76-1.801-3.84-1.695-6.81-1.445-8.74 3.568-5.02-2.123-4.75-.878-6.37-3.12-4.52-3.306-8.35-2.878-8.74-3.7-16.69-6.856-20.36 6.856-32.15-2.364-15.92-4.492c-3.39-.586-6.48-1.561-9.05-2.85z" fill="#001D25"/></svg>
\ No newline at end of file
+<svg width="1440" height="189" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M188.857 41.0815l3.902-4.3005 11.262-8.4924c4.229-3.1892 9.809-4.0633 14.738-2.6695 9.451 2.6727 24.021 6.3608 24.999 5.7859.597-.3508 2.23-2.1269 4.174-4.2404 2.64-2.8704 5.852-6.363 7.816-7.7523l11.671-6.4099c3.384-1.6255 7.299-.7689 9.905 2.1671l.646.7277 4.428 5.2731 7.803 1.7023c.783.1708 1.506.5918 2.085 1.2132l4.214 4.5272c1.842 1.9781 4.697 2.0856 6.651.2505l.59-.555c1.33-1.2491 3.201-1.4426 4.708-.487l5.652 3.5835 9.113 5.376h1.52c3.997 0 7.785 2.0262 10.325 5.5234l.945 1.3h7.354c3.957 0 7.822-1.3558 11.087-3.8895l2.782-2.1585c.65-.5051 1.421-.7754 2.21-.7754h8.062c1.011 0 1.967.5177 2.601 1.4084l6.511 9.1369 6.714-3.7219 12.31 3.7219h13.11l18.238 5.0189 19.971-11.4288h14.708l14.548 2.688 10.383-11.6512c.313-.3512.735-.5482 1.176-.5482h10.024l10.871-8.2709 13.749-3.7218 11.67-9.098 18.066-8.68434c5.403-2.79526 11.73-1.950695 16.412 2.19076l.424.37486 30.166 18.93852 11.67 8.2709 18.699 3.2521 11.148-3.2521.986-1.2025c1.259-1.5367 3.381-1.621 4.733-.1879l3.961 4.1996 7.499.4429 2.269-2.1309c4.614-4.3329 10.419-6.7041 16.412-6.7041l7.034-2.688 14.868-9.7182h11.991l18.705 5.9964 6.394 6.4098 16.147 2.6881 4.317 8.2708h26.858l9.77-4.6192 13.436-15.4626c1.78-2.0487 4.352-2.9424 6.84-2.3766l10.234 5.0897 12.303 6.4098 7.049-9.0979 4.149-3.9603c1.415-1.3514 3.531-1.1421 4.718.4669l4.562 6.1815 3.837 9.0979 9.794 5.1072c1.528.7968 2.979 1.7717 4.328 2.9089l5.702 4.8037 5.874-1.8369c5.446-1.7027 11.282-.3313 15.681 3.6846l1.147 1.0471h5.26c1.446 0 2.888.1181 4.316.3525l12.2-6.7441.441-.3494c4.866-3.8597 11.223-4.3299 16.49-1.2198l17.642 9.7382 11.237 9.7739 13.559 4.5277 10.477 8.9008 10.012.5913c.44.0259.85.2476 1.15.6168l4.02 5.0117 17.89 5.7309 2.57-.3211 14.69.8675 15.2 9.8553 6.81 2.1827 15.85-3.3832 13.1.7732 12.46-2.9907 6.53 4.1128 6.93-8.7405c.67-.8521 1.65-1.3127 2.66-1.2531l8.05.4756c.79.0465 1.54.3619 2.17.9047l2.68 2.3196c3.14 2.7228 6.94 4.3048 10.89 4.5382l7.35.4338 1-1.2427c2.7-3.3426 6.57-5.1426 10.56-4.9069l1.52.0897 9.35-4.8313 5.81-3.2452c1.55-.8654 3.41-.5618 4.68.764l.56.5891c1.87 1.9479 4.73 2.0089 6.66.1421l4.41-4.2725c.61-.5865 1.35-.9642 2.14-1.0886l7.87-1.2397 4.66-5.0049.68-.6886c2.74-2.7783 6.69-3.4028 9.99-1.58l11.36 7.0896c1.9 1.5033 4.95 5.1807 7.45 8.2029 1.85 2.2253 3.4 4.0953 3.98 4.4807.95.6319 15.67-2.1919 25.23-4.3035 4.99-1.1012 10.52.1008 14.59 3.5351l10.86 9.1451 3.7 4.5249c2.43 2.9716 5.42 5.2856 8.75 6.7696l7.72 5.383 4.12 2.879h8.53l6.76-2.879h9.06l26.61-27.8186c2.13-2.2227 5.74-2.0166 7.6.4337l11.56 15.2323 11.12 3.6636 8.27 8.489 9.18 9.725 5.92 7.285 6.42 4.684 6.42 4.163V184H568.257l-208.05-11.077-167.448.534L0 172.906v-66.423l7.27319 3.345 10.72841-3.332 7.947-6.087h4.8422l6.7585-3.9438 3.8399-3.7147 6.811-3.1641 8.7418 7.8152 5.0226-4.6511 4.7463-1.9234 6.3731-6.8332 4.5201-7.2429 8.3443-6.303 8.7418-8.1039 16.6888-15.0178 20.357 15.0178 32.152-5.1785 15.923-9.8393c3.39-1.2858 6.482-3.4202 9.046-6.2448z" fill="#012A35"/><path d="M1251.14 123.755l-3.9-1.964-11.26-3.877c-4.23-1.456-9.81-1.855-14.74-1.218-9.45 1.22-24.02 2.904-25 2.641-.59-.16-2.23-.971-4.17-1.936-2.64-1.31-5.85-2.905-7.82-3.539l-11.67-2.926c-3.38-.742-7.3-.351-9.9.989l-.65.332-4.43 2.408-7.8.777c-.78.078-1.51.27-2.09.554l-4.21 2.066c-1.84.903-4.7.953-6.65.115l-.59-.254c-1.33-.57-3.2-.658-4.71-.222l-5.65 1.636-9.11 2.454h-1.52c-4 0-7.79.925-10.33 2.522l-.94.593h-7.36c-3.95 0-7.82-.619-11.09-1.775l-2.78-.986c-.65-.23-1.42-.354-2.21-.354h-8.06c-1.01 0-1.97.237-2.6.643l-6.51 4.171-6.72-1.699-12.31 1.699h-13.1l-18.24 2.292-19.974-5.218h-14.708l-14.548 1.227-10.383-5.319c-.313-.16-.735-.25-1.176-.25h-10.024l-10.871-3.776-13.749-1.699-11.67-4.153-18.066-3.965c-5.403-1.276-11.73-.89-16.412 1l-.424.171-30.166 8.646-11.67 3.776-18.699 1.485-11.148-1.485-.986-.549c-1.259-.701-3.381-.74-4.733-.086l-3.961 1.918-7.499.202-2.269-.973c-4.614-1.978-10.419-3.061-16.412-3.061l-7.034-1.227-14.868-4.436h-11.991l-18.705 2.737-6.394 2.926-16.147 1.228-4.317 3.775h-26.858l-9.77-2.108-13.436-7.059c-1.78-.936-4.352-1.344-6.84-1.085l-10.234 2.323-12.303 2.926-7.049-4.153-4.149-1.808c-1.415-.617-3.531-.521-4.718.213l-4.562 2.822-3.837 4.154-9.794 2.331c-1.528.364-2.979.809-4.328 1.328l-5.702 2.193-5.874-.839c-5.446-.777-11.282-.151-15.681 1.683l-1.147.478h-5.26c-1.446 0-2.888.053-4.316.161l-12.2-3.079-.441-.16c-4.866-1.762-11.223-1.977-16.49-.557l-17.642 4.446-11.237 4.462-13.559 2.067-10.477 4.063-10.01.27c-.44.012-.853.113-1.149.282l-4.024 2.288-17.886 2.616-2.576-.146-14.688.396-15.199 4.499-6.812.996-15.851-1.544-13.092.353-12.464-1.366-6.535 1.878-6.921-3.99c-.675-.389-1.654-.6-2.662-.572l-8.052.217c-.788.021-1.545.165-2.172.413l-2.678 1.059c-3.145 1.243-6.942 1.965-10.894 2.072l-7.344.198-1.003-.568c-2.697-1.526-6.573-2.347-10.564-2.24l-1.519.041-9.347-2.205-5.809-1.482c-1.549-.395-3.409-.256-4.679.349l-.565.269c-1.866.889-4.723.917-6.653.065l-4.416-1.951c-.607-.268-1.349-.44-2.138-.497l-7.871-.566-4.663-2.285-.679-.314c-2.738-1.268-6.687-1.554-9.992-.721l-11.36 3.236c-1.898.687-4.945 2.365-7.449 3.745-1.844 1.016-3.394 1.87-3.974 2.046-.95.288-15.67-1.001-25.231-1.965-4.987-.503-10.518.046-14.595 1.614l-10.857 4.175-3.699 2.065c-2.43 1.357-5.42 2.414-8.747 3.091l-7.724 2.457-4.117 1.315h-8.531l-6.761-1.315h-9.0609l-28.2377-13.475c-1.5152-.723-3.2921-.638-4.7307.228l-12.7999 7.699-11.1197 1.673-8.2672 3.875-9.1857 4.44-5.921 3.326-6.41859 2.138L0 166.676V189h871.743l208.047-5.057 167.45.244 192.76-.252v-30.323l-7.27 1.527-10.73-1.521-7.95-2.779h-4.84l-6.76-1.801-3.84-1.695-6.81-1.445-8.74 3.568-5.02-2.123-4.75-.878-6.37-3.12-4.52-3.306-8.35-2.878-8.74-3.7-16.69-6.856-20.36 6.856-32.15-2.364-15.92-4.492c-3.39-.586-6.48-1.561-9.05-2.85z" fill="#001E26"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/community/dark/landscape-community-t.svg b/nuxtjs.org/static/img/home/community/dark/landscape-community-t.svg
index 7a301c4a8..e5df19173 100644
--- a/nuxtjs.org/static/img/home/community/dark/landscape-community-t.svg
+++ b/nuxtjs.org/static/img/home/community/dark/landscape-community-t.svg
@@ -1 +1 @@
-<svg width="1440" height="85" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.1871 61.4026H0V0h1440v75.2468l-41.99-4.8766-48.09 4.8766-18.09 3.6032-58.27 2.9683-70.88-2.9683-74.57-3.6032h-63.13l-42.72 1.1121-43.716 2.4911-16.735 2.9683H859.013l-13.706.7025h-40.749L763.413 85h-69.748l-55.837-2.4792L596.239 85H519.027l-81.568-4.6547-36.193-4.5327-44.961-4.8284h-88.124L228.89 68.524l-16.957-3.933h-42.396l-13.367-1.8072-21.276-1.5656-16.899-1.1169-17.651 1.1169-18.5909 1.5656H69.4578L50.915 60.2305l-8.7563-1.0212-26.9716 2.1933z" fill="#00181F"/></svg>
\ No newline at end of file
+<svg width="1440" height="85" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.1871 61.4026H0V0h1440v75.2468l-41.99-4.8766-48.09 4.8766-18.09 3.6032-58.27 2.9683-70.88-2.9683-74.57-3.6032h-63.13l-42.72 1.1121-43.716 2.4911-16.735 2.9683H859.013l-13.706.7025h-40.749L763.413 85h-69.748l-55.837-2.4792L596.239 85H519.027l-81.568-4.6547-36.193-4.5327-44.961-4.8284h-88.124L228.89 68.524l-16.957-3.933h-42.396l-13.367-1.8072-21.276-1.5656-16.899-1.1169-17.651 1.1169-18.5909 1.5656H69.4578L50.915 60.2305l-8.7563-1.0212-26.9716 2.1933z" fill="#012A35"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-b.svg b/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-b.svg
index fa911fba9..ad0342d42 100644
--- a/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-b.svg
+++ b/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-b.svg
@@ -1 +1,2 @@
-<svg width="1440" height="149" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M477.758 0h60.561l32.533 5.24624c4.838 1.07615 16.116 3.34952 22.523 3.83379 6.406.48427 41.708.20178 58.559 0 10.177 3.09397 32.833 9.80647 42.042 11.90497 9.209 2.0985 36.537-2.2196 49.049-4.6409l28.733 5.4229h34.511l24.345-.782 38.676 4.1507h8.003l59.428-4.1507 29.029 5.8515h131.12l39.51 10.089 63.02 7.3858 59.52-7.3858 38.01 7.3858 47.02-7.3858H1497V149l-423.14-30.556-108.11 6.457H331.611L0 146.15V9.08003H34.0114L77.5259 20.985 124.542 9.08003h72.024l63.021 7.26407h83.027l58.02-7.26407L477.758 0z" fill="#00181F"/></svg>
\ No newline at end of file
+<svg width="1440" height="149" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M477.758 0h60.561l32.533 5.24624c4.838 1.07615 16.116 3.34952 22.523 3.83379 6.406.48427 41.708.20178 58.559 0 10.177 3.09397 32.833 9.80647 42.042 11.90497 9.209 2.0985 36.537-2.2196 49.049-4.6409l28.733 5.4229h34.511l24.345-.782 38.676 4.1507h8.003l59.428-4.1507 29.029 5.8515h131.12l39.51 10.089 63.02 7.3858 59.52-7.3858 38.01 7.3858 47.02-7.3858H1497V149l-423.14-30.556-108.11 6.457H331.611L0 146.15V9.08003H34.0114L77.5259 20.985 124.542 9.08003h72.024l63.021 7.26407h83.027l58.02-7.26407L477.758 0z" fill="#012A35"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-t.svg b/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-t.svg
index 0ae5e3a77..3deeb3654 100644
--- a/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-t.svg
+++ b/nuxtjs.org/static/img/home/discover/modules/dark/landscape-discover-modules-t.svg
@@ -1 +1,4 @@
-<svg width="1440" height="250" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M188.857 37.9557l3.902-3.9732 11.262-7.8463c4.229-2.9465 9.809-3.7542 14.738-2.4664 9.451 2.4693 24.021 5.8769 24.999 5.3457.597-.3241 2.23-1.9651 4.174-3.9178 2.64-2.6519 5.852-5.8788 7.816-7.1625l11.671-5.9222c3.384-1.5018 7.299-.7104 9.905 2.0023l.646.6723 4.428 4.872 7.803 1.5727c.783.1578 1.506.5467 2.085 1.1209l4.214 4.1827c1.842 1.8276 4.697 1.927 6.651.2315l.59-.5128c1.33-1.1541 3.201-1.3329 4.708-.45l5.652 3.3109 9.113 4.967h1.52c3.997 0 7.785 1.872 10.325 5.1031l.945 1.2011h7.354c3.957 0 7.822-1.2527 11.087-3.5936l2.782-1.9943c.65-.4666 1.421-.7163 2.21-.7163h8.062c1.011 0 1.967.4783 2.601 1.3012l6.511 8.4417 6.714-3.4387 12.31 3.4387h13.11l18.238 4.6371 19.971-10.5593h14.708l14.548 2.4835 10.383-10.7647c.313-.3245.735-.5065 1.176-.5065h10.024l10.871-7.6416 13.749-3.4387 11.67-8.40565 18.066-8.02361c5.403-2.58258 11.73-1.802271 16.412 2.02407l.424.34634 30.166 17.49755 11.67 7.6416 18.699 3.0047 11.148-3.0047.986-1.111c1.259-1.4198 3.381-1.4977 4.733-.1737l3.961 3.8802 7.499.4092 2.269-1.9689c4.614-4.0031 10.419-6.1939 16.412-6.1939l7.034-2.4835 14.868-8.9788h11.991l18.705 5.5401 6.394 5.9222 16.147 2.4835 4.317 7.6416h26.858l9.77-4.2677 13.436-14.2862c1.78-1.8928 4.352-2.7185 6.84-2.1958l10.234 4.7024 12.303 5.9222 7.049-8.4057 4.149-3.659c1.415-1.2485 3.531-1.0552 4.718.4314l4.562 5.7111 3.837 8.4057 9.794 4.7187c1.528.7362 2.979 1.6369 4.328 2.6876l5.702 4.4381 5.874-1.6971c5.446-1.5731 11.282-.3061 15.681 3.4043l1.147.9673h5.26c1.446 0 2.888.1091 4.316.3258l12.2-6.231.441-.3228c4.866-3.566 11.223-4.0005 16.49-1.127l17.642 8.9972 11.237 9.0302 13.559 4.1833 10.477 8.2236 10.012.5462c.44.024.85.2288 1.15.57l4.02 4.6303 17.89 5.2948 2.57-.2966 14.69.8015 15.2 9.1054 6.81 2.0166 15.85-3.1257 13.1.7144 12.46-2.7633 6.53 3.8 6.93-8.0755c.67-.7873 1.65-1.2128 2.66-1.1578l8.05.4394c.79.043 1.54.3344 2.17.8359l2.68 2.1431c3.14 2.5157 6.94 3.9773 10.89 4.1929l7.35.4008 1-1.1481c2.7-3.0883 6.57-4.7514 10.56-4.5336l1.52.0829 9.35-4.4637 5.81-2.9983c1.55-.7996 3.41-.5191 4.68.7058l.56.5443c1.87 1.7997 4.73 1.8561 6.66.1313l4.41-3.9474c.61-.5418 1.35-.8908 2.14-1.0058l7.87-1.1454 4.66-4.6241.68-.6362c2.74-2.5669 6.69-3.1439 9.99-1.4597l11.36 6.5501c1.9 1.389 4.95 4.7866 7.45 7.5788 1.85 2.056 3.4 3.7837 3.98 4.1398.95.5838 15.67-2.0251 25.23-3.976 4.99-1.0175 10.52.0931 14.59 3.2661l10.86 8.4493 3.7 4.1805c2.43 2.7459 5.42 4.8837 8.75 6.2548l7.72 4.9731 4.12 2.66h8.53l6.76-2.66h9.06l26.77-25.851c2.1-2.0282 5.48-1.8332 7.33.4228l11.67 14.2003 11.12 3.3848 8.27 7.8431 9.18 8.985 5.92 6.731 6.42 4.327 6.42 3.846V170H568.257l-208.05-10.234-167.448.493L0 159.75V98.3808l7.27319 3.0912 10.72841-3.0786 7.947-5.624h4.8422l6.7585-3.644 3.8399-3.432 6.811-2.9234 8.7418 7.2206 5.0226-4.2972 4.7463-1.7771 6.3731-6.3132 4.5201-6.6918 8.3443-5.8235 8.7418-7.4873 16.6888-13.8751 20.357 13.8751 32.152-4.7845 15.923-9.0906c3.39-1.1879 6.482-3.1599 9.046-5.7697z" fill="#003543"/><path d="M448.758 101h60.561l32.533 5.246c4.838 1.076 16.116 3.35 22.523 3.834 6.406.484 41.708.202 58.559 0 10.177 3.094 32.833 9.806 42.042 11.905 9.209 2.098 36.537-2.22 49.049-4.641l28.733 5.423h34.511l24.345-.782 38.676 4.151h8.003l59.428-4.151 29.029 5.852h131.12l39.51 10.088 63.02 7.386 59.52-7.386 38.01 7.386 47.02-7.386H1468V250l-423.14-30.556-108.11 6.457H302.611L-29 247.15V110.08H5.01136l43.51454 11.905 47.0157-11.905h72.0244l63.021 7.264h83.027l58.02-7.264 77.124-9.08z" fill="#00181F"/></svg>
\ No newline at end of file
+<svg width="1440" height="250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M188.857 37.9557l3.902-3.9732 11.262-7.8463c4.229-2.9465 9.809-3.7542 14.738-2.4664 9.451 2.4693 24.021 5.8769 24.999 5.3457.597-.3241 2.23-1.9651 4.174-3.9178 2.64-2.6519 5.852-5.8788 7.816-7.1625l11.671-5.9222c3.384-1.5018 7.299-.7104 9.905 2.0023l.646.6723 4.428 4.872 7.803 1.5727c.783.1578 1.506.5467 2.085 1.1209l4.214 4.1827c1.842 1.8276 4.697 1.927 6.651.2315l.59-.5128c1.33-1.1541 3.201-1.3329 4.708-.45l5.652 3.3109 9.113 4.967h1.52c3.997 0 7.785 1.872 10.325 5.1031l.945 1.2011h7.354c3.957 0 7.822-1.2527 11.087-3.5936l2.782-1.9943c.65-.4666 1.421-.7163 2.21-.7163h8.062c1.011 0 1.967.4783 2.601 1.3012l6.511 8.4417 6.714-3.4387 12.31 3.4387h13.11l18.238 4.6371 19.971-10.5593h14.708l14.548 2.4835 10.383-10.7647c.313-.3245.735-.5065 1.176-.5065h10.024l10.871-7.6416 13.749-3.4387 11.67-8.40565 18.066-8.02361c5.403-2.58258 11.73-1.802271 16.412 2.02407l.424.34634 30.166 17.49755 11.67 7.6416 18.699 3.0047 11.148-3.0047.986-1.111c1.259-1.4198 3.381-1.4977 4.733-.1737l3.961 3.8802 7.499.4092 2.269-1.9689c4.614-4.0031 10.419-6.1939 16.412-6.1939l7.034-2.4835 14.868-8.9788h11.991l18.705 5.5401 6.394 5.9222 16.147 2.4835 4.317 7.6416h26.858l9.77-4.2677 13.436-14.2862c1.78-1.8928 4.352-2.7185 6.84-2.1958l10.234 4.7024 12.303 5.9222 7.049-8.4057 4.149-3.659c1.415-1.2485 3.531-1.0552 4.718.4314l4.562 5.7111 3.837 8.4057 9.794 4.7187c1.528.7362 2.979 1.6369 4.328 2.6876l5.702 4.4381 5.874-1.6971c5.446-1.5731 11.282-.3061 15.681 3.4043l1.147.9673h5.26c1.446 0 2.888.1091 4.316.3258l12.2-6.231.441-.3228c4.866-3.566 11.223-4.0005 16.49-1.127l17.642 8.9972 11.237 9.0302 13.559 4.1833 10.477 8.2236 10.012.5462c.44.024.85.2288 1.15.57l4.02 4.6303 17.89 5.2948 2.57-.2966 14.69.8015 15.2 9.1054 6.81 2.0166 15.85-3.1257 13.1.7144 12.46-2.7633 6.53 3.8 6.93-8.0755c.67-.7873 1.65-1.2128 2.66-1.1578l8.05.4394c.79.043 1.54.3344 2.17.8359l2.68 2.1431c3.14 2.5157 6.94 3.9773 10.89 4.1929l7.35.4008 1-1.1481c2.7-3.0883 6.57-4.7514 10.56-4.5336l1.52.0829 9.35-4.4637 5.81-2.9983c1.55-.7996 3.41-.5191 4.68.7058l.56.5443c1.87 1.7997 4.73 1.8561 6.66.1313l4.41-3.9474c.61-.5418 1.35-.8908 2.14-1.0058l7.87-1.1454 4.66-4.6241.68-.6362c2.74-2.5669 6.69-3.1439 9.99-1.4597l11.36 6.5501c1.9 1.389 4.95 4.7866 7.45 7.5788 1.85 2.056 3.4 3.7837 3.98 4.1398.95.5838 15.67-2.0251 25.23-3.976 4.99-1.0175 10.52.0931 14.59 3.2661l10.86 8.4493 3.7 4.1805c2.43 2.7459 5.42 4.8837 8.75 6.2548l7.72 4.9731 4.12 2.66h8.53l6.76-2.66h9.06l26.77-25.851c2.1-2.0282 5.48-1.8332 7.33.4228l11.67 14.2003 11.12 3.3848 8.27 7.8431 9.18 8.985 5.92 6.731 6.42 4.327 6.42 3.846V170H568.257l-208.05-10.234-167.448.493L0 159.75V98.3808l7.27319 3.0912 10.72841-3.0786 7.947-5.624h4.8422l6.7585-3.644 3.8399-3.432 6.811-2.9234 8.7418 7.2206 5.0226-4.2972 4.7463-1.7771 6.3731-6.3132 4.5201-6.6918 8.3443-5.8235 8.7418-7.4873 16.6888-13.8751 20.357 13.8751 32.152-4.7845 15.923-9.0906c3.39-1.1879 6.482-3.1599 9.046-5.7697z" fill="#003543"/>
+<path d="M448.758 101h60.561l32.533 5.246c4.838 1.076 16.116 3.35 22.523 3.834 6.406.484 41.708.202 58.559 0 10.177 3.094 32.833 9.806 42.042 11.905 9.209 2.098 36.537-2.22 49.049-4.641l28.733 5.423h34.511l24.345-.782 38.676 4.151h8.003l59.428-4.151 29.029 5.852h131.12l39.51 10.088 63.02 7.386 59.52-7.386 38.01 7.386 47.02-7.386H1468V250l-423.14-30.556-108.11 6.457H302.611L-29 247.15V110.08H5.01136l43.51454 11.905 47.0157-11.905h72.0244l63.021 7.264h83.027l58.02-7.264 77.124-9.08z" fill="#012A35"/>
+</svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/discover/partners/dark/landscape-discover-partners.svg b/nuxtjs.org/static/img/home/discover/partners/dark/landscape-discover-partners.svg
index ed6b1c5ed..3a69d64fd 100644
--- a/nuxtjs.org/static/img/home/discover/partners/dark/landscape-discover-partners.svg
+++ b/nuxtjs.org/static/img/home/discover/partners/dark/landscape-discover-partners.svg
@@ -1 +1,3 @@
-<svg width="1440" height="221" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.315212 163.113C7.9534 157.149 23.8359 145.522 30.3831 144.704c3.0638-.383 8.5359-.48 14.4845-.584 9.9417-.175 21.214-.374 24.7982-1.973 4.5829-2.044 14.4581-3.918 18.8228-4.599 7.0927-3.407 22.5874-10.323 27.8254-10.732 2.311-.181 5.133-1.763 8.61-3.713 6.368-3.572 14.933-8.375 26.58-8.045 11.069.315 22.447 4.686 31.092 8.008 5.417 2.081 9.761 3.75 12.283 3.75 3.177 0 12.329-2.769 21.75-5.619 9.992-3.024 20.288-6.139 24.079-6.139 3.521 0 9.658-3.036 16.179-6.262 7.123-3.523 14.703-7.273 19.83-7.54 3.882-.202 6.74-3.2781 10.041-6.8305 5.052-5.4361 11.139-11.9871 23.513-11.0597 10.881.8156 19.215 2.4988 25.373 3.7425 5.421 1.0948 9.155 1.849 11.454 1.3703 1.545-.3214 3.493-.9464 5.694-1.6521 4.798-1.5383 10.793-3.4607 16.403-3.4607 3.692 0 11.382-3.4332 19.613-7.1079 10.013-4.4701 20.826-9.2975 26.216-8.7365 4.846.5044 11.484-3.2219 18.44-7.127 7.144-4.0101 14.624-8.2087 20.843-8.2087 2.628 0 5.856.2342 9.547.502 13.553.9832 33.354 2.4197 52.65-5.6149 10.79-4.493 26.797-14.4167 42.254-23.9995C578.471 10.8521 597.29-.814781 603.253.0447277 611.764 1.27149 646.398 20.17 662.651 29.4658c4.231-.5017 14.414-.4718 21.296 3.6617 3.766 2.2617 11.023 7.8155 18.272 13.3634 9.312 7.1263 18.611 14.243 20.482 14.3598l.147.0092c3.412.2119 11.339.7042 23.145 6.8491 5.858 3.0488 10.988 6.8484 15.107 9.8994 4.305 3.1884 7.505 5.5592 9.279 5.4009 1.22-.1088 4.338-1.48 8.279-3.2127 7.272-3.1976 17.345-7.6265 23.454-7.6265 9.421 0 20.33-1.2387 31.238-8.0519 1.496-.9342 3.01-1.9037 4.523-2.872 9.518-6.0938 18.965-12.1418 23.244-9.0605 4.958 3.5708 13.883 8.665 17.354 8.665.218 0 .492-.0012.813-.0028 4.784-.0224 20.168-.0945 22.491 3.2703 1.197 1.734 4.823 3.2377 9.09 4.7128 11.569.834 23.374 2.3878 35.493 4.0141.786-.0445 1.529-.0998 2.225-.1666l5.662-6.2386c.239-.2615.635-.442 1.071-.4879.435-.0459.86.0481 1.148.254l4.728 3.4001 8.094-8.9195c.236-.2642.632-.4471 1.07-.4932.437-.0461.863.0501 1.149.2592l9.29 6.6672c19.194-4.5879 37.025-10.9669 54.185-17.1076l.01-.0024c23.3-8.3347 45.37-16.2296 67.94-18.6094 21.23-2.2225 51.22 3.5969 82.39 9.6459 33.76 6.5521 68.43 16.5751 95.34 13.7382 21.47-2.2842 49.68-4.1384 71.33-13.9951 26.63-3.7548 57.91-20.4383 76.12-22.358 2.17-.2285-1.95.3456 0 0 3.95-.7002-6.17-.1998 0 0l11.6 140.2916v61.376H.315122v-5.738c-.120117-1.14.210026-2.279 0-4.271-.2411633-2.287 0-4.126.00009-5.742-.00009-2.148-.00009-4.536.000016-6.708-.000106-3.691-.000106-4.85-.000106-6.152l.00009-3.403s.258912-4.709 0-7.166v-6.876s-.709227-10.376 0-10.93z" fill="#003543"/><path d="M0 181.585h41.6153l19.5541 9.878h24.0667l23.5649-9.878 23.064-5.853 43.621-6.586 38.106 6.586 56.155-3.293 51.643-3.293h30.084l35.097-8.415 35.598-4.756 25.07-12.439 29.08-4.756 22.062-10.61h20.055l26.072-9.878 13.392-5.282c3.409-1.344 7.043-2.035 10.709-2.035h12.74c3.163 0 6.307.497 9.315 1.473l13.633 4.421c2.908.943 5.947 1.423 9.005 1.423h7.895c2.334 0 4.645-.45 6.806-1.326l10.414-4.222c2.882-1.168 5.963-1.769 9.074-1.769h8.072c3.487 0 6.949.584 10.241 1.728l12.44 4.323c2.371.823 4.94.888 7.349.185l17.636-5.147c2.474-.722 5.038-1.089 7.615-1.089h24.769c.934 0 1.849.26 2.642.75l3.934 2.428c.856.529 1.921.595 2.837.178l20.413-9.31c1.441-.657 3.008-.997 4.593-.997h26.174l47.632 2.927 26.573-8.0491 37.582-13.7114c7.621-2.7805 15.736-3.9697 23.838-3.4936l62.423 3.6684 5.37-.1866c5.696-3.2139 12.666-7.3096 19.416-11.2737 11.83-6.9461 22.97-13.4885 25.35-14.1764.42-.1222.95-.2848 1.57-.4781 6.92-2.1452 26.05-8.0744 53.38-4.4912 5.37.7036 10.27 1.3383 14.73 1.8972l13.05-7.145h34.6l16.28 4.0458c2.56-.2978 5.23-2.0303 6.54-2.3324.32-.0741.87-.21 1.6-.3917 5.86-1.4593 23.57-5.867 31.99-4.8159 6.07.7575 12.44.1086 17-.3564 2.56-.2606 4.55-.4635 5.6-.3286.57.0718 1.78.2554 3.39.4996 6.82 1.0314 20.77 3.1433 22.91 2.4797.78-.2405 2.24-1.043 4.2-2.1248 4.74-2.6087 12.42-6.8415 20.64-8.7335 3.64.2825 11.63.6649 14.43-.0648.41-.1045.86-.2305 1.37-.3697 3.93-1.0766 10.72-2.9389 15.67-1.66 5.59 1.4443 16.3 3.2843 20.48 2.428 3.17-.6498 11.71-.2593 16.19.0567l.92-.0206c1.3-.3951 3.07-.8669 5.1-1.303L1444 13v207H0v-38.415z" fill="#00181F"/></svg>
\ No newline at end of file
+<svg width="1440" height="221" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M.315212 163.113C7.9534 157.149 23.8359 145.522 30.3831 144.704c3.0638-.383 8.5359-.48 14.4845-.584 9.9417-.175 21.214-.374 24.7982-1.973 4.5829-2.044 14.4581-3.918 18.8228-4.599 7.0927-3.407 22.5874-10.323 27.8254-10.732 2.311-.181 5.133-1.763 8.61-3.713 6.368-3.572 14.933-8.375 26.58-8.045 11.069.315 22.447 4.686 31.092 8.008 5.417 2.081 9.761 3.75 12.283 3.75 3.177 0 12.329-2.769 21.75-5.619 9.992-3.024 20.288-6.139 24.079-6.139 3.521 0 9.658-3.036 16.179-6.262 7.123-3.523 14.703-7.273 19.83-7.54 3.882-.202 6.74-3.2781 10.041-6.8305 5.052-5.4361 11.139-11.9871 23.513-11.0597 10.881.8156 19.215 2.4988 25.373 3.7425 5.421 1.0948 9.155 1.849 11.454 1.3703 1.545-.3214 3.493-.9464 5.694-1.6521 4.798-1.5383 10.793-3.4607 16.403-3.4607 3.692 0 11.382-3.4332 19.613-7.1079 10.013-4.4701 20.826-9.2975 26.216-8.7365 4.846.5044 11.484-3.2219 18.44-7.127 7.144-4.0101 14.624-8.2087 20.843-8.2087 2.628 0 5.856.2342 9.547.502 13.553.9832 33.354 2.4197 52.65-5.6149 10.79-4.493 26.797-14.4167 42.254-23.9995C578.471 10.8521 597.29-.814781 603.253.0447277 611.764 1.27149 646.398 20.17 662.651 29.4658c4.231-.5017 14.414-.4718 21.296 3.6617 3.766 2.2617 11.023 7.8155 18.272 13.3634 9.312 7.1263 18.611 14.243 20.482 14.3598l.147.0092c3.412.2119 11.339.7042 23.145 6.8491 5.858 3.0488 10.988 6.8484 15.107 9.8994 4.305 3.1884 7.505 5.5592 9.279 5.4009 1.22-.1088 4.338-1.48 8.279-3.2127 7.272-3.1976 17.345-7.6265 23.454-7.6265 9.421 0 20.33-1.2387 31.238-8.0519 1.496-.9342 3.01-1.9037 4.523-2.872 9.518-6.0938 18.965-12.1418 23.244-9.0605 4.958 3.5708 13.883 8.665 17.354 8.665.218 0 .492-.0012.813-.0028 4.784-.0224 20.168-.0945 22.491 3.2703 1.197 1.734 4.823 3.2377 9.09 4.7128 11.569.834 23.374 2.3878 35.493 4.0141.786-.0445 1.529-.0998 2.225-.1666l5.662-6.2386c.239-.2615.635-.442 1.071-.4879.435-.0459.86.0481 1.148.254l4.728 3.4001 8.094-8.9195c.236-.2642.632-.4471 1.07-.4932.437-.0461.863.0501 1.149.2592l9.29 6.6672c19.194-4.5879 37.025-10.9669 54.185-17.1076l.01-.0024c23.3-8.3347 45.37-16.2296 67.94-18.6094 21.23-2.2225 51.22 3.5969 82.39 9.6459 33.76 6.5521 68.43 16.5751 95.34 13.7382 21.47-2.2842 49.68-4.1384 71.33-13.9951 26.63-3.7548 57.91-20.4383 76.12-22.358 2.17-.2285-1.95.3456 0 0 3.95-.7002-6.17-.1998 0 0l11.6 140.2916v61.376H.315122v-5.738c-.120117-1.14.210026-2.279 0-4.271-.2411633-2.287 0-4.126.00009-5.742-.00009-2.148-.00009-4.536.000016-6.708-.000106-3.691-.000106-4.85-.000106-6.152l.00009-3.403s.258912-4.709 0-7.166v-6.876s-.709227-10.376 0-10.93z" fill="#003543"/>
+<path d="M0 181.585h41.6153l19.5541 9.878h24.0667l23.5649-9.878 23.064-5.853 43.621-6.586 38.106 6.586 56.155-3.293 51.643-3.293h30.084l35.097-8.415 35.598-4.756 25.07-12.439 29.08-4.756 22.062-10.61h20.055l26.072-9.878 13.392-5.282c3.409-1.344 7.043-2.035 10.709-2.035h12.74c3.163 0 6.307.497 9.315 1.473l13.633 4.421c2.908.943 5.947 1.423 9.005 1.423h7.895c2.334 0 4.645-.45 6.806-1.326l10.414-4.222c2.882-1.168 5.963-1.769 9.074-1.769h8.072c3.487 0 6.949.584 10.241 1.728l12.44 4.323c2.371.823 4.94.888 7.349.185l17.636-5.147c2.474-.722 5.038-1.089 7.615-1.089h24.769c.934 0 1.849.26 2.642.75l3.934 2.428c.856.529 1.921.595 2.837.178l20.413-9.31c1.441-.657 3.008-.997 4.593-.997h26.174l47.632 2.927 26.573-8.0491 37.582-13.7114c7.621-2.7805 15.736-3.9697 23.838-3.4936l62.423 3.6684 5.37-.1866c5.696-3.2139 12.666-7.3096 19.416-11.2737 11.83-6.9461 22.97-13.4885 25.35-14.1764.42-.1222.95-.2848 1.57-.4781 6.92-2.1452 26.05-8.0744 53.38-4.4912 5.37.7036 10.27 1.3383 14.73 1.8972l13.05-7.145h34.6l16.28 4.0458c2.56-.2978 5.23-2.0303 6.54-2.3324.32-.0741.87-.21 1.6-.3917 5.86-1.4593 23.57-5.867 31.99-4.8159 6.07.7575 12.44.1086 17-.3564 2.56-.2606 4.55-.4635 5.6-.3286.57.0718 1.78.2554 3.39.4996 6.82 1.0314 20.77 3.1433 22.91 2.4797.78-.2405 2.24-1.043 4.2-2.1248 4.74-2.6087 12.42-6.8415 20.64-8.7335 3.64.2825 11.63.6649 14.43-.0648.41-.1045.86-.2305 1.37-.3697 3.93-1.0766 10.72-2.9389 15.67-1.66 5.59 1.4443 16.3 3.2843 20.48 2.428 3.17-.6498 11.71-.2593 16.19.0567l.92-.0206c1.3-.3951 3.07-.8669 5.1-1.303L1444 13v207H0v-38.415z" fill="#012A35"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/explore/dark/landscape-explore.svg b/nuxtjs.org/static/img/home/explore/dark/landscape-explore.svg
index b3d56fba4..93f3639a0 100644
--- a/nuxtjs.org/static/img/home/explore/dark/landscape-explore.svg
+++ b/nuxtjs.org/static/img/home/explore/dark/landscape-explore.svg
@@ -1 +1,3 @@
-<svg width="1440" height="147" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M498.48 122.787h25.77l25.421-3.522 37.311-6.349s28.748-2.915 28.748-3.903c4.039-2.833 15.495-.307 23.306 1.415h.001c4.163.918 7.29 1.607 7.707 1.136.505-.571 2.623-1.578 5.34-2.551h16.064c6.27-.302 19.175 0 19.175 0h13.061l26.753 5.779s32.202 7.217 50.775 11.406c8.18 1.845 17.552 2.039 25.468-.16.556-.154 1.116-.311 1.676-.468 5.46-1.53 12.321-2.142 12.321-2.142l28.948-1.133 20.833-3.474 35.271-3.25 9.479 1.213 8.791-1.836 11.676-5.59 4.69-2.791 34.634 1.878 34.311 2.818 10.98 1.319s3.27-.853 5.09-1.319l5.12-.556c2.09-.35 14.27-1.768 14.27-1.768l15.61 1.768 37.89-8.508 28.43 5.197c5.9 0 12.07 0 20.36.299l48.96 9.463 10.3-1.497 17.84.759 2.24-3.013s8.61-1.852 12.11-1.852c1.31 0 4.17-.118 7.71-.265 10.38-.429 26.57.265 26.57.265l.61.079c14.06 1.817 14.06 1.817 21 1.817l20.66.839c10.62 5.52 29.73 12.623 61.08 18.99L1413.3 147h21.91l4.79-1.928V0H0l.00075077 101.769L103.792 103.806l45.829 3.125 10.719-3.125 104.302 9.11 30.16 2.681 19.332-.805 31.766 1.521 35.244 2.952h25.633l44.845 11.645 3.471-2.849 43.387-5.274z" fill="#00181F"/></svg>
\ No newline at end of file
+<svg width="1440" height="147"  fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M498.48 122.787H524.25L549.671 119.265L586.982 112.916C586.982 112.916 615.73 110.001 615.73 109.013C619.769 106.18 631.225 108.706 639.036 110.428L639.037 110.428C643.2 111.346 646.327 112.035 646.744 111.564C647.249 110.993 649.367 109.986 652.084 109.013H668.148C674.418 108.711 687.323 109.013 687.323 109.013H700.384L727.137 114.792C727.137 114.792 759.339 122.009 777.912 126.198C786.092 128.043 795.464 128.237 803.38 126.038C803.936 125.884 804.496 125.727 805.056 125.57C810.516 124.04 817.377 123.428 817.377 123.428L846.325 122.295L867.158 118.821L902.429 115.571L911.908 116.784L920.699 114.948L932.375 109.358L937.065 106.567L971.699 108.445L1006.01 111.263L1016.99 112.582C1016.99 112.582 1020.26 111.729 1022.08 111.263L1027.2 110.707C1029.29 110.357 1041.47 108.939 1041.47 108.939L1057.08 110.707L1094.97 102.199L1123.4 107.396C1129.3 107.396 1135.47 107.396 1143.76 107.695L1192.72 117.158L1203.02 115.661L1220.86 116.42L1223.1 113.407C1223.1 113.407 1231.71 111.555 1235.21 111.555C1236.52 111.555 1239.38 111.437 1242.92 111.29C1253.3 110.861 1269.49 111.555 1269.49 111.555L1270.1 111.634C1284.16 113.451 1284.16 113.451 1291.1 113.451L1311.76 114.29C1322.38 119.81 1341.49 126.913 1372.84 133.28L1413.3 147H1435.21L1440 145.072V0H0L0.000750775 101.769L103.792 103.806L149.621 106.931L160.34 103.806L264.642 112.916L294.802 115.597L314.134 114.792L345.9 116.313L381.144 119.265H406.777L451.622 130.91L455.093 128.061L498.48 122.787Z" fill="#012A35"/>
+</svg>
diff --git a/nuxtjs.org/windi.config.js b/nuxtjs.org/windi.config.js
index 97d1a7a8d..055b85a12 100644
--- a/nuxtjs.org/windi.config.js
+++ b/nuxtjs.org/windi.config.js
@@ -5,13 +5,35 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
+
       'primary-green': '#00DC82',
-      secondary: '#002E3B',
-      'secondary-light': '#064A5B',
-      'secondary-dark': '#01232D',
-      'secondary-darker': '#001D25',
-      'secondary-darkest': '#00181F',
-      terciary: '#B2CCCC',
+      'secondary-surface': '#E5F9FF',
+      'secondary-lightest': '#B7E1ED',
+      'secondary-lighter': '#95CDDE',
+      'secondary-light': '#71A2B0',
+      secondary: '#497A87',
+      'secondary-dark': '#255461',
+      'secondary-darker': '#003543',
+      'secondary-darkest': '#012A35',
+      'secondary-black': '#001E26',
+      // secondary: '#002E3B',
+      // 'secondary-lightest': '#95CDDE', // where the heck is lightest? colors are complete mess
+      // 'secondary-light': '#064A5B',
+      // 'secondary-dark': '#01232D',
+      // 'secondary-darker': '#001D25',
+      // 'secondary-darkest': '#00181F',
+
+      terciary: '#B2CCCC', // cloud
+      'cloud-surface': '#E6F0F0',
+      'cloud-lightest': '#D1E2E2',
+      'cloud-lighter': '#B2CCCC',
+      'cloud-light': '#92ADAD',
+      cloud: '#688282',
+      'cloud-dark': '#566B6B',
+      'cloud-darker': '#334040',
+      'cloud-darkest': '#273131',
+      'cloud-black': '#1A2121',
+
       black: '#000',
       white: '#fff',
       blue: colors.lightBlue,
@@ -20,10 +42,110 @@ export default {
       rose: colors.rose,
       yellow: colors.amber,
       gray: colors.gray
+
+      // $colorNeutralWhite: #FFFFFF;
+      // $colorNeutralBlack: #000000;
+      // $colorGreenLighter: #80EEC0;
+      // $colorGreenLight: #40E5A1;
+      // $colorGreenDefault: #00DC82;
+      // $colorGreenDark: #00BB6F;
+      // $color-greenDarker: #009A5B;
+      // $colorPearLighter: #ECF3AA;
+      // $colorPearLight: #E0EB74;
+      // $colorPearDefault: #D1E231;
+      // $colorPearDark: #BDCE1D;
+      // $colorPearDarker: #9CAA18;
+      // $colorYellowLighter: #FFF2AC;
+      // $colorYellowLight: #FFEC83;
+      // $colorYellowDefault: #FFE65A;
+      // $colorYellowDark: #D9C34D;
+      // $colorYellowDarker: #B3A13F;
+      // $colorOrangeLighter: #F9C580;
+      // $colorOrangeLight: #F7A840;
+      // $colorOrangeDefault: #F48B00;
+      // $colorOrangeDark: #CF7600;
+      // $colorOrangeDarker: #AB6100;
+      // $colorRedLighter: #FFB1A3;
+      // $colorRedLight: #FF8B74;
+      // $colorRedDefault: #FF6446;
+      // $colorRedDark: #D9553C;
+      // $colorRedDarker: #B34631;
+      // $colorPinkLighter: #FCBBCF;
+      // $colorPinkLight: #FB9AB7;
+      // $colorPinkDefault: #FA789F;
+      // $colorPinkDark: #D56687;
+      // $colorPinkDarker: #AF546F;
+      // $colorPurpleLighter: #E0B5DF;
+      // $colorPurpleLight: #D190CE;
+      // $colorPurpleDefault: #C26BBE;
+      // $colorPurpleDark: #A55BA2;
+      // $colorPurpleDarker: #884B85;
+      // $colorIndigoLighter: #80B1E3;
+      // $colorIndigoLight: #408BD6;
+      // $colorIndigoDefault: #0064C8;
+      // $colorIndigoDark: #0055AA;
+      // $colorIndigoDarker: #00468C;
+      // $colorBlueLighter: #94D5F7;
+      // $colorBlueLight: #5EBFF4;
+      // $colorBlueDefault: #28AAF0;
+      // $colorBlueDark: #2291CC;
+      // $colorBlueDarker: #1C77A8;
+      // $colorTealLighter: #80F2F2;
+      // $colorTealLight: #40EBEB;
+      // $colorTealDefault: #00E5E5;
+      // $colorTealDark: #00C3C3;
+      // $colorTealDarker: #00A0A0;
+      // $colorMintSurface: #E7FEFD;
+      // $colorMintLightest: #C5EEEC;
+      // $colorMintLighter: #A8DDDB;
+      // $colorMintLight: #7EB1B0;
+      // $colorMintDefault: #558887;
+      // $colorMintDark: #2E6160;
+      // $colorMintDarker: #003C3C;
+      // $colorMintDarkest: #012E2F;
+      // $colorMintBlack: #002021;
+      // $colorSandSurface: #F5F5EB;
+      // $colorSandLightest: #EDEDD5;
+      // $colorSandLighter: #DEDEB6;
+      // $colorSandLight: #B4B48C;
+      // $colorSandDefault: #9C9C6A;
+      // $colorSandDark: #636330;
+      // $colorSandDarker: #3B3B00;
+      // $colorSandDarkest: #2D2E01;
+      // $colorSandBlack: #1F2100;
+      // $colorSkySurface: #E5F9FF;
+      // $colorSkyLightest: #B7E1ED;
+      // $colorSkyLighter: #95CDDE;
+      // $colorSkyLight: #71A2B0;
+      // $colorSkyDefault: #497A87;
+      // $colorSkyDark: #255461;
+      // $colorSkyDarker: #003543;
+      // $colorSkyDarkest: #012A35;
+      // $colorSkyBlack: #001E26;
+      // $colorCloudSurface: #E6F0F0;
+      // $colorCloudLightest: #D1E2E2;
+      // $colorCloudLighter: #B2CCCC;
+      // $colorCloudLight: #92ADAD;
+      // $colorCloudDefault: #688282;
+      // $colorCloudDark: #566B6B;
+      // $colorCloudDarker: #334040;
+      // $colorCloudDarkest: #273131;
+      // $colorCloudBlack: #1A2121;
+      // $colorStoneSurface: #F6F6F6;
+      // $colorStoneLightest: #D4D4D4;
+      // $colorStoneLighter: #B2B2B2;
+      // $colorStoneLight: #909090;
+      // $colorStoneDefault: #6E6E6E;
+      // $colorStoneDark: #4C4C4C;
+      // $colorStoneDarker: #2A2A2A;
+      // $colorStoneDarkest: #191919;
+      // $colorStoneBlack: #080808;
     },
     extend: {
       fontFamily: {
-        serif: 'DM Serif Display'
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono'
       }
     }
   },
@@ -51,6 +173,30 @@ export default {
     'text-display-1': {
       fontSize: '6rem',
       lineHeight: '6rem'
+    },
+    'text-body-xs': {
+      fontSize: '0.75rem',
+      lineHeight: '1rem'
+    },
+    'text-body-sm': {
+      fontSize: '0.875rem',
+      lineHeight: '1.25rem'
+    },
+    'text-body-base': {
+      fontSize: '1rem',
+      lineHeight: '1.5rem'
+    },
+    'text-body-lg': {
+      fontSize: '1.125rem',
+      lineHeight: '1.75rem'
+    },
+    'text-body-xl': {
+      fontSize: '1.25rem',
+      lineHeight: '1.75rem'
+    },
+    'text-body-2xl': {
+      fontSize: '1.5rem',
+      lineHeight: '2rem'
     }
   }
 }
diff --git a/src/app/nuxt.config.ts b/src/app/nuxt.config.ts
index f762e2ab0..db7ed9530 100644
--- a/src/app/nuxt.config.ts
+++ b/src/app/nuxt.config.ts
@@ -17,14 +17,7 @@ export default nuxtConfig({
    * Default app config
    */
   head: {
-    meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
-    link: [
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'
-      },
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com' }
-    ]
+    meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }]
   },
 
   /**
diff --git a/src/defaultTheme/components/atoms/HeaderLogo.vue b/src/defaultTheme/components/atoms/HeaderLogo.vue
index c9c5c948a..21981d35e 100644
--- a/src/defaultTheme/components/atoms/HeaderLogo.vue
+++ b/src/defaultTheme/components/atoms/HeaderLogo.vue
@@ -9,8 +9,8 @@
     <template v-if="theme.header.title && theme.header.logo">
       <div class="flex items-center">
         <span class="mr-4">
-          <img :src="logo.light" class="w-auto h-8 dark:hidden" :alt="settings.title" />
-          <img :src="logo.dark" class="w-auto h-8 light:hidden" :alt="settings.title" />
+          <img :src="logo.light" class="w-auto h-6 md:h-8 dark:hidden" :alt="settings.title" />
+          <img :src="logo.dark" class="w-auto h-6 md:h-8 light:hidden" :alt="settings.title" />
         </span>
         <span class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
           {{ settings.title }}
@@ -20,8 +20,8 @@
 
     <template v-if="!theme.header.title && theme.header.logo">
       <span>
-        <img :src="logo.light" class="w-auto h-8 dark:hidden" :alt="settings.title" />
-        <img :src="logo.dark" class="w-auto h-8 light:hidden" :alt="settings.title" />
+        <img :src="logo.light" class="w-auto h-6 md:h-8 dark:hidden" :alt="settings.title" />
+        <img :src="logo.dark" class="w-auto h-6 md:h-8 light:hidden" :alt="settings.title" />
       </span>
     </template>
   </div>
diff --git a/src/defaultTheme/components/molecules/AsideNavigation.vue b/src/defaultTheme/components/molecules/AsideNavigation.vue
index 5d1ebf210..59b3152bc 100644
--- a/src/defaultTheme/components/molecules/AsideNavigation.vue
+++ b/src/defaultTheme/components/molecules/AsideNavigation.vue
@@ -12,7 +12,7 @@
       lg:sticky lg:top-header lg:w-60 lg:max-h-[400vh]
     "
   >
-    <div class="w-auto h-full overflow-auto bg-white dark:bg-gray-900 lg:bg-transparent">
+    <div class="w-auto h-full overflow-auto bg-white dark:bg-gray-900 dark:lg:bg-transparent lg:bg-transparent">
       <!-- Aside Header -->
       <div class="flex items-center w-full px-4 sm:px-6 lg:hidden h-header bg-gray-50 dark:bg-gray-800">
         <button
diff --git a/src/defaultTheme/components/organisms/page/PageToc.vue b/src/defaultTheme/components/organisms/page/PageToc.vue
index 596e781c9..61a949257 100644
--- a/src/defaultTheme/components/organisms/page/PageToc.vue
+++ b/src/defaultTheme/components/organisms/page/PageToc.vue
@@ -19,6 +19,7 @@
       bg-opacity-80
       dark:bg-gray-900 dark:bg-opacity-80
       xl:bg-transparent
+      dark:xl:bg-transparent
       lg:left-60
       xl:left-0
       pl-4
diff --git a/src/defaultTheme/css/main.css b/src/defaultTheme/css/main.css
index ac8ff1121..ff0fc45c2 100644
--- a/src/defaultTheme/css/main.css
+++ b/src/defaultTheme/css/main.css
@@ -17,10 +17,6 @@
   }
 }
 
-body {
-  @apply antialiased text-root tracking-semitight text-gray-900 bg-white dark:text-gray-50 dark:bg-gray-900;
-}
-
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 200ms linear;
diff --git a/src/defaultTheme/index.ts b/src/defaultTheme/index.ts
index d0fb64821..274565884 100644
--- a/src/defaultTheme/index.ts
+++ b/src/defaultTheme/index.ts
@@ -9,6 +9,18 @@ const themeConfig: NuxtConfig = nuxtConfig({
   rootDir: __dirname,
   themeName: 'defaultTheme',
   themeDir: __dirname,
+  head: {
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'
+      },
+      { rel: 'preconnect', href: 'https://fonts.gstatic.com' }
+    ],
+    bodyAttrs: {
+      class: ['body-bg docus-body-text-color antialiased tracking-semitight']
+    }
+  },
   colorMode: {
     classSuffix: ''
   },
diff --git a/src/defaultTheme/module.ts b/src/defaultTheme/module.ts
index 26929cf14..d7c8c8637 100644
--- a/src/defaultTheme/module.ts
+++ b/src/defaultTheme/module.ts
@@ -62,7 +62,7 @@ export default <Module>function themeSetupModule() {
   const { settings } = $docus
 
   // Windi glob used for includes
-  const windiGlob = '/**/*.{html,vue,md,mdx,pug,jsx,tsx,svelte,css}'
+  const windiGlob = '/**/*.{html,vue,md,mdx,pug,jsx,tsx,svelte,css,ts,js}'
   // Get Windi config at user project level
   const localWindiConfig = loadWindiConfig(options)
 
diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
index 11553d241..1c4f2fdbf 100644
--- a/src/defaultTheme/settings.ts
+++ b/src/defaultTheme/settings.ts
@@ -34,6 +34,8 @@ const defaultThemeSettings = {
     }
   },
   shortcuts: {
+    'body-bg': 'bg-white dark:bg-gray-900',
+    'docus-body-text-color': 'text-gray-900 dark:text-gray-50',
     // Primary
     'text-primary': 'text-primary-500 dark:text-primary-400',
     'border-primary': 'border-primary-500 dark:border-primary-400',