GH-2070: Main screen promotion box

_locales/de/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Benutzerdefiniertes Setup abgeschlossen"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Stufen Sie hoch auf Ghostery Plus und schalten Sie spezielle Funktionen frei."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Setup"
 	},

_locales/en/messages.json

@@ -1297,8 +1297,14 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Custom Setup Complete"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Upgrade to Ghostery Plus and unlock special features."
+	"hub_home_plus_upgrade_text": {
+		"message": "Go beyond basic privacy. Upgrade your Ghostery plan to receive device-level protection, VPN access, and more!"
+	},
+	"hub_home_plus_upgrade_button_text": {
+		"message": "Upgrade now"
+	},
+	"hub_home_plus_full_protection": {
+		"message": "You are fully protected!"
 	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Setup"

_locales/es/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Instalación personalizada completa"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Mejora a Ghostery Plus y desbloquea funciones especiales."
-	},
 	"hub_setup_page_title": {
 		"message": "Centro de Ghostery: instalación"
 	},

_locales/fr/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Configuration personnalisée terminée"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Passez à Ghostery Plus et découvrez des fonctionnalités spéciales."
-	},
 	"hub_setup_page_title": {
 		"message": "Hub Ghostery — Configuration"
 	},

_locales/hu/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Egyéni telepítés kész"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Bővítsen Ghostery Plus verzióra és oldjon fel különleges funkciókat!"
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Központ - Beállítás"
 	},

_locales/it/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Configurazione Personalizzata Completa"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Effettua l'upgrade a Ghostery Plus e sblocca funzioni speciali."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Configurazione"
 	},

_locales/ja/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "カスタム設定完了"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "「Ghostery プラス」にアップグレードして高度な機能をご利用ください。"
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery ハブ - 設定"
 	},

_locales/ko/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "사용자 지정 설정 완료"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Ghostery Plus로 업그레이드하고 특별 기능을 새롭게 이용하세요."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery 허브 - 설정"
 	},

_locales/nl/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Aangepaste instelling voltooid"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Upgrade naar Ghostery Plus en ontgrendel speciale opties."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Instellen"
 	},

_locales/pl/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Konfiguracja niestandardowa zakończona"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Zaktualizuj do Ghostery Plus i odblokuj funkcje specjalne."
-	},
 	"hub_setup_page_title": {
 		"message": "Hub Ghostery - Konfiguracja"
 	},

_locales/pt_BR/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Configuração personalizada concluída"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Atualize para o Ghostery Plus e desbloqueie recursos especiais."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Configuração"
 	},

_locales/ru/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "Пользовательская настройка завершена"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "Обновитесь до Ghostery Plus и разблокируйте специальные функции."
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Настройка"
 	},

_locales/zh_CN/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "自定义设置完毕"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "升级为Ghostery Plus，解锁特别功能。"
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - 设置"
 	},

_locales/zh_TW/messages.json

@@ -1294,9 +1294,6 @@
 	"hub_home_feature_setup_button_alt": {
 		"message": "自定義設置完成"
 	},
-	"hub_home_feature_supporter_text": {
-		"message": "升級至Ghostery Plus并解鎖特別特色。"
-	},
 	"hub_setup_page_title": {
 		"message": "Ghostery 中心 - 設置 "
 	},

app/hub/Views/HomeView/HomeView.jsx

@@ -34,7 +34,7 @@ const HomeView = (props) => {
 		enable_metrics,
 		changeMetrics,
 		email,
-		isPlus,
+		isPremium
 	} = props;
 	const accountHref = globals.ACCOUNT_BASE_URL;
 
@@ -61,6 +61,9 @@ const HomeView = (props) => {
 	const setupButtonClassNames = ClassNames('HomeView__featureButton button primary', {
 		hollow: setup_complete,
 	});
+	const upgradeContainerClassNames = ClassNames('HomeView__upgradeContainer row align-center-middle', {
+		'purple-border': !isPremium
+	});
 
 	return (
 		<div className="HomeView row align-center">
@@ -141,17 +144,17 @@ const HomeView = (props) => {
 						</NavLink>
 					</div>
 				</div>
-				<div className="HomeView__plus row large-unstack">
-					<div className="HomeView__featureIcon feature-plus hide-for-large" />
-					<div className="HomeView__featureText columns">
-						{t('hub_home_feature_supporter_text')}
+				<div className={upgradeContainerClassNames}>
+					<div className="HomeView__upgradeIcon" />
+					<div className="HomeView__upgradeText">
+						{t('hub_home_plus_upgrade_text')}
 					</div>
-					<div className="HomeView__featureIcon columns shrink feature-plus show-for-large" />
-					<div className="columns flex-container align-center-middle">
-						<NavLink to="/plus" className="HomeView__featureButton button primary">
-							{isPlus ? t('already_subscribed') : t('get_ghostery_plus')}
+					<div className="HomeView__buttonContainer columns flex-container">
+						<NavLink to="/upgrade" className="HomeView__featureButton button primary">
+							{isPremium ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
 						</NavLink>
 					</div>
+
 				</div>
 			</div>
 		</div>
@@ -166,7 +169,7 @@ HomeView.propTypes = {
 	enable_metrics: PropTypes.bool.isRequired,
 	changeMetrics: PropTypes.func.isRequired,
 	email: PropTypes.string.isRequired,
-	isPlus: PropTypes.bool.isRequired,
+	isPremium: PropTypes.bool.isRequired,
 };
 
 export default HomeView;

app/hub/Views/HomeView/HomeView.scss

@@ -15,7 +15,7 @@
 .HomeView {
 	padding-top: 45px;
 	padding-bottom: 25px;
-	color: #4a4a4a;
+	color: $tundora;
 }
 .HomeView--bolded {
 	font-weight: 700;
@@ -28,14 +28,14 @@
 	margin-right: 23px;
 }
 .HomeView__header h1 {
-	color: #4a4a4a;
+	color: $tundora;
 	margin-bottom: 19px;
 }
 .HomeView__headerTagline {
 	margin-top: 7px;
 	font-size: 20px;
 	line-height: 30px;
-	color: #4a4a4a;
+	color: $tundora;
 }
 .HomeView__supportContainer {
 	margin-top: 12px;
@@ -54,7 +54,7 @@
 	margin-top: 7px;
 	padding: 27px 12px 30px;
 	border-radius: 4px;
-	background-color: #f0f3f4;
+	background-color: $porcelain;
 }
 .HomeView__onboardingFeature {
 	margin: 0 8px;
@@ -64,23 +64,32 @@
 	margin: 7px 0 4px;
 	max-width: 1px;
 	padding: 0;
-	background-color: #979797;
+	background-color: $dark-silver;
 }
 .HomeView__dividerHorizontal {
 	margin: 0 25px;
 	height: 1px;
 	width: 100%;
 	padding: 0;
-	background-color: #979797;
+	background-color: $dark-silver;
 }
-.HomeView__plus {
+.HomeView__upgradeContainer {
+	display: flex;
 	margin-top: 22px;
 	padding: 22px 12px;
-	background-color: #f0f3f4;
+	background-color: $porcelain;
 	border-radius: 4px;
+
+	&.purple-border {
+		box-shadow: 0 0 8px 5px $dark-magenta;
+		border: solid 1.6px $dark-magenta;
+	}
 }
-.HomeView__plusFeature {
-	padding: 0 36px;
+.HomeView__upgradeIcon {
+	background-image: upgradeShieldIcon($baby-blue, $tundora);
+	margin: 0px 35px 0 30px;
+	height: 50px;
+	width: 49px;
 }
 .HomeView__featureIcon {
 	height: 50px;
@@ -89,44 +98,36 @@
 	background-repeat: no-repeat;
 	background-position: center center;
 }
+.HomeView__upgradeText {
+	width: 226px;
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 1.69;
+}
+.HomeView__featureButton {
+	margin: auto;
+}
 .HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon {
-	background-image: buildIconWand(#4a4a4a, #daf4ff);
+	background-image: buildIconWand($tundora, $baby-blue);
 }
 .HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
 	width: 100px;
 	margin: 0 0 0 50px;
-	background-image: buildIconWandCheck(#4a4a4a, #daf4ff, #1dafed);
+	background-image: buildIconWandCheck($tundora, $baby-blue, $ghosty-blue-alt);
 }
 .HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
-	background-image: buildIconClipboard(#4a4a4a, #daf4ff);
+	background-image: buildIconClipboard($tundora, $baby-blue);
 }
 .HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
 	width: 100px;
 	margin: 0 0 0 50px;
-	background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed);
-}
-.HomeView__featureIcon.feature-plus {
-	position: relative;
-	margin-left: auto;
-	margin-right: auto;
-	top: -25px;
-	height: 46px;
-	background-image: buildIconGhosteryPlus(#4a4a4a, #daf4ff);
-	background-size: contain;
+	background-image: buildIconClipboardCheck($tundora, $baby-blue, $ghosty-blue-alt);
 }
 .HomeView__featureTitle {
 	text-align: center;
 	font-size: 18px;
 	padding: 22px 0 10px;
 }
-.HomeView__featureText {
-	text-align: center;
-	font-size: 14px;
-	line-height: 27px;
-}
-.HomeView__featureButton {
-	margin: 0;
-}
 .HomeView__onboarding .HomeView__featureButton {
 	margin-top: 26px;
 	min-width: 130px;
@@ -150,8 +151,20 @@
 	.HomeView__onboardingFeature.feature-setup-complete {
 		margin: 35px 0 15px;
 	}
+	.HomeView__upgradeContainer {
+		flex-direction: column;
+	}
+	.HomeView__upgradeIcon {
+		margin: 0 auto 15px auto;
+	}
+	.HomeView__upgradeText {
+		text-align: center;
+		margin: auto;
+	}
+	.HomeView__featureButton {
+		margin-top: 25px;
+	}
 }
-
 // Firefox Font Size Override and Image Size Override
 @-moz-document url-prefix() {
 .HomeView--firefoxFontSize {