Added feature box

static/css/actix.css

@@ -283,8 +283,11 @@ img {
 }
 
 .actix-showcase {
+  overflow: hidden;
   margin-top: 2rem;
   margin-bottom: 2rem;
+  padding: 2rem 1rem 0 1rem;
+  background: #dceaea;
 }
 
 .actix-showcase ul {
@@ -332,6 +335,25 @@ img {
   font-size: 1rem;
 }
 
+.actix-feature-selectors {
+  padding-bottom: 2rem;
+}
+
+.actix-feature-selector {
+  text-align: center;
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+}
+
+.actix-feature-selector.active {
+  background: white;
+}
+
+.actix-feature-selector.active a {
+  color: #333!important;
+  text-decoration: none;
+}
+
 .final-pitch {
   text-align: center;
 }

static/js/actix.js

@@ -0,0 +1,32 @@
+(function() {
+  function activateFeature(sel) {
+    $('div.actix-feature').hide();
+    $(sel).show();
+    $('li.actix-feature-selector').removeClass('active');
+    $('li.actix-feature-selector > a').each(function() {
+      if (this.getAttribute('href') === sel) {
+        $(this).parent().addClass('active');
+      }
+    });
+  }
+
+  function initFeatureSelector() {
+    $('div.actix-feature').hide();
+    var active = $(window.location.hash);
+    if (active.is('div.actix-feature')) {
+      activateFeature(window.location.hash);
+    } else {
+      activateFeature('#' + $('div.actix-feature')[0].id);
+    }
+
+    $('ul li.actix-feature-selector a').on('click', function(evt) {
+      evt.preventDefault();
+      history.replaceState({}, '', evt.target.href);
+      activateFeature(this.getAttribute('href'));
+    });
+  }
+
+  $(function() {
+    initFeatureSelector();
+  });
+})();