Add catchphrases into about page

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 { Text } from '@components/ui'
+import MessageMap from '@components/common/About/TestimonialCard'
+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">
-            <AboutSlider></AboutSlider>
-        </div>
+      <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+        <AboutSlider></AboutSlider>
+      </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