8 files changed, 101 insertions, 12 deletions
diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx
index 1bb224f..cb82e90 100644
--- a/client/src/admin/jsx/App.jsx
+++ b/client/src/admin/jsx/App.jsx
@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom';
 
 import "../scss/index.scss";
 
-import TopBar from './TopBar.jsx';
-import Info from './Info.jsx';
+import TopBar from './layout/TopBar.jsx';
+import Info from './layout/Info.jsx';
 import MainScreen from './MainScreen.jsx';
+import Creator from './creator/Creator.jsx';
 import Context from '../context';
 import { defaultLanguage } from '../data/translations';
 import { getUser, setDbLang } from '../api';
@@ -33,11 +34,12 @@ const App = () => {
   }, [user]);
 
   return (
-    <Context.Provider value={{ lang, setHover, setInfo }}>
+    <Context.Provider value={{ lang, setHover, setInfo, setView }}>
       <div className="main">
         <TopBar lang={lang} setLang={setLangWithDb} user={user} setUser={setUser} />
         <div className="main__content">
           { view === 'main' && <MainScreen projects={projects} /> }
+          { view === 'creator' && <Creator projects={projects} /> }
         </div>
         <Info info={info} hover={hover} />
       </div>
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index 3d65384..ea2def5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { WithHover, t } from '../hocs';
+import { WithHover, t, goTo } from '../hocs';
 
 const MainScreen = ({ projects }) => (
   <div className="main-screen">
@@ -16,7 +16,9 @@ const MainScreen = ({ projects }) => (
         </WithHover>
       )}
       <WithHover message="create-new-project-hover">
-        <p className="main-screen__item">{ t('create-new-project') }</p>
+        <p className="main-screen__item" onClick={ goTo('creator') }>
+          { t('create-new-project') }
+        </p>
       </WithHover>
     </div>
   </div>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
new file mode 100644
index 0000000..896235e
--- /dev/null
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import Step1 from './Step1';
+import { t, goTo } from '../../hocs';
+
+const Creator = ({projects}) => {
+  const [step, setStep] = useState('step1');
+
+  switch(step) {
+    case 'step1':
+      return <Step1 setStep={setStep} />;
+    case 'step2':
+      return null;
+    default:
+      return null;
+  }
+};
+
+export default Creator;
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
new file mode 100644
index 0000000..647661e
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { WithHover, t, goTo } from '../../hocs';
+
+const Step1 = () => {
+  const [websiteTitle, setWebsiteTitle] = useState('');
+  const [websiteDescription, setWebsiteDescription] = useState('');
+  const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
+
+  return (
+    <div className="creator">
+      <div className="creator__header">{ t('main-information') }</div>
+      <div className="creator__input-line">
+        <WithHover message="website-title-hover">
+          <div className="text-input">
+            <input
+              onChange={e => setWebsiteTitle(e.target.value)}
+              placeholder={t('website-title')}
+              id="website-title"
+              name="website-title"
+              type="text"
+              className="text-input-field"
+              value={websiteTitle}
+            />
+            <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+          </div>
+        </WithHover>
+      </div>
+      <div className="creator__input-line">
+        <WithHover message="website-description-hover">
+          <div className="text-area">
+            <textarea
+              onChange={e => setWebsiteDescription(e.target.value)}
+              id="website-description"
+              name="website-description"
+              placeholder={t('website-description')}>
+            </textarea>
+            <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+          </div>
+        </WithHover>
+      </div>
+      <div className="creator__input-line">
+        <div className='creator__favicon'>
+          <WithHover message="upload-favicon-hover">
+            <div className="creator__favicon-ico">+</div>
+          </WithHover>
+          <span className="creator__favicon-text">
+            {t('upload-favicon')}
+          </span>
+        </div>
+      </div>
+      <div className="creator__btns">
+        <WithHover message="creator-cancel-hover">
+          <div onClick={goTo('main')} className="creator__btns-cancel">
+            {t('cancel')}
+          </div>
+        </WithHover>
+        <WithHover message="creator-next-hover">
+          <div className={`creator__btns-next ${isNextActive}`}>
+            {t('next')}
+          </div>
+        </WithHover>
+      </div>
+    </div>
+  )
+};
+
+export default Step1;
diff --git a/client/src/admin/jsx/Info.jsx b/client/src/admin/jsx/layout/Info.jsx
index 75294e1..0ea8686 100644
--- a/client/src/admin/jsx/Info.jsx
+++ b/client/src/admin/jsx/layout/Info.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { t } from '../hocs';
+import { t } from '../../hocs';
 
 const Info = ({ info, hover }) => (
   <p className="info">
diff --git a/client/src/admin/jsx/LangSwitch.jsx b/client/src/admin/jsx/layout/LangSwitch.jsx
index 2494bef..684d432 100644
--- a/client/src/admin/jsx/LangSwitch.jsx
+++ b/client/src/admin/jsx/layout/LangSwitch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithHover } from '../hocs';
-import { languages } from '../data/translations.js'
+import { WithHover } from '../../hocs';
+import { languages } from '../../data/translations.js'
 
 const LangSwitch = ({ lang, setLang, opened, setOpened}) => {
   const handleSetLang = (key) => {
diff --git a/client/src/admin/jsx/TopBar.jsx b/client/src/admin/jsx/layout/TopBar.jsx
index e9be676..b6564f7 100644
--- a/client/src/admin/jsx/TopBar.jsx
+++ b/client/src/admin/jsx/layout/TopBar.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import LangSwitch from './LangSwitch.jsx';
-import User from './User.jsx';
+import UserSwitch from './UserSwitch.jsx';
 
 const TopBar = ({ user, setUser, lang, setLang }) => {
   const [opened, setOpened] = useState(false);
@@ -20,7 +20,7 @@ const TopBar = ({ user, setUser, lang, setLang }) => {
         setOpened={setOpened}
       />
         { user && (
-          <User
+          <UserSwitch
             user={user}
             setUser={setUser}
             opened={opened}
diff --git a/client/src/admin/jsx/User.jsx b/client/src/admin/jsx/layout/UserSwitch.jsx
index eb596bf..403783c 100644
--- a/client/src/admin/jsx/User.jsx
+++ b/client/src/admin/jsx/layout/UserSwitch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithHover, t } from '../hocs';
-import { logout } from '../api';
+import { WithHover, t } from '../../hocs';
+import { logout } from '../../api';
 
 const User = ({ user, setUser, opened, setOpened }) => {
   const handleLogout = () => {