feat: :iphone: responsividade da landing

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="border-t border-[#C5C5C5] py-12 text-center">
-    <p class="font-medium text-sm text-black">© 2024 Viver de Café. Todos os direitos reservados.</p>
+  <footer class="border-t border-[#C5C5C5] py-8 md:py-12 text-center">
+    <p class="font-medium text-xs md:text-sm text-black">© 2024 Viver de Café. Todos os direitos reservados.</p>
   </footer>
 </template>

app/components/ProgramCard.vue

@@ -1,44 +1,44 @@
 <template>
-  <div class="w-[75%] p-4 border border-border rounded-lg">
+  <div class="w-full sm:w-[90%] lg:w-[75%] p-4 border border-border rounded-lg">
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-2">
         <NuxtImg src="/img/green_coffee.svg" />
-        <h6 class="font-medium text-text text-sm">Mentoria Completa</h6>
+        <h6 class="font-medium text-text text-xs md:text-sm">Mentoria Completa</h6>
       </div>
       <div class="bg-primary rounded-lg px-3 py-1 flex justify-center">
-        <span class="text-xs text-white-2">Mais popular</span>
+        <span class="text-[10px] md:text-xs text-white-2">Mais popular</span>
       </div>
     </div>
-    <p class="my-8 text-sm text-text-2">Programa completo de mentoria para produção de café especial</p>
-    <div class="flex flex-col items-center text-[34px] m-4">
-      <h2 class="text-text">R$ 0,00</h2>
+    <p class="my-8 text-xs md:text-sm text-text-2">Programa completo de mentoria para produção de café especial</p>
+    <div class="flex flex-col items-center text-2xl md:text-[34px] m-4">
+      <h2 class="text-text line-through">R$ 0,00</h2>
       <h2 class="text-primary font-bold">GRATUITO</h2>
     </div>
     <ul class="flex flex-col gap-4">
       <li class="flex gap-1 items-center">
         <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
-        <span class="text-text-2 text-sm">12 Meses de acompanhamento</span>
+        <span class="text-text-2 text-xs md:text-sm">12 Meses de acompanhamento</span>
       </li>
 
       <li class="flex gap-1 items-center">
         <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
-        <span class="text-text-2 text-sm">Lives semanais ao vivo</span>
+        <span class="text-text-2 text-xs md:text-sm">Lives semanais ao vivo</span>
       </li>
 
       <li class="flex gap-1 items-center">
         <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
-        <span class="text-text-2 text-sm">Comunidade exclusiva</span>
+        <span class="text-text-2 text-xs md:text-sm">Comunidade exclusiva</span>
       </li>
 
       <li class="flex gap-1 items-center">
         <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
-        <span class="text-text-2 text-sm">Conteúdo adicional mensal</span>
+        <span class="text-text-2 text-xs md:text-sm">Conteúdo adicional mensal</span>
       </li>
     </ul>
 
     <UButton 
       label="Inscrever-se Agora" 
-      class="text-white rounded-lg w-full h-10 mt-5 cursor-pointer hover:bg-primary/85 transition duration-300" 
+      class="text-white rounded-lg w-full h-10 text-xs md:text-sm mt-5 cursor-pointer hover:bg-primary/85 transition duration-300" 
     />
   </div>
 </template>

app/pages/index.vue

@@ -1,40 +1,40 @@
 <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="bg-[linear-gradient(rgba(0,0,0,0.40)),url('/img/landing_background.png')]  bg-[center_24%] bg-no-repeat bg-cover rounded-br-[100px] md:lg:rounded-br-[150px]  lg:rounded-br-[300px] w-full h-150 lg:h-[789px] text-white-2 flex justify-center items-center px-4">
       <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 class="bg-primary rounded-full w-26 h-26 md:w-31 md:h-31 flex justify-center items-center">
+            <NuxtImg src="/img/coffee.svg" class="w-13 md:w-16"/>
           </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>
+          <h4 class="font-bold text-[28px] md:text-4xl lg: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>
+        <p class="text-lg md:text-xl lg:text-2xl text-center lg:max-w-[94%] xl:max-w-max">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 class="absolute top-4 right-4 md:top-7 md:right-10">
+        <button class="underline text-primary bg-white-2 w-max-w px-4 md:px-8 h-11 md:h-[50px] rounded-lg font-medium text-xs md: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="my-20 md:my-26 px-4 lg:px-0">
       <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>
+        <h2 class="text-text font-bold text-2xl md:text-[34px]">Nossos programas</h2>
+        <p class="text-text-2 mt-2 text-sm md:text-base">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">
+      <div class="flex justify-center items-center mt-6 md:mt-12">
         <ProgramCard />
       </div>
     </div>
 
-    <div class="w-[75%] m-auto flex items-start justify-between my-46">
-      <div>
+    <div class="w-full sm:w-[90%] lg:w-[75%] m-auto flex items-start justify-between my-30 lg:my-46 px-4 lg:px-0">
+      <div class="w-1/2">
         <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>
+          <h3 class="font-medium text-base md:text-lg lg: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>
+        <p class="text-[10px] md:text-xs text-text w-[90%] sm: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 class="w-1/2 flex justify-end">
+        <a href="#" class="font-medium text-base md:text-lg lg:text-xl text-primary">Termos e Políticas</a>
       </div>
     </div>
   </div>