[UK] Promote council-exclusive summary dashboard

Fixes mysociety/fixmystreet-commercial#1016

6 files changed, 125 insertions, 42 deletions

diff --git a/templates/email/fixmystreet.com/_submit_footer.html b/templates/email/fixmystreet.com/_submit_footer.html
index 346ab8b66..acf14b285 100644
--- a/templates/email/fixmystreet.com/_submit_footer.html
+++ b/templates/email/fixmystreet.com/_submit_footer.html
@@ -10,12 +10,13 @@ submit_footer_link_style = "color: #9CD0EA;";
   <tr>
     <th style="[% td_style %] padding: [% column_padding %]px; background-color: [% color_yellow %]; color: [% color_black %];">
       <h2 style="[% h2_style %] margin-bottom: 15px;">
-        Never retype another FixMyStreet report
+        In-depth stats from our new, exclusive dashboard
       </h2>
       <p style="margin: 0;">
-        Good news: we can now send these reports from FixMyStreet
-        directly into your customer service queue.
-        <a href="https://www.fixmystreet.com/pro/">Find out how</a>.
+        What do people report most in your area?
+        How’s your response rate?
+        And how do you compare to other UK councils?
+        <a href="https://www.fixmystreet.com/about/council-dashboard/?utm_source=council_submit_email&amp;utm_content=[% "View FixMyStreet stats for your area" | uri %]&amp;utm_medium=email&amp;utm_campaign=fms_stats_dashboard_promo">View FixMyStreet stats for your area.</a>
       </p>
     </th>
   </tr>
diff --git a/templates/web/fixmystreet.com/about/council-dashboard.html b/templates/web/fixmystreet.com/about/council-dashboard.html
index ab4aa2581..84b71480f 100644
--- a/templates/web/fixmystreet.com/about/council-dashboard.html
+++ b/templates/web/fixmystreet.com/about/council-dashboard.html
@@ -15,11 +15,11 @@
 
     <form method="post">
 
-        <h1>Statistics for councils</h1>
+        <h1>Council stats</h1>
 
         <p>
-            To access statistics on problems and categories in your area,
-            please provide your name and email, and we'll send you a link.
+            For council staff only. Access detailed statistics
+            on reports and performance in your area.
         </p>
 
         <div class="form-group">
diff --git a/templates/web/fixmystreet.com/front/footer-marketing.html b/templates/web/fixmystreet.com/front/footer-marketing.html
index 2d1acc084..6ea1422d4 100644
--- a/templates/web/fixmystreet.com/front/footer-marketing.html
+++ b/templates/web/fixmystreet.com/front/footer-marketing.html
@@ -1,8 +1,16 @@
 <div class="fms-pro-promo">
-    <h2>FixMyStreet Pro</h2>
-    <p class="lead">The one-stop street reporting service for councils.</p>
-    <p>Integrate FixMyStreet with your council system for smooth, end-to-end report fullfilment.</p>
-    <p><a href="/pro/" class="btn">Learn more</a></p>
+    <div class="fms-pro-promo__pro">
+        <h2>Go Pro</h2>
+        <p class="lead">Integrate FixMyStreet Pro with your council system for smooth, end-to-end report fullfilment.</p>
+        <p>How much could <em>you</em> save?</p>
+        <p><a href="/pro/" class="btn">Learn more</a></p>
+    </div>
+    <div class="fms-pro-promo__stats">
+        <h2>Free statistics for councils</h2>
+        <p class="lead">Explore detailed stats on the FixMyStreet councils dashboard — for free.</p>
+        <p>What do people report most? How’s your response rate? And how do you compare to other UK councils?</p>
+        <p><a href="/about/council-dashboard/" class="btn">Log in now</a></p>
+    </div>
 </div>
 
 <div class="footer-marketing">
diff --git a/templates/web/fixmystreet.com/reports/cobrand_stats.html b/templates/web/fixmystreet.com/reports/cobrand_stats.html
new file mode 100644
index 000000000..c5f03f617
--- /dev/null
+++ b/templates/web/fixmystreet.com/reports/cobrand_stats.html
@@ -0,0 +1,4 @@
+<div class="full-width area-reports-dashboard-cta">
+    <strong>New for council staff</strong>
+    <p>Don’t miss our stats dashboard, only available to council staff. Access detailed reports and statistics — for free. <a href="/about/council-dashboard/">Log in here.</a></p>
+</div>
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index ff244d12c..484c39716 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -307,21 +307,32 @@ html.lazyload .js-lazyload {
 }
 
 .fms-pro-promo {
-  margin: 2em -1em;
-  padding: 1em;
-  background: $primary;
+    margin: 0 -1em;
 
-  .lead {
-    font-weight: bold;
-  }
+    h2 {
+        margin-top: 0;
+    }
 
-  & > :first-child {
-    margin-top: 0;
-  }
+    .lead {
+        font-weight: bold;
+    }
 
-  & > :last-child {
-    margin-bottom: 0;
-  }
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.fms-pro-promo__pro,
+.fms-pro-promo__stats {
+    padding: 1.5em 1em;
+}
+
+.fms-pro-promo__pro {
+    background: $primary;
+}
+
+.fms-pro-promo__stats {
+    border-bottom: 0.25em solid $primary;
 }
 
 .postcode-form-test {
@@ -494,3 +505,14 @@ input.postcode-form-test__postcode {
         line-height: 1em;
     }
 }
+
+.area-reports-dashboard-cta {
+    background-color: mix(#fff, $primary, 60%);
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    & > :last-child {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 4043ee747..19c3fa19c 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -324,29 +324,69 @@ footer {
 }
 
 .fms-pro-promo {
-  margin: 1em 0 3em 0;
-  padding: 2em;
-  background: $primary url(images/tile-y.jpg) 0 0 repeat;
+    @include clearfix();
+    @include flex-container();
 
-  @media ($high-dpi-screen) {
-    background-image: url(images/tile-y@2x.jpg);
-    background-size: 500px;
-  }
+    margin: 1em 0 3em 0;
 
-  p {
-    font-size: 1.2em;
-    max-width: 26em;
-  }
+    h2 {
+        font-family: inherit;
+        font-weight: bold;
+    }
 
-  h2 {
-    font-family: inherit;
-    font-weight: bold;
-    font-size: 2em;
-  }
+    @media (min-width: 60em) {
+        p {
+            font-size: 1.2em;
+        }
 
-  @media (min-width: 60em) {
-    padding: 3em;
-  }
+        h2 {
+            font-size: 2em;
+        }
+    }
+}
+
+.fms-pro-promo__pro,
+.fms-pro-promo__stats {
+    @include box-sizing(border-box);
+    float: left;
+    padding: 2em;
+
+    @media (min-width: 60em) {
+        padding: 3em;
+    }
+}
+
+.fms-pro-promo__pro {
+    width: 40%;
+    background: $primary url(images/tile-y.jpg) 0 0 repeat;
+
+    @media ($high-dpi-screen) {
+        background-image: url(images/tile-y@2x.jpg);
+        background-size: 500px;
+    }
+}
+
+.fms-pro-promo__stats {
+    width: 56%;
+    margin-left: 4%;
+    border-bottom: none;
+    background: #fff;
+    position: relative;
+
+    &:before {
+        content: "NEW";
+        display: block;
+        position: absolute;
+        top: -0.5em;
+        right: 0.5em;
+        background: $primary;
+        font-weight: bold;
+        width: 4em;
+        line-height: 4em;
+        text-align: center;
+        border-radius: 100%;
+        transform: rotate(5deg);
+    }
 }
 
 .footer-marketing {
@@ -397,3 +437,11 @@ footer {
         margin-bottom: 4em;
     }
 }
+
+.area-reports-dashboard-cta {
+    // To overpower `body.mappage .full-width` in core.
+    body.mappage & {
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+}
\ No newline at end of file