From b054f09c2d9619fcdb287c83b83792cfbdd92070 Mon Sep 17 00:00:00 2001
From: Brian Talbot <brian@fortawesome.com>
Date: Mon, 2 May 2016 11:40:20 -0400
Subject: [PATCH] syncing up CDN-based status views with app

---
 src/cdn/error.html   | 58 +++++++++++++++++++++++++++++++++++++-------
 src/cdn/success.html | 57 +++++++++++++++++++++++++++++++++++++------
 2 files changed, 98 insertions(+), 17 deletions(-)

diff --git a/src/cdn/error.html b/src/cdn/error.html
index f08eaa67a..222f85e4f 100644
--- a/src/cdn/error.html
+++ b/src/cdn/error.html
@@ -5,20 +5,60 @@ relative_path: ../../
 ---
 
 <div class="container">
-  <div class="row">
-    <div class="col-md-6 col-md-offset-3 margin-top-lg">
-      <div class="well well-lg margin-top-xl margin-bottom-xl">
-        <h1 class="text-danger page-header"><i class="fa fa-exclamation-triangle"></i> Oh noes!</h1>
-        <p class="lead">
-          Something bad happened on our end when sending your embed code.
-          We've already been notified and are looking into it.
-        </p>
+  <div class="row margin-top-xl">
+
+    <div class="col-lg-7">
+      <div class="well well-lg margin-bottom-xl">
+        <h1 class="page-header text-danger">
+          <i class="fa fa-exclamation-triangle"></i>
+          Oh Noes!
+        </h1>
 
         <p class="lead">
-          Hang tight for just a bit and we should have things fixed up shortly.
+          <strong>Something bad happened on our end when sending your embed code.</strong>
+        </p>
+
+        <p>
+          We've already been notified and are looking into it. Hang tight for just a bit and we should have things fixed up shortly.
         </p>
       </div>
+    </div>
 
+    <div class="col-lg-4 col-lg-offset-1">
+
+      <ol class="list-unstyled gg gg-top">
+        <li class="gg-row">
+          <div class="gg-col">
+            <i class="fa fa-refresh fa-2x margin-right-lg text-muted"></i>
+          </div>
+          <div class="gg-col">
+            <h3 class="text-lg text-muted">If at first you don't succeed&hellip;</h3>
+
+            <p>
+              We'll be taking a look into things. But in the meantime, it may not hurt to <a href="{{ page.relative_path }}cdn/new/">try to request an embed code again</a>.
+            </p>
+
+            <hr class="hr-lg m-xs-y-lg">
+          </div>
+        </li>
+
+        <li class="gg-row">
+          <div class="gg-col">
+            <i class="fa fa-hourglass-end fa-2x margin-right-lg text-muted"></i>
+          </div>
+          <div class="gg-col">
+            <h3 class="text-lg text-muted">Been a while?</h3>
+
+            <p>
+              Still stuck and haven't heard from us? Let us know something is up.
+            </p>
+
+            <a href="mailto:cdn@fontawesome.com" class="btn btn-success btn-lg">
+              Contact us!
+            </a>
+          </div>
+        </li>
+      </ol>
     </div>
   </div>
 </div>
diff --git a/src/cdn/success.html b/src/cdn/success.html
index 6199f0b02..91b0b8f9b 100644
--- a/src/cdn/success.html
+++ b/src/cdn/success.html
@@ -5,20 +5,61 @@ relative_path: ../../
 ---
 
 <div class="container">
-  <div class="row">
-    <div class="col-md-6 col-md-offset-3 margin-top-lg">
-      <div class="well well-lg margin-top-xl margin-bottom-xl">
-        <h1 class="text-success page-header"><i class="fa fa-envelope"></i> On the way!</h1>
+  <div class="row margin-top-xl">
+    <div class="col-lg-7">
+      <div class="well well-lg margin-bottom-xl">
+        <h1 class="page-header text-success">
+          <i class="fa fa-check"></i>
+          Great Success!
+        </h1>
+
         <p class="lead">
-          We just sent you an email with your new Font Awesome CDN embed code and instructions
-          for what to do next!
+          <strong>Your embed code is on its way.</strong>
         </p>
 
-        <p class="lead text-muted">
-          If you don't see the email, maybe check your spam.
+        <p>
+          We just sent you an email with your new Font Awesome CDN embed code and instructions for what to do next!
+        </p>
+
+        <p>
+          If you don't see the email (sent by "Font Awesome") in your inbox, maybe check your spam folder first. Also, make sure you haven't previously unsubscribed. Still nothing? <a href="{{ page.relative_path }}cdn/new/">Try again</a> or <a href="https://cdn.fontawesome.com/help">get some help</a>.
         </p>
       </div>
+    </div>
 
+    <div class="col-lg-4 col-lg-offset-1">
+
+      <h2 class="sr-only">Next Steps</h2>
+
+      <ol class="list-unstyled gg gg-top">
+        <li class="gg-row">
+          <div class="gg-col p-xs-r-md">
+            <i class="fa fa-envelope fa-2x margin-right-lg text-muted"></i>
+          </div>
+          <div class="gg-col">
+            <h3 class="text-lg text-muted">Check your email</h3>
+
+            <p>
+              Your embed code should be waiting there for you. From there you can also register a Font Awesome CDN account to help you manage your icons even more easily.
+            </p>
+
+            <hr class="hr-lg m-xs-y-lg">
+          </div>
+        </li>
+
+        <li class="gg-row">
+          <div class="gg-col p-xs-r-md">
+            <i class="fa fa-flag-checkered fa-2x margin-right-lg text-muted"></i>
+          </div>
+          <div class="gg-col">
+            <h3 class="text-lg text-muted">Get ready to use Font Awesome</h3>
+
+            <p>
+              While you're waiting, dive into how to use Font Awesome. You'll want to add your embed code within the <code>&lt;head&gt;</code> of each template or page that you want to use Font Awesome on. Then, check out the <a href="{{ page.relative_path }}icons/">Font Awesome icons</a> and <a href="{{ page.relative_path }}examples/">examples</a> to learn how drop icons right into your UI.
+            </p>
+          </div>
+        </li>
+      </ol>
     </div>
   </div>
 </div>