1 files changed, 69 insertions, 0 deletions

diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
new file mode 100644
index 000000000..06b10ecfe
--- /dev/null
+++ b/src/components/auth/Welcome.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Link from '../ui/Link';
+
+const messages = defineMessages({
+  signupButton: {
+    id: 'welcome.signupButton',
+    defaultMessage: '!!!Create a free account',
+  },
+  loginButton: {
+    id: 'welcome.loginButton',
+    defaultMessage: '!!!Login to your account',
+  },
+});
+
+@observer
+export default class Login extends Component {
+  static propTypes = {
+    loginRoute: PropTypes.string.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const {
+      loginRoute,
+      signupRoute,
+      recipes,
+    } = this.props;
+
+    return (
+      <div className="welcome">
+        <div className="welcome__content">
+          <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
+          {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
+          <div className="welcome__text">
+            <h1>Franz</h1>
+          </div>
+        </div>
+        <div className="welcome__buttons">
+          <Link to={signupRoute} className="button">
+            {intl.formatMessage(messages.signupButton)}
+          </Link>
+          <Link to={loginRoute} className="button">
+            {intl.formatMessage(messages.loginButton)}
+          </Link>
+        </div>
+        <div className="welcome__featured-services">
+          {recipes.map(recipe => (
+            <img
+              key={recipe.id}
+              src={recipe.icons.svg}
+              className="welcome__featured-service"
+              alt=""
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}