IgrowkerTraining · euphoricdesign · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,22 +2,22 @@ import Navbar from './components/Navbar/Navbar';
 import Cards from './components/Cards/Cards';
 import Beneficios from './components/Beneficios/Beneficios';
 import Banner from './components/Banner/Banner';
-import './App.css';
 import Agriculture from './components/Agriculture/Agriculture';
 import Bienvenido from './components/Bienvenido/Bienvenido';
 import Arboles from './components/Arboles/Arboles';
 import Footer from './components/Footer/Footer';
+import './App.css';
 
 const App: React.FC = () => {
   return (
     <>
       <Navbar />
       <Bienvenido />
+      <Agriculture />
+      <Arboles />
       <Banner />
       <Cards />
       <Beneficios />
-      <Agriculture />
-      <Arboles />
       <Footer />
     </>
   );

diff --git a/src/assets/AdobeStock_812746937.mov b/src/assets/AdobeStock_812746937.mov
diff --git a/src/components/Agriculture/Agriculture.tsx b/src/components/Agriculture/Agriculture.tsx
@@ -1,67 +1,70 @@
-import CheckIcon from '../../assets/CheckIcon.svg'
-import FruitIcon from '../../assets/FruitsIcon.svg'
-import PlantIcon from '../../assets/PlantsIcon.svg'
-import imgAdopcion from '../../assets/imgAdopcion.png'
-import imgFincas from '../../assets/imgFincas.png'
-import imgNaranjas from '../../assets/imgNaranjas.png'
-import imgProveedor from '../../assets/imgProveedor.png'
+import CheckIcon from '../../assets/CheckIcon.svg';
+import FruitIcon from '../../assets/FruitsIcon.svg';
+import PlantIcon from '../../assets/PlantsIcon.svg';
+// import imgAdopcion from '../../assets/imgAdopcion.png';
+// import imgFincas from '../../assets/imgFincas.png';
+import imgNaranjas from '../../assets/imgNaranjas.png';
+// import imgProveedor from '../../assets/imgProveedor.png';
 import './Agriculture.css';
 
-
 const Agriculture: React.FC = () => {
   return (
-    <div className='absolute flex-col items-center'>
-      <section className='flex justify-center relative bottom-[5em]'>
-        <div className='w-[200px] h-[150px] rounded-lg bg-white mr-4 flex flex-col justify-center items-center shadow-2xl'>
-          <span className='text-[#FF9900] Typography'>Adopta</span>
-          <p className='text-[#1F1E17]'>Naranjos en adopción</p>
-          <img className='w-[90px] rounded-lg' src={imgAdopcion}/>
-        </div>
-        <div className='w-[200px] h-[150px] rounded-lg bg-white mr-4 flex flex-col justify-center items-center shadow-2xl'>
-          <span className='text-[#FF9900] Typography'>Compra</span>
-          <p className='text-[#1F1E17]'>Directo del proveedor</p>
-          <img className='w-[90px] rounded-lg' src={imgProveedor} />
-        </div>
-        <div className='w-[200px] h-[150px] rounded-lg bg-white mr-4 flex flex-col justify-center items-center shadow-2xl'>
-          <span className='text-[#FF9900] Typography'>Disfruta</span>
-          <p className='text-[#1F1E17]'>Visita nuestras fincas</p>
-          <img className='w-[90px] rounded-lg' src={imgFincas}/>
-        </div>
+    <section className="flex px-[200px] mt-[220px] mb-[6em] max-lg:flex-col max-lg:items-center">
+      <section className="w-[50%] mr-4 flex flex-col justify-center items-center">
+        <img className="w-[500px]" src={imgNaranjas} />
       </section>
-      <section className='flex py-8 mb-[10em] max-lg:flex-col max-lg:items-center'>
-        <section className='w-[50%] mr-4 flex flex-col justify-center items-center'>
-        <img className='w-[500px]' src={imgNaranjas}/>
-        </section>
-        <section className='w-[50%] max-lg:w-[100%] max-lg:ml-16 max-lg:mt-16'>
-        <span className='text-[#FF9900] text-[20px] Typography'>Crowdfarming</span>
-        <h2 className='text-[#1F1E17] text-5xl font-bold w-[60%] mb-8 max-lg:w-[100%]'>La agricultura del siglo XXI</h2>
-        <h3 className='text-[#4BAF47] text-xl font-bold mb-4'>Ecológica y sostenible</h3>
-        <p className='text-[#878680] w-[75%] mb-4 max-lg:w-[90%] max-lg:mb-8'>Las adopciones de árboles nos permiten cultivar nuestros campos de forma ecológica y regenerativa. Decimos "regenerative" porque buscamos que nuestras prácticas agrícolas no solo mantengan, sino que mejoren nuestros ecosistemas: los suelos, los insectos, la energía que usamos y el agua que empleamos.</p>
-        <div className='mb-4 flex items-center max-lg:mb-8'>
-          <div className='flex items-center w-[30%]'>
-          <img className='w-[64px]' src={FruitIcon}/>
-          <p className='text-[#1F1E17] text-lg font-bold'>Compra fruta fresca</p>
+      <section className="w-[50%] max-lg:w-[100%] max-lg:ml-16 max-lg:mt-16">
+        <span className="text-[#FF9900] text-[20px] Typography">
+          Crowdfarming
+        </span>
+        <h2 className="text-[#1F1E17] text-5xl font-bold w-[60%] mb-8 max-lg:w-[100%]">
+          La agricultura del siglo XXI
+        </h2>
+        <h3 className="text-[#4BAF47] text-xl font-bold mb-[1.2rem]">
+          Ecológica y sostenible
+        </h3>
+        <p className="text-[#878680] w-[75%] mb-[1.2rem] max-lg:w-[90%] max-lg:mb-8">
+          Las adopciones de árboles nos permiten cultivar nuestros campos de
+          forma ecológica y regenerativa. Decimos "regenerative" porque buscamos
+          que nuestras prácticas agrícolas no solo mantengan, sino que mejoren
+          nuestros ecosistemas: los suelos, los insectos, la energía que usamos
+          y el agua que empleamos.
+        </p>
+        <div className="mb-[1.2rem] flex items-center max-lg:mb-8 gap-[15px]">
+          <div className="flex items-center w-[30%] gap-[10px]">
+            <img className="w-[64px]" src={FruitIcon} />
+            <p className="text-[#1F1E17] text-base font-bold">
+              Compra fruta fresca
+            </p>
           </div>
-          <div className='flex items-center w-[30%]'>
-          <img className='w-[64px]' src={PlantIcon}/>
-          <p className='text-[#1F1E17] text-lg font-bold'>No usamos agrotóxicos</p>
+          <div className="flex items-center w-[30%] gap-[10px]">
+            <img className="w-[64px]" src={PlantIcon} />
+            <p className="text-[#1F1E17] text-base font-bold">
+              No usamos agrotóxicos
+            </p>
           </div>
         </div>
-        <div className='mb-4 max-lg:mb-8'>
-          <div className='flex'>
-            <img className='w-[16px] mr-4' src={CheckIcon}/>
-            <p className='text-[#1F1E17] font-semibold'>Cultivamos de forma ecológica para mejorar nuestros sistemas.</p>
+        <div className="mb-[1.2rem] max-lg:mb-8">
+          <div className="flex">
+            <img className="w-[16px] mr-4" src={CheckIcon} />
+            <p className="text-[#1F1E17] font-semibold">
+              Cultivamos de forma ecológica para mejorar nuestros sistemas.
+            </p>
           </div>
-          <div className='flex'>
-            <img className='w-[16px] mr-4' src={CheckIcon}/>
-            <p className='text-[#1F1E17] font-semibold'>Regeneramos el suelo, cuidamos los insectos y optimizamos el use de agua y energía.</p>
+          <div className="flex">
+            <img className="w-[16px] mr-4" src={CheckIcon} />
+            <p className="text-[#1F1E17] font-semibold">
+              Regeneramos el suelo, cuidamos los insectos y optimizamos el use
+              de agua y energía.
+            </p>
           </div>
         </div>
-        <button className='bg-[#4BAF47] text-white w-[196px] h-[60px] border-none hover:bg-[#3B8838]'>Descubre más</button>
-        </section>
+        <button className="bg-[#4BAF47] text-white w-[196px] h-[60px] border-none hover:bg-[#3B8838]">
+          Descubre más
+        </button>
       </section>
-    </div>
+    </section>
   );
 };
 
-export default Agriculture;
+export default Agriculture;
diff --git a/src/components/Arboles/Arboles.css b/src/components/Arboles/Arboles.css
@@ -1,16 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
-.ancho{
-    width:60%;
+.ancho {
+  width: 60%;
 }
 
-.containerP{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
+.containerP {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
 }
 
-.fuente{
-font-family: "Covered By Your Grace", cursive;
-font-size: 32px;
-}
+.fuente {
+  font-family: 'Covered By Your Grace', cursive;
+  font-size: 32px;
+}
diff --git a/src/components/Arboles/Arboles.tsx b/src/components/Arboles/Arboles.tsx
@@ -1,10 +1,9 @@
-import { Button } from '@mui/material';
-import { Spa,  LocalFlorist, Yard } from '@mui/icons-material'; // Importando íconos de MUI
+import { Spa, LocalFlorist, Yard } from '@mui/icons-material'; // Importando íconos de MUI
 import naranjosImg from '../../assets/naranjos.jpg'; // Ejemplo de cómo importar imágenes
 import limonerosImg from '../../assets/limoneros.jpg';
 import pomelerosImg from '../../assets/pomeleros.jpg';
 import mandarinosImg from '../../assets/mandarinos.jpg';
-import "./Arboles.css"
+import './Arboles.css';
 
 const arboles = [
   {
@@ -35,64 +34,56 @@ const arboles = [
 
 const Arboles: React.FC = () => {
   return (
-    <section className="py-14 bg-white">
-      <div className="container mx-auto px-8">
+    <section className="py-14 bg-white px-[200px]">
+      <div className="container mx-auto">
         {/* HEADER o título */}
         <div className="text-center mb-8">
           <p className="text-orange-500 font-medium fuente">Adopta</p>
-          <h2 className="text-3xl font-bold text-gray-900">
-            Nuestros árboles
-          </h2>
+          <h2 className="text-3xl font-bold text-gray-900">Nuestros árboles</h2>
         </div>
 
         {/* Cards de árboles */}
-        <div className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:px-56">
+        <div className="flex justify-between">
           {arboles.map((arbol) => (
-            <div key={arbol.id} className="bg-white rounded-xl overflow-hidden shadow-lg max-w-xs md:h-96 md:w-60">
-                {/* Imagen */}
-                <img src={arbol.image} alt={arbol.name} className="w-full h-48 object-cover" />
-
-                {/* Contenido de la Tarjeta */}
-                <div className="relative -mt-8 px-4 py-6 bg-white rounded-t-xl text-center ">
+            <div
+              key={arbol.id}
+              className="bg-white rounded-xl overflow-hidden shadow-lg max-w-xs md:h-96 md:w-[16rem]"
+            >
+              {/* Imagen */}
+              <img
+                src={arbol.image}
+                alt={arbol.name}
+                className="w-full h-48 object-cover"
+              />
+
+              {/* Contenido de la Tarjeta */}
+              <div className="relative -mt-8  py-6 bg-white rounded-t-xl text-center ">
                 {/* Ícono en la parte superior */}
                 <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full p-3">
-                    {arbol.icon }
+                  {arbol.icon}
                 </div>
-        
+
                 {/* Título */}
-                <h3 className="mt-6 text-xl font-semibold text-gray-900"> {arbol.name} </h3>
-
+                <h3 className="mt-6 text-xl font-semibold text-gray-900">
+                  {' '}
+                  {arbol.name}{' '}
+                </h3>
+
                 {/* Botón */}
-                <button className="mt-4 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition">
-                    Adoptar
+                <button className="rounded-[10px] bg-[#4BAF47] text-white transitio mt-4">
+                  Adoptar
                 </button>
-                </div>
-          </div>
+              </div>
+            </div>
           ))}
         </div>
 
-
-
-
-
-             {/* Botones de navegación */}
-        <div className="mb-40 flex justify-around  space-x-4 bg-green-500 p-7 rounded-lg ancho">
-          <Button variant="text" className="text-white hover:text-gray-200">Comprar por kilo</Button>
-          <Button variant="text" className="text-white hover:text-gray-200">Nuestra finca</Button>
-          <Button variant="text" className="text-white hover:text-gray-200">Clientes satisfechos</Button>
-          <Button variant="text" className="text-white hover:text-gray-200">Nuestros agricultores</Button>
-        </div>
-
-          <h3 className="text-4xl font-bold text-white mb-4">Adopta un árbol cítrico y sé parte de la agricultura sostenible.</h3>
-
-
+        <h3 className="text-4xl font-bold text-white mb-4">
+          Adopta un árbol cítrico y sé parte de la agricultura sostenible.
+        </h3>
       </div>
-
-
-
-
     </section>
   );
 };
 
-export default Arboles;
+export default Arboles;
diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
@@ -1,25 +1,24 @@
 .banner {
-    position: relative;
-    width: 100%;
-    height: 400px;
-    background: url('/Banner/sections.jpg') no-repeat center center;
-    background-size: cover;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 80px;
-    margin-top: 150px;
-  }
-
-  .banner-text {
-    text-align: center;
-    color: white;
-  }
-
-  .banner h1 {
-    font-size: 36px;
-    font-weight: bold;
-    line-height: 1.5; 
-    margin: 0;
-  }
-
+  position: relative;
+  width: 100%;
+  height: 400px;
+  background: url('/Banner/sections.jpg') no-repeat center center;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 80px;
+  margin-top: 50px;
+}
+
+.banner-text {
+  text-align: center;
+  color: white;
+}
+
+.banner h1 {
+  font-size: 36px;
+  font-weight: bold;
+  line-height: 1.5;
+  margin: 0;
+}
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import './Banner.css'; 
+import './Banner.css';
 
 const Banner: React.FC = () => {
-    return (
-        <section className="banner">
-          <div className="banner-text">
-            <h1>
-              Adopta un árbol<br />
-              cítrico y sé parte<br />
-              de la agricultura<br />
-              sostenible.
-            </h1>
-          </div>
+  return (
+    <section className="banner">
+      <div className="banner-text">
+        <h1>
+          Adopta un árbol
+          <br />
+          cítrico y sé parte
+          <br />
+          de la agricultura
+          <br />
+          sostenible.
+        </h1>
+      </div>
     </section>
   );
 };

diff --git a/src/components/Beneficios/Beneficios.css b/src/components/Beneficios/Beneficios.css
@@ -1,11 +1,10 @@
 /*importacion de google fonts - como esta el diseño en figma*/
 @import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
 
-
 /*PROPIEDADES de la fuente*/
-.fuentePersonalizada{
-  font-family: "Covered By Your Grace", cursive;
+.fuentePersonalizada {
+  font-family: 'Covered By Your Grace', cursive;
   font-weight: 400;
   font-style: normal;
-  font-size:32px;
-}
+  font-size: 32px;
+}