Fixes Bug 1112894 - Build A/B pages for splash

app.js

@@ -363,6 +363,7 @@ app.get("/about", routes.angular);
 
 app.get("/make-your-own", routes.angular);
 app.get('/madewithcode-*', routes.angular);
+app.get('/home-:variant', routes.angular);
 
 app.get('/explore', routes.gallery({
   layout: "index",

less/angular/pages/home.less

@@ -24,6 +24,16 @@
   footer {
     text-align: center;
   }
+  &.variant-2, &.variant-4 {
+    .home-blue {
+      @media @standard-def {
+        background-image: url('/img/home/background-variant.jpg');
+      }
+      @media @retina {
+        background-image: url('/img/home/background-variant@2x.jpg');
+      }
+    }
+  }
 }
 
 .home-blue, .home-values, .home-jump-in, .home-footer {

locale/en_US/explore.json

@@ -559,24 +559,20 @@
     "message": "Our values",
     "description": "Headline on second section of home"
   },
-  "Our goal is for everyone in the world": {
-    "message": "Our goal is for everyone in the world to be an informed creator of the free and open web.",
-    "description": ""
-  },
   "Free": {
     "message": "Free",
     "description": "first value on home page"
   },
   "Mozilla is a nonprofit organization": {
-    "message": "Mozilla is a non-profit organization. Our open-source tools are created by a global community. They will always be free—now and forever!",
+    "message": "Mozilla is a non-profit organization and these open-source tools are created by a global community. They will always be 100% free—now and forever!",
     "description": "Value description for free on home page"
   },
   "Local": {
     "message": "Local",
     "description": "second value on home page"
   },
-  "Wherever you live in the world": {
+  "We all use the web in different ways.": {
-    "message": "Wherever you live in the world, Mozilla is dedicated to helping you build a web that is relevant to your friends, family, business, and community.",
+    "message": "We all use the web in different ways. Mozilla is dedicated to helping you build a web that’s relevant to your friends, family, business or community—no matter where you live.",
     "description": "Value description for local on home page"
   },
   "More than code": {
@@ -587,6 +583,10 @@
     "message": "Our tools, learning resources, and community networks empower everyone to become citizens of the web.",
     "description": ""
   },
+  "We believe that digital literacy is more than just learning to code.": {
+    "message": "We believe that digital literacy is more than just learning to code. Our tools, learning resources and community networks empower everyone to become citizens of the web.",
+    "description": "Value description for more than code on home page"
+  },
   "Jump right in": {
     "message": "Jump right in",
     "description": "headline for third section on home page"
@@ -642,5 +642,25 @@
   "Search gallery": {
     "message": "Search gallery",
     "description": "Text for search field on gallery page"
+  },
+  "The web is yours": {
+    "message": "The web is yours",
+    "description": "headline on home"
+  },
+  "Learn to build it with Mozilla.": {
+    "message": "Learn to build it with Mozilla.",
+    "description": "subhead on home"
+  },
+  "Webmaker helps people across the world": {
+    "message": "Webmaker helps people across the world become informed creators of a free and open web.",
+    "description": "Subehad on our values"
+  },
+  "Help us build the future of the web": {
+    "message": "Help us build the future of the web",
+    "description": "headline on home"
+  },
+  "The global Mozilla community wants everyone to be a citizen of the web": {
+    "message": "The global Mozilla community wants everyone to be a citizen of the web—including you!",
+    "description": "subhead on home"
   }
 }

public/js/angular/app.js

@@ -102,6 +102,13 @@ angular.module('webmakerApp', ['ngRoute', 'ui.bootstrap', 'webmakerApp.services'
           controller: 'homeController',
           title: 'Webmaker'
         })
+        .when('/:locale/home-:variant', {
+          templateUrl: function (params) {
+            return '/views/home-' + params.variant + '.html';
+          },
+          controller: 'homeController',
+          title: 'Webmaker'
+        })
         .otherwise({
           redirectTo: '/:locale'
         });

public/views/home-2.html

@@ -0,0 +1,137 @@
+<div ng-show="userDel" class="alert alert-info">{{ 'user_deleted' | i18n }}
+</div>
+<div id="page-home" class="variant-2">
+  <div class="home-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4 col-md-5">
+          <figure class="devices">
+            <img src="/img/home/desktop.svg" alt="Desktop computer" class="desktop"/>
+            <img src="/img/home/mobile.svg" alt="Mobile phone" class="mobile"/>
+            <img src="/img/home/tablet.svg" alt="Tablet computer" class="tablet"/>
+          </figure>
+        </div>
+        <section class="col-sm-8 col-md-6">
+          <h2>{{ 'The web is yours' | i18n }}</h2>
+
+          <p class="lead">
+            {{ 'Learn to build it with Mozilla.' | i18n }}
+          </p>
+
+          <form id="home-start-form">
+            <input type="email" class="home-email-field" placeholder="{{ 'Email address' | i18n }}"/>
+            <button class="btn btn-default">
+              {{ 'Start creating' | i18n }}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  </div>
+  <section class="home-values">
+    <div class="container">
+      <h3>
+        {{ 'Our values' | i18n }}
+      </h3>
+
+      <p class="lead">
+        {{ 'Webmaker helps people across the world' | i18n }}
+      </p>
+
+      <div class="row">
+        <div class="col-sm-7 col-md-5 col-lg-5 col-lg-offset-1">
+          <ul class="values-list">
+            <li class="value-free">
+              <h4>{{ 'Free' | i18n }}</h4>
+
+              <p>{{ 'Mozilla is a nonprofit organization' | i18n }}</p>
+            </li>
+            <li class="value-local">
+              <h4>{{ 'Local' | i18n }}</h4>
+
+              <p>{{ 'We all use the web in different ways.' | i18n }}</p>
+            </li>
+            <li class="value-more-than-code">
+              <h4>{{ 'More than code' | i18n }}</h4>
+
+              <p>
+                {{ 'We believe that digital literacy is more than just learning to code.' | i18n}}
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="col-sm-4 col-sm-offset-1 col-md-7 col-md-offset-0 col-lg-6">
+          <figure class="home-globe">
+            <img src="/img/home/yellow-earth.svg" alt="Globe" height="300" width="300"/>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="home-jump-in">
+    <div class="container">
+      <h3>{{ 'Jump right in' | i18n }}</h3>
+
+      <p class="lead">
+        {{ 'Discover how you can build and share the web.' | i18n}}
+      </p>
+      <ul class="row">
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              <img src="/img/home/gallery-md-icon.svg" alt="" width="154" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Explore Webmaker' | i18n }}</h4>
+
+          <p>
+            {{ 'Investigate the tools, learning resources' | i18n }}
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              {{ 'Explore now' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              <img src="/img/home/learntoteach-md-icon.svg" alt="" width="152" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Learn to Teach' | i18n }}</h4>
+
+          <p>
+            {{ 'Study at your own pace' | i18n }}
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              {{ 'Get training' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://events.webmaker.org/">
+              <img src="/img/home/get-together-md-icon.svg" alt="" width="155" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Get Together' | i18n }}</h4>
+
+          <p>
+            {{ 'Build the web with others' | i18n }}
+            <a href="https://events.webmaker.org/{{ lang }}/">
+              {{ 'View events' | i18n }}
+            </a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <footer class="home-footer">
+    <p>
+      {{ 'Build and share the web with Mozilla.' | i18n }}
+      <button class="btn btn-default" wm-join-webmaker>
+        {{ 'Start Creating' | i18n }}
+      </button>
+    </p>
+  </footer>
+</div>
+<!-- Footer -->
+<div ng-include="'/views/partials/footer.html'"></div>

public/views/home-3.html

@@ -0,0 +1,137 @@
+<div ng-show="userDel" class="alert alert-info">{{ 'user_deleted' | i18n }}
+</div>
+<div id="page-home">
+  <div class="home-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4 col-md-5">
+          <figure class="devices">
+            <img src="/img/home/desktop.svg" alt="Desktop computer" class="desktop"/>
+            <img src="/img/home/mobile.svg" alt="Mobile phone" class="mobile"/>
+            <img src="/img/home/tablet.svg" alt="Tablet computer" class="tablet"/>
+          </figure>
+        </div>
+        <section class="col-sm-8 col-md-6">
+          <h2>{{ 'Make your own apps and websites' | i18n }}</h2>
+
+          <p class="lead">
+            {{ 'Mozilla’s free tools' | i18n }}
+          </p>
+
+          <form id="home-start-form">
+            <input type="email" class="home-email-field" placeholder="{{ 'Email address' | i18n }}"/>
+            <button class="btn btn-default">
+              {{ 'Start creating' | i18n }}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  </div>
+  <section class="home-values">
+    <div class="container">
+      <h3>
+        {{ 'Our values' | i18n }}
+      </h3>
+
+      <p class="lead">
+        {{ 'Webmaker helps people across the world' | i18n }}
+      </p>
+
+      <div class="row">
+        <div class="col-sm-7 col-md-5 col-lg-5 col-lg-offset-1">
+          <ul class="values-list">
+            <li class="value-free">
+              <h4>{{ 'Free' | i18n }}</h4>
+
+              <p>{{ 'Mozilla is a nonprofit organization' | i18n }}</p>
+            </li>
+            <li class="value-local">
+              <h4>{{ 'Local' | i18n }}</h4>
+
+              <p>{{ 'We all use the web in different ways.' | i18n }}</p>
+            </li>
+            <li class="value-more-than-code">
+              <h4>{{ 'More than code' | i18n }}</h4>
+
+              <p>
+                {{ 'We believe that digital literacy is more than just learning to code.' | i18n}}
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="col-sm-4 col-sm-offset-1 col-md-7 col-md-offset-0 col-lg-6">
+          <figure class="home-globe">
+            <img src="/img/home/yellow-earth.svg" alt="Globe" height="300" width="300"/>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="home-jump-in">
+    <div class="container">
+      <h3>{{ 'Jump right in' | i18n }}</h3>
+
+      <p class="lead">
+        {{ 'Discover how you can build and share the web.' | i18n}}
+      </p>
+      <ul class="row">
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              <img src="/img/home/gallery-md-icon.svg" alt="" width="154" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Explore Webmaker' | i18n }}</h4>
+
+          <p>
+            {{ 'Investigate the tools, learning resources' | i18n }}
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              {{ 'Explore now' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              <img src="/img/home/learntoteach-md-icon.svg" alt="" width="152" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Learn to Teach' | i18n }}</h4>
+
+          <p>
+            {{ 'Study at your own pace' | i18n }}
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              {{ 'Get training' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://events.webmaker.org/">
+              <img src="/img/home/get-together-md-icon.svg" alt="" width="155" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Get Together' | i18n }}</h4>
+
+          <p>
+            {{ 'Build the web with others' | i18n }}
+            <a href="https://events.webmaker.org/{{ lang }}/">
+              {{ 'View events' | i18n }}
+            </a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <footer class="home-footer">
+    <p>
+      {{ 'Build and share the web with Mozilla.' | i18n }}
+      <button class="btn btn-default" wm-join-webmaker>
+        {{ 'Start Creating' | i18n }}
+      </button>
+    </p>
+  </footer>
+</div>
+<!-- Footer -->
+<div ng-include="'/views/partials/footer.html'"></div>

public/views/home-4.html

@@ -0,0 +1,137 @@
+<div ng-show="userDel" class="alert alert-info">{{ 'user_deleted' | i18n }}
+</div>
+<div id="page-home" class="variant-4">
+  <div class="home-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4 col-md-5">
+          <figure class="devices">
+            <img src="/img/home/desktop.svg" alt="Desktop computer" class="desktop"/>
+            <img src="/img/home/mobile.svg" alt="Mobile phone" class="mobile"/>
+            <img src="/img/home/tablet.svg" alt="Tablet computer" class="tablet"/>
+          </figure>
+        </div>
+        <section class="col-sm-8 col-md-6">
+          <h2>{{ 'Help us build the future of the web' | i18n }}</h2>
+
+          <p class="lead">
+            {{ 'The global Mozilla community wants everyone to be a citizen of the web' | i18n }}
+          </p>
+
+          <form id="home-start-form">
+            <input type="email" class="home-email-field" placeholder="{{ 'Email address' | i18n }}"/>
+            <button class="btn btn-default">
+              {{ 'Start creating' | i18n }}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  </div>
+  <section class="home-values">
+    <div class="container">
+      <h3>
+        {{ 'Our values' | i18n }}
+      </h3>
+
+      <p class="lead">
+        {{ 'Webmaker helps people across the world' | i18n }}
+      </p>
+
+      <div class="row">
+        <div class="col-sm-7 col-md-5 col-lg-5 col-lg-offset-1">
+          <ul class="values-list">
+            <li class="value-free">
+              <h4>{{ 'Free' | i18n }}</h4>
+
+              <p>{{ 'Mozilla is a nonprofit organization' | i18n }}</p>
+            </li>
+            <li class="value-local">
+              <h4>{{ 'Local' | i18n }}</h4>
+
+              <p>{{ 'We all use the web in different ways.' | i18n }}</p>
+            </li>
+            <li class="value-more-than-code">
+              <h4>{{ 'More than code' | i18n }}</h4>
+
+              <p>
+                {{ 'We believe that digital literacy is more than just learning to code.' | i18n}}
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="col-sm-4 col-sm-offset-1 col-md-7 col-md-offset-0 col-lg-6">
+          <figure class="home-globe">
+            <img src="/img/home/yellow-earth.svg" alt="Globe" height="300" width="300"/>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="home-jump-in">
+    <div class="container">
+      <h3>{{ 'Jump right in' | i18n }}</h3>
+
+      <p class="lead">
+        {{ 'Discover how you can build and share the web.' | i18n}}
+      </p>
+      <ul class="row">
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              <img src="/img/home/gallery-md-icon.svg" alt="" width="154" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Explore Webmaker' | i18n }}</h4>
+
+          <p>
+            {{ 'Investigate the tools, learning resources' | i18n }}
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              {{ 'Explore now' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              <img src="/img/home/learntoteach-md-icon.svg" alt="" width="152" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Learn to Teach' | i18n }}</h4>
+
+          <p>
+            {{ 'Study at your own pace' | i18n }}
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              {{ 'Get training' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://events.webmaker.org/">
+              <img src="/img/home/get-together-md-icon.svg" alt="" width="155" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Get Together' | i18n }}</h4>
+
+          <p>
+            {{ 'Build the web with others' | i18n }}
+            <a href="https://events.webmaker.org/{{ lang }}/">
+              {{ 'View events' | i18n }}
+            </a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <footer class="home-footer">
+    <p>
+      {{ 'Build and share the web with Mozilla.' | i18n }}
+      <button class="btn btn-default" wm-join-webmaker>
+        {{ 'Start Creating' | i18n }}
+      </button>
+    </p>
+  </footer>
+</div>
+<!-- Footer -->
+<div ng-include="'/views/partials/footer.html'"></div>

public/views/home-5.html

@@ -0,0 +1,137 @@
+<div ng-show="userDel" class="alert alert-info">{{ 'user_deleted' | i18n }}
+</div>
+<div id="page-home">
+  <div class="home-blue">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4 col-md-5">
+          <figure class="devices">
+            <img src="/img/home/desktop.svg" alt="Desktop computer" class="desktop"/>
+            <img src="/img/home/mobile.svg" alt="Mobile phone" class="mobile"/>
+            <img src="/img/home/tablet.svg" alt="Tablet computer" class="tablet"/>
+          </figure>
+        </div>
+        <section class="col-sm-8 col-md-6">
+          <h2>{{ 'The web is yours' | i18n }}</h2>
+
+          <p class="lead">
+            {{ 'Learn to build it with Mozilla.' | i18n }}
+          </p>
+
+          <form id="home-start-form">
+            <input type="email" class="home-email-field" placeholder="{{ 'Email address' | i18n }}"/>
+            <button class="btn btn-default">
+              {{ 'Start creating' | i18n }}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  </div>
+  <section class="home-values">
+    <div class="container">
+      <h3>
+        {{ 'Our values' | i18n }}
+      </h3>
+
+      <p class="lead">
+        {{ 'Webmaker helps people across the world' | i18n }}
+      </p>
+
+      <div class="row">
+        <div class="col-sm-7 col-md-5 col-lg-5 col-lg-offset-1">
+          <ul class="values-list">
+            <li class="value-free">
+              <h4>{{ 'Free' | i18n }}</h4>
+
+              <p>{{ 'Mozilla is a nonprofit organization' | i18n }}</p>
+            </li>
+            <li class="value-local">
+              <h4>{{ 'Local' | i18n }}</h4>
+
+              <p>{{ 'We all use the web in different ways.' | i18n }}</p>
+            </li>
+            <li class="value-more-than-code">
+              <h4>{{ 'More than code' | i18n }}</h4>
+
+              <p>
+                {{ 'We believe that digital literacy is more than just learning to code.' | i18n}}
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="col-sm-4 col-sm-offset-1 col-md-7 col-md-offset-0 col-lg-6">
+          <figure class="home-globe">
+            <img src="/img/home/lightgrey-earth.svg" alt="Globe" height="300" width="300"/>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="home-jump-in">
+    <div class="container">
+      <h3>{{ 'Jump right in' | i18n }}</h3>
+
+      <p class="lead">
+        {{ 'Discover how you can build and share the web.' | i18n}}
+      </p>
+      <ul class="row">
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              <img src="/img/home/gallery-md-icon.svg" alt="" width="154" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Explore Webmaker' | i18n }}</h4>
+
+          <p>
+            {{ 'Investigate the tools, learning resources' | i18n }}
+            <a href="https://webmaker.org/{{ lang }}/explore/">
+              {{ 'Explore now' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              <img src="/img/home/learntoteach-md-icon.svg" alt="" width="152" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Learn to Teach' | i18n }}</h4>
+
+          <p>
+            {{ 'Study at your own pace' | i18n }}
+            <a href="https://training.webmakerprototypes.org/{{ lang }}/">
+              {{ 'Get training' | i18n }}
+            </a>
+          </p>
+        </li>
+        <li class="col-sm-4">
+          <figure>
+            <a href="https://events.webmaker.org/">
+              <img src="/img/home/get-together-md-icon.svg" alt="" width="155" height="120"/>
+            </a>
+          </figure>
+          <h4>{{ 'Get Together' | i18n }}</h4>
+
+          <p>
+            {{ 'Build the web with others' | i18n }}
+            <a href="https://events.webmaker.org/{{ lang }}/">
+              {{ 'View events' | i18n }}
+            </a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <footer class="home-footer">
+    <p>
+      {{ 'Build and share the web with Mozilla.' | i18n }}
+      <button class="btn btn-default" wm-join-webmaker>
+        {{ 'Start Creating' | i18n }}
+      </button>
+    </p>
+  </footer>
+</div>
+<!-- Footer -->
+<div ng-include="'/views/partials/footer.html'"></div>

public/views/home.html

@@ -12,10 +12,10 @@
           </figure>
         </div>
         <section class="col-sm-8 col-md-6">
-          <h2>{{ 'Make your own apps and websites' | i18n }}</h2>
+          <h2>{{ 'The web is yours' | i18n }}</h2>
 
           <p class="lead">
-            {{ 'Mozilla’s free tools' | i18n }}
+            {{ 'Learn to build it with Mozilla.' | i18n }}
           </p>
 
           <form id="home-start-form">
@@ -35,7 +35,7 @@
       </h3>
 
       <p class="lead">
-        {{ 'Our goal is for everyone in the world' | i18n }}
+        {{ 'Webmaker helps people across the world' | i18n }}
       </p>
 
       <div class="row">
@@ -49,12 +49,14 @@
             <li class="value-local">
               <h4>{{ 'Local' | i18n }}</h4>
 
-              <p>{{ 'Wherever you live in the world' | i18n }}</p>
+              <p>{{ 'We all use the web in different ways.' | i18n }}</p>
             </li>
             <li class="value-more-than-code">
               <h4>{{ 'More than code' | i18n }}</h4>
 
-              <p>{{ 'Our tools, learning resources, and' | i18n}}</p>
+              <p>
+                {{ 'We believe that digital literacy is more than just learning to code.' | i18n}}
+              </p>
             </li>
           </ul>
         </div>