Add "Learn" section.

Change-Id: I5bf144ad629c0ecddd9088a78284086e31f6c53b
diff --git a/css/landing-page.css b/css/landing-page.css
index e57d89b..210a4dd 100755
--- a/css/landing-page.css
+++ b/css/landing-page.css
@@ -21,6 +21,13 @@
     font-weight: 700;
 }
 
+a.anchor {
+    display: block;
+    position: relative;
+    top: -40px;
+    visibility: hidden;
+}
+
 .topnav {
     font-size: 16px;
 }
@@ -114,13 +121,13 @@
 
 .content-section-a {
     padding: 30px 30px;
-    background-color: #f8f8f8;
 }
 
 .content-section-b {
     padding: 30px 30px;
     border-top: 1px solid #e7e7e7;
     border-bottom: 1px solid #e7e7e7;
+    background-color: #f8f8f8;
 }
 
 .content-footer {
diff --git a/index.html b/index.html
index eb5788b..852608b 100755
--- a/index.html
+++ b/index.html
@@ -68,6 +68,9 @@
                         <a href="#concept">Concept</a>
                     </li>
                     <li>
+                        <a href="#learn">Learn</a>
+                    </li>
+                    <li>
                         <a href="#history">History</a>
                     </li>
                     <li>
@@ -93,7 +96,7 @@
 
 
     <!-- Header -->
-    <a name="about"></a>
+    <a class="anchor" name="about"></a>
     <div class="intro-header">
         <div class="container-fluid">
 
@@ -114,7 +117,7 @@
 
     <!-- Page Content -->
 
-    <a  name="start"></a>
+    <a class="anchor" name="start"></a>
     <div class="content-section-a">
 
         <div class="container-fluid">
@@ -175,7 +178,7 @@
     </div>
     <!-- Get Started -->
 
-    <a name="concept"></a>
+    <a class="anchor" name="concept"></a>
     <div class="content-section-b">
 
         <div class="container-fluid">
@@ -406,11 +409,70 @@
     </div>
     <!-- Memory footprint -->
 
-    <a name="history"></a>
+    <a class="anchor" name="learn"></a>
     <div class="content-section-a">
 
         <div class="container-fluid">
 
+            <div class="row">
+                <div class="col-lg-5 col-sm-6">
+                    <hr class="section-heading-spacer">
+                    <div class="clearfix"></div>
+                    <h2 class="section-heading">Learn Eclipse Collections with Kata</h2>
+                    <p class="lead">
+                        Check out the <a href="https://github.com/eclipse/eclipse-collections-kata">Eclipse Collections Kata</a>, a fun way to help you learn idiomatic Eclipse Collections usage.
+                        This particular kata is set up as a series of unit tests which fail.
+                        Your task is to make them pass, using Eclipse Collections.
+                    </p>
+                </div>
+                <div class="col-lg-7 col-sm-6">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a href="#exercise" data-toggle="tab">Sample Exercise</a></li>
+                        <li><a href="#solution" data-toggle="tab">Sample Solution</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div class="tab-pane fade in active" id="exercise">
+                            <pre  class="prettyprint lang-java">
+@Test
+public void getFirstNamesOfAllPeople()
+{
+  MutableList&lt;Person&gt; people = this.people;
+  MutableList&lt;String&gt; firstNames = null; //Replace null, with a transformation method on MutableList.
+  MutableList&lt;String&gt; expectedFirstNames =
+    Lists.mutable.with("Mary", "Bob", "Ted", "Jake", "Barry", "Terry", "Harry", "John");
+  Assert.assertEquals(expectedFirstNames, firstNames);
+}</pre>
+                        </div>
+                        <div class="tab-pane fade" id="solution">
+                            <pre  class="prettyprint lang-java">
+@Test
+public void getFirstNamesOfAllPeople()
+{
+  MutableList&lt;Person&gt; people = this.people;
+  MutableList&lt;String&gt; firstNames = people.collect(Person::getFirstName);
+  MutableList&lt;String&gt; expectedFirstNames =
+    Lists.mutable.with("Mary", "Bob", "Ted", "Jake", "Barry", "Terry", "Harry", "John");
+  Assert.assertEquals(expectedFirstNames, firstNames);
+}</pre>
+                        </div>
+                    </div>
+                    <!-- /.tab-content -->
+                </div>
+                <!-- /.col -->
+            </div>
+            <!-- /.row -->
+
+        </div>
+        <!-- /.container -->
+
+    </div>
+    <!-- Kata -->
+
+    <a class="anchor" name="history"></a>
+    <div class="content-section-b">
+
+        <div class="container-fluid">
+
             <h2 class="section-heading">History of Eclipse Collections</h2>
             <p class="lead">
                 The origin of Eclipse Collections was started off as a collections framework named Caramel at Goldman Sachs in 2004.
@@ -444,7 +506,7 @@
     </div>
     <!-- Introduction  -->
 
-    <a  name="contribute"></a>
+    <a class="anchor" name="contribute"></a>
     <div class="content-footer">
 
         <div class="container-fluid">
diff --git a/ja/index.html b/ja/index.html
index f0ad8dc..6693834 100644
--- a/ja/index.html
+++ b/ja/index.html
@@ -69,6 +69,9 @@
                     <a href="#concept">Concept</a>
                 </li>
                 <li>
+                    <a href="#learn">Learn</a>
+                </li>
+                <li>
                     <a href="#history">History</a>
                 </li>
                 <li>
@@ -94,7 +97,7 @@
 
 
 <!-- Header -->
-<a name="about"></a>
+<a class="anchor" name="about"></a>
 <div class="intro-header">
     <div class="container-fluid">
 
@@ -115,7 +118,7 @@
 
 <!-- Page Content -->
 
-<a  name="start"></a>
+<a class="anchor" name="start"></a>
 <div class="content-section-a">
 
     <div class="container-fluid">
@@ -176,7 +179,7 @@
 </div>
 <!-- Get Started -->
 
-<a name="concept"></a>
+<a class="anchor" name="concept"></a>
 <div class="content-section-b">
 
     <div class="container-fluid">
@@ -406,11 +409,72 @@
 </div>
 <!-- Memory footprint -->
 
-<a name="history"></a>
+<a class="anchor" name="learn"></a>
 <div class="content-section-a">
 
     <div class="container-fluid">
 
+        <div class="row">
+            <div class="col-lg-5 col-sm-6">
+                <hr class="section-heading-spacer">
+                <div class="clearfix"></div>
+                <h2 class="section-heading">Kataで学ぶEclipse Collections</h2>
+                <p class="lead">
+                    <a href="https://github.com/eclipse/eclipse-collections-kata">Eclipse Collections Kata</a>を使うと
+                    Eclipse Collectionsの使用法を楽しく学ぶことができます。
+                    Eclipse Collections Kataでは、Eclipse Collectionsを使って
+                    フェイルした状態のユニットテストをひとつひとつパスしていきます。
+                    日本の武道の「型(形)」のように繰り返し練習することで基本的な使用法を学んでみましょう。
+                </p>
+            </div>
+            <div class="col-lg-7 col-sm-6">
+                <ul class="nav nav-tabs">
+                    <li class="active"><a href="#exercise" data-toggle="tab">Sample Exercise</a></li>
+                    <li><a href="#solution" data-toggle="tab">Sample Solution</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div class="tab-pane fade in active" id="exercise">
+                            <pre  class="prettyprint lang-java">
+@Test
+public void getFirstNamesOfAllPeople()
+{
+  MutableList&lt;Person&gt; people = this.people;
+  MutableList&lt;String&gt; firstNames = null; //Replace null, with a transformation method on MutableList.
+  MutableList&lt;String&gt; expectedFirstNames =
+    Lists.mutable.with("Mary", "Bob", "Ted", "Jake", "Barry", "Terry", "Harry", "John");
+  Assert.assertEquals(expectedFirstNames, firstNames);
+}</pre>
+                    </div>
+                    <div class="tab-pane fade" id="solution">
+                            <pre  class="prettyprint lang-java">
+@Test
+public void getFirstNamesOfAllPeople()
+{
+  MutableList&lt;Person&gt; people = this.people;
+  MutableList&lt;String&gt; firstNames = people.collect(Person::getFirstName);
+  MutableList&lt;String&gt; expectedFirstNames =
+    Lists.mutable.with("Mary", "Bob", "Ted", "Jake", "Barry", "Terry", "Harry", "John");
+  Assert.assertEquals(expectedFirstNames, firstNames);
+}</pre>
+                    </div>
+                </div>
+                <!-- /.tab-content -->
+            </div>
+            <!-- /.col -->
+        </div>
+        <!-- /.row -->
+
+    </div>
+    <!-- /.container -->
+
+</div>
+<!-- Kata -->
+
+<a class="anchor" name="history"></a>
+<div class="content-section-b">
+
+    <div class="container-fluid">
+
         <h2 class="section-heading">Eclipse Collectionsの歴史</h2>
         <p class="lead">
             Eclipse Collectionsは、2004年にゴールドマン・サックス社内製のCaramelと呼ばれるコレクションフレームワークから始まりました。
@@ -442,7 +506,7 @@
 </div>
 <!-- Introduction  -->
 
-<a  name="contribute"></a>
+<a class="anchor" name="contribute"></a>
 <div class="content-footer">
 
     <div class="container-fluid">