sfp_front_nuxt_viver_cafe_landing/app/pages/index.vue

<template>
  <div>
    <div class="bg-[linear-gradient(rgba(0,0,0,0.40)),url('/img/landing_background.png')]  bg-[center_24%] bg-no-repeat bg-cover rounded-br-[300px] w-full h-[789px] text-white-2 flex justify-center items-center">
      <div class="flex flex-col justify-between items-center h-[60%]">
        <div class="flex flex-col justify-center items-center gap-8">
          <div class="bg-primary rounded-full w-31 h-31 flex justify-center items-center">
            <NuxtImg src="/img/coffee.svg" />
          </div>
          <h4 class="font-bold text-5xl max-w-[904px] text-center">Transforme sua Paixão pelo Café em <span class="text-[#E38B37]">Sucesso</span></h4>
        </div>
        <p class="text-2xl">Aprenda com os melhores especialistas e eleve a qualidade do seu café ao próximo nível</p>
      </div>
      <div class="absolute top-7 right-10">
        <button class="underline text-primary bg-white-2 w-[247px] h-[50px] rounded-lg font-medium text-sm cursor-pointer hover:bg-white-2/85 transition duration-300">Entrar na minha conta</button>
      </div>
    </div>

    <div class="my-26">
      <div class="text-center">
        <h2 class="text-text font-bold text-[34px]">Nossos programas</h2>
        <p class="text-text-2 mt-2">Escolha o programa ideal para você de acordo com seu nível de experiência</p>
      </div>
      <div class="flex justify-center items-center mt-12">
        <ProgramCard />
      </div>
    </div>

    <div class="w-[75%] m-auto flex items-start justify-between my-46">
      <div>
        <div class="flex items-center gap-1.5">
          <UIcon name="i-mdi-coffee-outline" class="text-primary" size="24px" />
          <h3 class="font-medium text-xl text-primary">Viver Café</h3>
        </div>
        <p class="text-xs text-text w-[230px] mt-3">Transformando vidas através do conhecimento sobre café especial.</p>
      </div>
      <div>
        <a href="#" class="font-medium text-xl text-primary">Termos e Políticas</a>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'default',
});
</script>