Product page iteration (#342)

Adding some illustration and updating the content.

---------

Co-authored-by: Anna-Sutton <[email protected]>

Author: frankieroberto

app/assets/images/add-users.png

@@ -16,59 +16,48 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record N
 
           <!-- <p class="nhsuk-body">Some words here</p> -->
 
-          <p class="nhsuk-body">Used by NHS trusts, pharmacies and GPs.</p>
+          <p>Record COVID-19, flu, RSV and pertussis vaccinations.</p>
+
+          <p class="nhsuk-body">Used by community pharmacies, NHS trusts and GPs.</p>
 
           {{ button({
-            text: "Sign up for your pharmacy",
+            text: "Sign up for free",
             href: "/apply/start",
             classes: "nhsuk-button--reverse nhsuk-u-margin-bottom-3"
           }) }}
 
           <p class="nhsuk-u-margin-bottom-0">Or <a href="/okta-sign-in" class="nhsuk-link nhsuk-link--reverse">log in</a> if you've used it before</p>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet">
+      <div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet nhsuk-u-padding-top-6">
         <img class="app-homepage-illustration" src="/images/homepage-illustration.png" alt="" role="presentation" style="width: 100%;">
       </div>
     </div>
   </div>
 </div>
 <div class="app-section--white">
   <div class="nhsuk-width-container">
-    <div class="nhsuk-main-wrapper">
+    <div class="nhsuk-main-wrapper nhsuk-u-padding-bottom-4">
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-one-third">
-          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Efficient</h2>
-          <p>Save time by only capturing the essential information needed for an NHS vaccination record.</p>
+          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Free to use</h2>
+          <p class="">Created and owned by the NHS.</p>
         </div>
+
         <div class="nhsuk-grid-column-one-third">
-          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Integrated</h2>
-          <p>Every vaccination you record appears automatically in GP&nbsp;records and in the NHS App.</p>
+          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Connected</h2>
+          <p class="">Integrated with GP records and BSA payments.</p>
         </div>
         <div class="nhsuk-grid-column-one-third">
-          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Free to use</h2>
-          <p>Built and owned by the NHS. Funded centrally for all NHS organisations.</p>
+          <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Get access today</h2>
+          <p class="">Sign up and try it straight away. </p>
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div style="background-color: #005eb8; color: white;">
-<div class="nhsuk-width-container" id="find-out-more">
-  <div class="nhsuk-main-wrapper nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-4">
-    <div style="width: 100px; height: 100px; background-image: url('/images/pharmacist.jpg'); background-size: cover; border-radius: 50px; float: left;"></div>
-    <div style="margin-left: 150px; max-width: 400px;" class="nhsuk-body nhsuk-u-font-size-26 nhsuk-u-margin-top-2">
-      <blockquote class="nhsuk-u-padding-0 nhsuk-u-margin-0 nhsuk-u-margin-bottom-1">
-        “It's easy and quick to use. Our staff love it.”
-      </blockquote>
 
-      <div class="nhsuk-body nhsuk-u-font-size-19">– Sam Jenkins, Holloway Pharmacy</div>
-    </div>
-    <div style="clear:left;"></div>
-  </div>
-</div>
-</div>
 
 <div class="">
 
@@ -83,13 +72,11 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
           <span class="app-numbered-heading__title">Sign up</span>
         </h3>
         <div class="app-numbered-heading__content">
-          <p>Sign up with your NHS email and get an account straight away.</p>
-
-          <!-- <p>Signing up is quick and simple, whether you’re new to vaccinations or switching systems. </p> -->
+          <p>Sign up with your NHS email and get an account.</p>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-padding-left-8">
-        <!-- [Screenshot?] -->
+      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-0 nhsuk-u-padding-left-8 nhsuk-u-padding-left-4 nhsuk-u-padding-bottom-8">
+        <img src="/images/sign-up.png" alt="" style="max-width: 378px;">
       </div>
     </div>
 
@@ -104,8 +91,8 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
           <p>Set up accounts for your colleagues and add vaccine products.</p>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
-        <!-- [Screenshot?] -->
+      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-0 nhsuk-u-padding-left-8 nhsuk-u-padding-left-4 nhsuk-u-padding-bottom-8">
+        <img src="/images/add-users.png" alt="" style="max-width: 378px;">
       </div>
     </div>
 
@@ -116,13 +103,14 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
           <span class="app-numbered-heading__title">Record vaccinations</span>
         </h3>
         <div class="app-numbered-heading__content">
-          <p>Look up patients, check their vaccination history and record the vaccines given.</p>
+          <p>Check a patient’s history and record vaccinations you give. </p>
+
+          <p>These will automatically appear in the patient's GP record and in the NHS App. </p>
 
-          <!-- <p>Simple, quick and clinically approved vaccination recording. </p> -->
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
-        <!-- [Screenshot?] -->
+      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-0 nhsuk-u-padding-left-8 nhsuk-u-padding-left-4 nhsuk-u-padding-bottom-8">
+        <img src="/images/record-vaccinations.png" alt="" style="max-width: 378px;">
       </div>
     </div>
 
@@ -133,11 +121,11 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
           <span class="app-numbered-heading__title">Track performance</span>
         </h3>
         <div class="app-numbered-heading__content">
-          <p>See how many vaccines you are giving. Download data you need for reporting.</p>
+          <p>See how many vaccines you have given. Download data you need for reporting.</p>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
-        <!-- [Screenshot?] -->
+      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-0 nhsuk-u-padding-left-8 nhsuk-u-padding-left-4 nhsuk-u-padding-bottom-8">
+        <img src="/images/track-performance.png" alt="" style="max-width: 378px;">
       </div>
     </div>
 
@@ -149,49 +137,65 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
           <span class="app-numbered-heading__title">Get paid</span>
         </h3>
         <div class="app-numbered-heading__content">
-          <!-- <p><span class="nhsuk-tag nhsuk-tag--blue">Pharmacies</span></p> -->
-          <p>Pharmacies are paid automatically by the NHS Business Services Authority (BSA).
-          <!-- <span class="nhsuk-tag nhsuk-tag--blue">Pharmacies only</span> -->
-</p>
+          <p>Pharmacies are paid automatically by the NHS Business Services Authority through Manage Your Service (MYS).</p>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
-        <!-- [Screenshot?] -->
+      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-0 nhsuk-u-padding-left-8 nhsuk-u-padding-left-4 nhsuk-u-padding-bottom-4">
+        <img src="/images/get-paid.png" alt="" style="max-width: 378px;">
       </div>
     </div>
   </div>
 </div>
 
-<div class="app-section--white">
 
+
+<div class="app-section--white">
 <div class="nhsuk-width-container" id="find-out-more">
-  <div class="nhsuk-main-wrapper">
+  <div class="nhsuk-main-wrapper nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-4">
+
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-one-third">
-        <h3 class="nhsuk-heading-s">Helpdesk</h3>
-
-        <p>0333 038 4268<br>
-        <a href="mailto:[email protected]">[email protected]</a></p>
-
-        <p>Monday to Friday, 8am to 6pm</p>
-
-
+        <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
+          More than<br>
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">1.5 million</span><br> vaccinations recorded
+        </div>
       </div>
 
       <div class="nhsuk-grid-column-one-third">
-        <h3 class="nhsuk-heading-s">Training</h3>
-
-        <p>Regular online training sessions available.</p>
+        <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
+          Over<br>
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">13,000  users</span><br>
 
-        <p><a href="https://outlook.office365.com/book/[email protected]/">Book an online webinar</a></p>
+        </div>
+      </div>
+      <div class="nhsuk-grid-column-one-third">
+        <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
+          Used by<br>
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">215 NHS trusts</span><br>
 
+        </div>
       </div>
+    </div>
+  </div>
+</div>
+</div>
 
-      <div class="nhsuk-grid-column-one-third">
-        <h3 class="nhsuk-heading-s">Assurance</h3>
+<div style="background-color: #005eb8; color: white;">
+<div class="nhsuk-width-container" id="find-out-more">
+  <div class="nhsuk-main-wrapper nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-4">
 
-        <p>Fully complies with NHS standards for clinical safety, information governance and cybersecurity.</p>
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+<div style="width: 100px; height: 100px; background-image: url('/images/pharmacist.jpg'); background-size: cover; border-radius: 50px; float: left;"></div>
+      <div style="margin-left: 150px; max-width: 400px;" class="nhsuk-body nhsuk-u-font-size-26 nhsuk-u-margin-top-2">
+        <blockquote class="nhsuk-u-padding-0 nhsuk-u-margin-0 nhsuk-u-margin-bottom-1">
+          “It's easy and quick to use. Our staff love it.”
+        </blockquote>
 
+        <div class="nhsuk-body nhsuk-u-font-size-19">– Sam Jenkins, Holloway Pharmacy</div>
+      </div>
+      </div>
+      <div class="nhsuk-grid-column-one-third">
       </div>
     </div>
   </div>
@@ -200,25 +204,57 @@ <h3 class="nhsuk-heading-s">Assurance</h3>
 
 
 <div class="xapp-section--white">
+  <div class="nhsuk-width-container" id="find-out-more">
+    <div class="nhsuk-main-wrapper">
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
 
-<div class="nhsuk-width-container" id="find-out-more">
-  <div class="nhsuk-main-wrapper">
-    <div class="nhsuk-grid-row">
-      <div class="nhsuk-grid-column-two-thirds">
+          <h2 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">Switching from another pharmacy system?</h2>
 
-        <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-5">Pharmacies can sign up now</h2>
+          <p>You can switch systems at any time, and use different systems for different pharmacies.</p> 
+            
+          <p>You will still have access to your previous system for at least 6 months so you can download reports.</p>
+          
+          <p>Other questions? <a href="#">Get in touch</a>.</p>
 
-        <p>All community pharmacies in England offering COVID-19 or flu vaccinations can use this service for free.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-      <!-- <p>If you own or run a pharmacy:</p> -->
-      {{ actionLink({
-        text: "Sign up",
-        href: "/apply/start"
-      }) }}
+<div class="app-section--white">
+  <div class="nhsuk-width-container" id="find-out-more">
+    <div class="nhsuk-main-wrapper">
+      <div class="nhsuk-grid-row">
+
+        <div class="nhsuk-grid-column-one-third">
+          <h3 class="nhsuk-heading-s">Training</h3>
+
+          <p>Regular online training sessions available.</p>
+
+          <p><a href="https://outlook.office365.com/book/[email protected]/">Book an online webinar</a></p>
+
+        </div>
+
+        <div class="nhsuk-grid-column-one-third">
+          <h3 class="nhsuk-heading-s">Assurance</h3>
 
+          <p>Fully complies with NHS standards for clinical safety, information governance and cybersecurity.</p>
+
+        </div>
+        <div class="nhsuk-grid-column-one-third">
+          <h3 class="nhsuk-heading-s">Helpdesk</h3>
+
+          <p>0333 038 4268<br>
+          <a href="mailto:[email protected]">[email protected]</a></p>
+
+          <p>Monday to Friday, 8am to 6pm</p>
+
+
+        </div>
       </div>
     </div>
   </div>
 </div>
-</div>
 {% endblock %}