Add SectionHeader component

components/SectionHeader.module.css

@@ -0,0 +1,23 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: calc(40rem / 16) 0;
+  text-align: center;
+}
+
+.title {
+  color: var(--primary-accent-light);
+  font-size: calc(70rem / 16);
+  margin: calc(40rem / 16) auto;
+}
+
+.subTitle {
+  color: var(--primary-accent-lighter);
+  font-size: calc(26rem / 16);
+  margin: auto;
+}
+
+.graphContainer {
+  padding: 0 calc(70rem / 16);
+}

components/SectionHeader.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import styles from "./SectionHeader.module.css";
+
+interface SectionHeaderProps {
+  title: string;
+  subtitle: string;
+}
+
+export function SectionHeader({
+  title,
+  subtitle,
+} : SectionHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <h1 className={styles.title}>{title}</h1>
+      <h5 className={styles.subTitle}>{subtitle}</h5>
+    </div>
+  );
+}

pages/samplePage.tsx

@@ -6,6 +6,7 @@ import { useIsMobile } from "utils/isMobile";
 import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
 import { BottomNav } from "@/components/BottomNav";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
+import { SectionHeader } from "@/components/SectionHeader";
 import { Header } from "@/components/Header";
 import { WordCloud } from "@/components/WordCloud";
 
@@ -18,6 +19,10 @@ export default function SamplePage() {
   return (
     <div className={styles.page}>
       <Header />
+      <SectionHeader 
+        title="Demographics"
+        subtitle="An insight into the demographics of UW’s CS programs"
+      />
       <ComponentWrapper
         heading="What program are you in?"
         bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."