MPP-4497- fix(relay-onboarding): update VPN bundle page layout and text

Author: vpremamozilla

frontend/pendingTranslations.ftl

@@ -184,3 +184,5 @@ whatsnew-megabundle-premium-cta = Upgrade my protection
 
 phone-onboarding-step1-button-cta-2 = Sign up
 phone-onboarding-step1-learn-more = Learn more
+
+vpn-relay-go-relay-body-2 = Keep your identity private

frontend/src/pages/vpn-relay-welcome.module.scss

@@ -78,29 +78,39 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: $spacing-xl;
   max-width: $content-xs;
   background-color: $color-white;
   padding: $spacing-2xl;
   border-radius: $border-radius-md;
   box-shadow: $box-shadow-sm;
 
   @media #{$mq-lg} {
+    flex: 1;
     padding: 0;
     border-radius: 0;
     box-shadow: none;
   }
 
+  .logo {
+    margin-bottom: $spacing-xl;
+  }
+
   p {
     max-width: $content-xs;
     font-family: $font-stack-base;
+    margin-bottom: $spacing-xl;
 
     @include text-body-md;
   }
 
+  .relay-text {
+    padding-bottom: $spacing-md;
+  }
+
   a {
     white-space: pre;
     font-weight: 500;
     font-family: $font-stack-firefox;
+    margin-top: auto;
   }
 }

frontend/src/pages/vpn-relay-welcome.page.tsx

@@ -55,7 +55,9 @@ const VpnRelayWelcome: NextPage = () => {
                 />
               </div>
 
-              <p>{l10n.getString("vpn-relay-go-relay-body")}</p>
+              <p className={styles["relay-text"]}>
+                {l10n.getString("vpn-relay-go-relay-body-2")}
+              </p>
               <Link href={"/"} className={styles.button}>
                 {l10n.getString("vpn-relay-go-relay-cta")}
               </Link>
@@ -69,7 +71,7 @@ const VpnRelayWelcome: NextPage = () => {
                   src={VpnLogo}
                   alt={l10n.getString("logo-premium-alt")}
                   className={styles["vpn-logo"]}
-                  height={20}
+                  height={40}
                 />
               </div>