darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-06 00:48:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add pricing to the product page

Browse Source 
‘How much does it cost’ is one of the user needs that we identifed for
the product page.

Cost is not the primary reason someone would use Notify (they’re more
likely to cite ease, or that it’s ‘official’). However if you _don’t_
mention cost then it looks like we’re hiding something or that there’s
a catch. So putting it on the page allays fears that people might have,
rather than pushing them towards using it.

Visually I’ve dropped the size of the `<h2>`s on this page so that
there’s enough difference between them and the big numbers. The idea of
the big numbers being big is to catch people’s attention as they scroll
down the page, by breaking up the rythmn.
This commit is contained in:
Chris Hill-Scott
2016-12-14 14:59:41 +00:00
parent 0b0bd54a3e
commit a4e5c4a3bc
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/stylesheets/views/product-page.scss
View File

@@ -81,7 +81,7 @@
margin-bottom: $gutter-half;
h2 {
@include bold-36;
@include bold-27;
margin: 0 0 $gutter;
}
@@ -97,4 +97,9 @@
}
&-big-number {
@include bold-48($tabular-numbers: true);
margin: 0 0 0 0;
}
}

27
app/templates/views/signedout.html
View File

@@ -95,7 +95,32 @@
</div>
</div>
</div>
<div class="product-page-section bottom-gutter-2">
<div class="product-page-section">
<div class="with-keyline bottom-gutter-2">
<h2>Pricing</h2>
<div class="grid-row bottom-gutter">
<div class="column-half">
<h3 class="visually-hidden">Emails</h3>
<div class="product-page-big-number">Unlimited</div>
free emails
</div>
<div class="column-half">
<h3 class="visually-hidden">Text messages</h3>
<div class="product-page-big-number">250,000</div>
free text messages a year, then
1.65 pence per message
</div>
</div>
<div class="grid-row bottom-gutter">
<div class="column-three-quarters">
<p>
There’s no monthly charge, no setup fee and no procurement process.
</p>
</div>
</div>
</div>
</div>
<div class="product-page-section">
<div class="grid-row">
<div class="column-half">
<h2 class="with-keyline">