Add catchphrases into about page

site/commerce.config.json

@@ -1,6 +1,6 @@
 {
   "features": {
-    "cart": true,
+    "cart": false,
     "search": true,
     "wishlist": false,
     "customerAuth": false,

site/components/common/About/TestimonialCard.tsx

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react'
+import {
+  Box,
+  Heading,
+  Text,
+  Stack,
+  Container,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+
+const Testimonial = ({ children }: { children: ReactNode }) => {
+  return <Box>{children}</Box>
+}
+
+const TestimonialContent = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box
+      bg={useColorModeValue('white', 'gray.800')}
+      boxShadow={'lg'}
+      p={8}
+      rounded={'xl'}
+      alignItems={'center'}
+      justifyContent={'center'}
+      display={'flex'}
+      w={'lg'}
+      height={'130px'}
+    >
+      {children}
+    </Box>
+  )
+}
+
+const TestimonialHeading = ({ children }: { children: ReactNode }) => {
+  return (
+    <Heading as={'h3'} fontSize={'xl'}>
+      {children}
+    </Heading>
+  )
+}
+
+export default function MessageMap() {
+  const { locale = 'it' } = useRouter()
+
+  return (
+    <Box bg={useColorModeValue('gray.100', 'gray.700')}>
+      <Container maxW={'7xl'} py={16} as={Stack} spacing={12}>
+        <Stack spacing={0} align={'center'}>
+          <Heading>
+            {locale == 'it' ? 'I Nostri Motti' : 'Our Catchphrases'}
+          </Heading>
+          <Text>
+            {locale == 'it'
+              ? 'Quello per cui lavoriamo ogni giorno...'
+              : 'What we work for every day...'}
+          </Text>
+        </Stack>
+        <Stack
+          direction={{ base: 'column', md: 'row' }}
+          spacing={{ base: 10, md: 4, lg: 10 }}
+          justifyContent={'center'}
+        >
+          <Testimonial>
+            <TestimonialContent>
+              <TestimonialHeading>
+                {locale == 'it'
+                  ? 'Safara. Il sentiero che ci ha portato qui!'
+                  : 'Safara. the path that led us here!'}
+              </TestimonialHeading>
+            </TestimonialContent>
+          </Testimonial>
+          <Testimonial>
+            <TestimonialContent>
+              <TestimonialHeading>
+                {locale == 'it'
+                  ? 'Safara espone e vende i tuoi pezzi di storia... e nel frattempo fa cultura, intrattenimento'
+                  : 'Safara exposes and sells your pieces of history... and meanwhile does culture, entertainment'}
+              </TestimonialHeading>
+            </TestimonialContent>
+          </Testimonial>
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

site/components/common/Footer/Footer.tsx

@@ -72,7 +72,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               <a
                 className={s.link}
                 aria-label="Github Repository"
-                href="https://github.com/vercel/commerce"
+                href="https://github.com/DanielePancottini"
               >
                 <Github />
               </a>
@@ -83,21 +83,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
-          <div className="flex items-center text-primary text-sm">
-            <span className="text-primary">Created by</span>
-            <a
-              rel="noopener noreferrer"
-              href="https://vercel.com"
-              aria-label="Vercel.com Link"
-              target="_blank"
-              className="text-primary"
-            >
-              <Vercel
-                className="inline-block h-6 ml-3 text-primary"
-                alt="Vercel.com Logo"
-              />
-            </a>
-          </div>
         </div>
       </Container>
     </footer>

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

@@ -70,8 +70,8 @@ export default function MarkerCardModal(props: {
               {!isTransitionCompleted ? (
                 <Image
                   src={'/regions/abruzzo/11/plan/transition.gif'}
-                  height={200}
+                  height={577}
-                  width={200}
+                  width={700}
                   onLoad={() =>
                     setInterval(() => {
                       setIsTransitionComplited(true)

site/pages/about.tsx

@@ -1,16 +1,24 @@
-import { Divider, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
+import {
+  chakra,
+  Heading,
+  Text,
+  Divider,
+  Grid,
+  GridItem,
+} from '@chakra-ui/react'
 import { Layout } from '@components/common'
 import AboutSlider from '@components/common/About/AboutSlider'
-
+import MessageMap from '@components/common/About/TestimonialCard'
-import { Text } from '@components/ui'
+import WithSpeechBubbles from '@components/common/About/TestimonialCard'
+import TestimonialCard from '@components/common/About/TestimonialCard'
 
 export default function About() {
-
   return (
     <>
-        <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+      <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
-            <AboutSlider></AboutSlider>
+        <AboutSlider></AboutSlider>
-        </div>
+      </div>
+      <MessageMap />
     </>
   )
 }

site/pages/contact.tsx

@@ -0,0 +1,15 @@
+import { Layout } from '@components/common'
+import { Text } from '@components/ui'
+
+export default function Contact() {
+  return (
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+      <Text variant="heading">Contact</Text>
+      <Text className="">
+        The requested page doesn't exist or you don't have access to it.
+      </Text>
+    </div>
+  )
+}
+
+Contact.Layout = Layout

site/pages/index.tsx

@@ -1,13 +1,11 @@
 import { Layout } from '@components/common'
 import ImageMapper from 'react-img-mapper'
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
 import { useDisclosure } from '@chakra-ui/react'
 import PolygonModal from '@components/common/HomePage/PolygonModal/PolygonModal'
 
 export default function Home() {
   const imagePath = 'homepageBackgroundImage.png'
-  const { locale } = useRouter()
 
   const [mapContainerWidth, setMapContainerWidth] = useState<
     number | undefined
@@ -24,7 +22,7 @@ export default function Home() {
         id: '12',
         title: '2000',
         name: '2000',
-        fillColor: '#eab54d4d',
+        fillColor: '#FF279E',
         strokeColor: 'black',
         coords: [
           4634, 1239, 4945, 1320, 5162, 1541, 5252, 1857, 5176, 2149, 4941,
@@ -38,7 +36,7 @@ export default function Home() {
         id: '11',
         title: '1990',
         name: '1990',
-        fillColor: '#eab54d4d',
+        fillColor: '#A12AFF',
         strokeColor: 'black',
         coords: [
           3909, 467, 4175, 549, 4363, 765, 4408, 1046, 4295, 1315, 4045, 1466,
@@ -51,7 +49,7 @@ export default function Home() {
         id: '10',
         title: '1980',
         name: '1980',
-        fillColor: '#eab54d4d',
+        fillColor: '#2C28FF',
         strokeColor: 'black',
         coords: [
           3046, 207, 3280, 289, 3430, 486, 3430, 740, 3287, 952, 3044, 1032,

site/pages/news.tsx

@@ -0,0 +1,15 @@
+import { Layout } from '@components/common'
+import { Text } from '@components/ui'
+
+export default function News() {
+  return (
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+      <Text variant="heading">Not Found</Text>
+      <Text className="">
+        The requested page doesn't exist or you don't have access to it.
+      </Text>
+    </div>
+  )
+}
+
+News.Layout = Layout

site/static_data/decadesManifest.json

@@ -1,74 +1,74 @@
 {
-    "1": {
+  "1": {
-        "name": "< 1910",
+    "name": "< 1910",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "circle.svg",
+    "polygon": "circle.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "2": {
+  "2": {
-        "name": "1900",
+    "name": "1900",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "halfcircle.svg",
+    "polygon": "halfcircle.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "3": {
+  "3": {
-        "name": "1910",
+    "name": "1910",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "triangle.svg",
+    "polygon": "triangle.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "4": {
+  "4": {
-        "name": "1920",
+    "name": "1920",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "quadrilateral.svg",
+    "polygon": "quadrilateral.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "5": {
+  "5": {
-        "name": "1930",
+    "name": "1930",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "pentagon.svg",
+    "polygon": "pentagon.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "6": {
+  "6": {
-        "name": "1940",
+    "name": "1940",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "hexagon.svg",
+    "polygon": "hexagon.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "7": {
+  "7": {
-        "name": "1950",
+    "name": "1950",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "heptagon.svg",
+    "polygon": "heptagon.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "8": {
+  "8": {
-        "name": "1960",
+    "name": "1960",
-        "color": "#2ecc71",
+    "color": "#2ecc71",
-        "polygon": "octagon.svg",
+    "polygon": "octagon.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "9": {
+  "9": {
-        "name": "1970",
+    "name": "1970",
-        "color": "#2ecc71",
+    "color": "#0068FF",
-        "polygon": "enneagon.svg",
+    "polygon": "enneagon.svg",
-        "enabled": false
+    "enabled": false
-    },
+  },
-    "10": {
+  "10": {
-        "name": "1980",
+    "name": "1980",
-        "color": "#FFBF00",
+    "color": "#120EFF",
-        "polygon": "10.svg",
+    "polygon": "10.svg",
-        "enabled": true
+    "enabled": true
-    },
+  },
-    "11": {
+  "11": {
-        "name": "1990",
+    "name": "1990",
-        "color": "#FFBF00",
+    "color": "#8710FF",
-        "polygon": "11.svg",
+    "polygon": "11.svg",
-        "enabled": true
+    "enabled": true
-    },
+  },
-    "12": {
+  "12": {
-        "name": "2000",
+    "name": "2000",
-        "color": "#FF0D84",
+    "color": "#FF0D84",
-        "polygon": "12.svg",
+    "polygon": "12.svg",
-        "enabled": true
+    "enabled": true
-    }
+  }
 }