chore: update readme design (#9048)

Co-authored-by: Daniel Roe <daniel@roe.dev>

README.md

@@ -1,43 +1,106 @@
-![NuxtJS-Logo-Dark](.github/logo-light.svg#gh-dark-mode-only)
-![NuxtJS-Logo-Light](.github/logo.svg#gh-light-mode-only)
+
+[![Nuxt banner](./.github/assets/banner.png)](https://nuxt.com)
+
+# 👋 Welcome to Nuxt
+
+
+Nuxt's goal is to make web development intuitive and performant, with a great developer experience.<br>Learn more in the ['What is Nuxt?'](https://nuxt.com/docs/getting-started/introduction) section of our documentation.
+
 
  <p>
   <a href="https://www.npmjs.com/package/nuxt/v/rc"><img src="https://img.shields.io/npm/v/nuxt/rc.svg?style=flat&colorA=002438&colorB=28CF8D" alt="Version"></a>
   <a href="https://www.npmjs.com/package/nuxt/v/rc"><img src="https://img.shields.io/npm/dm/nuxt.svg?style=flat&colorA=002438&colorB=28CF8D" alt="Downloads"></a>
   <a href="./LICENSE"><img src="https://img.shields.io/github/license/nuxt/framework.svg?style=flat&colorA=002438&colorB=28CF8D" alt="License"></a>
-  <a href="https://discord.nuxtjs.org/"><img src="https://badgen.net/badge/Discord/join-us/7289DA" alt="Discord"></a>
  </p>
 
-Welcome to Nuxt 3 repository: **The Intuitive Web Framework** ✨
-
-Nuxt's goal is to make web development intuitive and performant with a great developer experience in mind, learn more in the ["What is Nuxt?"](https://v3.nuxtjs.org/guide/concepts/introduction) section of our documentation.
-
 <table>
+<thead>
+<tr>
+<th width="2000" colspan="2">
+</th>
+</tr>
+</thead>
 <tbody>
 <tr>
-  <td>
-    <h2>📖 Documentation</h2>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/docs"><img src="./.github/assets/documentation.png"></a>
+  </td>
+  <td valign="top">
+    <h3>Documentation</h3>
     <p>
-      Read <a href="https://v3.nuxtjs.org">Online Docs</a>.
+      We highly recommend you take a look at <a href="https://nuxt.com">the Nuxt documentation</a> to level up.
     </p>
   </td>
-  <td>
-    <h2>🐞 Reporting bugs</h2>
+</tr>
+<tr>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/modules"><img src="./.github/assets/modules.png"></a>
+  </td>
+  <td valign="top">
+    <h3>Modules</h3>
     <p>
-      Check out <a href="https://v3.nuxtjs.org/community/reporting-bugs">Reporting Bugs</a> page.</p>
+      Discover our <a href="https://nuxt.com/modules">list of modules</a> to supercharge your Nuxt project. Created by the Nuxt team and community.
+    </p>
   </td>
 </tr>
 <tr>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/docs/examples/hello-world"><img src="./.github/assets/examples.png"></a>
+  </td>
   <td>
-    <h2>💡 Suggestions </h2>
+    <h3>Examples</h3>
     <p>
-      Check out <a href="https://v3.nuxtjs.org/community/contribution">Contribution</a> page.
+      Explore different ways of using Nuxt features and get inspired with <a href="https://nuxt.com/docs/examples/hello-world">our list of examples</a>.
     </p>
   </td>
-  <td>
-    <h2>❔ Questions</h2>
+</tr>
+</tbody>
+</table>
+
+<table>
+<thead>
+<tr>
+<th width="2000" colspan="2">
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/docs/community/reporting-bugs"><img src="./.github/assets/reporting-bugs.png"></a>
+  </td>
+  <td valign="top">
+    <h3>Reporting bugs</h3>
     <p>
-      Check out <a href="https://v3.nuxtjs.org/community/getting-help">Getting Help</a> page.
+      Check out the <a href="https://nuxt.com/docs/community/reporting-bugs">Reporting Bugs</a> page.</p>
+    </p>
+  </td>
+</tr>
+<tr>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/docs/community/contribution"><img src="./.github/assets/suggestions.png"></a>
+  </td>
+  <td valign="top">
+    <h3>Suggestions</h3>
+    <p>
+      Check out the <a href="https://nuxt.com/docs/community/contribution">Contribution</a> page.
+    </p>
+  </td>
+</tr>
+<tr>
+  <td width="80" align="center" valign="top">
+    <br>
+    <a href="https://nuxt.com/docs/community/getting-help"><img src="./.github/assets/questions.png"></a>
+  </td>
+  <td valign="top">
+    <h3>Questions</h3>
+    <p>
+      Check out the <a href="https://nuxt.com/docs/community/getting-help">Getting Help</a> page.
     </p>
   </td>
 </tr>
@@ -46,8 +109,15 @@ Nuxt's goal is to make web development intuitive and performant with a great dev
 
 ## Local Development
 
-Follow the docs to [Set Up Your Local Development Environment](https://v3.nuxtjs.org/community/framework-contribution#set-up-your-local-development-environment) to contribute to the framework and documentation.
+Follow the docs to [Set Up Your Local Development Environment](https://nuxt.com/docs/community/framework-contribution#set-up-your-local-development-environment) to contribute to the framework and documentation.
+
+## Follow us
+
+<p valign="center">
+  <a href="https://chat.nuxt.dev"><img width="20px" src="./.github/assets/discord.svg" alt="Discord"></a>&nbsp;&nbsp;<a href="https://twitter.nuxt.dev"><img width="20px" src="./.github/assets/twitter.svg" alt="Twitter"></a>&nbsp;&nbsp;<a href="https://github.nuxt.dev"><img width="20px" src="./.github/assets/github.svg" alt="GitHub"></a>
+</p>
 
 ## License
 
 [MIT](./LICENSE)
+