Skip to content

Commit 9c03ba2

Browse files
frankierobertofrankieroberto
authored
Update product page (#325)
Updated with some more placeholder content.
1 parent 85a77dd commit 9c03ba2

File tree

9 files changed

+186
-41
lines changed

9 files changed

+186
-41
lines changed

‎app/assets/images/homepage-illustration.png‎

52.2 KB
Loading

‎app/assets/images/pharmacist.jpg‎

44.8 KB
Loading

‎app/assets/sass/components/_header.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,15 @@
2020
text-decoration: none;
2121
border-bottom-color: $nhsuk-border-color;
2222
}
23+
24+
// Temporary mockup until this has been released
25+
.app-header__account-item {
26+
background-color: #004b93;
27+
padding: 3px 15px;
28+
border-radius: 5px;
29+
}
30+
31+
.app-header__account-item .nhsuk-header__navigation-link {
32+
padding-top: 0px;
33+
padding-bottom: 0px;
34+
}

‎app/assets/sass/components/_numbered-heading.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.app-numbered-heading {
2+
display: flex;
3+
margin-bottom: 0.4rem;
4+
}
5+
6+
.app-numbered-heading__number {
7+
width: 48px;
8+
height: 48px;
9+
line-height: 48px;
10+
border-radius: 50%;
11+
background-color: #005eb8;
12+
color: white;
13+
font-weight: bold;
14+
text-align: center;
15+
}
16+
17+
.app-numbered-heading__title {
18+
width: 85%;
19+
padding: 0.3em 0 0 1.5em;
20+
}
21+
22+
.app-numbered-heading__title .nhsuk-tag {
23+
margin-left: 20px;
24+
vertical-align: middle;
25+
}
26+
27+
.app-numbered-heading__content {
28+
padding-left: 5.5rem;
29+
margin-bottom: 2.5rem;
30+
}

‎app/assets/sass/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $govuk-brand-colour: $nhsuk-link-color;
3333
@import 'components/link';
3434
@import 'components/section';
3535
@import 'components/tag';
36-
36+
@import 'components/numbered-heading';
3737

3838
@import '../../components/pagination/_pagination';
3939

‎app/views/apply/contact-details.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<h1 class="nhsuk-heading-l">{{ pageName }}</h1>
2121

22-
<p>You must use an NHS-approved email address. See the <a href="https://digital.nhs.uk/services/care-identity-service/applications-and-services/apply-for-care-id/care-identity-email-domain-allow-list" target="_blank">list of approved email domains (opens in new tab)</a>.</p>
22+
<p>You must use a personal NHS-approved email address. See the <a href="https://digital.nhs.uk/services/care-identity-service/applications-and-services/apply-for-care-id/care-identity-email-domain-allow-list" target="_blank">list of approved email domains (opens in new tab)</a>.</p>
2323

2424
<form action="/apply/check" method="post" novalidate="true">
2525

‎app/views/includes/header-logged-out.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
<nav aria-label="primary navigation" class="nhsuk-header__navigation" id="header-navigation" role="navigation">
1818
<ul class="nhsuk-header__navigation-list" style="border:0; margin-top: -4px;">
1919
<li class="nhsuk-header__navigation-item">
20-
<a class="nhsuk-header__navigation-link" href="/okta-sign-in">Log in</a>
20+
<div class="app-header__account-item">
21+
<a class="nhsuk-header__navigation-link" href="/okta-sign-in">Log in</a>
22+
</div>
2123
</li>
2224
</ul>
2325
</nav>

‎app/views/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ <h1>
3333

3434
<h2>Signed-out interface</h2>
3535

36-
<p><a href="/product-page">Product page</a></p>
37-
38-
<p><a href="/apply/start">Apply to use the service</a></p>
36+
<p><a href="/product-page">Product page</a></li></p>
3937

4038
<p><a href="/email-invite">Email invite</a></p>
4139

‎app/views/product-page.html‎

Lines changed: 138 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
<div class="nhsuk-grid-row">
1313
<div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet">
1414
<div class="nhsuk-hero__wrapper">
15-
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">Record NHS vaccinations safely and easily</h1>
15+
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record NHS vaccinations</h1>
1616

1717
<!-- <p class="nhsuk-body">Some words here</p> -->
1818

19-
<p class="nhsuk-body">Use this service to record COVID-19, flu, RSV and pertussis vaccinations.</p>
19+
<p class="nhsuk-body">Used by NHS trusts, pharmacies and GPs.</p>
2020

2121
{{ button({
2222
text: "Sign up for your pharmacy",
@@ -28,7 +28,7 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">Record NHS vaccinations safe
2828
</div>
2929
</div>
3030
<div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet">
31-
<img class="app-homepage-illustration" src="/images/personalised-prevention-services.svg" alt="" role="presentation">
31+
<img class="app-homepage-illustration" src="/images/homepage-illustration.png" alt="" role="presentation" style="width: 100%;">
3232
</div>
3333
</div>
3434
</div>
@@ -38,80 +38,183 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">Record NHS vaccinations safe
3838
<div class="nhsuk-main-wrapper">
3939
<div class="nhsuk-grid-row">
4040
<div class="nhsuk-grid-column-one-third">
41-
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Improve efficiency</h2>
41+
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Efficient</h2>
4242
<p>Save time by only capturing the essential information needed for an NHS vaccination record.</p>
4343
</div>
4444
<div class="nhsuk-grid-column-one-third">
45-
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Share data seamlessly</h2>
46-
<p>Every vaccination you record appears automatically in the GP system the next day.</p>
45+
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Integrated</h2>
46+
<p>Every vaccination you record appears automatically in GP&nbsp;records and in the NHS App.</p>
4747
</div>
4848
<div class="nhsuk-grid-column-one-third">
49-
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Create bespoke reports</h2>
50-
<p>Generate comprehensive reports to support your operational needs.</p>
49+
<h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Free to use</h2>
50+
<p>Built and owned by the NHS. Funded centrally for all NHS organisations.</p>
5151
</div>
5252
</div>
5353
</div>
5454
</div>
5555
</div>
5656

57+
<div style="background-color: #005eb8; color: white;">
5758
<div class="nhsuk-width-container" id="find-out-more">
5859
<div class="nhsuk-main-wrapper nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-4">
59-
<div style="width: 100px; height: 100px; background-color: #768692; border-radius: 50px; float: left;"></div>
60+
<div style="width: 100px; height: 100px; background-image: url('/images/pharmacist.jpg'); background-size: cover; border-radius: 50px; float: left;"></div>
6061
<div style="margin-left: 150px; max-width: 400px;" class="nhsuk-body nhsuk-u-font-size-26 nhsuk-u-margin-top-2">
6162
<blockquote class="nhsuk-u-padding-0 nhsuk-u-margin-0 nhsuk-u-margin-bottom-1">
62-
“This is a quote to illustrate how the service has worked for us.”
63+
“It's easy and quick to use. Our staff love it.”
6364
</blockquote>
64-
<div class="nhsuk-body nhsuk-u-font-size-19">– Jane Smith, Pharmacy name</div>
65+
66+
<div class="nhsuk-body nhsuk-u-font-size-19">– Sam Jenkins, Holloway Pharmacy</div>
6567
</div>
6668
<div style="clear:left;"></div>
6769
</div>
6870
</div>
71+
</div>
72+
73+
<div class="">
74+
75+
<div class="nhsuk-width-container" id="find-out-more">
76+
<div class="nhsuk-main-wrapper">
77+
<h2 class="nhuk-heading-l nhsuk-u-margin-bottom-5">How it works</h2>
78+
79+
<div class="nhsuk-grid-row">
80+
<div class="nhsuk-grid-column-one-half">
81+
<h3 class="nhsuk-heading-m app-numbered-heading">
82+
<span class="app-numbered-heading__number">1</span>
83+
<span class="app-numbered-heading__title">Sign up</span>
84+
</h3>
85+
<div class="app-numbered-heading__content">
86+
<p>Sign up with your NHS email and get an account straight away.</p>
87+
88+
<!-- <p>Signing up is quick and simple, whether you’re new to vaccinations or switching systems. </p> -->
89+
</div>
90+
</div>
91+
<div class="nhsuk-grid-column-one-half nhsuk-u-padding-left-8">
92+
<!-- [Screenshot?] -->
93+
</div>
94+
</div>
95+
96+
<div class="nhsuk-grid-row">
97+
<div class="nhsuk-grid-column-one-half">
98+
99+
<h3 class="nhsuk-heading-m app-numbered-heading">
100+
<span class="app-numbered-heading__number">2</span>
101+
<span class="app-numbered-heading__title">Get ready</span>
102+
</h3>
103+
<div class="app-numbered-heading__content">
104+
<p>Set up accounts for your colleagues and add vaccine products.</p>
105+
</div>
106+
</div>
107+
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
108+
<!-- [Screenshot?] -->
109+
</div>
110+
</div>
111+
112+
<div class="nhsuk-grid-row">
113+
<div class="nhsuk-grid-column-one-half">
114+
<h3 class="nhsuk-heading-m app-numbered-heading">
115+
<span class="app-numbered-heading__number">3</span>
116+
<span class="app-numbered-heading__title">Record vaccinations</span>
117+
</h3>
118+
<div class="app-numbered-heading__content">
119+
<p>Look up patients, check their vaccination history and record the vaccines given.</p>
120+
121+
<!-- <p>Simple, quick and clinically approved vaccination recording. </p> -->
122+
</div>
123+
</div>
124+
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
125+
<!-- [Screenshot?] -->
126+
</div>
127+
</div>
128+
129+
<div class="nhsuk-grid-row">
130+
<div class="nhsuk-grid-column-one-half">
131+
<h3 class="nhsuk-heading-m app-numbered-heading">
132+
<span class="app-numbered-heading__number">4</span>
133+
<span class="app-numbered-heading__title">Track performance</span>
134+
</h3>
135+
<div class="app-numbered-heading__content">
136+
<p>See how many vaccines you are giving. Download data you need for reporting.</p>
137+
</div>
138+
</div>
139+
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
140+
<!-- [Screenshot?] -->
141+
</div>
142+
</div>
143+
144+
145+
<div class="nhsuk-grid-row">
146+
<div class="nhsuk-grid-column-one-half">
147+
<h3 class="nhsuk-heading-m app-numbered-heading">
148+
<span class="app-numbered-heading__number">5</span>
149+
<span class="app-numbered-heading__title">Get paid</span>
150+
</h3>
151+
<div class="app-numbered-heading__content">
152+
<!-- <p><span class="nhsuk-tag nhsuk-tag--blue">Pharmacies</span></p> -->
153+
<p>Pharmacies are paid automatically by the NHS Business Services Authority (BSA).
154+
<!-- <span class="nhsuk-tag nhsuk-tag--blue">Pharmacies only</span> -->
155+
</p>
156+
</div>
157+
</div>
158+
<div class="nhsuk-grid-column-one-half nhsuk-u-margin-top-4 nhsuk-u-padding-left-8">
159+
<!-- [Screenshot?] -->
160+
</div>
161+
</div>
162+
</div>
163+
</div>
69164

70165
<div class="app-section--white">
71166

72167
<div class="nhsuk-width-container" id="find-out-more">
73168
<div class="nhsuk-main-wrapper">
74169
<div class="nhsuk-grid-row">
75-
<div class="nhsuk-grid-column-two-thirds">
170+
<div class="nhsuk-grid-column-one-third">
171+
<h3 class="nhsuk-heading-s">Helpdesk</h3>
76172

77-
<h2 class="nhuk-heading-l nhsuk-u-margin-bottom-5">Get started</h2>
173+
<p>0333 038 4268<br>
174+
<a href="mailto:[email protected]">[email protected]</a></p>
78175

79-
<h3 class="nhsuk-heading-m">Pharmacies can sign up now</h3>
80-
<p>All community pharmacies in England commissioned to deliver COVID-19 and flu vaccinations can use this service for free.</p>
176+
<p>Monday to Friday, 8am to 6pm</p>
81177

82-
<p class="nhsuk-body">The service is fully integrated with NHS Business Services Authority (NHSBSA) to make sure you are paid for each vaccination delivered.</p>
83178

84-
<p>If you own or run a pharmacy:</p>
85-
{{ actionLink({
86-
text: "Sign up",
87-
href: "/apply/start"
88-
}) }}
89-
<p>or <a href="#">try our demo site</a></p>
179+
</div>
90180

91-
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
181+
<div class="nhsuk-grid-column-one-third">
182+
<h3 class="nhsuk-heading-s">Training</h3>
92183

93-
<h3 class="nhsuk-heading-m">Maternity services</h3>
94-
<p>All NHS maternity services are using the service to record vaccinations.</p>
184+
<p>Regular online training sessions available.</p>
95185

96-
<p>You can record RSV, pertussis, COVID-19 and flu vaccinations.</p>
186+
<p><a href="https://outlook.office365.com/book/[email protected]/">Book an online webinar</a></p>
97187

98-
<p><a href="#">Get in contact</a></p>
188+
</div>
99189

100-
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
190+
<div class="nhsuk-grid-column-one-third">
191+
<h3 class="nhsuk-heading-s">Assurance</h3>
101192

102-
<h3 class="nhsuk-heading-m">NHS Hospital hubs and vaccination centres</h3>
193+
<p>Fully complies with NHS standards for clinical safety, information governance and cybersecurity.</p>
194+
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
103200

104-
<p>All NHS Trusts can use the service to record COVID-19 and flu vaccinations for staff and patients.</p>
105201

106-
<p class="nhsuk-body">Some text</p>
202+
<div class="xapp-section--white">
107203

204+
<div class="nhsuk-width-container" id="find-out-more">
205+
<div class="nhsuk-main-wrapper">
206+
<div class="nhsuk-grid-row">
207+
<div class="nhsuk-grid-column-two-thirds">
108208

109-
<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
209+
<h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-5">Pharmacies can sign up now</h2>
110210

111-
<h3 class="nhsuk-heading-m">GP groupings (PCNs)</h3>
112-
<p>Assurance for vaccinations delivered by GPs is pending.</p>
211+
<p>All community pharmacies in England offering COVID-19 or flu vaccinations can use this service for free.</p>
113212

114-
<p class="nhsuk-body">Some text</p>
213+
<!-- <p>If you own or run a pharmacy:</p> -->
214+
{{ actionLink({
215+
text: "Sign up",
216+
href: "/apply/start"
217+
}) }}
115218

116219
</div>
117220
</div>

0 commit comments

Comments
 (0)