mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +00:00
refactor(home): sections (#9882)
This commit is contained in:
Florent Delerue
GitHub
parent
c00f21e706
commit
a59f28a04a
@ -31,43 +31,41 @@ 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}
|
Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||||
#description
|
#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.**
|
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
|
||||||
:::home-card-item
|
---
|
||||||
---
|
image:
|
||||||
image:
|
light: 'ux-fast-light.svg'
|
||||||
light: 'ux-fast-light.svg'
|
dark: 'ux-fast.svg'
|
||||||
dark: 'ux-fast.svg'
|
---
|
||||||
---
|
#title
|
||||||
#title
|
Fast and Furious
|
||||||
Fast and Furious
|
#description
|
||||||
#description
|
Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building.
|
||||||
Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building.
|
:::
|
||||||
:::
|
:::home-card-item
|
||||||
:::home-card-item
|
---
|
||||||
---
|
image:
|
||||||
image:
|
light: 'ux-hybrid-light.svg'
|
||||||
light: 'ux-hybrid-light.svg'
|
dark: 'ux-hybrid.svg'
|
||||||
dark: 'ux-hybrid.svg'
|
---
|
||||||
---
|
#title
|
||||||
#title
|
On-demand Rendering
|
||||||
On-demand Rendering
|
#description
|
||||||
#description
|
Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR.
|
||||||
Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR.
|
Build any kind of website or web application with optimized performance in mind.
|
||||||
Build any kind of website or web application with optimized performance in mind.
|
:::
|
||||||
:::
|
:::home-card-item
|
||||||
:::home-card-item
|
---
|
||||||
---
|
image:
|
||||||
image:
|
light: 'ux-seo-light.svg'
|
||||||
light: 'ux-seo-light.svg'
|
dark: 'ux-seo.svg'
|
||||||
dark: 'ux-seo.svg'
|
---
|
||||||
---
|
#title
|
||||||
#title
|
SEO & Web Vitals
|
||||||
SEO & Web Vitals
|
#description
|
||||||
#description
|
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.
|
||||||
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
|
::home-section
|
||||||
@ -87,52 +85,51 @@ Discover our showcase
|
|||||||
::
|
::
|
||||||
|
|
||||||
::home-section
|
::home-section
|
||||||
|
---
|
||||||
|
buttons:
|
||||||
|
- label: 'Try it now'
|
||||||
|
size: 'xl'
|
||||||
|
variant: 'primary-gradient'
|
||||||
|
to: '/docs/getting-started/installation'
|
||||||
|
---
|
||||||
#title
|
#title
|
||||||
Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||||
#description
|
#description
|
||||||
Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
|
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
|
:::home-card-item
|
||||||
---
|
---
|
||||||
buttonText: "Try it now"
|
image:
|
||||||
buttonLink: "/docs/getting-started/installation"
|
light: 'dx-plug-and-play-light.svg'
|
||||||
|
dark: 'dx-plug-and-play.svg'
|
||||||
---
|
---
|
||||||
::home-card-list
|
#title
|
||||||
:::home-card-item
|
Plug & Play
|
||||||
---
|
#description
|
||||||
image:
|
Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams.
|
||||||
light: 'dx-plug-and-play-light.svg'
|
:::
|
||||||
dark: 'dx-plug-and-play.svg'
|
:::home-card-item
|
||||||
---
|
---
|
||||||
#title
|
image:
|
||||||
Plug & Play
|
light: 'dx-effortless-light.svg'
|
||||||
#description
|
dark: dx-effortless.svg
|
||||||
Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams.
|
---
|
||||||
:::
|
#title
|
||||||
:::home-card-item
|
Automation
|
||||||
---
|
#description
|
||||||
image:
|
Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more.
|
||||||
light: 'dx-effortless-light.svg'
|
:::
|
||||||
dark: dx-effortless.svg
|
:::home-card-item
|
||||||
---
|
---
|
||||||
#title
|
image:
|
||||||
Automation
|
light: 'dx-batteries-light.svg'
|
||||||
#description
|
dark: 'dx-batteries.svg'
|
||||||
Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more.
|
---
|
||||||
:::
|
#title
|
||||||
:::home-card-item
|
Batteries Included
|
||||||
---
|
#description
|
||||||
image:
|
Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more.
|
||||||
light: 'dx-batteries-light.svg'
|
:::
|
||||||
dark: 'dx-batteries.svg'
|
|
||||||
---
|
|
||||||
#title
|
|
||||||
Batteries Included
|
|
||||||
#description
|
|
||||||
Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more.
|
|
||||||
:::
|
|
||||||
::
|
|
||||||
::
|
|
||||||
::
|
::
|
||||||
|
|
||||||
::home-section
|
::home-section
|
||||||
@ -143,52 +140,56 @@ titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
|
|||||||
Trusted by the world wide web
|
Trusted by the world wide web
|
||||||
#description
|
#description
|
||||||
Their opinions are valuable and worth sharing to everyone.
|
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'
|
||||||
authorImg: evan
|
---
|
||||||
authorUrl: 'https://twitter.com/youyuxi'
|
#author
|
||||||
---
|
Evan You
|
||||||
#author
|
#job
|
||||||
Evan You
|
Creator of VueJS
|
||||||
#job
|
#quote
|
||||||
Creator of VueJS
|
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.
|
||||||
#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
|
authorImg: sarah
|
||||||
authorUrl: 'https://twitter.com/sarah_edo'
|
authorUrl: 'https://twitter.com/sarah_edo'
|
||||||
---
|
---
|
||||||
#author
|
#author
|
||||||
Sarah Drasner
|
Sarah Drasner
|
||||||
#job
|
#job
|
||||||
Core Team of Vue.js
|
Core Team of Vue.js
|
||||||
#quote
|
#quote
|
||||||
Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
|
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.
|
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
|
authorImg: addy
|
||||||
authorUrl: 'https://twitter.com/addyosmani'
|
authorUrl: 'https://twitter.com/addyosmani'
|
||||||
---
|
---
|
||||||
#author
|
#author
|
||||||
Addy Osmani
|
Addy Osmani
|
||||||
#job
|
#job
|
||||||
Chief Engineer of Chrome
|
Chief Engineer of Chrome
|
||||||
#quote
|
#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.
|
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
|
::home-section
|
||||||
|
---
|
||||||
|
buttons:
|
||||||
|
- label: 'Explore Nuxt modules'
|
||||||
|
size: 'xl'
|
||||||
|
variant: 'primary-gradient'
|
||||||
|
to: '/modules'
|
||||||
|
---
|
||||||
#title
|
#title
|
||||||
Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||||
#description
|
#description
|
||||||
@ -196,82 +197,74 @@ Nuxt is made with a robust plugin system. Integrate with popular CMS or UI libra
|
|||||||
#link
|
#link
|
||||||
Explore Nuxt modules
|
Explore Nuxt modules
|
||||||
#extra
|
#extra
|
||||||
::home-dx-section
|
::home-modules-list
|
||||||
---
|
|
||||||
buttonText: "Explore Nuxt modules"
|
|
||||||
buttonLink: "/modules"
|
|
||||||
---
|
|
||||||
:::home-modules-list
|
|
||||||
:::
|
|
||||||
::
|
::
|
||||||
::
|
::
|
||||||
|
|
||||||
::home-section
|
::home-section
|
||||||
|
---
|
||||||
|
cardsClass: 'lg:grid-cols-4'
|
||||||
|
---
|
||||||
#title
|
#title
|
||||||
A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300}
|
A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300}
|
||||||
#description
|
#description
|
||||||
Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js.
|
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
|
:::home-card-item
|
||||||
---
|
---
|
||||||
gridClass: 'lg:grid-cols-4'
|
icon: 'fa-brands:npm'
|
||||||
|
to: 'https://www.npmjs.com/package/nuxt'
|
||||||
---
|
---
|
||||||
:::home-card-item
|
#title
|
||||||
---
|
56M
|
||||||
icon: 'fa-brands:npm'
|
#description
|
||||||
to: 'https://www.npmjs.com/package/nuxt'
|
npm downloads
|
||||||
---
|
:::
|
||||||
#title
|
:::home-card-item
|
||||||
56M
|
---
|
||||||
#description
|
icon: 'fa-brands:discord'
|
||||||
npm downloads
|
to: 'https://discord.com/invite/ps2h6QT'
|
||||||
:::
|
---
|
||||||
:::home-card-item
|
#title
|
||||||
---
|
20k
|
||||||
icon: 'fa-brands:discord'
|
#description
|
||||||
to: 'https://discord.com/invite/ps2h6QT'
|
Discord members
|
||||||
---
|
:::
|
||||||
#title
|
:::home-card-item
|
||||||
20k
|
---
|
||||||
#description
|
icon: 'fa-brands:github'
|
||||||
Discord members
|
to: 'https://github.com/nuxt'
|
||||||
:::
|
---
|
||||||
:::home-card-item
|
#title
|
||||||
---
|
55k
|
||||||
icon: 'fa-brands:github'
|
#description
|
||||||
to: 'https://github.com/nuxt'
|
GitHub stars
|
||||||
---
|
:::
|
||||||
#title
|
:::home-card-item
|
||||||
55k
|
---
|
||||||
#description
|
icon: 'fa-brands:twitter'
|
||||||
GitHub stars
|
to: 'https://twitter.com/nuxt_js'
|
||||||
:::
|
---
|
||||||
:::home-card-item
|
#title
|
||||||
---
|
76k
|
||||||
icon: 'fa-brands:twitter'
|
#description
|
||||||
to: 'https://twitter.com/nuxt_js'
|
Twitter followers
|
||||||
---
|
:::
|
||||||
#title
|
|
||||||
76k
|
|
||||||
#description
|
|
||||||
Twitter followers
|
|
||||||
:::
|
|
||||||
::
|
|
||||||
::
|
::
|
||||||
|
|
||||||
::home-section
|
::home-section
|
||||||
|
---
|
||||||
|
buttons:
|
||||||
|
- label: 'Discover our solutions'
|
||||||
|
size: 'xl'
|
||||||
|
variant: 'primary-gradient'
|
||||||
|
to: '/support/solutions'
|
||||||
|
---
|
||||||
#title
|
#title
|
||||||
A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||||
#description
|
#description
|
||||||
Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
|
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
|
#cards
|
||||||
:::home-card-list
|
|
||||||
:::home-card-item
|
:::home-card-item
|
||||||
---
|
---
|
||||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||||
@ -320,29 +313,25 @@ buttonLink: "/support/solutions"
|
|||||||
#description
|
#description
|
||||||
More than 2000 active contributors on multiple platforms are here to help !
|
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:
|
||||||
buttons:
|
- label: 'Get started'
|
||||||
- label: 'Get started'
|
size: 'xl'
|
||||||
size: 'xl'
|
variant: 'primary-gradient'
|
||||||
variant: 'primary-gradient'
|
to: '/docs/getting-started/introduction'
|
||||||
to: '/docs/getting-started/introduction'
|
- label: 'Explore Examples'
|
||||||
- label: 'Explore Examples'
|
size: 'xl'
|
||||||
size: 'xl'
|
variant: 'secondary'
|
||||||
variant: 'secondary'
|
to: '/docs/examples/essentials/hello-world'
|
||||||
to: '/docs/examples/essentials/hello-world'
|
---
|
||||||
---
|
#sectionTitle
|
||||||
#sectionTitle
|
GETTING STARTED
|
||||||
GETTING STARTED
|
#title
|
||||||
#title
|
Start your Nuxt Journey
|
||||||
Start your Nuxt Journey
|
#description
|
||||||
#description
|
Learn everything you need to know, from beginner to master.
|
||||||
Learn everything you need to know, from beginner to master.
|
:::
|
||||||
:::
|
|
||||||
::
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user