Build new homepage and menu structure in prototype

Update share icon and hide icons from screen-readers Add feedback link to Prototype Update homepage title Change "Data format" to "Data schema"
i-dot-ai · Apr 19, 2024 · dd70db8 · dd70db8
1 parent 5a614cf
commit dd70db8
Show file tree

Hide file tree

Showing 16 changed files with 510 additions and 112 deletions.
diff --git a/frontend/style.scss b/frontend/style.scss
@@ -1,7 +1,7 @@
 $govuk-assets-path: "govuk-assets/";
 $govuk-font-family: sans-serif;
 
-$iai-colour-pink: #b62777;
+$iai-colour-pink: #C50878;
 
 @import "node_modules/govuk-frontend/dist/govuk/all";
 

diff --git a/prototype/app/assets/sass/application.scss b/prototype/app/assets/sass/application.scss
@@ -3,7 +3,10 @@
 // https://prototype-kit.service.gov.uk/docs/adding-css-javascript-and-images
 //
 
-$iai-colour-pink: #b62777;
+@import "node_modules/@x-govuk/govuk-prototype-components/x-govuk/all";
+
+$govuk-brand-colour: #C50878;
+$iai-colour-pink: #C50978;
 
 .govuk-header__container {
   border-color: $iai-colour-pink;
@@ -13,6 +16,46 @@ $iai-colour-pink: #b62777;
   color: white;
 }
 
+/* HOMEPAGE */
+.x-govuk-masthead--pink {
+  background-color: $iai-colour-pink;
+}
+.x-govuk-masthead--pink .govuk-phase-banner {
+  border-bottom-color: white;
+}
+.x-govuk-masthead--pink .govuk-tag {
+  background-color: white;
+  color: $iai-colour-pink;
+}
+.x-govuk-masthead--pink .govuk-button {
+  box-shadow: 0 2px 0 govuk-colour("dark-grey");
+  color: $iai-colour-pink;
+}
+.x-govuk-primary-navigation__link {
+  color: govuk-colour("dark-grey") !important;
+}
+.x-govuk-primary-navigation__item--current {
+  border-bottom-color: govuk-colour("dark-grey");
+}
+
+.iai-processlist {
+  padding: 0;
+}
+.iai-processlist__item {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  margin: 3rem 0;
+}
+.iai-processlist__item svg {
+  color: $iai-colour-pink;
+  width: 5rem;
+}
+.iai-processlist__text {
+  margin-left: 1.5rem;
+}
+
+
 /** START PAGE **/
 .iai-key-finding {
   align-items: center;

diff --git a/prototype/app/config.json b/prototype/app/config.json
@@ -1,3 +1,3 @@
 {
-  "serviceName": "Consultations Tool"
+  "serviceName": "Consultation analyser"
 }
diff --git a/prototype/app/views/data-format.html b/prototype/app/views/data-format.html
@@ -0,0 +1,16 @@
+{% extends "layouts/main.html" %}
+
+{% set pageTitle = "Data schema" %}
+
+{% block content %}
+
+<div class="govuk-width-container ">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">Data schema</h1>
+      <p>(The data schema is generated in main site. Not displayed here to avoid displaying an outdated version.)</p>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
diff --git a/prototype/app/views/demo-consultation.html b/prototype/app/views/demo-consultation.html
@@ -1,4 +1,4 @@
-{% extends "layouts/main.html" %}
+{% extends "layouts/signed-in.html" %}
 
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

diff --git a/prototype/app/views/index.html b/prototype/app/views/index.html
@@ -3,33 +3,101 @@
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 
-{% set pageName="Home" %}
-
-{% block pageTitle %}Home{% endblock %}
+{% set pageTitle = "" %}
 
 {% block content %}
+<style>
 
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-full">
-    <h1 class="govuk-heading-l">Consultations frontend prototype</h1>
-
-    <h2 class="govuk-heading-m">Demo consultation</h2>
-    <p>The demo consultation shows how each page will look and what features will be available.</p>
-    {{ govukButton({
-      text: "View consultation",
-      href: "/demo-consultation",
-      isStartButton: true
-    }) }}
-
-    <h2 class="govuk-heading-m govuk-!-margin-top-3">Upload consultation</h2>
-    <p>This is an MVP version just for use by the i.AI team currently. Longer term this can be expanded to be useable by others. At which point we'll need to consider what additional data/instructions will be required.</p>
-    {{ govukButton({
-      text: "Upload consultation",
-      classes: "govuk-button--secondary",
-      href: "/upload"
-    }) }}
+  .govuk-main-wrapper {
+    padding-top: 0;
+  }
+  .govuk-phase-banner {
+    border-bottom: 0;
+  }
+  .govuk-phase-banner__text .govuk-link {
+    /*color: white;*/
+  }
+</style>
+<div class="x-govuk-masthead x-govuk-masthead--pink">
+  <div class="govuk-width-container">
+    {#
+    <div class="govuk-phase-banner x-govuk-phase-banner--inverse">
+      <p class="govuk-phase-banner__content">
+        <strong class="govuk-tag govuk-phase-banner__content__tag x-govuk-tag--inverse">
+          Prototype
+        </strong>
+        <span class="govuk-phase-banner__text">
+          This is a new service – your <a class="govuk-link" href="#feedback">feedback</a> will help us to improve it.
+        </span>
+      </p>
+    </div>
+    #}
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds-from-desktop">
+        <h1 class="x-govuk-masthead__title">
+          Use machine learning to help you understand consultation responses
+        </h1>
+        <p class="x-govuk-masthead__description">
+          Work with i.AI to use the prototype Consultation analyser to see how it could work for your consultation.
+        </p>
+        <a href="/get-involved" role="button" draggable="false" class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
+          Get involved
+          <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+            <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 
+{# icons from https://iconoir.com/ #}
+{% set processList = [
+  {
+    title: "Agree to share your data",
+    text: 'Before you can use our tool you need to agree to <a href="/data-sharing">data sharing</a>.',
+    icon: '<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 6.5L8.5 10.5" stroke="currentColor" stroke-width="1.5"></path><path d="M8.5 13.5L15.5 17.5" stroke="currentColor" stroke-width="1.5"></path></svg>'
+  },
+  {
+    title: "Upload your data",
+    text: "You will be given a log in to securely upload your data to the tool.",
+    icon: '<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M20 13V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15V3M12 3L8.5 6.5M12 3L15.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+  },
+  {
+    title: "Themes are created",
+    text: 'We run a process to create the themes. Find out <a href="/how-it-works">how it works</a>.',
+    icon: '<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M14 20.4V14.6C14 14.2686 14.2686 14 14.6 14H20.4C20.7314 14 21 14.2686 21 14.6V20.4C21 20.7314 20.7314 21 20.4 21H14.6C14.2686 21 14 20.7314 14 20.4Z" stroke="currentColor" stroke-width="1.5"></path><path d="M3 20.4V14.6C3 14.2686 3.26863 14 3.6 14H9.4C9.73137 14 10 14.2686 10 14.6V20.4C10 20.7314 9.73137 21 9.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="currentColor" stroke-width="1.5"></path><path d="M14 9.4V3.6C14 3.26863 14.2686 3 14.6 3H20.4C20.7314 3 21 3.26863 21 3.6V9.4C21 9.73137 20.7314 10 20.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z" stroke="currentColor" stroke-width="1.5"></path><path d="M3 9.4V3.6C3 3.26863 3.26863 3 3.6 3H9.4C9.73137 3 10 3.26863 10 3.6V9.4C10 9.73137 9.73137 10 9.4 10H3.6C3.26863 10 3 9.73137 3 9.4Z" stroke="currentColor" stroke-width="1.5"></path></svg>'
+  },
+  {
+    title: "View the themes",
+    text: "Sign in to view the themes and explore responses in each theme.",
+    icon: '<svg viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M20.5 20.5L22 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15 18C15 19.6569 16.3431 21 18 21C18.8299 21 19.581 20.663 20.1241 20.1185C20.6654 19.5758 21 18.827 21 18C21 16.3431 19.6569 15 18 15C16.3431 15 15 16.3431 15 18Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 12V5.74853C20 5.5894 19.9368 5.43679 19.8243 5.32426L16.6757 2.17574C16.5632 2.06321 16.4106 2 16.2515 2H4.6C4.26863 2 4 2.26863 4 2.6V21.4C4 21.7314 4.26863 22 4.6 22H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 2V5.4C16 5.73137 16.2686 6 16.6 6H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+  },
+  {
+    title: "Share your experience with i.AI",
+    text: 'This tool is a prototype so to access it you need to agree to <a href="/user-research">user research</a>.',
+    icon: '<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" aria-hidden="true"><path d="M8 12L11 15L16 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+  }
+] %}
+
+<div class="govuk-width-container govuk-!-margin-top-5 govuk-!-padding-top-5">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+      <h2 class="govuk-heading-l">How the process works</h2>
+      <ul class="iai-processlist">
+        {% for process in processList %}
+          <li class="iai-processlist__item">
+            {{process.icon|safe}}
+            <div class="iai-processlist__text">
+              <h3 class="govuk-heading-m govuk-!-margin-0">{{process.title}}</h3>
+              <p class="govuk-!-margin-bottom-1 govuk-!-margin-top-1">{{process.text|safe}}</p>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
   </div>
 </div>
 
+
 {% endblock %}