Merge branch '48-add-old-tam-homepage-features' into 'dev'

Add old TAM homepage features

Closes #48

See merge request eip/labrador/tam/tam!182

src/main/resources/scss/_elements.scss

@@ -625,7 +625,7 @@
     margin-left: 2rem;
   }
 
-  @media(max-width: 1200px) {
+  @media(max-width: 75em) {
     flex-direction: column;
 
     & > .card {

src/main/resources/scss/_header.scss

@@ -4,7 +4,7 @@
   height: var(--header-height);
   width: 100%;
 
-  @media(max-width: 768px) {
+  @media(max-width: 48em) {
     height: initial;
   }
 
@@ -15,7 +15,7 @@
     margin: 0 auto;
     max-width: var(--body-width);
     width: 100%;
-    @media(max-width: 768px) {
+    @media(max-width: 48em) {
       justify-content: flex-start;
       flex-direction: column;
       padding: .5rem 0;
@@ -28,7 +28,7 @@
     margin-bottom: 1rem;
     text-decoration: none;
     color: var(--primary-light);
-    @media(max-width: 768px) {
+    @media(max-width: 48em) {
       align-self: initial;
       margin-bottom: .5rem;
     }
@@ -38,7 +38,7 @@
     align-items: center;
     display: flex;
     height: 100%;
-    @media(max-width: 768px) {
+    @media(max-width: 48em) {
       flex-direction: row;
       justify-content: space-between;
       margin-bottom: .5rem;

src/main/resources/scss/_sidebar.scss

@@ -4,7 +4,7 @@
   min-width: 20%;
   margin-right: 2rem;
   margin-top: 2rem;
-  @media(max-width: 768px) {
+  @media(max-width: 48em) {
     margin-right: 0;
   }
 

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

@@ -30,7 +30,7 @@ button {
   margin: 0 auto;
   max-width: var(--body-width);
   width: 100%;
-  @media(max-width: 768px) {
+  @media(max-width: 48em) {
     flex-direction: column;
   }
 }
@@ -74,10 +74,32 @@ 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-dark);
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.grid-container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+@media(max-width: 48em) {
+  .grid-container {
+    grid-auto-flow: row;
+  }
 }
 
 .hidden {

src/main/resources/templates/index.html

@@ -33,21 +33,81 @@
 
 <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="grid-container">
+            <div>
+                <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>
+                <h2 class="subsubtitle">Why become a TA?</h2>
+                <ol>
+                    <li>You meet other excellent students from other years, studies, 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</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>
+                </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="grid-container">
+                <div>
+                    <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>
+                    <h2 class="subsubtitle">Create a position and manage applicants</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="grid-container">
+                <div>
+                    <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>
+                    <h2 class="subsubtitle">Apply to and 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>