From 8469f8e3b8621fe1ff191bfd696f817b29ac38a9 Mon Sep 17 00:00:00 2001
From: Dave Gandy <dave@davegandy.com>
Date: Thu, 7 Jan 2016 09:42:46 -0500
Subject: [PATCH] Download modal update v1

---
 src/_includes/modals/download.html            | 171 +++++++++++++++---
 src/_includes/navbar.html                     |   2 +-
 src/_plugins/icon_page_generator.rb           |  90 ++++-----
 src/assets/less/site.less                     |   1 +
 src/assets/less/site/bootstrap/alerts.less    |   4 +
 src/assets/less/site/bootstrap/panels.less    |  15 ++
 src/assets/less/site/bootstrap/variables.less |  38 ++++
 7 files changed, 251 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/less/site/bootstrap/panels.less

diff --git a/src/_includes/modals/download.html b/src/_includes/modals/download.html
index 8578ce9ec..f4f238b5c 100644
--- a/src/_includes/modals/download.html
+++ b/src/_includes/modals/download.html
@@ -1,33 +1,156 @@
-<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label">
-  <div class="modal-dialog" role="document">
+<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-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">Help Us Out!</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 text-lg">
-        <p class="margin-bottom-lg">
-          I hope you love Font Awesome. If you've found it useful,
-          <a class="strong" href="https://fonticons.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, Fonticons</a>. It makes it easy to put the perfect
-          icons on your website. Choose from our awesome, comprehensive icon sets or copy and paste your own.
-        </p>
+      <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>
 
-        <p class="margin-bottom-lg">
-          Please. Check it out.
-        </p>
+                        <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>
+          <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>
+
+        </div>
 
-        <p>&mdash;Dave Gandy</p>
-      </div>
-      <div class="modal-footer">
-        <a class="btn btn-default btn-lg block-xs" 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>
-        <a class="btn btn-success btn-lg block-xs" href="https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.4_update" target="_blank">
-          Check out Fonticons &nbsp;<i class="fa fa-external-link fa-lg"></i>
-        </a>
       </div>
     </div>
   </div>
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index a7cb7ab90..dc117ce2f 100644
--- a/src/_includes/navbar.html
+++ b/src/_includes/navbar.html
@@ -2,7 +2,7 @@
   <div class="container">
     <ul class="nav navbar-nav navbar-right">
       <li>
-        <a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front-end game<br>to the next level!">
+        <a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
           <i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp;
           Fort Awesome
         </a>
diff --git a/src/_plugins/icon_page_generator.rb b/src/_plugins/icon_page_generator.rb
index 32b7cd428..9caf705e7 100644
--- a/src/_plugins/icon_page_generator.rb
+++ b/src/_plugins/icon_page_generator.rb
@@ -1,45 +1,45 @@
-##
-# Create individual pages for each icon in the FontAwesome set
-
-require 'yaml'
-
-module Jekyll
-
-  class IconPage < Page
-
-    ##
-    # Take a single icon and render a page for it.
-
-    def initialize(site, base, dir, icon)
-      @site = site
-      @base = base
-      @dir = dir
-      @name = "#{icon.id}.html"
-      @icon = icon
-
-      self.process(@name)
-
-      self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout'])
-
-      self.data['icon'] = icon
-      self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix']
-    end
-
-  end
-
-  class IconGenerator < Generator
-
-    ##
-    # Iterate over every described icon in a YAML file and create a page for it
-
-    safe true
-
-    def generate(site)
-      site.icons.each do |icon|
-        site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon)
-      end
-    end
-
-  end
-
-end
+# ##
+# # Create individual pages for each icon in the FontAwesome set
+#
+# require 'yaml'
+#
+# module Jekyll
+#
+#   class IconPage < Page
+#
+#     ##
+#     # Take a single icon and render a page for it.
+#
+#     def initialize(site, base, dir, icon)
+#       @site = site
+#       @base = base
+#       @dir = dir
+#       @name = "#{icon.id}.html"
+#       @icon = icon
+#
+#       self.process(@name)
+#
+#       self.read_yaml(File.join(base, site.config['layouts']), site.config['icon_layout'])
+#
+#       self.data['icon'] = icon
+#       self.data['title'] = "fa-#{icon.id}: " + self.data['title_suffix']
+#     end
+#
+#   end
+#
+#   class IconGenerator < Generator
+#
+#     ##
+#     # Iterate over every described icon in a YAML file and create a page for it
+#
+#     safe true
+#
+#     def generate(site)
+#       site.icons.each do |icon|
+#         site.pages << IconPage.new(site, site.source, site.config['icon_destination'], icon)
+#       end
+#     end
+#
+#   end
+#
+# end
diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index ad54df3e1..ce4874228 100644
--- a/src/assets/less/site.less
+++ b/src/assets/less/site.less
@@ -10,6 +10,7 @@
 @import "site/bootstrap/type";
 @import "site/bootstrap/alerts";
 @import "site/bootstrap/tooltip";
+@import "site/bootstrap/panels";
 @import "site/bootstrap/modals";
 
 @import "site/layout";
diff --git a/src/assets/less/site/bootstrap/alerts.less b/src/assets/less/site/bootstrap/alerts.less
index a82f5ef47..db79469e1 100644
--- a/src/assets/less/site/bootstrap/alerts.less
+++ b/src/assets/less/site/bootstrap/alerts.less
@@ -1 +1,5 @@
 .alert-link { text-decoration: underline; }
+
+.alert-default  { .alert-variant(@alert-default-bg, @alert-default-border, @alert-default-text); }
+.alert-well     { .alert-variant(@alert-well-bg, @alert-well-border, @alert-well-text); }
+.alert-well-alt { .alert-variant(@well-bg, @table-border-color, mix(@text-muted,@text-color,50%)); }
diff --git a/src/assets/less/site/bootstrap/panels.less b/src/assets/less/site/bootstrap/panels.less
new file mode 100644
index 000000000..f2dc21009
--- /dev/null
+++ b/src/assets/less/site/bootstrap/panels.less
@@ -0,0 +1,15 @@
+.panel {
+  .box-shadow(none);
+}
+
+.panel-heading {
+  margin: -1px;
+  border-bottom-width: 0;
+  padding: 11px 15px;
+}
+
+.panel-default .panel-heading {
+  margin: 0;
+  border-bottom-width: 1px;
+  padding: 10px 15px;
+}
\ No newline at end of file
diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less
index f70c12873..4c99d6485 100644
--- a/src/assets/less/site/bootstrap/variables.less
+++ b/src/assets/less/site/bootstrap/variables.less
@@ -126,3 +126,41 @@
 //== Type
 //** Text muted color
 @text-muted:                  mix(@gray-light,@gray-lighter,50%);
+
+
+
+
+@alert-well-bg:               @panel-default-heading-bg;
+@alert-well-text:             @text-color;
+@alert-well-border:           @panel-default-border;
+
+@alert-default-bg:            transparent;
+@alert-default-text:          @text-color;
+@alert-default-border:        mix(#fff,@panel-default-border,40%);
+
+
+
+
+//@panel-default-text:          @gray-dark;
+//@panel-default-border:        @panel-default-heading-bg;
+//@panel-default-heading-bg:    #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        mix(#fff,@brand-primary,50%);
+@panel-primary-heading-bg:    @brand-primary;
+
+@panel-success-text:          #fff;
+@panel-success-border:        mix(#fff,@brand-success,50%);
+@panel-success-heading-bg:    @brand-success;
+
+@panel-info-text:             #fff;
+@panel-info-border:           mix(#fff,@brand-info,50%);
+@panel-info-heading-bg:       @brand-info;
+
+@panel-warning-text:          #fff;
+@panel-warning-border:        mix(#fff,@brand-warning,50%);
+@panel-warning-heading-bg:    @brand-warning;
+
+@panel-danger-text:           #fff;
+@panel-danger-border:         mix(#fff,@brand-danger,50%);
+@panel-danger-heading-bg:     @brand-danger;