Initial HTML

components/Sections.tsx

@@ -11,11 +11,20 @@ interface SectionsProps {
   /* Whether to display the "Sections" title and separator that appears on the left. */
   showHeader?: boolean;
   data: SectionsData[];
+  className?: string;
 }
 
-export function Sections({ data, showHeader = true }: SectionsProps) {
+export function Sections({
+  data,
+  showHeader = true,
+  className,
+}: SectionsProps) {
   return (
-    <section className={styles.sections}>
+    <section
+      className={
+        className ? `${className} ${styles.sections}` : `${styles.sections}`
+      }
+    >
       {showHeader ? (
         <>
           <h1>Sections</h1>

components/Timeline.tsx

@@ -32,8 +32,8 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  timeWidth = 200,
-  textWidth = 300,
+  timeWidth = 300,
+  textWidth = 500,
   gap = 50,
   className,
 }: TimelineProps) {

pages/frontpage.module.css

@@ -0,0 +1,15 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main > * {
+  margin-top: 65px;
+  margin-bottom: 65px;
+}
+
+.left {
+  align-self: flex-start;
+  margin-left: 100px;
+}

pages/index.tsx

@@ -1,12 +1,70 @@
+import { mockTimelineData } from "data/mocks";
+import { sectionsData } from "data/routes";
+import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
+import { About } from "@/components/About";
+import { CenterWrapper } from "@/components/CenterWrapper";
+import { Sections } from "@/components/Sections";
+import { Timeline } from "@/components/Timeline";
+
+import styles from "./frontpage.module.css";
+
 export default function Home() {
   return (
-    <p>
-      Click <Link href="/playground">here</Link> to visit the playground
-      <br />
-      Click <Link href="/samplePage">here</Link> to visit a sample page
-    </p>
+    <div className={styles.main}>
+      <div className={styles.title}>
+        <Image
+          src="/images/frontPageTitle.png"
+          alt="A picture of the University of Waterloo campus"
+          width={720}
+          height={480}
+        />
+        <div className={styles.bubble}>
+          <h1>Computer Science 2022</h1>
+          <h1>Class Profile</h1>
+          <h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
+        </div>
+        <div className={styles.decoratorSolid} />
+        <div className={styles.decoratorDots} />
+      </div>
+      <About />
+      <CenterWrapper>
+        <h1>Preface</h1>
+        <p>
+          The CS Class Profile consists of data relevant to CS, CFM, and CS/BBA
+          students. These were combined with the knowledge that students in
+          these programs tend to have similar experiences, as many of the same
+          CS required courses are shared. In the standard co-op offering, CS and
+          CFM take 4 years and 2 semesters to complete, while CS/BBA can take up
+          to a full 5 years.
+        </p>
+        <p>
+          Computer Science (and the others) is known to be a very prestigious
+          program, and is very well known in Canada as well as across the world.
+          For prospective students or anyone who is interested in learning more
+          about what the students are like, this CS Class Profile will attempt
+          to answer some of your questions, and you may even learn a thing or
+          two you didn’t expect!
+        </p>
+        <p>
+          The survey questions were approved by the Institutional Analysis &
+          Planning, where all University of Waterloo stakeholders that are
+          interested in conducting a non-academic research survey involving a
+          large portion of the UWaterloo population are reviewed and approved.
+          The entirety of the survey creation and data processing was done by
+          the UW Computer Science Club, so please check us out if you enjoy what
+          you see!
+        </p>
+      </CenterWrapper>
+      <Sections data={sectionsData} className={styles.left} />
+      <Timeline data={mockTimelineData} className={styles.left} />
+      <p>
+        Click <Link href="/playground">here</Link> to visit the playground
+        <br />
+        Click <Link href="/samplePage">here</Link> to visit a sample page
+      </p>
+    </div>
   );
 }