From e4347772e690af949265bc006d1318b904b408fe Mon Sep 17 00:00:00 2001
From: Vicky Teinaki <vicky.teinaki@gmail.com>
Date: Thu, 21 Nov 2024 09:35:07 +0000
Subject: [PATCH] Changed guides page as reference for site (#136)

As part of reviewing the information architecture, my hypothesis is that
making the guides page work harder can help us make some decisions about
the site.

It also includes the getting started section links (as does the GOV.UK
Prototype Kit guide) which I hypothesis helps with findability.

Not included:
* templates guidance page - this could be added as a link here and moved
into how-tos, or removed
* any reference to the NHS Design system - this is done on the GOV.Uk
Prototype Kit page at the bottom as a section
* the other parts of the site - these are covered in separate tickets.

This may also help resolved #9 re-findability of how-to guides.

| Before | After |
| -- | -- |
| ![original page with one
column](https://github.com/user-attachments/assets/14862a68-c33d-4949-8ee2-8686615f8960)
| ![new page with two columns and including getting started
section](https://github.com/user-attachments/assets/00c0520e-76d8-430e-a897-71beff06b5db)
|

---------

Co-authored-by: Frankie Roberto <frankie@frankieroberto.com>
---
 app/views/how-tos/index.html | 41 ++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html
index 65988c3b..06435336 100755
--- a/app/views/how-tos/index.html
+++ b/app/views/how-tos/index.html
@@ -14,13 +14,35 @@
 {% block content %}
   <div class="nhsuk-grid-row">
 
-    <div class="nhsuk-grid-column-two-thirds">
+    <div class="nhsuk-grid-column-full">
 
+<div class="nhsuk-u-reading-width">
       <h1>Guides</h1>
 
       <p class="nhsuk-lede-text">These guides will show you how to use the prototype kit, from creating a simple page to building complex user journeys.</p>
+</div>
+    </div>
+
+</div>
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-one-half">
+      <h2 class="nhsuk-heading-s">Download and install</h2>
 
-      <h2>Build a basic prototype</h2>
+      <ul class="nhsuk-list">
+        <li>
+          <a href="/install/index">Install guide</a>
+        </li>
+        <li>
+          <a href="/install/advanced">Advanced install guide</a>
+        </li>
+        <li>
+          <a href="/install/nhs-england-windows-laptops">Set up the prototype kit on an NHS England Windows laptop</a>
+        </li>
+      </ul>
+
+
+      <h2 class="nhsuk-heading-s">Build a basic prototype tutorial</h2>
       <ul class="nhsuk-list">
         <li>
           <a href="/how-tos/build-basic-prototype/index">Before you start the tutorial</a>
@@ -53,36 +75,33 @@ <h2>Build a basic prototype</h2>
         </li>
       </ul>
 
+    </div>
+    <div class="nhsuk-grid-column-one-half">
 
-      <h2>Learn the basics</h2>
+        <h2 class="nhsuk-heading-s">General use</h2>
 
       <ul class="nhsuk-list">
         <li><a href="/how-tos/making-pages">Making pages</a></li>
         <li><a href="/how-tos/adding-assets">Adding CSS, JavaScript and images</a></li>
         <li><a href="/how-tos/components">Using components</a></li>
-      </ul>
-
-      <h2>Create journeys with data</h2>
-
-      <ul class="nhsuk-list">
         <li><a href="/how-tos/passing-data-page">Passing data page to page</a></li>
         <li><a href="/how-tos/branching">Branching</a> – show a different page based on user input</li>
       </ul>
 
-      <h2>Share your prototype</h2>
+        <h2 class="nhsuk-heading-s">Share your prototype</h2>
 
       <ul class="nhsuk-list">
         <li><a href="/how-tos/git">Setting up Git</a></li>
         <li><a href="/how-tos/publish-your-prototype-online">Publish your prototype online</a></li>
       </ul>
 
-      <h2>Updating the kit</h2>
+        <h2 class="nhsuk-heading-s">Updating the kit</h2>
 
       <ul class="nhsuk-list">
         <li><a href="/how-tos/updating-the-kit">Updating the kit</a></li>
       </ul>
 
-      <h2>Advanced usage</h2>
+        <h2 class="nhsuk-heading-s">Advanced use</h2>
 
       <ul class="nhsuk-list">
         <li><a href="/how-tos/switching-from-govuk-prototype-kit">Switching from the GOV.UK Prototype Kit</a></li>