WIP: translations and form

package.json

@@ -27,9 +27,14 @@
     "gatsby-plugin-sitemap": "^5.1.0",
     "gatsby-source-filesystem": "^4.1.0",
     "gatsby-transformer-sharp": "^4.1.0",
+    "i18next": "^21.8.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "path": "^0.12.7",
+    "path-browserify": "^1.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^11.18.3",
     "sass": "^1.43.4",
     "swiper": "^7.2.0"
   }

src/components/about/about.component.jsx

@@ -1,22 +1,23 @@
 import React from "react";
 import "./about.style.scss";
-import Rocket from "../../assets/images/main/about-us/rocket.png";
 
+import { useTranslation } from "react-i18next";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 
+import Rocket from "../../assets/images/main/about-us/rocket.png";
+
 const About = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="about-us container">
       <div>
         <img src={Rocket} alt="" />
       </div>
       <div>
-        <h5>You have some great ideas in mind?</h5>
+        <h5>{t("about_us.sub_title")}</h5>
-        <p className="text">
+        <p className="text">{t("about_us.text")}</p>
-          Working more than 6 years in creative development industry we are sure
-          that we can realize any difficulty project
-        </p>
 
         <Swiper
           loop={false}
@@ -26,7 +27,7 @@ const About = () => {
           slidesPerView={2}
           onSlideChange={() => console.log("slide change")}
           onSwiper={(swiper) => console.log(swiper)}
-          className={'stats'}
+          className={"stats"}
         >
           <SwiperSlide>
             <h4>30+</h4>
@@ -44,16 +45,16 @@ const About = () => {
 
         <div className="stats">
           <div>
-            <h4>30+</h4>
+            <h4>{t("about_us.amount_completed")}</h4>
-            <p>Completed projects</p>
+            <p>{t("about_us.completed")}</p>
           </div>
           <div>
-            <h4>400+</h4>
+            <h4>{t("about_us.amount_webpages")}</h4>
-            <p>Web Pages created</p>
+            <p>{t("about_us.webpages")}</p>
           </div>
           <div>
-            <h4>6+</h4>
+            <h4>{t("about_us.amount_experiance")}</h4>
-            <p>Years experiance</p>
+            <p>{t("about_us.experiance")}</p>
           </div>
         </div>
       </div>

src/components/contact-form/contact-form.component.jsx

@@ -50,7 +50,7 @@ const ContactForm = () => {
         <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
       </div>
 
-      <form
+      {/* <form
         // action="http://127.0.0.1:3005/contact"
         className="container"
         // method="POST"
@@ -79,7 +79,7 @@ const ContactForm = () => {
         />
 
         <CustomButton text="Send" />
-      </form>
+      </form> */}
     </div>
   );
 };

src/components/custom-button/custom-button.style.scss

@@ -10,6 +10,7 @@
 }
 
 button {
+  &.btn {
     background: radial-gradient(
         35.83% 70.83% at 0% 0%,
         rgba(93, 52, 69, 0.15) 0%,
@@ -73,6 +74,7 @@ button {
       }
     }
   }
+}
 
 // @property --a {
 //   syntax: "<angle>";

src/components/header/header.component.jsx

@@ -1,4 +1,8 @@
-import * as React from "react";
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+
+import LanguageSwitch from "../language-switch/language-switch.component";
 
 import Logo from "../../assets/images/main/header/logo.svg";
 import Logo2 from "../../assets/images/main/footer/logo.svg";
@@ -8,6 +12,8 @@ import Email from "../../assets/images/main/footer/email.png";
 import "./header.style.scss";
 
 const MidHeader = () => {
+  const { t, i18n } = useTranslation();
+
   const toggleMenu = () => {
     const MenuButton = document.getElementsByClassName("mobile-menu-btn")[0];
     const Menu = document.getElementsByClassName("mobile-menu")[0];
@@ -52,11 +58,12 @@ const MidHeader = () => {
         <img src={Logo} alt="MID" />
       </div>
       <nav className="navigation">
-        <a href="#services">Services</a>
+        <a href="#services">{t("menu.services")}</a>
-        <a href="#about-us">About Us</a>
+        <a href="#about-us">{t("menu.about_us")}</a>
-        <a href="#projects">Portfolio</a>
+        <a href="#projects">{t("menu.portfolio")}</a>
-        <a href="#pricing">Pricing</a>
+        <a href="#pricing">{t("menu.pricing")}</a>
-        <a href="#contact-us">Contact Us</a>
+        <a href="#contact-us">{t("menu.contact_us")}</a>
+        <LanguageSwitch />
       </nav>
 
       <div
@@ -74,7 +81,6 @@ const MidHeader = () => {
         <span id="bottom-left"></span>
         <span id="bottom-right"></span>
       </div>
-
       <div className="mobile-menu">
         <img src={Logo2} alt="MID Creative Digital Agency" />
 

src/components/header/header.style.scss

@@ -17,9 +17,11 @@ header {
   right: 0;
 
   .navigation {
+    display: flex;
+    column-gap: 55px;
+
     a {
       text-transform: uppercase;
-      margin-left: 55px;
 
       &:first-child {
         margin-left: 0;

src/components/intro/intro.component.jsx

@@ -1,29 +1,33 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import "./intro.styles.scss";
 
 import Spaceship from "../../assets/images/main/intro/spaceship.svg";
 
 const Intro = () => {
+  const { t, i18n } = useTranslation();
+
   return (
     <section className="container intro">
       <div className="image"></div>
-
       <div className="title">
         <h1>
-          We creating <span>websites</span>
+          {/* TODO: In latvian text is not fitting */}
+          {t("intro.creating")} <span>{t("intro.websites")}</span>
         </h1>
         <div>
-          <p>Mobile apps</p>
+          <p>{t("intro.apps")}</p>
-          <p>E-shops</p>
+          <p>{t("intro.shops")}</p>
-          <p>Platforms</p>
+          <p>{t("intro.platforms")}</p>
         </div>
+        {/* TODO: Finish this for mobile */}
         <h1 className="mobile">websites . mobileapps . e-shops . platforms</h1>
       </div>
 
       <div className="rocket">
         <img src={Spaceship} alt="" />
-        <p>Explore the Universe</p>
+        <p>{t("intro.explore")}</p>
       </div>
     </section>
   );

src/components/language-switch/language-switch.component.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import i18n from "../../pages/i18n";
+
+import "./language-switch.style.scss";
+
+const LanguageSwitch = ({ t }) => {
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <button
+      className="btn-lng"
+      onClick={() => changeLanguage(i18n.language === "lv" ? "en" : "lv")}
+    >
+      {i18n.language === "lv" ? "en" : "lv"}
+    </button>
+  );
+};
+
+export default LanguageSwitch;

src/components/language-switch/language-switch.style.scss

@@ -0,0 +1,6 @@
+@use "../../assets/stylesheets/base/colors" as *;
+
+.btn-lng {
+  color: $color-text-primary;
+  text-transform: uppercase;
+}

src/components/projects/projects.component.jsx

@@ -5,9 +5,9 @@ import "./projects.style.scss";
 const Projects = () => {
   return (
     <div id="projects">
-      <ProjectsSwiper />
+      <ProjectsSwiper key="wtf"/>
     </div>
-  )
+  );
-}
+};
 
-export default Projects
+export default Projects;

src/components/services/services.component.jsx

@@ -1,29 +1,26 @@
 import React from "react";
 import "./services.style.scss";
+
+import { useTranslation } from "react-i18next";
+
 import Card from "../services-card/card.component";
 import Icon from "../../assets/images/main/services/icon3.svg";
 
-import Circle from "../../assets/images/main/services/circle.png"
+import Circle from "../../assets/images/main/services/circle.png";
 
 const Services = () => {
+  const { t, i18n } = useTranslation();
+
+  const cards = t("services.cards", { returnObjects: true });
+
   return (
     <div className="container services">
       <img src={Circle} alt="circle" className="circle" />
-      <Card 
+      {/* TODO: Add animated icons */}
-        icon={Icon} 
+      {cards &&
-        title="Web development"
+        cards.map((card, i) => (
-        text="We build modern and easy to use websites, e-commerce solutions for desktop, mobile and tablet."
+          <Card icon={Icon} title={card.title} text={card.text} key={i} />
-      />
+        ))}
-      <Card 
-        icon={Icon} 
-        title="Mobile App"
-        text="We build modern and easy to use websites, e-commerce solutions for desktop, mobile and tablet."
-      />
-      <Card 
-        icon={Icon} 
-        title="UI & Animations"
-        text="We build modern and easy to use websites, e-commerce solutions for desktop, mobile and tablet."
-      />
     </div>
   );
 };

src/components/swiper/mid-swiper.component.jsx

@@ -1,23 +1,43 @@
 import React, { useState } from "react";
 import "./swiper.style.scss";
-import Inflid from "../../assets/images/main/projects/inflid_full_1.png";
+
-import CustomPC from "../../assets/images/main/projects/custom-pc4u.png";
+import { useTranslation } from "react-i18next";
-import Mockba from "../../assets/images/main/projects/mockba-modular.png";
-import Pryatki from "../../assets/images/main/projects/pryatki.png";
-import Sizzapp from "../../assets/images/main/projects/sizzapp.png";
-import Trackpro from "../../assets/images/main/projects/trackpro.png";
-import BrowserWrap from "../../assets/images/main/projects/browser-window.png";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
 import { Autoplay } from "swiper";
+
 SwiperCore.use([EffectCoverflow, Pagination]);
 
+const getImage = (image) => {
+  return require(`../../assets/images/main/projects/${image}`).default;
+};
+
 const ProjectsSwiper = () => {
+  const { t } = useTranslation();
   const [activeSlide, setSlide] = useState("");
 
+  const projects = t("projects", { returnObjects: true });
+
+  const swiperProjects = projects.map((project, i) => (
+    <SwiperSlide key={`swiper-${i}`}>
+      <h2>{project.title}</h2>
+      <div className="img-wrap">
+        <img src={getImage(project.image)} alt="inflid" />
+      </div>
+      <div className="project-info">
+        <div>
+          {project.info.map((info, i) => (
+            <p key={`slide-info-${i}`}>{info}</p>
+          ))}
+        </div>
+        <p>{projects.text}</p>
+      </div>
+    </SwiperSlide>
+  ));
+
   return (
     <Swiper
       loop={true}
@@ -53,90 +73,9 @@ const ProjectsSwiper = () => {
       }}
       modules={[Autoplay]}
       id={`active-slide-${activeSlide}`}
+      key={`our-swiper`}
     >
-      <SwiperSlide id="project-slide-1">
+      {projects && swiperProjects}
-        <h2>Inflid</h2>
-        <div className="img-wrap">
-          <img src={Inflid} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>Platform</p>
-            <p>UI / UX</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
-      <SwiperSlide id="project-slide-2">
-        <h2>Custom PC4U</h2>
-        <div className="img-wrap">
-          <img src={CustomPC} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>Platform</p>
-            <p>UI / UX</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
-      <SwiperSlide id="project-slide-3">
-        <h2>MOCKBA MODULAR</h2>
-        <div className="img-wrap">
-          <img src={Mockba} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>Platform</p>
-            <p>UI / UX</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
-      <SwiperSlide id="project-slide-4">
-        <h2>PRIYATKI</h2>
-        <div className="img-wrap">
-          <img src={Pryatki} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>E-shop</p>
-            <p>CMS</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
-      <SwiperSlide id="project-slide-5">
-        <h2>SIZZAPP</h2>
-        <div className="img-wrap">
-          <img src={Sizzapp} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>Landing</p>
-            <p>UI/UX</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
-      <SwiperSlide id="project-slide-6">
-        <h2>TrackPro</h2>
-        <div className="img-wrap">
-          <img src={Trackpro} alt="inflid" />
-        </div>
-        <div className="project-info">
-          <div>
-            <p>Website</p>
-            <p>CMS</p>
-          </div>
-          <p>Smart matching platform for Streamers and Advertisers</p>
-        </div>
-      </SwiperSlide>
     </Swiper>
   );
 };

src/pages/i18n.js

@@ -0,0 +1,31 @@
+import i18n from "i18next";
+import detector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import en from "../translations/en.json";
+import lv from "../translations/lv.json";
+
+const resources = {
+  en: {
+    translation: en,
+  },
+  lv: {
+    translation: lv,
+  },
+};
+
+i18n
+  .use(detector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+    fallbackLng: "en", // use en if detected lng is not available
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

src/pages/index.jsx

@@ -1,13 +1,11 @@
 import * as React from "react";
 
-import '../assets/stylesheets/style.scss';
+import "../assets/stylesheets/style.scss";
 
 import MidMainPage from "./main/main.component";
 
 const IndexPage = () => {
-  return (
+  return <MidMainPage></MidMainPage>;
-    <MidMainPage></MidMainPage>
+};
-  )
-}
 
-export default IndexPage
+export default IndexPage;

src/pages/main/main.component.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import "./main.style.scss";
 
+import { useTranslation } from "react-i18next";
+
 import MidHeader from "../../components/header/header.component";
 import Intro from "../../components/intro/intro.component";
 import MidSection from "../../components/section/section.component";
@@ -11,16 +13,18 @@ import MidFooter from "../../components/footer/footer.component";
 import Projects from "../../components/projects/projects.component";
 
 const MidMainPage = () => {
+  const { t, i18n } = useTranslation();
+
   return (
     <div className="main-page">
       <div className="intro-bg">
         <MidHeader />
         <Intro />
       </div>
-      <MidSection title="Services" id="services">
+      <MidSection title={t("services.title")} id="services">
         <Services />
       </MidSection>
-      <MidSection title="About Us" id="about-us">
+      <MidSection title={t("about_us.title")} id="about-us">
         <About />
       </MidSection>
       <MidSection id="projects">

src/translations/en.json

@@ -0,0 +1,83 @@
+{
+  "menu": {
+    "services": "Services",
+    "about_us": "About Us",
+    "portfolio": "Portfolio",
+    "pricing": "Pricing",
+    "contact_us": "Contact Us"
+  },
+  "intro": {
+    "creating": "We are creating",
+    "websites": "websites",
+    "apps": "Mobile apps",
+    "shops": "E-shops",
+    "platforms": "Platforms",
+    "explore": "Exlopre the Universe"
+  },
+  "services": {
+    "title": "Services",
+    "cards": [
+      {
+        "title": "Web development",
+        "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet."
+      },
+      {
+        "title": "Mobile App",
+        "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet."
+      },
+      {
+        "title": "UI & Animations",
+        "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet."
+      }
+    ]
+  },
+  "about_us": {
+    "title": "About Us",
+    "sub_title": "You have some great ideas in mind?",
+    "text": "Working more than 6 years in the creative development industry we are sure that we can realize any complex project",
+    "amount_completed": "30+",
+    "completed": "Completed projects",
+    "amount_webpages": "400+",
+    "webpages": "Web Pages created",
+    "amount_experiance": "6+",
+    "experiance": "Years experiance"
+  },
+  "projects": [
+    {
+      "title": "Inflid",
+      "image": "inflid_full_1.png",
+      "info": ["Website", "Platform", "UI / UX"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    },
+    {
+      "title": "Custom PC4U",
+      "image": "custom-pc4u.png",
+      "info": ["Website", "Platform", "UI / UX"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    },
+    {
+      "title": "MOCKBA MODULAR",
+      "image": "mockba-modular.png",
+      "info": ["Website", "Animations", "UI / UX"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    },
+    {
+      "title": "PRIYATKI",
+      "image": "pryatki.png",
+      "info": ["Website", "E-shop", "CMS"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    },
+    {
+      "title": "SIZZAPP",
+      "image": "sizzapp.png",
+      "info": ["Website", "Landing", "UI / UX"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    },
+    {
+      "title": "TrackPro",
+      "image": "trackpro.png",
+      "info": ["Website", "CMS"],
+      "text": "Smart matching platform for Streamers and Advertisers"
+    }
+  ]
+}

src/translations/lv.json

@@ -0,0 +1,45 @@
+{
+  "menu": {
+    "services": "Servisi",
+    "about_us": "Par mums",
+    "portfolio": "Portfolio",
+    "pricing": "Cenas",
+    "contact_us": "Sazināties"
+  },
+  "intro": {
+    "creating": "Mēs izstrādājam",
+    "websites": "mājas lapas",
+    "apps": "Mobīlās applikācijas",
+    "shops": "E-veikalus",
+    "platforms": "Platformas",
+    "explore": "Atklāj visumu"
+  },
+  "services": {
+    "title": "Servisi",
+    "cards": [
+      {
+        "title": "Mājas lapas",
+        "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un  e-komercijas risinājumus."
+      },
+      {
+        "title": "Mobīlās aplikācijas",
+        "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un  e-komercijas risinājumus."
+      },
+      {
+        "title": "UI & Animācijas",
+        "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un  e-komercijas risinājumus."
+      }
+    ]
+  },
+  "about_us": {
+    "title": "Par Mums",
+    "sub_title": "Vai tev ir kāda lieliska ideja prātā?",
+    "text": "Mums ir vairāk kā sešu gadu pieredze radošās izstrādes industrijā un esam spējīgi realizēt jebkādas sarežģītības projektus",
+    "amount_completed": "30+",
+    "completed": "Realizētu projektu",
+    "amount_webpages": "400+",
+    "webpages": "Izstrādātu mājas lapu",
+    "amount_experiance": "6+",
+    "experiance": "Gadu pieredze"
+  }
+}