style: desabilita propiedad de display de index.css

src/components/Bienvenido/Bienvenido.css

@@ -1,3 +1,4 @@
+/*IMPORTACIONES DE TIPOGRAFIA*/
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
 
@@ -12,8 +13,8 @@ font-size: 24px;
 
 
 .tipografiaPersonalizada{
-    text-align: start;
-    font-family: "Lato", sans-serif;
+  text-align: start;
+  font-family: "Lato", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #cecaca;

src/components/Bienvenido/Bienvenido.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import Button from '@mui/material/Button'; // Para usar el botón con MUI
 import farmerImage from '../../assets/farmer.jpg'; // es la ruta de la img principal de fondo
-import tituloPrincipal from '../../assets/titulo.png' //img del titulo con diseño en formato 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="relative bg-cover bg-center h-screen flex items-center justify-center md:mb-20" style={{ backgroundImage: `url(${farmerImage})` }}>
+        <section className="relative bg-cover bg-center h-screen flex items-center justify-center md:mb-20" style={{ backgroundImage: `url(${farmerImage})` }}>
       <div className="absolute inset-0 bg-black opacity-40"></div> {/* Filtro oscuro sobre la imagen */}
 
       <div className="relative z-10 text-center text-white px-4 ">
 
 
         <p className="text-lg mb-5 flex">BIENVENIDO A ADOPTREE</p>
-        <img src={tituloPrincipal} alt="titutlo" />
+        <img src={tituloPrincipal} alt="titutlo" /> {/* IMG de la portada ya que es una tipografia con dibujo */}
 
         <div className=' w-1/2 flex flex-col'>
         <p className="text-lg md:text-xl mb-6  anchoPersonalizado tipografiaPersonalizada">
@@ -33,7 +33,7 @@ const Bienvenido: React.FC = () => {
 
       </div>
 
-        {/*CARDS*/}
+        {/*SECCION DE CARDS*/}
         <div className="absolute bottom-[-80px] 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">
                     {/* Primera tarjeta */}
@@ -54,15 +54,9 @@ const Bienvenido: React.FC = () => {
                         <h3 className="text-xl font-semibold mb-4">Naranjos en adopción</h3>
                         <img src={disfrutaImage} alt="Naranjos en adopción" className="h-24 w-24 mx-auto rounded-full mb-4" />
                     </div>
-
-
-
                 </div>
             </div>
-
-
     </section>
-
   );
 };
 

src/index.css

@@ -14,7 +14,7 @@ a {
 
 body {
   margin: 0;
-  display: flex;
+  //display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;