docs: add buttons slot on PageHero component (#10139)

* button design change and add button in hero of designkit page

* delete showcasesButtonHero component

* wip

* review changes

* quote

* chore(lockfile): revert yarn.lock to its main state

Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>

docs/content/3.showcase.md

@@ -12,13 +12,32 @@ image:
   format: 'webp'
   height: '216'
   width: '400'
+buttonsTextLeft: 'Download extension:'
+buttonsHidden: true
+buttons:
+  - label: 'Chrome'
+    size: 'lg'
+    variant: 'secondary'
+    to: 'https://chrome.google.com/webstore/detail/vue-telescope/neaebjphlfplgdhedjdhcnpjkndddbpd'
+    icon: 'logos:chrome'
+    target: '_blank'
+  - label: 'Firefox'
+    size: 'lg'
+    variant: 'secondary'
+    to: 'https://addons.mozilla.org/en/firefox/addon/vue-telescope/'
+    icon: 'logos:firefox'
+    target: '_blank'
+  - label: 'Edge'
+    size: 'lg'
+    variant: 'secondary'
+    to: 'https://microsoftedge.microsoft.com/addons/detail/vue-telescope/icgcillpgelpleniodgkmohgdmeogodl'
+    icon: 'logos:microsoft-edge'
+    target: '_blank'
 ---
 #title
 Showcase
 #description
 Discover our selection of websites built with Nuxt. This collection is powered by VueTelescope.
-#extra
-:::showcases-buttons-hero
 ::
 
 :ShowcasesList

docs/content/4.support/2.agencies/1.index.md

@@ -10,8 +10,11 @@ image:
   format: 'svg'
   height: '216'
   width: '400'
-buttonText: 'Submit my agency'
+buttons:
+  - label: 'Submit my agency'
+    variant: 'primary-gradient'
     to: 'https://docs.google.com/forms/d/e/1FAIpQLSf85qskit5QqmGJcruGkGF0U7240Bh9MeN0pHB18UiOMWC8dA/viewform'
+    target: '_blank'
 ---
 #title
 Agencies

docs/content/4.support/3.us.md

@@ -11,8 +11,11 @@ image:
   format: 'webp'
   height: '216'
   width: '400'
-buttonText: 'Become a sponsor'
+buttons:
+  - label: 'Become a sponsor'
+    variant: 'primary-gradient'
     to: 'https://github.com/sponsors/nuxt'
+    target: '_blank'
 ---
 #title
 Sponsors

docs/content/4.support/4.jobs.md

@@ -11,8 +11,11 @@ image:
   format: 'webp'
   height: '216'
   width: '400'
-buttonText: 'Post a job'
+buttons:
+  - label: 'Post a job'
+    variant: 'primary-gradient'
     to: 'https://vuejobs.com/jobs/create'
+    target: '_blank'
 ---
 #title
 Explore Nuxt Jobs

docs/content/design-kit.md

@@ -11,14 +11,24 @@ image:
   format: 'webp'
   height: '216'
   width: '400'
+buttons:
+  - label: 'Download Design Kit'
+    size: 'lg'
+    variant: 'secondary'
+    to: '/assets/design-kit/nuxt-assets.zip'
+    target: '_blank'
+  - label: 'Preview guidelines'
+    size: 'lg'
+    to: 'https://www.figma.com/file/DOO3neicujKl3ymcqUg9dK/%E2%9B%B0%EF%B8%8F---Nuxt-Brand-Guidelines?node-id=0%3A1&t=qBS3UqvGpjrIkxIm-1'
+    icon: 'uil:arrow-right'
+    trailing: 'trailing'
+    download: true
+    target: '_blank'
 ---
 #title
 Design Kit
 #description
 Welcome to Nuxt design definition page. Identity was redefined by handpicking conscientiously colors, typography and shapes in order to put forward how performant, useful & easy Nuxt products are.
-#extra
-:::resources-design-kit-assets-link
-:::
 ::
 
 ::resources-design-kit-section