feat: add api section

source/index.pug

@@ -21,10 +21,10 @@ ul#intro-feature-list
       .intro-feature-icon
         i.fa.fa-cloud-upload
       h3.intro-feature-title One-Command Deployment
-      p.intro-feature-desc You only need one command to deploy your site to GitHub Pages, Heroku or other platforms.
+      p.intro-feature-desc You only need one command to deploy your site to GitHub Pages, Firebase Hosting, Heroku, Netlify, ZEIT or other platforms.
   li.intro-feature-wrap
     .intro-feature
       .intro-feature-icon
         i.fa.fa-cog
       h3.intro-feature-title Plugins
-      p.intro-feature-desc Features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).
+      p.intro-feature-desc Various plugins are available to generate sitemap and RSS, insert player for music or video, intergrate search engine and support most template engines.

themes/navy/layout/index.swig

@@ -57,3 +57,23 @@
     </div>
   </div>
 </div>
+
+<div id="plugin-wrap">
+  <div class="wrapper">
+    <div class="inner plugin-wrapper">
+      <div class="plugin-thumbnail">
+        <div class="plugin-thumbnail-container">
+          <img src="/img/carbon.svg">
+        </div>
+      </div>
+      <div class="plugin-intro">
+        <div class="plugin-intro-container">
+          <h2 class="plugin-intro-title">Powerful API</h2>
+          <p class="plugin-intro-text">Features powerful APIs for limitless extensibility. Easily integrate with your existing toolchains (Babel, UglifyJS, PostCSS, HTMLMinifier and many others).</p>
+          <a href="/plugins/" class="plugin-link">Explore Plugins</a>
+          <a href="/plugins/" class="plugin-link">View API docs</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

themes/navy/source/css/_partial/index.styl

@@ -4,6 +4,7 @@
 
 #banner-title,
 .theme-intro-title
+.plugin-intro-title
   line-height: 1.15
   font-weight: 300
   font-family: font-title
@@ -17,6 +18,7 @@
     padding-top: 100px
 
 .theme-intro-title
+.plugin-intro-title
   margin-bottom: 24px
   padding-top: 24px
   @media mq-normal
@@ -156,6 +158,7 @@
 
 #intro-get-started-link
 #theme-link
+.plugin-link
   font-size: 18px
   font-family: font-title
   display: inline-block
@@ -180,6 +183,13 @@
     background: @border-color
     color: lighten(color-navy, 10%)
 
+.plugin-link
+  color: color-border
+  border-color: color-border
+  &:hover
+    background: @border-color
+    color: lighten(color-navy, 20%)
+
 #theme-wrap
   background: lighten(color-navy, 10%)
   border-top: 1px solid #161d24
@@ -191,7 +201,16 @@
   @media mq-normal
     padding: 96px 64px
 
+#plugin-wrap
+  background: lighten(color-navy, 20%)
+  padding: 32px
+  @media mq-tablet
+    padding: 64px 64px
+  @media mq-normal
+    padding: 96px 64px
+
 .theme-wrapper
+.plugin-wrapper
   display: flex
   flex-wrap: wrap
   color: rgba(255, 255, 255, 0.8)
@@ -202,28 +221,39 @@
     order: 0
     width: 50%
 
+.plugin-thumbnail
+  width: 100%
+  @media mq-normal
+    order: 2
+    width: 50%
+
 .theme-thumbnail-container
+.plugin-thumbnail-container
   margin-right: auto
   margin-left: auto
   width: 90%
 
 .theme-thumbnail img
+.plugin-thumbnail img
   max-width: 100%
   box-shadow: 6px 6px 12px 0 rgba(0,0,0,.4)
 
 .theme-intro
+.plugin-intro
   width: 100%
   @media mq-normal
     width: 50%
 
 .theme-intro-container
+.plugin-intro-container
   margin-right: auto
   margin-left: auto
   text-align: center
   @media mq-normal
     width: 80%
 
 .theme-intro-text
+.plugin-intro-text
   color: rgba(255, 255, 255, 0.6)
   line-height: 1.5
   font-size: 16px