From 15cfb34856ff977fce63ef14cda79537f7a6cb87 Mon Sep 17 00:00:00 2001
From: Joe Lanman <joelanman@gmail.com>
Date: Fri, 6 Jul 2018 11:23:48 +0100
Subject: [PATCH] redesign template pages section, add step by step

---
 docs/views/tutorials-and-examples.html | 49 +++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
index 5451a92d9b..86fd36b907 100644
--- a/docs/views/tutorials-and-examples.html
+++ b/docs/views/tutorials-and-examples.html
@@ -116,14 +116,21 @@ <h3 class="govuk-heading-s">Advanced usage</h3>
   </div>
 
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
+    <div class="govuk-grid-column-one-half">
       <h2 class="govuk-heading-m">Page templates</h2>
       <p>
-        Use these as the basis for your prototypes. We recommend making copies of the files rather than directly editing them.
+        You can find these templates in your prototype folder, in /docs/views/examples.
       </p>
       <p>
-        You can find them in your prototype folder, in /docs/views/examples
+        Copy and paste the pages you need to your /app/views folder to make your prototypes.
       </p>
+    </div>
+  </div>
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-half">
+
+      <h3 class="govuk-heading-s">Service pages</h3>
 
       <ul class="govuk-list govuk-list--bullet">
         <li>
@@ -134,11 +141,6 @@ <h2 class="govuk-heading-m">Page templates</h2>
             Blank (non-GOV.UK)
           </a>
         </li>
-        <li>
-          <a href="/docs/examples/start-page">
-            Start page
-          </a>
-        </li>
         <li>
           <a href="/docs/examples/template-question-page-blank">
             Question page
@@ -166,6 +168,37 @@ <h2 class="govuk-heading-m">Page templates</h2>
         </li>
       </ul>
 
+    </div>
+
+    <div class="govuk-grid-column-one-half">
+
+      <h3 class="govuk-heading-s">GOV.UK publishing platform pages</h3>
+
+      <p>
+        These pages live on the GOV.UK publishing platform.
+      </p>
+
+      <p>
+        Your team will need to <a href="#">contact GOV.UK publishing</a> to discuss setting up these pages, before your Alpha assessment.
+      </p>
+
+      <ul class="govuk-list govuk-list--bullet">
+      <li>
+        <a href="/docs/examples/start-page">
+          Start page
+        </a>
+      </li>
+      <li>
+        <a href="/docs/examples/step-by-step">
+          Step by step navigation
+        </a>
+      </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
       <h2 class="govuk-heading-m">GOV.UK Design System</h2>
 
       <p>