Homepage student + landing page

frontend/package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
+    "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "@mui/x-data-grid": "^7.1.1",

frontend/public/locales/en/translation.json

@@ -1,7 +1,4 @@
 {
-  "home": {
-    "title": "Homepage"
-  },
   "header": {
     "myProjects": "My Projects",
     "myCourses": "My Courses",
@@ -10,6 +7,11 @@
     "tag": "en",
     "homepage": "Homepage"
   },
+  "home": {
+    "homepage": "Homepage",
+    "welcomeDescription": "Welcome to Peristerónas, the online submission platform of UGent",
+    "login": "Login"
+  },
   "courseForm": {
     "courseName": "Course Name",
     "submit": "Submit",
@@ -37,5 +39,19 @@
     "hoursAgo": "hours ago",
     "minutesAgo": "minutes ago",
     "justNow": "just now"
+  },
+  "student" : {
+    "myProjects": "My Projects",
+    "myCourses": "My Courses",
+    "deadlines": "Past deadlines",
+    "last_submission" : "Last submission",
+    "course": "Course",
+    "SUCCESS": "Success",
+    "FAIL": "Fail",
+    "deadlinesOnDay": "Deadlines on: ",
+    "noDeadline": "No deadlines",
+    "no_submission_yet" : "No submission yet",
+    "loading": "Loading...",
+    "no_projects": "There are no projects here."
   }
-}
+}

frontend/public/locales/nl/translation.json

@@ -1,7 +1,4 @@
 {
-  "home": {
-    "title": "Homepagina"
-  },
   "header": {
     "myProjects": "Mijn Projecten",
     "myCourses": "Mijn Vakken",
@@ -10,11 +7,31 @@
     "tag": "nl",
     "homepage": "Homepage"
   },
+  "home": {
+    "homepage": "Homepagina",
+    "welcomeDescription": "Welkom bij Peristerónas, het online indieningsplatform van UGent",
+    "login": "Aanmelden"
+  },
   "courseForm": {
     "courseName": "Vak Naam",
     "submit": "Opslaan",
     "emptyCourseNameError": "Vak naam mag niet leeg zijn"
   },
+  "student": {
+    "myProjects": "Mijn Projecten",
+    "myCourses": "Mijn Vakken",
+    "deadlines": "Verlopen Deadlines",
+    "course": "Vak",
+    "last_submission": "Laatste indiening",
+    "SUCCESS": "Geslaagd",
+    "FAIL": "Gefaald",
+    "deadlinesOnDay": "Deadlines op: ",
+    "noDeadline": "Geen deadlines",
+    "no_submission_yet" : "Nog geen indiening",
+    "loading": "Laden...",
+    "no_projects": "Er zijn hier geen projecten."
+
+  },
   "projectView": {
     "submitNetworkError": "Er is iets mislopen bij het opslaan van uw indiening. Probeer het later opnieuw.",
     "selected": "Geselecteerd",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { Route,RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
 import Layout from "./components/Header/Layout";
 import Home from "./pages/home/Home";
+import HomeStudent from "./pages/home/HomeStudent.tsx";
 import LanguagePath from "./components/LanguagePath";
 import ProjectView from "./pages/project/projectView/ProjectView";
 
@@ -13,13 +14,14 @@ const router = createBrowserRouter(
         <Route path="project" >
           <Route path=":projectId" element={<ProjectView />}/>
         </Route>
+        <Route path="student" element={<HomeStudent />} />
       </Route>
     </Route>
   )
 );
 
 /**
- * This component is the main application component that will be rendered by the ReactDOM. 
+ * This component is the main application component that will be rendered by the ReactDOM.
  * @returns - The main application component
  */
 export default function App(): React.JSX.Element {

frontend/src/pages/home/Home.tsx

@@ -1,16 +1,50 @@
 import { useTranslation } from "react-i18next";
-import { Title } from "../../components/Header/Title";
+import { Button, Container, Typography, Box } from "@mui/material";
+import {Link } from "react-router-dom";
+
 /**
  * This component is the home page component that will be rendered when on the index route.
  * @returns - The home page component
  */
 export default function Home() {
-  const { t } = useTranslation("translation", { keyPrefix: "home" });
+  const { t } = useTranslation('translation', { keyPrefix: 'home' });
+  const login_redirect:string =import.meta.env.VITE_LOGIN_LINK
   return (
-    <>
-      <Title title={t('title')} />
-      <div>
-      </div>
-    </>
-  );
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          textAlign: 'center',
+          gap: 3,
+        }}
+      >
+        <Box   component="img"src="/logo_ugent.png" alt="University Logo"
+          sx={{ width: 100, height: 100 }} />
+
+        <Typography variant="h2" component="h1" gutterBottom  >
+          <Box
+            component="img"
+            src="/logo_app.png"
+            alt="University Logo"
+            sx={{
+              position: 'relative',
+              top: '14px',
+              width: 90,
+              height: 90,
+            }}
+          />
+          Peristerónas
+        </Typography>
+        <Typography variant="h6" component="p" >
+          {t('welcomeDescription', 'Welcome to Peristeronas.')}
+        </Typography>
+        <Button variant="contained" color="primary" size="large" component={Link} to={login_redirect}>
+          {t('login', 'Login')}
+        </Button>
+      </Box>
+    </Container>  );
 }