feat: add an FAQ (#360)

<!-- 👋 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

- [ ] Addresses an existing open issue: fixes #000
- [ ] 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)
- [ ] Steps in
[CONTRIBUTING.md](https://github.com/JoshuaKGoldberg/boston-ts-website/blob/main/.github/CONTRIBUTING.md)
were taken

## Overview

Initially intended primarily for parking, I also added sections for
sponsoring, feedback, and code of conduct.

app/components/Layout.css.ts

@@ -53,14 +53,15 @@ export const footerLinks = style({
 			alignItems: "flex-end",
 			flexDirection: "row",
 			justifyContent: "space-between",
+			paddingBottom: "1rem",
 			textAlign: "right",
 		},
 	},
 	display: "flex",
 	flexDirection: "column",
 	gap: "0.25rem",
 	justifyContent: "flex-end",
-	paddingBottom: "1rem",
+	paddingBottom: "0.5rem",
 });
 
 export const dot = style({
@@ -70,7 +71,7 @@ export const dot = style({
 			borderRadius: "100%",
 			display: "inline-block",
 			height: "0.85rem",
-			margin: "0 1.5rem 1rem",
+			margin: "0 1rem 1rem",
 			width: "0.85rem",
 		},
 	},

app/components/Layout.tsx

@@ -40,19 +40,23 @@ export function Layout({ back, children, title }: LayoutProps) {
 						About
 					</InternalAnchor>
 					<span className={styles.dot} />
-					<InternalAnchor reloadDocument to="/code-of-conduct" variant="heavy">
-						Code of Conduct
-					</InternalAnchor>
-				</div>
-				<div className={styles.footerLinks}>
 					<InternalAnchor reloadDocument to="/events" variant="heavy">
-						Previous Events
+						Events
 					</InternalAnchor>
 					<span className={styles.dot} />
 					<InternalAnchor reloadDocument to="/speak" variant="heavy">
 						Speak
 					</InternalAnchor>
 				</div>
+				<div className={styles.footerLinks}>
+					<InternalAnchor reloadDocument to="/code-of-conduct" variant="heavy">
+						Code of Conduct
+					</InternalAnchor>
+					<span className={styles.dot} />
+					<InternalAnchor reloadDocument to="/faq" variant="heavy">
+						FAQ
+					</InternalAnchor>
+				</div>
 				<SocialsList />
 			</footer>
 		</div>

app/components/SocialsList.css.ts

@@ -6,13 +6,13 @@ export const socialsList = style({
 	"@media": {
 		[breakpoints.medium]: {
 			justifyContent: "space-between",
-			marginTop: "0.5rem",
 		},
 	},
 	display: "flex",
 	gap: "1rem",
 	listStyleType: "none",
 	margin: 0,
+	marginTop: "0.5rem",
 	paddingLeft: 0,
 });
 

app/routes/faq.tsx

@@ -0,0 +1,57 @@
+import { MetaFunction } from "@remix-run/node";
+
+import { ExternalAnchor, InternalAnchor } from "~/components/Anchor";
+import { Aside } from "~/components/Aside";
+import { BodyText } from "~/components/BodyText";
+import { Heading } from "~/components/Heading";
+import { Layout } from "~/components/Layout";
+import { createMeta } from "~/config";
+
+export const meta: MetaFunction = () =>
+	createMeta({ page: "Frequently Asked Questions" });
+
+export default function FAQ() {
+	return (
+		<Layout back title="FAQ">
+			<Heading level={2}>Frequently Asked Questions</Heading>
+
+			<Heading level={3}>What is the parking situation at your events?</Heading>
+			<BodyText>
+				When meeting at the Microsoft NERD Center, you can park along the water
+				in front of the entrance, or in pay-to-park nearby. There is also a paid
+				parking garage in the building.
+			</BodyText>
+
+			<Aside>
+				The City of Cambridge maintains a{" "}
+				<ExternalAnchor
+					href="https://www.cambridgema.gov/iwantto/parkacarincambridge/map"
+					rel="noreferrer"
+					target="_blank"
+				>
+					map of all parking meters, lots, and garages
+				</ExternalAnchor>
+				. Neat!
+			</Aside>
+
+			<Heading level={3}>My company would like to sponsor you!</Heading>
+			<BodyText>
+				That's not really a question, but thank you, very kind of them! Head
+				over to our <InternalAnchor to="/sponsor">Sponsor</InternalAnchor> page
+				for all the details.
+			</BodyText>
+
+			<Heading level={3}>
+				I have ideas, how can I give you some feedback?
+			</Heading>
+			<BodyText>
+				Absolutely, we would love to make the club even better! Feel free to
+				share your thoughts via the{" "}
+				<ExternalAnchor href="/feedback" rel="noreferrer" target="_blank">
+					Feedback
+				</ExternalAnchor>{" "}
+				form.
+			</BodyText>
+		</Layout>
+	);
+}