Decouple Homepage Hero Image Text/Rotator (#1066)

* Fix #821 - Revise homepage to localize hero slider * Update image paths, lint SCSS * Update to Protocol token * Remove commented code, update to Protocol tokens * Update SCSS
mozilla · Sep 1, 2021 · 80ed22d · 80ed22d
1 parent 19bb688
commit 80ed22d
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 300 deletions.
diff --git a/privaterelay/templates/home.html b/privaterelay/templates/home.html
@@ -1,37 +1,55 @@
 {% extends "base.html" %}
 
+{% load static %}
 {% load ftl %}
 {% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
 {% load socialaccount %}
 
 {% block content %}
 
-<main data-landing-page="" class="row-full-width home-hero">
+<main data-landing-page="" class="">
     {% include "includes/messages.html" %}
-  <div class="flx">
-    <div class="flx flx-row hero-content">
-      <div class="hero-left flx flx-col">
-          <h1 class="home-hero-headline">{% ftlmsg 'home-hero-headline' %}</h1>
-          <span class="sub-head hero-sub-head">{% ftlmsg 'home-hero-copy' %}</span>
-        {% include "includes/landing_ctas.html" with page_position="landing-hero" %}
+    <section class="mzp-c-hero mzp-t-relay-home mzp-t-dark">
+      <div class="mzp-l-content ">
+        <div class="mzp-c-hero-body">
+          <h1 class="mzp-c-hero-title">{% ftlmsg 'home-hero-headline' %}</h1>
+          <div class="mzp-c-hero-desc">
+            <p>{% ftlmsg 'home-hero-copy' %}</p>
+          </div>
+          <p class="mzp-c-hero-cta">
+            {% include "includes/landing_ctas.html" with page_position="landing-hero" %}
+          </p>
+        </div>
       </div>
-      <div class="hero-right flx flx-col">
-        <div class="hero-1 hero-slide"></div>
-        <div class="hero-2 hero-slide"></div>
-        <div class="hero-3 hero-slide"></div>
-        <div class="hero-4 hero-slide"></div>
-        <div class="hero-5 hero-slide"></div>
+    </section>
+    <section class="c-hero-slides">
+      <div class="mzp-l-content mzp-l-columns mzp-t-columns-four">
+        <div>
+          <h2>{% ftlmsg 'hero-image-copy-trust' %}</h2>
+          <img class="" src="{% static 'images/hero-slides/hero-1.png' %}" aria-hidden="true" alt="">
+        </div>
+        <div>
+          <h2>{% ftlmsg 'hero-image-copy-unique-html' %}</h2>
+          <img class="" src="{% static 'images/hero-slides/hero-2.png' %}" aria-hidden="true" alt="">
+        </div>
+        <div>
+          <h2>{% ftlmsg 'hero-image-copy-protect-html' %}</h2>
+          <img class="" src="{% static 'images/hero-slides/hero-3.png' %}" aria-hidden="true" alt="">
+        </div>
+        <div>
+          <h2>{% ftlmsg 'hero-image-copy-control-html' %}</h2>
+          <img class="" src="{% static 'images/hero-slides/hero-4.png' %}" aria-hidden="true" alt="">
+        </div>
       </div>
-    </div>
-  </div>
-</main>
-	<div class="container flx al-cntr flx-col">
-		<div class="how-it-works-content txt-white flx flx-col al-cntr">
-      <h2 class="how-it-works-header text-center">{% ftlmsg 'how-it-works-headline' %}</h2>
-      <span class="text-center">{% ftlmsg 'how-it-works-subheadline' %}</span>
-      <div class="how-it-works-steps flx flx-row">
-        <section class="step step-1 flx flx-col al-cntr">
+    </section>
+    <section>
+      <div class="container mzp-l-content">
+        <div class="how-it-works-content txt-white flx flx-col al-cntr">
+        <h2 class="how-it-works-header text-center">{% ftlmsg 'how-it-works-headline' %}</h2>
+        <span class="text-center">{% ftlmsg 'how-it-works-subheadline' %}</span>
+        <div class="how-it-works-steps mzp-l-columns mzp-t-columns-three">
+          <section class="step step-1">
             <div class="step-illustration step-1"></div>
             <div class="step-text step-1">
               <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-1-headline' %}</h3>
@@ -41,23 +59,25 @@ <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-1-headline' %}</h3
               </p>
             </div>
           </section>
-          <section class="step step-2 flx flx-col al-cntr">
+          <section class="step step-2">
             <div class="step-illustration step-2"></div>
             <div class="step-text step-2">
               <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-2-headline' %}</h3>
               <p class="step-body">{% ftlmsg 'how-it-works-step-2-copy' %}</p>
             </div>
           </section>
-          <section class="step step-3 flx flx-col al-cntr">
+          <section class="step step-3">
             <div class="step-illustration step-3"></div>
             <div class="step-text step-3">
               <h3 class="step-headline ff-Met">{% ftlmsg 'how-it-works-step-3-headline' %}</h3>
               <p class="step-body">{% ftlmsg 'how-it-works-step-3-copy' %}</p>
             </div>
           </section>
+        </div>
+        {% include "includes/landing_ctas.html" with page_position="landing-bottom" %}
+        </div>
       </div>
-			{% include "includes/landing_ctas.html" with page_position="landing-bottom" %}
-		</div>
-	</div>
+    </section>
+</main>
 
 {% endblock %}
diff --git a/privaterelay/templates/includes/landing_ctas.html b/privaterelay/templates/includes/landing_ctas.html
@@ -3,6 +3,5 @@
 {% load ftl %}
 {% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
-<div class="hero-sign-up-bg bg-fx-gradient fx-gradient-btn">
-  <a data-ga="send-ga-funnel-pings" data-event-category="Sign In" data-event-label="sign-up-btn-{{ page_position }}" class="hero-sign-up blue-button puffy" href="{% provider_login_url 'fxa' process='login' %}">{% ftlmsg 'home-hero-cta' %}</a>
-</div>
+<a data-ga="send-ga-funnel-pings" data-event-category="Sign In" data-event-label="sign-up-btn-{{ page_position }}" class="mzp-c-button mzp-t-product " href="{% provider_login_url 'fxa' process='login' %}">{% ftlmsg 'home-hero-cta' %}</a>
+
diff --git a/static/images/hero-slides/hero-1.png b/static/images/hero-slides/hero-1.png
diff --git a/static/images/hero-slides/hero-2.png b/static/images/hero-slides/hero-2.png
diff --git a/static/images/hero-slides/hero-3.png b/static/images/hero-slides/hero-3.png
diff --git a/static/images/hero-slides/hero-4.png b/static/images/hero-slides/hero-4.png
diff --git a/static/images/hero-slides/hero-5.png b/static/images/hero-slides/hero-5.png
diff --git a/static/js/app.js b/static/js/app.js
@@ -3,28 +3,6 @@ function dismissNotification() {
 	notification.classList.toggle("hidden");
 }
 
-
-function iterateHeroSlides() {
-  let activeSlideNum = 0;
-  const heroSlides = document.querySelectorAll(".hero-slide");
-
-  heroSlides[activeSlideNum].classList.add("active-slide");
-  const iterateSlides = () => {
-    heroSlides[activeSlideNum].classList.remove("active-slide");
-    if (activeSlideNum === 4) {
-      activeSlideNum = 0;
-    } else {
-      activeSlideNum++;
-    }
-    heroSlides[activeSlideNum].classList.add("active-slide");
-  };
-
-  window.setInterval(()=> {
-    iterateSlides();
-  }, 3500);
-}
-
-
 if (typeof(sendGaPing) === "undefined") {
   sendGaPing = () => {};
 }
@@ -255,7 +233,6 @@ function addEventListeners() {
     });
   }
 
-
   const mobileMenuWrapper = document.querySelector(".mobile-menu");
   if (mobileMenuWrapper) {
     const mobileMenuButton = document.querySelector(".mobile-menu-toggle");
@@ -267,11 +244,6 @@ function addEventListeners() {
   document.querySelectorAll(".js-dismiss").forEach(btn => {
 		btn.addEventListener("click", dismissNotification, false);
   });
-
-  // If on main landing page
-  if (document.querySelector("[data-landing-page]")) {
-    iterateHeroSlides();
-  }
 }
 
 function hasParent(el, selector) {

diff --git a/static/scss/app.scss b/static/scss/app.scss
@@ -18,8 +18,11 @@
 @import "partials/header";
 @import "partials/footer";
 @import "partials/banners";
-@import "partials/dashboard";
 @import "partials/onboarding.scss";
 @import "partials/fx-bento";
 @import "partials/glocal-menu";
 @import "partials/vpn-promo";
+
+// Custom Page Styles
+@import "pages/home";
+@import "pages/dashboard";
diff --git a/static/scss/partials/dashboard.scss → static/scss/pages/dashboard.scss b/static/scss/partials/dashboard.scss → static/scss/pages/dashboard.scss
diff --git a/static/scss/pages/home.scss b/static/scss/pages/home.scss
@@ -0,0 +1,59 @@
+.mzp-t-relay-home {
+    background-color: transparent;
+    text-align: center;
+
+    .mzp-l-content {
+        max-width: $content-lg;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: $layout-xl;
+        padding-bottom: $layout-xl;
+    }
+
+    .mzp-c-hero-desc {
+        max-width: $content-md;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .mzp-c-hero-title {
+        @include text-title-md;
+        background: var(--h1Gradient);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .mzp-c-button {
+        min-width: 100%;
+
+        @media #{$mq-sm} {
+            min-width: $layout-2xl;
+        }
+    }
+}
+
+.c-hero-slides {
+    background-color: $color-white;
+
+    div {
+        margin-bottom: $spacing-2xl;
+
+        @media #{$mq-md} {
+            margin-bottom: 0;
+        }
+    }
+
+    h2 {
+        @include text-title-3xs;
+        color: $color-purple-90;
+        text-align: center;
+        margin-bottom: $spacing-md;
+    }
+
+    img {
+        display: block;
+        width: $content-xs;
+        margin: 0 auto;
+    }
+}
diff --git a/static/scss/partials/banners.scss b/static/scss/partials/banners.scss
@@ -2,6 +2,7 @@
     text-align: center;
     position: relative;
     padding: $spacing-md;
+    background-color: $color-purple-30;
 
     ul {
         list-style-type: none;