New style for homepage

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file, in reverse chronological order by release.
 
+## 1.1.0 - TBD
+
+- Nothing.
+
+### Added
+
+- Nothing.
+
+### Deprecated
+
+- Nothing.
+
+### Removed
+
+- Nothing.
+
+### Fixed
+
+- Nothing.
+
 ## 1.0.0 - TBD
 
 Initial stable release.

doc/book/index.html

@@ -3,14 +3,15 @@
     <h1>Expressive</h1>
 
     <p>PSR-7 Middleware in Minutes</p>
+    <pre><code class="language-bash" data-trim>$ composer create-project -s rc zendframework/zend-expressive-skeleton expressive</code></pre>
   </div>
 </div>
 
 <div class="container features">
   <div class="row row-flex row-flex-wrap">
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content">
-        <img src="images/checkmark.png" alt="PSR-7" /><br />
+      <div class="panel"><div class="panel-content">
+        <img src="images/check.png" alt="PSR-7" /><br />
 
         <h3>PSR-7</h3>
 
@@ -21,7 +22,7 @@ <h3>PSR-7</h3>
     </div>
 
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content center-block">
+      <div class="panel"><div class="panel-content center-block">
         <img src="images/lambda.png" alt="Middleware" /><br />
 
         <h3>Middleware</h3>
@@ -35,8 +36,8 @@ <h3>Middleware</h3>
     </div>
 
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content center-block">
-        <img src="images/nodes.png" alt="Routing" /><br />
+      <div class="panel"><div class="panel-content center-block">
+        <img src="images/network.png" alt="Routing" /><br />
 
         <h3>Routing</h3>
 
@@ -49,7 +50,7 @@ <h3>Routing</h3>
 
   <div class="row row-flex row-flex-wrap">
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content">
+      <div class="panel"><div class="panel-content">
         <img src="images/syringe.png" alt="Dependency Injection" /><br />
 
         <h3>Dependency Injection</h3>
@@ -62,7 +63,7 @@ <h3>Dependency Injection</h3>
     </div>
 
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content center-block">
+      <div class="panel"><div class="panel-content center-block">
         <img src="images/pencil.png" alt="Templating" /><br />
 
         <h3>Templating</h3>
@@ -75,8 +76,8 @@ <h3>Templating</h3>
     </div>
 
     <div class="col-sm-6 col-md-4">
-      <div class="panel panel-success"><div class="panel-content center-block">
-        <img src="images/warning.png" alt="Error Handling" /><br />
+      <div class="panel"><div class="panel-content center-block">
+        <img src="images/error.png" alt="Error Handling" /><br />
 
         <h3>Error Handling</h3>
 
@@ -95,12 +96,9 @@ <h3>Error Handling</h3>
     <h2>Get Started Now!</h2>
 
     <p>Installation is only a <a href="https://getcomposer.org">Composer</a> command away!</p>
-
     <pre><code class="language-bash" data-trim>
-$ composer create-project -s rc zendframework/zend-expressive-skeleton expressive
-    </code></pre>
+$ composer create-project -s rc zendframework/zend-expressive-skeleton expressive</code></pre>
 
-    <h3>Choose what you want</h3>
 
     <p>
       Expressive provides interfaces for routing and templating, letting <em>you</em>
@@ -111,21 +109,19 @@ <h3>Choose what you want</h3>
       Our unique installer allows you to select <em>your</em> choices when starting
       your project!
     </p>
-
-    <div class="container"><div class="row">
-        <div class="col-xs-8">
-          <img class="img-responsive" src="images/installer.png" alt="Expressive Installer" /><br />
+      <div class="row">
+        <div class="col-xs-12">
+          <img class="img-responsive screenshot" src="images/installer.png" alt="Expressive Installer" /><br />
         </div>
-
-        <div class="col-xs-4">
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
           <button type="btn btn-lg btn-primary"><a href="getting-started/skeleton/">Learn more</a></button>
         </div>
-    </div></div>
-
-    <h3>Applications, Simplified</h3>
-
-    <div class="container"><div class="row">
-        <div class="col-xs-8">
+    </div>
+     <div class="row">
+        <div class="col-xs-12">
+          <h2>Applications, Simplified</h2>
           <p>Write middleware:</p>
 
           <pre><code class="language-php" data-trim>
@@ -139,24 +135,17 @@ <h3>Applications, Simplified</h3>
 
     $response->getBody()->write('You visited ' . $path);
     return $next($request, $response->withHeader('X-Path', $path));
-};
-    </code></pre>
-
+};</code></pre>
           <p>And add it to an application:</p>
-
           <pre><code class="language-php" data-trim>
 $app->get('/path', $pathMiddleware);
           </code></pre>
         </div>
-
-        <div class="col-xs-4">
+      </div>
+       <div class="row">
+        <div class="col-xs-12">
           <button type="btn btn-lg btn-primary"><a href="features/application/">Learn more</a></button>
-        </div>
     </div></div>
-  </div></div></div>
-</div>
-
-<div class="container">
   <div class="row"><div class="panel"><div class="panel-content">
     <h2>Learn more</h2>
 
@@ -168,4 +157,4 @@ <h2>Learn more</h2>
 
     <p>Or use the menu to navigate to the section you're interested in.</p>
   </div></div></div>
-</div>
+</div></div></div></div>