New svgs, bug fixes & new design page

components/card/design.js

@@ -0,0 +1,26 @@
+import { Box, VStack, Icon, Text, Divider } from "@chakra-ui/react";
+import React from "react";
+
+const Design = ({ icon, title, children }) => {
+  return (
+    <Box
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      _hover={{ shadow: "md", transition: "all .2s" }}
+    >
+      <Box p="6">
+        <VStack spacing={3}>
+          <Icon as={icon} w={16} h={16} />
+          <Text fontSize="3xl" fontWeight="semibold">
+            {title}
+          </Text>
+          <Divider />
+          <Box fontSize="2xl">{children}</Box>
+        </VStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default Design;

components/card/image.js

@@ -0,0 +1,23 @@
+import { Box, Image } from "@chakra-ui/react";
+import React from "react";
+
+const CardImage = ({title, image, children}) => {
+  return (
+    <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+      <Image src={image} alt={title} width="60" />
+      <Box p="6">
+        <Box
+          mt="1"
+          as="h4"
+          lineHeight="tight"
+          isTruncated
+        >
+          {title}
+        </Box>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default CardImage;