diff --git a/public/features.jade b/public/features.jade
index 3554aee1ff..26958583a3 100644
--- a/public/features.jade
+++ b/public/features.jade
@@ -1,132 +1,53 @@
+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.
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .c7
- h3.text-headline.text-uppercase Speed & 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.
+ div(class="feature")
+ h3 Native
+ p(class="text-body") Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .c7
- h3.text-headline.text-uppercase Simple & 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.
+ 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.
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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+.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .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.
-
-
-
-.grid-fluid.l-space-bottom-8
- .c3.text-center
- .sticker
- .c7
- h3.text-headline.text-uppercase Internationalization (I18N) & Accessibility
- p.text-body(ng-non-bindable).
- [Under development] Reach all your users.
- Use the familiar ICU message format in Angular interpolation syntax
- ({{ }}), 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.
-
+ 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")
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index 942c41cfdb..1a292b23d0 100644
--- a/public/resources/css/main.scss
+++ b/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
diff --git a/public/resources/css/module/_features.scss b/public/resources/css/module/_features.scss
new file mode 100644
index 0000000000..8e32e76f53
--- /dev/null
+++ b/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;
+}
+