Skip to content

Commit 43218b5

Browse files
kevinsinclairdwpkevinsinclairdwp
committed
updates to pip home intro page and index
1 parent 6fda012 commit 43218b5

15 files changed

+352
-101
lines changed

‎app/assets/images/S1.png

23.2 KB
Loading

‎app/assets/images/S2.png

23.9 KB
Loading

‎app/assets/images/S3.png

23.5 KB
Loading

‎app/assets/images/S4.png

23 KB
Loading

‎app/assets/images/card1.png

27.1 KB
Loading

‎app/assets/images/card2.png

15.4 KB
Loading

‎app/assets/sass/application.scss

+5
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,8 @@
44
//
55

66
// Add extra styles here
7+
8+
.dwp-horizontal-navigation__item--selected{
9+
10+
font-weight: 700;
11+
}

‎app/views/index.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,13 @@ <h1 class="govuk-heading-xl">Prototype Home</h1>
1616

1717
<div class="govuk-grid-row">
1818
<div class="govuk-grid-column-full">
19-
<h1 class="govuk-heading-l">
20-
21-
Hello world
22-
23-
24-
<h3 class="govuk-heading-s">
25-
19+
<h3 class="govuk-heading-m">Useful links </h3>
20+
21+
<h3 class="govuk-heading-s">
22+
<li> <a
23+
href="../v0/main-1">PIP Home</a> </li>
2624

25+
</h3>
2726
</div>
2827
</div>
2928

‎app/views/v0/landing.html

-42
This file was deleted.

‎app/views/v0/main-1.html

+54-41
Original file line numberDiff line numberDiff line change
@@ -8,70 +8,83 @@
88
<!-- Standard GOV.UK header with username -->
99
{{ govukHeader({
1010
homepageUrl: "/",
11-
serviceName: "Your service name",
11+
serviceName: "Apply for Personal Independence Payment (PIP)",
1212
serviceUrl: "/",
1313
navigation: [
1414
{
1515
href: "#",
16-
text: "UserName"
16+
text: "Help and contact"
17+
},
18+
19+
{
20+
href: "#",
21+
text: "Sign out"
22+
},
23+
24+
{
25+
href: "/v0/main-2",
26+
text: "Next"
1727
}
28+
29+
1830
]
1931
}) }}
2032
{% endblock %}
2133

2234
{% block content %}
23-
<div class="govuk-grid-row">
24-
<div class="govuk-grid-column-two-thirds">
25-
<!-- H1 heading -->
26-
<h1 class="govuk-heading-xl">Home</h1>
35+
36+
<div class="govuk-grid-row">
37+
<div class="govuk-grid-column-full">
38+
39+
<!-- <div class="govuk-width-container">
40+
<main class="govuk-main-wrapper"> -->
41+
<!-- <div class="govuk-grid-row"> -->
42+
<h1 class="govuk-caption-xl">UserName</h1>
43+
<h1 class="govuk-heading-xl govuk-!-margin-bottom-2">PIP Home</h1>
44+
2745

2846
<!-- Horizontal navigation from DWP design system -->
29-
<nav class="dwp-navigation" aria-label="Navigation">
30-
<ul class="dwp-navigation__list">
31-
<li class="dwp-navigation__item dwp-navigation__item--active">
32-
<a class="dwp-navigation__link" href="#" aria-current="page">Your application</a>
33-
</li>
47+
<nav class="dwp-horizontal-navigation" aria-label="Horizontal">
48+
<ul class="dwp-horizontal-navigation__list">
49+
<li class="dwp-horizontal-navigation__item dwp-horizontal-navigation__item--selected">
50+
<a id="s-item-1" href="#s-item-1" class="dwp-horizontal-navigation__link" aria-current="true">Your application</a>
51+
</li>
52+
<li class="dwp-horizontal-navigation__item">
53+
<!-- <a id="s-item-2" href="#s-item-2" class="dwp-horizontal-navigation__link">Item 2</a> -->
54+
</li>
55+
<li class="dwp-horizontal-navigation__item">
56+
<!-- <a id="s-item-3" href="#s-item-3" class="dwp-horizontal-navigation__link">Item 3</a> -->
57+
</li>
3458
</ul>
35-
</nav>
59+
</nav>
60+
61+
<br>
62+
<br>
63+
<br>
64+
65+
<img src="/public/images/S1.png" alt="Description" style="width: 100%; height: auto;"/>
3666

37-
<!-- Progress bar component -->
38-
<div class="app-progress-bar">
39-
<ol class="app-progress-bar__list">
40-
<li class="app-progress-bar__item app-progress-bar__item--current">
41-
<span class="app-progress-bar__icon"></span>
42-
<span class="app-progress-bar__label">Step 1</span>
43-
</li>
44-
<li class="app-progress-bar__item">
45-
<span class="app-progress-bar__icon"></span>
46-
<span class="app-progress-bar__label">Step 2</span>
47-
</li>
48-
<li class="app-progress-bar__item">
49-
<span class="app-progress-bar__icon"></span>
50-
<span class="app-progress-bar__label">Step 3</span>
51-
</li>
52-
<li class="app-progress-bar__item">
53-
<span class="app-progress-bar__icon"></span>
54-
<span class="app-progress-bar__label">Step 4</span>
55-
</li>
56-
<li class="app-progress-bar__item">
57-
<span class="app-progress-bar__icon"></span>
58-
<span class="app-progress-bar__label">Step 5</span>
59-
</li>
60-
</ol>
61-
</div>
67+
<br>
68+
<br>
6269

63-
<!-- H2 heading -->
64-
<h2 class="govuk-heading-l">Title</h2>
70+
<div class="govuk-grid-row">
71+
<div class="govuk-grid-column-one-half">
72+
<!-- H2 heading -->
73+
<h3 class="govuk-heading-m">Your details</h3>
6574

75+
76+
6677
<!-- Paragraph section -->
6778
<p class="govuk-body">
68-
This is the paragraph section where you can provide information to the user.
79+
Tell us about you, your health or care providers and if you have any communication needs.
6980
</p>
7081

7182
<!-- Link to other content -->
7283
<p class="govuk-body">
73-
<a href="#" class="govuk-link">Link to other content</a>
84+
<a href="#" class="govuk-link">Start your application</a>
7485
</p>
7586
</div>
87+
</div>
88+
</div>
7689
</div>
7790
{% endblock %}

‎app/views/v0/main-2.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
{% extends "layouts/main.html" %}
2+
3+
{% block pageTitle %}
4+
Home - Your Application
5+
{% endblock %}
6+
7+
{% block header %}
8+
<!-- Standard GOV.UK header with username -->
9+
{{ govukHeader({
10+
homepageUrl: "/",
11+
serviceName: "Apply for Personal Independence Payment (PIP)",
12+
serviceUrl: "/",
13+
navigation: [
14+
{
15+
href: "#",
16+
text: "Help and contact"
17+
},
18+
19+
{
20+
href: "#",
21+
text: "Sign out"
22+
},
23+
24+
{
25+
href: "/v0/main-3",
26+
text: "Next"
27+
}
28+
29+
30+
31+
]
32+
}) }}
33+
{% endblock %}
34+
35+
{% block content %}
36+
37+
<div class="govuk-grid-row">
38+
<div class="govuk-grid-column-full">
39+
40+
<!-- <div class="govuk-width-container">
41+
<main class="govuk-main-wrapper"> -->
42+
<!-- <div class="govuk-grid-row"> -->
43+
<h1 class="govuk-caption-xl">UserName</h1>
44+
<h1 class="govuk-heading-xl govuk-!-margin-bottom-2">PIP Home</h1>
45+
46+
47+
<!-- Horizontal navigation from DWP design system -->
48+
<nav class="dwp-horizontal-navigation" aria-label="Horizontal">
49+
<ul class="dwp-horizontal-navigation__list">
50+
<li class="dwp-horizontal-navigation__item dwp-horizontal-navigation__item--selected">
51+
<a id="s-item-1" href="#s-item-1" class="dwp-horizontal-navigation__link" aria-current="true">Your application</a>
52+
</li>
53+
<li class="dwp-horizontal-navigation__item">
54+
<!-- <a id="s-item-2" href="#s-item-2" class="dwp-horizontal-navigation__link">Item 2</a> -->
55+
</li>
56+
<li class="dwp-horizontal-navigation__item">
57+
<!-- <a id="s-item-3" href="#s-item-3" class="dwp-horizontal-navigation__link">Item 3</a> -->
58+
</li>
59+
</ul>
60+
</nav>
61+
62+
<br>
63+
<br>
64+
<br>
65+
66+
<img src="/public/images/S2.png" alt="Description" style="width: 100%; height: auto;"/>
67+
68+
<br>
69+
<br>
70+
71+
<div class="govuk-grid-row">
72+
<div class="govuk-grid-column-one-half">
73+
<!-- H2 heading -->
74+
<h3 class="govuk-heading-m">Your health and daily life</h3>
75+
76+
77+
78+
<!-- Paragraph section -->
79+
<p class="govuk-body">
80+
Tell us about your health condition or disability and how it affects you. There are 16 sections to complete.
81+
</p>
82+
83+
<!-- Link to other content -->
84+
<p class="govuk-body">
85+
<a href="#" class="govuk-link">Continue your application</a>
86+
</p>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
{% endblock %}

‎app/views/v0/main-3.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{% extends "layouts/main.html" %}
2+
3+
{% block pageTitle %}
4+
Home - Your Application
5+
{% endblock %}
6+
7+
{% block header %}
8+
<!-- Standard GOV.UK header with username -->
9+
{{ govukHeader({
10+
homepageUrl: "/",
11+
serviceName: "Apply for Personal Independence Payment (PIP)",
12+
serviceUrl: "/",
13+
navigation: [
14+
{
15+
href: "#",
16+
text: "Help and contact"
17+
},
18+
19+
{
20+
href: "#",
21+
text: "Sign out"
22+
},
23+
24+
{
25+
href: "/v0/main-4",
26+
text: "Next"
27+
}
28+
29+
30+
31+
]
32+
}) }}
33+
{% endblock %}
34+
35+
{% block content %}
36+
37+
{{ govukNotificationBanner({
38+
title: "Important",
39+
html: "<strong>Before we can review your application, <span style='white-space: nowrap;'>you need to </span>confirm your identity.</strong>"
40+
}) }}
41+
42+
43+
<div class="govuk-grid-row">
44+
<div class="govuk-grid-column-full">
45+
46+
<!-- <div class="govuk-width-container">
47+
<main class="govuk-main-wrapper"> -->
48+
<!-- <div class="govuk-grid-row"> -->
49+
<h1 class="govuk-caption-xl">UserName</h1>
50+
<h1 class="govuk-heading-xl govuk-!-margin-bottom-2">PIP Home</h1>
51+
52+
53+
<!-- Horizontal navigation from DWP design system -->
54+
<nav class="dwp-horizontal-navigation" aria-label="Horizontal">
55+
<ul class="dwp-horizontal-navigation__list">
56+
<li class="dwp-horizontal-navigation__item dwp-horizontal-navigation__item--selected">
57+
<a id="s-item-1" href="#s-item-1" class="dwp-horizontal-navigation__link" aria-current="true">Your application</a>
58+
</li>
59+
<li class="dwp-horizontal-navigation__item">
60+
<!-- <a id="s-item-2" href="#s-item-2" class="dwp-horizontal-navigation__link">Item 2</a> -->
61+
</li>
62+
<li class="dwp-horizontal-navigation__item">
63+
<!-- <a id="s-item-3" href="#s-item-3" class="dwp-horizontal-navigation__link">Item 3</a> -->
64+
</li>
65+
</ul>
66+
</nav>
67+
68+
<br>
69+
<br>
70+
<br>
71+
72+
<img src="/public/images/S3.png" alt="Description" style="width: 100%; height: auto;"/>
73+
74+
<br>
75+
<br>
76+
77+
<div class="govuk-grid-row">
78+
<div class="govuk-grid-column-full">
79+
<!-- H2 heading -->
80+
<h3 class="govuk-heading-m">Your details</h3>
81+
82+
83+
<img src="/public/images/card1.png" alt="Description" style="width: 100%; height: auto;"/>
84+
85+
<!-- Paragraph section -->
86+
87+
88+
<!-- Link to other content -->
89+
<p class="govuk-body">
90+
<!-- <a href="#" class="govuk-link">Start your application</a> -->
91+
</p>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
{% endblock %}

0 commit comments

Comments
 (0)