sfp_front_nuxt_iguassu_alliance/app/components/SectionHero.vue

<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_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">
      <div class="flex flex-col gap-5 md:w-1/2">
        <NuxtImg src="/img/logo_2.png" class="hidden md:block w-[308px]" />
        <h1 class="text-3xl md:text-4xl lg:text-[46px] font-bold text-gradient">
          Não apenas planeje. Execute sua expansão internacional com segurança.
        </h1>
      </div>
      <div class="flex flex-col gap-5 md:w-1/2 md:max-w-[516px]">
        <p class="text-white text-lg md:text-xl lg:text-2xl font-medium leading-9">
          A Iguassu Alliance conecta sua empresa ao ecossistema de negócios do Paraguai através da 3ª edição de programa estratégico.
        </p>
        <CtaButton class="md:self-start" />
      </div>
    </div>
  </section>
</template>