Install Section on IPFS Homepage

.circleci/config.yml

@@ -14,7 +14,7 @@ jobs:
 
   deploy:
     docker:
-      - image: olizilla/ipfs-dns-deploy:1.1
+      - image: olizilla/ipfs-dns-deploy:latest
         environment:
           DOMAIN: website.ipfs.io
           BUILD_DIR: public

content/index.html

@@ -101,11 +101,11 @@ <h5>Every file can be found by <strong>human-readable names</strong> using a dec
             </div>
             <div class="content-center">
                 <h5>For a deeper look at IPFS</h5>
-                <a class="button button-primary" href="https://github.com/ipfs/papers/raw/master/ipfs-cap2pfs/ipfs-p2p-file-system.pdf">Read the white paper</a>
+                <a class="button button-primary button-whitepaper" href="https://github.com/ipfs/papers/raw/master/ipfs-cap2pfs/ipfs-p2p-file-system.pdf">Read the white paper</a>
             </div>
         </section>
 
-        {{ partial "implementations.html" . }}
+        {{ partial "install.html" . }}
 
         <section id="uses" class="content-center">
             <h2>IPFS is useful here and now</h2>

layouts/partials/header.html

@@ -9,11 +9,10 @@ <h1 class="pull-left">
       <ul class="list-unstyled list-inline cf">
         {{ if eq .page.URL "/" }}
           <li><a href="/#why">About</a></li>
-          <li><a href="/#implementations">Implementations</a></li>
         {{ else }}
           <li><a href="/">About</a></li>
         {{ end }}
-        <li><a href="//docs.ipfs.io/introduction/install/" {{ if eq .page.Params.pagename "install" }}class="current-item"{{ end }}>Install</a></li>
+        <li><a href="/#install">Install</a></li>
         <li><a href="/media" {{ if eq .page.Type "media" }}class="current-item"{{ end }}>Media</a></li>
         <li><a href="//docs.ipfs.io/" {{ if and (eq .page.Type "docs") (not (eq .page.Params.pagename "install")) }}class="current-item"{{ end }}>Docs</a></li>
         <li><a href="//blog.ipfs.io/" {{ if or (eq .page.Type "blog") (eq .page.Data.Singular "author") }}class="current-item"{{ end }}>Blog</a></li>

layouts/partials/implementations.html

@@ -1,6 +1,28 @@
-<section id="implementations">
+<section id="install">
   <div class="container">
-
+      <h2 class="install-title tc">Install</h2>
+      <hr class="install-underline">
+      <div class="grid-flex-container">
+        <div class="grid-flex-cell">
+            <ol class="list install-link-heading tc">
+                <li><h5><a class="link white" href="https://docs.ipfs.io/introduction/install/">1. Install IPFS on your machine</a></h5></li>
+                <li><h5>2. After installation, get started adding and working with files on IPFS.</h5></li>
+            </ol>
+            <article class="center mw5 mw6-ns hidden ba mv4 code-box">
+                <div class="pa3 bt tj code-box">
+                    <p class="code-comment"># create ipfs local config file</p>
+                    <p>ipfs init</p>
+                    <p class="code-comment"># start the ipfs deamon process</p>
+                    <p>ipfs daemon</p>
+                    <p class="code-comment"># show ipfs object data</p>
+                    <p>ipfs cat</p>
+                    <p class="code-comment"># download ipfs objects</p>
+                    <p>ipfs get</p>
+                </div>
+            </article>
+            <h5 class="tc">Is the command line not your jam? Download <a href="https://github.com/ipfs-shipyard/ipfs-desktop">ipfs-desktop</a>!</h5>
+            </div>  
+        </div>    
     <h2 class="content-center">Implementations</h2>
     <div class="grid-flex-container">
       <div class="grid-flex-cell-1of2">

layouts/partials/install.html

@@ -0,0 +1,75 @@
+<section id="install">
+    <div class="container">
+        <h2 class="install-title tc">Install</h2>
+        <hr class="install-underline">
+        <div class="grid-flex-container">
+            <div class="grid-flex-cell">
+                <ol class="list install-link-heading tc">
+                    <li><h5><a class="link white" href="https://docs.ipfs.io/introduction/install/">1. Install IPFS on your machine</a></h5></li>
+                    <li><h5>2. After installation, get started adding and working with files on IPFS.</h5></li>
+                </ol>
+                <article class="center mw5 mw6-ns hidden ba mv4 code-box">
+                    <div class="pa3 bt tj code-box">
+                        <p class="code-comment"># create ipfs local config file</p>
+                        <p>ipfs init</p>
+                        <p class="code-comment"># start the ipfs deamon process</p>
+                        <p>ipfs daemon</p>
+                        <p class="code-comment"># show ipfs object data</p>
+                        <p>ipfs cat</p>
+                        <p class="code-comment"># download ipfs objects</p>
+                        <p>ipfs get</p>
+                    </div>
+                </article>
+                <h5 class="tc">Is the command line not your jam? Download <a href="https://github.com/ipfs-shipyard/ipfs-desktop">ipfs-desktop</a>!</h5>
+                </div>  
+        </div>    
+        <h2 class="content-center">Implementations</h2>
+        <div class="grid-flex-container">
+        <div class="grid-flex-cell-1of2">
+            <a href="https://github.com/ipfs/go-ipfs" target="_blank">
+            <div id="go-ipfs-logo" class="implementation-logo content-center avatar-rounded">
+                <img src="/images/go-ipfs-logo.png" />
+            </div>
+            <h5 class="content-center">Go</h5>
+            <p>go-ipfs is the main implementation of IPFS. It includes a core implementation, a daemon server, command line
+                tooling and more.</p>
+            </a>
+        </div>
+
+        <div class="grid-flex-cell-1of2">
+            <a href="https://js.ipfs.io" target="_blank">
+            <div class="implementation-logo content-center avatar-rounded">
+                <img src="/images/js-ipfs-logo.svg" />
+            </div>
+            <h5 class="content-center">JavaScript</h5>
+            <p>js-ipfs paves the way for the browser implementation of IPFS. Written entirely in JavaScript, it
+                opens the door to a world of possibilities.</p>
+            </a>
+        </div>
+        </div>
+
+        <h2 id="integrations-title" class="content-center">Integrations</h2>
+        <div class="grid-flex-container">
+        <!-- <div class="grid-flex-cell-1of2">
+            <a href="https://github.com/ipfs-shipyard/ipfs-desktop" target="_blank">
+            <div class="app-ss content-center">
+                <img src="/images/ipfs-desktop-ss.png" />
+            </div>
+            <h5 class="content-center">Desktop App</h5>
+            <p>IPFS Desktop allows you to run your IPFS node on your machine without having to bother with command line tools.
+                Powered by the Web UI.</p>
+            </a>
+        </div> -->      
+        <div class="grid-flex-cell grid-flex-cell-1of2 content-center">
+            <a href="https://github.com/ipfs-shipyard/ipfs-companion" target="_blank">
+            <div class="app-ss content-center">
+                <img src="/images/ipfs-companion-ss.png" />
+            </div>
+            <h5 class="content-center">Browser Companion</h5>
+            <p align="left">Upgrade your browser with IPFS super powers. This add-on enables everyone to access IPFS resources the way they
+                were meant to.</p>
+            </a>
+        </div>
+        </div>      
+    </div>
+</section>

less/main.less

@@ -22,6 +22,7 @@
 @import 'components/code';
 @import 'components/blog';
 @import (less) 'node_modules/magnific-popup/dist/magnific-popup.css';
+@import (less) 'node_modules/tachyons/css/tachyons.css';
 
 @import 'pages/home';
 @import 'pages/docs';

less/pages/home.less

@@ -4,7 +4,8 @@
 *
 --------------------------------------------------------------------*/
 
-#implementations {
+#implementations,
+&#install {
   @color-white: #fff;
   @color-grey: rgba( 255, 255, 255, 0.6);
   @color-teal: #6acad1;
@@ -13,7 +14,7 @@
   width: 100vw;
   left: 50%;
   margin-left: -50vw;
-  margin-top: 80px;
+  // margin-top: 80px;
   padding-bottom: 40px;
   background: fade(@blue-space, 100%);
   background-image: url('../images/stars.png'), linear-gradient(to bottom, fade(@blue-space, 100%) 0%,#062b3f 100%);
@@ -67,6 +68,49 @@
   }
 }
 
+.install-underline {
+  width: 50px;
+  height: 3px;
+  border-radius: 3px;
+  background: @brand-teal;
+  display: block;
+  margin: 0 auto;
+}
+
+section#install:after {
+  display: none;
+}
+
+.install-link-heading {
+    margin-top: 35px;
+}
+
+.install-title {
+  color: white;
+  margin-bottom: 20px;
+}
+
+.code-box {
+  background-color: black;
+  font-family: monospace;
+}
+
+#install p {
+  color: #63c8cf;
+}
+
+#install p.code-comment {
+  color: white;
+}
+
+.button-whitepaper {
+  margin-bottom: 75px;
+}
+
+section:after #install {
+  display: none;
+}
+
 .latest-list {
   margin-bottom: 0;
 

package.json

@@ -1,12 +1,14 @@
 {
   "name": "ipfs.io",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "ipfs-css": "^0.12.0"
+  },
   "devDependencies": {
     "browserify": "^14.4.0",
     "dnslink-deploy": "^1.0.7",
     "factor-bundle": "^2.5.0",
-    "hugo-bin": "0.18.1",
+    "hugo-bin": "^0.42.0",
     "imagemin-cli": "^3.0.0",
     "imagemin-jpegtran": "^5.0.2",
     "imagemin-optipng": "^5.2.1",
@@ -21,6 +23,7 @@
     "npm-run-all": "^4.1.5",
     "pixi.js": "^4.5.3",
     "standard": "^10.0.2",
+    "tachyons": "^4.10.0",
     "uglify-js": "^3.0.18",
     "watchify": "^3.9.0"
   },