hackhpi.github.io/src/components/Footer/Footer.jsx at f6651ea1eff351cb8576a1e507629bab36a040b7 · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
'use client'
import {
    Card,
    Container,
    Divider,
    Grid,
    IconButton,
    Link,
    Stack,
    Typography,
    useMediaQuery,
    useTheme
} from "@mui/material";
import {GitHub, Instagram, LinkedIn, Mail} from "@mui/icons-material";
import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";
import HackHpiLogo from "../../assets/svg/HackHPI_white.svg"

const socials = [
    {
        icon: <GitHub/>,
        link: "https://github.com/HackHPI/hackhpi.github.io",
    },
    {
        icon: <LinkedIn/>,
        link: "https://www.linkedin.com/company/hackhpi",
    },
    {
        icon: <Instagram/>,
        link: "https://www.instagram.com/hack.hpi",
    },
    {
        icon: <Mail/>,
        link: "mailto:support@hackhpi.org",
    },
]


function Footer() {

    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.up('sm'));


    return (
        <HackHPIWrapper>
            <Card sx={{
                height: "17rem",
                display: "flex",
                alignItems: "end",
                borderBottomRightRadius: 0,
                borderBottomLeftRadius: 0,
                pb: 3,
                pt: 3
            }} elevation={10}>
                <Container maxWidth={"xl"}>
                    <Grid container spacing={2}>
                        <Grid item xs={3} sx={{display: matches ? undefined : "none"}}>
                            <Link href={"/"}>
                                <img src={HackHpiLogo.src} style={{height: "5rem", width: "auto"}} alt={"Logo of HPI"}/>
                            </Link>
                        </Grid>
                        <Grid item xs>
                            <Typography variant={"h5"} gutterBottom>HPI</Typography>
                            <Typography>
                                <Link sx={{textDecoration: "none", color: "inherit"}} href={"https://hpi.de/"}>
                                    Website
                                </Link>
                            </Typography>
                            <Typography>
                                <Link sx={{textDecoration: "none", color: "inherit"}}
                                      href={"https://hpi.de/en/media/overview.html"}>
                                    Public Relations
                                </Link>
                            </Typography>
                        </Grid>
                        <Grid item xs>
                            <Typography variant={"h5"} gutterBottom>Legal</Typography>
                            <Typography>
                                <Link sx={{textDecoration: "none", color: "inherit"}}
                                      href={"/imprint"}>
                                    Imprint
                                </Link>
                            </Typography>
                            <Typography>
                                <Link sx={{textDecoration: "none", color: "inherit"}}
                                      href={"/privacy"}>
                                    Privacy Policy
                                </Link>
                            </Typography>
                        </Grid>
                        <Grid item xs>
                            <Typography variant={"h5"} gutterBottom>More</Typography>

                            <Typography>
                                <Link sx={{textDecoration: "none", color: "inherit"}}
                                      href={"https://static.mlh.io/docs/mlh-code-of-conduct.pdf"}>
                                    Code of Conduct
                                </Link>
                            </Typography>
                        </Grid>
                    </Grid>
                    <Divider sx={{mb: 3, mt: 3}}/>
                    <Grid container>
                        <Grid item xs={12} md={6} display={"flex"} alignItems={"center"}>
                            <Typography color={"text.disabled"}>© {new Date().getFullYear()} HackHPI. All rights
                                reserved.</Typography>
                        </Grid>
                        <Grid item xs={12} md={6} display={"flex"} justifyContent={"end"}>
                            <Stack direction={"row"}>
                                {socials.map((social) => (
                                    <IconButton
                                        sx={{color: "text.secondary"}}
                                        key={social.link}
                                        component={Link}
                                        href={social.link}
                                        target={"_blank"}
                                        rel={"noopener"}
                                    >
                                        {social.icon}
                                    </IconButton>
                                ))}
                            </Stack>
                        </Grid>
                    </Grid>
                </Container>
            </Card>
        </HackHPIWrapper>
    )
}

export default Footer