chore(docs): add Read the announcement (#744)

* chore: add announcement link

* chore: update link UI

* chore: update highlight

* chore: update design

* chore: move announcement to botto

* Update docs/components/molecules/HomeHero.vue

Co-authored-by: pooya parsa <pyapar@gmail.com>

* chore: move back to top and improve footer + homepage

Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>

docs/components/app/AppFooter.vue

@@ -17,7 +17,7 @@
       </div>
       <div class="mt-3 md:mt-0 md:order-1">
         <p class="text-center text-base">
-          <a href="https://nuxtjs.org" class=" font-medium hover:underline">Nuxt 2 documentation</a>
+          <a href="https://nuxtjs.org" class="inline-flex items-center gap-1 font-medium hover:underline">Nuxt 2 documentation <IconArrowRight /></a>
         </p>
       </div>
     </div>

docs/components/atoms/icons/IconArrowRight.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4z" fill="currentColor" /></svg>
+</template>

docs/components/molecules/HomeHero.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="overflow-hidden relative dark:bg-sky-black dark:text-white pt-12">
     <div class="flex flex-wrap justify-center py-0 section d-container-content">
-      <section class="flex flex-col justify-start w-full px-4 pb-24 sm:pt-12 sm:pb-36 lg:pt-24 lg:pb-56 text-center z-20">
+      <section class="flex flex-col justify-start w-full px-4 pb-24 sm:pt-12 sm:pb-36 lg:pt-24 lg:pb-50 text-center z-20">
+        <div class="highlight-box mx-auto mt-6 rounded-md">
+          <a href="https://nuxtjs.org/announcements/nuxt3-beta" target="_blank" rel="noopener" class="text-sm inline-flex items-center space-x-1 px-4 md:px-5 py-1 md:py-2 font-medium">
+            <span>Read the announcement</span><IconArrowRight class="mt-1px" />
+          </a>
+        </div>
         <Gem class="block m-x-auto" />
-        <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-6 pt-8">
+        <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-6 pt-2">
           <Markdown use="title" unwrap="p" />
         </h1>
         <h2
@@ -56,8 +61,8 @@ export default {
     primary: {
       type: Object,
       default: () => ({
-        text: '38K+ GitHub stars',
-        url: '/https://github.com',
+        text: 'Star on GitHub',
+        url: 'https://github.com',
         icon: 'IconGitHub'
       })
     },
@@ -71,3 +76,15 @@ export default {
   }
 }
 </script>
+
+<style>
+.highlight-box {
+  @apply transition-shadow duration-300;
+
+  box-shadow: #00DC82AA 0px 0px 8px;
+
+  &:hover {
+    box-shadow: #00DC82 0px 0px 16px;
+  }
+}
+</style>

docs/content/index.md

@@ -165,20 +165,24 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
 
     We've worked to make the upgrade as easy as possible between Nuxt 2 and Nuxt 3.
 
+    ::list
     - Legacy plugins and modules will keep working
     - Nuxt 2 config is compatible
     - Partial pages options API available
+    ::
 
     ### Bringing Nuxt 3 experience to your existing Nuxt 2 project
 
     As we've been working on new features for Nuxt 3, we've back-ported some of them to Nuxt 2.
 
+    ::list{.mb-8}
     - Using [Nitro server](/concepts/server-engine) with Nuxt 2
     - Using Composition API (same as Nuxt 3) with Nuxt 2
     - Using new CLI and Devtools with Nuxt 2
     - Progressively upgrade to Nuxt 3
     - Compatibility with Nuxt 2 module ecosystem
     - Upgrade piece by piece (Nitro, Composition API, Nuxt Kit)
+    ::
 
     :button-link[Get started with Nuxt Bridge]{ href="/getting-started/bridge" size="medium" aria-label="Get started" }
   ::