Added flags and fixed seo

locales/en/contactUs.json

@@ -6,7 +6,7 @@
   "Name1": "Festival Info",
   "Name2": "Collaborations",
   "Name3": "Volunteering",
-  "Name4": "Site Assistance",
+  "Name4": "Web Assistance",
   "Description1": "Fill out this form to get basic information about the festival, such as tickets, camping, and services...",
   "Description2": "If you have an idea or a project and want to see it come to life at our festival, then you're in the right place!<br/><br/> Fill out the form below with your collaboration proposals.<br/><br/> Whether you manage an activity, a market, or a booth, we are open to all ideas.<br/><br/> Thank you for being part of our adventure!<br/><br/> We look forward to meeting you and creating something unique together!",
   "Description3": "Thank you for your interest in becoming an integral part of our volunteer family at the festival!<br/> Collaborate with a dynamic team, contribute to the success of the festival, and create unforgettable memories alongside a passionate community.<br/> Fill out the form below to express your interest.<br/><br/> Join us in shaping an unforgettable event for all participants. Thank you for your commitment and for being part of the magic of our festival!",

package.json

@@ -4,7 +4,10 @@
   "private": true,
   "description": "naturalmente-tecnologici",
   "keywords": [
-    "gatsby"
+    "naturalmente tecnologici",
+    "syskrack",
+    "natura",
+    "innovazione"
   ],
   "scripts": {
     "develop": "gatsby develop",
@@ -17,7 +20,6 @@
   "dependencies": {
     "@fontsource/cairo": "^4.5.13",
     "@fontsource/poppins": "^4.5.10",
-    "@types/react-slick": "^0.23.10",
     "canvas-confetti": "^1.6.1",
     "gatsby": "^5.8.0",
     "gatsby-plugin-canonical-urls": "^5.9.0",
@@ -40,6 +42,7 @@
     "react-i18next": "^13.5.0",
     "react-intersection-observer": "^9.4.3",
     "react-slick": "^0.29.0",
+    "react-world-flags": "^1.6.0",
     "sass": "^1.60.0",
     "slick-carousel": "^1.8.1"
   },
@@ -49,6 +52,8 @@
     "@types/node": "^18.15.8",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",
+    "@types/react-slick": "^0.23.10",
+    "@types/react-world-flags": "^1.4.5",
     "typescript": "^5.0.2"
   }
 }

src/components/atoms/LanguagePicker/index.module.scss

@@ -4,10 +4,11 @@
   gap: 10px;
   margin-right: 10px;
   margin-left: 10px;
+  margin-top: 5px;
   position: relative;
   p {
     border-radius: 10px;
-    padding: 0 10px;
+    padding: 5px 10px;
     border: 3px solid var(--nt-orange);
     // background-color: var(--nt-orange);
     color: var(--nt-orange);
@@ -17,6 +18,8 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    margin-top: 0;
+    margin-bottom: 5px;
 
     svg {
       fill: var(--nt-orange);
@@ -57,6 +60,13 @@
 
 .language {
   cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  width: 80%;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5px 0;
 }
 
 .languageActive {
@@ -69,6 +79,13 @@
   width: 90%;
   border-radius: 10px;
   background-color: var(--nt-orange);
-  margin: 5px 0;
+  margin: 0;
   opacity: 0.8;
 }
+
+.flag {
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  object-fit: cover;
+}

src/components/atoms/LanguagePicker/index.tsx

@@ -2,13 +2,16 @@ import { useI18next, Link } from 'gatsby-plugin-react-i18next';
 import React, { useState } from 'react';
 import * as styles from './index.module.scss';
 import Down from '../../../assets/down.svg';
+import Flag from 'react-world-flags';
 
 const Index = () => {
   const { languages, language, originalPath } = useI18next();
   const [dropdown, setDropdown] = useState<boolean>(false);
+  const enToUk = (value: string) => (value === 'en' ? 'gb' : value);
   return (
     <div className={styles.languagePicker} onMouseLeave={() => setDropdown(false)}>
       <p onClick={() => setDropdown((v) => !v)}>
+        <Flag className={styles.flag} code={enToUk(language)} />
         {language.toUpperCase()} <Down width={10} height={10} />
       </p>
       <div className={dropdown ? styles.dropdown : styles.dropdownClosed}>
@@ -19,7 +22,7 @@ const Index = () => {
               to={originalPath}
               language={lng}
             >
-              {lng.toUpperCase()}
+              <Flag className={styles.flag} code={enToUk(lng)} /> {lng.toUpperCase()}
             </Link>
             {key % 2 === 0 ? <div className={styles.separator}></div> : null}
           </div>

src/components/atoms/Seo/index.tsx

@@ -19,6 +19,7 @@ const Index = ({
   images = [],
 }: SeoProps) => {
   const { metadata, featuredImage } = useSiteMetadata();
+  console.log(lang);
 
   const seo = {
     title: title && pathname != '/' ? title + ' | ' + metadata.title : metadata.title,

src/components/molecules/Navigation/index.module.scss

@@ -33,7 +33,7 @@
 .wrapDesktop {
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   margin-right: 35px;

src/components/organisms/HeroContattaci/index.module.scss

@@ -73,6 +73,16 @@
   }
 }
 
+.headingEn {
+  @extend .heading;
+  &:before {
+    width: 175px;
+    @media screen and (min-width: '768px') {
+      width: 285px;
+    }
+  }
+}
+
 .svgWrap {
   position: absolute;
   left: 0;

src/components/organisms/HeroContattaci/index.tsx

@@ -6,13 +6,15 @@ import Collina from '../../../assets/collina-lato.svg';
 import Flower from '../../atoms/Flower';
 import SearchPeople from '../../../assets/search-people.svg';
 import { useTranslation } from 'react-i18next';
+import { useI18next } from 'gatsby-plugin-react-i18next';
 
 const Index = () => {
   const { t } = useTranslation();
+  const { language } = useI18next();
   return (
     <div className={styles.wrap}>
       <div className={styles.headWrap}>
-        <h1 className={styles.heading}>
+        <h1 className={language === 'en' ? styles.headingEn : styles.heading}>
           {t('Title')}
           <br />
           {t('Subtitle')}

src/components/organisms/HeroInfo/index.module.scss

@@ -72,6 +72,16 @@
   }
 }
 
+.headingEn {
+  @extend .heading;
+  &:before {
+    width: 200px;
+    @media screen and (min-width: '768px') {
+      width: 325px;
+    }
+  }
+}
+
 .svgWrap {
   position: absolute;
   left: 0;

src/components/organisms/HeroInfo/index.tsx

@@ -6,13 +6,15 @@ import Collina from '../../../assets/collina.svg';
 import Flower from '../../atoms/Flower';
 import Speaking from '../../../assets/speaking.svg';
 import { useTranslation } from 'react-i18next';
+import { useI18next } from 'gatsby-plugin-react-i18next';
 
 const Index = () => {
   const { t } = useTranslation();
+  const { language } = useI18next();
   return (
     <div className={styles.wrap}>
       <div className={styles.headWrap}>
-        <h1 className={styles.heading}>
+        <h1 className={language === 'en' ? styles.headingEn : styles.heading}>
           {t('Title')}
           <br />
           {t('Subtitle')}

src/components/organisms/HeroPartner/index.module.scss

@@ -131,6 +131,16 @@
   }
 }
 
+.headingEn {
+  @extend .heading;
+  &:before {
+    width: 150px;
+    @media screen and (min-width: '768px') {
+      width: 250px;
+    }
+  }
+}
+
 .bigBranch {
   position: absolute;
   top: 50%;

src/components/organisms/HeroPartner/index.tsx

@@ -5,13 +5,15 @@ import Collina from '../../../assets/collina-lato.svg';
 import Flower from '../../atoms/Flower';
 import Handshake from '../../../assets/handshake.svg';
 import { useTranslation } from 'react-i18next';
+import { useI18next } from 'gatsby-plugin-react-i18next';
 
 const Index = () => {
   const { t } = useTranslation();
+  const { language } = useI18next();
   return (
     <div className={styles.wrap}>
       <div className={styles.headWrap}>
-        <h1 className={styles.heading}>
+        <h1 className={language === 'en' ? styles.headingEn : styles.heading}>
           {t('Title')} <br />
           {t('Subtitle')}
         </h1>

src/pages/chi-siamo.tsx

@@ -6,9 +6,7 @@ import Seo from '../components/atoms/Seo';
 import Syskrack from '../components/molecules/Syskrack';
 import { images as syskrackImages } from '../utilities/syskrack';
 import { images as organizersImages } from '../utilities/organizers';
-import { graphql } from 'gatsby';
-import { useTranslation } from 'react-i18next';
-import { useI18next } from 'gatsby-plugin-react-i18next';
+import { HeadProps, graphql } from 'gatsby';
 
 const ChiSiamo = () => {
   // const Organizers = lazy(() => import('../components/organisms/Organizers'));
@@ -24,9 +22,8 @@ const ChiSiamo = () => {
   );
 };
 
-export const Head = () => {
-  const { t } = useTranslation();
-  const { language } = useI18next();
+export const Head = ({ data, pageContext }: HeadProps) => {
+  const t = (key: string) => JSON.parse((data as any).locales.edges[1].node.data)[key] ?? key;
   const images = syskrackImages().allFile!.edges.map(
     (image) => image.node.childImageSharp.gatsbyImageData.images.fallback.src
   );
@@ -36,7 +33,7 @@ export const Head = () => {
 
   return (
     <Seo
-      lang={language}
+      lang={(pageContext as any).language}
       title={t('SEOTitle')}
       pathname="/chi-siamo/"
       description={t('SEODescription')}

src/pages/contattaci.tsx

@@ -4,8 +4,6 @@ import HeroContattaci from '../components/organisms/HeroContattaci';
 import ContattaciBody from '../components/molecules/ContattaciBody';
 import { HeadProps, graphql } from 'gatsby';
 import Seo from '../components/atoms/Seo';
-import { useTranslation } from 'react-i18next';
-import { useI18next } from 'gatsby-plugin-react-i18next';
 
 const Contattaci = () => {
   return (
@@ -18,12 +16,12 @@ const Contattaci = () => {
 
 export default Contattaci;
 
-export const Head = ({ location }: HeadProps) => {
-  const { t } = useTranslation();
-  const { language } = useI18next();
+export const Head = ({ location, data, pageContext }: HeadProps) => {
+  const t = (key: string) => JSON.parse((data as any).locales.edges[1].node.data)[key] ?? key;
+
   return (
     <Seo
-      lang={language}
+      lang={(pageContext as any).language}
       title={t('SEOTitle')}
       pathname={location.pathname}
       description={t('SEODescription')}

src/pages/index.tsx

@@ -8,9 +8,7 @@ import LastEdition from '../components/molecules/LastEdition';
 import 'react-circular-progressbar/dist/styles.css';
 import FastActions from '../components/molecules/FastActions';
 import Thanks from '../components/molecules/Thanks';
-import { graphql } from 'gatsby';
-import { useTranslation } from 'react-i18next';
-import { useI18next } from 'gatsby-plugin-react-i18next';
+import { HeadProps, graphql } from 'gatsby';
 
 const IndexPage = () => {
   return (
@@ -25,11 +23,18 @@ const IndexPage = () => {
   );
 };
 
-export const Head = () => {
-  const { t } = useTranslation();
-  const { language } = useI18next();
+export const Head = ({ data, pageContext }: HeadProps) => {
+  const t = (key: string) => JSON.parse((data as any).locales.edges[1].node.data)[key] ?? key;
 
-  return <Seo lang={language} title={t('SEOTitle')} pathname="/" description={t('SEODescription')} structuredData />;
+  return (
+    <Seo
+      lang={(pageContext as any).language}
+      title={t('SEOTitle')}
+      pathname="/"
+      description={t('SEODescription')}
+      structuredData
+    />
+  );
 };
 
 export default IndexPage;

src/pages/info.tsx

@@ -5,9 +5,7 @@ import Seo from '../components/atoms/Seo';
 import Contacts from '../components/molecules/Contacts';
 import Faq from '../components/organisms/Faq';
 import HowToReach from '../components/atoms/HowToReach';
-import { graphql } from 'gatsby';
-import { useTranslation } from 'react-i18next';
-import { useI18next } from 'gatsby-plugin-react-i18next';
+import { HeadProps, graphql } from 'gatsby';
 
 const Info = () => {
   return (
@@ -20,12 +18,16 @@ const Info = () => {
   );
 };
 
-export const Head = () => {
-  const { t } = useTranslation();
-  const { language } = useI18next();
-
+export const Head = ({ data, pageContext }: HeadProps) => {
+  const t = (key: string) => JSON.parse((data as any).locales.edges[1].node.data)[key] ?? key;
   return (
-    <Seo lang={language} title={t('SEOTitle')} pathname="/info/" description={t('SEODescription')} structuredData />
+    <Seo
+      lang={(pageContext as any).language}
+      title={t('SEOTitle')}
+      pathname="/info/"
+      description={t('SEODescription')}
+      structuredData
+    />
   );
 };
 

src/pages/partner.tsx

@@ -3,9 +3,7 @@ import Layout from '../components/organisms/Layout';
 import HeroPartner from '../components/organisms/HeroPartner';
 import PartnerBody from '../components/molecules/PartnerBody';
 import Seo from '../components/atoms/Seo';
-import { graphql } from 'gatsby';
-import { useTranslation } from 'react-i18next';
-import { useI18next } from 'gatsby-plugin-react-i18next';
+import { HeadProps, graphql } from 'gatsby';
 
 const Partner = () => {
   return (
@@ -16,12 +14,17 @@ const Partner = () => {
   );
 };
 
-export const Head = () => {
-  const { t } = useTranslation();
-  const { language } = useI18next();
+export const Head = ({ data, pageContext }: HeadProps) => {
+  const t = (key: string) => JSON.parse((data as any).locales.edges[1].node.data)[key] ?? key;
 
   return (
-    <Seo lang={language} title={t('SEOTitle')} pathname="/partner/" description={t('SEODescription')} structuredData />
+    <Seo
+      lang={(pageContext as any).language}
+      title={t('SEOTitle')}
+      pathname="/partner/"
+      description={t('SEODescription')}
+      structuredData
+    />
   );
 };