create component WelcomePage, add translations, change height and pad…

…ding-top for WelcomePage, NoEventsPage, main. Add PORT=8080 to start command.

package.json

@@ -37,7 +37,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=8080 react-scripts start",
     "build": "react-scripts build",
     "format": "prettier --write src/**/*.{ts,tsx}",
     "lint": "eslint --fix src/**/*.{ts,tsx}",

src/assets/locales/en/translation.json

@@ -32,7 +32,8 @@
     "take": "Take",
     "delete": "Delete",
     "edit": "Edit",
-    "share": "Share"
+    "share": "Share",
+    "remember_me": "Remember me"
   },
   "tabs": {
     "common_things": "Common things",
@@ -41,5 +42,12 @@
   },
   "inputs": {
     "whats_your_name": "What is your name?"
+  },
+  "pages": {
+    "welcome": {
+      "title": "Welcome!",
+      "description": "We are an app [NAME], the best app to organize your event!",
+      "whats_your_name": "What is your name?"
+    }
   }
 }

src/assets/locales/ru/translation.json

@@ -32,7 +32,8 @@
     "take": "Взять",
     "delete": "Удалить",
     "edit": "Редактировать",
-    "share": "Поделиться"
+    "share": "Поделиться",
+    "remember_me": "Запомнить меня"
   },
   "tabs": {
     "common_things": "Общие вещи",
@@ -41,5 +42,12 @@
   },
   "inputs": {
     "whats_your_name": "Как вас зовут?"
+  },
+  "pages": {
+    "welcome": {
+      "title_welcome": "Добро пожаловать!",
+      "description": "Мы — приложение [NAME], лучшее приложение для организации мероприятий!",
+      "whats_your_name": "Как вас зовут?"
+    }
   }
 }

src/js/view/components/App/App.tsx

@@ -2,14 +2,14 @@ import React, { useCallback, useEffect } from "react";
 import { Provider } from "react-redux";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-// import { langLocales } from "../../../common/constants";
 import store from "../../../stores/store";
 import { Panel } from "../Panel/Panel";
+import { Header } from "../Header/Header";
 import { UIKitPage } from "../UIKitPage/UIKitPage";
 import { DevNavPage } from "../DevNavPage/DevNavPage";
 import SPAremoveit from "../SPAremoveit/SPAremoveit";
 import { NoEventsPage } from "../NoEventsPage/NoEventsPage";
-import { Header } from "../Header/Header";
+import { WelcomePage } from "../WelcomePage/WelcomePage";
 
 import "../../../../styles/index.css";
 
@@ -22,44 +22,23 @@ export function App() {
     [i18n]
   );
 
-  /*  const onLangChange = useCallback(
-      (e: React.ChangeEvent<HTMLSelectElement>) => {
-        if (e.target.value) {
-          void cLanguage(e.target.value);
-        } else {
-          void cLanguage("ru");
-        }
-      },
-      [cLanguage]
-    ); */
-
   useEffect(() => {
     void cLanguage("ru");
   }, [cLanguage]);
 
   return (
     <Provider store={store}>
-      <div className="relative bg-light-4 dark:bg-dark-0 min-h-screen">
-        {/*  <div style={{ width: 150, padding: 12, display: "flex" }}>
-                   <select
-            className="select w-full select-xs w-full max-w-xs"
-            onChange={(e) => onLangChange(e)}
-          >
-            {langLocales.map((opt) => (
-              <option key={opt.id} value={opt.lang}>
-                {opt.title}
-              </option>
-            ))}
-          </select>
-        </div> */}
+      <div className="relative bg-light-4 dark:bg-dark-0 ">
+
         <Header isWithLogo />
 
-        <main className="pt-10">
+        <main>
           <BrowserRouter>
             <Routes>
               <Route path="/" element={<DevNavPage />} />
               <Route path="/alex" element={<Panel />} />
               <Route path="/ui-kit" element={<UIKitPage />} />
+              <Route path="/welcome" element={<WelcomePage />} />
               <Route path="/no-events" element={<NoEventsPage />} />
               <Route path="/SPAremoveit" element={<SPAremoveit />} />
             </Routes>

src/js/view/components/DevNavPage/DevNavPage.tsx

@@ -20,6 +20,11 @@ export function DevNavPage() {
               <ButtonPrimary>UI-kit page</ButtonPrimary>
             </Link>
           </div>
+          <div className="mb-8 mx-auto">
+            <Link to="/welcome">
+              <ButtonPrimary>Welcome Page</ButtonPrimary>
+            </Link>
+          </div>
           <div className="mb-8 mx-auto">
             <Link to="/no-events">
               <ButtonPrimary>No Events Page</ButtonPrimary>

src/js/view/components/NoEventsPage/NoEventsPage.tsx

@@ -8,13 +8,12 @@ export const NoEventsPage = () => {
   return (
     <div
       className="no-events-page
-   flex flex-col
+   flex flex-col min-h-screen
    justify-between
-    px-4 pt-3 pb-6
+    px-4 pt-14 pb-6
     sm:w-6/12
-    w-full h-[calc(100vh_-_51px)]
-    mx-auto
-    text-black-0 dark:text-light-4"
+    w-full
+    mx-auto"
     >
       <TitleH1>{t("events.list.your_events")}</TitleH1>
 

src/js/view/components/WelcomePage/WelcomePage.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonPrimary, Input, TextBodyLarge, TitleH1 } from "../../elements";
+import tentImg from "../../../../assets/images/tent.png";
+
+export const WelcomePage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="min-h-screen
+      text-center flex flex-col
+      justify-between md:justify-start
+      px-4 pt-16 xs:pt-24 pb-6 mx-auto
+      sm:w-6/12
+      w-full">
+      <div>
+        <div className="mb-8 xs:mb-14 mx-auto">
+          <img src={tentImg} alt="Tent" className="mx-auto" />
+        </div>
+
+        <div className="mb-6">
+          <TitleH1>{t("pages.welcome.title")}</TitleH1>
+        </div>
+
+        <div className="mb-6">
+          <TextBodyLarge>
+            {t("pages.welcome.description")}
+          </TextBodyLarge>
+        </div>
+
+        <div className="mb-8 xs:mb-10">
+          <TextBodyLarge>{t("pages.welcome.whats_your_name")}</TextBodyLarge>
+        </div>
+
+        <div className="mb-10 xs:mb-14">
+          <Input placeholder={t("pages.welcome.whats_your_name")} />
+        </div>
+      </div>
+      <div className="px-7">
+        <ButtonPrimary>
+          {t("buttons.remember_me")}
+        </ButtonPrimary>
+      </div>
+    </div>
+  );
+};

src/js/view/elements/index.ts

@@ -1,7 +1,6 @@
 export * from "./buttons/index";
 export * from "./inputs/index";
 export * from "./typography/index";
-
 export * from "./Indicator";
 export * from "./Ellipse";
 export * from "./EllipseWithImg";

tailwind.config.js

@@ -4,6 +4,9 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      screens: {
+        "xs": "390px"
+      },
       fontFamily: { "main": ["Manrope", "sans-serif"]},
       fontSize: {
         "h1": ["1.5rem", { lineHeight: "32px" }],