style: have different Houstons for newsletter (#971)

withastro · Jan 26, 2024 · 1f2caa8 · 1f2caa8
1 parent ab620dc
commit 1f2caa8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/src/pages/_assets/houston_love.webp b/src/pages/_assets/houston_love.webp
diff --git a/src/pages/newsletter/confirm.astro b/src/pages/newsletter/confirm.astro
@@ -1,11 +1,18 @@
 ---
 import Layout from "~/layouts/Standalone.astro"
-import Houston from "../_assets/houston_peep.webp"
+import Houston from "../_assets/houston-happy.webp"
 ---
 
 <Layout title="Signup">
 	<div class="bg-grid absolute inset-0 z-grid"></div>
 	<div class="mx-8 my-auto flex h-full flex-col items-center justify-center">
+		<img
+			src={Houston.src}
+			width={Houston.width}
+			height={Houston.height}
+			class="mb-12 h-24 w-auto md:h-28 lg:h-32"
+			alt=""
+		/>
 		<h1 class="font-obviously text-3xl font-semibold text-white md:text-6xl">Confirmed!</h1>
 		<p class="my-6 text-astro-gray-200 md:body-large lg:text-3xl">
 			Thanks for signing up to The Astro Newsletter! You'll hear from us soon.
@@ -19,14 +26,4 @@ import Houston from "../_assets/houston_peep.webp"
 			>
 		</div>
 	</div>
-
-	<div class="flex w-full justify-center overflow-clip">
-		<img
-			src={Houston.src}
-			width={Houston.width}
-			height={Houston.height}
-			class="absolute bottom-0 h-24 w-auto md:h-28 lg:h-32"
-			alt=""
-		/>
-	</div>
 </Layout>
diff --git a/src/pages/newsletter/success.astro b/src/pages/newsletter/success.astro
@@ -1,24 +1,21 @@
 ---
 import Layout from "~/layouts/Standalone.astro"
-import Houston from "../_assets/houston_peep.webp"
+import Houston from "../_assets/houston_love.webp"
 ---
 
 <Layout title="Signup">
 	<div class="bg-grid absolute inset-0 z-grid"></div>
 	<div class="mx-8 my-auto flex h-full flex-col items-center justify-center">
-		<h1 class="font-obviously text-3xl font-semibold text-white md:text-6xl">Almost there!</h1>
-		<p class="my-6 text-astro-gray-200 md:body-large lg:text-3xl">
-			Check your inbox to confirm the subscription.
-		</p>
-	</div>
-
-	<div class="flex w-full justify-center overflow-clip">
 		<img
 			src={Houston.src}
 			width={Houston.width}
 			height={Houston.height}
-			class="absolute bottom-0 h-24 w-auto md:h-28 lg:h-32"
+			class="mb-12 h-24 w-auto md:h-28 lg:h-32"
 			alt=""
 		/>
+		<h1 class="font-obviously text-3xl font-semibold text-white md:text-6xl">Almost there!</h1>
+		<p class="my-6 text-astro-gray-200 md:body-large lg:text-3xl">
+			Check your inbox to confirm the subscription.
+		</p>
 	</div>
 </Layout>