All files / app/features/landing CouchersIntroduction.tsx

100% Statements 17/17
100% Branches 2/2
100% Functions 3/3
100% Lines 15/15

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 931x 1x 1x 1x 1x 1x 1x   2x                         1x 2x 2x 2x   2x 1x                                                                                                                               3x  
import { styled, Typography, useMediaQuery } from "@mui/material";
import Button from "components/Button";
import { Trans, useTranslation } from "i18n";
import { GLOBAL, LANDING } from "i18n/namespaces";
import { useRouter } from "next/router";
import { signupRoute } from "routes";
import { theme } from "theme";
 
const StyledIntroduction = styled("div")(({ theme }) => ({
  flexDirection: "column",
  display: "flex",
  textAlign: "left",
  width: "45%",
 
  [theme.breakpoints.down("md")]: {
    width: "100%",
    alignItems: "center",
    textAlign: "center",
  },
}));
 
const CouchersIntroduction = () => {
  const { t } = useTranslation([GLOBAL, LANDING]);
  const router = useRouter();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
  const routeToSignupPage = () => {
    router.push(signupRoute);
  };
 
  return (
    <StyledIntroduction>
      <Typography
        lineHeight={1.1}
        fontWeight="bold"
        sx={{
          fontSize: "3.5rem",
 
          [theme.breakpoints.down("md")]: {
            width: "100%",
            marginBottom: theme.spacing(2),
            fontSize: "2rem",
          },
        }}
      >
        {t("landing:introduction_title")}
      </Typography>
      <>
        <Typography
          sx={{
            marginTop: theme.spacing(3),
            marginBottom: theme.spacing(1),
            position: "relative",
            fontWeight: 400,
            fontSize: "1.3rem",
          }}
        >
          <Trans
            i18nKey="landing:introduction_subtitle"
            components={{
              bold: <strong style={{ fontWeight: 700 }} />,
            }}
          />
        </Typography>
        <Typography
          sx={{
            fontWeight: "bold",
            fontSize: "1.2rem",
          }}
        >
          {t("landing:introduction_subtitle2")}
        </Typography>
        {router.pathname === "/" && !isMobile && (
          <Button
            onClick={routeToSignupPage}
            size="large"
            color="primary"
            sx={{
              marginTop: 4,
              width: theme.spacing(20),
              fontSize: "1.3rem",
            }}
          >
            {t("global:join_us")}
          </Button>
        )}
      </>
    </StyledIntroduction>
  );
};
 
export default CouchersIntroduction;