From 491bfe53c4aaac1d74bf88e16fcccc1286cbe427 Mon Sep 17 00:00:00 2001
From: vplasencia <v.pcalana@gmail.com>
Date: Thu, 9 Nov 2023 01:22:40 +0100
Subject: [PATCH] refactor(website): make the build page responsive

---
 apps/website/src/app/build/page.tsx        | 10 +++++-----
 apps/website/src/components/ActionCard.tsx |  4 ++--
 apps/website/src/components/ToolsCard.tsx  |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/app/build/page.tsx b/apps/website/src/app/build/page.tsx
index 58dbae51b..b2a9819f1 100644
--- 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
index 7cb220f4d..3a68bb6b0 100644
--- 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
index daf1096bd..cf50c872c 100644
--- 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>