Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { styled, Typography } from "@mui/material";
import { useTranslation } from "i18n";
import { PRESS } from "i18n/namespaces";
import HeroImageAttribution from "../dashboard/Hero/HeroImageAttribution";
const StyledContainer = styled("div")({
display: "flex",
alignItems: "center",
height: "14rem",
position: "relative",
overflow: "hidden",
backgroundColor: "var(--mui-palette-primary-main)",
});
const StyledImage = styled("img")({
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: "center",
});
const StyledOverlay = styled("div")({
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: "linear-gradient(#00000066, #000000da)",
});
const StyledHeading = styled("h1")(({ theme }) => ({
color: "var(--mui-palette-common-white)",
fontSize: "2rem",
fontWeight: "500",
margin: 0,
[theme.breakpoints.up("sm")]: {
fontSize: "2.5rem",
},
[theme.breakpoints.up("md")]: {
fontSize: "3rem",
},
}));
const StyledContentContainer = styled("div")(({ theme }) => ({
position: "absolute",
padding: "2rem",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
textAlign: "center",
[theme.breakpoints.up("sm")]: {
textAlign: "left",
},
}));
export default function Hero() {
const { t } = useTranslation([PRESS]);
const email = "press@couchers.org";
return (
<StyledContainer>
<StyledImage
src="https://cdn.couchers.org/img/hero/2048.jpeg"
srcSet={[
"https://cdn.couchers.org/img/hero/1024.jpeg 1024w",
"https://cdn.couchers.org/img/hero/2048.jpeg 2048w",
"https://cdn.couchers.org/img/hero/4096.jpeg 4096w",
].join(", ")}
sizes="100vw"
alt=""
/>
<StyledOverlay />
<HeroImageAttribution />
<StyledContentContainer>
<StyledHeading>{t("hero.title")}</StyledHeading>
<Typography
sx={{
fontSize: "1.25rem",
color: "var(--mui-palette-common-white)",
}}
>
{t("hero.description", { email })}
</Typography>
</StyledContentContainer>
</StyledContainer>
);
}
|