diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 77ceba8f9..11e484c8d 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1749,6 +1749,15 @@ "ghostery_browser_hub_onboarding_header_title_plan_choices": { "message": "Ghostery Browser Hub - Plan Choices" }, + "ghostery_browser_hub_onboarding_welcome": { + "message": "Welcome to Ghostery Browser" + }, + "ghostery_browser_hub_onboarding_lets_begin": { + "message": "Let's begin by choosing your privacy settings. This will be quick, we promise!" + }, + "ghostery_browser_hub_onboarding_lets_do_this": { + "message": "Let's do this" + }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index eb3b3766a..d0038f7ec 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -13,6 +13,18 @@ import React from 'react'; -const WelcomeView = () =>

Step 5: Welcome View

; +/** + * 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 WelcomeView = () => ( +
+
{t('ghostery_browser_hub_onboarding_welcome')}
+
{t('ghostery_browser_hub_onboarding_lets_begin')}
+ + +
+); export default WelcomeView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss new file mode 100644 index 000000000..b6d7c6998 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss @@ -0,0 +1,57 @@ +.WelcomeView__container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.WelcomeView__title { + margin-top: 125px; + font-size: 24px; + font-weight: 600; + line-height: 2.33; +} + +.WelcomeView__subtitle { + margin-bottom: 20px; + width: 392px; + font-size: 18px; + line-height: 2.33; + text-align: center; +} + +.WelcomeView__rocketShip { + margin-bottom: 84px; + height: 330px; + width: 545px; +} + +.WelcomeView__ctaButton { + display: flex; + justify-content: center; + margin: 48px auto 0 auto; + height: 44px; + width: 162px; + padding: 7.7px 14px; + line-height: 22px; + background: linear-gradient( + 45deg, + #ff7e74 50%, + #00aef0 + ); + background-size: 200% 100%; + background-position: 100% 50%; + transition: 0.25s all; + border: none; + &:hover { + background-position: 0% 50%; + transition: 0.25s all; + } + color: #FFF; + font-size: 14.1px; + font-weight: 700; + border-radius: 3.5px; + text-align: center; + line-height: 2.05; + cursor: pointer; +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js index 1ae8bd4ca..d5f22aa58 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js @@ -13,4 +13,4 @@ import WelcomeView from './WelcomeView'; -export default WelcomesView; +export default WelcomeView; diff --git a/app/images/hub/welcome/rocketShip.png b/app/images/hub/welcome/rocketShip.png new file mode 100644 index 000000000..1982e4fb6 Binary files /dev/null and b/app/images/hub/welcome/rocketShip.png differ diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 759692615..9593db249 100644 --- a/app/scss/hub.scss +++ b/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'; diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 2f71aa4f9..29c1449df 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -87,6 +87,7 @@ html, body, #root { @import '../hub/Views/LogInView/LogInView.scss'; @import '../hub/Views/CreateAccountView/CreateAccountView.scss'; @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; // Imports from ../shared-components directory @import '../shared-components/ExitButton/ExitButton.scss';