From b6af735d56444f4795e487c5d247d94bd3851672 Mon Sep 17 00:00:00 2001
From: Cedric Rische <cedric.rische@cedsoft.de>
Date: Wed, 14 Feb 2024 21:11:16 +0100
Subject: [PATCH] Some changes

---
 src/components/Faq/Faq.jsx                    | 18 +++---
 src/components/Gallery/Gallery.jsx            |  4 +-
 src/components/LandingImage/Countdown.jsx     |  2 +-
 src/components/LandingImage/LandingImage2.jsx | 59 ++++++++++---------
 src/components/Newsletter/Newsletter.jsx      |  3 +-
 src/components/Registration/Registration.jsx  |  4 +-
 src/components/Sponsors/Sponsors.jsx          |  2 +-
 src/components/Team/Team.jsx                  | 19 +++---
 src/components/Theme/HackHpiTheme.js          |  3 +-
 src/components/TimeTable/TimeTable.jsx        | 49 +++++++++------
 src/components/WhatToExpect/WhatToExpect.jsx  | 10 ++--
 11 files changed, 98 insertions(+), 75 deletions(-)

diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
index 66e2b5d..3325e88 100644
--- a/src/components/Faq/Faq.jsx
+++ b/src/components/Faq/Faq.jsx
@@ -8,7 +8,8 @@ import {
     List,
     ListItemButton,
     ListItemIcon,
-    Typography, useMediaQuery,
+    Typography,
+    useMediaQuery,
     useTheme
 } from "@mui/material";
 import React from "react";
@@ -116,8 +117,8 @@ export function Faq() {
     };
     return (
         <HackHPIWrapper>
-            <Container sx={{paddingTop: 10, paddingBottom: 10}} maxWidth={"xl"}>
-                <Typography variant={"h1"}>Frequently asked questions</Typography>
+            <Container sx={{paddingTop: 10, paddingBottom: 10}}>
+                <Typography variant={"h2"} component={"h1"}>Frequently asked questions</Typography>
                 <Typography variant={"body1"} sx={{marginBottom: "4rem"}}>Can't find the answer you're looking for? You
                     can
                     always <Link href={"mailto:team@hackhpi.org"} color={"inherit"}>send us an email</Link> with your
@@ -132,14 +133,13 @@ export function Faq() {
                                             key={faq.name}
                                             selected={selectedIndex === idx}
                                             onClick={(event) => handleListItemClick(event, idx)}
-                                            sx={{padding: 2}}
+                                            sx={{padding: 1}}
                                         >
-                                            <ListItemIcon>
+                                            <ListItemIcon sx={{justifyContent: "center"}}>
                                                 <KeyboardArrowRight
-                                                    fontSize={"large"}
                                                 />
                                             </ListItemIcon>
-                                            <Typography sx={{fontSize: "1.5rem"}} noWrap>{faq.name}</Typography>
+                                            <Typography sx={{fontSize: "1rem"}} noWrap>{faq.name}</Typography>
                                         </ListItemButton>
                                     ))
                                 }
@@ -147,11 +147,11 @@ export function Faq() {
                         </Card>
                     </Grid>
                     <Grid item xs={12} md={8}>
-                        <Masonry spacing={3} columns={matches ? 2: 1}>
+                        <Masonry spacing={3} columns={matches ? 2 : 1}>
                             {
                                 faqs[selectedIndex].items.map((faq, idx) => (
                                         <Box key={idx}>
-                                            <WindowCard >
+                                            <WindowCard>
                                                 <Typography gutterBottom variant={"h6"}
                                                             fontWeight={"bold"}>{faq.title}</Typography>
                                                 <Typography>
diff --git a/src/components/Gallery/Gallery.jsx b/src/components/Gallery/Gallery.jsx
index 3483e82..7bc376b 100644
--- a/src/components/Gallery/Gallery.jsx
+++ b/src/components/Gallery/Gallery.jsx
@@ -168,8 +168,8 @@ export function Gallery() {
     };
     return (
         <HackHPIWrapper>
-            <Container sx={{paddingTop: 10, paddingBottom: 10}} maxWidth={"xl"}>
-                <Typography variant={"h1"} gutterBottom>Gallery</Typography>
+            <Container sx={{paddingTop: 10, paddingBottom: 10}}>
+                <Typography variant={"h2"} component={"h1"} gutterBottom>Gallery</Typography>
                 <Grid container spacing={7} alignItems="center">
                     {/*<Grid item xs={12} md={4}>
                     <Card sx={{width: '100%', bgcolor: 'background.paper'}}>
diff --git a/src/components/LandingImage/Countdown.jsx b/src/components/LandingImage/Countdown.jsx
index 411318a..464f83b 100644
--- a/src/components/LandingImage/Countdown.jsx
+++ b/src/components/LandingImage/Countdown.jsx
@@ -14,7 +14,7 @@ function Countdown() {
     }, []);  //dependency, if end changes remount
 
     return (
-        <Typography sx={{color: "white"}} variant={"h1"}>
+        <Typography sx={{color: "white"}} variant={"h2"} component={"h1"} gutterBottom>
             {`${Math.round(timeLeft / (24 * 60 * 60 * 1000))} Days`}
         </Typography>
     )
diff --git a/src/components/LandingImage/LandingImage2.jsx b/src/components/LandingImage/LandingImage2.jsx
index bc5e809..db72af8 100644
--- a/src/components/LandingImage/LandingImage2.jsx
+++ b/src/components/LandingImage/LandingImage2.jsx
@@ -9,62 +9,65 @@ function LandingImage2() {
 
     return (
         <Box sx={{
-            height: "60vh",
             width: "100%",
             backgroundImage: `url(/mazeBackground.svg), linear-gradient(180deg, rgba(19,16,27,1) 0%, rgba(19,16,27,1) 100%)`,
             backgroundPosition: "center",
             backgroundSize: "cover"
         }}
         >
-            <Container sx={{height: "100%", width: "100%", display: "flex", alignItems: "center"}} maxWidth={"xl"}>
+            <Container sx={{height: "100%", width: "100%", display: "flex", alignItems: "center"}}>
                 <Box sx={{
                     height: "80%",
                     width: "100%",
                     display: "flex",
                     justifyContent: "space-around",
-                    flexDirection: "column"
+                    flexDirection: "column",
+                    minHeight: "80vh",
+
                 }}>
 
-                    <img src={"/HackHPI24_white.png"} width={"200rem"} alt={"HackHPI Logo"}/>
+                    <img src={"/HackHPI24_white.png"} width={"150rem"} alt={"HackHPI Logo"}/>
                     <div>
                         <Countdown/>
-                        <TypeAnimation
-                            preRenderFirstString={true}
-                            sequence={[
-                                500,
-                                'Until we build Better Transport', // initially rendered starting point
-                                1000,
-                                'Until we build Better Schools',
-                                1000,
-                                'Until we build Better Routes',
-                                1000,
-                                'Until we build Better Cities',
-                                10000,
-                            ]}
-                            speed={50}
-                            style={{fontSize: '3em', color: "white"}}
-                            repeat={Infinity}
-                        />
+                        <Typography variant={"h4"} component={"h2"}>
+                            <TypeAnimation
+                                preRenderFirstString={true}
+                                sequence={[
+                                    500,
+                                    'Until we build Better Transport', // initially rendered starting point
+                                    1000,
+                                    'Until we build Better Schools',
+                                    1000,
+                                    'Until we build Better Routes',
+                                    1000,
+                                    'Until we build Better Cities',
+                                    10000,
+                                ]}
+                                speed={50}
+                                repeat={Infinity}
+                            />
+                        </Typography>
                     </div>
-                    <Stack direction={"row"} spacing={5} useFlexGap flexWrap="wrap">
+                    <Stack direction={"row"} spacing={3} useFlexGap flexWrap="wrap">
                         <Button
                             variant={"contained"}
                             sx={{
                                 background: "linear-gradient(90deg, rgba(58,12,163,1) 0%, rgba(114,9,183,1) 100%)",
                                 backgroundColor: "secondary.main",
                                 borderWidth: "1rem",
-                                width: "15rem",
+                                width: "13rem",
                                 height: "3.5rem",
-                                fontSize: "1.25rem",
+                                fontSize: "1rem",
                             }}
                         >
                             SignUp
                         </Button>
-                        <Card sx={{height: "3.5rem"}}>
+                        <Card sx={{height: "3.5rem", width: "13rem", justifyContent: "center", display:"flex"}}>
                             <Stack direction={"row"} alignItems={"center"} display={"flex"}
-                                   sx={{height: "100%", paddingRight: "1.5rem", paddingLeft: "1.5rem",}} spacing={3}>
-                                <CalendarMonthOutlined sx={{fontSize: "2rem", color: "text.disabled"}}/>
-                                <Typography sx={{fontSize: "1.5rem"}} color={"text.disabled"}>5th - 6th April</Typography>
+                                   sx={{height: "100%", paddingRight: "1.25rem", paddingLeft: "1.25rem",}} spacing={2}>
+                                <CalendarMonthOutlined sx={{fontSize: "1.5rem", color: "text.disabled"}}/>
+                                <Typography sx={{fontSize: "1rem"}} color={"text.disabled"} noWrap>5th - 6th
+                                    April</Typography>
                             </Stack>
                         </Card>
                     </Stack>
diff --git a/src/components/Newsletter/Newsletter.jsx b/src/components/Newsletter/Newsletter.jsx
index acb98f1..b29ec50 100644
--- a/src/components/Newsletter/Newsletter.jsx
+++ b/src/components/Newsletter/Newsletter.jsx
@@ -6,7 +6,7 @@ function Newsletter() {
     return (
         <HackHPIWrapper>
             <Box sx={{paddingTop: 10, paddingBottom: 10}}>
-                <Container maxWidth={"xl"}>
+                <Container>
                     <Grid container spacing={3}>
                         <Grid item xs={12} md={6} sx={{display: "flex", alignItems: "center"}}>
                             <iframe
@@ -19,6 +19,7 @@ function Newsletter() {
                         <Grid item xs={12} md={6}>
                             <Typography
                                 variant={"h2"}
+                                component={"h1"}
                                 gutterBottom
                             >
                                 Want to stay in the loop?
diff --git a/src/components/Registration/Registration.jsx b/src/components/Registration/Registration.jsx
index 70f96a2..ad74c58 100644
--- a/src/components/Registration/Registration.jsx
+++ b/src/components/Registration/Registration.jsx
@@ -2,8 +2,8 @@ import {Container, Typography} from "@mui/material";
 
 function Registration() {
     return (
-        <Container maxWidth={"xl"} sx={{paddingTop: 10, paddingBottom: 10}}>
-            <Typography variant={"h1"}>Registration</Typography>
+        <Container sx={{paddingTop: 10, paddingBottom: 10}}>
+            <Typography variant={"h2"} component={"h1"}>Registration</Typography>
         </Container>
     )
 }
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index 63373b0..6ead73e 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -8,7 +8,7 @@ function Sponsors() {
 
     return (
         <HackHPIWrapper>
-            <Box sx={{paddingTop: 10, paddingBottom: 10}}>
+            <Box sx={{ paddingBottom: 10}}>
                 <Container maxWidth={"xl"}>
                     <Grid container sx={{paddingTop: "5rem"}} justifyContent={"center"} spacing={10}>
                         <Grid item>
diff --git a/src/components/Team/Team.jsx b/src/components/Team/Team.jsx
index 137d26a..2a528fb 100644
--- a/src/components/Team/Team.jsx
+++ b/src/components/Team/Team.jsx
@@ -8,8 +8,9 @@ import TheoKlinkeProfile from "../../assets/images/team_new/theo_klinke.webp"
 import ViktorKalvodaProfile from "../../assets/images/team_new/viktor_kalvoda.webp"
 import GeromeQuantmeyerProfile from "../../assets/images/team_new/gerome_quantmeyer.webp"
 import UliPrantzProfile from "../../assets/images/team_new/uli_prantz.webp"
-import {Avatar, Box, Card, Container, Grid, Link, Stack, Typography, useTheme} from "@mui/material";
+import {Avatar, Box, Card, Container, Grid, Link, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
 import {LinkedIn, Mail} from "@mui/icons-material";
+import {useEffect, useState} from "react";
 
 
 const teamMembers = [
@@ -101,13 +102,18 @@ function stringAvatar(name) {
     };
 }
 
-const imageSize = "9rem"
-
 function Team() {
     const theme = useTheme()
+    const matches = useMediaQuery(theme.breakpoints.up("sm"));
+    const [imageSize, setImageSize] = useState("9rem")
+
+    useEffect(() => {
+        setImageSize(matches ? "9rem" : "7rem")
+    }, [matches]);
+
     return (
-        <Container sx={{paddingTop: 10, paddingBottom: 10}} maxWidth={"xl"}>
-            <Typography variant={"h1"} gutterBottom>Meet the team</Typography>
+        <Container sx={{paddingTop: 10, paddingBottom: 10}}>
+            <Typography variant={"h2"} component={"h1"} gutterBottom>Meet the team</Typography>
             <Grid container spacing={3}>
                 {teamMembers.sort((a, b) => {
                     const nameA = a.name.toUpperCase(); // ignore upper and lowercase
@@ -134,7 +140,6 @@ function Team() {
                                         transform: "translate(0%,calc(-" + imageSize + " / 2 - " + theme.spacing(2) + "))",
                                         width: "100%",
                                         height: "auto",
-                                        pr: 1,
                                         display: "flex",
                                         justifyContent: "center",
                                     }}
@@ -146,7 +151,7 @@ function Team() {
                                             mb: 2,
                                             ...avatarPrep.sx
                                         }}
-                                                alt={"Image of "+ teamMember.name}
+                                                alt={"Image of " + teamMember.name}
                                         >
                                             {avatarPrep.children}
                                         </Avatar>
diff --git a/src/components/Theme/HackHpiTheme.js b/src/components/Theme/HackHpiTheme.js
index 6f1bbe4..1a2d976 100644
--- a/src/components/Theme/HackHpiTheme.js
+++ b/src/components/Theme/HackHpiTheme.js
@@ -69,11 +69,12 @@ const hackHpiTheme = responsiveFontSizes(createTheme(theme, {
 
     },
     typography: {
-
+        fontSize: 10,
         fontFamily: 'Neo Sans, Urbanist, Arial',
         h1: {
             fontFamily: 'Neo Sans, Urbanist, Arial',
             fontWeight: "bold",
+            //fontSize: "5rem"
             //lineHeight: "5.5rem",
             //fontSize: "7rem"
         },
diff --git a/src/components/TimeTable/TimeTable.jsx b/src/components/TimeTable/TimeTable.jsx
index 010a1f4..6cd2f04 100644
--- a/src/components/TimeTable/TimeTable.jsx
+++ b/src/components/TimeTable/TimeTable.jsx
@@ -21,17 +21,17 @@ export function TimeTable() {
                 <Container>
                     <Grid container alignItems={"center"} spacing={3}>
                         <Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
-                            <Avatar sx={{width: "70%", height: "auto", aspectRatio: "1/1"}}>SO</Avatar>
+                            <Avatar sx={{width: "70%", height: "auto", aspectRatio: "1/1", backgroundColor: "background.default"}}>SO</Avatar>
                         </Grid>
                         <Grid item xs={8}>
                             <Typography color={"text.disabled"}>
                                 08:00-09:00
                             </Typography>
                             <Typography sx={{fontWeight: 600}}>
-                                Keynote
+                                Hey There!
                             </Typography>
                             <Typography color={"text.disabled"}>
-                                by someone
+                                a Person
                             </Typography>
                         </Grid>
                     </Grid>
@@ -42,17 +42,17 @@ export function TimeTable() {
                 <Container>
                     <Grid container alignItems={"center"} spacing={3}>
                         <Grid item xs={2} sx={{display: "flex", justifyContent: "center"}}>
-                            <Avatar sx={{width: "70%", height: "auto", aspectRatio: "1/1"}}>SO</Avatar>
+                            <Avatar sx={{width: "70%", height: "auto", aspectRatio: "1/1", backgroundColor: "background.default"}}>SO</Avatar>
                         </Grid>
                         <Grid item xs={8}>
                             <Typography color={"text.disabled"}>
                                 08:00-09:00
                             </Typography>
                             <Typography sx={{fontWeight: 600}}>
-                                Keynote
+                                Nothing to see here yet
                             </Typography>
                             <Typography color={"text.disabled"}>
-                                by someone
+                                But soon, something will be here
                             </Typography>
                         </Grid>
                     </Grid>
@@ -63,18 +63,31 @@ export function TimeTable() {
 
     return (
         <HackHPIWrapper>
-            <Container maxWidth={"xl"} sx={{paddingTop: 10, paddingBottom: 10, blur: "3px"}}>
-                <Typography variant={"h1"} gutterBottom>Time Table</Typography>
-                <Grid container spacing={5}>
-                    <Grid item md={6} xs={12}>
-                        {timetable}
-                    </Grid>
-                    <Grid item md={6} xs={12}>
-                        {timetable}
-
-                    </Grid>
-
-                </Grid>
+            <Container sx={{paddingBottom: 10}}>
+                <Typography variant={"h2"} component={"h1"} gutterBottom>Time Table</Typography>
+                <Box sx={{position: "relative"}}>
+                    <Box sx={{
+                        position: "absolute",
+                        transform: "translate(-50%,-50%)",
+                        left: "50%",
+                        top: "50%",
+                        zIndex: 1000,
+                    }}>
+                        <Typography variant={"h5"} fontWeight={"bold"} >
+                            Will be announced soon
+                        </Typography>
+                    </Box>
+                    <Box sx={{filter: "blur(10px)"}}>
+                        <Grid container spacing={5}>
+                            <Grid item md={6} xs={12}>
+                                {timetable}
+                            </Grid>
+                            <Grid item md={6} xs={12}>
+                                {timetable}
+                            </Grid>
+                        </Grid>
+                    </Box>
+                </Box>
             </Container>
         </HackHPIWrapper>
     )
diff --git a/src/components/WhatToExpect/WhatToExpect.jsx b/src/components/WhatToExpect/WhatToExpect.jsx
index 2b46681..feed5cb 100644
--- a/src/components/WhatToExpect/WhatToExpect.jsx
+++ b/src/components/WhatToExpect/WhatToExpect.jsx
@@ -5,18 +5,18 @@ import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";
 function WhatToExpect() {
 
     return (
-        <HackHPIWrapper >
+        <HackHPIWrapper>
 
-            <Container sx={{paddingTop: 10, paddingBottom: 10}} maxWidth={"xl"}>
+            <Container sx={{paddingTop: 10, paddingBottom: 10}}>
                 <Grid container spacing={6} alignItems={"center"}>
                     <Grid item xs={12} md={8}>
-                        <Typography variant={"h1"} gutterBottom>
+                        <Typography variant={"h2"} component={"h1"} gutterBottom>
                             What to expect
                         </Typography>
-                        <Typography fontSize={"2rem"} lineHeight={"2.75rem"} display={"block"} fontWeight={"light"}>
+                        <Typography fontWeight={"light"} gutterBottom>
                             Explore the future of urban living at HPI in Potsdam.
                         </Typography>
-                        <Typography gutterBottom fontSize={"2rem"} lineHeight={"2.75rem"} display={"block"}
+                        <Typography gutterBottom display={"block"}
                                     fontWeight={"light"}>
                             Join motivated students for two days of
                             innovation, workshops, and collaboration with top-notch sponsors offering support and