perf: :zap: otimizacao das imagens

app/components/SectionHero.vue

@@ -1,5 +1,24 @@
+<script setup>
+useHead({
+  link: [
+    {
+      rel: 'preload',
+      as: 'image',
+      href: '/img/hero_bg_mobile.webp',
+      media: '(max-width: 1023px)',
+    },
+    {
+      rel: 'preload',
+      as: 'image',
+      href: '/img/hero_bg.webp',
+      media: '(min-width: 1024px)',
+    },
+  ],
+})
+</script>
+
 <template>
-  <section class="relative bg-[url('/img/hero_bg.png')] bg-black bg-size-[380%_auto] md:bg-cover bg-top bg-no-repeat md:bg-center h-svh flex justify-center">
+  <section class="relative bg-[url('/img/hero_bg_mobile.webp')] lg:bg-[url('/img/hero_bg.webp')] bg-black bg-cover bg-top bg-no-repeat md:bg-center h-svh flex justify-center">
     <AppHeader />
     <div class="md:hidden absolute inset-0 bg-linear-to-t from-black to-transparent z-0 pointer-events-none" />
     <div class="w-full lg:max-w-7xl flex flex-col md:flex-row justify-between items-center absolute bottom-7 md:bottom-20 lg:bottom-10 xl:bottom-20 px-4">