Update default index page (#423)

Following #419, this updates the default index page to give clearer
guidance on how to:

* set the service name (which is now set to "Service name goes here" by
default)
* edit the index page
* use the external links and included example templates

Inspired by the GOV.UK Prototype kit default index page.

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Remove example page template with lots of content examples on it ([PR 420](https://github.com/nhsuk/nhsuk-prototype-kit/pull/420))
 - Update default service name ([PR 419](https://github.com/nhsuk/nhsuk-prototype-kit/pull/419))
 - Changed all references from 'NHS.UK prototype kit' to 'NHS prototype kit'
+- Update default index page ([PR 423](https://github.com/nhsuk/nhsuk-prototype-kit/pull/423))
 
 ## 5.1.0 - 12 November 2024
 

app/views/index.html

@@ -2,72 +2,63 @@
 
 <!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
 
-<!-- Extends the layout from /views/layout.html -->
+<!-- Extends the layout from /app/views/layout.html -->
 {% extends 'layout.html' %}
 <!--
-  In /views/layout.html you can:
+  In /app/views/layout.html you can:
     - change the header and footer
     - add custom CSS and JavaScript
 -->
 
 <!-- Set the page title -->
 {% block pageTitle %}
-  NHS prototype kit
+  {{ serviceName }}
 {% endblock %}
 
 <!-- For adding a breadcrumb or back link -->
 <!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
 {% block beforeContent %}
 {% endblock %}
 
-
 <!-- For adding page content -->
 <!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
 
-      <!-- Change the page title here -->
-      <h1>
+      <!-- You can delete the lines below -->
+      <h2 class="nhsuk-heading-l">
         NHS prototype kit
         <span class="nhsuk-caption-xl nhsuk-caption--bottom">Version {{version}}</span>
-      </h1>
+      </h2>
+      <hr>
+
 
       <!-- Add your content here -->
       <!-- Styles and components can be found at https://service-manual.nhs.uk/design-system -->
 
-      <p class="nhsuk-lede-text">
-        This kit lets you rapidly create HTML prototypes of NHS services.
-      </p>
-
-      <hr>
+      <h1 class="nhsuk-heading-xl">
+        {{ serviceName }}
+      </h1>
 
-      <h2>
-        About this page
-      </h2>
+      <p>Set the service name for your prototype by editing <strong>/app/config.js</strong>.</p>
 
       <p>
-        Use this page as the index for your project.
-      </p>
-
-      <p>
-        You'll find the code for this page at <strong>/app/views/index.html</strong>.
+        This is the index page for your prototype. You can find it at <strong>/app/views/index.html</strong>.
       </p>
 
       <hr>
 
-      <h2>
+      <h2 class="nhsuk-heading-l">
         Get started
       </h2>
 
-      <p>Get started by using the:</p>
-
-      <ul>
+      <ul class="nhsuk-list nhsuk-list--bullet">
         <li>
-          <a href="https://prototype-kit.service-manual.nhs.uk/how-tos">how to guides</a>
+          <a href="https://prototype-kit.service-manual.nhs.uk/how-tos">NHS prototype kit guides</a> – including a tutorial
         </li>
         <li>
-          code snippets for styles and components from the <a href="https://service-manual.nhs.uk/design-system">NHS digital service manual</a>
+          <a href="https://service-manual.nhs.uk/design-system">NHS digital service manual</a> – for code snippets and guidance on using NHS styles, components and patterns
         </li>
       </ul>
 

app/views/layout.html

@@ -1,6 +1,6 @@
-<!-- 
+<!--
   This is the main layout where you can:
-    - change the header and footer 
+    - change the header and footer
     - add custom CSS and JavaScript
 -->
 
@@ -41,8 +41,8 @@
         "label": "Home"
       },
       {
-        "URL": "/page-example",
-        "label": "Example page"
+        "URL": "/docs/page-templates",
+        "label": "Example page templates"
       }
     ]
   })}}