Updating download modal with new version

src/_includes/modals/download.html

@@ -1,156 +1,57 @@
 <div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"
      xmlns="http://www.w3.org/1999/html">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
-        <h2 class="modal-title" id="modal-download-label"><i class="fa fa-download fa-lg"></i>&nbsp; Download</h2>
+        <h2 class="modal-title" id="modal-download-label">
+          <i class="fa fa-download fa-lg"></i>&nbsp;
+          Download
+        </h2>
       </div>
       <div class="modal-body">
-        <div class="row">
-          <div class="col-md-8">
-            <div class="panel panel-success">
-              <div class="panel-heading">
-                <div class="panel-title">
-                  <h3 class="margin-none">
-                    <i class="fas fas-fort-logo fas-lg valign-baseline"></i> Fort Awesome
-                  </h3>
-                </div>
-              </div>
-              <div class="panel-body padding-bottom-none">
-                <div class="lead text-center">
-                  Take your icon game to the next level &amp;<br class="hide-xs"> start your 14 day free trial!
-                </div>
-                <div class="row">
-                  <div class="col-md-6 col-sm-6 text-center">
-                    <div class="panel panel-success">
-                      <div class="panel-heading">
-                        <div class="panel-title">
-                          <h3 class="margin-none">Pro</h3>
-                          <div class="text-normal">$99/year</div>
-                        </div>
-                      </div>
-                      <div class="panel-body">
-                        <div><strong>15</strong> Kits</div>
-                        <div>Starter Icon Library</div>
-                        <div>10,000+ Icons</div>
-                        <div><strong>Unlimited</strong> Uploaded Icons</div>
-                        <div>Upload Your Logo</div>
-                        <div><strong>2500</strong> Icons per Kit</div>
-                        <div><strong>8</strong> Typefaces per Kit</div>
-                        <div>Kit Download</div>
-                        <div><strong>1M</strong> Pageviews/month</div>
-
-                        <div class="margin-top-sm strong"><a href="https://fonticons.com/start">Find out More</a></div>
-
-                        <a href="<%= new_pro_path %>" class="btn btn-success btn-block btn-lg margin-top">Sign Up &nbsp;<i class="fa fa-pencil-square-o"></i></a>
-                      </div>
-                    </div>
-
-                  </div>
-                  <div class="col-md-6 col-sm-6 text-center">
-                    <div class="panel panel-default">
-                      <div class="panel-heading">
-                        <div class="panel-title">
-                          <h3 class="margin-none">Basic</h3>
-                          <div class="text-normal">$49/year</div>
-                        </div>
-                      </div>
-                      <div class="panel-body">
-                        <div>5 Kits</div>
-                        <div>Starter Icon Library</div>
-                        <div>10,000+ Icons</div>
-                        <div>20 Uploaded Icons</div>
-                        <div>Upload Your Logo</div>
-                        <div>100 Icons per Kit</div>
-                        <div>4 Typefaces per Kit</div>
-                        <div class="text-strike text-muted">Kit Download</div>
-                        <div>250k Pageviews/month</div>
-
-                        <div class="margin-top-sm strong"><a href="https://fonticons.com/start">Find out More</a></div>
-
-                        <a href="<%= new_basic_path %>" class="btn btn-default btn-block btn-lg margin-top">Sign Up &nbsp;<i class="fa fa-pencil-square-o"></i></a>
-                      </div>
-                    </div>
-
-                  </div>
-                </div>
-
-
-                <div class="lead">
-                  You'll get even more Awesome:
-                </div>
-                <div class="row">
-                  <div class="col-md-6 col-sm-6">
-                    <div class="alert alert-default clearfix">
-                      <i class="fa fa-dashboard fa-4x pull-left"></i>
-                      Subset & shrink your icons <strong>AND TYPEFACES</strong> by 10x.
-                    </div>
-                  </div>
-                  <div class="col-md-6 col-sm-6">
-                    <div class="alert alert-default clearfix">
-                      <i class="fa fa-paint-brush fa-4x pull-left"></i>
-                      Upload &amp; build your own logo and vector icons.
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-md-6 col-sm-6">
-                    <div class="alert alert-default clearfix">
-                      <i class="fa fa-eye fa-4x pull-left"></i>
-                      Get the perfect visual with the right icon set. Tons to choose from.
-                    </div>
-                  </div>
-                  <div class="col-md-6 col-sm-6">
-                    <div class="alert alert-default clearfix">
-                      <i class="fa fa-globe fa-4x pull-left"></i>
-                      Serve your icons &amp; typefaces in a single request with our CDN.
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-            </div>
+        <div class="text-lg margin-bottom-lg">
+          Before you download, check out our latest project: Fort Awesome&mdash;
+        </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>
-          <div class="col-md-4 col-sm-6">
-            <p class="">Or get regular 'ole Font Awesome...</p>
-            <div class="panel panel-default">
-              <div class="panel-heading">
-                <div class="panel-title">
-                  <h3 class="margin-none">
-                    <i class="fas fas-flag-logo"></i> Font Awesome
-                  </h3>
-                </div>
-              </div>
-              <div class="panel-body text-center">
-                <div class="text-strike text-muted">Upload Your Logo &amp; Icons</div>
-                <div class="text-strike text-muted">Shrink Your Icons by 10x</div>
-                <div class="text-strike text-muted">Serve Your Typefaces</div>
-                <div class="text-strike text-muted">Shrink Your Typefaces by 10x</div>
-                <div>Font Awesome Only</div>
-                <div>1 Icon Set</div>
-                <div>{{ icons | size }} Icons</div>
-
-                <a class="btn btn-default btn-lg block-xs margin-top" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
-                   onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
-                  <i class="fa fa-download fa-lg"></i>&nbsp;
-                  Download
-                </a>
-              </div>
-            </div>
-            <p class="margin-bottom">
-              I hope you love Font Awesome. If you've found it useful,
-              <a class="strong" href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
-                please do me a favor and check out my latest project, Fort Awesome</a>.
-            </p>
-
-            <p>&mdash;Dave Gandy</p>
-
+          <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>
+          <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="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 with us often shrinks your icons by 95% or more!
+          </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="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>
-
         </div>
 
+        <a href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_5.0_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>
+        <div class="text-center margin-top-sm margin-bottom-sm">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
+        </a>
+
       </div>
     </div>
   </div>