chore: Add LaVeladaVideo section and ThanksMessage section

midudev · Jul 16, 2024 · 3f1b73b · 3f1b73b
1 parent e87f1a0
commit 3f1b73b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 20 deletions.
diff --git a/public/img/la-velada-cover.webp b/public/img/la-velada-cover.webp
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,13 +1,13 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import Countdown from "@/sections/Countdown.astro"
 
 import Hero from "@/sections/Hero.astro"
 import Info from "@/sections/Info.astro"
+import LaVeladaVideo from "@/sections/LaVeladaVideo.astro"
 import PresentationVideo from "@/sections/PresentationVideo.astro"
-import PrincipalDate from "@/sections/PrincipalDate.astro"
 import Promotions from "@/sections/Promotions.astro"
 import SelectYourBoxer from "@/sections/SelectYourBoxer.astro"
+import ThanksMessage from "@/sections/ThanksMessage.astro"
 ---
 
 <Layout
@@ -18,13 +18,14 @@ import SelectYourBoxer from "@/sections/SelectYourBoxer.astro"
 	<Hero />
 
 	<main>
-		<PrincipalDate />
+		<ThanksMessage />
+		<LaVeladaVideo />
 		<SelectYourBoxer />
 		<Promotions />
 
 		<PresentationVideo />
 		<Info />
 		<!-- <Boxing /> -->
-		<Countdown />
+		<!-- <Countdown /> -->
 	</main>
 </Layout>
diff --git a/src/sections/LaVeladaVideo.astro b/src/sections/LaVeladaVideo.astro
@@ -0,0 +1,31 @@
+---
+import DrawnXLogo from "@/components/DrawnXLogo.astro"
+import LiteYouTube from "@/components/LiteYouTube.astro"
+import Typography from "@/components/Typography.astro"
+---
+
+<section class="mt-24 overflow-hidden px-2 pb-48 pt-16 sm:pb-56 sm:pt-32 md:pb-72">
+	<Typography as="h3" variant="h3" color="white" class:list={"text-center"}>
+		Revive La Velada del Año IV
+	</Typography>
+
+	<Typography
+		as="p"
+		variant="body"
+		color="neutral"
+		class:list={"mx-auto mt-4 max-w-[250px] text-wrap text-center"}
+	>
+		¡Vuelve a disfrutar del evento desde el Santiago Bernabéu!
+	</Typography>
+
+	<div class="relative mt-8">
+		<DrawnXLogo
+			class:list={"absolute inset-0 -z-10 m-auto scale-125 select-none drop-shadow-[0_0_40px_rgba(213,255,0,1)]"}
+		/>
+		<LiteYouTube
+			videoId="XF4hcfWJBX8"
+			backgroundImage="/img/la-velada-cover.webp"
+			title="Reproducir presentación de La Velada del Año"
+		/>
+	</div>
+</section>
diff --git a/src/sections/PrincipalDate.astro b/src/sections/PrincipalDate.astro
@@ -35,23 +35,8 @@ import MapMarkerIcon from "@/icons/map-marker.astro"
 	</Typography>
 
 	<footer
-		class="scroll-horizontal items-top mt-6 flex flex-col flex-wrap justify-center gap-9 md:flex-row *:md:basis-1/3"
+		class="scroll-horizontal items-top mt-6 flex flex-col flex-wrap justify-center gap-9 md:flex-row"
 	>
-		<div class="flex flex-col items-center justify-center gap-y-2">
-			<Action
-				class="w-full text-base"
-				as="a"
-				href="https://www.entradas.com/artist/la-velada-del-ano/?affiliate=LVL"
-				target="_blank"
-				rel="noopener noreferrer"
-				aria-label="disponibles al a venta el 11 de abril a las 21:30 (CET), ahora mismo no están disponibles"
-			>
-				Comprar entradas
-			</Action>
-			<Typography as="span" variant="medium" color="primary" class:list={"text-center"}>
-				¡Últimas entradas 🔥!
-			</Typography>
-		</div>
 		<div>
 			<Action
 				class="w-full text-base"

diff --git a/src/sections/ThanksMessage.astro b/src/sections/ThanksMessage.astro
@@ -0,0 +1,15 @@
+---
+import Typography from "@/components/Typography.astro"
+---
+
+<section class="mt-52 overflow-hidden px-2 pt-16 sm:pb-16 sm:pt-32 md:pt-32">
+	<Typography
+		as="h3"
+		variant="atomic-title"
+		color="primary"
+		class:list={"mb-10 -skew-y-6 text-center"}
+	>
+		<span class="text-white">¡GRACIAS a todos!</span><br />
+		<span class="mt-4 block leading-none">Récord de 3,8 millones<br />de espectadores</span>
+	</Typography>
+</section>