Added a button

HackHPI · Feb 14, 2024 · 8ecc316 · 8ecc316
1 parent 7867582
commit 8ecc316
Showing 1 changed file with 75 additions and 54 deletions.
diff --git a/src/components/LandingImage/LandingImage2.jsx b/src/components/LandingImage/LandingImage2.jsx
@@ -1,66 +1,87 @@
 'use client'
-import {Box, Button, Container, Stack} from "@mui/material";
+import {Box, Button, Card, Container, Stack, Typography} from "@mui/material";
 import {TypeAnimation} from "react-type-animation";
 import Countdown from "./Countdown.jsx";
+import {CalendarMonthOutlined} from "@mui/icons-material";
 
 function LandingImage2() {
 
 
     return (
-            <Box sx={{
-                height: "80vh",
-                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%"}} maxWidth={false}>
-                    <Box sx={{
-                        height: "100%",
-                        width: "100%",
-                        display: "flex",
-                        justifyContent: "space-around",
-                        flexDirection: "column"
-                    }}>
+        <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"}>
+                <Box sx={{
+                    height: "80%",
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "space-around",
+                    flexDirection: "column"
+                }}>
 
-                        <img src={"/HackHPI24_white.png"} width={"200rem"} 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}
-                            />
-                        </div>
-                        <Stack direction={"row"}>
-                            <Button
-                                variant={"contained"}
-                                sx={{
-                                    //background: "linear-gradient(145deg, rgba(76,201,240,1) 0%, rgba(247,37,133,1) 100%);",
-                                    backgroundColor: "secondary.main",
-                                    borderWidth: "1rem",
-                                }}
-                                size={"large"}
-                            >
-                                SignUp
-                            </Button>
-                        </Stack>
-                    </Box>
-                </Container>
-            </Box>
+                    <img src={"/HackHPI24_white.png"} width={"200rem"} 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}
+                        />
+                    </div>
+                    <Stack direction={"row"} spacing={5}>
+                        <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",
+                                height: "3.5rem",
+                                fontSize: "1.25rem",
+                            }}
+                        >
+                            SignUp
+                        </Button>
+                        <Card elevation={5}>
+                            <Stack direction={"row"} alignItems={"center"} display={"flex"} sx={{height: "100%"}} spacing={3}>
+                                <CalendarMonthOutlined sx={{fontSize: "2rem"}}/>
+                                <Typography sx={{fontSize:"1rem"}}>5th - 6th April</Typography>
+                            </Stack>
+                        </Card>
+                        <Button
+                            variant={"contained"}
+                            disabled
+                            sx={{
+                                borderWidth: "1rem",
+                                width: "15rem",
+                                height: "3.5rem",
+                                fontSize: "1.25rem",
+                            }}
+                        >
+                            SignUp
+                        </Button>
+                    </Stack>
+                </Box>
+            </Container>
+        </Box>
     )
 }