Intro layout

public/_includes/_intro.jade

@@ -0,0 +1,7 @@
+.intro(style='\
+    background: #E6E7EC;\
+    padding: 40px;\
+    font-size: 22px;\
+    line-height: 32px;\
+    ')
+      | #{ intro }

public/docs/js/latest/guide/_data.json

@@ -10,11 +10,13 @@
   },
 
   "displaying-data": {
-    "title": "Displaying Data"
+    "title": "Displaying Data",
+    "intro": "Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML templates and Angular automatically updates the UI as data changes."
   },
 
   "user-input": {
-    "title": "User Input"
+    "title": "User Input",
+    "intro": "DOM events drive user input in Angular. You can use the native events you're used to like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements."
   },
 
   "making-components": {

public/docs/js/latest/guide/_layout.jade

@@ -7,6 +7,8 @@ html(lang="en" ng-app="angularIOApp")
     != partial("../../../../_includes/_main-nav")
     != partial("../../../../_includes/_docs-nav")
     != partial("../../../../_includes/_hero")
+    if intro
+      != partial("../../../../_includes/_intro")
 
     if banner
       != partial("../../../../_includes/_banner")
@@ -16,4 +18,4 @@ html(lang="en" ng-app="angularIOApp")
       != partial("../../../../_includes/_next-item")
 
     != partial("../../../../_includes/_footer")
-    != partial("../../../../_includes/_scripts-include")
+    != partial("../../../../_includes/_scripts-include")