From 1488d43ac83b2c11e67218321d6b2e8b96b7b45b Mon Sep 17 00:00:00 2001
From: Erick Devv <111036821+ErickDevv@users.noreply.github.com>
Date: Sun, 17 Mar 2024 22:21:48 -0600
Subject: [PATCH] Fix Home Images

---
 src/components/Inicio.astro                   | 119 +++++++-------
 .../cssInicio/contenedorBienvenida.css        | 146 +++++++++---------
 2 files changed, 135 insertions(+), 130 deletions(-)

diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
index cbf5b2d..8717bb9 100644
--- a/src/components/Inicio.astro
+++ b/src/components/Inicio.astro
@@ -1,60 +1,67 @@
 ---
-import "./cssInicio/contenedorBienvenida.css"
-import "./cssInicio/fondo.css"
-import "./cssInicio/navInicio.css"
-import "./cssInicio/variables.css"
----	
-	
-	<section id="Inicio">
-		<div class="containerInicio">
-			<section class="filtroInicio">
-				<div class="menuInicio">
-					<img
-						src="/Inicio/ieeelogo1.png"
-						class="logoIEEE"
-						alt="Logo de IEEE"
-					/>
+import "./cssInicio/contenedorBienvenida.css";
+import "./cssInicio/fondo.css";
+import "./cssInicio/navInicio.css";
+import "./cssInicio/variables.css";
 
-					<button class="botonNav"><a href="#Inicio">Inicio</a></button>
-					<button class="botonNav"><a href="#Eventos">Eventos</a></button>
-					<button class="botonNav"><a href="#Soon">Próximamente</a></button>
-					<button class="botonNav"><a href="#Unete">Únete</a></button>
-					<button class="botonNav"><a href="#Faq">FAQ</a></button>
-					<div class="RedesyInicio">
-						<button class="botonNav">Redes</button>
-						<button class="irInicio">Inicio</button>
-					</div>
-				</div>
+import branchLogo from "/public/Inicio/ieeelogo1.png";
 
-				<div class="contenedorBienvenida">
-					<div class="textobienvenida">
-						<h1>Save time by building fast with Boldo</h1>
-						<p>
-							Lorem Ipsum es simplemente el texto de relleno de
-							las imprentas y archivos de texto. Lorem Ipsum ha
-							sido el texto de relleno estándar de las
-						</p>
-						<div class="divContactar">
-							<button class="Contactar1">Contactar</button>
-							<button class="Contactar2">Contactar</button>
-						</div>
-					</div>
-					<div class="imagenesbienvenida">
-						<img class="imgarriba" src="/Inicio/1.png" />
-						<div>
-							<img class="imgabajo" src="/Inicio/2.png" />
-							<img class="imgabajo" src="/Inicio/3.jpg" />
-						</div>
-					</div>
-				</div>
-				<div class="logotiposBienvenida">
-					<img src="/Inicio/csociety_logo.png" />
-					<img src="/Inicio/uaeh_logo_color.png" />
-					<img src="/Inicio/logoESTL.png" />
-					<img src="/Inicio/ieeelogo2.png" />
-				</div>
-			</section>
+import imageMosaic from "/public/Inicio/1.png";
+import imageMosaic2 from "/public/Inicio/2.png";
+import imageMosaic3 from "/public/Inicio/3.jpg";
 
-			<div class="esferaAzul ubicacionEsfera"></div>
-		</div>
-	</section>
+import ieeeLogo from "/public/Inicio/ieeelogo2.png";
+import csocietyLogo from "/public/Inicio/csociety_logo.png";
+import uaehLogo from "/public/Inicio/uaeh_logo_color.png";
+import estlLogo from "/public/Inicio/logoESTL.png";
+---
+
+<section id="Inicio">
+  <div class="containerInicio">
+    <section class="filtroInicio">
+      <div class="menuInicio">
+        <img src={branchLogo.src} class="logoIEEE" alt="Logo de IEEE" />
+
+        <button class="botonNav"><a href="#Inicio">Inicio</a></button>
+        <button class="botonNav"><a href="#Eventos">Eventos</a></button>
+        <button class="botonNav"><a href="#Soon">Próximamente</a></button>
+        <button class="botonNav"><a href="#Unete">Únete</a></button>
+        <button class="botonNav"><a href="#Faq">FAQ</a></button>
+        <div class="RedesyInicio">
+          <button class="botonNav">Redes</button>
+          <button class="irInicio">Inicio</button>
+        </div>
+      </div>
+
+      <div class="contenedorBienvenida">
+        <div class="textobienvenida">
+          <h1> lorem ipsum</h1>
+          <p>
+            Lorem Ipsum es simplemente el texto de relleno de las imprentas y
+            archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar
+            de las
+          </p>
+          <div class="divContactar">
+            <button class="Contactar1">Contactar</button>
+            <button class="Contactar2">Contactar</button>
+          </div>
+        </div>
+        <div class="imagenesbienvenida">
+          <img class="imgarriba" src={imageMosaic.src} />
+          <div>
+            <img class="imgabajo" src={imageMosaic2.src} />
+            <img class="imgabajo" src={imageMosaic3.src} />
+          </div>
+        </div>
+      </div>
+      <div class="logotiposBienvenida">
+        <img src={ieeeLogo.src} />
+        <img src={csocietyLogo.src} />
+        <img src={uaehLogo.src} />
+        <img src={estlLogo.src} />
+      </div>
+    </section>
+
+    <div class="esferaAzul ubicacionEsfera"></div>
+  </div>
+</section>
diff --git a/src/components/cssInicio/contenedorBienvenida.css b/src/components/cssInicio/contenedorBienvenida.css
index 737d825..d589a7e 100644
--- a/src/components/cssInicio/contenedorBienvenida.css
+++ b/src/components/cssInicio/contenedorBienvenida.css
@@ -1,123 +1,121 @@
-*
-{
-    border: 0;
-    margin: 0;
-    padding: 0;
-    scroll-behavior: smooth;
+* {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
 }
 .contenedorBienvenida {
-    
-    margin-top: 15vh;
-    display: flex;
-    flex-direction: row;
-    font-family: "Cousine", monospace;
+  margin-top: 15vh;
+  display: flex;
+  flex-direction: row;
+  font-family: "Cousine", monospace;
+}
+
+h1 {
+  margin: 10px;
 }
 
 .textobienvenida {
-    width: 45%;
-    padding: 35px;
-    padding-top: 13vh;
-    padding-left: 6vw;
-    color: black;
+  width: 45%;
+  padding: 35px;
+  padding-top: 13vh;
+  padding-left: 6vw;
+  color: black;
+  font-size: 1.4rem;
 }
 
 .textobienvenida p {
-    padding-left: 3px;
-    text-align: justify;
-    color: black;
+  padding-left: 3px;
+  text-align: justify;
+  color: black;
+  font-size: 1rem;
+  margin-bottom: 10px;
 }
 
 .imagenesbienvenida {
-    width: 55%;
+  width: 55%;
 }
 
 .imagenesbienvenida {
-    background-color: transparent;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-
 .logotiposBienvenida {
-    clear: both;
-    background-color: transparent;
+  
+  background-color: transparent;
 }
 
 .divContactar {
-    margin-left: 30px;
+  margin-left: 30px;
 }
 
-
-
 .Contactar1,
 .Contactar2 {
-    font-weight: bolder;
-    letter-spacing: 0.7px;
-    margin-right: 6px;
-    padding: 5px;
-    border: none;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-    border-radius: 16px;
-    padding-left: 20px;
-    padding-right: 20px;
+  font-weight: bolder;
+  letter-spacing: 0.7px;
+  margin-right: 6px;
+  padding: 5px;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  border-radius: 16px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .Contactar1 {
-    background-color: var(--azulfuerte);
-    color: white;
-    border: 2px solid var(--azulfuerte);
+  background-color: var(--azulfuerte);
+  color: white;
+  border: 2px solid var(--azulfuerte);
 }
 
 .Contactar2 {
-    background-color: white;
-    color: var(--azulfuerte);
-    border: 2px solid var(--azulfuerte);
+  background-color: white;
+  color: var(--azulfuerte);
+  border: 2px solid var(--azulfuerte);
 }
 
 .Contactar1:hover,
 .Contactar2:hover {
-    transform: translateY(-5px);
+  transform: translateY(-5px);
 }
 
 .imagenesbienvenida img {
-    height: 170px;
-    object-fit: cover;
-    border-radius: 4px;
-    margin: 9px;
+  height: 170px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin: 9px;
 }
 
-
 .imagenesbienvenida .imgarriba {
-    width: 490px;
-    position: relative;
+  width: 490px;
+  position: relative;
 }
 
 .imagenesbienvenida .imgabajo {
-    position: relative;
-    width: 230px;
+  position: relative;
+  width: 230px;
 }
 
-
-
 .logotiposBienvenida {
-    height: 90px;
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 8vh;
+  height: 90px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8vh;
 }
 
 .logotiposBienvenida img {
-    width: 100%;
-    height: 100%;
-    margin-left: 22px;
-}
-a
-{
-    text-decoration: none;
-    color: black;
-}
\ No newline at end of file
+  width: 250px;
+
+  margin-left: 22px;
+}
+a {
+  text-decoration: none;
+  color: black;
+}