make moreinfo route /more-info > relates #26

public/js/splashtimeout.js

@@ -7,7 +7,7 @@ setTimeout(function(){
   form.classList.add('centered-content');
   bottomSection.appendChild(form);
   var btn = document.createElement('BUTTON');
-  btn.classList.add('big-btn', 'fade-in');
+  btn.classList.add('govuk-button', 'govuk-button--start', 'fade-in');
   btn.textContent = 'Get Started!';
   form.appendChild(btn)
 }, 3000);

public/stylesheets/main.scss

@@ -10,6 +10,7 @@
 
 @import 'bower_components/o-grid/main';
 @import '../../node_modules/govuk-frontend/components/checkboxes/checkboxes';
+@import '../../node_modules/govuk-frontend/components/button/button';
 @import url('https://fonts.googleapis.com/css?family=Montserrat:900|Source+Sans+Pro');
 
 // FONT VARIABLES

src/controllers/index.js

@@ -1,17 +1,19 @@
 const express = require('express');
 const router = express.Router();
 const bodyParser = require('body-parser');
-const home = require('./home')
-const welcome = require('./welcome')
-const background = require('./background')
-const resources = require('./resources')
-const error = require('./error')
+const home = require('./home');
+const welcome = require('./welcome');
+const background = require('./background');
+const resources = require('./resources');
+const error = require('./error');
+const moreinfo = require('./moreinfo');
 
 router.use(bodyParser.urlencoded({extended: true}));
 router.get('/', home.get);
 router.get('/welcome', welcome.get);
 router.get('/background', background.get);
 router.get('/resources', resources.get);
+router.get('/more-info', moreinfo.get);
 
 // trigger 500 error for testing
 

src/controllers/moreinfo.js

@@ -0,0 +1,5 @@
+exports.get = (req, res) => {
+  res.render('moreinfo', {
+    layout: 'scrollable'
+  });
+}

src/views/background.hbs

@@ -84,7 +84,7 @@
 <section class='grid-row'>
   <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1'>
     <form action='/resources' class='centered-content'>
-      <button class="big-btn">Gimme resources!</button>
+      <button class="govuk-button">Gimme resources!</button>
     </form>
   </div>
 </section>

src/views/moreinfo.hbs

@@ -0,0 +1,17 @@
+<nav class='grid-row'>
+    <div class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1'>
+      <h1>More info</h1>
+    </div>
+</nav>
+<section class='grid-row'>
+    <div class='centered-column centered-content secondary-background thirtytwo-padding full-height'>
+        <p>If you'd like to, you can give us more detail about your background. We can't use these to tailor your results yet, but we hope to use this infromation to improve our service down the line.</p>
+    </div>
+</section>
+<section class='grid-row'>
+    <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1'>
+        <form action='/background' class='centered-content'>
+            <button class="govuk-button">Let's go!</button>
+        </form>
+    </div>
+</section>

src/views/resources.hbs

@@ -48,7 +48,7 @@
 <section class='grid-row'>
   <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1'>
     <form action='/background' class='centered-content'>
-      <button class="big-btn">Get dem results!</button>
+      <button class="govuk-button">Get dem results!</button>
     </form>
   </div>
 </section>

src/views/welcome.hbs

@@ -11,7 +11,7 @@
 <section class='grid-row'>
     <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1'>
         <form action='/background' class='centered-content'>
-            <button class="big-btn">Let's go!</button>
+            <button class="govuk-button govuk-button--start">Let's go!</button>
         </form>
     </div>
 </section>