Add MPE page introduction content (#3183)

Author: alissayarmantho

website/src/views/mpe/MpeContainer.scss

@@ -0,0 +1,29 @@
+@import '~styles/utils/modules-entry';
+
+.pageContainer {
+  composes: page-container from global;
+  height: 100%;
+
+  :global {
+    animation-name: $page-entering-animation;
+  }
+}
+
+.header {
+  padding: 0 0 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--gray-lighter);
+  h2 {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+  }
+  h4 {
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+  }
+}
+
+.subtitle {
+  padding-top: 1rem;
+  font-weight: bold;
+}

website/src/views/mpe/MpeContainer.tsx

@@ -1,10 +1,28 @@
+import styles from './MpeContainer.scss';
+
 type Props = {
   placeholder: true; // Remove this when new props are added.
 };
 
 const MpeContainer: React.FC<Props> = () => (
-  <div>
-    <h1>MPE</h1>
+  <div className={styles.pageContainer}>
+    <div className="col-md-9">
+      <header className={styles.header}>
+        <h2>Module Preference Exercise</h2>
+        <h4>AY2021/2022 - Semester 2</h4>
+      </header>
+      <h4 className={styles.subtitle}>Overview</h4>
+
+      <p>
+        The Module Preference Exercise (MPE) is a project initiated by NUS to better understand
+        students’ demand for specific modules. Students who have completed this exercise{' '}
+        <strong>will receive tie-breaker benefit</strong> during the ModReg period.
+      </p>
+      <p>
+        Do take note that this is only a planning exercise;{' '}
+        <strong>it does not enroll you in the modules.</strong>
+      </p>
+    </div>
   </div>
 );