From 030bb68000dacdb6afae375466fdb23d19d024ef Mon Sep 17 00:00:00 2001
From: h4ckx0r <natanagoor@gmail.com>
Date: Tue, 15 Oct 2024 19:51:55 +0200
Subject: [PATCH] =?UTF-8?q?Cambio=20en=20las=20im=C3=A1genes=20para=20mejo?=
 =?UTF-8?q?rar=20el=20rendimiento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.astro | 47 ++++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 91e5e70..24d35d2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 // Component Imports
 import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
 import Navbar from "../components/Navbar.astro";
+import { Image } from "astro:assets";
 
 const animateOnScroll = `
   document.addEventListener('DOMContentLoaded', () => {
@@ -80,10 +81,14 @@ const animateOnScroll = `
 							</p>
 						</div>
 						<div class="col-md-6 animate-on-scroll">
-							<div
-								class=" text-white p-5 text-center"
-							>
-								<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid">
+							<div class="text-white p-5 text-center">
+								<Image
+									src="/imgs/17Objetivos.png"
+									alt=""
+									class="img-thumbnail .img-fluid"
+									width="730"
+									height="450"
+								/>
 							</div>
 						</div>
 					</div>
@@ -156,20 +161,21 @@ const animateOnScroll = `
 					</h2>
 					<div class="row g-4">
 						{
-						  [1, 2, 3, 4, 5, 6].map((num) => (
-							<div class="col-md-4 animate-on-scroll">
-							  <div class="bg-light p-4 text-center">
-								<img 
-								  src={`../../public/imgs/imgimp${num}.jpg`} 
-								  alt={`Imagen de impacto ${num}`} 
-								  class="img-fluid img-fit" 
-								/>
-
-							  </div>
-							</div>
-						  ))
+							[1, 2, 3, 4, 5, 6].map((num) => (
+								<div class="col-md-4 animate-on-scroll">
+									<div class="bg-light p-4 text-center">
+										<Image
+											src={`/imgs/imgimp${num}.jpg`}
+											alt={`Imagen de impacto ${num}`}
+											class="img-fluid img-fit"
+											width="10"
+											height="10"
+										/>
+									</div>
+								</div>
+							))
 						}
-					  </div>
+					</div>
 				</div>
 			</section>
 
@@ -193,7 +199,7 @@ const animateOnScroll = `
 								<div class="col-md-6 mb-4 animate-on-scroll">
 									<div class="card">
 										<div class="card-body">
-											<h5 class="card-title">
+											<h5 class="card-title" aria-label="Proyecto">
 												Proyecto {num}
 											</h5>
 											<p class="card-text">
@@ -265,7 +271,7 @@ const animateOnScroll = `
 <style is:global>
 	@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
 	@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
-	
+
 	h1,
 	h2,
 	h3,
@@ -300,11 +306,10 @@ const animateOnScroll = `
 		margin-right: 10px;
 	}
 
-	.img-fit{
+	.img-fit {
 		width: 100%;
 		height: 200px;
 		object-fit: cover;
 		border-radius: 8px;
 	}
-
 </style>