Quellcode durchsuchen

feat: :sparkles: add novas alteracoes da landing

Joyce Kepler vor 1 Monat
Ursprung
Commit
79140e7c15
3 geänderte Dateien mit 24 neuen und 46 gelöschten Zeilen
  1. 1 0
      app/assets/css/main.css
  2. 1 1
      app/components/AppFooter.vue
  3. 22 45
      app/pages/index.vue

+ 1 - 0
app/assets/css/main.css

@@ -4,6 +4,7 @@
 
 @theme {
   --color-primary: #35A30A;
+  --color-primary-4: #CDE8C2;
 
   --color-text: #161616;
   --color-text-2: #505050;

+ 1 - 1
app/components/AppFooter.vue

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

+ 22 - 45
app/pages/index.vue

@@ -1,39 +1,19 @@
 <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-[100px] md:rounded-br-[150px]  lg:rounded-br-[300px] w-full h-140 lg:h-[84vh] lg:min-h-[530px] 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-[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:rounded-br-[150px] lg:rounded-br-[300px] w-full h-[calc(100vh-126px)] lg:min-h-[530px] text-white-2 flex justify-center items-center px-4">
+      <div class="flex flex-col justify-between items-center h-[80%]">
+        <div class="flex flex-col justify-center items-center gap-10">
           <NuxtImg src="/img/white_logo.svg" class="w-20 md:w-31"/>
-          <h4 class="font-bold text-[28px] md:text-4xl lg:text-5xl max-w-[904px] text-center lg:leading-16">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-[60rem] text-center lg:leading-16">Transforme sua Paixão pelo Café em <span class="text-[#E38B37]">Sucesso</span></h4>
         </div>
-        <p class="text-lg lg:mt-6 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-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-14 md:my-25 px-4 lg:px-0">
-      <div class="text-center">
-        <h2 class="text-text font-bold text-2xl md:text-[34px]">Nossos programas</h2>
-        <p class="text-text-2 mt-2.5 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-6 md:mt-12">
-        <ProgramCard :program="program" />
-      </div>
-    </div>
-
-    <div class="w-full sm:w-[90%] lg:w-[75%] m-auto flex items-start justify-between my-24 lg:my-46 px-4 lg:px-0">
-      <div class="w-1/2">
-        <div class="flex items-center gap-1.5">
-          <NuxtImg src="/img/logo.png" width="24px" />
-          <h3 class="font-medium text-base md:text-lg lg:text-xl text-primary">Viver Café</h3>
+        <div>
+          <p class="text-lg lg:mt-6 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 class="flex flex-col justify-center items-center gap-4 mt-18">
+            <button class="underline text-primary-4 text-sm font-bold bg-primary w-[246px] h-[50px] rounded-lg cursor-pointer hover:bg-primary/85 transition duration-300" @click="goToLoginPage">Acessar conta</button>
+            <span class="text-sm text-white font-bold">ou</span>
+            <button class="underline text-primary text-sm font-bold cursor-pointer hover:text-primary/85 transition duration-300" @click="goToRegisterPage">Registrar-se</button>
+          </div>
         </div>
-        <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 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>
@@ -47,18 +27,15 @@ definePageMeta({
   layout: 'default',
 });
 
-const program = {
-  id: 1,
-  title: 'Mentoria Completa',
-  description: 'Programa completo de mentoria para produção de café especial.',
-  price: 0,
-  originalPrice: 0,
-  isPopular: true,
-  features: [
-    '12 Meses de acompanhamento',
-    'Lives semanais ao vivo',
-    'Comunidade exclusiva',
-    'Conteúdo adicional mensal',
-  ]
-}
+const config = useRuntimeConfig();
+const quasarAppUrlRegister = config.public.studentPlatform + '/register';
+const quasarAppUrlLogin = config.public.studentPlatform + '/login';
+
+const goToRegisterPage = () => {
+  window.open(quasarAppUrlRegister, '_blank');
+};
+
+const goToLoginPage = () => {
+  window.open(quasarAppUrlLogin, '_blank');
+};
 </script>