feat: add responsive ui

Author: carwack

website/src/components/home/DiscordHero.vue

@@ -14,7 +14,7 @@
       flex-dir="row"
       py="10"
       :mr="{ base: '0', sm: '10' }"
-      :w="{ base: '100%', md: 'auto' }"
+      :w="{ base: '100%', sm: 'auto' }"
     >
       <CIcon name="discord" size="48px" mr="5" />
       <CBox>
@@ -30,13 +30,15 @@
       :w="{ base: 0, md: '10' }"
       h="100%"
       bg="vue.50"
+      mx="10"
       transform="skewX(20deg)"
     />
     <CFlex
       flex-dir="row"
-      py="10"
+      :pt="[0, 10]"
+      pb="10"
       h="100%"
-      :w="{ base: '100%', md: 'auto' }"
+      :w="{ base: '100%', sm: 'auto' }"
       align="center"
     >
       <CButton
@@ -50,6 +52,7 @@
         color="black"
         bg="white"
         shadow="lg"
+        :w="{ base: '100%', sm: 'auto' }"
       >
         Join the #Chakra Discord!
       </CButton>

website/src/components/home/PilersHero.vue

@@ -15,7 +15,7 @@
       py="10"
       :px="{ base: '3', sm: '10' }"
     >
-      <CBox m="3">
+      <CBox my="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -33,7 +33,7 @@
         Chakra UI strictly follows WAI-ARIA standards. All components come with
         proper attributes and keyboard interactions out of the box.
       </CBox>
-      <CBox m="3">
+      <CBox my="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -51,7 +51,7 @@
         Quickly and easily reference values from your theme throughout your
         entire application, on any component.
       </CBox>
-      <CBox m="3">
+      <CBox m="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"