Update react-img-mapper to 1.5, translate contat page

site/pages/contact.tsx

@@ -1,31 +1,35 @@
 import { AtSignIcon, PhoneIcon } from '@chakra-ui/icons'
-import { Box, Heading, Stack, Text } from '@chakra-ui/react'
+import { Box, Heading, SimpleGrid, Stack, Text } from '@chakra-ui/react'
 import { Layout } from '@components/common'
 import { Text as TextUI } from '@components/ui'
+import { useRouter } from 'next/router'
 
 export default function Contact() {
+
+  const { locale } = useRouter()
+
   return (
     <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
       <Box textAlign="center" mb={"10"}>
-        <TextUI className='mb-5' variant="heading">Contatti</TextUI>
+        <TextUI className='mb-5' variant="heading">{locale == "it" ? "Contatti" : "Contact Us"}</TextUI>
         <TextUI className="">
-          Puoi contattarci usando i recapiti che trovi qui sotto!
+          {locale == "it" ? "Puoi contattarci usando i recapiti che trovi qui sotto!" : "You can contact us using the contact details below!"}
         </TextUI>
       </Box>
-      <Stack direction={['column', 'row']} spacing='24px'>
-        <Box textAlign="center" py={10} px={6}>
+      <SimpleGrid columns={2} spacing='24px'>
+        <Box textAlign="center" py={2}>
           <AtSignIcon boxSize={'40px'} color={'orange.300'} />
           <Text fontWeight={"bold"} fontSize="18px" mt={3} mb={2}>
             <a href= "mailto:safaraecommerce@protonmail.com">safaraecommerce@protonmail.com</a>
           </Text>
         </Box>
-        <Box textAlign="center" py={10} px={6}>
+        <Box textAlign="center" py={2}>
           <PhoneIcon boxSize={'40px'} color={'orange.300'} />
           <Text fontWeight={"bold"} fontSize="18px" mt={3} mb={2}>
             <a href="tel:+390123456789">+39 3923790948</a>
           </Text>
         </Box>
-      </Stack>
+      </SimpleGrid>
     </div>
   )
 }