Design for showing new Record vaccinations and Records section alongside existing 'Find a patient' interface (#469)

Record vaccinations:

<img width="1008" height="719" alt="Screenshot 2025-09-17 at 15 47 20"
src="https://github.com/user-attachments/assets/70532221-b61d-4905-90bc-6b6c07218463"
/>

Records:

<img width="2210" height="1886" alt="localhost_3000_records (2)"
src="https://github.com/user-attachments/assets/2daf69ba-27d5-44c6-98b2-1eda84a35198"
/>

Author: frankieroberto

app/assets/sass/components/_inset-text.scss

@@ -0,0 +1,3 @@
+.app-inset-text--white {
+ background-color: nhsuk-colour("white");
+}

app/assets/sass/main.scss

@@ -20,6 +20,7 @@
 @import 'components/section';
 @import 'components/tag';
 @import 'components/numbered-heading';
+@import 'components/inset-text';
 
 @import '../../components/pagination/_pagination';
 @import '../../components/secondary-navigation/_secondary-navigation';

app/views/find-a-patient.html

@@ -0,0 +1,18 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Find a patient" %}
+{% set currentSection = "find-a-patient" %}
+
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-xl">{{ pageName }}</h1>
+
+      <p>[Existing interface goes here]</p>
+    </div>
+  </div>
+
+
+{% endblock %}

app/views/includes/header-logged-in-organisation.html

@@ -26,14 +26,14 @@
         active: (currentSection == "home")
       },
       {
-        href: "/record-vaccinations",
-        text: ("Record vaccinations") | safe,
-        active: (currentSection == "vaccinate")
+        href: "/find-a-patient",
+        text: ("Find a patient") | safe,
+        active: (currentSection == "find-a-patient")
       },
       {
-        href: "/lists",
-        text: "Lists <span class=\"nhsuk-tag app-tag--header nhsuk-u-margin-left-2\">New</span>" | safe,
-        active: (currentSection == "lists")
+        href: "/record-vaccinations",
+        text: ("Record vaccinations <span class=\"nhsuk-tag app-tag--header nhsuk-u-margin-left-2\">New</span>") | safe,
+        active: (currentSection == "vaccinate")
       },
       {
         href: "/vaccines",
@@ -42,7 +42,7 @@
       } if (currentUser and (["Lead administrator", "Administrator"] | arrayOrStringIncludes(organisationSetting.permissionLevel))),
       {
         href: "/records",
-        text: "Records",
+        html: "Records <span class=\"nhsuk-tag app-tag--header nhsuk-u-margin-left-2\">New</span>" | safe,
         active: (currentSection == "records")
       } if (currentUser and (["Lead administrator", "Administrator"] | arrayOrStringIncludes(organisationSetting.permissionLevel))),
       {

app/views/record-vaccinations/index.html

@@ -20,6 +20,20 @@
         }) }}
       {% endif %}
 
+      {% set insetTextHtml %}
+        <p><span class="nhsuk-tag nhsuk-tag--blue">New</span></p>
+        <p>This new section makes it easier to record vaccinations.</p>
+        <p>You can continue using <b>Find a patient</b> until 31&nbsp;October&nbsp;2025.</p>
+        <p class="nhsuk-u-margin-bottom-0"><a href="https://guide.ravs.england.nhs.uk/record-vaccinations/" class="nhsuk-link" target="_blank">Find out more (opens in new tab)</a></p>
+
+      {% endset %}
+
+      {{ insetText({
+        html: insetTextHtml,
+        classes: "nhsuk-u-margin-top-0 nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-3 app-inset-text--white"
+      }) }}
+
+
       <form action="/record-vaccinations/answer-date" method="post" novalidate>
         {% set previousDateHtml %}
 

app/views/records/index.html

@@ -5,11 +5,34 @@
 {% set currentSection = "records" %}
 
 {% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      {% set insetTextHtml %}
+        <p><span class="nhsuk-tag nhsuk-tag--blue">New</span></p>
+        <p>This new section lets you view and edit vaccination records created by your organisation.</p>
+        <p>You can continue using <b>Find a patient</b> until 31&nbsp;October&nbsp;2025.</p>
+        <p class="nhsuk-u-margin-bottom-0"><a href="https://guide.ravs.england.nhs.uk/records/" class="nhsuk-link" target="_blank">Find out more (opens in new tab)</a></p>
+
+      {% endset %}
+
+      {{ insetText({
+        html: insetTextHtml,
+        classes: "nhsuk-u-margin-top-0 nhsuk-u-padding-top-3 nhsuk-u-padding-bottom-3 app-inset-text--white"
+      }) }}
+
+
+    </div>
+  </div>
+
+
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
 
+
+
       <h1 class="nhsuk-heading-l">Records</h1>
-      <p class="nhsuk-body-l">Search for a vaccination record you want to view, edit or delete.</p>
+      <p class="nhsuk-body-l">Search for a vaccination record you want to view or edit.</p>
 
       <form action="/records/answer-search" method="post" novalidate>