Improve Docs homepage

1 files changed, 24 insertions, 44 deletions

diff --git a/docs/index.html b/docs/index.html
index beadd9e..96df6a4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,31 +6,31 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
-  <title>Spectre.css - The lightweight, responsive and modern CSS framework</title>
+  <title>Spectre.css - A lightweight, responsive and modern CSS framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
   <link rel="stylesheet" href="dist/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
-  <div class="section section-header hide">
+  <div class="section section-header">
     <div class="grid-header container grid-960">
       <div class="s-brand">
-        <div href="index.html" class="s-logo">
-          <img src="img/spectre-logo.svg" alt="Spectre.css" />
+        <div class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
           <h2>Spectre.css</h2>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="section section-hero bg-light">
+  <div class="section section-hero bg-gray">
     <div id="overview" class="grid-hero container grid-960 text-center">
       <h1>Spectre.css</h1>
-      <h2>The <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
+      <h2>A <u>lightweight</u>, <u>responsive</u> and <u>modern</u> CSS framework</h2>
       <div class="columns">
         <div class="column">
-          <a href="getting-started.html" class="btn btn-primary">Docs</a>
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+          <a href="getting-started.html" class="btn btn-primary btn-lg">Docs</a>
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
         </div>
       </div>
       <div class="columns">
@@ -68,12 +68,22 @@
     </div>
   </div>
 
-  <div class="section section-features bg-primary">
-
+  <div class="section section-features bg-primary text-light text-center">
+    <div class="container grid-960">
+      <h2>Installation</h2>
+      <div class="columns">
+        <div class="column col-10 col-sm-12 centered">
+          <p class="text-large text-secondary">There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
+        </div>
+        <div class="column col-10 col-sm-12 centered">
+          <a href="getting-started.html#installation" class="btn btn-lg">Get started</a>
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="section section-updates bg-gray">
-    <div id="updates" class="container grid-960">
+    <div class="container grid-960">
       <div class="columns">
         <div class="column col-4 col-xs-12">
           <div class="card">
@@ -87,6 +97,8 @@
               <a href="https://twitter.com/spectrecss" class="btn" target="_blank">Follow</a>
             </div>
           </div>
+        </div>
+        <div class="column col-4 col-xs-12">
           <div class="card">
             <div class="card-header">
               <div class="card-title h6">PayPal Donate</div>
@@ -102,45 +114,13 @@
         <div class="column col-4 col-xs-12">
           <div class="card">
             <div class="card-header">
-              <div class="card-title h6">Spectre Logo</div>
-            </div>
-            <div class="card-body text-center">
-              <img src="img/spectre-logo.svg" alt="Spectre.css" class="update-branding" />
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title h6">Responsive Resizer</div>
-            </div>
-            <div class="card-body">
-                A responsive web test tool Responsive Resizer. You can use it online or clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally.
-            </div>
-            <div class="card-footer">
-              <a href="https://picturepan2.github.io/responsive-resizer/" class="btn" target="_blank">Use online</a>
-            </div>
-          </div>
-        </div>
-        <div class="column col-4 col-xs-12">
-          <div class="card">
-            <div class="card-header">
               <div class="card-title h6">Spectre Docs</div>
             </div>
             <div class="card-body">
                 Spectre Docs experience has been completely rewritten and improved. 
             </div>
             <div class="card-footer">
-              <a href="getting-started.html" class="btn">Get started</a>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title h6">Accordions</div>
-            </div>
-            <div class="card-body">
-              Accordions are used to toggle sections of content.
-            </div>
-            <div class="card-footer">
-              <a href="components.html#accordions" class="btn">Learn more</a>
+              <a href="getting-started.html" class="btn">Explore</a>
             </div>
           </div>
         </div>