Merge pull request #443 from midudev/fix-links-section-sizes

Section links - Hacer que se asemeje un poco más al figma y al resto de seccions
midudev · Mar 11, 2024 · 900ca7c · 900ca7c
2 parents 2ff292b + 318bfea
commit 900ca7c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 51 deletions.
diff --git a/src/components/ImageOverlay.astro b/src/components/ImageOverlay.astro
@@ -4,26 +4,23 @@ interface Props {
 	imgAlt: string
 	title: string
 	description: string
+	className?: string
 }
 ---
 
 <div
-	class="image-overlay relative mb-24 w-full flex-col sm:mt-28"
-	style="background: linear-gradient(180deg, #222222 0%, rgba(17, 17, 17, 0) 61.5%);"
+	class={`${Astro.props.className} relative flex h-full w-full flex-col items-center justify-center gap-5 px-8 sm:w-full md:px-20 lg:px-28`}
+	style="background: linear-gradient(180deg, transparent 0%, transparent 21%, #222222 20%, rgba(17, 17, 17, 0) 90%);"
 >
-	<div class="flex flex-col items-center justify-center pt-24 sm:w-full">
-		<div
-			class="image-container absolute left-1/2 top-0 flex h-56 w-56 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded-full"
-		>
-			<img
-				src={Astro.props.imgSrc}
-				alt={Astro.props.imgAlt}
-				class="max-h-full max-w-full select-none object-cover"
-			/>
-		</div>
-		<div class="content mt-1 text-center">
-			<h1 class="title mb-0.5 text-xl" style="color: var(--color-accent);">{Astro.props.title}</h1>
-			<p class="description text-xs text-gray-400">{Astro.props.description}</p>
-		</div>
+	<img
+		src={Astro.props.imgSrc}
+		alt={Astro.props.imgAlt}
+		class="h-auto w-full select-none object-cover"
+	/>
+	<div class="content mt-1 text-center">
+		<h1 class="title mb-0.5 text-xl font-semibold text-accent lg:text-3xl">
+			{Astro.props.title}
+		</h1>
+		<p class="description text-md text-neutral-300 lg:text-lg">{Astro.props.description}</p>
 	</div>
 </div>
diff --git a/src/sections/Boxing.astro b/src/sections/Boxing.astro
@@ -1,40 +1,48 @@
 ---
 import ImageOverlay from "../components/ImageOverlay.astro"
+
+const items = [
+	{
+		imgSrc: "/img/event/evento.webp",
+		imgAlt: "Evento",
+		title: "EL EVENTO",
+		description: "Lugar y agenda del evento",
+	},
+	{
+		imgSrc: "/img/event/entradas.webp",
+		imgAlt: "Entradas",
+		title: "ENTRADAS",
+		description: "A la venta próximamente",
+	},
+	{
+		imgSrc: "/img/event/combates.webp",
+		imgAlt: "Combates",
+		title: "COMBATES",
+		description: "Información de los contrincantes",
+	},
+	{
+		imgSrc: "/img/event/pronosticos.webp",
+		imgAlt: "Pronóstico",
+		title: "PRONÓSTICOS",
+		description: "Predicciones de victoria",
+	},
+]
 ---
 
-<section class="mt-32 md:mt-60">
-	<div class="flex flex-wrap justify-center">
-		<div class="w-full px-4 sm:w-1/2 lg:w-1/2">
-			<ImageOverlay
-				imgSrc="/img/event/evento.webp"
-				imgAlt="Evento"
-				title="EL EVENTO"
-				description="Lugar y agenda del evento"
-			/>
-		</div>
-		<div class="w-full px-4 sm:w-1/2 lg:w-1/2">
-			<ImageOverlay
-				imgSrc="/img/event/entradas.webp"
-				imgAlt="Entradas"
-				title="ENTRADAS"
-				description="A la venta próximamente"
-			/>
-		</div>
-		<div class="w-full px-4 sm:w-1/2 lg:w-1/2">
-			<ImageOverlay
-				imgSrc="/img/event/combates.webp"
-				imgAlt="Combates"
-				title="COMBATES"
-				description="Información de los contrincantes"
-			/>
-		</div>
-		<div class="w-full px-4 sm:w-1/2 lg:w-1/2">
-			<ImageOverlay
-				imgSrc="/img/event/pronosticos.webp"
-				imgAlt="Pronóstico"
-				title="PRONÓSTICOS"
-				description="Predicciones de victoria"
-			/>
-		</div>
+<section class="mt-32 px-4 md:mt-60">
+	<div
+		class="flex flex-col items-center justify-center gap-x-8 gap-y-20 md:grid md:grid-cols-2 md:gap-y-12"
+	>
+		{
+			items.map((item, index) => (
+				<ImageOverlay
+					className="max-w-md lg:max-w-none"
+					imgSrc={item.imgSrc}
+					imgAlt={item.imgAlt}
+					title={item.title}
+					description={item.description}
+				/>
+			))
+		}
 	</div>
 </section>
diff --git a/src/sections/PresentationVideo.astro b/src/sections/PresentationVideo.astro
@@ -4,7 +4,7 @@ import LiteYouTube from "@/components/LiteYouTube.astro"
 import Typography from "@/components/Typography.astro"
 ---
 
-<section class="overflow-hidden px-2 pb-32 pt-10 sm:pb-56 sm:pt-20 md:pb-96 md:pt-60">
+<section class="mt-10 overflow-hidden px-2 pb-32 pt-16 sm:pb-56 sm:pt-20 md:pb-96 md:pt-60">
 	<Typography as="h3" variant="h3" color="white" class:list={"text-center"}>
 		Presentación
 	</Typography>