feat: add chraka ui vue logo in hero

Author: carwack

website/src/assets/chakra-ui-vue-logo.svg

@@ -6,11 +6,12 @@
     :pt="{ base: '3rem', sm: '150px' }"
     :px="[4, 10, 12]"
     :pb="{ base: '3rem', sm: '0' }"
-    borderBottom="1px solid"
+    :ml="[0, 10, 12]"
+    shadow="lg"
   >
     <chakra.div>
       <chakra.h1
-        maxW="16ch"
+        maxW="20ch"
         :fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
         fontFamily="heading"
         letterSpacing="tighter"
@@ -19,7 +20,7 @@
         lineHeight="1.2"
       >
         Build accessible Vue apps
-        <chakra.span color="green.600" px="5px">with speed </chakra.span>
+        <chakra.span color="green.600" px="5px">with speed</chakra.span>
       </chakra.h1>
     </chakra.div>
     <chakra.p
@@ -64,6 +65,14 @@
         Github
       </CButton>
     </CFlex>
+    <chakra.img
+      src="/src/assets/chakra-ui-vue-logo.svg#svgView(viewBox(0,0,150,190))"
+      alt="Chakra UI Vue Logo"
+      :w="{ base: '0', sm: '45%' }"
+      pos="absolute"
+      bottom="-5%"
+      right="0"
+    />
   </chakra.header>
 </template>
 

website/src/components/home/Hero.vue

@@ -3,18 +3,19 @@
     as="section"
     :flex-dir="['column', 'column', 'row']"
     font-family="body"
-    bg="green.50"
-    :pl="[4, 10, 12]"
+    :pl="[0, 10, 12]"
     :py="[4, 10, 10]"
   >
     <chakra.div
       d="grid"
       :grid-template-columns="['auto', 'auto', 'repeat(3, 1fr)']"
       :style="{ gap: '1.5rem' }"
-      border="1px solid"
+      shadow="lg"
       bg="white"
+      py="10"
+      :px="{ base: '3', sm: '10' }"
     >
-      <CBox m="3">
+      <CBox>
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -32,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>
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -50,7 +51,7 @@
         Quickly and easily reference values from your theme throughout your
         entire application, on any component.
       </CBox>
-      <CBox m="3">
+      <CBox>
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"

website/src/components/home/PilersHero.vue

@@ -5,7 +5,6 @@
     w="100%"
     pt="60px"
     bg="green.50"
-    display="block"
   >
     <Hero />
     <PilersHero />

website/src/pages/index.vue

@@ -1,6 +1,6 @@
 @import './markdown.css';
 
-body { overflow-y: scroll; }
+body { overflow-y: scroll; color: #292929; }
 h1,
 h2,
 h3,