Bug 997176 - Implement new copy and images for /Explore landing

Gruntfile.js

@@ -114,7 +114,7 @@ module.exports = function (grunt) {
         }
       },
       node: {
-        files: ['routes/**/*.js', 'lib/**/*.js', 'app.js'],
+        files: ['routes/**/*.js', 'lib/**/*.js', 'app.js', 'less/**/*'],
         tasks: ['express:dev'],
         options: {
           spawn: false

bower.json

@@ -12,7 +12,7 @@
     "jquery": "2.0.3",
     "jquery-ui": "1.10.3",
     "makeapi-client": "https://github.com/mozilla/makeapi-client/tarball/v0.5.21",
-    "makerstrap": "0.1.2",
+    "makerstrap": "0.1.3",
     "masonry": "3.1.5",
     "moment": "2.2.1",
     "nav-global": "https://github.com/mozilla/nav-global/archive/v0.1.4.tar.gz",
@@ -24,10 +24,11 @@
     "webmaker-analytics": "0.0.5",
     "webmaker-auth-client": "0.0.26",
     "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.11.tar.gz",
-    "webmaker-language-picker": "0.0.16"
+    "webmaker-language-picker": "0.0.16",
+    "animate.css": "~3.1.0"
   },
   "resolutions": {
     "angular": "1.2.10"
   },
   "version": "1.0.70"
-}
+}

less/explore/front-page.less

@@ -0,0 +1,186 @@
+.mainContainer {
+
+  font-size: 10px;
+  @media (min-width: @screen-xl-min) {
+    font-size: 15px;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  h1, h2, h3 {
+    .text-light;
+  }
+
+  h1, h2 {
+    margin-top: 0;
+  }
+
+  h1 {
+    font-size: 5em;
+    margin-bottom: 0.8em;
+  }
+
+  h2 {
+    font-size: 2.8em;
+    margin-bottom: 0.8em;
+    line-height: 1.2;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  section {
+    padding-top: @grid-gutter-width;
+    padding-bottom: @grid-gutter-width;
+    position: relative;
+    @media (min-width: @screen-sm-min) {
+      padding-top: 2 * @grid-gutter-width;
+      padding-bottom: 2 * @grid-gutter-width;
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: -@grid-gutter-width;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: @grid-gutter-width @grid-gutter-width 0 @grid-gutter-width;
+      border-color: white transparent transparent transparent;
+    }
+  }
+
+  .panel {
+    margin: @grid-gutter-width 0;
+  }
+
+  .panel-body {
+    padding: @grid-gutter-width;
+  }
+
+}
+
+/*********************************************************
+* Sections
+*/
+
+#front-page-teaching-kits {
+  background: url(/explore/img/front-page/explore-map-bkg-2x.png) center;
+  background-size: cover;
+  .panel {
+    margin: 0;
+  }
+  .teaching-kits-img {
+    display: block;
+    max-width: 372px;
+    margin: 0 auto;
+  }
+}
+
+#front-page-events {
+  background-color: #FF4D14;
+  padding-bottom: 0;
+}
+
+#front-page-where-to-start {
+  background-color: @lightgrey;
+}
+
+#front-page-tools {
+  .tools-img {
+    width: auto;
+    height: 100px;
+  }
+  .appmaker-container {
+    position: relative;
+    display: block;
+    background: url(/explore/img/front-page/logo-appmaker-fpo-2x.png) center no-repeat;
+    background-size: auto 100%;
+    padding-top: 40px;
+  }
+  .ribbon {
+    display: inline-block;
+    white-space: nowrap;
+    background: @brand-primary;
+    color: white;
+    position: relative;
+    padding: 0 20px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    font-style: italic;
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    }
+    &:before {
+      left: 0;
+      border-width: 11px 0 11px 10px;
+      border-color: transparent transparent transparent white;
+    }
+    &:after {
+      right: 0;
+      border-width: 11px 10px 11px 0;
+      border-color: transparent white transparent transparent;
+    }
+  }
+}
+
+/*********************************************************
+* Contribute boxes
+*/
+
+.contribute-box {
+  @media (min-width: @screen-sm-min) {
+    margin-top: @grid-gutter-width;
+  }
+}
+
+.contribute-box-body {
+  position: relative;
+  .text-white;
+  .text-center;
+  .flex-center;
+
+  padding: @grid-gutter-width * 2;
+  @media (min-width: @screen-sm-min) {
+    height: 300px;
+  }
+
+  p {
+    line-height: 1.4;
+    margin-top: 0.5em;
+  }
+  h2 {
+    margin-bottom: 0;
+  }
+
+  .contribute-box:first-child & {
+    background-color: @brand-primary;
+  }
+  .contribute-box:nth-child(2) & {
+    background-color: @brand-secondary;
+  }
+  .contribute-box:nth-child(3) & {
+    background-color: #E49D07;
+  }
+  .contribute-box:nth-child(4) & {
+    background-color: #00B2D0;
+  }
+  .contribute-box:nth-child(5) & {
+    background-color: #008CD0;
+  }
+  .contribute-box:nth-child(6) & {
+    background-color: #FF5E5E;
+  }
+}

less/explore/main.less

@@ -1,10 +1,14 @@
 @import "../../bower_components/makerstrap/less/makerstrap";
 @makerstrap-bower-path: "../../bower_components";
 
+// Animations
+@import (less) "../../bower_components/animate.css/animate.css";
+
 /*********************************************************
 * Sections
 */
 @import 'variables';
+@import 'front-page';
 @import 'kits';
 
 /*********************************************************
@@ -21,6 +25,21 @@
   }
 }
 
+.text-primary {
+  color: @brand-primary
+}
+
+.text-white {
+  color: white;
+}
+
+.flex-center {
+  .flex-display();
+  .align-items(center);
+  .justify-content(center);
+}
+
+
 //  Navbar Header
 @navbar-height: 60px;
 
@@ -144,9 +163,6 @@ img {
 
 .explore-main {
   .container {
-    @media (min-width: @screen-sm-min) {
-      width: @container-sm;
-    }
     @media (min-width: @screen-md-min) {
       width: @container-md - @explore-sidebar-width;
     }
@@ -213,7 +229,8 @@ img {
   overflow-y: auto;
   background: @brand-secondary;
 
-  .hidden-xs();
+  .hidden-xs;
+  .hidden-sm;
 
   width: 33%;
   max-width: @explore-sidebar-width;

locale/en_US/explore.json

@@ -1,6 +1,6 @@
 {
-  "Explore the World of Webmaker": {
-    "message": "Explore the World of Webmaker",
+  "explore_frontpage_title": {
+    "message": "Teach web skills with Webmaker",
     "description": "Heading for Explore page"
   },
   "Web Literacy Map": {

public_angular/js/controllers.js

@@ -4,7 +4,38 @@ angular
   .module('exploreApp')
   .controller('mainController', ['$scope',
     function ($scope) {
-      // Home
+      $scope.contributeBoxes = [
+        {
+          icon: 'book',
+          title: 'Teaching kits',
+          description: 'Create or share a resource for teaching digital skills.'
+        },
+        {
+          icon: 'map-marker',
+          title: 'Events',
+          description: 'Host a Webmaker event in your hometown.'
+        },
+        {
+          icon: 'globe',
+          title: 'Translate',
+          description: 'Help localize and translate Webmaker.'
+        },
+        {
+          icon: 'picture-o',
+          title: 'Design',
+          description: 'Participate in co-design or level up on your design review skills'
+        },
+        {
+          icon: 'code',
+          title: 'Code',
+          description: 'File bugs, submit patches or hack with our MakeAPI.'
+        },
+        {
+          icon: 'rocket',
+          title: 'Partner',
+          description: 'Become a partner in our global Maker Party campaign, July to Sept 2014.'
+        }
+      ];
     }
   ])
   .controller('navigationController', ['$scope', '$location', '$routeParams', 'weblit',

public_angular/views/main.html

@@ -1,5 +1,99 @@
-<div class="jumbotron explore-jumbotron">
-  <div class="container">
-    <h1>{{ 'Explore the World of Webmaker' | i18n }}</h1>
-  </div>
+<div class="mainContainer">
+  <section id="front-page-intro" class="container">
+    <h1>{{ 'explore_frontpage_title' | i18n }}</h1>
+    <div class="row">
+      <div class="col-sm-6">
+        <h2 class="text-primary">Explore creative ways to teach digital superpowers</h2>
+        <p>...through fun making and sharing, backed by the global Mozilla community’s Web Literacy Map.</p>
+      </div>
+      <div class="hidden-xs col-sm-6 col-lg-4 col-lg-offset-1">
+        <img src="img/front-page/explore-map-2x.png" alt="The Web Literacy Map helps you build literacy in exploring, building, and sharing the web" class="animated slideInDown">
+      </div>
+    </div>
+  </section>
+
+  <section id="front-page-teaching-kits">
+    <div class="container">
+      <div class="row flex-center">
+        <div class="hidden-xs col-sm-5">
+          <img class="teaching-kits-img" src="img/front-page/explore-teaching-kits-2x.png">
+        </div>
+        <div class="col-sm-7 col-lg-6">
+          <div class="panel panel-default">
+            <div class="panel-body">
+              <h2 class="text-primary">A cookbook for teaching the web</h2>
+              <p>...that's free, open source and fun. Each skill includes free recipes, resources and teaching kits anyone can use to teach others. To understand how the web works, and discover new powers like coding, storytelling, protecting your online privacy and more. It's all part of our non-profit mission to create a more open, web literate world. </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="front-page-tools" class="container">
+    <h2 class="text-primary">...with free tools that make it easy to create and learn</h2>
+    <p>Webmaker tools Make things on the web, using the real language of the web. Create web pages, interactive videos, remixes and even mobile apps – learning as you go. It’s all free, open source and fun.</p>
+    <div class="panel panel-default panel-tools">
+      <div class="panel-body text-center">
+        <div class="row">
+          <div class="col-sm-3">
+            <img class="tools-img" src="/img/icon-tools-xray-2x.png">
+            <h3>Xray Goggles</h3>
+            <p>See how the web works. Take apart and remix any web page. (<em>Warning: may alter reality</em>.)</p>
+          </div>
+          <div class="col-sm-3">
+            <img class="tools-img" src="/img/icon-tools-thimble-2x.png">
+            <h3>Thimble</h3>
+            <p>Make and publish your own web page. Learn HTML and CSS basics with this ridiculously simple code editor.</p>
+          </div>
+          <div class="col-sm-3">
+            <img class="tools-img" src="/img/icon-tools-popcorn-2x.png">
+            <h3>Popcorn Maker</h3>
+            <p>Create interactive videos.
 Make multimedia stories, music videos, mash-ups, animated GIFs and more.</p>
+          </div>
+          <div class="col-sm-3">
+            <div class="tools-img appmaker-container">
+              <div class="ribbon">Coming soon</div>
+            </div>
+            <h3>AppMaker</h3>
+            <p>Make apps for your phone. Combine pieces of your favorite web sites and services to make an app for you and your friends.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center small">
+      Tools. More crazy stuff in prototypes. Find something cool, play, let us know what you like.
+    </p>
+  </section>
+
+  <section id="front-page-events">
+    <div class="container text-white">
+      <h2>Make. Learn. Get together.</h2>
+      <p>Webmaker Mentors and learners get together at events everywhere around the world – libraries, community centers, internet cafes, or your own living room. Find an event near you, learn how to host your own, or get involved with our global Maker Party (July to Sep 2014.)</p>
+      <img src="img/front-page/explore-events.png">
+    </div>
+  </section>
+
+  <section id="front-page-contribute" class="container">
+    <h2 class="text-primary">Contribute to Webmaker</h2>
+    <p>The Webmaker project is Open Source and anyone can contribute code, design or translations. Find out more about how to Get Involved.</p>
+    <div class="row">
+      <div class="col-sm-6 col-lg-4 contribute-box" ng-repeat="box in contributeBoxes">
+        <div class="contribute-box-body">
+          <div>
+            <h2><span class="fa fa-{{box.icon}}"></span></h2>
+            <h2>{{box.title}}</h2>
+            <p>{{box.description}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="front-page-where-to-start">
+    <div class="container">
+      <h2 class="text-primary">Not sure where to start?</h2>
+      <p>Explore the competencies and see what teaching resources the Webmaker community has to offer.</p>
+  </section>
 </div>