Revert "Merge pull request #200 from igrowker/responsive"

This reverts commit c83373d, reversing changes made to 19a6eb7.
IgrowkerTraining · Oct 1, 2024 · ff7ece7 · ff7ece7 · emacuello · Oct 1, 2024
1 parent c83373d
commit ff7ece7
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 58 deletions.
diff --git a/src/components/Agriculture/Agriculture.tsx b/src/components/Agriculture/Agriculture.tsx
@@ -1,16 +1,19 @@
 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 (
-    <section className="flex px-[200px] mt-[220px] mb-[6em] max-md:mt-4 max-lg:flex-col max-lg:items-center 4xl:justify-center">
-      <section className="w-[50%] 4xl:w-[30%] mr-4 flex flex-col justify-center items-center max-md:w-[20em]">
+    <section className="flex px-[200px] mt-[220px] mb-[6em] max-lg:flex-col max-lg:items-center 4xl:justify-center">
+      <section className="w-[50%] 4xl:w-[30%] mr-4 flex flex-col justify-center items-center">
         <img className="w-[500px]" src={imgNaranjas} />
       </section>
-      <section className="w-[50%] max-md:w-[20em] 4xl:w-[30%] max-lg:w-[100%] max-lg:ml-16 max-lg:mt-16">
+      <section className="w-[50%] 4xl:w-[30%] max-lg:w-[100%] max-lg:ml-16 max-lg:mt-16">
         <span className="text-[#FF9900] text-[20px] Typography">
           Crowdfarming
         </span>
@@ -28,7 +31,7 @@ const Agriculture: React.FC = () => {
           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] max-md:w-[10em]">
+          <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

diff --git a/src/components/Arboles/Arboles.css b/src/components/Arboles/Arboles.css
@@ -14,15 +14,3 @@
   font-family: 'Covered By Your Grace', cursive;
   font-size: 32px;
 }
-
-.responsiveTree {
-  padding-left: 10em;
-  padding-right: 10em;
-}
-
-@media screen and (max-width: 1024px) {
-  .responsiveTree {
-    padding-left: 5em;
-    padding-right: 5em;
-  }
-}
diff --git a/src/components/Arboles/Arboles.tsx b/src/components/Arboles/Arboles.tsx
@@ -1,5 +1,5 @@
-import { Spa, LocalFlorist, Yard } from '@mui/icons-material';
-import naranjosImg from '../../assets/naranjos.jpg';
+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';
@@ -34,7 +34,7 @@ const arboles = [
 
 const Arboles: React.FC = () => {
   return (
-    <section className="bg-white responsiveTree">
+    <section className="py-14 bg-white px-[200px]">
       <div className="container mx-auto">
         {/* HEADER o título */}
         <div className="text-center mb-8">
@@ -43,11 +43,11 @@ const Arboles: React.FC = () => {
         </div>
 
         {/* Cards de árboles */}
-        <div className="flex justify-center gap-6 flex-wrap">
+        <div className="flex justify-center gap-6">
           {arboles.map((arbol) => (
             <div
               key={arbol.id}
-              className="bg-white rounded-xl overflow-hidden shadow-lg max-w-xs md:h-96 md:w-[16rem] responsiveCard"
+              className="bg-white rounded-xl overflow-hidden shadow-lg max-w-xs md:h-96 md:w-[16rem]"
             >
               {/* Imagen */}
               <img

diff --git a/src/components/Bienvenido/Bienvenido.css b/src/components/Bienvenido/Bienvenido.css
@@ -6,12 +6,6 @@
   width: 150%;
 }
 
-@media screen and (max-width: 768px) {
-  .anchoPersonalizado {
-    width: 80vw;
-  }
-}
-
 .tipografiaCards {
   font-family: 'Covered By Your Grace', cursive;
   font-size: 24px;
@@ -24,15 +18,3 @@
   font-style: normal;
   color: #cecaca;
 }
-
-.responsiveImg {
-  width: 96px;
-  height: 96px;
-}
-
-@media screen and (max-width: 827px) {
-  .responsiveImg {
-    width: 70px;
-    height: 70px;
-  }
-}
diff --git a/src/components/Bienvenido/Bienvenido.tsx b/src/components/Bienvenido/Bienvenido.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
+// import farmerImage from '../../assets/farmer.jpg'; // es la ruta de la img principal de fondo
 import video from '../../assets/AdobeStock_812746937.mov';
-import tituloPrincipal from '../../assets/titulo.png';
-import adoptionImage from '../../assets/adopcion.jpg';
-import compraImage from '../../assets/compra.jpg';
-import disfrutaImage from '../../assets/disfruta.jpg';
+import tituloPrincipal from '../../assets/titulo.png'; //img del titulo Portada con diseño en formato png
+import adoptionImage from '../../assets/adopcion.jpg'; //img card 1
+import compraImage from '../../assets/compra.jpg'; //img card 2
+import disfrutaImage from '../../assets/disfruta.jpg'; //img card 3
 
-import './Bienvenido.css'; //
+import './Bienvenido.css'; //estilos personalizados para el componente
 
 const Bienvenido: React.FC = () => {
   return (
-    <section className=" bg-cover bg-center h-screen md:mb-20 p-[220px] max-md:pl-[2em] max-md:pt-[8em] 4xl:p-[440px]">
-
+    <section className=" bg-cover bg-center h-screen md:mb-20 p-[220px] 4xl:p-[440px]">
       {/* Video de fondo */}
       <video
         autoPlay
@@ -26,15 +26,15 @@ const Bienvenido: React.FC = () => {
       <div className="absolute inset-0 bg-black opacity-40"></div>
 
       {/* Contenido */}
-      <div className="relative z-10 text-center text-white max-md:w-[80vw]">
+      <div className="relative z-10 text-center text-white">
         <p className="text-lg mb-5 flex">BIENVENIDO A ADOPTREE</p>
         <img
-          className="w-[400px] max-md:w-[15em] 4xl:w-[700px]"
+          className="w-[400px] 4xl:w-[700px]"
           src={tituloPrincipal}
           alt="titulo"
         />
         <div className="w-1/2 flex flex-col">
-          <p className="text-lg 4xl:text-[30px] md:text-[18px] mb-6 anchoPersonalizado tipografiaPersonalizada 4xl:w-[700px] ">
+          <p className="text-lg 4xl:text-[30px] md:text-[18px] mb-6 anchoPersonalizado tipografiaPersonalizada w-[500px] 4xl:w-[700px]">
             Descubre cómo puedes adoptar un árbol cítrico, apoyar a productores
             locales y recibir fruta fresca en casa.
             <br />
@@ -48,10 +48,9 @@ const Bienvenido: React.FC = () => {
       </div>
 
       {/*SECCIÓN DE CARDS*/}
-      <div className="absolute bottom-[-12em] left-0 right-0 hidden md:flex justify-center z-20">
+      <div className="absolute bottom-[-120px] left-0 right-0 hidden md:flex justify-center z-20">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-4 md:px-0">
-
-          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px] responsiveCards">
+          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px]">
             <p className="text-orange-400 font-medium tipografiaCards 4xl:text-[35px]">
               Adopta
             </p>
@@ -61,11 +60,11 @@ const Bienvenido: React.FC = () => {
             <img
               src={adoptionImage}
               alt="Naranjos en adopción"
-              className="mx-auto rounded-full mb-4 responsiveImg"
+              className="h-24 w-24 mx-auto rounded-full mb-4"
             />
           </div>
 
-          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px] responsiveCards">
+          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px]">
             <p className="text-orange-400 font-medium tipografiaCards 4xl:text-[35px]">
               Compra
             </p>
@@ -75,11 +74,11 @@ const Bienvenido: React.FC = () => {
             <img
               src={compraImage}
               alt="Naranjos en adopción"
-              className="mx-auto rounded-full mb-4 responsiveImg"
+              className="h-24 w-24 mx-auto rounded-full mb-4"
             />
           </div>
 
-          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px] responsiveCards">
+          <div className="bg-white shadow-lg rounded-lg p-6 text-center w-[250px] 4xl:w-[300px]">
             <p className="text-orange-400 font-medium tipografiaCards 4xl:text-[35px]">
               Disfruta
             </p>
@@ -89,7 +88,7 @@ const Bienvenido: React.FC = () => {
             <img
               src={disfrutaImage}
               alt="Naranjos en adopción"
-              className="mx-auto rounded-full mb-4 responsiveImg"
+              className="h-24 w-24 mx-auto rounded-full mb-4"
             />
           </div>
         </div>

diff --git a/src/components/Cards/Cards.tsx b/src/components/Cards/Cards.tsx
@@ -27,7 +27,7 @@ const Cards: React.FC = () => {
           Agricultura de otros productores
         </h2>
       </div>
-      <div className="flex justify-center items-center gap-6 flex-wrap">
+      <div className="flex justify-center items-center gap-6">
         {cards.map((card, index) => (
           <img
             className="w-[260px]"