diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx index 6280d86230..b83d0e0435 100644 --- a/workspaces/website/src/blocks/HomepageHero.tsx +++ b/workspaces/website/src/blocks/HomepageHero.tsx @@ -1,4 +1,11 @@ -import { Box, Flex, Img, Stack } from "@chakra-ui/react"; +import { + Box, + Flex, + Img, + Stack, + useTheme, + useMediaQuery, +} from "@chakra-ui/react"; import { Button } from "@ui/Button"; import { Heading } from "@ui/Typography/Heading"; import { Text } from "@ui/Typography/Text"; @@ -12,6 +19,14 @@ type Props = { }; export const HomepageHero = ({ seo }: Props) => { + const theme = useTheme(); + const breakpoints = theme.breakpoints; + const { md } = breakpoints; + const [isLargerThanSm] = useMediaQuery(`(min-width: ${md})`, { + ssr: true, + fallback: false, + }); + return ( <> @@ -129,18 +144,24 @@ export const HomepageHero = ({ seo }: Props) => { + - +