Homepage mobile styles

Author: dgca

components/BridgeDropdown/BridgeDropdown.tsx

@@ -31,9 +31,10 @@ function ButtonContents({
       boxShadow="2px 3px 0px black"
       borderRadius={28}
       onClick={toggleIsOpen}
+      w="100%"
       {...rest}
     >
-      <Flex px={10} h={14} alignItems="center" gap={2}>
+      <Flex px={10} h={14} alignItems="center" gap={2} justifyContent="center">
         <Text fontSize="lg">Bridge</Text>
         {isOpen ? <IoChevronUp size={20} /> : <IoChevronDown size={20} />}
       </Flex>
@@ -51,7 +52,7 @@ function BridgeLink({ direction }: { direction: "out" | "in" }) {
   return (
     <Flex
       as="a"
-      h="44px"
+      h="64px"
       alignItems="center"
       borderTop="1px solid black"
       px={5}

components/HomePage/Hero/Hero.tsx

@@ -10,6 +10,8 @@ import {
   FancyArrowRight,
   AspectRatio,
   HStack,
+  Stack,
+  Flex,
 } from "@/lib/ui";
 import Image from "next/image";
 import Link from "next/link";
@@ -60,13 +62,23 @@ export function Hero() {
               asset information from public view. With read-only view keys, you
               remain compliant and in control.
             </Text>
-            <HStack gap={4}>
+            <Flex
+              gap={4}
+              flexDirection={{
+                base: "column",
+                lg: "row",
+              }}
+              alignItems={{
+                base: "stretch",
+                lg: "center",
+              }}
+            >
               <Button size="lg" as={Link} href="/use/get-started">
                 <Box mr={4}>Get Started</Box>
                 <FancyArrowRight />
               </Button>
               <BridgeDropdown />
-            </HStack>
+            </Flex>
           </Box>
         </GridItem>
         <GridItem position="relative">

components/HomePage/NewsDesk/NewsDesk.tsx

@@ -1,6 +1,13 @@
-import { Box, Text, AspectRatio, HStack, Heading, Container } from "@/lib/ui";
+import {
+  Box,
+  Text,
+  AspectRatio,
+  Heading,
+  Container,
+  Grid,
+  GridItem,
+} from "@/lib/ui";
 import Image from "next/image";
-import Link from "next/link";
 import { MEDIA_ITEMS } from "@/content/media/media";
 
 export function NewsDesk() {
@@ -11,7 +18,10 @@ export function NewsDesk() {
         lg: "1600px",
       }}
       w="100%"
-      px={16}
+      px={{
+        base: 4,
+        lg: 16,
+      }}
     >
       <Box>
         <Text fontSize="md" textTransform="uppercase" textAlign="center" mb={8}>
@@ -45,30 +55,49 @@ function Story({
   image?: string | null;
 }) {
   return (
-    <HStack
+    <Grid
       as="a"
       href={href}
       target="_blank"
-      justify="space-between"
+      templateColumns={{
+        base: "1fr",
+        lg: "7fr 3fr",
+      }}
       borderTop="1px solid black"
       py={8}
+      flexDirection={{
+        base: "column",
+        lg: "row",
+      }}
+      gap={{
+        base: 6,
+        lg: 8,
+      }}
       _hover={{
         textDecoration: "underline",
       }}
     >
-      <Box maxW="60ch">
+      <GridItem
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        maxW={{
+          base: "auto",
+          lg: "60ch",
+        }}
+      >
         <Text fontSize="md" mb={3}>
           {date}
         </Text>
         <Heading fontSize="lg">{title}</Heading>
-      </Box>
-      <Box w="40%" borderRadius={9} overflow="hidden">
+      </GridItem>
+      <GridItem borderRadius={9} overflow="hidden">
         {image && (
           <AspectRatio ratio={362 / 154}>
             <Image alt="" src={image} fill />
           </AspectRatio>
         )}
-      </Box>
-    </HStack>
+      </GridItem>
+    </Grid>
   );
 }

components/HomePage/Safety/Safety.tsx

@@ -53,7 +53,17 @@ export function Safety() {
           encrypted network.
         </Text>
 
-        <Grid templateColumns="1fr 1fr" gap={8} mb="128px">
+        <Grid
+          templateColumns={{
+            base: "1fr",
+            lg: "1fr 1fr",
+          }}
+          gap={{
+            base: 6,
+            lg: 8,
+          }}
+          mb="128px"
+        >
           <GridItem display="flex" alignItems="stretch">
             <ItemCard
               name="The Node App"
@@ -83,7 +93,16 @@ export function Safety() {
           eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </Text>
 
-        <Grid templateColumns="1fr 1fr" gap={8}>
+        <Grid
+          templateColumns={{
+            base: "1fr",
+            lg: "1fr 1fr",
+          }}
+          gap={{
+            base: 6,
+            lg: 8,
+          }}
+        >
           <GridItem display="flex" alignItems="stretch">
             <ItemCard
               name="Chainport Bridge"

components/HomePage/Tokenomics/Tokenomics.tsx

@@ -5,7 +5,15 @@ const BG = "#C7F182";
 
 export function Tokenomics() {
   return (
-    <Box bg={BG} py="150px" borderY="1px solid black">
+    <Box
+      bg={BG}
+      py={{
+        base: 24,
+        md: 32,
+        xl: "150px",
+      }}
+      borderY="1px solid black"
+    >
       <FancyLinkSection
         reverse
         heading="Understanding our Tokenomics"
@@ -20,11 +28,6 @@ export function Tokenomics() {
             lg: "1600px",
           },
           w: "100%",
-          mb: {
-            base: 24,
-            md: 32,
-            xl: "150px",
-          },
           pl: {
             lg: "40px",
             xl: "64px",