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>