Home redesign 2: Choose your Haskell Path (#381)

Author: Zelenya

site/css/hl.css

@@ -4603,6 +4603,9 @@ pre .hs-keyglyph {
   font-size: 95%;
   line-height: 130%; }
 
+.path-overview-section h3 {
+  font-size: 24px; }
+
 .features .col-md-6 {
   cursor: pointer; }
 

site/index.html

@@ -25,7 +25,7 @@ <h3 class="summary">Enjoy long-term maintainable software you can rely on</h3>
    </div>
 </div>
 
-<br class="hidden-xs hidden-sm"> 
+<br class="hidden-xs hidden-sm">
 
 <div class="container">
    <div class="row">
@@ -44,7 +44,7 @@ <h3>Refactor with confidence</h3>
    </div>
 </div>
 
-<br> 
+<br>
 <br class="hidden-xs hidden-sm">
 
 <div class="pattern-bg">
@@ -555,6 +555,37 @@ <h2>Sponsors</h2>
       </div>
    </div>
 </div>
+<div class="path-overview-section">
+   <div class="container">
+      <div class="row text-center">
+          <h2>With Haskell, you are in control. Choose your own path</h2>
+      </div>
+      <div class="row">
+         <div class="span3 col-sm-3">
+            <h3>Language design</h3>
+            <p>Use Haskell for research and contribute to ideas that continue to shape modern programming languages since 1990.</p>
+         </div>
+         <div class="span3 col-sm-3">
+            <h3>Production software</h3>
+            <p>Use Haskell in production for web apps, tools, and systems where correctness and maintainability matter.</p>
+         </div>
+         <div class="span3 col-sm-3">
+            <h3>Pet projects</h3>
+            <p>Use Haskell to build tools, games, and side projects that are satisfying to make and rewarding to understand.</p>
+         </div>
+         <div class="span3 col-sm-3">
+            <h3>Your way</h3>
+            <p>There is no one way to do Haskell. Use Haskell the way that fits how you like to work.</p>
+         </div>
+      </div>
+      <br>
+      <div class="row ">
+         <div class="span12 col-sm-12 text-center">
+            <a href="/get-started/" class="btn btn-primary">Get started</a>
+         </div>
+      </div>
+   </div>
+</div>
 <div class="transition">
    <div class=" container ">
       <div class=" row ">