Add old TAM homepage features

Display a description of TAM when logged-out and display some possible actions when logged-in (depending on role).

src/main/resources/scss/_vars.scss

@@ -27,6 +27,7 @@
 
   --title-size: 42pt;
   --subtitle-size: 24pt;
+  --subsubtitle-size: 20pt;
   --list-content-size: 16pt;
   --table-size: 14pt;
   --regular-size: 12pt;

src/main/resources/scss/main.scss

@@ -74,10 +74,40 @@ button {
   font-family: var(--title-font);
   font-size: var(--title-size);
   font-weight: 100;
+  text-align: center;
 }
 .subtitle {
   font-size: var(--subtitle-size);
   font-weight: normal;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.subsubtitle {
+  font-size: var(--subsubtitle-size);
+  color: var(--primary-blue);
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.half-column {
+  width: 50%;
+  display: inline-block;
+}
+
+@media(max-width: 768px) {
+  .flex-container {
+    flex-direction: column;
+  }
+
+  .half-column {
+    width: 100%;
+  }
 }
 
 .hidden {

src/main/resources/templates/index.html

@@ -33,21 +33,82 @@
 
 <div layout:fragment="content">
 
-    <h1 class="title">Welcome to TAM</h1>
-
-    <p th:unless="${@authorisationService.isAuthenticated()}">To log in, click the button in the top right.</p>
-
+    <div th:unless="${@authorisationService.isAuthenticated()}">
+        <h1 class="title">Teaching Assistant Management</h1>
+
+        <h2 class="subtitle" th:unless="${@authorisationService.isAuthenticated()}">Welcome to TAM! To log in, click the button in the top right.</h2>
+
+        <div class="flex-container">
+            <div class="half-column">
+                <h2 class="subsubtitle">Students</h2>
+                <p>
+                    As a student, you can sign up to become a teaching assistant and indicate your availability and willingness to assist courses. When your eligibility is approved you can be selected to assist a course.
+                </p>
+                <h2 class="subsubtitle">Course Staff</h2>
+                <p>
+                    As a teacher, you can register your course and indicate the need for teaching assistants. An overview of interested students is provided, using which you can send job offers to the selected candidates.
+                </p>
+            </div>
+            <div class="half-column">
+                <h2 class="subsubtitle">Why become a TA?</h2>
+                <ol>
+                    <li>You meet other excellent computer science students from other years and specialties.</li>
+                    <li>Working as a TA shows future employers that:</li>
+                    <ul>
+                        <li>You have an even better understanding of the material, allowing you to explain material to others.</li>
+                        <li>You are comfortable communicating with people (in contrast to the stereotype often associated with computer scientists).</li>
+                    </ul>
+                    <li>You get the opportunity to network with teachers from TU Delft, helping you find future projects. (BEP, Master Thesis, PhD)</li>
+                    <li>You have a flexible work schedule that you can adapt to fit with your own study program.</li>
+                    <li>You receive an hourly financial compensation for your work (see <a href="https://flexdelft.nl">flexdelft.nl</a> for more information).</li>
+                    <li>If you are a bachelor honours student you can participate in a new program to receive 2 EC, on top of the already mentioned salary.</li>
+                </ol>
+            </div>
+        </div>
+    </div>
 
     <div th:if="${@authorisationService.isAuthenticated()}">
-        <p>You are logged in.</p>
+        <div th:if="${@authorisationService.isStaff()}">
+            <h2 class="subtitle">Welcome to TAM! You're logged in!</h2>
+
+            <div class="flex-container">
+                <div class="half-column">
+                    <h2 class="subsubtitle">Update your information</h2>
+                    <ul>
+                        <li>Go to your <a th:href="@{profile}">Profile</a> and add your TA-Polo preferences.</li>
+                    </ul>
+                </div>
+                <div class="half-column">
+                    <h2 class="subsubtitle">Apply & Accept a Position</h2>
+                    <ul>
+                        <li>Go to <a th:href="@{/job-offer/manage}">Job Offers</a> and create a job.</li>
+                        <li>Go to <a th:href="@{/application/all}">Applications</a> to see all applications.</li>
+                        <li>Got to <a th:href="@{/job-offer/manage}">Job Offers</a> to accept or reject candidates.</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
 
-        <ol>
+        <div th:unless="${@authorisationService.isStaff()}">
+            <h2 class="subtitle">Welcome to TAM! You're logged in!</h2>
+
+            <div class="flex-container">
+                <div class="half-column">
+                    <h2 class="subsubtitle">Update your information</h2>
+                    <ul>
+                        <li>Go to your <a th:href="@{profile}">Profile</a> and add your TA-Polo preferences.</li>
+                    </ul>
+                </div>
+                <div class="half-column">
+                    <h2 class="subsubtitle">Apply & Accept a Position</h2>
+                    <ul>
                         <li>Go to <a th:href="@{/job-offer/open}">Job Offers</a> and apply for a job.</li>
                         <li>Go to <a th:href="@{/application/my}">Applications</a> to check if a teacher offered you a position for a job.</li>
                         <li>Accept the offer.</li>
-        </ol>
-
-        <p>Don't forget to update your information in your <a th:href="@{profile}">Profile</a>.</p>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </div>
 
 </div>