sfp_front_nuxt_iguassu_alliance/app/components/SectionHero.vue

<template>
  <section class="relative bg-[url('/img/hero_bg.png')] bg-cover bg-center h-screen flex justify-center">
    <AppHeader />
    <div class="w-[1241px] flex justify-between items-center absolute bottom-20">
      <div class="flex flex-col gap-5 w-1/2">
        <NuxtImg src="/img/logo.png" width="308" />
        <h1 class="max-w-[620px] 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 w-1/2 max-w-[516px]">
        <p class="text-white text-2xl font-medium">
          A Iguassu Alliance conecta sua empresa ao ecossistema de negócios do Paraguai através da 3ª edição de programa estratégico.
        </p>
        <button class="group self-start bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white text-2xl font-semibold flex items-center gap-3 border border-[#E3FA6D] rounded-lg py-6 px-8 whitespace-nowrap transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(227,250,109,0.45)] hover:brightness-110 cursor-pointer">
          Fale com o um especialista agora!
          <NuxtImg src="/img/cta_btn_icon.svg" width="30" class="transition-transform duration-300 group-hover:translate-x-1.5" />
        </button>
      </div>
    </div>
  </section>
</template>