Fix vintage color background, add footer copyright and contact icons, add contact page

site/components/common/Footer/Footer.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import type { Page } from '@commerce/types/page'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
+import { AtSignIcon, PhoneIcon } from '@chakra-ui/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import ThemeSwitcher from '@components/ui/ThemeSwitcher'
@@ -76,12 +77,27 @@ const Footer: FC<Props> = ({ className, pages }) => {
               >
                 <Github />
               </a>
+              <a
+                className={s.link}
+                aria-label="Email"
+                href="mailto:safaraecommerce@protonmail.com"
+              >
+                <AtSignIcon />
+              </a>
+              <a
+                className={s.link}
+                aria-label="Phone"
+                href="tel:+390123456789"
+              >
+                <PhoneIcon />
+              </a>
             </div>
           </div>
         </div>
         <div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
+            <span className='ml-5'>&copy; 2023 Daniele Pancottini All rights reserved.</span>
           </div>
         </div>
       </Container>

site/components/common/Layout/Layout.tsx

@@ -19,6 +19,7 @@ import type { Category } from '@commerce/types/site'
 import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
 import navBarLinks from '../../../static_data/navBarLinks.json'
 import Script from 'next/script'
+import { useState } from 'react'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@@ -110,14 +111,23 @@ const Layout: React.FC<Props> = ({
   pageProps: { categories = [], ...pageProps },
 }) => {
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
-  const { locale = 'it' } = useRouter()
+  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)}>
         <Navbar links={navBarlinks} />
-        <main>{children}</main>
+        <style jsx>
+          {
+            `.vintageBackground { 
+              background-color: rgba(240, 226, 123, 0.9)
+             }`
+          }
+        </style>
+        <main className={(pathname.includes("about") || pathname.includes("news")) ? "vintageBackground" : ""}>{children}</main>
         <Footer pages={pageProps.pages} />
         <ModalUI />
         <CheckoutProvider>

site/pages/about.tsx

@@ -4,7 +4,7 @@ import AboutSlider from '@components/common/About/AboutSlider'
 export default function About() {
   return (
     <>
-      <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} 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>
       </div>
     </>

site/pages/contact.tsx

@@ -1,13 +1,29 @@
+import { AtSignIcon, PhoneIcon } from '@chakra-ui/icons'
+import { Box, Heading, Stack, Text } from '@chakra-ui/react'
 import { Layout } from '@components/common'
-import { Text } from '@components/ui'
+import { Text as TextUI } 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>
+      <TextUI className='mb-5' variant="heading">Contatti</TextUI>
-      <Text className="">
+      <TextUI className="">
-        The requested page doesn't exist or you don't have access to it.
+        Puoi contattarci usando i recapiti che trovi qui sotto...
-      </Text>
+      </TextUI>
+      <Stack direction={['column', 'row']} spacing='24px'>
+        <Box textAlign="center" py={10} px={6}>
+          <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}>
+          <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>
     </div>
   )
 }

site/pages/news.tsx

@@ -3,7 +3,7 @@ import NewsSlider from '@components/common/News/NewsSlider'
 
 export default function News() {
   return (
-    <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} 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">
       <NewsSlider></NewsSlider>
     </div>
   )