feat(features: update features section)

Author: Eric Jimenez

public/features.jade

@@ -1,132 +1,53 @@
-
-<!-- Speed & Performance -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-av-timer"></span>
-  .c7
-    h3.text-headline.text-uppercase  Speed &amp; Performance
-    p.text-body.
-      Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through
-      server-side pre-rendering, offline compile for fast startup, and ultrafast change detection
-      and view caching for smooth virtual scrolling and snappy view transitions.
-
-<!-- Simplicity -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon is-small icon-embed2"></span>
-  .c7
-    h3.text-headline.text-uppercase  Simple &amp; Expressive
-    p.text-body.
-      Make your intention clear using natural, easy-to-write syntax.
-      Reduce complexity for your team: new, structure-rich templates are
-      readable and easy to understand at a glance.
-
-
-<!-- Cross-Platform -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-stay-current-portrait"></span>
-  .c7
-    h3.text-headline.text-uppercase  Cross Platform
-    p.text-body.
-      Learning Angular 2 gives you the tools you need to build apps for desktop, mobile web,
-      Android, and iOS. Angular Universal provides for server-side rendering for fast initial
-      views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps.
-      Web worker support keeps your app UI fully responsive no matter how heavy the load.
-
-
-<!-- Seamless Upgrade -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-web"></span>
-  .c7
-    h3.text-headline.text-uppercase Seamless Upgrade from Angular 1
-    p.text-body.
-      Upgrade your Angular 1 application at your own pace by mixing in Angular 2 components,
-      directives, pipes, services and more by using the ngUpgrade APIs.
-
-
-<!-- Flexible Development -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-favorite"></span>
-  .c7
-    h3.text-headline.text-uppercase  Flexible Development
-    p.text-body.
-      The choice of language is up to you. In addition to full support for 
-      ES5, TypeScript, and Dart, Angular 2 works equally well with ES2015 and other languages 
-      that compile to JavaScript.
-
-
-<!-- Routing  -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-call-split"></span>
-  .c7
-    h3.text-headline.text-uppercase Comprehensive Routing
-    p.text-body.
-      Design sophisticated views:
-      map URL paths to application components,
-      and use advanced features like nested and sibling routes.
-      Angular 2 supports card stack navigation, animated transitions, and
-      lazy loading for mobile users.
-      If you already use routing from a prior version of Angular,
-      you can easily migrate to Angular 2 routing.
-
-
-<!-- Dependency Injection  -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-now-widgets"></span>
-  .c7
-    h3.text-headline.text-uppercase Dependency Injection
-    p.text-body.
-      Angular 2 ships with powerful, yet simple-to-use dependency injection,
-      allowing you to maintain modular applications without writing tedious glue code.
-      Dependency injection helps you write tests
-      by making it easy to inject test doubles.
-
-<!-- Legacy Browsers -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-fast-forward"></span>
-  .c7
-    h3.text-headline.text-uppercase  Legacy Browser Support
-    p.text-body.
-      In addition to fully supporting latest versions of Chrome, Edge, Firefox, IE, and Safari,
-      Angular 2 is also tested for older browsers including IE9+ and Android 4.1+.
-
-
-<!-- Animations  -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-flip"></span>
-  .c7
-    h3.text-headline.text-uppercase Animations
-    p.text-body.
-      [Under development] Tap directly into low-level animation support on
-      mobile and desktop environments with easy-to-use Angular events.
-      You can use CSS, JavaScript, and the Web Animations API to
-      intelligently handle changes to animations in response to user events.
-      Plan complex animation flows by sequencing the behavior of
-      an entire website on a timeline.
-
-
-<!-- Internationalization & Accessibility -->
-.grid-fluid.l-space-bottom-8
-  .c3.text-center
-    .sticker <span class="sticker-icon icon-accessibility"></span>
-  .c7
-    h3.text-headline.text-uppercase Internationalization (I18N) &amp; Accessibility
-    p.text-body(ng-non-bindable).
-      [Under development] Reach all your users.
-      Use the familiar ICU message format in Angular interpolation syntax
-      (<b>{{  }}</b>), including pluralization and gender rules.
-      Automate message extraction, pseudo-localization, and translation updates.
-      Generate static applications for each locale.
-      Easily promote accessibility via screen readers and assistive devices by automatically
-      generating appropriate ARIA attributes.
-
-
+div
+  div
+    h2(class="text-headline") Cross Platform
+    div(class="feature-row")
+      div(class="feature")
+        h3 Progressive Web App
+        p(class="text-body") Use modern web platform capabilities to deliver app-like experiences.  High performance, offline and zero-step installation.
+
+      div(class="feature")
+        h3 Native
+        p(class="text-body") Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.
+
+      div(class="feature")
+        h3 Desktop
+        p(class="text-body") Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus ability to access native OS APIs.
+
+    h2(class="text-headline") Speed & Performance
+    div(class="feature-row")
+      div(class="feature")
+        h3 Code generation
+        p(class="text-body") Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines giving you all the benefits of hand-written code with the productivity of a framework.
+      div(class="feature")
+        h3 Universal
+        p(class="text-body") Serve the first view of your application on node.js, .NET, PHP and other servers for near-instant rendering in just HTML and CSS.  Also paves the way for sites that optimize for SEO.
+      div(class="feature")
+        h3 Code Splitting
+        p(class="text-body") Angular apps load quickly with the new Component Router that delivers automatic code-splitting so users only load code required to render the view they request.
+
+    h2(class="text-headline") Productivity
+    div(class="feature-row")
+      div(class="feature")
+        h3 Templates
+        p(class="text-body") Quickly create UI views with simple and powerful template syntax.
+      div(class="feature")
+        h3 Angular CLI
+        p(class="text-body") Command line tools: start building fast, add components and tests, then instantly deploy.
+      div(class="feature")
+        h3 IDEs
+        p(class="text-body") Get intelligent code completion, instant errors and other feedback in popular editors and IDEs.
+
+    h2(class="text-headline") Full Development Story
+    div(class="feature-row")
+      div(class="feature")
+        h3 Testing
+        p(class="text-body") With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and stably.
+      div(class="feature")
+        h3 Animation
+        p(class="text-body") Create high performance complex choreographies and animation timelines with very little code through Angular's intuitive API.
+      div(class="feature")
+        h3 Accessibility
+        p(class="text-body") Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.
 
 != partial("/_includes/_cta-bar")

public/resources/css/main.scss

@@ -49,9 +49,10 @@
 @import 'module/support';
 @import 'module/article-card';
 @import 'module/style-guide';
-@import 'module/_press-kit';
 @import 'module/resources';
 @import 'module/home-promos';
+@import 'module/press-kit';
+@import 'module/features';
 
 /*
 * PRINT STYLES

public/resources/css/module/_features.scss

@@ -0,0 +1,25 @@
+.feature-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+
+  h2.text-headline {
+    font-size: 28px;
+    margin-top: 10px;
+    color: #37474F;
+  }
+}
+
+.features-desc {
+  max-width: 920px;
+}
+
+.feature {
+  max-width: 350px;
+  margin-bottom: $unit * 4;
+}
+