hackhpi.github.io/src/components/WhatToExpect/WhatToExpect.jsx at 3b3714b65449bebc105fe8d42db0f09c5cd4227a · HackHPI/hackhpi.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
"use client"
import {Box, Container, Grid, IconButton, Typography} from "@mui/material";
import {WindowCard} from "../WindowCard/WindowCard.jsx";
import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";
import {PlayArrow} from "@mui/icons-material";
import {useState} from "react";

function WhatToExpect() {

    const [playVideo, setPlayVideo] = useState(false)
    const vimeoVideoId = "867922224"

    return (
        <HackHPIWrapper>

            <Container sx={{paddingTop: 10, paddingBottom: 7}}>
                <Grid container spacing={6} alignItems={"center"}>
                    <Grid item xs={12} md={8}>
                        <Typography variant={"h2"} component={"h1"} gutterBottom>
                            What to expect
                        </Typography>
                        {/* TODO: Add topic of 2026 */}
                        {/*<Typography fontWeight={"light"} gutterBottom>*/}
                        {/*    Explore the future of health at HPI in Potsdam.*/}
                        {/*</Typography>*/}
                        <Typography gutterBottom display={"block"}
                                    fontWeight={"light"}>
                            Join motivated students for two days of
                            innovation, workshops, and collaboration with top-notch sponsors offering support and
                            expertise.
                            Tackle a challenge and dive into the world of agriculture and climate.
                        </Typography>

                    </Grid>
                    <Grid item xs={12} md={4} sx={{display: "flex", justifyContent: "center"}}>
                        <Box sx={{width: "100%"}}>
                            <WindowCard>
                                {playVideo ? (
                                    <iframe
                                        src={`https://player.vimeo.com/video/${vimeoVideoId}?h=30cf0b8b55&title=0&byline=0&portrait=0&autoplay=1&muted=1`}
                                        style={{aspectRatio: "16 / 9", borderRadius: "5px", width: "100%", border: 0}}
                                        allow="autoPlay; fullscreen; picture-in-picture"
                                        allowFullScreen
                                        title={"Image Movie"}
                                    />
                                ) : (
                                    <Box
                                        style={{
                                            aspectRatio: "16 / 9",
                                            borderRadius: "5px",
                                            width: "100%",
                                            background: `linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://vumbnail.com/${vimeoVideoId}.jpg)`,
                                            backgroundRepeat: "no-repeat",
                                            backgroundSize: "cover",
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                        }}
                                    >
                                        <IconButton onClick={() => setPlayVideo(true)}>
                                            <PlayArrow sx={{fontSize: "3rem"}}/>
                                        </IconButton>
                                    </Box>
                                )}

                            </WindowCard>
                        </Box>
                    </Grid>
                </Grid>
            </Container>
        </HackHPIWrapper>
    )
}

export default WhatToExpect