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

pnpm-lock.yaml

@@ -651,11 +651,10 @@ importers:
       react-fast-marquee: ^1.3.1
       react-h5-audio-player: ^3.8.6
       react-icons: ^4.7.1
-      react-img-mapper: ^1.4.0
+      react-img-mapper: ^1.5.0
       react-merge-refs: ^2.0.1
       react-slick: ^0.29.0
       react-use-measure: ^2.1.1
-      reactjs-img-mapper: ^1.0.3
       screenfull: ^6.0.2
       tabbable: ^5.2.1
       tailwindcss: ^3.0.13
@@ -701,11 +700,10 @@ importers:
       react-fast-marquee: 1.3.5_biqbaboplfbrettd7655fr4n2y
       react-h5-audio-player: 3.8.6_biqbaboplfbrettd7655fr4n2y
       react-icons: 4.7.1_react@18.2.0
-      react-img-mapper: 1.4.0_biqbaboplfbrettd7655fr4n2y
+      react-img-mapper: 1.5.0_biqbaboplfbrettd7655fr4n2y
       react-merge-refs: 2.0.1
       react-slick: 0.29.0_biqbaboplfbrettd7655fr4n2y
       react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
-      reactjs-img-mapper: 1.0.3_biqbaboplfbrettd7655fr4n2y
       screenfull: 6.0.2
       tabbable: 5.3.3
       tailwindcss: 3.1.8_postcss@8.4.16
@@ -9689,11 +9687,11 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-img-mapper/1.4.0_biqbaboplfbrettd7655fr4n2y:
+  /react-img-mapper/1.5.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-dP1JqD4/8rQWoaViqOwclmNeU8MVrk5sIDD6dme/m7HYDmulcNaKKHlzZrVVq7N+Z/00cTXpbBwEn+CocnDV/w==}
+    resolution: {integrity: sha512-t0WRxT0AKzGqS66j0zqsh/VAy6zsXI5HtGjDirZ0fjSg3IrP5Gce+XaXTEmfSJ1UuD2ye6c3zrDayUp4qOsgPw==}
     peerDependencies:
-      react: 16.x || 17.x
+      react: 16.x || 17.x || 18.x
-      react-dom: 16.x || 17.x
+      react-dom: 16.x || 17.x || 18.x
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -9774,19 +9772,6 @@ packages:
       tslib: 2.4.0
     dev: false
 
-  /react-tooltip/4.5.1_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==}
-    engines: {npm: '>=6.13'}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      uuid: 7.0.3
-    dev: false
-
   /react-use-measure/2.1.1_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
     peerDependencies:
@@ -9813,18 +9798,6 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
-  /reactjs-img-mapper/1.0.3_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-oeYKMH02BjGfoN8x91VeHnYOgrVIpWeNeRh0njHP/1NXl11nTyuHTwVCB9kykrcOUekt+lktUlkIRCKwMYAXRA==}
-    peerDependencies:
-      react: 16.x || 17.x || 18.x
-      react-dom: 16.x || 17.x || 18.x
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      react-fast-compare: 3.2.0
-      react-tooltip: 4.5.1_biqbaboplfbrettd7655fr4n2y
-    dev: false
-
   /read-cache/1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -11246,11 +11219,6 @@ packages:
       lodash.isplainobject: 4.0.6
     dev: false
 
-  /uuid/7.0.3:
-    resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==}
-    hasBin: true
-    dev: false
-
   /uuid/8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true

site/components/common/Footer/Footer.tsx

@@ -44,7 +44,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               </a>
             </Link>
           </div>
-          <div className="col-span-1 lg:col-span-7">
+          <div className="col-span-1 lg:col-span-6">
             <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
               {[...links].map((page: FooterLink) => (
                 <span key={page.href} className="py-3 md:py-0 md:pb-4">
@@ -66,7 +66,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               ))}
             </div>
           </div>
-          <div className="col-span-1 lg:col-span-3 flex items-start lg:justify-end text-primary">
+          <div className="col-span-1 lg:col-span-4 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-4 items-center h-10">
               <ThemeSwitcher />
               <I18nWidget />

site/components/common/HomePage/PolygonModal/PolygonModal.tsx

@@ -9,7 +9,7 @@ import {
 import decadesManifest from '../../../../static_data/decadesManifest.json'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import ImageMapper from 'reactjs-img-mapper'
+import ImageMapper from 'react-img-mapper'
 import Image from 'next/image'
 
 export default function MarkerCardModal(props: {

site/components/common/Layout/Layout.tsx

@@ -114,8 +114,6 @@ const Layout: React.FC<Props> = ({
   const { locale = 'it', pathname } = useRouter()
   const navBarlinks = navBarLinks[locale as keyof typeof navBarLinks]
 
-  console.log(pathname)
-
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>

site/package.json

@@ -52,11 +52,10 @@
     "react-fast-marquee": "^1.3.1",
     "react-h5-audio-player": "^3.8.6",
     "react-icons": "^4.7.1",
-    "react-img-mapper": "^1.4.0",
+    "react-img-mapper": "^1.5.0",
     "react-merge-refs": "^2.0.1",
     "react-slick": "^0.29.0",
     "react-use-measure": "^2.1.1",
-    "reactjs-img-mapper": "^1.0.3",
     "screenfull": "^6.0.2",
     "tabbable": "^5.2.1",
     "tailwindcss": "^3.0.13",

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'>
+      <SimpleGrid columns={2} spacing='24px'>
-        <Box textAlign="center" py={10} px={6}>
+        <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>
   )
 }