From 7173dd856d7f8f3fb5c9dd1d151d4e48cdfd4348 Mon Sep 17 00:00:00 2001
From: David Evans <xd.davidevans@gmail.com>
Date: Mon, 9 Feb 2026 14:02:03 +0000
Subject: [PATCH] Add anchor links and evidence section to product pages

- product-page: Add anchor IDs to sections for contents list navigation
- product-page: Add evidence and documentation section above contact card
- product-detail: Change all cards to single column in two-thirds width grid

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/views/current/product-detail.html | 100 +++++++++++++++++------
 app/views/current/product-page.html   | 111 ++++++++++++++++++++++++--
 2 files changed, 179 insertions(+), 32 deletions(-)

diff --git a/app/views/current/product-detail.html b/app/views/current/product-detail.html
index 2eaad8a..51b81a6 100644
--- a/app/views/current/product-detail.html
+++ b/app/views/current/product-detail.html
@@ -76,7 +76,12 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-2">
     {
       href: "#evidence",
       text: "Evidence and documents"
+    },
+      {
+      href: "#contact",
+      text: "Evaluation contact"
     }
+
   ]
 }) }}
     
@@ -190,10 +195,37 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
     </div>
 
     </div>
-  <div class="nhsuk-grid-column-one-third nhsuk-u-padding-left-6">
+  <div class="nhsuk-grid-column-one-third">
+    
+ 
 
-    {# Quick Links #}
     
+    <div class="nhsuk-u-margin-top-4" id="evidence">
+
+        <h3 class="nhsuk-card__heading nhsuk-heading-s">
+          Related resources
+        </h3>
+        
+        <ul class="nhsuk-list">
+          <li>
+            <a href="#">Product brochure (PDF)</a>
+          </li>
+          
+         
+          <li>
+            <a href="#">Clinical trial publication</a>
+          </li>
+          <li>
+            <a href="#">Safety data sheet</a>
+          </li>
+          <li>
+            <a href="#">Training materials</a>
+          </li>
+        </ul>
+      
+    </div>
+
+  
 
   </div>
 </div>
@@ -202,17 +234,15 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
 {# NHS TRUST TRIALS - CHARTS FIRST             #}
 {# ============================================ #}
 <div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="trials">
-  <div class="nhsuk-grid-column-full">
-    
+  <div class="nhsuk-grid-column-two-thirds">
+
     <hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-5">
-    
+
     <h2 class="nhsuk-heading-l">NHS trust trials at a glance</h2>
     <p class="nhsuk-body-l nhsuk-u-margin-bottom-5">18 NHS trusts have trialled this product. Click any section for details.</p>
 
-    <div class="nhsuk-grid-row">
-      
       {# Outcome chart #}
-      <div class="nhsuk-grid-column-one-third">
+      <div class="nhsuk-u-margin-bottom-4">
         <div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('trial-list').scrollIntoView({behavior: 'smooth'});">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Trial outcomes</h3>
@@ -248,8 +278,8 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Trial outcomes</h3>
       </div>
 
       {# Regional chart #}
-      <div class="nhsuk-grid-column-one-third">
-        <div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('regional-breakdown').scrollIntoView({behavior: 'smooth'});">
+      <div class="nhsuk-u-margin-bottom-4">
+        <div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('trial-list').scrollIntoView({behavior: 'smooth'});">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">By NHS region</h3>
             
@@ -303,7 +333,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">By NHS region</h3>
       </div>
 
       {# Trust type chart #}
-      <div class="nhsuk-grid-column-one-third">
+      <div class="nhsuk-u-margin-bottom-4">
         <div class="nhsuk-card nhsuk-card--clickable" style="text-align: center; cursor: pointer;" onclick="document.getElementById('contacts').scrollIntoView({behavior: 'smooth'});">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
@@ -336,7 +366,6 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
         </div>
       </div>
 
-    </div>
   </div>
 </div>
 
@@ -345,8 +374,8 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Willing to discuss</h3>
 {# DETAILED TRIAL LIST                          #}
 {# ============================================ #}
 <div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="trial-list">
-  <div class="nhsuk-grid-column-full">
-    
+  <div class="nhsuk-grid-column-two-thirds">
+
     <h2 class="nhsuk-heading-l">Individual trust trials</h2>
     <p class="nhsuk-body">Click on any trust to see their full trial report and contact details.</p>
 
@@ -359,10 +388,9 @@ <h2 class="nhsuk-heading-l">Individual trust trials</h2>
     </div>
 
     {# Trial cards - new format #}
-    <div class="nhsuk-grid-row">
-      
+
       {# Trust 1 - Manchester #}
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
+      <div class="nhsuk-u-margin-bottom-4" id="contacts">
         <div class="nhsuk-card">
           <div class="nhsuk-card__content">
             
@@ -424,7 +452,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
       </div>
 
       {# Trust 2 - Guy's and St Thomas' #}
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
+      <div class="nhsuk-u-margin-bottom-4">
         <div class="nhsuk-card">
           <div class="nhsuk-card__content">
             
@@ -486,7 +514,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
       </div>
 
       {# Trust 3 - Birmingham #}
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
+      <div class="nhsuk-u-margin-bottom-4">
         <div class="nhsuk-card">
           <div class="nhsuk-card__content">
             
@@ -548,7 +576,7 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
       </div>
 
       {# Trust 4 - Leeds (Under review) #}
-      <div class="nhsuk-grid-column-one-half nhsuk-u-margin-bottom-4">
+      <div class="nhsuk-u-margin-bottom-4">
         <div class="nhsuk-card">
           <div class="nhsuk-card__content">
             
@@ -601,12 +629,6 @@ <h4 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Contact for peer discussion<
         </div>
       </div>
 
-   
-
-    
-
-    </div>
-
     <p class="nhsuk-body">
       <a href="#" class="nhsuk-link">Show all 18 trust trials →</a>
     </p>
@@ -659,4 +681,30 @@ <h2 class="nhsuk-heading-l">Evidence and documentation</h2>
   </div>
 </div>
 
+
+ {# Contact Information Card #}
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+    {% from "card/macro.njk" import card %}
+
+{% set cardDescriptionHtml %}
+  <ul>
+    <li>you disagree with with something on this page</li>
+    <li>you have a query about something on this page</li>
+    <li>you would like to amend something on this page</li>
+    
+  </ul>
+  <p>In all instances, contact the team on 0330 2234 776 or email: <a href="">enquiries@dhsc.gov.uk</a></p>
+{% endset %}
+
+<div id="contact">
+{{ card({
+  type: "non-urgent",
+  heading: "You can contact us if:",
+  descriptionHtml: cardDescriptionHtml
+}) }}
+</div>
+  </div>
+</div>
+
 {% endblock %}
\ No newline at end of file
diff --git a/app/views/current/product-page.html b/app/views/current/product-page.html
index c055639..e128353 100644
--- a/app/views/current/product-page.html
+++ b/app/views/current/product-page.html
@@ -44,7 +44,41 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">
       <strong class="nhsuk-tag nhsuk-tag--green">Clinical trial available</strong>
     </div>
 
-      {# Supplier Information #}
+
+    {{ contentsList({
+  items: [
+    {
+      href: "#trials",
+      text: "Trust trials"
+      
+    },
+    {
+      href: "#costs",
+      text: "Cost breakdown"
+    },
+    {
+      href: "#contacts",
+      text: "Trust contacts"
+    }
+    ,
+    {
+      href: "#tech-spec",
+      text: "Technical specifications"
+    }
+    ,
+    {
+      href: "#evidence",
+      text: "Evidence and documents"
+    },
+        {
+      href: "#contact",
+      text: "Evaluation contact"
+    }
+
+  ]
+}) }}
+
+      {# Supplier Information Card #}
     <div class="nhsuk-card">
       <div class="nhsuk-card__content">
         <h3 class="nhsuk-card__heading nhsuk-heading-s">
@@ -204,7 +238,7 @@ <h2 class="nhsuk-heading-m">Working with this supplier</h2>
 
     {# Technical Specifications - Collapsed by default #}
 
-    <details class="nhsuk-details nhsuk-expander">
+    <details class="nhsuk-details nhsuk-expander" id="tech-spec">
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
      View technical specifications
@@ -373,7 +407,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-top-4">Clinical trial data</h3>
 
     {# Cost Analysis - Collapsed by default #}
 
-    <details class="nhsuk-details nhsuk-expander">
+    <details class="nhsuk-details nhsuk-expander" id="costs">
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
       View cost analysis
@@ -453,7 +487,7 @@ <h3 class="nhsuk-heading-s nhsuk-u-margin-top-4">Clinical trial data</h3>
 
     {# Quick Links #}
     <div class="nhsuk-u-margin-top-4">
-    
+
         <h3 class="nhsuk-card__heading nhsuk-heading-s">
           Related resources
         </h3>
@@ -485,7 +519,7 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
 {# Trust Evaluations Section - ENHANCED #}
 <div class="nhsuk-grid-row nhsuk-u-margin-top-8">
   <div class="nhsuk-grid-column-two-thirds">
-    <h2 class="nhsuk-heading-l">Evaluations from NHS trusts</h2>
+    <h2 class="nhsuk-heading-l" id="trials">Evaluations from NHS trusts</h2>
     <p class="nhsuk-body">
       This product has been evaluated by 12 NHS trusts. These evaluations range from full clinical trials to pilot studies to quick desk reviews. Contact details are provided below for trusts who have agreed to share their experience.
     </p>
@@ -496,7 +530,7 @@ <h2 class="nhsuk-heading-l">Evaluations from NHS trusts</h2>
   <div class="nhsuk-grid-column-two-thirds">
     
     {# Trust Evaluation 1 - Barts Health NHS Trust (Business case) #}
-    <div class="nhsuk-card">
+    <div class="nhsuk-card" id="contacts">
       <div class="nhsuk-card__content">
         <div class="nhsuk-u-margin-bottom-3">
           <strong class="nhsuk-tag nhsuk-tag--green">Procured</strong>
@@ -760,11 +794,76 @@ <h4 class="nhsuk-heading-s">Contact for peer discussion</h4>
             Kerris is happy to discuss staff training and supplier experience
           </p>
         </div>
+
       </div>
     </div>
 
   </div>
 </div>
+{# ============================================ #}
+{# EVIDENCE AND DOCUMENTATION                   #}
+{# ============================================ #}
+<div class="nhsuk-grid-row nhsuk-u-margin-bottom-6" id="evidence">
+  <div class="nhsuk-grid-column-two-thirds">
+
+    <hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-5">
+
+    <h2 class="nhsuk-heading-l">Evidence and documentation</h2>
+
+    <ul class="nhsuk-list">
+      <li class="nhsuk-u-margin-bottom-3">
+        <a href="#" class="nhsuk-link">
+          <strong>Instructions for use (IFU)</strong>
+        </a>
+        <br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 2.3MB · Supplier provided</span>
+      </li>
+      <li class="nhsuk-u-margin-bottom-3">
+        <a href="#" class="nhsuk-link">
+          <strong>Clinical evidence summary</strong>
+        </a>
+        <br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 890KB · Supplier provided</span>
+      </li>
+      <li class="nhsuk-u-margin-bottom-3">
+        <a href="#" class="nhsuk-link">
+          <strong>British Medical Journal - Clinical trial 2024</strong>
+        </a>
+        <br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">External link · Peer-reviewed publication</span>
+      </li>
+      <li class="nhsuk-u-margin-bottom-3">
+        <a href="#" class="nhsuk-link">
+          <strong>Safety data sheet</strong>
+        </a>
+        <br><span class="nhsuk-u-secondary-text-color nhsuk-body-s">PDF, 1.1MB · Supplier provided</span>
+      </li>
+    </ul>
+
+  </div>
+</div>
+
+{# Contact Information Card #}
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+    {% from "card/macro.njk" import card %}
+
+{% set cardDescriptionHtml %}
+  <ul>
+    <li>you disagree with with something on this page</li>
+    <li>you have a query about something on this page</li>
+    <li>you would like to amend something on this page</li>
+    
+  </ul>
+  <p>In all instances, contact the team on 0330 2234 776 or email: <a href="">enquiries@dhsc.gov.uk</a></p>
+{% endset %}
+
+<div id="contact">
+{{ card({
+  type: "non-urgent",
+  heading: "You can contact us if:",
+  descriptionHtml: cardDescriptionHtml
+}) }}
+</div>
+  </div>
+</div>
 
 {# Back to Search #}
 <div class="nhsuk-grid-row nhsuk-u-margin-top-8">