Add new "next steps" to bottom of success pages.

Remove the old CrossSell code. Fixes #972.

22 files changed, 138 insertions, 377 deletions

diff --git a/conf/general.yml-example b/conf/general.yml-example
index 26e12c322..37e81ad5b 100644
--- a/conf/general.yml-example
+++ b/conf/general.yml-example
@@ -190,6 +190,3 @@ KASABI_API_KEY: ''
 LONDON_REPORTIT_URL: ''
 LONDON_REPORTIT_KEY: ''
 LONDON_REPORTIT_SECRET: ''
-AUTH_SHARED_SECRET: ''
-HEARFROMYOURMP_BASE_URL: ''
-
diff --git a/notes/no-update-server b/notes/no-update-server
index da3656829..74836bcbf 100644
--- a/notes/no-update-server
+++ b/notes/no-update-server
@@ -333,9 +333,6 @@ GAZE_URL: 'http://gaze.mysociety.org/gaze'
 # empty = use /usr/sbin/sendmail'
 SMTP_SMARTHOST: ''
 
-AUTH_SHARED_SECRET: ''
-HEARFROMYOURMP_BASE_URL: ''
-
 ANDROID_URL: 'http://wiki.nuug.no/grupper/fiksgatami/android'
 
 ALLOWED_COBRANDS: 'fiksgatami'
diff --git a/perllib/CrossSell.pm b/perllib/CrossSell.pm
deleted file mode 100644
index 9567c2b38..000000000
--- a/perllib/CrossSell.pm
+++ /dev/null
@@ -1,297 +0,0 @@
-# CrossSell.pm:
-# Adverts from FixMyStreet to another site.
-#
-# Unlike the PHP crosssell script, returns strings rather than prints them;
-# and currently displays the same advert if e.g. there's a connection problem.
-# 
-# Copyright (c) 2007 UK Citizens Online Democracy. All rights reserved.
-# Email: matthew@mysociety.org. WWW: http://www.mysociety.org
-#
-# $Id: CrossSell.pm,v 1.17 2009-09-10 09:36:42 matthew Exp $
-
-# Config parameters site needs set to call these functions:
-# OPTION_AUTH_SHARED_SECRET
-# OPTION_HEARFROMYOURMP_BASE_URL
-
-package CrossSell;
-
-use strict;
-use LWP::Simple qw($ua get);
-use URI::Escape;
-use mySociety::AuthToken;
-use mySociety::Web qw(ent);
-
-sub display_random_hfymp_advert {
-    my ($email, $name, $text) = @_;
-    $name ||= '';
-    my $auth_signature = mySociety::AuthToken::sign_with_shared_secret($email, mySociety::Config::get('AUTH_SHARED_SECRET'));
-
-    # See if already signed up
-    my $url = mySociety::Config::get('HEARFROMYOURMP_BASE_URL');
-    my $already_signed = get($url . '/authed?email=' . uri_escape($email) . "&sign=" . uri_escape($auth_signature));
-    # Different from PHP version; display this advert if e.g. connection problem
-    return '' if $already_signed && $already_signed eq 'already signed';
-
-    $email = ent($email);
-    $name = ent($name);
-    $auth_signature = ent($auth_signature);
-    $text =~ s#\[form\]#<form action="http://www.hearfromyourmp.com/" method="post">
-<input type="hidden" name="name" value="$name">
-<input type="hidden" name="email" value="$email">
-<input type="hidden" name="sign" value="$auth_signature">
-<h2><input style="font-size:100%" type="submit" value="#;
-    $text =~ s#\[/form\]#"></h2>#;
-
-    return '<div id="advert_hfymp">' . $text . '</div>';
-}
-
-sub display_random_gny_advert {
-    my ($email, $name, $text) = @_;
-    return '<div id="advert_thin">' . $text . '</div>';
-}
-
-sub display_random_twfy_alerts_advert {
-    my ($email, $name, $text) = @_;
-    my $auth_signature = mySociety::AuthToken::sign_with_shared_secret($email, mySociety::Config::get('AUTH_SHARED_SECRET'));
-    $text =~ s#\[button\]#<form action="http://www.theyworkforyou.com/alert/" method="post">
-<input type="hidden" name="email" value="$email">
-<input type="hidden" name="sign" value="$auth_signature">
-<input type="hidden" name="site" value="fms">
-<input style="font-size:150%" type="submit" value="#;
-    $text =~ s#\[/button\]#"></p>#;
-    return '<div id="advert_thin">' . $text . '</div>';
-}
-
-sub display_hfyc_cheltenham_advert {
-    my ($email, $name) = @_;
-    $name ||= '';
-    my $auth_signature = mySociety::AuthToken::sign_with_shared_secret($email, mySociety::Config::get('AUTH_SHARED_SECRET'));
-
-    # See if already signed up
-    my $already_signed = get('http://cheltenham.hearfromyourcouncillor.com/authed?email=' . uri_escape($email) . "&sign=" . uri_escape($auth_signature));
-    # Different from PHP version; display this advert if e.g. connection problem
-    return '' if $already_signed && $already_signed eq 'already signed';
-
-    # If not, display advert
-    $email = ent($email);
-    $name = ent($name);
-    $auth_signature = ent($auth_signature);
-    my $out = <<EOF;
-<form action="http://cheltenham.hearfromyourcouncillor.com/" method="post">
-<input type="hidden" name="name" value="$name">
-<input type="hidden" name="email" value="$email">
-<input type="hidden" name="sign" value="$auth_signature">
-<div id="advert_thin">
-EOF
-
-    my $rand = int(rand(2));
-    if ($rand == 0) {
-        $out .= "<h2>Cool! You're interested in Cheltenham!</h2>
-        <p>We've got an exciting new free service that works exclusively
-        for people in Cheltenham. Please sign up to help the charity
-        that runs WriteToThem, and to get a sneak preview of our new
-        service.</p>";
-    } else {
-        $out .= "<h2>Get to know your councillors.</h2>
-        <p>Local councillors are really important, but hardly anyone knows them.
-        Use our new free service to build a low-effort, long term relationship
-        with your councillor.</p>";
-    }
-    $out .= <<EOF;
-<p align="center">
-<input type="submit" value="Sign up to HearFromYourCouncillor">
-</p>
-</div>
-</form>
-EOF
-    return ($out, "cheltenhamhfyc$rand");
-}
-
-sub display_democracyclub {
-    my (%input) = @_;
-    return <<EOF;
-<div id="advert_thin">
-<h2 style="margin-bottom:0">Help make the next election the most accountable ever</h2> <p style="font-size:120%;margin-top:0.5em;"><a href="http://www.democracyclub.org.uk/">Join Democracy Club</a> and have fun keeping an eye on your election candidates. <a href="http://www.democracyclub.org.uk/">Sign me up</a>!
-</div>
-EOF
-}
-
-sub display_news_form {
-    my (%input) = @_;
-    my %input_h = map { $_ => $input{$_} ? ent($input{$_}) : '' } qw(name email signed_email);
-    my $auth_signature = $input_h{signed_email};
-    return <<EOF;
-<h1 style="padding-top:0.5em">mySociety newsletter</h1>
-
-<p>Interested in hearing more about FixMyStreet successes? Enter your email
-address below and we&rsquo;ll send you occasional emails about what mySociety
-and our users have been up to.</p>
-
-<form method="post" action="//mysociety.us9.list-manage.com/subscribe/post?u=53d0d2026dea615ed488a8834&id=287dc28511">
-<label style="position: absolute; left: -5000px;">
-Leave this box empty: <input type="text" name="b_53d0d2026dea615ed488a8834_287dc28511" tabindex="-1" value="" />
-</label>
-<label for="name">Name:</label>
-<input type="text" name="NAME" id="name" value="$input_h{name}" size="30">
-<br><label for="email">Email:</label>
-<input type="text" name="EMAIL" id="email" value="$input_h{email}" size="30">
-&nbsp; <input type="submit" name="subscribe" value="Add me to the list">
-</form>
-
-<p>mySociety respects your privacy, and we'll never sell or give away your private
-details. You can unsubscribe at any time.</p>
-EOF
-}
-
-sub display_survey_link {
-    return <<EOF;
-<h1 style="padding-top:0.5em">User Survey</h1>
-<p>
-We're running a survey to help us understand who uses our sites. If you have 10-15 minutes to spare then we'd be grateful if you could <a href="http://questions.mysociety.org/S/fms/w/" target="_blank">take part</a>.
-</p>
-EOF
-}
-
-sub display_wtt_link {
-    return <<EOF;
-<h1 style="padding-top:0.5em">WriteToThem</h1>
-<p>
-Need to write to a politician? Try <a href="https://writetothem.com">WriteToThem</a> - great 
-for campaigns too.
-</p>
-EOF
-}
-
-sub display_app_links {
-    return <<EOF;
-<h1>Next time, report your issue quicker.</h1>
-<p>Download our awesome app, and make reporting and monitoring issues on the go a breeze.</p>
-
-<p class="app-links">
-<a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet">
-  <img alt="FixMyStreet Android app on Google Play"
-       src="/cobrands/fixmystreet/images/google_play_logo.png" />
-</a><a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545">
-  <img alt="FixMyStreet app on the App Store"
-       src="/cobrands/fixmystreet/images/itunes_store_logo.png" />
-</a>
-</p>
-
-<p class="desktop-advice">Not on your mobile? No problem! Download now, and the app will be ready to use when you next pick up your phone.</p>
-EOF
-}
-
-# Not currently used, needs more explanation and testing; perhaps in future.
-sub display_gny_groups {
-    my ($lon, $lat) = @_;
-    my $groups = get("http://www.groupsnearyou.com/rss.php?q=$lon,$lat&category=1&pointonly=1");
-    my $out = '';
-    my $count = 0;
-    while ($groups =~ /<item>\s*<title>New group! (.*?)<\/title>.*?<guid isPermaLink="true">(.*?)<\/guid>.*?<description>(.*?)<\/description>/gs) {
-        $out .= "<li><a href='$2'>$1</a> $3";
-        $count++;
-    }
-    return unless $out;
-    return <<EOF;
-<h1 style="padding-top:0.5em">$count local groups</h1>
-<ul>
-$out
-</ul>
-EOF
-}
-
-# Choose appropriate advert and display it.
-# $this_site is to stop a site advertising itself.
-sub display_advert ($$;$%) {
-    my ($c, $email, $name, %data) = @_;
-
-    return '' unless $c->cobrand->moniker eq 'fixmystreet';
-
-    $ua->timeout(5);
-
-    #if (defined $data{council} && $data{council} eq '2326') {
-    #    my ($out, $ad) = display_hfyc_cheltenham_advert($email, $name);
-    #    if ($out) {
-    #        $c->stash->{scratch} = "advert=$ad";
-    #        return $out;
-    #    }
-    #}
-
-    #if ($data{lat}) {
-    #    my $out = display_gny_groups($data{lon}, $data{lat});
-    #    if ($out) {
-    #        $c->stash->{scratch} = 'advert=gnygroups';
-    #        return '<div style="margin: 0 5em; border-top: dotted 1px #666666;">'
-    #            . $out . '</div>';
-    #    }
-    #}
-
-    #$c->stash->{scratch} = 'advert=demclub0';
-    #return display_democracyclub();
-
-#    return <<EOF;
-#<div id="advert_thin">
-#<p>Do you have an issue that&rsquo;s too big for FixMyStreet?
-#It could be time to petition your council. Try our new site:
-#<h2 style="margin-top:0; font-size: 150%">
-#<a href="http://www.petitionyourcouncil.com/">PetitionYourCouncil</a></p>
-#</h2>
-#</div>
-#EOF
-
-    #unless (defined $data{done_tms} && $data{done_tms}==1) {
-    $c->stash->{scratch} = 'advert=wtt';
-    return '<div class="advert-mobile-apps">'
-        . display_app_links()
-        . '</div>';
-
-    $c->stash->{scratch} = 'advert=news';
-    my $auth_signature = '';
-    unless (defined $data{emailunvalidated} && $data{emailunvalidated}==1) {
-        $auth_signature = mySociety::AuthToken::sign_with_shared_secret($email, mySociety::Config::get('AUTH_SHARED_SECRET'));
-    }
-    return '<div style="margin: 0 5em; border-top: dotted 1px #666666;">'
-        . display_news_form(email => $email, name => $name, signed_email => $auth_signature)
-        . '</div>';
-    #}
-
-    my @adverts = (
-        [ 'gny0', '<h2>Are you a member of a local group&hellip;</h2> &hellip;which uses the internet to coordinate itself, such as a neighbourhood watch? If so, please help the charity that runs FixMyStreet by <a href="http://www.groupsnearyou.com/add/about/">adding some information about it</a> to our new site, GroupsNearYou.' ],
-        [ 'gny1', '<h2>Help us build a map of the world&rsquo;s local communities &ndash;<br><a href="http://www.groupsnearyou.com/add/about/">Add one to GroupsNearYou</a></h2>' ],
-        #  Since you're interested in your local area, why not
-        #  start a long term relationship with your MP?
-        #[ 'hfymp0', '<h2 style="margin-bottom:0">Get email from your MP in the future</h2> <p style="font-size:120%;margin-top:0;">and have a chance to discuss what they say in a public forum [form]Sign up to HearFromYourMP[/form]' ],
-        #[ 'twfy_alerts0', '<h2>Get emailed every time your MP says something in Parliament</h2> [button]Keep an eye on them for free![/button]' ],
-    );
-    while (@adverts) {
-        my $rand = int(rand(scalar @adverts));
-        next unless $adverts[$rand];
-        my ($advert_id, $advert_text) = @{$adverts[$rand]};
-        (my $advert_site = $advert_id) =~ s/\d+$//;
-        my $func = "display_random_${advert_site}_advert";
-        no strict 'refs';
-        my $out = &$func($email, $name, $advert_text);
-        use strict 'refs';
-        if ($out) {
-            $c->stash->{scratch} = "advert=$advert_id";
-            return $out;
-        }
-
-        for (my $i=0; $i<@adverts; $i++) {
-            (my $a = $adverts[$i][0]) =~ s/\d+$//;
-            delete $adverts[$i] if $advert_site eq $a;
-        }
-    }
-
-    $c->stash->{scratch} = 'advert=pb';
-    return <<EOF;
-<div id="advert_thin">
-<h2 style="font-size: 150%">
-If you're interested in improving your local area,
-<a href="http://www.pledgebank.com/">use PledgeBank</a> to
-do so with other people!</h2>
-</div>
-EOF
-}
-
-1;
diff --git a/perllib/FixMyStreet/App/View/Web.pm b/perllib/FixMyStreet/App/View/Web.pm
index 033ad583f..da549ece8 100644
--- a/perllib/FixMyStreet/App/View/Web.pm
+++ b/perllib/FixMyStreet/App/View/Web.pm
@@ -7,7 +7,6 @@ use warnings;
 use mySociety::Locale;
 use mySociety::Web qw(ent);
 use FixMyStreet;
-use CrossSell;
 use Utils;
 
 __PACKAGE__->config(
@@ -18,7 +17,7 @@ __PACKAGE__->config(
     ENCODING       => 'utf8',
     render_die     => 1,
     expose_methods => [
-        'loc', 'nget', 'tprintf', 'display_crosssell_advert', 'prettify_dt',
+        'loc', 'nget', 'tprintf', 'prettify_dt',
         'add_links', 'version', 'decode',
     ],
     FILTERS => {
@@ -79,19 +78,6 @@ sub tprintf {
     return sprintf $format, @args;
 }
 
-=head2 display_crosssell_advert
-
-    [% display_crosssell_advert( email, name ) %]
-
-Displays a crosssell advert (will be fixmystreet cobrand only).
-
-=cut
-
-sub display_crosssell_advert {
-    my ( $self, $c, $email, $name, %data ) = @_;
-    return CrossSell::display_advert( $c, $email, $name, %data );
-}
-
 =head2 Utils::prettify_dt
 
     [% pretty = prettify_dt( $dt, $short_bool ) %]
diff --git a/templates/web/base/contact/submit.html b/templates/web/base/contact/submit.html
index fc416c2d7..ce57f648f 100644
--- a/templates/web/base/contact/submit.html
+++ b/templates/web/base/contact/submit.html
@@ -1,13 +1,12 @@
-[% INCLUDE 'header.html', title = loc('Contact Us'), bodyclass = 'fullwidthpage' %]
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Contact Us') %]
 
 <h1>[% loc('Contact the team') %]</h1>
- 
+
 [% IF success %]
 
     <p>
     [% loc("Thanks for your feedback.  We'll get back to you as soon as we can!") %]
     </p>
-    [% display_crosssell_advert( em, form_name, 'emailunvalidated', 1 ) %]
 
 [% ELSE %]
 
@@ -17,4 +16,6 @@
 
 [% END %]
 
+[% INCLUDE next_steps.html %]
+
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/next_steps.html b/templates/web/base/next_steps.html
new file mode 100644
index 000000000..9d5b22c80
--- /dev/null
+++ b/templates/web/base/next_steps.html
@@ -0,0 +1,5 @@
+[%#
+Override this file in your cobrand to show promotions or suggested next steps
+to your users after they perform major interactions like confirming or updating
+problem reports, setting up local area alerts, or signing out.
+%]
diff --git a/templates/web/base/questionnaire/completed.html b/templates/web/base/questionnaire/completed.html
index 4d848a63c..1373a084f 100644
--- a/templates/web/base/questionnaire/completed.html
+++ b/templates/web/base/questionnaire/completed.html
@@ -1,28 +1,24 @@
-[%
-    INCLUDE 'header.html', title = loc('Questionnaire')
-%]
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Questionnaire') %]
 
 [% advert_outcome = 1 %]
 
 [% IF been_fixed == 'Unknown' %]
-
-[% loc('<p>Thank you very much for filling in our questionnaire; if you
-get some more information about the status of your problem, please come back to the
-site and leave an update.</p>') %]
+    [% loc('<p>Thank you very much for filling in our questionnaire; if you
+    get some more information about the status of your problem, please come back to the
+    site and leave an update.</p>') %]
 
 [% ELSIF new_state == 'confirmed' OR (!new_state AND problem.is_open) OR (!new_state AND problem.is_closed) %]
-
-[% INCLUDE 'questionnaire/completed-open.html' %]
-[% advert_outcome = 0 %]
+    [% INCLUDE 'questionnaire/completed-open.html' %]
+    [% advert_outcome = 0 %]
 
 [% ELSIF been_fixed == 'Yes' %]
-
-[% loc('<p style="font-size:150%">Thank you very much for filling in our questionnaire; glad to hear it&rsquo;s been fixed.</p>') %]
+    [% loc('<p style="font-size:150%">Thank you very much for filling in our questionnaire; glad to hear it&rsquo;s been fixed.</p>') %]
 
 [% END %]
 
 [% IF advert_outcome %]
-    [% display_crosssell_advert( problem.user.email, problem.name, 'council', problem.bodies_str ) %]
+    [% INCLUDE next_steps.html %]
+
 [% END %]
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/tokens/confirm_alert.html b/templates/web/base/tokens/confirm_alert.html
index a33f7e92a..d7fbe4d7c 100644
--- a/templates/web/base/tokens/confirm_alert.html
+++ b/templates/web/base/tokens/confirm_alert.html
@@ -15,6 +15,6 @@
 
 </div>
 
-[% display_crosssell_advert( alert.user.email, alert.user.name ) %]
+[% INCLUDE next_steps.html %]
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/tokens/confirm_problem.html b/templates/web/base/tokens/confirm_problem.html
index 8c92c874a..3346ce287 100644
--- a/templates/web/base/tokens/confirm_problem.html
+++ b/templates/web/base/tokens/confirm_problem.html
@@ -35,6 +35,11 @@
 
 </div>
 
-[% display_crosssell_advert( problem.user.email, problem.name ) %]
+[% INCLUDE
+  next_steps.html,
+  just_interacted = 1,
+  share_url = c.cobrand.base_url_for_report(problem) _ problem.url,
+  twitter_comment = 'I just reported a problem on @fixmystreet'
+%]
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/tokens/confirm_update.html b/templates/web/base/tokens/confirm_update.html
index 21fcfc4ff..a89da8555 100644
--- a/templates/web/base/tokens/confirm_update.html
+++ b/templates/web/base/tokens/confirm_update.html
@@ -19,6 +19,11 @@
 
 </div>
 
-[% display_crosssell_advert( update.user.email, update.name ) %]
+[% INCLUDE
+  next_steps.html,
+  just_interacted = 1,
+  share_url = c.cobrand.base_url_for_report(update.problem) _ update.problem.url,
+  twitter_comment = 'I just updated a problem on @fixmystreet'
+%]
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/fixmystreet.com/next_steps.html b/templates/web/fixmystreet.com/next_steps.html
new file mode 100644
index 000000000..1c286827d
--- /dev/null
+++ b/templates/web/fixmystreet.com/next_steps.html
@@ -0,0 +1,42 @@
+[%# A trio of suggested steps, shown on completion pages across FMS.com %]
+
+[% DEFAULT share_url = c.cobrand.base_url %]
+[% DEFAULT twitter_comment = 'I just used @fixmystreet, you should try it!' %]
+
+<div class="next-steps">
+  <div class="next-steps__step next-steps__step--apps">
+    [% IF just_interacted %]
+      <h2>[% loc('Next time, try our mobile app!') %]</h2>
+    [% ELSE %]
+      <h2>[% loc('Have you tried our mobile app?') %]</h2>
+    [% END %]
+    <p>[% loc('Download it now, and it’ll be ready to use when you next pick up your phone.') %]</p>
+    <p class="next-steps__step__cta">
+      <a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545"><img src="/cobrands/fixmystreet/images/next-step-apple.png" alt="Download on the App Store" width="120" height="37"></a>
+      <a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet"><img src="/cobrands/fixmystreet/images/next-step-google.png" alt="Android app on Google Play" width="120" height="37"></a>
+    </p>
+  </div>
+  <div class="next-steps__step next-steps__step--social">
+    [% IF just_interacted %]
+      <h2>[% loc('Great work. Now spread the word!') %]</h2>
+      <p>[% loc('Share your report on Twitter and Facebook, and let your friends join the conversation.') %]</p>
+    [% ELSE %]
+      <h2>[% loc('Spread the word about FixMyStreet!') %]</h2>
+      <p>[% loc('You know how to get things fixed - now make sure your friends do too.') %]</p>
+    [% END %]
+    <p class="next-steps__step__cta">
+      <a href="https://twitter.com/intent/tweet?text=[% twitter_comment | uri %]&amp;url=[% share_url | uri %]&amp;related=fixmystreet,mysociety"><img src="/cobrands/fixmystreet/images/next-step-twitter.png" alt="Tweet it" width="120" height="37"></a>
+      <a href="https://www.facebook.com/sharer/sharer.php?u=[% share_url | uri %]"><img src="/cobrands/fixmystreet/images/next-step-facebook.png" alt="Share on Facebook" width="120" height="37"></a>
+    </p>
+  </div>
+  <div class="next-steps__step next-steps__step--goodies">
+    <h2>[% loc('Free FixMyStreet goodies for you!') %]</h2>
+    <a href="/posters">
+      <img src="/cobrands/fixmystreet/images/next-step-goodies.png" alt="" width="105" height="125" class="goodies-preview">
+    </a>
+    <p>[% loc('Perfect for civic groups, clubs, and schools.') %]</p>
+    <p class="next-steps__step__cta">
+      <a href="/posters"><img src="/cobrands/fixmystreet/images/next-step-download.png" alt="Download" width="120" height="37"></a>
+    </p>
+  </div>
+</div>
diff --git a/templates/web/hart/tokens/confirm_problem.html b/templates/web/hart/tokens/confirm_problem.html
index 117d2d1bc..d5b6075ff 100644
--- a/templates/web/hart/tokens/confirm_problem.html
+++ b/templates/web/hart/tokens/confirm_problem.html
@@ -16,6 +16,4 @@ Note that Hart District Council is not responsible for this type of problem.  Ho
 <p>Your reference for this problem is [% problem.id %], please quote it in any enquiries.
 </p>
 
-[% display_crosssell_advert( problem.user.email, problem.name ) %]
-
 [% INCLUDE 'footer.html' %]
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 57eadc435..01be687a1 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -55,47 +55,59 @@
   }
 }
 
-.advert-mobile-apps {
+.next-steps {
   margin: 0 -1em; // counteract padding on parent
-  background-color: #fff9cc;
-  padding: 2em;
+  background-color: #faf7e2;
+}
 
-  @media only screen and (min-width: 48em) {
-    padding-left: 37%;
-    background: #fff9cc url(/cobrands/fixmystreet/images/advert-app-watercolour.jpg) 7% 50% no-repeat;
+.next-steps__step {
+  box-sizing: border-box;
+  padding: 1em;
+
+  & + .next-steps__step {
+    border-top: 1px solid #ede8c9;
   }
 
-  h1 {
+  h2 {
     margin-top: 0;
   }
 
   p {
-    font-size: 1.3em;
-    line-height: 1.4em;
+    color: #666666;
+    margin-bottom: 0;
   }
+}
 
-  .app-links {
-    @include clearfix;
-    margin-bottom: 1em;
+.next-steps__step__cta {
+  @include pie-clearfix;
+  padding-top: 0.4em; // extra padding between buttons and previous paragraph
 
-    a {
-      float: left;
-      margin-right: 1em;
-    }
+  a {
+    float: left;
+    margin: 1em 0.6em 0 0;
 
-    a[href*="itunes.apple.com"] {
-      margin-top: 3px; // compensate for slightly smaller itunes button
+    &:last-child {
+      margin-right: 0;
     }
   }
 
-  .desktop-advice {
-    clear: left;
-    font-size: 1em;
-    line-height: 1.2em;
-    color: #745D17; // brown
+  .next-steps__step--goodies {
+    min-height: 37px; // stop absolutely positioned img overlapping bottom of parent element
 
-    @media only screen and (min-width: 48em) {
-      width: 28em; // break line at a nice point
+    img {
+      // absolute positioning to overlap floated goodies image to the right
+      position: absolute;
+      max-width: none;
     }
   }
 }
+
+.next-steps__step--goodies {
+  @include pie-clearfix;
+
+  .goodies-preview {
+    float: right;
+    margin-left: 1em;
+    margin-right: -0.5em;
+  }
+}
diff --git a/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg b/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg
deleted file mode 100644
index 9c372fed5..000000000
--- a/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/next-step-apple.png b/web/cobrands/fixmystreet/images/next-step-apple.png
new file mode 100644
index 000000000..79476f552
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-apple.png
diff --git a/web/cobrands/fixmystreet/images/next-step-download.png b/web/cobrands/fixmystreet/images/next-step-download.png
new file mode 100644
index 000000000..525c27d1f
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-download.png
diff --git a/web/cobrands/fixmystreet/images/next-step-facebook.png b/web/cobrands/fixmystreet/images/next-step-facebook.png
new file mode 100644
index 000000000..c01fa6ced
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-facebook.png
diff --git a/web/cobrands/fixmystreet/images/next-step-goodies.png b/web/cobrands/fixmystreet/images/next-step-goodies.png
new file mode 100644
index 000000000..27fe702c3
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-goodies.png
diff --git a/web/cobrands/fixmystreet/images/next-step-google.png b/web/cobrands/fixmystreet/images/next-step-google.png
new file mode 100644
index 000000000..6b2244c44
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-google.png
diff --git a/web/cobrands/fixmystreet/images/next-step-twitter.png b/web/cobrands/fixmystreet/images/next-step-twitter.png
new file mode 100644
index 000000000..e79255bd6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/next-step-twitter.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index ded1ed911..20ea2f11a 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -256,3 +256,30 @@ body.alertindex {
     display: none;
   }
 }
+
+.next-steps {
+  @include clearfix;
+  margin-bottom: 2em; // add some space between this and the footer
+}
+
+.next-steps__step {
+  font-family: MuseoSans,Helmet,Freesans,sans-serif;
+  float: left;
+  width: 33%;
+  padding: 1.8em;
+
+  & + .next-steps__step {
+    border-top: none;
+    border-left: 1px solid #ede8c9;
+  }
+
+  h2 {
+    font-family: inherit;
+    font-weight: bold;
+    line-height: 1.2em;
+  }
+
+  p {
+    line-height: 1.4em;
+  }
+}
diff --git a/web/css/core.scss b/web/css/core.scss
index ed47cb01a..897b2d095 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -65,19 +65,6 @@ $map_width: 500px;
         clear: both;
     }
 
-    // Site-wide layout
-
-    #advert_thin {
-        width: 50%;
-        margin: 1em auto;
-        text-align: center;
-        border-top: dotted 1px #999999;
-    }
-    #advert_hfymp {
-        border-top: dotted 1px #999999;
-        text-align: center;
-    }
-
     // Front page
 
     p#expl {