feat: added branding to About Us

src/pages/about.astro

@@ -1,8 +1,11 @@
 ---
-import bostonTSClub from "~/assets/boston-ts-club.svg";
-import michiganTypeScript from "~/assets/michigan-typescript.png";
+import { Image } from "astro:assets";
 import dimitriMitropoulos from "~/assets/avatars/dimitri-mitropoulos.jpg";
 import joshGoldberg from "~/assets/avatars/josh-goldberg.png";
+import bostonTSClub from "~/assets/boston-ts-club.svg";
+import favicon from "~/assets/favicon.png";
+import thumbnail from "~/assets/branding/thumbnail.png";
+import michiganTypeScript from "~/assets/michigan-typescript.png";
 import Bio, { Props as BioProps } from "~/components/Bio.astro";
 import BodyText from "~/components/BodyText.astro";
 import HeadingFlanked from "~/components/HeadingFlanked.astro";
@@ -51,6 +54,21 @@ const bios: Omit<BioProps, "size">[] = [
 		photo: michiganTypeScript,
 	},
 ] as const;
+
+const brandingAssets = [
+	{
+		alt: "'SC' favicon with red squiggly underline",
+		displayWidth: 128,
+		src: favicon,
+		text: "Icon",
+	},
+	{
+		alt: "Thumbnail. Centered: 'SquiggleConf' logo with red squiggly under 'Squiggle' above a dark-blue/teal to medium-blue/teal background with blue/teal squigglies. October 3-4, 2024 - Boston New England Aquarium",
+		displayWidth: 227,
+		src: thumbnail,
+		text: "Thumbnail",
+	},
+];
 ---
 
 <ContentLayout
@@ -59,41 +77,93 @@ const bios: Omit<BioProps, "size">[] = [
 >
 	<HeroForPage slot="hero">About Us</HeroForPage>
 
+	<HeadingFlanked id="a-web-dev-conference">
+		A Web Dev Tooling Conference
+	</HeadingFlanked>
+
 	<BodyText as="p" size="large" width="full">
 		Our goal with SquiggleConf is to create an enriching conference environment
 		to talk about the latest and greatest in web developer tooling. We aim to
 		include everyone from newcomers to the space and web platform team members
 		to authors & maintainers of open source tools.
 	</BodyText>
 
-	<br />
-
-	<HeadingFlanked class="about-heading" id="squiggle-tools">
-		Squiggle.Tools
+	<HeadingFlanked class="about-heading" id="volunteering event">
+		Branding
 	</HeadingFlanked>
 
 	<BodyText as="p" size="large" width="full">
-		SquiggleConf is a production of Squiggle.Tools, a nonprofit organization
-		(501(c)3 pending) offering ongoing learning opportunities that enable
-		participants to engage, learn, and advance their careers—regardless of their
-		background or resources.
+		When referring to us in announcements, social media posts, or other broad
+		communications, please use <em>"SquiggleConf"</em>. We are not
+		<em>"Squiggle Conference"</em> or <em>"SquiggleCon"</em>.
+
+		<br />
+		<br />
+
+		Please also include alt text in any posts with images [<a
+			href="https://www.linkedin.com/help/linkedin/answer/a519856/adding-alternative-text-to-images-for-accessibility?lang=en"
+			>LinkedIn alt text help</a
+		>] and generally follow accessibility guidelines. We can only share posts
+		that are inclusive to all potential recipients.
 	</BodyText>
 
-	<ul class="bios">
-		{bios.map((bio) => <Bio class="about-us-bio" {...bio} size="medium" />)}
-	</ul>
+	<div class="branding-assets">
+		{
+			brandingAssets.map((asset) => (
+				<a class="branding-asset" href={asset.src.src} target="_blank">
+					<Image
+						alt={asset.alt}
+						height={128}
+						width={asset.displayWidth}
+						src={asset.src}
+					/>
+					<label>{asset.text}</label>
+				</a>
+			))
+		}
+	</div>
 </ContentLayout>
 
+<HeadingFlanked class="about-heading" id="squiggle-tools">
+	Squiggle.Tools
+</HeadingFlanked>
+
+<BodyText as="p" size="large" width="full">
+	SquiggleConf is a production of Squiggle.Tools, a nonprofit organization
+	(501(c)3 pending) offering ongoing learning opportunities that enable
+	participants to engage, learn, and advance their careers—regardless of their
+	background or resources.
+</BodyText>
+
+<ul class="bios">
+	{bios.map((bio) => <Bio class="about-us-bio" {...bio} size="medium" />)}
+</ul>
+
 <style>
 	.about-heading {
-		margin-top: 3rem;
+		margin-top: 5rem;
 	}
 
 	.action-button {
 		display: inline-block;
 		margin: 2rem;
 	}
 
+	.branding-assets {
+		display: flex;
+		flex-direction: column;
+		gap: 3rem;
+		margin-top: 3rem;
+	}
+
+	.branding-asset {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		gap: 1rem;
+		font-family: var(--fontFamilyBody);
+	}
+
 	.bios {
 		display: flex;
 		flex-wrap: wrap;
@@ -110,6 +180,10 @@ const bios: Omit<BioProps, "size">[] = [
 	}
 
 	@media (min-width: 819px) {
+		.branding-assets {
+			flex-direction: row;
+		}
+
 		.about-us-bio {
 			min-width: unset;
 		}