feat: welcome page header

Author: vtereshyn

src/Root.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 
 import App from './App';
-import Welcome from './components/Welcome';
+import Welcome from './screens/Welcome';
 
 const Root: FunctionComponent = () => (
   <App>

src/assets/img/welcome-page/github.svg

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+
+import s from './styles.scss';
+
+const Header: FunctionComponent<{}> = () => (
+  <header className={s.header}>
+    <div className={s.container}>
+      <h1 className={s.title}>React Typescript Starter</h1>
+      <a
+        className={s.githubLogo}
+        href="https://github.com/vtereshyn/react-typescript-eslint-starter"
+      >
+        <img src="assets/img/welcome-page/github.svg" alt="Github" />
+      </a>
+    </div>
+  </header>
+);
+
+export default Header;

src/components/Header/index.tsx

@@ -0,0 +1,25 @@
+.header {
+  padding: 20px;
+  box-shadow: 0 1px 2px 0 rgba(212, 212, 212, 0.5);
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 1.6em;
+  }
+
+  .githubLogo {
+    display: block;
+    width: 35px;
+    height: 35px;
+
+    img {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}

src/components/Header/styles.scss

@@ -0,0 +1,51 @@
+import React, { FunctionComponent, Fragment } from 'react';
+
+import Header from '../../components/Header';
+
+import s from './styles.scss';
+
+const Welcome: FunctionComponent<{}> = () => (
+  <Fragment>
+    <Header />
+    <section className={s.welcome}>
+      <div className={s.wrapper}>
+        <div className={s.container}>
+          <figure className={s.logo}>
+            <img src="assets/img/welcome-page/tsx-logo.svg" alt="Logo" />
+          </figure>
+
+          <section className={s.logos}>
+            <figure className={s.eslint}>
+              <img src="assets/img/welcome-page/eslint.svg" alt="Logo" />
+            </figure>
+            <figure className={s.babel}>
+              <img src="assets/img/welcome-page/babel.svg" alt="Logo" />
+            </figure>
+            <figure className={s.typescript}>
+              <img src="assets/img/welcome-page/ts.svg" alt="Logo" />
+            </figure>
+          </section>
+
+          <h3 className={s.instructionsTitle}>To start:</h3>
+          <code>
+            <p>npm install</p>
+            <p>npm run dev</p>
+          </code>
+
+          <h3 className={s.instructionsTitle}>To build:</h3>
+          <code>
+            <p>npm run build</p>
+          </code>
+
+          <h3 className={s.instructionsTitle}>To lint:</h3>
+          <code>
+            <p>npm run lint</p>
+            <p>npm run lint-fix</p>
+          </code>
+        </div>
+      </div>
+    </section>
+  </Fragment>
+);
+
+export default Welcome;

src/components/Welcome/index.tsx

@@ -1,9 +1,10 @@
 $welcome-page-text-color: #294E80;
 
 .welcome {
-  min-height: 100vh;
+  min-height: calc(100vh - 75px);
   display: flex;
   align-items: center;
+  overflow: auto;
 
   .wrapper {
     margin: 0 auto;
@@ -25,12 +26,6 @@ $welcome-page-text-color: #294E80;
     }
   }
 
-  .title {
-    font-size: 2.5em;
-    color: $welcome-page-text-color;
-    margin: 0 0 25px;
-  }
-
   .instructionsTitle {
     font-size: 1.3em;
     color: $welcome-page-text-color;