WIP: translations and form

This commit is contained in:
Sergejs Kozinecs 2022-08-06 10:11:39 +03:00
parent d4544c017f
commit 335010d20b
18 changed files with 5265 additions and 5689 deletions

View file

@ -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"
}

View file

@ -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>
<p className="text">
Working more than 6 years in creative development industry we are sure
that we can realize any difficulty project
</p>
<h5>{t("about_us.sub_title")}</h5>
<p className="text">{t("about_us.text")}</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>
<p>Completed projects</p>
<h4>{t("about_us.amount_completed")}</h4>
<p>{t("about_us.completed")}</p>
</div>
<div>
<h4>400+</h4>
<p>Web Pages created</p>
<h4>{t("about_us.amount_webpages")}</h4>
<p>{t("about_us.webpages")}</p>
</div>
<div>
<h4>6+</h4>
<p>Years experiance</p>
<h4>{t("about_us.amount_experiance")}</h4>
<p>{t("about_us.experiance")}</p>
</div>
</div>
</div>

View file

@ -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>
);
};

View file

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

View file

@ -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="#about-us">About Us</a>
<a href="#projects">Portfolio</a>
<a href="#pricing">Pricing</a>
<a href="#contact-us">Contact Us</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="#pricing">{t("menu.pricing")}</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" />

View file

@ -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;

View file

@ -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>E-shops</p>
<p>Platforms</p>
<p>{t("intro.apps")}</p>
<p>{t("intro.shops")}</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>
);

View file

@ -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;

View file

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

View file

@ -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;

View file

@ -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
icon={Icon}
title="Web development"
text="We build modern and easy to use websites, e-commerce solutions for desktop, mobile and tablet."
/>
<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."
/>
{/* TODO: Add animated icons */}
{cards &&
cards.map((card, i) => (
<Card icon={Icon} title={card.title} text={card.text} key={i} />
))}
</div>
);
};

View file

@ -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 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 { 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]);
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">
<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>
{projects && swiperProjects}
</Swiper>
);
};

31
src/pages/i18n.js Normal file
View file

@ -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;

View file

@ -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 (
<MidMainPage></MidMainPage>
)
}
return <MidMainPage></MidMainPage>;
};
export default IndexPage
export default IndexPage;

View file

@ -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">

83
src/translations/en.json Normal file
View file

@ -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"
}
]
}

45
src/translations/lv.json Normal file
View file

@ -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"
}
}

10416
yarn.lock

File diff suppressed because it is too large Load diff