Fixes

gatsby-config.js

@@ -10,7 +10,7 @@ module.exports = {
     // {
     //   resolve: "gatsby-plugin-google-analytics",
     //   options: {
-    //     trackingId: "",
+    //     trackingId: "G-8M9CZ79T4L",
     //   },
     // },
     "gatsby-plugin-react-helmet",

package.json

@@ -12,30 +12,35 @@
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "lint:prettier": "yarn prettier ./src --check",
+    "format:prettier": "yarn prettier ./src -w"
   },
   "dependencies": {
-    "@splidejs/react-splide": "^0.6.12",
-    "axios": "^0.27.2",
-    "gatsby": "^4.1.0",
-    "gatsby-plugin-google-analytics": "^4.1.0",
-    "gatsby-plugin-image": "^2.1.0",
-    "gatsby-plugin-manifest": "^4.1.0",
-    "gatsby-plugin-react-helmet": "^5.1.0",
-    "gatsby-plugin-sass": "^5.1.0",
-    "gatsby-plugin-sharp": "^4.1.0",
-    "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",
+    "@splidejs/react-splide": "^0.7.12",
+    "axios": "^1.6.5",
+    "gatsby": "^5.13.3",
+    "gatsby-plugin-google-analytics": "^5.13.0",
+    "gatsby-plugin-image": "^3.13.0",
+    "gatsby-plugin-manifest": "^5.13.0",
+    "gatsby-plugin-react-helmet": "^6.13.0",
+    "gatsby-plugin-sass": "^6.13.0",
+    "gatsby-plugin-sharp": "^5.13.0",
+    "gatsby-plugin-sitemap": "^6.13.0",
+    "gatsby-source-filesystem": "^5.13.0",
+    "gatsby-transformer-sharp": "^5.13.0",
+    "i18next": "^23.7.16",
+    "i18next-browser-languagedetector": "^7.2.0",
     "path": "^0.12.7",
     "path-browserify": "^1.0.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.18.3",
-    "sass": "^1.43.4",
-    "swiper": "^7.2.0"
+    "react-i18next": "^14.0.0",
+    "sass": "^1.70.0",
+    "swiper": "^11.0.5"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.2"
   }
 }

src/assets/stylesheets/abstracts/_mixins.scss

@@ -10,7 +10,6 @@
   }
 }
 
-
 @mixin for-max-width {
   @media all and (max-width: 1224px) {
     @content;

src/assets/stylesheets/base/_colors.scss

@@ -1,4 +1,4 @@
-$color-text-primary: #FFFFFF;
+$color-text-primary: #ffffff;
 $color-text-secondary: rgba(255, 255, 255, 60%);
-$color-accent-primary: #C16B6B;
-$color-accent-secondary: #B46F8E;
+$color-accent-primary: #c16b6b;
+$color-accent-secondary: #b46f8e;

src/assets/stylesheets/base/_typography.scss

@@ -1,6 +1,6 @@
-@use '../abstracts/functions' as *;
-@use '../abstracts/mixins' as *;
-@use './colors' as *;
+@use "../abstracts/functions" as *;
+@use "../abstracts/mixins" as *;
+@use "./colors" as *;
 // @import url("https://use.typekit.net/ryt1jvs.css");
 
 * {
@@ -47,7 +47,6 @@ h5 {
   font-size: px2rem(30px);
 }
 
-
 h6 {
   font-size: px2rem(18px);
   text-transform: uppercase;

src/assets/stylesheets/layout/_grid.scss

@@ -23,6 +23,19 @@
       grid-column: 1 / 7;
     }
   }
+
+  &-mobile {
+    @include for-mobile {
+      padding: 0 20px;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      max-width: 100%;
+      width: auto;
+      > * {
+        grid-column: 1 / 7;
+      }
+    }
+  }
 }
 section.container {
   padding-right: 20px;

src/assets/stylesheets/style.scss

@@ -1,10 +1,14 @@
-@use 'abstracts/functions';
-@use 'abstracts/mixins';
-@use 'base/colors';
-@use 'base/reset';
-@use 'base/typography';
-@use 'layout/grid';
+@use "abstracts/functions";
+@use "abstracts/mixins";
+@use "base/colors";
+@use "base/reset";
+@use "base/typography";
+@use "layout/grid";
 
 body {
   background-color: #111111;
 }
+
+html {
+  scroll-behavior: smooth;
+}

src/components/about/about.component.jsx

@@ -2,8 +2,6 @@ import React from "react";
 import "./about.style.scss";
 
 import { useTranslation } from "react-i18next";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
 
 import Rocket from "../../assets/images/main/about-us/rocket.png";
 
@@ -19,30 +17,6 @@ const About = () => {
         <h5>{t("about_us.sub_title")}</h5>
         <p className="text">{t("about_us.text")}</p>
 
-        <Swiper
-          loop={false}
-          // centeredSlides={true}
-          slideToClickedSlide={true}
-          spaceBetween={0}
-          slidesPerView={2}
-          onSlideChange={() => console.log("slide change")}
-          onSwiper={(swiper) => console.log(swiper)}
-          className={"stats"}
-        >
-          <SwiperSlide>
-            <h4>30+</h4>
-            <p>Completed projects</p>
-          </SwiperSlide>
-          <SwiperSlide>
-            <h4>400+</h4>
-            <p>Web Pages created</p>
-          </SwiperSlide>
-          <SwiperSlide>
-            <h4>6+</h4>
-            <p>Years experience</p>
-          </SwiperSlide>
-        </Swiper>
-
         <div className="stats">
           <div>
             <h4>{t("about_us.amount_completed")}</h4>

src/components/about/about.style.scss

@@ -3,8 +3,13 @@
 @use "../../assets/stylesheets/abstracts/variables" as *;
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
+#about-us {
+  scroll-margin-block-start: 120px;
+}
+
 .about-us {
   margin-top: -80px;
+
   > div {
     &:first-child {
       grid-column: 1/7;
@@ -35,18 +40,11 @@
         }
 
         @include for-mobile {
-          display: none;
+          text-align: center;
+          & > div {
+            padding: 4px;
           }
         }
-
-      .swiper {
-        display: none;
-        margin-left: -20px;
-        margin-right: -20px;
-
-        @include for-mobile {
-          display: flex;
-        }
       }
 
       @include for-mobile {

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

@@ -1,28 +1,40 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import axios from "axios";
+import { useTranslation } from "react-i18next";
 import "./contact-form.style.scss";
-import Dog from "../../assets/images/main/contact-form/mask.svg";
+import Dog from "../../assets/images/main/contact-form/Mask.svg";
 import BluePlanet from "../../assets/images/main/contact-form/Planet Blue.svg";
 import YellowPlanet from "../../assets/images/main/contact-form/Planet Yellow.svg";
 
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
 
-const postForm = (e, data) => {
-  e.preventDefault();
-  console.log("post form", data);
-  axios
-    .post("http://127.0.0.1:3005/contact", data)
-    .then((res) => console.log(res));
+const newPost = async (data) => {
+  return axios
+    .post("https://midcreative.eu/mail/", data, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then((res) => true)
+    .catch((err) => err);
 };
 
 const ContactForm = () => {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     name: "",
     email: "",
     phone: "",
   });
 
+  const nameInputRef = useRef(null);
+  const emailInputRef = useRef(null);
+  const phoneInputRef = useRef(null);
+
+  const [success, setSuccess] = useState();
+  const [error, setError] = useState();
+
   const setName = (name) => {
     setFormData({ ...formData, name: name });
   };
@@ -35,14 +47,32 @@ const ContactForm = () => {
     setFormData({ ...formData, phone: phone });
   };
 
-  const handleSubmit = (e) => {
+  const cleanFields = () => {
+    nameInputRef.current.clean();
+    emailInputRef.current.clean();
+    phoneInputRef.current.clean();
+  };
+
+  const handlePost = (e) => {
     e.preventDefault();
-    console.log(e);
+
+    newPost(formData).then((res) => {
+      if (res === true) {
+        cleanFields();
+        setError(false);
+        setSuccess(true);
+        setTimeout(() => setSuccess(false), 6000);
+      } else {
+        cleanFields();
+        setError(true);
+        setSuccess(false);
+      }
+    });
   };
 
   return (
     <div className="container contact-form">
-      <h2>Let’s bring your project to the Moon</h2>
+      <h2>{t("contacts.title")}</h2>
 
       <div className="image">
         <img src={Dog} alt="cute dog in space" />
@@ -50,35 +80,40 @@ const ContactForm = () => {
         <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
       </div>
 
-      <form
-        // action="http://127.0.0.1:3005/contact"
-        className="container"
-        // method="POST"
-        // onSubmit={(e) => postForm(e, formData)}
-      >
+      <form className="container" onSubmit={(e) => handlePost(e)}>
+        {success ? <p className="success">{t("contacts.success")}</p> : null}
+        {error ? (
+          <p className="error">
+            {t("contacts.error")}{" "}
+            <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
+          </p>
+        ) : null}
         <FormInput
           name="name"
           type="text"
-          label="Name"
+          label={t("contacts.name")}
           onChange={setName}
+          ref={nameInputRef}
           required
         />
         <FormInput
           name="email"
           type="email"
-          label="E-mail"
+          label={t("contacts.email")}
           onChange={setEmail}
+          ref={emailInputRef}
           required
         />
         <FormInput
           name="phone"
           type="tel"
-          label="Phone"
+          label={t("contacts.phone")}
           onChange={setPhone}
+          ref={phoneInputRef}
           required
         />
 
-        <CustomButton text="Send" />
+        <CustomButton text={t("contacts.send")} />
       </form>
     </div>
   );

src/components/contact-form/contact-form.style.scss

@@ -14,6 +14,20 @@ section.content {
     grid-row: 1/2;
   }
 
+  .success {
+    margin-bottom: 16px;
+    color: rgba(116, 199, 103, 1);
+  }
+
+  .error {
+    margin-bottom: 16px;
+    color: rgba(246, 81, 81, 1);
+
+    a {
+      color: rgba(246, 81, 81, 1);
+    }
+  }
+
   form {
     grid-column: 1/5;
     grid-row: 2/3;
@@ -44,7 +58,12 @@ section.content {
 
     img {
       &:first-child {
-        background: linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)), rgba(255, 255, 255, 0.01);
+        background: linear-gradient(
+            0deg,
+            rgba(27, 27, 27, 0.2),
+            rgba(27, 27, 27, 0.2)
+          ),
+          rgba(255, 255, 255, 0.01);
         box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
         backdrop-filter: blur(8px);
         border-radius: 33px;
@@ -66,7 +85,8 @@ section.content {
   }
 
   @include for-tablets {
-    h2, form {
+    h2,
+    form {
       grid-column: 1/7;
     }
 
@@ -75,7 +95,6 @@ section.content {
     }
   }
 
-
   @include for-mobile {
     h2,
     .image,
@@ -94,6 +113,8 @@ section.content {
     .image {
       grid-row: 2/3;
       width: 100%;
+      margin-bottom: 16px;
+
       img {
         margin: 0 auto;
       }

src/components/contacts/contacts.component.jsx

@@ -9,10 +9,10 @@ const Contacts = () => {
   return (
     <div className="container contacts">
       <div>
-        <a href="tel:+371 2662 0770">
+        <a href="tel:+37125704038">
           <img src={Phone} alt="phone" />
         </a>
-        <a href="tel:+371 2662 0770">+371 2662 0770</a>
+        <a href="tel:+37125704038">+371 25704038</a>
       </div>
       <div>
         <a href="mailto:info@midcreative.eu">
@@ -21,10 +21,10 @@ const Contacts = () => {
         <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
       </div>
       <div>
-        <a href="https://telegram.me/vlsqzwsme" target="_blank" rel="noreferrer">
+        <a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
           <img src={Telegram} alt="telegram" />
         </a>
-        <a href="https://telegram.me/vlsqzwsme" target="_blank" rel="noreferrer">
+        <a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
           Telegram
         </a>
       </div>

src/components/contacts/contacts.style.scss

@@ -1,6 +1,10 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 // @use "../../assets/stylesheets/abstracts/variables";
 
+#contact-us {
+  scroll-margin-block-start: 120px;
+}
+
 .contacts {
   display: flex;
   flex-direction: row;

src/components/footer/footer.component.jsx

@@ -1,11 +1,15 @@
 import React from "react";
 import "./footer.style.scss";
+
+import { useTranslation } from "react-i18next";
+
 import Contacts from "../contacts/contacts.component";
 import TopLine from "../../assets/images/main/footer/top-line.png";
 import Logo from "../../assets/images/main/footer/logo.svg";
 
-
 const MidFooter = () => {
+  const { t } = useTranslation();
+
   return (
     <footer>
       <img className="line" src={TopLine} alt="" />
@@ -14,27 +18,37 @@ const MidFooter = () => {
 
       <div className="container info">
         <div>
-          <h6>Company</h6>
+          <h6>{t("footer.company")}</h6>
           <p className="gray">SIA MID Creative</p>
-          <h6>Registation nr.</h6>
+          <h6>{t("footer.registration_nr")}</h6>
           <p className="gray">40203288612</p>
-          <h6>Adress</h6>
+          <h6>{t("footer.address")}</h6>
           <p className="gray">Rīga, Gaiļezera iela 11 - 5, LV-1079</p>
         </div>
         <nav>
-          <h6>Navigation</h6>
-          <a href="#top" className="gray mobile">Home</a>
-          <a href="#services" className="gray">Services</a>
-          <a href="#about-us" className="gray">About us</a>
-          <a href="#projects" className="gray">Projects</a>
-          <a href="#contact-us" className="gray">Contact us</a>
+          <h6>{t("footer.navigation")}</h6>
+          <a href="#top" className="gray mobile">
+            {t("menu.home")}
+          </a>
+          <a href="#services" className="gray">
+            {t("menu.services")}
+          </a>
+          <a href="#about-us" className="gray">
+            {t("menu.about_us")}
+          </a>
+          <a href="#projects" className="gray">
+            {t("menu.portfolio")}
+          </a>
+          <a href="#contact-us" className="gray">
+            {t("menu.contact_us")}
+          </a>
         </nav>
         <div>
           <img src={Logo} alt="" />
         </div>
       </div>
     </footer>
-  )
-}
+  );
+};
 
-export default MidFooter
+export default MidFooter;

src/components/footer/footer.style.scss

@@ -1,7 +1,11 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
 footer {
-  background: radial-gradient(62.99% 90.27% at 50% 0%, rgba(225, 104, 154, 0.32) 0%, rgba(141, 162, 243, 0) 65.06%);
+  background: radial-gradient(
+    62.99% 90.27% at 50% 0%,
+    rgba(225, 104, 154, 0.32) 0%,
+    rgba(141, 162, 243, 0) 65.06%
+  );
   margin-top: 192px;
 
   .line {
@@ -10,7 +14,6 @@ footer {
     transform: translateY(-50px);
   }
 
-
   .info {
     margin-top: 68px;
     padding-bottom: 237px;
@@ -57,7 +60,9 @@ footer {
       padding-bottom: 110px;
       justify-items: center;
 
-      div:first-child, div:last-child, nav {
+      div:first-child,
+      div:last-child,
+      nav {
         grid-column: 1/7;
         grid-row: unset;
         text-align: center;

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

@@ -1,10 +1,18 @@
-import React, { useState } from "react";
+import React, { useState, forwardRef, useImperativeHandle } from "react";
 import "./form-input.style.scss";
 
-const FormInput = ({ handleChange, label, onChange, ...otherProps }) => {
+const FormInput = forwardRef(
+  ({ handleChange, label, onChange, ...otherProps }, ref) => {
     const [input, setInput] = useState("");
     const [toggleLabel, changeToggleLabel] = useState(false);
 
+    useImperativeHandle(ref, () => ({
+      clean() {
+        setInput("");
+        changeToggleLabel(false);
+      },
+    }));
+
     return (
       <div className="group">
         <label
@@ -28,6 +36,7 @@ const FormInput = ({ handleChange, label, onChange, ...otherProps }) => {
         />
       </div>
     );
-};
+  },
+);
 
 export default FormInput;

src/components/form-input/form-input.style.scss

@@ -12,7 +12,7 @@
     position: absolute;
     top: 6px;
     opacity: 0.5;
-    color: #FFF;
+    color: #fff;
     text-transform: uppercase;
     transition: 300ms ease all;
 
@@ -41,11 +41,8 @@
       @include shrinkLabel();
     }
   }
-
-
 }
 
-
 input:autofill,
 input:utofill:hover,
 input:autofill:focus {
@@ -55,4 +52,3 @@ input:autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px #111 inset;
   // transition: background-color 5000s ease-in-out 0s;
 }
-

src/components/header/header.component.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "gatsby";
 
 import { useTranslation } from "react-i18next";
 
@@ -12,7 +13,7 @@ import Email from "../../assets/images/main/footer/email.png";
 import "./header.style.scss";
 
 const MidHeader = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   const toggleMenu = () => {
     if (window !== "undefined") {
@@ -58,15 +59,16 @@ const MidHeader = () => {
 
   return (
     <header>
+      <div className="container">
         <div className="logo">
           <img src={Logo} alt="MID" />
         </div>
         <nav className="navigation">
-        <a href="#services">{t("menu.services")}</a>
-        <a href="#about-us">{t("menu.about_us")}</a>
-        <a href="#projects">{t("menu.portfolio")}</a>
-        <a href="#pricing">{t("menu.pricing")}</a>
-        <a href="#contact-us">{t("menu.contact_us")}</a>
+          <Link to="/#services">{t("menu.services")}</Link>
+          <Link to="/#about-us">{t("menu.about_us")}</Link>
+          <Link to="/#projects">{t("menu.portfolio")}</Link>
+          <Link to="/#contact-us">{t("menu.contact_us")}</Link>
+
           <LanguageSwitch />
         </nav>
 
@@ -89,11 +91,11 @@ const MidHeader = () => {
           <img src={Logo2} alt="MID Creative Digital Agency" />
 
           <nav className="navigation">
-          <a href="#top">Home</a>
-          <a href="#services">Services</a>
-          <a href="#about-us">About Us</a>
-          <a href="#projects">Featured Projects</a>
-          <a href="#contact-us">Contact Us</a>
+            <a href="#top">{t("menu.home")}</a>
+            <a href="#services">{t("menu.services")}</a>
+            <a href="#about-us">{t("menu.about_us")}</a>
+            <a href="#projects">{t("menu.portfolio")}</a>
+            <a href="#contact-us">{t("menu.contact_us")}</a>
           </nav>
 
           <div className="header-contacts">
@@ -108,6 +110,9 @@ const MidHeader = () => {
             </a>
             <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
           </div>
+
+          <LanguageSwitch />
+        </div>
       </div>
     </header>
   );

src/components/header/header.style.scss

@@ -1,6 +1,15 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
 header {
+  backdrop-filter: blur(5px);
+  z-index: 1000;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  .container {
     padding: 44px 0;
     max-width: 1224px;
     display: flex;
@@ -9,12 +18,6 @@ header {
     align-items: center;
     padding-left: 20px;
     padding-right: 20px;
-  z-index: 1000;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
 
     .navigation {
       display: flex;
@@ -42,10 +45,6 @@ header {
       display: none;
       cursor: pointer;
 
-    &:focus {
-      outline: 1px solid #fff;
-    }
-
       span {
         background-color: #fff;
         height: 5px;
@@ -117,6 +116,7 @@ header {
     }
 
     .mobile-menu {
+      display: none;
       transition: all ease 1s;
       flex-direction: column;
       align-items: center;
@@ -132,7 +132,6 @@ header {
       box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(15px);
       z-index: 2;
-    display: flex;
       position: fixed;
       height: 100vh;
       width: 295px;
@@ -159,6 +158,12 @@ header {
         img {
           margin: 0 auto;
         }
+
+        @include for-mobile {
+          a:first-child {
+            margin-bottom: 6px;
+          }
+        }
       }
 
       &.open {
@@ -167,6 +172,10 @@ header {
     }
 
     @include for-mobile {
+      .mobile-menu {
+        display: flex;
+      }
+
       .logo {
         width: 100%;
 
@@ -184,3 +193,4 @@ header {
       }
     }
   }
+}

src/components/intro/intro.component.jsx

@@ -6,7 +6,7 @@ import "./intro.styles.scss";
 import Spaceship from "../../assets/images/main/intro/spaceship.svg";
 
 const Intro = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <section className="container intro">
@@ -22,7 +22,7 @@ const Intro = () => {
           <p>{t("intro.platforms")}</p>
         </div>
         {/* TODO: Finish this for mobile */}
-        <h1 className="mobile">websites . mobileapps . e-shops . platforms</h1>
+        {/* <h1 className="mobile">websites . mobileapps . e-shops . platforms</h1> */}
       </div>
 
       <div className="rocket">

src/components/intro/intro.styles.scss

@@ -55,7 +55,6 @@
     @media all and (max-width: 1350px) {
       transform: translateX(50px);
     }
-
   }
   .rocket {
     grid-column: 1/13;
@@ -107,7 +106,11 @@
       }
 
       div {
-        display: none;
+        text-align: center;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 16px;
       }
     }
 

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import i18n from "../../i18n";
 
 import "./language-switch.style.scss";

src/components/projects/projects.style.scss

@@ -0,0 +1,3 @@
+#projects {
+  scroll-margin-block-start: 120px;
+}

src/components/section/section.component.jsx

@@ -4,7 +4,10 @@ import "./section.style.scss";
 
 const MidSection = (props) => {
   return (
-    <section className="container content" id={props.id}>
+    <section
+      className={`content container${props.mobileContainer ? "-mobile" : ""}`}
+      id={props.id}
+    >
       {props.title ? <h2>{props.title}</h2> : null}
       {props.children}
     </section>

src/components/seo.jsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { Script } from "gatsby";
 import { useSiteMetadata } from "../hooks/use-site-metadata";
 
-export const SEO = ({ title, description, pathname, children }) => {
+export const Seo = ({ title, description, pathname, children }) => {
   const {
     title: defaultTitle,
     description: defaultDescription,
@@ -19,6 +20,19 @@ export const SEO = ({ title, description, pathname, children }) => {
       <title>{seo.title}</title>
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
+      <Script
+        async
+        src="https://www.googletagmanager.com/gtag/js?id=G-8M9CZ79T4L"
+      ></Script>
+      <Script>
+        {`
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-8M9CZ79T4L');
+      `}
+      </Script>
       {children}
     </>
   );

src/components/services/services.style.scss

@@ -1,5 +1,9 @@
 @use "../../assets/stylesheets/abstracts/mixins" as *;
 
+#services {
+  scroll-margin-block-start: 120px;
+}
+
 .services {
   background: radial-gradient(
     48.62% 45.5% at 50% 50%,

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

@@ -1,15 +1,12 @@
-import React, { useState } from "react";
-import "./swiper.style.scss";
+import React from "react";
+import "./swiper-test.style.scss";
 
 import { useTranslation } from "react-i18next";
 
 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]);
+import { EffectCoverflow, Pagination, Autoplay } from "swiper/modules";
 
 const getImage = (image) => {
   return require(`../../assets/images/main/projects/${image}`).default;
@@ -17,49 +14,31 @@ const getImage = (image) => {
 
 const ProjectsSwiper = () => {
   const { t } = useTranslation();
-  const [activeSlide, setSlide] = useState("");
 
   const projects = t("projects", { returnObjects: true });
 
-  // const swiperProjects = ;
-
   return (
     <Swiper
       loop={true}
-      loopAdditionalSlides={5}
+      effect={"coverflow"}
+      grabCursor={true}
+      centeredSlides={true}
+      slidesPerView={"auto"}
+      coverflowEffect={{
+        rotate: 50,
+        stretch: 0,
+        depth: 100,
+        modifier: 1,
+        slideShadows: true,
+      }}
+      pagination={true}
+      modules={[EffectCoverflow, Pagination, Autoplay]}
       autoplay={{
         delay: 2500,
         disableOnInteraction: true,
       }}
-      speed={1200}
-      effect={"coverflow"}
-      coverflowEffect={{
-        scale: 1,
-        rotate: 0,
-        stretch: 100,
-        depth: 500,
-        modifier: 1,
-        slideShadows: false,
-      }}
-      centeredSlides={true}
-      slideToClickedSlide={true}
-      onSlideChange={(swiper) => {
-        setSlide(swiper.realIndex);
-      }}
-      breakpoints={{
-        0: {
-          slidesPerView: 1,
-        },
-        1200: {
-          slidesPerView: 2,
-        },
-      }}
-      onSwiper={(swiper) => {
-        console.log(swiper);
-      }}
-      modules={[Autoplay]}
-      id={`active-slide-${activeSlide}`}
-      key={`our-swiper`}
+      speed={800}
+      className="mySwiper"
     >
       {projects &&
         projects.map((project, i) => (

src/components/swiper/swiper-test.style.scss

@@ -0,0 +1,73 @@
+@use "../../assets/stylesheets/base/colors" as *;
+@use "../../assets/stylesheets/abstracts/mixins" as *;
+
+.swiper {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 80%;
+  height: 60%;
+  max-width: 860px;
+
+  @include for-mobile {
+    max-width: 80%;
+  }
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+#projects {
+  .swiper-slide {
+    p {
+      &:last-of-type {
+        text-align: center;
+        color: $color-text-secondary;
+        padding-top: 6px;
+      }
+    }
+    .project-info {
+      div {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        padding-top: 33px;
+        margin: 0 auto;
+        width: 50%;
+        white-space: nowrap;
+
+        @include for-mobile {
+          width: 100%;
+        }
+
+        p {
+          margin: 0 29px;
+          text-transform: uppercase;
+          color: $color-accent-primary;
+          padding: 0;
+
+          @include for-mobile {
+            margin: 0 12px;
+          }
+        }
+      }
+    }
+    &:not(.swiper-slide-active) {
+      h2 {
+        opacity: 0;
+      }
+
+      .project-info {
+        opacity: 0;
+      }
+    }
+  }
+}

src/components/swiper/swiper.style.scss

@@ -4,7 +4,8 @@
 #projects {
   .swiper {
     width: 100%;
-
+    padding-top: 50px;
+    padding-bottom: 50px;
     @include for-mobile {
       background-size: 150%;
       background-position: 50%;
@@ -66,21 +67,21 @@
       }
     }
 
-    &:before {
-      content: "";
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background: linear-gradient(
-        90deg,
-        rgba(17, 17, 17, 1) 0%,
-        rgba(255, 255, 255, 0) 10%,
-        rgba(255, 255, 255, 0) 90%,
-        rgba(17, 17, 17, 1) 100%
-      );
-      z-index: 4;
-      pointer-events: none;
-    }
+    // &:before {
+    //   content: "";
+    //   width: 100%;
+    //   height: 100%;
+    //   position: absolute;
+    // background: linear-gradient(
+    //   90deg,
+    //   rgba(17, 17, 17, 1) 0%,
+    //   rgba(255, 255, 255, 0) 10%,
+    //   rgba(255, 255, 255, 0) 90%,
+    //   rgba(17, 17, 17, 1) 100%
+    // );
+    //   z-index: 4;
+    //   pointer-events: none;
+    // }
   }
 
   .swiper-container {
@@ -88,9 +89,20 @@
     padding-bottom: 50px;
   }
   .swiper-slide {
-    width: 50%;
+    // width: 50%;
+
+    background-position: center;
+    background-size: cover;
+    width: 300px;
+    height: 300px;
+
     transition: all 0.5s;
 
+    img {
+      display: block;
+      width: 100%;
+    }
+
     h2 {
       width: max-content;
       margin-left: auto;
@@ -99,16 +111,6 @@
 
     .img-wrap {
       position: relative;
-
-      .img-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        z-index: 1;
-      }
     }
 
     p {

src/main/main.component.jsx

@@ -13,7 +13,7 @@ import MidFooter from "../components/footer/footer.component";
 import Projects from "../components/projects/projects.component";
 
 const MidMainPage = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <div className="main-page">
@@ -28,7 +28,7 @@ const MidMainPage = () => {
       <MidSection title={t("about_us.title")} id="about-us">
         <About />
       </MidSection>
-      <MidSection id="projects">
+      <MidSection id="projects" mobileContainer>
         <Projects />
       </MidSection>
 

src/main/main.style.scss

@@ -9,5 +9,4 @@
       rgba(23, 23, 23, 0) 100%
     );
   }
-
 }

src/pages/index.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SEO } from "../components/seo";
+import { Seo } from "../components/seo";
 
 import "../assets/stylesheets/style.scss";
 
@@ -11,4 +11,4 @@ const IndexPage = () => {
 
 export default IndexPage;
 
-export const Head = () => <SEO />;
+export const Head = () => <Seo title="MID Creative" />;

src/translations/en.json

@@ -4,7 +4,8 @@
     "about_us": "About Us",
     "portfolio": "Portfolio",
     "pricing": "Pricing",
-    "contact_us": "Contact Us"
+    "contact_us": "Contact Us",
+    "home": "Home"
   },
   "intro": {
     "creating": "We are creating",
@@ -82,5 +83,66 @@
       "info": ["Website", "CMS"],
       "text": "Fleet Management Software providers - website and content management system development"
     }
-  ]
+  ],
+  "contacts": {
+    "title": "Let’s bring your project to the Moon",
+    "name": "name",
+    "email": "E-mail",
+    "phone": "phone",
+    "send": "Send",
+    "success": "Thank you for sharing your contacts! We will get in touch!",
+    "error": "Looks like something went wrong, please try to reach us directly "
+  },
+  "privacy": {
+    "title": "Privacy Policy",
+    "description": "The privacy statement of users of this website, garmtech.com (hereinafter referred to as the Website) describes the procedures for use of personal data collected or received by GARMTECH LP (hereinafter referred to as the Website Owner) from users of this Website (hereinafter referred to as the Users). \n\nThe processing of personal data for the needs of Garmtech.com project is carried out by GARMTECH LP, registered in the Companies House of Great Britain under No. SLO21251.\n\nIdentification of persons and signature of electronic documents are provided by GARMTECH LP.\n\nThis Privacy Statement describes how the Website Owner can collect or receive personal data from the User, the types of personal data to be collected, procedures for disclosure and protection of these data, the User’s rights, and means of communication with the Website Owner available to the User in order to get additional information about the privacy principles.",
+    "content": [
+      {
+        "title": "How the User’s personal data can be collected or received.",
+        "message": "The Website can collect or receive the User’s personal data when the User uses services of the Website.\n\nThe User’s personal data are collected solely and exclusively for the provision of the services offered by the Website and only to the extent necessary for the provision of the above-mentioned services."
+      },
+      {
+        "title": "The User’s personal data that the Website Owner is entitled to collect.",
+        "message": "By means of the Services provided via the Website, the Website Owner can collect the following User’s personal data: first name, last name, address, phone number, e-mail address and IP address.\n\nIn addition, the User can voluntarily provide other data related to the User’s questions or comments."
+      },
+      {
+        "title": "How the User’s personal data are used.",
+        "message": "The Website Owner uses the User's Personal data to provide the Services offered by the Website, respond to user comments or questions and to diagnose technical problems."
+      },
+      {
+        "title": "How the User’s personal data can be disclosed.",
+        "message": "The Website does not sell, rent or exchange the User’s personal data. The Website can disclose the User’s personal data only: to public authorities or other third parties, in accordance with the effective legislation of Great Britain and European Union, as well as to legal or natural persons who are registered on the Website as service providers (hereinafter referred to as the Service Providers) and use the Website for the provision of their services."
+      },
+      {
+        "title": "International data transfer.",
+        "message": "The User’s personal data collected by the Website Owner are not transferred to non-EU or non-EEA countries."
+      },
+      {
+        "title": "How the User’s personal data are protected.",
+        "message": "The Website Owner takes appropriate technical and organizational security measures to protect the personal data provided by the User from accidental, unlawful or unauthorized access and use."
+      },
+      {
+        "title": "Links to other websites.",
+        "message": "The Website may contain links to websites maintained by the Service Providers, the terms of use and privacy policies of which may be different from those of this Website. The Website Owner is not responsible for information or terms of third-party websites. Before using other websites and providing personal data or any other information to or through other websites, we encourage the User to get acquainted with the relevant terms of use and privacy statement."
+      },
+      {
+        "title": "Changes to this Privacy Statement.",
+        "message": "The Website Owner reserves the right to change the privacy statement of this Website at any time. The changes to the privacy statement of the Website become valid after their introduction. The date of the last version is specified at the beginning of this document. The Website Owner encourage the User to regularly reread the privacy statement of this Website."
+      },
+      {
+        "title": "The User’s Rights.",
+        "message": "The User’s rights stipulated by the applicable legislation may include the right to access the User’s personal data processed by the Website Owner, the right to correct, delete or block such personal data and the right to object to certain personal data processing. In order to exercise these rights, the User must submit a written request, using the contact information provided in the How to contact the Website Owner section."
+      },
+      {
+        "title": "How to contact the Website Owner.",
+        "message": "The User can send comments or questions about the privacy statement of the Website to the e-mail address: info@garmtech.com or to the postal address: Garmtech LP GARMTECH LP, Suite 3087, 15 Bell street, St.Andrews, Fife, KY16 9UR, United Kingdom."
+      }
+    ]
+  },
+  "footer": {
+    "company": "Company",
+    "registration_nr": "Registration nr.",
+    "address": "Address",
+    "navigation": "Navigation"
+  }
 }

src/translations/lv.json

@@ -4,7 +4,8 @@
     "about_us": "Par mums",
     "portfolio": "Portfolio",
     "pricing": "Cenas",
-    "contact_us": "Sazināties"
+    "contact_us": "Sazināties",
+    "home": "Mājas"
   },
   "intro": {
     "creating": "Mēs izstrādājam",
@@ -82,5 +83,20 @@
       "info": ["Website", "CMS"],
       "text": "Autoparka pārvaldības sistēmas mājas lapa un satura vadības sistēmas izstrāde"
     }
-  ]
+  ],
+  "contacts": {
+    "title": "Aizšauj savu projektu līdz mēnesim",
+    "name": "Vārds",
+    "email": "Ēpasts",
+    "phone": "Telefons",
+    "send": "Nosūtīt",
+    "success": "Paldies ",
+    "error": "Izskatās, ka kautkas nestrādā :( Uzrakstiet mums uz "
+  },
+  "footer": {
+    "company": "Kompānija",
+    "registration_nr": "Reģistrācijas nr.",
+    "address": "Adrese",
+    "navigation": "Navigācija"
+  }
 }