feat: add a sponsor page (#343)

<!-- 👋 Hi, thanks for sending a PR to boston-ts-website! 💖.
Please fill out all fields below and make sure each item is true and [x]
checked.
Otherwise we may not be able to review your PR. -->

## PR Checklist

- [x] Addresses an existing open issue: fixes #37 
- [x] That issue was marked as [`status: accepting
prs`](https://github.com/JoshuaKGoldberg/boston-ts-website/issues?q=is%3Aopen+is%3Aissue+label%3A%22status%3A+accepting+prs%22)
- [x] Steps in
[CONTRIBUTING.md](https://github.com/JoshuaKGoldberg/boston-ts-website/blob/main/.github/CONTRIBUTING.md)
were taken

## Overview

See result at
[`/sponsor`](https://boston-ts-website-git-astorije-sponsor-page-squiggle-tools.vercel.app/sponsor).

<img width="1512" alt="Screenshot of the new Sponsor page"
src="https://github.com/user-attachments/assets/2d7fed6f-f3d4-483c-90cb-b41369b9419e">

We probably want this page out ASAP, but after that, I need to fix the
"Sponsor" page hero header. Should we just decrease the font-size or
another option?

app/components/Heading.css.ts

@@ -15,14 +15,6 @@ export const heading = styleVariants({
 		},
 	],
 	3: [
-		base,
-		{
-			fontSize: vars.sizes.subHeading,
-			lineHeight: vars.lineHeights.medium,
-			marginTop: "4rem",
-		},
-	],
-	4: [
 		base,
 		{
 			fontSize: vars.sizes.large,

app/components/Heading.tsx

@@ -9,5 +9,9 @@ export interface HeadingProps extends React.PropsWithChildren {
 }
 
 export function Heading({ children, className, level }: HeadingProps) {
-	return <h2 className={clsx(styles.heading[level], className)}>{children}</h2>;
+	if (level === 2) {
+		return <h2 className={clsx(styles.heading[2], className)}>{children}</h2>;
+	} else {
+		return <h3 className={clsx(styles.heading[3], className)}>{children}</h3>;
+	}
 }

app/routes/sponsor.tsx

@@ -0,0 +1,53 @@
+import { MetaFunction } from "@remix-run/node";
+
+import { ExternalAnchor } from "~/components/Anchor";
+import { BodyText } from "~/components/BodyText";
+import { Heading } from "~/components/Heading";
+import { Layout } from "~/components/Layout";
+import { UnorderedList } from "~/components/UnorderedList";
+import { createMeta } from "~/config";
+
+const tagline = `Get your name and branding in front of Boston's most active and engaged TypeScript developer community!`;
+
+export const meta: MetaFunction = () =>
+	createMeta({ page: "Sponsor", tagline });
+
+export default function About() {
+	return (
+		<Layout back title="Sponsor">
+			<Heading level={2}>Sponsor Boston TS Club</Heading>
+
+			<BodyText>
+				Thinking about sponsoring us? Awesome! We're excited to work with you
+				and are grateful for your support!
+			</BodyText>
+
+			<Heading level={3}>Why sponsor us?</Heading>
+
+			<BodyText>{tagline}</BodyText>
+
+			<BodyText>As a meetup sponsor, you'll receive:</BodyText>
+
+			<UnorderedList>
+				<li>A featured mention in our opening slides</li>
+				<li>A dedicated talk slot to showcase your product</li>
+				<li>Shout-outs on our social media profiles</li>
+				<li>The opportunity to distribute your swag at our events</li>
+			</UnorderedList>
+
+			<BodyText>
+				We're flexible! If you want to try something different, let us know,
+				we'd love to make it happen! 💙
+			</BodyText>
+
+			<Heading level={3}>Ready to team up?</Heading>
+
+			<BodyText>
+				<ExternalAnchor href="mailto:sponsor@bostonts.club" target="_blank">
+					Email us
+				</ExternalAnchor>{" "}
+				to get started.
+			</BodyText>
+		</Layout>
+	);
+}