feat: add ad/stream

src/components/AdTitleAndSubtitle.astro

@@ -14,7 +14,7 @@ interface Props {
 	.ad-title-and-subtitle {
 		display: flex;
 		flex-direction: column;
-		gap: 1.5rem;
+		gap: 7vh;
 	}
 
 	h1 {

src/components/Streamers.astro

@@ -0,0 +1,83 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+	link: string;
+	streamers: Streamer[];
+	time: string;
+}
+
+export interface Streamer {
+	name: string;
+	src: ImageMetadata;
+}
+---
+
+<div class="streamers">
+	<div class="streamers-list">
+		{
+			Astro.props.streamers.map(({ name, src }) => (
+				<div class="streamer">
+					<Image
+						alt=""
+						class="streamer-image"
+						src={src}
+						width={160}
+						height={160}
+					/>
+					{name}
+				</div>
+			))
+		}
+	</div>
+	<div class="info">
+		<div class="time">{Astro.props.time}</div>
+		<div class="link">{Astro.props.link}</div>
+	</div>
+</div>
+
+<style>
+	.streamers {
+		color: var(--colorOffWhite);
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		gap: 7.5rem;
+	}
+
+	.streamers-list {
+		align-items: center;
+		display: flex;
+		font-weight: var(--fontWeightSemibold);
+		justify-content: center;
+		font-size: 3.5rem;
+		gap: 5rem;
+	}
+
+	.streamer {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.streamer-image {
+		border-radius: 100%;
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.time {
+		font-weight: var(--fontWeightBold);
+		font-size: 5rem;
+	}
+
+	.link {
+		font-weight: var(--fontWeightSemibold);
+		font-size: 3.5rem;
+	}
+</style>

src/layouts/base.css

@@ -45,6 +45,7 @@
 		--fontWeightLight: 300;
 		--fontWeightBody: 300;
 		--fontWeightSemibold: 500;
+		--fontWeightBold: 700;
 
 		--letterSpacingHeading: -0.04em;
 

src/pages/about.astro

@@ -1,8 +1,8 @@
 ---
-import joshGoldberg from "~/assets/josh-goldberg.png";
-import dimitriMitropoulos from "~/assets/dimitri-mitropoulos.jpg";
 import bostonTSClub from "~/assets/boston-ts-club.svg";
 import michiganTypeScript from "~/assets/michigan-typescript.png";
+import dimitriMitropoulos from "~/assets/avatars/dimitri-mitropoulos.jpg";
+import joshGoldberg from "~/assets/avatars/josh-goldberg.png";
 import AnchorButton from "~/components/AnchorButton.astro";
 import Bio, { Props as BioProps } from "~/components/Bio.astro";
 import BodyText from "~/components/BodyText.astro";

src/pages/ad/stream.astro

@@ -0,0 +1,46 @@
+---
+import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
+
+import joshGoldberg from "~/assets/avatars/josh-goldberg.png";
+import marcHess from "~/assets/avatars/marc-hess.jpg";
+import AdContents from "~/components/AdContents.astro";
+import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
+import Streamers from "~/components/Streamers.astro";
+import AdLayout from "~/layouts/AdLayout.astro";
+
+import "~/layouts/base.css";
+import "~/layouts/normalize.css";
+---
+
+<AdLayout>
+	<AdContents>
+		<AdTitleAndSubtitle
+			subTitle="Building a Real-Time Q&A App with Prisma Pulse"
+			title="Livestream"
+			slot="top"
+		/>
+		<Streamers
+			link="twitch.tv/joshuakgoldberg"
+			time="Tuesday Sep 24, 2024 ⋅ 1:15pm – 2:30pm EST"
+			slot="body"
+			streamers={[
+				{
+					name: "Josh Goldberg",
+					src: joshGoldberg,
+				},
+				{
+					name: "Marc Hess",
+					src: marcHess,
+				},
+			]}
+		/>
+	</AdContents>
+</AdLayout>
+
+<style>
+	h1 {
+		color: var(--colorOffWhite);
+		font-size: 7rem;
+	}
+</style>