⚒️ Fix grid & card info.

src/common/grid.tsx

@@ -4,7 +4,7 @@ import { SimpleGrid } from "@chakra-ui/react";
 
 const Grid = (props: LayoutProps) => {
   return (
-    <SimpleGrid minChildWidth="200px" spacing="30px" >
+    <SimpleGrid minChildWidth="160px" spacing="30px" >
       {props.children}
     </SimpleGrid>
   );

src/components/svgCard.tsx

@@ -1,15 +1,35 @@
 import React from "react";
 import { SVGCardProps } from "@/interfaces/components";
-import { Box, Flex, Image, useColorModeValue } from "@chakra-ui/react";
+import { Box, Center, Image, Text, useColorModeValue } from "@chakra-ui/react";
+import Tap from "@/animations/tap";
+import CustomLink from "@/common/link";
 
 const SVGCard = (props: SVGCardProps) => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   return (
-    <Box bg={bg} shadow="sm" maxW="50%" borderWidth="2px" borderRadius="10px" p="5">
-      <Flex direction="column" justifyContent="center" alignItems="center">
-        <Image boxSize="50px" src={props.svg} alt={props.title} />
-      </Flex>
-    </Box>
+    <Tap>
+      <CustomLink href={`/svg/${props.id}`}>
+        <Box
+          bg={bg}
+          p={4}
+          cursor="pointer"
+          borderRadius="10px"
+          borderWidth="1px"
+          mb="2"
+          _hover={{
+            shadow: "md",
+          }}
+          transition="all 0.2s"
+        >
+          <Center>
+            <Image boxSize="50px" src={props.svg} alt={props.title} />
+          </Center>
+          <Text mt="2" fontWeight="light" textAlign="center">
+            {props.title}
+          </Text>
+        </Box>
+      </CustomLink>
+    </Tap>
   );
 };