feat: :sparkles: add landing

app/assets/css/main.css

@@ -2,16 +2,25 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-html {
-  font-family: "Poppins", sans-serif;
-}
-
 @theme {
   --color-primary: #7E8C54;
 
+  --color-text: #161616;
   --color-text-2: #505050;
+
+  --color-white-2: #FEFCFF;
   
   --color-border: #C0C0C0;
 
   --color-error: #D4183D;
+}
+
+::selection,
+::-moz-selection {
+  background-color: #E38B37;
+  color: white;
+}
+
+html {
+  font-family: "Poppins", sans-serif;
 }

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">© 2025 Viver de Café. Todos os direitos reservados.</p>
+    <p class="font-medium text-sm text-black">© 2024 Viver de Café. Todos os direitos reservados.</p>
   </footer>
 </template>

app/components/ProgramCard.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="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>
+      </div>
+      <div class="bg-primary rounded-lg px-3 py-1 flex justify-center">
+        <span class="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>
+      <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>
+      </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>
+      </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>
+      </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>
+      </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" 
+    />
+  </div>
+</template>

app/layouts/default.vue

@@ -3,6 +3,6 @@
     <main>
       <slot /> 
     </main>
-    <TheFooter />  
+    <AppFooter />  
   </div>
 </template>

app/pages/index.vue

@@ -1,6 +1,42 @@
 <template>
   <div>
-    <h1>Landing Page</h1>
+    <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>
 

public/img/green_coffee.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_522_2313)">
+<path d="M15 6.66634H15.8334C16.7174 6.66634 17.5653 7.01753 18.1904 7.64265C18.8155 8.26777 19.1667 9.11562 19.1667 9.99967C19.1667 10.8837 18.8155 11.7316 18.1904 12.3567C17.5653 12.9818 16.7174 13.333 15.8334 13.333H15M15 6.66634H1.66669V14.1663C1.66669 15.0504 2.01788 15.8982 2.643 16.5234C3.26812 17.1485 4.11597 17.4997 5.00002 17.4997H11.6667C12.5507 17.4997 13.3986 17.1485 14.0237 16.5234C14.6488 15.8982 15 15.0504 15 14.1663V6.66634ZM5.00002 0.833008V3.33301M8.33335 0.833008V3.33301M11.6667 0.833008V3.33301" stroke="#7E8C54" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_522_2313">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>