Add catchphrases into about page

2025-05-16 14:36:59 +00:00 · 2023-01-02 19:10:29 +01:00 · 2023-01-02 19:10:29 +01:00 · 23491e2ec2
commit 23491e2ec2
parent 8e51ad7cd7
10 changed files with 210 additions and 104 deletions
--- a/site/commerce.config.json
+++ b/site/commerce.config.json
@ -1,6 +1,6 @@
 {
  "features": {
-    "cart": true,
+    "cart": false,
    "search": true,
    "wishlist": false,
    "customerAuth": false,
--- a/site/components/common/About/TestimonialCard.tsx
+++ b/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>
+  )
+}
--- a/site/components/common/Footer/Footer.tsx
+++ b/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>
--- a/site/components/common/HomePage/PolygonModal/PolygonModal.tsx
+++ b/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}
-                  width={200}
+                  height={577}
+                  width={700}
                  onLoad={() =>
                    setInterval(() => {
                      setIsTransitionComplited(true)
--- a/site/pages/about.tsx
+++ b/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 />
    </>
  )
 }
--- a/site/pages/contact.tsx
+++ b/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
--- a/site/pages/index.tsx
+++ b/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,
--- a/site/pages/news.tsx
+++ b/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
--- a/site/public/regions/abruzzo/11/plan/transition.gif
+++ b/site/public/regions/abruzzo/11/plan/transition.gif
--- a/site/static_data/decadesManifest.json
+++ b/site/static_data/decadesManifest.json
@ -1,74 +1,74 @@
 {
-    "1": {
-        "name": "< 1910",
-        "color": "#2ecc71",
-        "polygon": "circle.svg",
-        "enabled": false
-    },
-    "2": {
-        "name": "1900",
-        "color": "#2ecc71",
-        "polygon": "halfcircle.svg",
-        "enabled": false
-    },
-    "3": {
-        "name": "1910",
-        "color": "#2ecc71",
-        "polygon": "triangle.svg",
-        "enabled": false
-    },
-    "4": {
-        "name": "1920",
-        "color": "#2ecc71",
-        "polygon": "quadrilateral.svg",
-        "enabled": false
-    },
-    "5": {
-        "name": "1930",
-        "color": "#2ecc71",
-        "polygon": "pentagon.svg",
-        "enabled": false
-    },
-    "6": {
-        "name": "1940",
-        "color": "#2ecc71",
-        "polygon": "hexagon.svg",
-        "enabled": false
-    },
-    "7": {
-        "name": "1950",
-        "color": "#2ecc71",
-        "polygon": "heptagon.svg",
-        "enabled": false
-    },
-    "8": {
-        "name": "1960",
-        "color": "#2ecc71",
-        "polygon": "octagon.svg",
-        "enabled": false
-    },
-    "9": {
-        "name": "1970",
-        "color": "#2ecc71",
-        "polygon": "enneagon.svg",
-        "enabled": false
-    },
-    "10": {
-        "name": "1980",
-        "color": "#FFBF00",
-        "polygon": "10.svg",
-        "enabled": true
-    },
-    "11": {
-        "name": "1990",
-        "color": "#FFBF00",
-        "polygon": "11.svg",
-        "enabled": true
-    },
-    "12": {
-        "name": "2000",
-        "color": "#FF0D84",
-        "polygon": "12.svg",
-        "enabled": true
-    }
-}
+  "1": {
+    "name": "< 1910",
+    "color": "#2ecc71",
+    "polygon": "circle.svg",
+    "enabled": false
+  },
+  "2": {
+    "name": "1900",
+    "color": "#2ecc71",
+    "polygon": "halfcircle.svg",
+    "enabled": false
+  },
+  "3": {
+    "name": "1910",
+    "color": "#2ecc71",
+    "polygon": "triangle.svg",
+    "enabled": false
+  },
+  "4": {
+    "name": "1920",
+    "color": "#2ecc71",
+    "polygon": "quadrilateral.svg",
+    "enabled": false
+  },
+  "5": {
+    "name": "1930",
+    "color": "#2ecc71",
+    "polygon": "pentagon.svg",
+    "enabled": false
+  },
+  "6": {
+    "name": "1940",
+    "color": "#2ecc71",
+    "polygon": "hexagon.svg",
+    "enabled": false
+  },
+  "7": {
+    "name": "1950",
+    "color": "#2ecc71",
+    "polygon": "heptagon.svg",
+    "enabled": false
+  },
+  "8": {
+    "name": "1960",
+    "color": "#2ecc71",
+    "polygon": "octagon.svg",
+    "enabled": false
+  },
+  "9": {
+    "name": "1970",
+    "color": "#0068FF",
+    "polygon": "enneagon.svg",
+    "enabled": false
+  },
+  "10": {
+    "name": "1980",
+    "color": "#120EFF",
+    "polygon": "10.svg",
+    "enabled": true
+  },
+  "11": {
+    "name": "1990",
+    "color": "#8710FF",
+    "polygon": "11.svg",
+    "enabled": true
+  },
+  "12": {
+    "name": "2000",
+    "color": "#FF0D84",
+    "polygon": "12.svg",
+    "enabled": true
+  }
+}