feat(images): new frontpage as directed by Alex Wolfe. New images from Fatima Remtullah

Author: Eric Jimenez

public/_includes/_hero-home.jade

@@ -5,7 +5,8 @@ header(class="background-sky")
     .hero-cta
       a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
 
-.banner.is-centered
+.banner.banner-floaty
   .banner-ng-annoucement
-    h4 Watch the ng-conf Live Stream May 4th-6th. 
+    div(class="banner-text") Watch the ng-conf Live Stream May 4th-6th. 
+    div(class="banner-button")
       a(href="https://www.ng-conf.org/#/extended" target="_blank") View Live Stream

public/index.jade

@@ -1,73 +1,53 @@
 include _includes/_util-fns
 
-div(layout-gt-sm='row' style='margin: 0 -24px')
-  div(flex=33 style='padding:0 24px')
-    h3.text-headline Fast
-    p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead.
-  div(flex=33 style='padding:0 24px')
-    h3.text-headline Mobile
-    p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance.
-  div(flex=33 style='padding:0 24px')
-    h3.text-headline Flexible
-    p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding  and functional reactive style with unidirectional data flow and support for observables and immutable data structures.
-br
-div
-  h3.text-headline The Basics
-  p.text-body In Angular you display data by defining components.  Data in your component classes is automatically available to display in your templates or control how they render as in the example below.
-  p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
-  p(style='text-align:right')
-    md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank')
-      span.icon-open-in-new
-      |   Try in Plunker
-  +makeTabs(`
-    ../docs/_fragments/homepage-hello-world/ts/app/hello_world.html,
-    ../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts,
-    ../docs/_fragments/homepage-hello-world/ts/app/main.ts,
-    ../docs/_fragments/homepage-hello-world/ts/index.1.html`,
-    null, 
-    `app/hello_world.html,
-    app/hello_world.ts,
-    app/main.ts,
-    index.html`)
-br
-div
-  h3.text-headline Structuring Apps With Components
-  p.text-body Groups of coordinated components divide the responsibilities of our application.  This ToDo list app has a separate component for the form, the list, and the core app logic.  Where the previous example component referenced templates in separate files, this one shows using inline templates.
-  p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
-  p(style='text-align:right')
-    md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank')
-      span.icon-open-in-new
-      |   Try in Plunker
-  +makeTabs(`
-    ../docs/_fragments/homepage-todo/ts/app/todo_app.ts,
-    ../docs/_fragments/homepage-todo/ts/app/todo_form.ts,
-    ../docs/_fragments/homepage-todo/ts/app/todo_list.ts,
-    ../docs/_fragments/homepage-todo/ts/app/todo.ts,  
-    ../docs/_fragments/homepage-todo/ts/app/main.ts,
-    ../docs/_fragments/homepage-todo/ts/index.1.html`,
-    null, 
-    `app/todo_app.ts,
-    app/todo_form.ts,
-    app/todo_list.ts,
-    app/todo.ts,  
-    app/main.ts,
-    index.html`)
-br
-div
-  h3.text-headline Advanced Component Communication
-  p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost.
-  p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with <code>ngFor</code> without any special knowledge of it.
-  p(style='text-align:right')
-    md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank')
-      span.icon-open-in-new
-      |   Try in Plunker
-  +makeTabs(`
-    ../docs/_fragments/homepage-tabs/ts/app/di_demo.ts,
-    ../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts,
-    ../docs/_fragments/homepage-tabs/ts/app/main.ts,
-    ../docs/_fragments/homepage-tabs/ts/index.1.html`,
-    null, 
-    `app/di_demo.ts,
-    app/ui_tabs.ts,
-    app/main.ts,
-    index.html`)
+div(class="home-rows")
+  // Group 1
+  div(layout="row" layout-xs="column" class="home-row")
+    div(class="promo-img-container promo-1")
+      div
+        img(src="resources/images/home/responsive-framework.svg")
+    div(class="text-container")
+      div(class="text-block promo-1-desc l-pad-top-2")
+        h3(class="text-headline") Develop Across All Platforms
+        p(class="text-body").
+          Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
+
+  // Group 2
+  div(layout="row" layout-xs="column" class="home-row")
+    div(class="text-container")
+      div(class="text-block")
+        h3(class="text-headline") Speed & Performance
+        p(class="text-body").
+          Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
+        br
+        p(class="text-body").
+          Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.
+    div(class="promo-img-container promo-2")
+      div
+        img(src="resources/images/home/speed-performance.svg")
+
+  // Group 3
+  div(layout="row" layout-xs="column" class="home-row")
+    div(class="promo-img-container promo-3")
+      div
+        img(src="resources/images/home/joyful-development.png")
+    div(class="text-container")
+      div(class="text-block promo-3-desc")
+        h3(class="text-headline") Incredible Tooling
+        p(class="text-body").
+          Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components.  Get immediate Angular-specific help and feedback with nearly every IDE and editor.  All this comes together so you can focus on building amazing apps rather than trying to make the code work.
+
+  // Group 4
+  div(layout="row" layout-xs="column" class="home-row")
+    div(class="text-container")
+      div(class="text-block l-pad-top-2")
+        h3(class="text-headline") Loved by Millions
+        p(class="text-body").
+          Supports you from your first scrappy launch all the way through global deployment -- Angular brings you the scaling infrastructure and techniques that support Google's largest applications.
+    div(class="promo-img-container promo-4")
+      div
+        img(src="resources/images/home/loved-by-millions.png")
+        
+  .cta-bar
+    a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started
+

public/resources/css/layout/_layout.scss

@@ -270,4 +270,4 @@ button.verbose.on {display: none}
   font-size: $unit * 2;
   margin-bottom: $unit;
   margin-top: $unit * 4; 
-}
+}

public/resources/css/main.scss

@@ -51,7 +51,7 @@
 @import 'module/style-guide';
 @import 'module/_press-kit';
 @import 'module/resources';
-
+@import 'module/home-promos';
 
 /*
 * PRINT STYLES

public/resources/css/module/_banner.scss

@@ -4,6 +4,80 @@
 * Addtional announcements that generally follow a hero
 */
 
+.banner-floaty {
+  width: 920px;
+  height: 112px;
+  background-color: rgba(255, 255, 255, 1) !important;
+  -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
+  position: absolute;
+  margin-top: -50px;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: table;
+  padding: 0 !important;
+
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding: 0;
+  }
+
+  @media(max-width: 959px) {
+    width: 100%;
+    height: 56px;
+    padding: 16px 0 !important;
+  }
+
+  .banner-ng-annoucement {
+    display: flex;
+    justify-content: space-around;
+    align-content: space-around;
+    align-items: center;
+    height: 100%;
+
+    @media(max-width: 959px) {
+      flex-direction: column;
+      justify-content: space-between;
+      align-content: space-between;
+
+      .banner-text {
+        padding: 16px 0;
+        margin: 0 16px;
+      }
+    }
+
+    .banner-text {
+      font-size: 16px;
+      color: #607D8B;
+    }
+
+    .banner-button {
+      a {
+        color: #607D8B;
+        background-color: #ECEFF1;
+        padding: 0;
+        line-height: 36px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      background: none;
+      padding-left: 0px;
+      margin: 0px 0px $unit 0px;
+      text-align: center;
+    }
+  }
+}
+
 .banner {
   background: $mist;
   padding: ($unit * 2) ($unit * 6);
@@ -25,7 +99,6 @@
     screen and (max-width: $tablet-breakpoint) {
       display: block;
     }
-    padding: 0;
   }
 
   .ng-conf-logo {
@@ -38,20 +111,6 @@
     padding: $unit 0 $unit 108px;
   }
 
-  .banner-ng-annoucement {
-    display: inline-block;
-    text-align: left;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      background: none;
-      padding-left: 0px;
-      margin: 0px 0px $unit 0px;
-      text-align: center;
-    }
-  }
-
   h3 {
     opacity: .87;
     line-height: 34px;

public/resources/css/module/_footer.scss

@@ -39,6 +39,8 @@
   }
 
   h3 {
+    font-size: 20px;
+
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
     screen and (max-width: $tablet-breakpoint) {

public/resources/css/module/_hero.scss

@@ -5,6 +5,13 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
   padding: $hero-padding;
   height: $unit * 10;
 
+  .hero-cta {
+    a {
+      padding-left: 48px;
+      padding-right: 48px;
+    }
+  }
+
   .hero-title-with-badges {
     margin-bottom: $unit;
   }

public/resources/css/module/_home-promos.scss

@@ -0,0 +1,81 @@
+// TODO: (ericjim) is the best place to put this?
+.home-rows {
+  margin-top: 112px;
+}
+
+.home-row {
+  max-width: 920px;
+  margin: 0 0 60px 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  h3.text-headline {
+    font-size: 28px;
+    margin-top: 10px;
+    color: #37474F;
+  }
+
+  .promo-image-container, .text-container {
+    max-width: 50%;
+  }
+
+  // NOTE (ericjim): remove if graphic changes.
+  .promo-3 {
+    margin-top: 15px;
+
+    @media(max-width: 599px) {
+      margin-top: 0;
+    }
+  }
+
+  // -- Utility margins for promos
+  .promo-1-desc, .promo-3-desc {
+    padding-left: 5px;
+  }
+
+  // -- Reset margins for the utility margins
+  @media(max-width: 599px) {
+    .promo-1, .promo-2, .promo-3, .promo-4 {
+      margin: 0;
+    }
+  }
+
+  .text-block {
+    padding-right: 15%;
+
+    @media(max-width: 599px) {
+      padding: 0;
+    }
+  }
+
+  @media(max-width: 599px) {
+    .promo-image-container, .text-container {
+      max-width: 100%;
+    }
+
+    &:nth-child(even) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  .promo-img-container {
+
+    @media (max-width: 375px) {
+      text-align: initial;
+    }
+
+    p {
+      margin: 0 20px;
+    }
+
+    img {
+      max-width: 90%;
+
+
+      @media (max-width: 599px) {
+        max-width: 100%;
+        float: initial !important;
+      }
+    }
+  }
+}