New scan results page for marketing tests.

public/css/app.css

@@ -145,6 +145,10 @@ h3,
   line-height: 1.14;
 }
 
+.mw-400 {
+  max-width: 400px;
+}
+
 .mw-500 {
   max-width: 500px;
 }

public/css/scan-results.css

@@ -77,6 +77,49 @@
   margin-bottom: calc(var(--padding) * 1.25);
 }
 
+.temp-marketing-hl {
+  color: var(--purple7);
+  font-size: 32px;
+  line-height: 1.13;
+}
+
+.temp-marketing-alert-me-link {
+  color: var(--blue3);
+  border: none;
+  outline: none;
+  font-size: 16px;
+  margin-top: 16px;
+}
+
+.temp-marketing-callout {
+  margin: 20px auto 80px auto;
+}
+
+.temp-marketing-callout span {
+  color: var(--purple7);
+}
+
+.temp-marketing-btn-blue {
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 16px;
+  max-width: 320px;
+  font-weight: 600;
+  background-color: var(--blue3);
+  border: none;
+  width: 100%;
+  color: rgba(255, 255, 255, 1);
+  padding-right: var(--padding);
+  padding-left: var(--padding);
+  min-height: 48px;
+  transition: all 0.15s ease-in-out;
+}
+
+.temp-marketing-btn-blue:hover {
+  background-color: var(--blue4);
+  transition: all 0.15s ease-in-out;
+}
+
 @media screen and (max-width: 800px) {
   .scanned-email-address,
   .scan-results-headline,

scan-results.js

@@ -86,6 +86,8 @@ const scanResult = async(req, selfScan=false) => {
     }
   }
 
+  const newMarketingScanPage = ((Math.random() * (10 - 1) + 1) >= 5);
+
   return {
     title,
     foundBreaches,
@@ -97,6 +99,7 @@ const scanResult = async(req, selfScan=false) => {
     fullReport,
     userDash,
     scannedEmailId,
+    newMarketingScanPage,
   };
 };
 

views/scan.hbs

@@ -14,9 +14,17 @@
         {{/getScanResultsHeadline}}
       {{else}}
         <h2 class="headline scan-results-headline">{{{ fluentNestedBold "scan-results-known-breaches" breachCount=foundBreaches.length }}}</h2>
-        <button class="btn-violet-secondary open-oauth btn-small btn-transparent" {{> analytics/fxa id="fx-monitor-alert-me-btn" }} data-event-category="Alert me about new breaches">
-          {{ getString "alert-about-new-breaches" }}
-        </button>
+
+        <!--temp marketing "Alert me about new breaches" link-->
+        {{#if newMarketingScanPage}}
+          <button class="open-oauth blue-link temp-marketing-alert-me-link" {{> analytics/fxa id="fx-monitor-alert-me-blue-link" }} data-event-category="Alert me about new breaches - Blue link">
+            {{ getString "alert-about-new-breaches" }}
+          </button>
+        {{else}}
+          <button class="btn-violet-secondary open-oauth btn-small btn-transparent" {{> analytics/fxa id="fx-monitor-alert-me-btn" }} data-event-category="Alert me about new breaches">
+            {{ getString "alert-about-new-breaches" }}
+          </button>
+        {{/if}}
       {{/if}}
     </div>
   </div>
@@ -35,12 +43,21 @@
   </div>
 </main>
 <section>
-  <div class="row jst-cntr flx-col">
-    {{> scan-another-email addClass="stacked"}}
-  </div>
-  <div class="fxa-signup-gradient">
-    <div class="row fxa-signup-banner scan-res">
-    {{> sign-up-banners/scan-results-sign-up }}
+  {{#if newMarketingScanPage}}
+  <!--temp marketing Sign Up callout-->
+    <div class="row txt-cntr jst-cntr flx-col temp-marketing-callout">
+      <h2 class="temp-marketing-hl mw-400">{{ getString "sign-up-headline-1" }}</h2>
+      <button class="open-oauth temp-marketing-btn-blue" {{> analytics/fxa id="fx-monitor-alert-me-blue-btn" }} data-event-category="Alert me about new breaches - Blue button">{{ getString "alert-about-new-breaches" }}</button>
+      {{> sign-up-banners/browser-not-required }}
     </div>
-  </div>
+  {{else}}
+    <div class="row jst-cntr flx-col">
+      {{> scan-another-email addClass="stacked"}}
+    </div>
+    <div class="fxa-signup-gradient">
+      <div class="row fxa-signup-banner scan-res">
+      {{> sign-up-banners/scan-results-sign-up }}
+      </div>
+    </div>
+  {{/if}}
 </section>