From 42efa2424b26e0d427e3f983ee7677dbaa6d2a3e Mon Sep 17 00:00:00 2001
From: hugojaimeb <hugojaime.104@gmail.com>
Date: Sun, 10 Mar 2024 19:30:50 -0500
Subject: [PATCH 1/2] Fix-commit-2

---
 src/components/HeroLogo.astro |  2 ++
 src/sections/Hero.astro       | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/HeroLogo.astro b/src/components/HeroLogo.astro
index 8cda961d3..ea9e32a24 100644
--- a/src/components/HeroLogo.astro
+++ b/src/components/HeroLogo.astro
@@ -12,12 +12,14 @@
 			fill="currentColor"
 			stroke="currentColor"
 			d="M363.933 2.427h13.752c-.194 22.247-.391 44.491-.585 66.738 3.93-.33 7.865-.584 11.804-.759-.015 3.17-.031 6.337-.044 9.507a260.26 260.26 0 0 0-25.908 2.608zm27.126 75.386c5.26-25.343 10.382-50.319 15.354-75.383h14.68c5.195 25.3 10.53 50.99 15.956 77.529a262.327 262.327 0 0 0-13.035-1.44 19513.85 19513.85 0 0 1-10.089-58.489 7672.546 7672.546 0 0 1-9.582 57.565"
+			class="animate-fade-in-up"
 		>
 		</path>
 		<path
 			fill="currentColor"
 			stroke="currentColor"
 			d="M188.451 584.028V415.951c9.227-.036 18.453-.08 27.68-.116 9.563-.035 17.024 1.67 22.347 4.955 5.332 3.286 9.094 8.276 11.303 14.98 2.2 6.714 3.247 15.203 3.14 25.583-.177 17.875-.354 35.741-.541 53.617-.106 10.629-1.33 19.686-3.646 27.34-2.324 7.646-6.104 13.951-11.329 19.012-5.225 5.062-12.34 9.111-21.301 12.237a557 557 0 0 0-27.662 10.46zm20.831-28.362c2.12-.675 4.249-1.332 6.379-1.98 4.826-1.475 8.295-3.632 10.406-6.501 2.111-2.868 3.416-6.526 3.93-10.993.506-4.466.79-9.839.843-16.143l.452-58.554c.045-6.171-.248-11.117-.896-14.856-.647-3.738-2.022-6.438-4.125-8.116-2.111-1.669-5.527-2.424-10.247-2.193-2.067.098-4.143.195-6.21.302-.177 39.675-.346 79.359-.523 119.034zm49.779 4.848c.505-48.271 1.011-96.55 1.525-144.821 16.431-.044 32.861-.089 49.291-.115l-.186 17.262c-9.29.213-18.576.462-27.857.746l-.452 40.199c7.301-.675 14.611-1.288 21.93-1.838l-.186 17.227a950.984 950.984 0 0 0-21.948 2.388c-.178 15.416-.346 30.822-.515 46.238a634.993 634.993 0 0 1 28.256-4.751c-.062 5.639-.115 11.277-.177 16.925a557 557 0 0 0-49.681 10.558zm56.956-11.704c.452-44.416.905-88.824 1.348-133.241 7.151-.009 14.31-.018 21.461-.036-.32 37.997-.63 75.994-.95 113.982 9.59-.944 19.2-1.667 28.824-2.167l-.08 16.117a558 558 0 0 0-50.612 5.345zm102.76-6.02a546.992 546.992 0 0 0-20.538-.311c7.994-42.348 15.836-84.5 23.528-126.972 7.638 0 15.268 0 22.906.017 8.109 42.943 16.342 86.525 24.672 131.262a568.993 568.993 0 0 0-20.156-2.149c-5.287-33.441-10.513-66.474-15.676-99.259a17809.8 17809.8 0 0 1-14.727 97.412zm57.985 4.973c-.426-44.071-.852-88.132-1.269-132.203 4.977 0 9.954.018 14.931.027 9.794 25.582 19.633 52.071 29.454 79.9-.302-26.613-.594-53.225-.896-79.838 5.9.018 11.79.026 17.69.044.516 48.04 1.028 96.08 1.535 144.12a564.02 564.02 0 0 0-14.168-3.419c-9.883-30.209-19.802-58.873-29.694-86.454.293 26.897.577 53.794.87 80.691a561.983 561.983 0 0 0-18.453-2.868m101.9 26.124c-8.127-2.779-14.665-6.837-19.562-12.192-4.906-5.354-8.455-11.846-10.638-19.598-2.183-7.752-3.326-16.481-3.433-26.337l-.559-54.62c-.106-9.848.879-18.212 2.928-25.201 2.049-6.988 5.527-12.343 10.415-16.117 4.888-3.765 11.498-5.727 19.811-5.736 8.507 0 15.206 2.007 20.094 6.234 4.879 4.217 8.419 10.424 10.584 18.585 2.173 8.152 3.247 17.999 3.247 29.339v63.082c0 11.206-1.065 20.619-3.159 28.06-2.093 7.451-5.5 12.459-10.211 15.061-4.72 2.619-11.205 2.291-19.517-.56m-.134-20.983c3.505 1.039 6.078.799 7.719-.79 1.641-1.59 2.741-4.138 3.291-7.655.55-3.516.816-7.459.799-11.81-.107-24.57-.222-49.141-.329-73.702-.017-4.476-.328-8.525-.922-12.121-.595-3.595-1.74-6.448-3.434-8.56-1.694-2.114-4.329-3.233-7.895-3.384-3.38-.15-5.918.738-7.639 2.611-1.721 1.873-2.857 4.484-3.407 7.832-.55 3.348-.807 7.149-.771 11.402.186 23.354.381 46.708.567 70.07.036 4.131.329 8.018.879 11.66.55 3.64 1.694 6.704 3.424 9.19 1.73 2.493 4.303 4.246 7.718 5.257M48.803 425.212C33.163 323.299 17.069 214.752 0 98.009h41.156c10.734 78.16 21.14 152.91 31.37 224.713 11.01-77.797 22.276-152.565 33.668-224.713h42.095c-18.532 97.394-36.977 199.947-54.933 309.24a887.007 887.007 0 0 0-44.553 17.954zm102.583-37.259 4.418-289.944h106.823l-.452 34.08c-20.157.427-40.304.942-60.425 1.564-.417 26.621-.825 53.234-1.242 79.856 15.862-1.563 31.76-2.94 47.685-4.129-.16 11.348-.319 22.687-.47 34.036a1558.978 1558.978 0 0 0-47.756 5.39c-.479 30.618-.949 61.235-1.429 91.844a989.994 989.994 0 0 1 61.676-10.7c-.142 11.135-.293 22.279-.435 33.414a881.001 881.001 0 0 0-108.384 24.589zm116.706-25.894 3.327-264.05h46.496c-.657 75.22-1.322 150.433-1.978 225.654a1014.998 1014.998 0 0 1 39.913-2.566c-.053 10.717-.106 21.427-.151 32.144a880.001 880.001 0 0 0-87.598 8.818zm139.959-9.892a882.002 882.002 0 0 0-44.917.737c17.787-85.69 35.105-170.137 51.917-254.886h49.636c17.566 85.548 35.602 172.41 53.949 262.141a886.994 886.994 0 0 0-44.074-4.866c-11.587-66.688-22.969-132.452-34.112-197.763-10.566 65.072-21.363 129.788-32.399 194.637m118.454 9.093-3.22-263.251h49.849c20.733 0 36.968 3.037 48.688 9.457 11.728 6.393 20.147 16.41 25.266 30.014 5.119 13.595 7.834 30.91 8.145 51.636l1.596 107.01c.32 21.223-1.872 38.326-6.565 51.059-4.693 12.761-12.677 20.859-24.015 24.562-11.338 3.73-27.023 2.975-47.162-1.225a885 885 0 0 0-52.6-9.271zm46.78-26.329c1.34.24 2.679.48 4.028.72 10.797 1.953 18.471 1.482 23.048-1.705 4.569-3.179 7.32-8.64 8.251-16.366.932-7.734 1.304-17.369 1.127-28.886-.559-35.697-1.118-71.385-1.668-107.082-.178-11.286-1.056-20.432-2.626-27.394-1.579-6.97-4.702-12.139-9.36-15.495-4.666-3.357-12.136-5.16-22.409-5.426-1.118-.026-2.236-.062-3.354-.088l2.981 201.731zm122.881 68.499a879 879 0 0 0-43.196-14.19c15.428-92.012 30.803-188.572 46.496-291.24h49.637A10360.005 10360.005 0 0 1 800 448.238a874.997 874.997 0 0 0-40.952-19.571 14400.99 14400.99 0 0 0-33.712-256.6c-9.901 80.131-19.58 157.092-29.179 231.363zm-178.648 2.46c-2.608 0-4.933-.862-6.955-2.593a976.906 976.906 0 0 1-5.802-4.982c-1.837-1.589-3.771-2.388-5.802-2.388-2.032 0-3.265.728-3.984 2.175-.727 1.457-1.091 3.561-1.091 6.332h-10.149c0-4.982.364-9.44 1.091-13.382.728-3.943 2.005-7.06 3.841-9.342 1.836-2.282 4.303-3.428 7.391-3.428 2.413 0 4.586.8 6.52 2.389a669.125 669.125 0 0 1 5.722 4.769c1.881 1.589 3.842 2.388 5.873 2.388 1.642 0 2.831-.692 3.549-2.078.728-1.385 1.091-3.454 1.091-6.224h9.573c0 4.289-.24 8.435-.728 12.449-.488 4.014-1.526 7.335-3.114 9.963-1.595 2.629-3.94 3.943-7.035 3.943zM406.29 587.948l7.193 3.538c2.103 1.03 3.312 3.31 3.032 5.632l-4.599 36.65-11.018-41.99-17.591-2.395 1.538 4.966-26.617 7.953 6.339 3.365c2.551 1.361 4.158 4.025 4.135 6.902l-.11 45.003a23.68 23.68 0 0 1-6.672 16.382l-2.912 3.016 31.365-9.472-2.083.124c-2.109.151-3.894-1.524-3.912-3.638l-.486-55.658a3.19 3.19 0 0 1 1.797-2.917l2.244-1.086 18.129 58.541 21.824-6.505c-1.812-.138-3.067-.925-3.889-1.755-.966-.979-1.382-2.526-1.148-3.889l10.076-57.079a26.1 26.1 0 0 1 3.958-9.916l4.119-6.233-34.703 10.452z"
+			class="animate-fade-in-up"
 		>
 		</path>
 	</symbol>
diff --git a/src/sections/Hero.astro b/src/sections/Hero.astro
index 5047d1902..86584f0c3 100644
--- a/src/sections/Hero.astro
+++ b/src/sections/Hero.astro
@@ -2,20 +2,33 @@
 import HeroLogo from "@/components/HeroLogo.astro"
 ---
 
+<script>
+	const twitchLink = document.querySelector("a[href='https://www.twitch.tv/ibai']")
+
+	setTimeout(() => {
+		if (twitchLink) {
+			twitchLink.classList.remove("opacity-0", "invisible") // Adjust this line if you're using 'hidden'
+		}
+		if (twitchLink) {
+			twitchLink.classList.add("opacity-100", "visible") // Add any classes to make it visible or animate
+		}
+	}, 5)
+</script>
 <section class="flex flex-col place-items-center gap-4 lg:gap-9">
 	<h1 class="sr-only bg-black/30">Presentación de la Velada del Año IV</h1>
 	<a
-		class="-rotate-6 font-atomic text-2xl text-white underline-offset-8 transition hover:scale-110 hover:underline md:text-4xl"
+		class="invisible -rotate-6 animate-fade-in font-atomic text-2xl text-white underline-offset-8 opacity-0 transition duration-1000 hover:scale-110 hover:underline md:text-4xl"
 		href="https://www.twitch.tv/ibai"
 		target="_blank"
 		rel="noopener"
 		title="Enlace al canal de Twitch de Ibai Llanos"
 		aria-label="Enlace al canal de Twitch de Ibai Llanos"
-		>twitch.tv/ibai
+	>
+		twitch.tv/ibai
 	</a>
 	<div class="relative">
 		<img
-			class="absolute inset-0 -z-10 m-auto block h-auto w-full max-w-[400px] scale-[135%] md:scale-[175%] select-none"
+			class="absolute inset-0 -z-10 m-auto block h-auto w-full max-w-[400px] scale-[135%] animate-pulse select-none md:scale-[175%]"
 			src="/img/drawn-x-logo.webp"
 			alt="Logo dibujado a mano de La Velada del Año IV"
 		/>

From ac1cd22a177614562d362cedce0e3e321340c15f Mon Sep 17 00:00:00 2001
From: hugojaimeb <hugojaime.104@gmail.com>
Date: Sun, 10 Mar 2024 19:31:50 -0500
Subject: [PATCH 2/2] new commit before submit PR

---
 src/pages/404.astro                | 14 ++++----
 src/sections/SelectYourBoxer.astro | 52 ++++++++++++++++++------------
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index 2e2309556..572093347 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -8,12 +8,12 @@ import Footer from "@/sections/Footer.astro"
 	description="Web Oficial de La Velada del Año IV, evento de boxeo entre streamers y creadores de contenido, organizado por Ibai Llanos"
 	title="La Velada del Año 4 - Página no encontrada"
 >
-   <main>
-	   <Error
-		   error="404"
-		   message="Página no encontrada"
-		   contextMessage="¡Hola! Lo sentimos, pero no pudimos encontrar lo que buscabas. Verifica que la dirección URL sea correcta."
-	   />
-   </main>
+	<main>
+		<Error
+			error="404"
+			message="Página no encontrada"
+			contextMessage="¡Hola! Lo sentimos, pero no pudimos encontrar lo que buscabas. Verifica que la dirección URL sea correcta."
+		/>
+	</main>
 	<Footer />
 </Layout>
diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index a78591099..4878dccbd 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -8,6 +8,8 @@ const listOfBoxers = BOXERS.map((boxer) => {
 	const countryName = COUNTRIES[country]?.name || ""
 	return { ...boxer, countryName }
 })
+
+const baseUrl = "#"
 ---
 
 <section class="my-40">
@@ -24,12 +26,16 @@ const listOfBoxers = BOXERS.map((boxer) => {
 				class="relative flex w-full flex-col items-center justify-center bg-center bg-no-repeat"
 				style="background-image: url('/img/effects/boxer-background.png'); background-size: 75%;"
 			>
-				<img
-					class="boxer-photo h-[600px] w-[480px] object-contain"
-					alt="Fotografía de El Mariana"
-					src="/img/boxers/el-mariana-big.webp"
-					style="filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));"
-				/>
+				<picture class="boxer-photo">
+					<source srcset="/img/boxers/el-mariana-big.webp" type="image/webp" />
+					<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
+					<img
+						class="h-[800px] w-[480px] object-contain"
+						alt="Fotografía de El Mariana"
+						src="/img/boxers/el-mariana-big.avif"
+						style="filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));"
+					/>
+				</picture>
 				<img
 					class="boxer-title absolute bottom-14 h-auto w-[480px]"
 					alt="El Mariana"
@@ -47,7 +53,7 @@ const listOfBoxers = BOXERS.map((boxer) => {
 					<h4 class="text-lg">País</h4>
 					<p class="text-lg font-bold">México</p>
 					<a
-						href="#"
+						href={baseUrl}
 						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
 					>
 						Ver combate
@@ -58,7 +64,7 @@ const listOfBoxers = BOXERS.map((boxer) => {
 					<h4 class="text-lg">Peso</h4>
 					<p class="text-lg font-bold">61 kg</p>
 					<a
-						href="#"
+						href={baseUrl}
 						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
 					>
 						Ver perfil
@@ -72,18 +78,22 @@ const listOfBoxers = BOXERS.map((boxer) => {
 					<a
 						class="boxer-link group relative flex h-20 items-center justify-center"
 						title={`Visita la página del boxeador ${name}`}
-						href={"#"}
+						href={baseUrl}
 						data-id={id}
 						data-name={name}
 						data-country={country}
 						data-country-name={countryName}
 					>
-						<img
-							loading="lazy"
-							src={`/img/boxers/${id}-small.png`}
-							alt={`Foto en pequeño del boxeador ${name}`}
-							class="boxer-image -mt-20 w-full object-contain px-2 transition group-hover:scale-110"
-						/>
+						<picture>
+							<source srcset={`/img/boxers/${id}-small.avif`} type="image/avif" />
+							<source srcset={`/img/boxers/${id}-small.webp`} type="image/webp" />
+							<img
+								loading="lazy"
+								src={`/img/boxers/${id}-small.avif`}
+								alt={`Foto en pequeño del boxeador ${name}`}
+								class="boxer-image -mt-20 w-full object-contain px-2 transition group-hover:scale-110"
+							/>
+						</picture>
 					</a>
 				))
 			}
@@ -94,22 +104,24 @@ const listOfBoxers = BOXERS.map((boxer) => {
 <script>
 	const boxerLinks = document.querySelectorAll(".boxer-link")
 	const boxerTitle = document.querySelector(".boxer-title") as HTMLImageElement
-	const boxerPhoto = document.querySelector(".boxer-photo") as HTMLImageElement
+	const boxerPhoto = document.querySelector(".boxer-photo") as HTMLPictureElement
 	const boxerCountry = document.querySelector(".boxer-flag") as HTMLImageElement
 
 	boxerLinks.forEach((link) => {
 		link.addEventListener("mouseenter", (event) => {
 			const { id, name, country, countryName } = (event.currentTarget as HTMLElement)?.dataset
 
-			const boxerSrc = `/img/boxers/${id}-big.webp`
+			const boxerSrc = `/img/boxers/${id}-big`
 			const titleSrc = `/img/boxers/${id}-title.webp`
 
-			boxerPhoto.src = boxerSrc
+			boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
+			boxerPhoto.getElementsByTagName("source")[1].srcset = `${boxerSrc}.webp`
+			boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.avif`
 			boxerTitle.src = titleSrc
 			boxerCountry.src = `/img/flags/${country}.webp`
 
-			boxerPhoto.alt = `Fotografía de ${name}`
-			boxerTitle.alt = name!
+			boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
+			boxerTitle.alt = name ?? ""
 			boxerCountry.alt = `Bandera de ${countryName}`
 		})
 	})