Tervetuloa nauttimaan!

package.json

@@ -10,9 +10,12 @@
     "@types/node": "^12.12.67",
     "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
+    "i18next": "^20.3.2",
+    "i18next-browser-languagedetector": "^6.1.2",
     "react": "^16.13.1",
     "react-countdown": "^2.3.2",
     "react-dom": "^16.13.1",
+    "react-i18next": "^11.11.1",
     "react-scripts": "3.4.3",
     "react-three-fiber": "^5.0.3",
     "three": "^0.125.0",

src/App.tsx

@@ -3,12 +3,14 @@ import './App.css'
 import Three from './components/three'
 import Logo from './components/logo'
 import CountDown from './components/countdown'
+import WelcomeToEnjoy from './components/WelcomeToEnjoy'
 
 function App() {
   return (
     <div className="App">
       <Three />
       <Logo />
+      <WelcomeToEnjoy />
       <CountDown />
     </div>
   )

src/components/WelcomeToEnjoy/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import './style.css';
+
+const WelcomeToEnjoy: React.FC = () => {
+  const { t } = useTranslation('common');
+
+  return (
+    <div className="tervetuloa-nauttimaan-container">
+      {t('welcome_text')}
+    </div>
+  );
+};
+
+export default WelcomeToEnjoy;

src/components/WelcomeToEnjoy/style.css

@@ -0,0 +1,22 @@
+@keyframes spin {
+  from {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateY(0deg);
+  }
+  to {
+    -webkit-transform: rotateX(360deg);
+    transform: rotateY(-360deg);
+  }
+}
+
+.tervetuloa-nauttimaan-container {
+  position: absolute;
+  left: 0;
+  bottom: 150px;
+  z-index: 999;
+  width: 100%;
+  text-align: center;
+  font-size: 40px;
+  color: #fff;
+  animation: spin 10s linear infinite;
+}

src/i18n.ts

@@ -0,0 +1,36 @@
+import i18n, { Resource } from 'i18next';
+import LanguageDetector, { DetectorOptions } from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import commonEn from './locales/en/common.json';
+import commonFi from './locales/fi/common.json';
+import commonDe from './locales/de/common.json';
+import commonRu from './locales/ru/common.json';
+
+const detection: DetectorOptions = {
+  order: [ 'navigator' ],
+};
+
+const resources: Resource = {
+  en: { common: commonEn },
+  fi: { common: commonFi },
+  de: { common: commonDe },
+  ru: { common: commonRu },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    detection,
+    resources,
+    ns: [ 'common' ],
+    fallbackLng: 'en',
+    supportedLngs: [ 'en', 'fi', 'de', 'ru' ],
+    interpolation: {
+      escapeValue: false,
+    },
+    debug: false,
+  });
+
+export default i18n;

src/index.tsx

@@ -4,6 +4,8 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+import './i18n';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

src/locales/de/common.json

@@ -0,0 +1,3 @@
+{
+  "welcome_text": "Willkommen zu genießen!"
+}

src/locales/en/common.json

@@ -0,0 +1,3 @@
+{
+  "welcome_text": "Welcome to enjoy!"
+}

src/locales/fi/common.json

@@ -0,0 +1,3 @@
+{
+  "welcome_text": "Tervetuloa nauttimaan!"
+}

src/locales/ru/common.json

@@ -0,0 +1,3 @@
+{
+  "welcome_text": "Добро пожаловать, чтобы насладиться!"
+}