feat: cómo calcular HH en landing page

feat: cómo calcular HH en landing page

Author: CamilaCarvajalGusman

src/Sections/Header.astro

@@ -22,17 +22,26 @@ import Mail from "../assets/icons/mail.png";
       </a>
     </li>
     <li class="hidden md:block">
-      <a href="/#calcular" class="text-xl text-huella-text-green">¿Cómo calculamos?</a>
+      <a href="/#calcular" class="text-xl text-huella-text-green"
+        >¿Cómo calculamos?</a
+      >
     </li>
     <li class="hidden md:block text-lg hover:m-0">
-      <a href="/#mision" class="text-xl text-huella-text-green">Nuestra misión</a>
+      <a href="/#mision" class="text-xl text-huella-text-green"
+        >Nuestra misión</a
+      >
     </li>
     <li class="hidden md:block text-lg hover:m-0">
-      <a href="/#nosotros" class="text-xl text-huella-text-green">Sobre nosotros</a>
+      <a href="/#nosotros" class="text-xl text-huella-text-green"
+        >Sobre nosotros</a
+      >
     </li>
 
     <li class="hidden md:block text-lg hover:m-0">
-      <a href="blogs/emisiones-co2-bolivia" class="text-xl text-huella-text-green">Blog</a>
+      <a
+        href="blogs/emisiones-co2-bolivia"
+        class="text-xl text-huella-text-green">Blog</a
+      >
     </li>
 
     <!-- <li class="hidden md:block text-lg hover:m-0">

src/Sections/HowTo.astro

@@ -11,7 +11,7 @@ import Semaforo from "../assets/images/Rango semáforo de 5 colores.png";
 
 <section
   id="calcular"
-  class="flex flex-col items-center gap-2 justify-between py-4 md:py-16 px-4 md:px-[100px] mx-auto my-auto max-w-[1440px] scroll-m-10"
+  class=" flex flex-col items-center gap-2 justify-between py-4 md:py-16 px-4 md:px-[100px] mx-auto my-auto max-w-[1440px] scroll-m-10"
 >
   <h1 class="text-center text-xl md:text-6xl font-bold">
     Calculadora de Huella de Carbono  </h1>

src/Sections/HowToHH.astro

@@ -0,0 +1,66 @@
+---
+import Higiene from "../assets/images/wash.png"
+import Limpieza from "../assets/images/laundry.png";
+import Dieta from "../assets/images/howTo/dieta.png";
+import Alimentacion from "../assets/images/lunch_dining.png";
+import BienesyServicios from "../assets/images/bienes.png";
+import HabitosSostenibles from "../assets/images/habitos_sost.png";
+import CaculateCard from "../components/CaculateCard.astro";
+import Resultado from "../assets/images/howTo/grafico.png";
+import Rig from "../assets/images/howTo/rig-feliz.png";
+import Semaforo from "../assets/images/Rango semáforo de 5 colores.png";
+---
+
+<section
+  id="calcular"
+  class="flex flex-col items-center gap-5 justify-between bg-[#F5F5F5] py-4 md:py-16 px-4 md:px-[100px] mx-auto my-auto max-w-[1440px]  min-w-[100%] scroll-m-10"
+>
+  <h1 class="text-center text-xl md:text-6xl font-bold">
+    Calculadora de Huella Hídrica  </h1>
+    <h2 class="md:text-2xl">La prueba dura aproximadamente 5 minutos</h2>
+    <h2 class="md:text-2xl">Evalúa tu consumo de agua en cinco categorías principales:</h2>
+  <div class="flex flex-col md:flex-row  gap-2 md:justify-around w-full">
+    <CaculateCard
+      img={Higiene.src}
+      text="Higiene"
+      altImg="Higiene"
+      withImg="100px"
+      stylesComponent="md:h-auto mt-5 transition ease-in-out duration-500 transform hover:scale-110 hover:bg-transparent mb-30"
+    />
+
+    <CaculateCard
+      img={Limpieza.src}
+      text="Limpieza"
+      altImg="Limpieza"
+      withImg="100px"
+      stylesComponent="md:h-auto mt-5 transition ease-in-out duration-500 transform hover:scale-110 hover:bg-transparent mb-30"
+    />
+
+    <CaculateCard
+      img={Alimentacion.src}
+      text="Dieta"
+      altImg="Imagen Dieta"
+      withImg="100px"
+      stylesComponent="md:h-auto mt-5 transition ease-in-out duration-500 transform hover:scale-110 hover:bg-transparent mb-30"
+    />
+        <CaculateCard
+      img={BienesyServicios.src}
+      text="Bienes y Servicios"
+      altImg="Imagen Bienes y Servicios"
+      withImg="100px"
+      stylesComponent="md:h-auto mt-5 transition ease-in-out duration-500 transform hover:scale-110 hover:bg-transparent mb-30"
+    />
+        <CaculateCard
+      img={HabitosSostenibles.src}
+      text="Hábitos Sostenibles"
+      altImg="Imagen Hábitos Sostenibles"
+      withImg="130px"
+      stylesComponent="md:h-auto mt-5 transition ease-in-out duration-500 transform hover:scale-110 hover:bg-transparent mb-30"
+    />
+  </div>
+    <h3 class="text-center text-base md:text-2xl max-w-[800px]">
+     Aprende a ahorrar agua con consejos prácticos que cuidan tu bolsillo y el planeta.
+    </h3>
+
+ 
+</section>

src/Sections/Mission.astro

@@ -3,7 +3,7 @@ import ODSCircle from "../assets/images/ODS-circulo.png";
 ---
 <section
   id="mision"
-  class="flex flex-col items-center gap-5 justify-between py-4 md:py-16 px-4 md:px-[100px] mx-auto my-auto max-w-[1440px] scroll-m-10 bg-huella-text-gray-ligth"
+  class="flex flex-col items-center gap-5 justify-between py-4 md:py-16 px-4 md:px-[100px] mx-auto my-auto max-w-[1440px] min-w-[100%] scroll-m-10 bg-huella-text-gray-ligth"
 >
   <h1 class="text-center text-xl md:text-6xl font-bold">
 Nuestra Misión </h1>

src/assets/images/bienes.png

@@ -3,13 +3,15 @@ import About from "../Sections/About.astro";
 // import Download from "../components/Download.astro";
 import Hero from "../Sections/Hero.astro";
 import HowTo from "../Sections/HowTo.astro";
+import HowToHH from "../Sections/HowToHH.astro";
 import Mission from "../Sections/Mission.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="Mi Huella">
   <Hero />
   <HowTo />
+  <HowToHH/>
   <Mission/>
   <About />
   <!-- <Download /> -->