Make browser welcome view

_locales/en/messages.json

@@ -1734,6 +1734,12 @@
 	"hub_create_account_toast_error": {
 		"message": "That email address is already in use. Please choose another."
 	},
+	"hub_browser_welcome": {
+		"message": "Welcome to Ghostery Browser"
+	},
+	"hub_browser_begin": {
+		"message": "Let's begin by choosing your privacy settings. This will be quick, we promise!"
+	},
 	"enable_when_paused": {
 		"message": "To use this function, Resume Ghostery."
 	},

app/hub/Views/BrowserWelcomeView/BrowserWelcomeView.jsx

@@ -0,0 +1,29 @@
+/**
+ * Browser Welcome View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+
+/**
+ * A Functional React component for rendering the Browser Welcome View
+ * @return {JSX} JSX for rendering the Browser Welcome View of the Hub app
+ * @memberof HubComponents
+ */
+const BrowserWelcomeView = () => (
+	<div className="BrowserWelcomeView__container">
+		<div className="BrowserWelcomeView__title">{t('hub_browser_welcome')}</div>
+		<div className="BrowserWelcomeView__subtitle">{t('hub_browser_begin')}</div>
+		<img className="BrowserWelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
+	</div>
+);
+
+export default BrowserWelcomeView;

app/hub/Views/BrowserWelcomeView/BrowserWelcomeView.scss

@@ -0,0 +1,27 @@
+.BrowserWelcomeView__container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.BrowserWelcomeView__title {
+	margin-top: 125px;
+	font-size: 24px;
+	font-weight: 600;
+	line-height: 2.33;
+}
+
+.BrowserWelcomeView__subtitle {
+	margin-bottom: 20px;
+	width: 392px;
+	font-size: 18px;
+	line-height: 2.33;
+	text-align: center;
+}
+
+.BrowserWelcomeView__rocketShip {
+	margin-bottom: 84px;
+	height: 330px;
+	width: 545px;
+}

app/hub/Views/BrowserWelcomeView/index.jsx

@@ -0,0 +1,34 @@
+/**
+ * Point of entry index.js file for Browser Welcome View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import BrowserWelcomeView from './BrowserWelcomeView';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => ({});
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({});
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(BrowserWelcomeView));

app/hub/index.jsx

@@ -31,6 +31,7 @@ import CreateAccountView from './Views/CreateAccountView';
 import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import LogInView from './Views/LogInView';
 import UpgradePlanView from './Views/UpgradePlanView';
+import BrowserWelcomeView from './Views/BrowserWelcomeView';
 
 const store = createStore();
 
@@ -43,7 +44,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
  */
 const Hub = () => (
 	<AppView>
-		<Route exact path="/" component={UpgradePlanView} />
+		<Route exact path="/" component={BrowserWelcomeView} />
 		<Route exact path="/home" component={ah ? UpgradePlanView : HomeView} />
 		<Route path="/setup" component={SetupView} />
 		<Route path="/tutorial" component={TutorialView} />

app/scss/hub.scss

@@ -86,6 +86,7 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../hub/Views/BrowserWelcomeView/BrowserWelcomeView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';