All files / app/features/dashboard/Hero Hero.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Container } from "@material-ui/core";
import { DASHBOARD } from "i18n/namespaces";
import Image from "next/image";
import { useTranslation } from "next-i18next";
import makeStyles from "utils/makeStyles";
 
import HeroButton from "./HeroButton";
import HeroImageAttribution from "./HeroImageAttribution";
import HeroLinks from "./HeroLinks";
import HeroSearch from "./HeroSearch";
// Photo by Mesut Kaya on Unsplash - https://unsplash.com/photos/eOcyhe5-9sQ
import heroImage from "./mesut-kaya-eOcyhe5-9sQ-unsplash.jpeg";
 
const useStyles = makeStyles((theme) => ({
  outerContainer: {
    position: "relative",
  },
  contentContainer: {
    zIndex: 1,
    position: "relative",
    display: "flex",
    flexDirection: "column",
    padding: theme.spacing(2, 2),
    [theme.breakpoints.up("sm")]: {
      padding: theme.spacing(4, 2),
    },
  },
}));
 
export default function Hero() {
  const { t } = useTranslation(DASHBOARD);
  const classes = useStyles();
 
  return (
    <div className={classes.outerContainer}>
      <Container maxWidth="md" className={classes.contentContainer}>
        <HeroLinks />
        <HeroSearch />
        <HeroButton />
      </Container>
 
      <HeroImageAttribution />
 
      <Image
        src={heroImage}
        placeholder="blur"
        layout="fill"
        objectFit="cover"
        objectPosition="50% 50%"
        alt={t("hero_image_alt")}
      />
    </div>
  );
}