Add placeholder holder page for module overview

src/components/pages/ModuleOverview/index.tsx

 import React from "react";
 import Dandruff from "components/molecules/Dandruff";
 import { useParams } from "react-router-dom";
+import styles from "./style.module.scss";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+import classNames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleOverview: React.FC = () => {
   let { id } = useParams();
+  let moduleCode = id.startsWith("CO") ? id.slice(2) : id;
+  const buttons = [
+    {
+      title: "College Website",
+      icon: faGlobe,
+      url: `https://www.imperial.ac.uk/computing/current-students/courses/${moduleCode}/`,
+    },
+    {
+      title: "Materials Link 1",
+      icon: faLink,
+      url: `https://www.doc.ic.ac.uk/~wl/teachlocal/arch/`,
+    },
+    {
+      title: "Materials Link 2",
+      icon: faLink,
+      url: "http://wp.doc.ic.ac.uk/bkainz/teaching/co112-hardware/",
+    },
+  ];
+
   let modules = [
     {
       title: "Introduction to Logic",
@@ -52,6 +78,37 @@ const ModuleOverview: React.FC = () => {
   return (
     <>
       <Dandruff heading={heading} />
+
+      <h4 className={classNames(styles.moduleSectionHeader)}>Description</h4>
+      <p>
+        Since students don't need to see the full course information everytime
+        they click open a module, instead of making a copy of the college
+        website here in Scientia, we could add links to the relavant site below,
+        and only fetch or generate a short description to place here. The rest
+        of this page could be used for something useful like Sudar's timeline
+        idea and links to lecture's websites (which we could fetch from the
+        links they provided in materials).
+      </p>
+
+      <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
+      <Row style={{ marginTop: "1.25rem" }}>
+        {buttons.map(({ title, icon, url }, i) => (
+          <Col
+            xs={6}
+            sm={6}
+            md={4}
+            lg={4}
+            xl={3}
+            key={i}
+            style={{ paddingRight: "10px", paddingLeft: "10px" }}
+          >
+            <Button href={url} target="_blank">
+              {title}
+              <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} />
+            </Button>
+          </Col>
+        ))}
+      </Row>
     </>
   );
 };