From cedd055abff0e3f33e2689b98579fdc68de42a56 Mon Sep 17 00:00:00 2001
From: Tal-Ben-Avi <talb@webiya.co.il>
Date: Tue, 7 May 2024 17:16:30 +0300
Subject: [PATCH 1/2] editing button to change the text and url depend on the
 size of the screen

---
 .../website/src/blocks/HomepageHero.tsx       | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx
index 6280d86230..278aa26bad 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 (
     <>
       <ProvisionsPopup />
@@ -129,10 +144,14 @@ export const HomepageHero = ({ seo }: Props) => {
                 <Button
                   size="lg"
                   variant="secondaryHero"
-                  href="https://starkgate.starknet.io/"
-                  target="_blank"
+                  href={
+                    isLargerThanSm
+                      ? "https://starkgate.starknet.io/"
+                      : "/en/what-is-starknet"
+                  }
+                  target={isLargerThanSm ? "_blank" : ""}
                 >
-                  Bridge
+                  {isLargerThanSm ? "Bridge" : "Explore Starknet"}
                 </Button>
               </Stack>
             </Box>

From 4473da3d8c4e55c551f3f06487d33601bd828d84 Mon Sep 17 00:00:00 2001
From: Tal-Ben-Avi <talb@webiya.co.il>
Date: Thu, 9 May 2024 11:31:30 +0300
Subject: [PATCH 2/2] change "Bridge" & "Explore Starknet" to two separate
 buttons

---
 .../website/src/blocks/HomepageHero.tsx       | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx
index 278aa26bad..b83d0e0435 100644
--- a/workspaces/website/src/blocks/HomepageHero.tsx
+++ b/workspaces/website/src/blocks/HomepageHero.tsx
@@ -144,22 +144,24 @@ export const HomepageHero = ({ seo }: Props) => {
                 <Button
                   size="lg"
                   variant="secondaryHero"
-                  href={
-                    isLargerThanSm
-                      ? "https://starkgate.starknet.io/"
-                      : "/en/what-is-starknet"
-                  }
-                  target={isLargerThanSm ? "_blank" : ""}
+                  display={!isLargerThanSm ? "flex" : "none"}
+                  href={"/en/what-is-starknet"}
+                  target={"_blank"}
                 >
-                  {isLargerThanSm ? "Bridge" : "Explore Starknet"}
+                  {"Explore Starknet"}
+                </Button>
+                <Button
+                  size="lg"
+                  display={isLargerThanSm ? "flex" : "none"}
+                  variant="secondaryHero"
+                  href={"https://starkgate.starknet.io/"}
+                  target={"_blank"}
+                >
+                  {"Bridge"}
                 </Button>
               </Stack>
             </Box>
-            <Box
-              zIndex={0}
-              order={{ base: 0, lg: 1 }}
-              // boxSize={{ base: "20", lg: "8" }}
-            />
+            <Box zIndex={0} order={{ base: 0, lg: 1 }} />
             <Img
               position="relative"
               marginRight={{