From 248db8d9e17b5b522ae08b83aad109d8bf6717e8 Mon Sep 17 00:00:00 2001
From: David Evans <xd.davidevans@gmail.com>
Date: Thu, 12 Mar 2026 13:53:42 +0000
Subject: [PATCH] content and search

---
 .../current/layouts/layout-search-sticky.html | 174 ++++++++++++
 app/views/current/search-results-viz-all.html |  96 ++++---
 app/views/current/search-sticky.html          | 266 ++++++++++++++++++
 app/views/current/search.html                 | 158 ++++-------
 4 files changed, 548 insertions(+), 146 deletions(-)
 create mode 100755 app/views/current/layouts/layout-search-sticky.html
 create mode 100755 app/views/current/search-sticky.html

diff --git a/app/views/current/layouts/layout-search-sticky.html b/app/views/current/layouts/layout-search-sticky.html
new file mode 100755
index 0000000..603b7fb
--- /dev/null
+++ b/app/views/current/layouts/layout-search-sticky.html
@@ -0,0 +1,174 @@
+<!--
+  This is the main layout where you can:
+    - change the header and footer
+    - add custom CSS and JavaScript
+-->
+{% extends "prototype-kit-template.njk" %}
+{% block head %}
+<link href="/css/main.css" rel="stylesheet">
+<style>
+  /* ── Sticky slim bar (shown on scroll) ── */
+  .app-search-sticky {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: #005EB8; /* nhsuk-colour("blue") */
+    padding: 24px 0; /* nhsuk-spacing(4) */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* nhsuk-spacing(1) nhsuk-spacing(2) */
+  }
+
+  .app-search-sticky.is-visible {
+    display: block;
+  }
+
+  .app-search-sticky__form {
+    display: flex;
+    align-items: center;
+    gap: 16px; /* nhsuk-spacing(3) */
+    width: 100%;
+  }
+
+  .app-search-sticky .nhsuk-label {
+    color: #ffffff; /* nhsuk-colour("white") */
+    white-space: nowrap;
+    margin-bottom: 0;
+  }
+
+  .app-search-sticky .nhsuk-input {
+    margin-bottom: 0;
+    flex: 1;
+  }
+
+  .app-search-sticky .nhsuk-button {
+    margin-bottom: 0;
+    white-space: nowrap;
+  }
+</style>
+{% endblock %}
+
+{% block header %}
+{{ header({
+  logo: {
+    href: "/",
+    ariaLabel: "Search and evaluate medical technologies"
+  },
+  service: {
+    text: "Search and evaluate medical technologies",
+    href: "/"
+  },
+  account: {
+    items: [
+      {
+        text: "Kelvin Simpson (Regional Manager)",
+        icon: true
+      },
+      {
+        text: "Log out",
+        href: "#"
+      }
+    ]
+  },
+  navigation: {
+    items: [
+      {
+        text: "Dashboard",
+        href: "dashboard"
+      },
+      {
+        text: "",
+        href: "#"
+      },
+      {
+        text: "Search",
+        href: "search"
+      }
+    ]
+  }
+}) }}
+
+<!-- ── Full hero (visible at top) ── -->
+<div class="nhsuk-hero" id="search-hero">
+  <div class="nhsuk-width-container nhsuk-hero--border">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        <div class="nhsuk-hero__wrapper">
+          <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">Search</h1>
+          <h3 class="nhsuk-heading-s">Search and evaluate medical technologies</h3>
+          <div class="nhsuk-form-group">
+            <form action="search-results" method="get" novalidate="">
+              <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
+                <label class="nhsuk-label" for="q">
+                  Search by product, category or supplier
+                </label>
+                <input class="nhsuk-input nhsuk-input--width-20" id="q" name="q" type="search" value="">
+                <button class="nhsuk-button nhsuk-button--reverse nhsuk-u-margin-left-2 app-button--small nhsuk-u-margin-bottom-0" data-module="nhsuk-button" type="submit" data-nhsuk-button-init="">
+                  Search
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── Sticky slim bar (appears on scroll) ── -->
+<div class="app-search-sticky" id="search-sticky" role="search" aria-label="Sticky search">
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        <form action="search-results" method="get" novalidate="" class="app-search-sticky__form">
+          <label class="nhsuk-label nhsuk-u-margin-bottom-0" for="q-sticky">Search</label>
+          <input class="nhsuk-input nhsuk-u-margin-bottom-0" id="q-sticky" name="q" type="search" value="" placeholder="Search by product, category or supplier" aria-label="Search by product, category or supplier">
+          <button class="nhsuk-button nhsuk-button--reverse app-button--small nhsuk-u-margin-bottom-0" type="submit">
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+
+{% block footer %}
+  {% include "includes/footer.html" %}
+{% endblock %}
+
+{% block bodyEnd %}
+<script src="/nhsuk-frontend/nhsuk-frontend.min.js" type="module"></script>
+<script type="module">
+import { initAll } from '/nhsuk-frontend/nhsuk-frontend.min.js'
+initAll()
+</script>
+
+<script>
+  (function () {
+    var hero = document.getElementById('search-hero');
+    var sticky = document.getElementById('search-sticky');
+
+    if (!hero || !sticky) return;
+
+    function onScroll() {
+      var heroBottom = hero.getBoundingClientRect().bottom;
+      // Show sticky bar once the hero has scrolled fully out of view
+      if (heroBottom <= 0) {
+        sticky.classList.add('is-visible');
+      } else {
+        sticky.classList.remove('is-visible');
+      }
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+  })();
+</script>
+
+  {% block scripts %}
+    {% include "includes/scripts.html" %}
+    {% block pageScripts %}{% endblock %}
+  {% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/views/current/search-results-viz-all.html b/app/views/current/search-results-viz-all.html
index c0603d0..502bd75 100644
--- a/app/views/current/search-results-viz-all.html
+++ b/app/views/current/search-results-viz-all.html
@@ -134,52 +134,58 @@ <h2 class="nhsuk-contents-list__title nhsuk-u-font-size-16">Subcategory</h2>
               <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">Supplier market share</h3>
               <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-4">Advanced dressings only &middot; 52 products</p>
 
-              <div class="app-pie-wrap" style="display:flex;flex-direction:row;align-items:center;gap:20px;">
-                <svg class="app-pie-svg" width="140" height="140" viewBox="0 0 140 140" aria-hidden="true" style="flex-shrink:0;">
-                  <path d="M70 70 L70 10 A60 60 0 0 1 118 103 Z" fill="#005eb8"/>
-                  <path d="M70 70 L118 103 A60 60 0 0 1 42 127 Z" fill="#007f3b"/>
-                  <path d="M70 70 L42 127 A60 60 0 0 1 14 56 Z" fill="#ffb81c"/>
-                  <path d="M70 70 L14 56 A60 60 0 0 1 70 10 Z" fill="#aeb7bd"/>
-                  <circle cx="70" cy="70" r="32" fill="#fff"/>
-                  <text x="70" y="66" text-anchor="middle" font-size="18" font-weight="700" fill="#212b32">52</text>
-                  <text x="70" y="80" text-anchor="middle" font-size="10" fill="#000000">products</text>
-                </svg>
+            <!-- REPLACE the entire app-pie-wrap div in search-results-viz-all.html with this -->
+
+<div class="app-pie-wrap" style="display:flex;flex-direction:row;align-items:center;gap:12px;">
+
+  <!-- Chart: exactly 50% of the card width -->
+  <svg class="app-pie-svg" viewBox="0 0 140 140" aria-hidden="true" style="flex:0 0 50%;max-width:50%;height:auto;">
+    <path d="M70 70 L70 10 A60 60 0 0 1 118 103 Z" fill="#005eb8"/>
+    <path d="M70 70 L118 103 A60 60 0 0 1 42 127 Z" fill="#007f3b"/>
+    <path d="M70 70 L42 127 A60 60 0 0 1 14 56 Z" fill="#ffb81c"/>
+    <path d="M70 70 L14 56 A60 60 0 0 1 70 10 Z" fill="#aeb7bd"/>
+    <circle cx="70" cy="70" r="32" fill="#fff"/>
+    <text x="70" y="66" text-anchor="middle" font-size="18" font-weight="700" fill="#212b32">52</text>
+    <text x="70" y="80" text-anchor="middle" font-size="10" fill="#000000">products</text>
+  </svg>
+
+  <!-- Legend: remaining 50% -->
+  <div class="app-supplier-legend" style="flex:0 0 50%;min-width:0;">
+    <div class="app-supplier-legend__item">
+      <div class="app-supplier-legend__swatch" style="background:#005eb8;"></div>
+      <div class="app-supplier-legend__body">
+        <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Smith and Nephew</strong></p>
+        <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">38% &middot; 20 products</p>
+        <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:100%;background:#005eb8;"></div></div>
+      </div>
+    </div>
+    <div class="app-supplier-legend__item">
+      <div class="app-supplier-legend__swatch" style="background:#007f3b;"></div>
+      <div class="app-supplier-legend__body">
+        <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>M&ouml;lnlycke Health Care</strong></p>
+        <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">29% &middot; 15 products</p>
+        <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:76%;background:#007f3b;"></div></div>
+      </div>
+    </div>
+    <div class="app-supplier-legend__item">
+      <div class="app-supplier-legend__swatch" style="background:#ffb81c;"></div>
+      <div class="app-supplier-legend__body">
+        <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>ConvaTec</strong></p>
+        <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">21% &middot; 11 products</p>
+        <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:55%;background:#ffb81c;"></div></div>
+      </div>
+    </div>
+    <div class="app-supplier-legend__item">
+      <div class="app-supplier-legend__swatch" style="background:#aeb7bd;"></div>
+      <div class="app-supplier-legend__body">
+        <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Others</strong></p>
+        <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">12% &middot; 6 products</p>
+        <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:32%;background:#aeb7bd;"></div></div>
+      </div>
+    </div>
+  </div>
 
-                <div class="app-supplier-legend" style="flex:1;min-width:0;">
-                  <div class="app-supplier-legend__item">
-                    <div class="app-supplier-legend__swatch" style="background:#005eb8;"></div>
-                    <div class="app-supplier-legend__body">
-                      <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Smith+Nephew</strong></p>
-                      <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">38% &middot; 20 products</p>
-                      <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:100%;background:#005eb8;"></div></div>
-                    </div>
-                  </div>
-                  <div class="app-supplier-legend__item">
-                    <div class="app-supplier-legend__swatch" style="background:#007f3b;"></div>
-                    <div class="app-supplier-legend__body">
-                      <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>M&ouml;lnlycke Health Care</strong></p>
-                      <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">29% &middot; 15 products</p>
-                      <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:76%;background:#007f3b;"></div></div>
-                    </div>
-                  </div>
-                  <div class="app-supplier-legend__item">
-                    <div class="app-supplier-legend__swatch" style="background:#ffb81c;"></div>
-                    <div class="app-supplier-legend__body">
-                      <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>ConvaTec</strong></p>
-                      <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">21% &middot; 11 products</p>
-                      <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:55%;background:#ffb81c;"></div></div>
-                    </div>
-                  </div>
-                  <div class="app-supplier-legend__item">
-                    <div class="app-supplier-legend__swatch" style="background:#aeb7bd;"></div>
-                    <div class="app-supplier-legend__body">
-                      <p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Others</strong></p>
-                      <p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">12% &middot; 6 products</p>
-                      <div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:32%;background:#aeb7bd;"></div></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+</div>
 
             </div>
           </div>
diff --git a/app/views/current/search-sticky.html b/app/views/current/search-sticky.html
new file mode 100755
index 0000000..83f0e8d
--- /dev/null
+++ b/app/views/current/search-sticky.html
@@ -0,0 +1,266 @@
+<!-- Search page iterated based on Four Modes of Information Seeking (Donna Spencer) -->
+<!-- Supports: Known-item, Exploratory, Don't Know What You Need to Know, Re-finding -->
+
+{% extends prototypeVersion + '/layouts/layout-search-sticky.html' %}
+
+{% set pageName = "Search and evaluate medical technologies" %}
+{% set serviceHeader = "NHS medtech procurement" %}
+{% set serviceDescription = "Search and evaluate medical technologies" %}
+
+{% block beforeContent %}
+{% endblock %}
+
+{% block content %}
+
+<!-- ============================================ -->
+<!-- COMMON SEARCHES + YOUR ACTIVITY  -->
+<!-- ============================================ -->
+<div class="nhsuk-grid-row">
+
+  <!-- Common searches -->
+  <div class="nhsuk-grid-column-one-half">
+    <h2 class="nhsuk-heading-l">Common searches</h2>
+    <p class="nhsuk-body">Recently searched across NHS trusts similar to yours</p>
+    <ul class="nhsuk-list app-tag-list">
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Air mattress system</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">HydroHeal Plus</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Insulin pumps</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Surgical mesh</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Continuous glucose monitors</a></li>
+    </ul>
+  </div>
+
+  <!-- Your activity -->
+  <div class="nhsuk-grid-column-one-half">
+    <h2 class="nhsuk-heading-l">Your activity</h2>
+    <div class="nhsuk-card-group">
+      <div class="nhsuk-card-group__item">
+        <div class="nhsuk-card">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">Your recently viewed items</h3>
+            <ul class="nhsuk-list nhsuk-list--bullet">
+              <li><a href="#">Stryker Mako SmartRobotics</a> — viewed yesterday</li>
+              <li><a href="#">Smith+Nephew PICO 7</a> — viewed 3 days ago</li>
+              <li><a href="#">Medtronic MiniMed 780G</a> — viewed last week</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="nhsuk-card-group__item">
+        <div class="nhsuk-card">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">Your saved items</h3>
+            <ul class="nhsuk-list nhsuk-list--bullet">
+              <li><a href="#">SmartPump 300 Infusion System</a></li>
+              <li><a href="#">Collagen Pro Matrix</a></li>
+            </ul>
+            <p class="nhsuk-body-s nhsuk-u-margin-top-3"><a href="#">View all saved items</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
+
+<!-- ============================================ -->
+<!-- MODE 3: EXPLORATORY SEEKING                  -->
+<!-- ============================================ -->
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <h2 class="nhsuk-heading-l">Browse by care setting</h2>
+    <p class="nhsuk-body">Explore what's available in care settings like yours.</p>
+
+    <ul class="nhsuk-grid-row nhsuk-card-group">
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Prevention and health promotion</a>
+            </h3>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="search-results-viz-all">Primary care</a>
+            </h3>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Primary prescribing</a>
+            </h3>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Ambulance</a>
+            </h3>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">A &amp; E</a>
+            </h3>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <a class="nhsuk-action-link" href="#">
+              <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+              </svg>
+              <span class="nhsuk-action-link__text">View all care settings</span>
+            </a>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</div>
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <h2 class="nhsuk-heading-l">Browse by category</h2>
+    <p class="nhsuk-body">Explore what's available and see which products other trusts use.</p>
+
+    <ul class="nhsuk-grid-row nhsuk-card-group">
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Orthopaedic implants</a>
+            </h3>
+            <p class="nhsuk-card__description">Hip, knee, shoulder replacements and trauma fixation devices</p>
+            <p class="nhsuk-body-s nhsuk-u-secondary-text-color">247 products · 89 trust evaluations</p>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="search-results-viz-all">Wound care</a>
+            </h3>
+            <p class="nhsuk-card__description">Dressings, negative pressure therapy and skin substitutes</p>
+            <p class="nhsuk-body-s nhsuk-u-secondary-text-color">183 products · 56 trust evaluations</p>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Diabetes technology</a>
+            </h3>
+            <p class="nhsuk-card__description">Insulin pumps, continuous glucose monitors and smart pens</p>
+            <p class="nhsuk-body-s nhsuk-u-secondary-text-color">94 products · 112 trust evaluations</p>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Diagnostic imaging</a>
+            </h3>
+            <p class="nhsuk-card__description">MRI, CT, ultrasound and X-ray equipment</p>
+            <p class="nhsuk-body-s nhsuk-u-secondary-text-color">156 products · 34 trust evaluations</p>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <h3 class="nhsuk-card__heading nhsuk-heading-s">
+              <a class="nhsuk-card__link" href="category-wound-care">Surgical instruments</a>
+            </h3>
+            <p class="nhsuk-card__description">Robotic systems, endoscopes and single-use instruments</p>
+            <p class="nhsuk-body-s nhsuk-u-secondary-text-color">312 products · 67 trust evaluations</p>
+          </div>
+        </div>
+      </li>
+      <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+        <div class="nhsuk-card nhsuk-card--clickable">
+          <div class="nhsuk-card__content">
+            <a class="nhsuk-action-link" href="#">
+              <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+              </svg>
+              <span class="nhsuk-action-link__text">Explore more categories</span>
+            </a>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  </div>
+</div>
+
+<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
+
+<!-- ============================================ -->
+<!-- MODE 4: DON'T KNOW WHAT YOU NEED TO KNOW    -->
+<!-- ============================================ -->
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+
+    <h2 class="nhsuk-heading-l">New to medical technology procurement?</h2>
+    <p class="nhsuk-body">Not sure where to start? These resources help you understand what to look for when evaluating medical technologies.</p>
+
+    <div class="nhsuk-card">
+      <div class="nhsuk-card__content">
+        <h3 class="nhsuk-card__heading nhsuk-heading-m">
+          <a class="nhsuk-card__link" href="#">Value-based procurement explained</a>
+        </h3>
+        <p class="nhsuk-card__description">
+          Move beyond lowest-price decisions and evaluate products on outcomes, safety, integration and sustainability.
+        </p>
+      </div>
+    </div>
+
+    <div class="nhsuk-card">
+      <div class="nhsuk-card__content">
+        <h3 class="nhsuk-card__heading nhsuk-heading-m">
+          <a class="nhsuk-card__link" href="#">What makes good evidence?</a>
+        </h3>
+        <p class="nhsuk-card__description">
+          Learn the difference between NICE guidance, ODEP ratings, clinical trials and trust evaluations — and when each matters for your decision.
+        </p>
+      </div>
+    </div>
+
+    <div class="nhsuk-card">
+      <div class="nhsuk-card__content">
+        <h3 class="nhsuk-card__heading nhsuk-heading-m">
+          <a class="nhsuk-card__link" href="#">Questions to ask other trusts</a>
+        </h3>
+        <p class="nhsuk-card__description">
+          Find out what questions procurement leads and clinical engineers ask their peers about their experience.
+        </p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/views/current/search.html b/app/views/current/search.html
index b10bdaa..fa6112f 100755
--- a/app/views/current/search.html
+++ b/app/views/current/search.html
@@ -1,7 +1,7 @@
 <!-- Search page iterated based on Four Modes of Information Seeking (Donna Spencer) -->
 <!-- Supports: Known-item, Exploratory, Don't Know What You Need to Know, Re-finding -->
 
-{% extends prototypeVersion + '/layouts/layout-search.html' %}
+{% extends prototypeVersion + '/layouts/layout-search-sticky.html' %}
 
 {% set pageName = "Search and evaluate medical technologies" %}
 {% set serviceHeader = "NHS medtech procurement" %}
@@ -13,95 +13,68 @@
 {% block content %}
 
 <!-- ============================================ -->
-<!-- MODE 1: RE-FINDING                           -->
+<!-- COMMON SEARCHES + YOUR ACTIVITY (side by side) -->
 <!-- ============================================ -->
+<div class="nhsuk-grid-row">
 
+  <!-- Common searches: left half -->
+  <div class="nhsuk-grid-column-one-half">
+    <h2 class="nhsuk-heading-l">Common searches</h2>
+    <p class="nhsuk-body">Recently searched across NHS trusts similar to yours</p>
+    <ul class="nhsuk-list app-tag-list">
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Air mattress system</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">HydroHeal Plus</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Insulin pumps</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Surgical mesh</a></li>
+      <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Continuous glucose monitors</a></li>
+    </ul>
+  </div>
 
-    <!-- When signed in, show recent activity cards -->
-  <h2 class="nhsuk-heading-l">Your activity</h2>
-    <div class="nhsuk-grid-row nhsuk-card-group">
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item">
-        <div class="nhsuk-card">
-          <div class="nhsuk-card__content">
-            <h3 class="nhsuk-card__heading nhsuk-heading-s">Your recently viewed items</h3>
-            <ul class="nhsuk-list nhsuk-list--bullet">
-              <li><a href="#">Stryker Mako SmartRobotics</a> — viewed yesterday</li>
-              <li><a href="#">Smith+Nephew PICO 7</a> — viewed 3 days ago</li>
-              <li><a href="#">Medtronic MiniMed 780G</a> — viewed last week</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item">
-        <div class="nhsuk-card">
-          <div class="nhsuk-card__content">
-            <h3 class="nhsuk-card__heading nhsuk-heading-s">Your saved items</h3>
-            <ul class="nhsuk-list nhsuk-list--bullet">
-              <li><a href="#">SmartPump 300 Infusion System</a></li>
-              <li><a href="#">Collagen Pro Matrix</a></li>
-            </ul>
-            <p class="nhsuk-body-s nhsuk-u-margin-top-3"><a href="#">View all saved items</a></p>
-          </div>
-        </div>
+  <!-- Your activity: right half -->
+  <div class="nhsuk-grid-column-one-half">
+    <h2 class="nhsuk-heading-l">Your activity</h2>
+    <div class="nhsuk-card">
+      <div class="nhsuk-card__content">
+        <h3 class="nhsuk-card__heading nhsuk-heading-s">Your recently viewed items</h3>
+        <ul class="nhsuk-list nhsuk-list--bullet">
+          <li><a href="#">Stryker Mako SmartRobotics</a> — viewed yesterday</li>
+          <li><a href="#">Smith+Nephew PICO 7</a> — viewed 3 days ago</li>
+          <li><a href="#">Medtronic MiniMed 780G</a> — viewed last week</li>
+        </ul>
       </div>
     </div>
-
-<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-
-<!-- ============================================ -->
-<!-- MODE 2: KNOWN-ITEM SEEKING                   -->
-<!-- Users who know exactly what they're after    -->
-<!-- ============================================ -->
-<div class="nhsuk-grid-row">
-  <div class="nhsuk-grid-column-one-half">
-    
-  
-
-    <!-- Quick links for known-item seekers (common searches) -->
-    <h2 class="nhsuk-heading-l">Common searches</h2>
-    <p class="nhsuk-body">    
-          Recently searched across NHS trusts similar to yours
-          </p>
-      
-        <ul class="nhsuk-list app-tag-list">
-          <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Air mattress system</a></li>
-          <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">HydroHeal Plus</a></li>
-          <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Insulin pumps</a></li>
-          <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Surgical mesh</a></li>
-          <li><a href="category-wound-care" class="nhsuk-tag nhsuk-tag--white">Continuous glucose monitors</a></li>
+    <div class="nhsuk-card">
+      <div class="nhsuk-card__content">
+        <h3 class="nhsuk-card__heading nhsuk-heading-s">Your saved items</h3>
+        <ul class="nhsuk-list nhsuk-list--bullet">
+          <li><a href="#">SmartPump 300 Infusion System</a></li>
+          <li><a href="#">Collagen Pro Matrix</a></li>
         </ul>
-      
-
-
+        <p class="nhsuk-body-s nhsuk-u-margin-top-3"><a href="#">View all saved items</a></p>
+      </div>
+    </div>
   </div>
-  
+
 </div>
 
 <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
 
-
-
-<!-- ============================================ -->
-<!-- MODE 4: RE-FINDING                           -->
 <!-- ============================================ -->
 <!-- MODE 3: EXPLORATORY SEEKING                  -->
-<!-- Users researching options, may not know      -->
-<!-- exactly what they need                       -->
 <!-- ============================================ -->
- <div class="nhsuk-grid-row">
+<div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
-    
+
     <h2 class="nhsuk-heading-l">Browse by care setting</h2>
     <p class="nhsuk-body">Explore what's available in care settings like yours.</p>
 
-      <ul class="nhsuk-grid-row nhsuk-card-group">
+    <ul class="nhsuk-grid-row nhsuk-card-group">
       <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
         <div class="nhsuk-card nhsuk-card--clickable">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-card__heading nhsuk-heading-s">
               <a class="nhsuk-card__link" href="category-wound-care">Prevention and health promotion</a>
             </h3>
-            
           </div>
         </div>
       </li>
@@ -111,7 +84,6 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
             <h3 class="nhsuk-card__heading nhsuk-heading-s">
               <a class="nhsuk-card__link" href="search-results-viz-all">Primary care</a>
             </h3>
-          
           </div>
         </div>
       </li>
@@ -121,7 +93,6 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
             <h3 class="nhsuk-card__heading nhsuk-heading-s">
               <a class="nhsuk-card__link" href="category-wound-care">Primary prescribing</a>
             </h3>
-            
           </div>
         </div>
       </li>
@@ -131,7 +102,6 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
             <h3 class="nhsuk-card__heading nhsuk-heading-s">
               <a class="nhsuk-card__link" href="category-wound-care">Ambulance</a>
             </h3>
-          
           </div>
         </div>
       </li>
@@ -139,36 +109,31 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
         <div class="nhsuk-card nhsuk-card--clickable">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-card__heading nhsuk-heading-s">
-              <a class="nhsuk-card__link" href="category-wound-care">A & E</a>
+              <a class="nhsuk-card__link" href="category-wound-care">A &amp; E</a>
             </h3>
-            
           </div>
         </div>
       </li>
       <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
         <div class="nhsuk-card nhsuk-card--clickable">
           <div class="nhsuk-card__content">
-            <h3 class="nhsuk-card__heading nhsuk-heading-s">
             <a class="nhsuk-action-link" href="#">
-  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
-    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
-  </svg>
-  <span class="nhsuk-action-link__text">View all care settings</span>
-</a>
-            </h3>
-            
+              <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+              </svg>
+              <span class="nhsuk-action-link__text">View all care settings</span>
+            </a>
           </div>
         </div>
       </li>
     </ul>
 
+  </div>
+</div>
 
-
-    </div>
-    </div>
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
-    
+
     <h2 class="nhsuk-heading-l">Browse by category</h2>
     <p class="nhsuk-body">Explore what's available and see which products other trusts use.</p>
 
@@ -231,15 +196,12 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
       <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
         <div class="nhsuk-card nhsuk-card--clickable">
           <div class="nhsuk-card__content">
-            
-          <a class="nhsuk-action-link" href="#">
-  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
-    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
-  </svg>
-  <span class="nhsuk-action-link__text">Explore more categories</span>
-</a>
-        
-        
+            <a class="nhsuk-action-link" href="#">
+              <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+              </svg>
+              <span class="nhsuk-action-link__text">Explore more categories</span>
+            </a>
           </div>
         </div>
       </li>
@@ -252,12 +214,10 @@ <h3 class="nhsuk-card__heading nhsuk-heading-s">
 
 <!-- ============================================ -->
 <!-- MODE 4: DON'T KNOW WHAT YOU NEED TO KNOW    -->
-<!-- Users who may not know the right questions   -->
-<!-- or what evidence matters                     -->
 <!-- ============================================ -->
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-two-thirds">
-    
+
     <h2 class="nhsuk-heading-l">New to medical technology procurement?</h2>
     <p class="nhsuk-body">Not sure where to start? These resources help you understand what to look for when evaluating medical technologies.</p>
 
@@ -271,7 +231,7 @@ <h3 class="nhsuk-card__heading nhsuk-heading-m">
         </p>
       </div>
     </div>
-    
+
     <div class="nhsuk-card">
       <div class="nhsuk-card__content">
         <h3 class="nhsuk-card__heading nhsuk-heading-m">
@@ -294,11 +254,7 @@ <h3 class="nhsuk-card__heading nhsuk-heading-m">
       </div>
     </div>
 
-
-
+  </div>
 </div>
 
-
-
-
 {% endblock %}
\ No newline at end of file