docs: update steps illustrations

Author: atinux

docs/content/0.index.yml

@@ -47,25 +47,25 @@ deploy:
     - title: Link your Cloudflare account
       description: Create an API token on Cloudflare with our pre-filled template.
       img:
-        src: '/images/landing/steps/link-cloudflare-account.webp'
+        src: '/images/landing/steps/link-cloudflare-account.svg'
         width: 460
         height: 259
     - title: Create a Nuxt app
       description: Start from our templates or import your GitHub repository.
       img:
-        src: '/images/landing/steps/create-nuxthub-project.png'
+        src: '/images/landing/steps/create-nuxt-app.svg'
         width: 460
         height: 259
     - title: Deploy it
       description: Run the nuxthub deploy command or use the Cloudflare Pages CI/CD.
       img:
-        src: '/images/landing/steps/deploy-nuxt-project.png'
+        src: '/images/landing/steps/deploy-nuxt-app.svg'
         width: 460
         height: 259
     - title: Share it to the world
       description: Get insights and manage your storage in NuxtHub.
       img:
-        src: '/images/landing/steps/share-nuxt-project.webp'
+        src: '/images/landing/steps/share-nuxt-app.svg'
         width: 460
         height: 259
   buttons:

docs/pages/index.vue

@@ -78,8 +78,10 @@ onMounted(() => {
       <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 items-start justify-center">
         <li v-for="step in page?.deploy.steps" :key="step.title" class="flex flex-col gap-y-8 justify-center group">
           <NuxtImg
-            :src="step.img.src" :width="step.img.width" :height="step.img.height" :alt="step.title"
-            class="rounded-xl bg-gradient-to-r from-green-300 to-teal-500 group-hover:opacity-100 lg:opacity-90 transition duration-300"
+            :src="step.img.src"
+            :width="step.img.width"
+            :height="step.img.height"
+            :alt="step.title"
           />
           <div>
             <h2 class="font-semibold" v-html="step.title" />