feat: change icon color and headings

Author: carwack

website/src/pages/index.vue

@@ -22,17 +22,16 @@
           <CFlex align-items="center" mb="5">
             <CFlex
               justify-content="center"
-              color="white"
               align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
               h="50px"
               rounded="full"
             >
-              <IconAccessibilityAlt class="icon" />
+              <IconAccessibilityAlt />
             </CFlex>
-            <chakra.h4 size="md"> Accessible </chakra.h4>
+            <chakra.h2 font-size="md"> Accessible </chakra.h2>
           </CFlex>
           Chakra UI strictly follows WAI-ARIA standards. All components come
           with proper attributes and keyboard interactions out of the box.
@@ -41,17 +40,16 @@
           <CFlex align-items="center" mb="5">
             <CFlex
               justify-content="center"
-              color="white"
               align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
               h="50px"
               rounded="full"
             >
-              <ColorPalette class="icon" />
+              <ColorPalette />
             </CFlex>
-            <chakra.h4 size="md"> Themeable </chakra.h4>
+            <chakra.h2 font-size="md"> Themeable </chakra.h2>
           </CFlex>
           Quickly and easily reference values from your theme throughout your
           entire application, on any component.
@@ -60,17 +58,16 @@
           <CFlex align-items="center" mb="5">
             <CFlex
               justify-content="center"
-              color="white"
               align-items="center"
               mr="5"
               bg="vue.400"
               w="50px"
               h="50px"
               rounded="full"
             >
-              <Cube class="icon" />
+              <Cube />
             </CFlex>
-            <chakra.h4 size="md"> Composable </chakra.h4>
+            <chakra.h2 font-size="md"> Composable </chakra.h2>
           </CFlex>
           Components were built with composition in mind. You can leverage any
           component to create new things.