diff --git a/package.json b/package.json
index 4fc1741c..029b3241 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
"react": "^16.3.2",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
+ "react-redux": "^5.0.7",
+ "react-router-dom": "^4.2.2",
"reactstrap": "^6.0.1",
"resolve": "1.6.0",
"style-loader": "0.19.0",
diff --git a/src/App.js b/src/App.js
index 7c98ca05..14a7a6f7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,9 @@
import React from 'react';
import './App.scss';
+import { Route, Switch } from 'react-router-dom';
+import Home from './common/Home';
import MainHeader from './common/MainHeader';
+import CreateServer from './servers/CreateServer';
export default class App extends React.Component {
render() {
@@ -8,8 +11,10 @@ export default class App extends React.Component {
-
Welcome to Shlink
- Please, select a server.
+
+
+
+
);
diff --git a/src/App.scss b/src/App.scss
index ebfad4db..ee20cf2b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,12 +1,5 @@
-.app {
- text-align: center;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-flow: column;
-}
+@import "./utils/base";
-.app__title {
- font-size: 36px;
+.app {
+ padding-top: $headerHeight;
}
diff --git a/src/common/Home.js b/src/common/Home.js
new file mode 100644
index 00000000..9a16a084
--- /dev/null
+++ b/src/common/Home.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import './Home.scss';
+
+export default () => {
+ return (
+
+
Welcome to Shlink
+ Please, select a server.
+
+ );
+};
diff --git a/src/common/Home.scss b/src/common/Home.scss
new file mode 100644
index 00000000..07669eb6
--- /dev/null
+++ b/src/common/Home.scss
@@ -0,0 +1,14 @@
+@import "../utils/base";
+
+.home-container {
+ text-align: center;
+ height: calc(100vh - #{$headerHeight});
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-flow: column;
+}
+
+.home-container__title {
+ font-size: 36px;
+}
diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
index ec3d5a06..30c7a89c 100644
--- a/src/common/MainHeader.js
+++ b/src/common/MainHeader.js
@@ -14,6 +14,7 @@ import {
} from 'reactstrap';
import './MainHeader.scss';
import shlinkLogo from './shlink-logo-white.png';
+import { Link } from 'react-router-dom';
export default class MainHeader extends React.Component {
constructor(props) {
@@ -40,7 +41,7 @@ export default class MainHeader extends React.Component {