refactor(home): sections (#9882)

docs/content/0.index.md

@@ -31,8 +31,7 @@ Build your next Vue.js application with confidence using Nuxt. An open source fr
 Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
 #description
 How a user interacts with and experiences your website will determine your impact. Utility, ease of use, and efficiency are key. **Nuxt is built with a set of features that make this possible.**
-#extra
+#cards
-  ::home-card-list
   :::home-card-item
   ---
   image:
@@ -68,7 +67,6 @@ How a user interacts with and experiences your website will determine your impac
   By leveraging server-side rendering, ESM format and optimized images, Nuxt websites are indexable by search engines while giving the feeling of an app to the end-users.
   :::
 ::
-::
 
 ::home-section
 ---
@@ -87,17 +85,18 @@ Discover our showcase
 ::
 
 ::home-section
+---
+buttons:
+  - label: 'Try it now'
+    size: 'xl'
+    variant: 'primary-gradient'
+    to: '/docs/getting-started/installation'
+---
 #title
 Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
 #description
 Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
-#extra
+#cards
-  ::home-cta
-  ---
-  buttonText: "Try it now"
-  buttonLink: "/docs/getting-started/installation"
-  ---
-    ::home-card-list
   :::home-card-item
   ---
   image:
@@ -132,8 +131,6 @@ Developers deserve solutions as well designed as non-technical people. Our focus
   Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more.
   :::
 ::
-  ::
-::
 
 ::home-section
 ---
@@ -143,10 +140,8 @@ titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
 Trusted by the world wide web
 #description
 Their opinions are valuable and worth sharing to everyone.
-#extra
+#cards
-  :::home-testimonials-list
+  :::home-testimonials-item
-  #items
-    ::::home-testimonials-item
   ---
   authorImg: evan
   authorUrl: 'https://twitter.com/youyuxi'
@@ -157,9 +152,9 @@ Their opinions are valuable and worth sharing to everyone.
   Creator of VueJS
   #quote
   Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.
-    ::::
+  :::
 
-    ::::home-testimonials-item
+  :::home-testimonials-item
   ---
   authorImg: sarah
   authorUrl: 'https://twitter.com/sarah_edo'
@@ -171,9 +166,9 @@ Their opinions are valuable and worth sharing to everyone.
   #quote
   Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
   There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.
-    ::::
+  :::
 
-    ::::home-testimonials-item
+  :::home-testimonials-item
   ---
   authorImg: addy
   authorUrl: 'https://twitter.com/addyosmani'
@@ -184,11 +179,17 @@ Their opinions are valuable and worth sharing to everyone.
   Chief Engineer of Chrome
   #quote
   Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.
-    ::::
   :::
 ::
 
 ::home-section
+---
+  buttons:
+  - label: 'Explore Nuxt modules'
+    size: 'xl'
+    variant: 'primary-gradient'
+    to: '/modules'
+---
 #title
 Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
 #description
@@ -196,26 +197,19 @@ Nuxt is made with a robust plugin system. Integrate with popular CMS or UI libra
 #link
 Explore Nuxt modules
 #extra
-  ::home-dx-section
+  ::home-modules-list
-  ---
-  buttonText: "Explore Nuxt modules"
-  buttonLink: "/modules"
-  ---
-  :::home-modules-list
-  :::
   ::
 ::
 
 ::home-section
+---
+cardsClass: 'lg:grid-cols-4'
+---
 #title
 A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300}
 #description
 Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js.
-#extra
+#cards
-  ::home-card-list
-  ---
-  gridClass: 'lg:grid-cols-4'
-  ---
   :::home-card-item
   ---
   icon: 'fa-brands:npm'
@@ -257,21 +251,20 @@ Nuxt is composed of web builders all over the world who like to craft beautiful
   Twitter followers
   :::
 ::
-::
 
 ::home-section
+---
+buttons:
+- label: 'Discover our solutions'
+  size: 'xl'
+  variant: 'primary-gradient'
+  to: '/support/solutions'
+---
 #title
 A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
 #description
 Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
-#extra
-::home-dx-section
----
-buttonText: "Discover our solutions"
-buttonLink: "/support/solutions"
----
 #cards
-:::home-card-list
   :::home-card-item
   ---
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
@@ -320,14 +313,11 @@ buttonLink: "/support/solutions"
   #description
   More than 2000 active contributors on multiple platforms are here to help !
   :::
-:::
-::
 ::
 
-::home-journey-section
+:::home-section{ .mb-20 }
-#content
-  :::home-section
 ---
+sectionAlign: 'row'
 buttons:
 - label: 'Get started'
   size: 'xl'
@@ -345,4 +335,3 @@ buttonLink: "/support/solutions"
 #description
 Learn everything you need to know, from beginner to master.
 :::
-::