Updating download modal

2 files changed, 38 insertions, 28 deletions

diff --git a/src/_includes/modals/download.html b/src/_includes/modals/download.html
index 384620bdc..4cf11618b 100644
--- a/src/_includes/modals/download.html
+++ b/src/_includes/modals/download.html
@@ -10,46 +10,56 @@
         </h2>
       </div>
       <div class="modal-body">
-        <div class="text-lg margin-bottom-lg">
-          Before you download, check out our latest project: Fort Awesome&mdash;
+        <div class="text-lg margin-bottom-lg padding-bottom">
+          Before you download, check out <b>Font Awesome Pro&mdash;</b>
         </div>
 
-        <div class="row">
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Sets</h4>
-            Font Awesome not the right look? We've got the perfect icon set for your website!
+        <div class="row margin-bottom-lg">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-money fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-money fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Your Icons</h4>
-            Copy &amp; paste your own logo and icons directly into Fort Awesome. Easy peasy.
+          <div class="col-md-9 col-sm-9 col-xs-10">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Super Low Price</h4>
+            <p>
+              For a limited time, get Pro, all 46 icon packs ($460 value), &amp; ALL Kickstarter stretch goals!
+            </p>
           </div>
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Fonts Too!</h4>
-            Subset and serve your typefaces too! We've got some great ones to start with.
+        </div>
+        <div class="row margin-bottom-lg">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Optimized</h4>
-            Subsetting your icons and typefaces often shrinks them by 95% or more!
+          <div class="col-md-9 col-sm-9 col-xs-9">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More Icons</h4>
+            <p>
+              With Pro, get the newest look and thousands more icons than Font Awesome 4!
+            </p>
           </div>
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Hosted</h4>
-            No more messing with files! Update and deploy your icons to our CDN.
+        </div>
+        <div class="row margin-bottom-lg">
+          <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
+            <i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
+            <i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
           </div>
-          <div class="col-md-6 col-sm-6 margin-bottom-lg">
-            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Faster</h4>
-            Optimized and hosted means your icons and typefaces load much faster.
+          <div class="col-md-9 col-sm-9 col-xs-9">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Early Access</h4>
+            <p>
+              Get early access and input into new icons and frameworks with our private GitHub repo!
+            </p>
           </div>
         </div>
 
-        <a href="https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" class="btn btn-success btn-lg btn-block">
-          Take your icon game <br class="visible-xs" />to the next level with
-          <h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h2>
-          <h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h3>
+        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" class="btn btn-success btn-lg btn-block">
+          <div>Pre-order now &amp; save big!</div>
+          <h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2>
+          <h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3>
         </a>
-        <div class="text-center margin-top-sm margin-bottom-sm">or</div>
+        <div class="text-center margin-top margin-bottom">or</div>
         <a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
            onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
-          No thanks, just download <br class="visible-xs" />Font Awesome
+          No thanks, just download <br class="visible-xs" />Font Awesome 4
         </a>
 
       </div>
diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index d5c9d96e6..aefb8103e 100644
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -5,7 +5,7 @@ $(function () {
     {
       quote: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!",
       class: "fa5",
-      url: "http://five.fontawesome.com",
+      url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=banner&utm_campaign=promo_4.7_update",
       btn_text: "Pre-order FA Pro! &nbsp;<i class='fa fa-external-link'></i>",
     },
   ];