pages/academics.tsx

@@ -60,6 +60,7 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -71,6 +72,7 @@ export default function Academics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Academics</Title>
       <SectionHeader title="Academics" />
 
       <SectionWrapper title="Programming" />

pages/coop.tsx

@@ -35,6 +35,7 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
+import { Title } from "@/components/Title";
 
 import { WordCloud } from "../components/WordCloud";
 
@@ -54,6 +55,7 @@ export default function CoopPage() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Co-op</Title>
       <SectionHeader
         title="Co-op"
         subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"

pages/demographics.tsx

@@ -30,6 +30,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -41,6 +42,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Demographics</Title>
       <SectionHeader
         title="Demographics"
         subtitle="An insight into the demographics of UW’s CS programs"

pages/friends.tsx

@@ -35,6 +35,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -46,6 +47,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Friends</Title>
       <SectionHeader
         title="Friends"
         subtitle="The friends you make in university are friends you’ll have for life."

pages/intimacy-and-drugs.tsx

@@ -35,6 +35,7 @@ import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import { Color } from "../utils/Color";
 
@@ -47,6 +48,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Intimacy and Drugs</Title>
       <SectionHeader
         title="Intimacy and Drugs"
         subtitle="What have people tried/already done during university?👀"

pages/lifestyle-and-interests.tsx

@@ -36,6 +36,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -47,6 +48,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Lifestyle and Interests</Title>
       <SectionHeader
         title="Lifestyle and Interests"
         subtitle="What do CS people do in their free time?"

pages/mental-health.tsx

@@ -39,6 +39,7 @@ import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -49,6 +50,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Mental Health</Title>
       <SectionHeader title="Mental Health" />
 
       <ComponentWrapper

pages/miscellaneous.tsx

@@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -29,6 +30,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Miscellaneous</Title>
       <SectionHeader title="Miscellaneous" subtitle="" />
 
       <ComponentWrapper

pages/personal.tsx

@@ -7,6 +7,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -14,6 +15,7 @@ export default function Personal() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Personal</Title>
       <SectionHeader title="Personal" subtitle="Life lessons from students" />
 
       <ComponentWrapper

pages/post-grad.tsx

@@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -29,6 +30,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Post-grad</Title>
       <SectionHeader
         title="Post-grad"
         subtitle="Further Computer Science Academic Journey"