From 611fd4f6e5bfed207e5da0aac187420074ccaaee Mon Sep 17 00:00:00 2001
From: David Friedman <dmail@google.com>
Date: Wed, 8 Jul 2015 01:49:02 -0700
Subject: [PATCH] Docs: Localized landing pages for M Preview 2 release.

Change-Id: Ie8f5f306cbc2188f99bfa2bfa21be40ac16c6725
---
 docs/html-intl/intl/es/index.jd    | 146 ++++++++++++++--------------
 docs/html-intl/intl/ja/index.jd    | 146 ++++++++++++++--------------
 docs/html-intl/intl/ko/index.jd    | 146 ++++++++++++++--------------
 docs/html-intl/intl/pt-br/index.jd | 148 ++++++++++++++--------------
 docs/html-intl/intl/ru/index.jd    | 148 ++++++++++++++--------------
 docs/html-intl/intl/zh-cn/index.jd | 146 ++++++++++++++--------------
 docs/html-intl/intl/zh-tw/index.jd | 149 ++++++++++++++---------------
 7 files changed, 502 insertions(+), 527 deletions(-)

diff --git a/docs/html-intl/intl/es/index.jd b/docs/html-intl/intl/es/index.jd
index 3c63b116de3a3..f69c442d24b5a 100644
--- a/docs/html-intl/intl/es/index.jd
+++ b/docs/html-intl/intl/es/index.jd
@@ -1,93 +1,89 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=El sitio oficial para los desarrolladores de Android. Proporciona el SDK de Android y la documentación para los diseñadores y desarrolladores de aplicaciones.
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
 page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>La actualización 5.0 de Android agrega una variedad de nuevas características para sus aplicaciones, como notificaciones en la pantalla de bloqueo, una nueva API de cámara, OpenGL ES 3.1, una nueva interfaz llamada "Material design", y mucho más.</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">Más información</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">Prepárese para la próxima versión de
+Android. Pruebe sus aplicaciones en Nexus 5, 6, 9 y Player. </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          ¡Empiece hoy mismo!
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">Obtener el SDK</a></div>
-      <div><a href="{@docRoot}samples/index.html">Examinar muestras</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">Mirar videos</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">Administrar tus aplicaciones</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">Creado para un mundo de múltiples pantallas</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Android se ejecuta en cientos de millones de dispositivos de todo el mundo, <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">Creado para un mundo de múltiples pantallas</h1>
+    <div class="dac-section-subtitle">
+      Android se ejecuta en cientos de millones de dispositivos de todo el mundo, <br>
           y ahora es compatible con estos innovadores factores de forma.
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                Proporciona información dinámica para tus usuarios, cuando la necesiten.
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">Obtener información sobre Android Wear</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                Crea aplicaciones para televisores y dale vida a tus contenidos.
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">Obtener información sobre Android TV</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                Extiende tus aplicaciones de música para los sistemas de entretenimiento para automóviles.
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">Más información sobre Android Auto</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/ja/index.jd b/docs/html-intl/intl/ja/index.jd
index e0153fa3161fb..4b1fa0eca1afb 100644
--- a/docs/html-intl/intl/ja/index.jd
+++ b/docs/html-intl/intl/ja/index.jd
@@ -1,93 +1,89 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=Android デベロッパー向け公式サイトアプリのデベロッパーおよびデザイナー向け Android SDK とドキュメンテーションを提供します。
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
 page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>Android 5.0 アップデートでは、ロック画面での通知、新しいカメラ API、OpenGL ES 3.1、新たなマテリアル デザイン インターフェースなど、ご使用のアプリにさまざまな新しい機能を提供します。</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">詳細を見る</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">次期バージョンの Android に向けて準備しましょう。
+        Nexus 5、6、9、Nexus Player でアプリをテストします。 </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          スタートガイド
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">SDK を入手する</a></div>
-      <div><a href="{@docRoot}samples/index.html">サンプルを見る</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">ビデオを見る</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">アプリを管理する</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">マルチ スクリーンの世界を<br>構築しましょう</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Android は世界中の数多くの携帯型デバイスで使われています。 <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">マルチ スクリーンの世界を<br>構築しましょう</h1>
+    <div class="dac-section-subtitle">
+      Android は世界中の数多くの携帯型デバイスで使われています。 <br>
           そして今回、これらの新しいフォーム ファクタをサポートします。
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                いつでもどこでも、アプリのユーザーに必要な情報を提供します。
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">Android Wear の詳細を見る</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                大画面向けアプリを作成して、コンテンツを生き生きと表現します。
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">Android TV の詳細を見る</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                音楽アプリを車載エンターテイメント システムに対応させます。
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">Android Auto の詳細を見る</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/ko/index.jd b/docs/html-intl/intl/ko/index.jd
index 59b9321d654f0..dd756a4b9453f 100644
--- a/docs/html-intl/intl/ko/index.jd
+++ b/docs/html-intl/intl/ko/index.jd
@@ -1,93 +1,89 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=Android 개발자 공식 사이트 앱 개발자 및 디자이너에게 Android SDK 및 문서를 제공합니다.
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
 page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>Android 5.0 업데이트는 사용자 앱에 잠금화면상의 알림, 완전히 새로운 카메라 API, OpenGL ES 3.1, 신규 머티리얼 디자인(Material Design) 인터페이스 등 다양하고 새로운 기능을 추가합니다.</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">자세히 알아보기</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">Android의 다음 버전을 만나볼 준비가 
+        되셨습니까? 여러분의 앱을 Nexus 5, 6, 9 및 Player에서 테스트해보십시오. </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          지금 시작하세요!
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">SDK 받기</a></div>
-      <div><a href="{@docRoot}samples/index.html">샘플 둘러보기</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">비디오 시청</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">앱 관리</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">멀티스크린 월드에 맞게 만들기</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Android는 전 세계 수억 개의 휴대 기기에서 구동되고 있으며, <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">멀티스크린 월드에 맞게 만들기</h1>
+    <div class="dac-section-subtitle">
+      Android는 전 세계 수억 개의 휴대 기기에서 구동되고 있으며, <br>
           이제 이 흥미진진하고 새로운 폼팩터를 지원합니다.
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                사용자가 필요로 할 때 언제든지 실시간으로 정보를 제공합니다.
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">Android Wear에 대해 알아보세요</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                대형 스크린에 적합한 앱과 컨텐츠를 구성하세요.
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">Android TV에 대해 알아보세요</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                음악 앱을 자동차 엔터테인먼트 시스템에 적용해보세요.
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">Android Auto에 대해 알아보세요</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/pt-br/index.jd b/docs/html-intl/intl/pt-br/index.jd
index bf6c57d59cf58..dd48fe2ee2196 100644
--- a/docs/html-intl/intl/pt-br/index.jd
+++ b/docs/html-intl/intl/pt-br/index.jd
@@ -1,93 +1,89 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=O site oficial dos desenvolvedores Android. Fornece o Android SDK e a documentação para desenvolvedores e projetistas de aplicativos.
-page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" /> 
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
+page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>A atualização do Android 5.0 adiciona diversos novos recursos aos aplicativos, como notificações na tela de bloqueio, uma API de câmera totalmente nova, OpenGL ES 3.1, a nova interface do Material Design e muito mais.</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">Saiba mais</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">Prepare-se para a próxima versão do
+        Android. Teste os aplicativos no Nexus 5, 6, 9 e Player.  </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Comece!
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">Obtenha o SDK</a></div>
-      <div><a href="{@docRoot}samples/index.html">Procure amostras</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">Assista a vídeos</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">Gerencie seus aplicativos</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">Crie para um mundo multitela</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          O Android funciona em milhões de dispositivos portáteis em todo o mundo <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">Crie para um mundo multitela</h1>
+    <div class="dac-section-subtitle">
+      O Android funciona em milhões de dispositivos portáteis em todo o mundo <br>
           e agora é compatível com esses novos e empolgantes recursos.
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"><img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                Forneça informações constantemente aos usuários, sempre que precisarem.
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">Conheça o Android Wear</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                Crie aplicativos para a telona e dê vida ao conteúdo.
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">Conheça o Android TV</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                Estenda seus aplicativos de música a sistema de entretenimento de automóveis.
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">Conheça o Android Auto</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/ru/index.jd b/docs/html-intl/intl/ru/index.jd
index eb7ffe4d603b7..f59a1369558c6 100644
--- a/docs/html-intl/intl/ru/index.jd
+++ b/docs/html-intl/intl/ru/index.jd
@@ -1,93 +1,91 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=Официальный сайт для разработчиков Android. На этом сайте вы найдете пакеты Android SDK и документацию для дизайнеров и разработчиков приложений.
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
 page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>Обновление Android 5.0 содержит различные новые возможности для приложений: уведомления на заблокированном экране, совершено новый API камеры, OpenGL ES 3.1, новый интерфейс Material Design и множество других функций.</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">Подробнее</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">Подготовьтесь к выходу следующей версии
+        платформы Android. Протестируйте ваши приложения на устройствах Nexus
+        5, 6, 9 и Player. </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Итак, приступим!
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">Пакет SDK</a></div>
-      <div><a href="{@docRoot}samples/index.html">Примеры</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">Видеоролики</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">Управление приложениями</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">ОС для многоэкранных устройств</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Сотни миллионов мобильных устройств по всему миру работают под управлением операционной системы Android. <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">ОС для многоэкранных устройств</h1>
+    <div class="dac-section-subtitle">
+      Сотни миллионов мобильных устройств по всему миру работают под управлением
+      операционной системы Android. <br>
           А теперь эта система радует и обладателей устройств других форм-факторов.
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                Предоставляйте пользователям информацию прямо на ходу, когда бы им это ни потребовалось.
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">Подробнее об Android Wear</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                Создавайте приложения для использования на большом экране телевизора и разрабатывайте динамичный контент.
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">Подробнее об Android TV</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                Автомобильные мультимедийные системы — прекрасная возможность расширить список поддерживаемых устройств для музыкальных приложений.
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">Подробнее об Android Auto</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/zh-cn/index.jd b/docs/html-intl/intl/zh-cn/index.jd
index 1c2fb9909d264..67035eac0639f 100644
--- a/docs/html-intl/intl/zh-cn/index.jd
+++ b/docs/html-intl/intl/zh-cn/index.jd
@@ -1,93 +1,89 @@
 fullpage=true
-page.viewport_width=970
 excludeFromSuggestions=true
-page.metaDescription=Android 开发人员的官方网站。为应用开发人员以及设计师提供 Android SDK 和文档。
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
 page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3>
-            <p>Android 5.0 更新将为您的应用增添各种新功能，例如锁定屏幕通知、全新的相机 API、OpenGL ES 3.1、全新的 Material Design 界面等等。</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">了解详情</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">准备迎接 Android 的下一版本。在 Nexus 5、
+        6、9 和 Player 中测试应用。 </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          开始！
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">获得 SDK</a></div>
-      <div><a href="{@docRoot}samples/index.html">浏览示例</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">观看视频</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">管理您的应用</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">专为多屏幕时代而设</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Android 在全球各地的数亿台手持设备上运行， <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">专为多屏幕时代而设</h1>
+    <div class="dac-section-subtitle">
+      Android 在全球各地的数亿台手持设备上运行， <br>
           如今更支持下列激动人心的新设备和配置。
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                让您的用户即便在途中亦能随时随地获得所需的信息。
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">了解关于 Android Wear 的信息</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                将您的应用搬上大屏幕，使您的内容栩栩如生。
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">了解关于 Android TV 的信息</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                将您的音乐应用扩展至车载娱乐系统。
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">了解关于 Android Auto 的信息</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
diff --git a/docs/html-intl/intl/zh-tw/index.jd b/docs/html-intl/intl/zh-tw/index.jd
index 56ae4cf574bdc..e788062067b00 100644
--- a/docs/html-intl/intl/zh-tw/index.jd
+++ b/docs/html-intl/intl/zh-tw/index.jd
@@ -1,92 +1,89 @@
 fullpage=true
-page.viewport_width=970excludeFromSuggestions=true
-page.metaDescription=適用於 Android 開發人員的官方網站。提供適用於應用程式開發人員與設計師的 Android SDK 與文件。
-page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" /> 
+excludeFromSuggestions=true
+page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
+page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3f61-WpRguHq-aNjtF7xJjMTSi79as" />
 
 @jd:body
 
-<div class="home-new-carousel-1">
-  <div class="fullscreen-carousel-content">
-    <div class="vcenter">
-      <div class="wrap clearfix">
+<!-- <div class="dac-hero-carousel" data-carousel-query="collection:index/carousel">
+</div> -->
+<section class="dac-hero-carousel">
 
-        <div class="static resource-flow-layout wrap col-16">
-          <div class="resource resource-card resource-card-18x6">
+<!-- <article class="dac-expand dac-hero dac-invert active" style="background-color: rgb(38, 50, 56);"> -->
+<article class="dac-expand dac-hero dac-invert active" style="background-color: #455A64;">
+<a href="/preview/index.html">
+  <div class="wrap" style="max-width:1100px;">
+    <div class="cols dac-hero-content">
+      <div class="col-10of16 col-push-6of16 dac-hero-figure">
+        <img class="dac-hero-image" src="{@docRoot}images/home/devices-hero_620px_2x.png"
+             srcset="{@docRoot}images/home/devices-hero_620px.png 1x,
+             {@docRoot}images/home/devices-hero_620px_2x.png 2x">
+      </div>
+      <div class="col-6of16 col-pull-10of16">
+        <div class="dac-hero-tag"></div>
 
-      <div class="landing-section-header">
-            <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" width="510" style="margin:20px 30px 0 30px"></div>
-            <div class="col-5" style=" margin-top:70px ">
-            <h3 stye="font-weight:300;">Android 5.0 棒棒糖</h3>
-            <p>Android 5.0 更新新增了許多新功能到您的應用程式，例如鎖定螢幕上的通知、全新的相機 API、OpenGL ES 3.1、新的材料設計介面，還有更多其他功能。</p>
-            <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">深入了解</a>
-            </div>
-          </div>
-          </div>
-        </div>
-       <h2>&nbsp;</h2>
-        <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16
-        no-section" data-query="collection:index/primary" data-resourcestyle="card"
-        data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget -->
-      </div> <!-- end .wrap -->
-    </div> <!-- end .vcenter -->
-  </div> <!-- end .fullscreen-carousel-content -->
-</div> <!-- end .fullscreen-carousel -->
+        <h1 class="dac-hero-title">Android M Developer Preview</h1>
+        <p class="dac-hero-description">準備使用新版 Android。在 Nexus 5、6、9 和 
+        Player 上測試您的應用程式。 </p>
 
-<div class="actions-bar" style="margin-top:20px">
-  <div class="wrap">
+        <a class="dac-hero-cta" href="{@docRoot}preview/overview.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          開始使用！
+        </a>
+      </div>
+    </div>
+  </div>
+</a>
+</article></section>
+
+<div class="actions-bar dac-expand dac-invert">
+  <div class="wrap dac-offset-parent">
+    <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps">
+      <i class="dac-sprite dac-arrow-down-gray"></i>
+    </a>
     <div class="actions">
-      <div><a href="{@docRoot}sdk/index.html">取得 SDK</a></div>
-      <div><a href="{@docRoot}samples/index.html">瀏覽範例</a></div>
-      <div><a href="//www.youtube.com/user/androiddevelopers">觀賞影片</a></div>
-      <div><a href="{@docRoot}distribute/googleplay/developer-console.html">管理您的應用程式</a></div>
+      <div><a href="{@docRoot}sdk/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Get the SDK
+      </a></div>
+      <div><a href="{@docRoot}samples/index.html">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Browse Samples
+      </a></div>
+      <div><a href="//www.youtube.com/user/androiddevelopers">
+        <span class="dac-sprite dac-auto-chevron-large"></span>
+        Watch Videos
+      </a></div>
     </div><!-- end .actions -->
   </div><!-- end .wrap -->
 </div><!-- end .actions-bar -->
 
 
 
-<div class="landing-rest-of-page">
-  <div class="landing-section">
-    <div class="wrap">
-      <div class="landing-section-header">
+<section class="dac-section dac-section-light" id="build-apps"><div class="wrap">
+  <h1 class="dac-section-title">Build Beautiful Apps</h1>
+  <div class="dac-section-subtitle">
+    Resources to get you started with designing and developing for Android.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/primary"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-            <div class="landing-h1" style="margin-top:0px">針對多螢幕世界建置</div>
-        <div class="landing-subhead" style="margin-top: 20px;">
-          Android 在全球數百萬部手持式裝置上執行， <br>
+<div class="dac-hero-carousel" data-carousel-query="collection:index/secondary/carousel">
+</div>
+
+<section class="dac-section dac-gray"><div class="wrap">
+  <div class="cols"><div class="col-10of12 col-push-1of12">
+    <h1 class="dac-section-title">針對多螢幕世界建置</h1>
+    <div class="dac-section-subtitle">
+      Android 在全球數百萬部手持式裝置上執行， <br>
           而且它現在支援這些令人興奮、各種尺寸的裝置。
-        </div>
-      </div>
-      <div class="landing-body" style="margin-top: 50px;">
-        <div class="landing-breakout cols">
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/wear-wordmark.png"> <img src="{@docRoot}images/home/wear.png">
-              <p class="landing-small">
-                為您的使用者提供可隨時隨地存取的資訊。
-            </p>
-            <p class="landing-small">
-              <a href="{@docRoot}wear/index.html">了解 Android Wear</a>
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/tv-wordmark.png"> <img src="{@docRoot}images/home/tv.png">
-              <p class="landing-small">
-                為大螢幕建置您的應用程式，並將您的內容帶到生活中。
-              </p>
-            <p class="landing-small">
-              <a href="{@docRoot}tv/index.html">了解 Android TV</a>
-
-            </p>
-          </div>
-          <div class="col-3-wide">
-              <img src="{@docRoot}images/home/auto-wordmark.png"> <img src="{@docRoot}images/home/auto.png">
-              <p class="landing-small">
-                將您的音樂應用程式延伸到車用娛樂系統。
-             </p>
-            <p class="landing-small">
-              <a href="{@docRoot}auto/index.html">了解 Android Auto</a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>  <!-- end .wrap -->
-  </div> <!-- end .landing-section -->
\ No newline at end of file
+    </div>
+  </div></div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:index/multiscreen"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>