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) => {
+
-
+