About page layout and newsletter

www/docs/style/sass/pages/_about.scss

@@ -1,14 +1,59 @@
 .about-page {
     hr {
         max-width: none !important;
-        margin: 3em 0;
+        margin: 2em 0;
     }
 
     h2 {
         max-width: none !important;
     }
 }
 
+.about-section {
+    @include grid-row(collapse);
+
+    margin-bottom: 2em;
+    border-radius: 3px;
+    background-color: white;
+}
+
+.about-section__primary {
+    @include grid-column(12, $collapse: true);
+    padding: 1em;
+    border-bottom: 1px solid $colour_off_white;
+
+    @media (min-width: $medium-screen) {
+        padding: 2.5em 3em;
+    }
+
+    @media (min-width: $large-screen) {
+        @include grid-column(8, $collapse: true);
+        padding: 2.5em 3em;
+        border-bottom: none;
+        border-right: 1px solid $colour_off_white;
+    }
+}
+
+.about-section__secondary {
+    @include grid-column(12, $collapse: true);
+    padding: 1.5em;
+
+    @media (min-width: $medium-screen) {
+        padding: 2.5em 2em;
+    }
+
+    @media (min-width: $large-screen) {
+        @include grid-column(4, $collapse: true);
+        padding: 2.5em 2em;
+    }
+
+    a {
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: none;
+    }
+}
+
 .about-page__features {
     @include clearfix();
     list-style: none;
@@ -32,12 +77,6 @@
     }
 }
 
-.about-page__mysociety {
-    background: #fff url(../img/about-team-patchwork.jpg) 0 0 no-repeat;
-    background-size: 100%;
-    padding-top: 24%;
-}
-
 .about-page__donate {
     display: inline-block;
     max-width: none !important;

www/includes/easyparliament/templates/html/static/_newsletter.php

@@ -0,0 +1,33 @@
+<h1 aria-label="<?= gettext('About mySociety') ?>">
+    <?= gettext('About') ?>
+    <br>
+    <img src="/style/img/logo-mysociety-black.svg" alt="" width="225">
+</h1>
+<h3><?= gettext('Sign up for updates on our democracy and Parliaments work')?></h3>
+<form method="post" class="footer__newsletter-form" action="//mysociety.us9.list-manage.com/subscribe/post?u=53d0d2026dea615ed488a8834&amp;id=287dc28511" onsubmit="trackFormSubmit(this, 'FooterNewsletterSignup', 'submit', null); return false;">
+    <div class="row collapse">
+        <div class="small-8 columns">
+            <input type="email" placeholder="Your email address" name="EMAIL"/>
+        </div>
+        <div class="small-4 columns">
+            <label style="position: absolute; left: -5000px;">
+                Leave this box empty: <input type="text" name="b_53d0d2026dea615ed488a8834_287dc28511" tabindex="-1" value="" />
+            </label>
+            <input type="hidden" name="group[11745][4]" value="1">
+            <input type="submit" value="Subscribe" name="subscribe" class="button prefix">
+        </div>
+    </div>
+    <div class="row collapse">
+        <div class="small-12 columns">
+            <label>
+                <input type="checkbox" name="group[11745][32]" value="1" style="height: 1em;" checked>
+            Also sign up to the monthly mySociety newsletter
+            </label>
+        </div>
+    </div>
+</form>
+<hr>
+<p><?= gettext('TheyWorkForYou is run by <a href="https://www.mysociety.org/">mySociety</a>, a UK charity that helps people access information and participate in democracy. We enable people across the UK to become changemakers by providing technology, research and data, openly and for free.') ?></p>
+<p><?= gettext('Through <strong>TheyWorkForYou</strong> and <strong>WriteToThem</strong> we have made elected representatives more transparent and contactable. Every year, hundreds of thousands of reports are made through <strong>FixMyStreet</strong>, and over a million Freedom of Information requests have been made through <strong>WhatDoTheyKnow</strong>.') ?></p>
+
+<p><a href="https://www.mysociety.org/about/funding/"><?= gettext('Find out more about how mySociety is funded.') ?></a></p>