create header

pages/resources/tech-talks.module.css

@@ -0,0 +1,29 @@
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  padding-bottom: 1rem;
+  border-bottom: calc(1rem / 16) solid var(--purple-2);
+}
+
+.header {
+  padding-right: calc(82rem / 16);
+}
+
+.header h1 {
+  color: var(--purple-2);
+  font-size: calc(48rem / 16);
+  margin: 0 1rem 0 0;
+  text-align: left;
+}
+
+.headerContent {
+  max-width: calc(450rem / 16);
+}
+
+.image {
+  width: calc(260rem / 16);
+  height: calc(165rem / 16);
+  object-fit: cover;
+  border: 5px solid #555;
+}

pages/resources/tech-talks.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Image } from "../../components/Image";
+import styles from "./tech-talks.module.css";
+
+export default function TechTalks() {
+  return (
+    <>
+      <div className={styles.headerContainer}>
+        <section className={styles.header}>
+          <h1>Tech Talks</h1>
+          <p className={styles.headerContent}>
+            These are the audio and video recordings of past CSC and other
+            university-related talks. Our public events can also be found on our
+            YouTube channel.
+          </p>
+        </section>
+        <Image
+          src="our-supporters/supporters-codey.svg"
+          className={styles.image}
+        />
+      </div>
+      <div className={styles.content}>{/* <Content /> */}</div>
+    </>
+  );
+}