refactor(website): make the build page responsive

semaphore-protocol · Nov 9, 2023 · 491bfe5 · 491bfe5
1 parent 962bcc9
commit 491bfe5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/apps/website/src/app/build/page.tsx b/apps/website/src/app/build/page.tsx
@@ -89,11 +89,11 @@ export default function Build() {
                 <Flex
                     justify={"center"}
                     alignItems={"center"}
-                    mt={"125px"}
-                    ml={"80px"}
-                    mr={"188px"}
-                    mb={"109px"}
-                    w={"445px"}
+                    mt={{ base: "120px", xl: "125px" }}
+                    ml={{ base: "32px", xl: "80px" }}
+                    mr={{ base: "32px", xl: "188px" }}
+                    mb={{ base: "120px", xl: "109px" }}
+                    w={{ base: "auto", xl: "445px" }}
                 >
                     <VStack alignItems={"left"}>
                         <Text fontSize={"44px"} fontWeight={"500"}>

diff --git a/apps/website/src/components/ActionCard.tsx b/apps/website/src/components/ActionCard.tsx
@@ -14,9 +14,9 @@ export default function ActionCard({ title, description, buttonText }: ActionCar
             borderRadius={"24px"}
             width={{ base: "full", xl: "1110px" }}
             height={{ base: "full", xl: "244px" }}
-            direction={{ base: "column", dm: "row" }}
+            direction={{ base: "column", xl: "row" }}
         >
-            <CardBody padding={0} m={"41px 80px"}>
+            <CardBody padding={0} m={{base: "64px 32px", xl: "41px 80px"}}>
                 <Flex
                     justifyContent={"space-between"}
                     alignItems={"center"}

diff --git a/apps/website/src/components/ToolsCard.tsx b/apps/website/src/components/ToolsCard.tsx
@@ -30,7 +30,7 @@ export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardP
             border={"1px"}
             borderColor={"alabaster.950"}
             padding={"32px"}
-            width={{ base: "full", sm: "348px" }}
+            width={{ base: "full", lg: "348px" }}
             height={"501px"}
         >
             <HStack mb={"2rem"}>{icon}</HStack>