From 72c02db378e64d8b1525f86a0b6d7a23d9d60cd0 Mon Sep 17 00:00:00 2001 From: Sergejs Kozinecs Date: Sat, 6 Aug 2022 17:55:22 +0300 Subject: [PATCH] WIP: translations --- .../images/main/services/mobile_app.svg | 9 +++ .../services/{icon3.svg => ui_animations.svg} | 0 .../images/main/services/web_development.svg | 10 +++ src/components/about/about.component.jsx | 6 +- .../contact-form/contact-form.component.jsx | 6 +- src/components/header/header.component.jsx | 66 ++++++++++--------- .../language-switch.component.jsx | 2 +- src/components/services-card/card.style.scss | 9 ++- .../services/services.component.jsx | 14 +++- .../swiper/mid-swiper.component.jsx | 2 +- src/components/swiper/swiper.style.scss | 12 ++-- src/{pages => }/i18n.js | 4 +- src/{pages => }/main/main.component.jsx | 16 ++--- src/{pages => }/main/main.style.scss | 0 src/pages/404.js | 18 ++--- src/pages/index.jsx | 2 +- src/translations/en.json | 23 ++++--- src/translations/lv.json | 53 +++++++++++++-- 18 files changed, 166 insertions(+), 86 deletions(-) create mode 100644 src/assets/images/main/services/mobile_app.svg rename src/assets/images/main/services/{icon3.svg => ui_animations.svg} (100%) create mode 100644 src/assets/images/main/services/web_development.svg rename src/{pages => }/i18n.js (91%) rename src/{pages => }/main/main.component.jsx (57%) rename src/{pages => }/main/main.style.scss (100%) diff --git a/src/assets/images/main/services/mobile_app.svg b/src/assets/images/main/services/mobile_app.svg new file mode 100644 index 0000000..6fe41c4 --- /dev/null +++ b/src/assets/images/main/services/mobile_app.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/main/services/icon3.svg b/src/assets/images/main/services/ui_animations.svg similarity index 100% rename from src/assets/images/main/services/icon3.svg rename to src/assets/images/main/services/ui_animations.svg diff --git a/src/assets/images/main/services/web_development.svg b/src/assets/images/main/services/web_development.svg new file mode 100644 index 0000000..051cae8 --- /dev/null +++ b/src/assets/images/main/services/web_development.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/about/about.component.jsx b/src/components/about/about.component.jsx index 19cc943..58d3405 100644 --- a/src/components/about/about.component.jsx +++ b/src/components/about/about.component.jsx @@ -39,7 +39,7 @@ const About = () => {

6+

-

Years experiance

+

Years experience

 @@ -53,8 +53,8 @@ const About = () => {

{t("about_us.webpages")}

-

{t("about_us.amount_experiance")}

-

{t("about_us.experiance")}

+

{t("about_us.amount_experience")}

+

{t("about_us.experience")}

diff --git a/src/components/contact-form/contact-form.component.jsx b/src/components/contact-form/contact-form.component.jsx index 74f80e8..c9e4cd5 100644 --- a/src/components/contact-form/contact-form.component.jsx +++ b/src/components/contact-form/contact-form.component.jsx @@ -50,11 +50,11 @@ const ContactForm = () => { yellow planet - {/*
postForm(e, formData)} + // onSubmit={(e) => postForm(e, formData)} > { /> - */} + ); }; diff --git a/src/components/header/header.component.jsx b/src/components/header/header.component.jsx index 7f2c87c..f81d086 100644 --- a/src/components/header/header.component.jsx +++ b/src/components/header/header.component.jsx @@ -15,42 +15,46 @@ const MidHeader = () => { const { t, i18n } = useTranslation(); const toggleMenu = () => { - const MenuButton = document.getElementsByClassName("mobile-menu-btn")[0]; - const Menu = document.getElementsByClassName("mobile-menu")[0]; + if (window !== "undefined") { + const MenuButton = document.getElementsByClassName("mobile-menu-btn")[0]; + const Menu = document.getElementsByClassName("mobile-menu")[0]; - MenuButton.classList.toggle("open"); - Menu.classList.toggle("open"); + MenuButton.classList.toggle("open"); + Menu.classList.toggle("open"); - if (Menu.classList.contains("open")) { - const outsideClickListener = (event) => { - let MenuVisible = getComputedStyle(Menu).right; + if (Menu.classList.contains("open")) { + const outsideClickListener = (event) => { + let MenuVisible = getComputedStyle(Menu).right; - if ( - !Menu.contains(event.target) && - MenuVisible !== 0 && - !MenuButton.contains(event.target) - ) { - Menu.classList.remove("open"); - MenuButton.classList.remove("open"); - removeClickListener(); - } - if (!Menu.classList.contains("open")) { - removeClickListener(); - } - }; - const removeClickListener = () => { - document.removeEventListener("click", outsideClickListener); - }; - document.addEventListener("click", outsideClickListener); + if ( + !Menu.contains(event.target) && + MenuVisible !== 0 && + !MenuButton.contains(event.target) + ) { + Menu.classList.remove("open"); + MenuButton.classList.remove("open"); + removeClickListener(); + } + if (!Menu.classList.contains("open")) { + removeClickListener(); + } + }; + const removeClickListener = () => { + document.removeEventListener("click", outsideClickListener); + }; + document.addEventListener("click", outsideClickListener); + } } - }; - window.addEventListener("resize", () => { - document - .getElementsByClassName("mobile-menu-btn")[0] - .classList.remove("open"); - document.getElementsByClassName("mobile-menu")[0].classList.remove("open"); - }); + window.addEventListener("resize", () => { + document + .getElementsByClassName("mobile-menu-btn")[0] + .classList.remove("open"); + document + .getElementsByClassName("mobile-menu")[0] + .classList.remove("open"); + }); + }; return (
diff --git a/src/components/language-switch/language-switch.component.jsx b/src/components/language-switch/language-switch.component.jsx index 370a53f..b920653 100644 --- a/src/components/language-switch/language-switch.component.jsx +++ b/src/components/language-switch/language-switch.component.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import i18n from "../../pages/i18n"; +import i18n from "../../i18n"; import "./language-switch.style.scss"; diff --git a/src/components/services-card/card.style.scss b/src/components/services-card/card.style.scss index cdd5d5d..490d97c 100644 --- a/src/components/services-card/card.style.scss +++ b/src/components/services-card/card.style.scss @@ -13,12 +13,17 @@ flex-direction: column; align-items: center; + img { + min-height: 99px; + } + h3 { margin-top: 63px; margin-bottom: 16px; } - h3, p { + h3, + p { text-align: center; } @@ -45,4 +50,4 @@ grid-column: 1/7; } } -} \ No newline at end of file +} diff --git a/src/components/services/services.component.jsx b/src/components/services/services.component.jsx index 692da0b..310aefa 100644 --- a/src/components/services/services.component.jsx +++ b/src/components/services/services.component.jsx @@ -4,22 +4,30 @@ 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"; const Services = () => { - const { t, i18n } = useTranslation(); + const { t } = useTranslation(); const cards = t("services.cards", { returnObjects: true }); + const getImage = (image) => { + return require(`../../assets/images/main/services/${image}`).default; + }; + return (
circle {/* TODO: Add animated icons */} {cards && cards.map((card, i) => ( - + ))}
); diff --git a/src/components/swiper/mid-swiper.component.jsx b/src/components/swiper/mid-swiper.component.jsx index e4a59af..cfa960e 100644 --- a/src/components/swiper/mid-swiper.component.jsx +++ b/src/components/swiper/mid-swiper.component.jsx @@ -33,7 +33,7 @@ const ProjectsSwiper = () => {

{info}

))} -

{projects.text}

+

{project.text}

)); diff --git a/src/components/swiper/swiper.style.scss b/src/components/swiper/swiper.style.scss index 9ce1411..f69cb51 100644 --- a/src/components/swiper/swiper.style.scss +++ b/src/components/swiper/swiper.style.scss @@ -14,7 +14,7 @@ background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(255, 0, 92, 0.4) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } @@ -22,35 +22,35 @@ background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(255, 0, 0, 0.5) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } &#active-slide-2 { background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(255, 196, 105, 0.7) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } &#active-slide-3 { background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(37, 192, 255, 0.9) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } &#active-slide-4 { background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(0, 231, 10, 0.4) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } &#active-slide-5 { background: radial-gradient( 31.95% 51.75% at 50% 51.75%, rgba(245, 194, 26, 0.4) 0%, - rgba(23, 23, 23, 0) 100% + rgba(23, 23, 23, 0) 90% ); } diff --git a/src/pages/i18n.js b/src/i18n.js similarity index 91% rename from src/pages/i18n.js rename to src/i18n.js index 2d56770..c01836a 100644 --- a/src/pages/i18n.js +++ b/src/i18n.js @@ -1,8 +1,8 @@ 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"; +import en from "./translations/en.json"; +import lv from "./translations/lv.json"; const resources = { en: { diff --git a/src/pages/main/main.component.jsx b/src/main/main.component.jsx similarity index 57% rename from src/pages/main/main.component.jsx rename to src/main/main.component.jsx index f42cace..da04c52 100644 --- a/src/pages/main/main.component.jsx +++ b/src/main/main.component.jsx @@ -3,14 +3,14 @@ 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"; -import Services from "../../components/services/services.component"; -import About from "../../components/about/about.component"; -import ContactForm from "../../components/contact-form/contact-form.component"; -import MidFooter from "../../components/footer/footer.component"; -import Projects from "../../components/projects/projects.component"; +import MidHeader from "../components/header/header.component"; +import Intro from "../components/intro/intro.component"; +import MidSection from "../components/section/section.component"; +import Services from "../components/services/services.component"; +import About from "../components/about/about.component"; +import ContactForm from "../components/contact-form/contact-form.component"; +import MidFooter from "../components/footer/footer.component"; +import Projects from "../components/projects/projects.component"; const MidMainPage = () => { const { t, i18n } = useTranslation(); diff --git a/src/pages/main/main.style.scss b/src/main/main.style.scss similarity index 100% rename from src/pages/main/main.style.scss rename to src/main/main.style.scss diff --git a/src/pages/404.js b/src/pages/404.js index 053ae0e..fd99104 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,28 +1,28 @@ -import * as React from "react" -import { Link } from "gatsby" +import * as React from "react"; +import { Link } from "gatsby"; // styles const pageStyles = { color: "#232129", padding: "96px", fontFamily: "-apple-system, Roboto, sans-serif, serif", -} +}; const headingStyles = { marginTop: 0, marginBottom: 64, maxWidth: 320, -} +}; const paragraphStyles = { marginBottom: 48, -} +}; const codeStyles = { color: "#8A6534", padding: 4, backgroundColor: "#FFF4DB", fontSize: "1.25rem", borderRadius: 4, -} +}; // markup const NotFoundPage = () => { @@ -48,7 +48,7 @@ const NotFoundPage = () => { Go home.

- ) -} + ); +}; -export default NotFoundPage +export default NotFoundPage; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index e0f3b42..f6382a2 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,7 +2,7 @@ import * as React from "react"; import "../assets/stylesheets/style.scss"; -import MidMainPage from "./main/main.component"; +import MidMainPage from "../main/main.component"; const IndexPage = () => { return ; diff --git a/src/translations/en.json b/src/translations/en.json index 80701f3..0111c27 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -19,15 +19,18 @@ "cards": [ { "title": "Web development", - "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet." + "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet.", + "image": "web_development.svg" }, { "title": "Mobile App", - "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet." + "text": "Blending the latest design & development trends, end-user needs, and best user experience practices", + "image": "mobile_app.svg" }, { "title": "UI & Animations", - "text": "We build modern and easy to use websites, e-commerce solutions for desktop, mobile, tablet." + "text": "Craft deligthful experience for your digital products. Solve real problems and improve your vital business metrics through beautiful interfaces", + "image": "ui_animations.svg" } ] }, @@ -39,8 +42,8 @@ "completed": "Completed projects", "amount_webpages": "400+", "webpages": "Web Pages created", - "amount_experiance": "6+", - "experiance": "Years experiance" + "amount_experience": "6+", + "experience": "Years experience" }, "projects": [ { @@ -53,31 +56,31 @@ "title": "Custom PC4U", "image": "custom-pc4u.png", "info": ["Website", "Platform", "UI / UX"], - "text": "Smart matching platform for Streamers and Advertisers" + "text": "Smart PC builder and e-shop" }, { "title": "MOCKBA MODULAR", "image": "mockba-modular.png", "info": ["Website", "Animations", "UI / UX"], - "text": "Smart matching platform for Streamers and Advertisers" + "text": "Modular construction website" }, { "title": "PRIYATKI", "image": "pryatki.png", "info": ["Website", "E-shop", "CMS"], - "text": "Smart matching platform for Streamers and Advertisers" + "text": "Kids fashion e-shop" }, { "title": "SIZZAPP", "image": "sizzapp.png", "info": ["Website", "Landing", "UI / UX"], - "text": "Smart matching platform for Streamers and Advertisers" + "text": "Car and motorcycle security solution landing page" }, { "title": "TrackPro", "image": "trackpro.png", "info": ["Website", "CMS"], - "text": "Smart matching platform for Streamers and Advertisers" + "text": "Fleet Management Software providers - website and content management system development" } ] } diff --git a/src/translations/lv.json b/src/translations/lv.json index 7e5ad49..25d753b 100644 --- a/src/translations/lv.json +++ b/src/translations/lv.json @@ -19,15 +19,18 @@ "cards": [ { "title": "Mājas lapas", - "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un e-komercijas risinājumus." + "text": "Mēs izstrādājam modernas un ērti lietojamas mājaslapas, e-komerciajs risinājumus datoriem, mobilajām ierīcēm un planšetdatoriem.", + "image": "web_development.svg" }, { "title": "Mobīlās aplikācijas", - "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un e-komercijas risinājumus." + "text": "Mēs savienojam jaunākās dizaina un izstrādes tendences, gala lietotāju vajadzības un labāko lietotāju pieredzes praksi. ", + "image": "mobile_app.svg" }, { "title": "UI & Animācijas", - "text": "Mēs izstrādājam modernas un ērti lietojamas mājas lapas un e-komercijas risinājumus." + "text": "Veido patīkamu pieredzi savos digitālajos produktos. Risini īstas problēmas un uzlabo savus svarīgākos biznesa rādītājus izmantojot skaistas saskarnes.", + "image": "ui_animations.svg" } ] }, @@ -39,7 +42,45 @@ "completed": "Realizētu projektu", "amount_webpages": "400+", "webpages": "Izstrādātu mājas lapu", - "amount_experiance": "6+", - "experiance": "Gadu pieredze" - } + "amount_experience": "6+", + "experience": "Gadu pieredze" + }, + "projects": [ + { + "title": "Inflid", + "image": "inflid_full_1.png", + "info": ["Website", "Platform", "UI / UX"], + "text": "Influenceru mārketinga platforuma" + }, + { + "title": "Custom PC4U", + "image": "custom-pc4u.png", + "info": ["Website", "Platform", "UI / UX"], + "text": "Viedais personālo datoru konstruktors un e-veikals" + }, + { + "title": "MOCKBA MODULAR", + "image": "mockba-modular.png", + "info": ["Website", "Animations", "UI / UX"], + "text": "Moduļu konstruckiju mājas lapa" + }, + { + "title": "PRIYATKI", + "image": "pryatki.png", + "info": ["Website", "E-shop", "CMS"], + "text": "Bērnu modes e-veikals" + }, + { + "title": "SIZZAPP", + "image": "sizzapp.png", + "info": ["Website", "Landing", "UI / UX"], + "text": "Auto un motociklu drošības risinājumu mājas lapa" + }, + { + "title": "TrackPro", + "image": "trackpro.png", + "info": ["Website", "CMS"], + "text": "Autoparka pārvaldības sistēmas mājas lapa un satura vadības sistēmas izstrāde" + } + ] }