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 | import { Box, Container, styled, useMediaQuery } from "@mui/material";
import { useQueryClient } from "@tanstack/react-query";
import Button from "components/Button";
import HtmlMeta from "components/HtmlMeta";
import { useAuthContext } from "features/auth/AuthProvider";
import { GLOBAL } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { signupRoute } from "routes";
import { theme } from "theme";
import CouchersMission from "./CouchersMission";
import HeroSection from "./HeroSection";
import MapSection from "./MapSection";
import SocialProof from "./SocialProof";
import WhyCouchersSection from "./WhyCouchersSection";
const StyledSpacer = styled("div")(({ theme }) => ({
height: "3.5rem",
}));
export default function LandingPage() {
const { authState } = useAuthContext();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const router = useRouter();
const { t } = useTranslation(GLOBAL);
// This makes sure anything didn't get cleared up in the query cache in the Logout
// component definitely gets cleared here when redirected to the landing page
const queryClient = useQueryClient();
useEffect(() => {
Iif (!authState.authenticated) {
queryClient.clear();
}
}, [queryClient, authState.authenticated]);
return (
<>
<HtmlMeta />
<Container component="section" maxWidth="lg">
<HeroSection />
</Container>
<StyledSpacer />
<Container
component="section"
disableGutters
maxWidth={false}
sx={{
display: "flex",
justifyContent: "center",
backgroundColor: theme.palette.grey[50],
}}
>
<SocialProof />
</Container>
<StyledSpacer />
<Container component="section" maxWidth="lg">
<WhyCouchersSection />
</Container>
<StyledSpacer />
<Container component="section" maxWidth="lg">
<MapSection />
</Container>
<StyledSpacer />
<Container component="section" maxWidth="lg">
<CouchersMission />
</Container>
{isMobile && !authState.authenticated && (
<Box
sx={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2),
boxShadow: theme.shadows[1],
zIndex: 10,
}}
>
<Button
variant="contained"
size="small"
fullWidth
sx={{ fontSize: "1.3rem", borderRadius: theme.spacing(1) }}
onClick={() => router.push(signupRoute)}
>
{t("join_us")}
</Button>
</Box>
)}
</>
);
}
|