Change the screenshots section to be a single screenshot with clickable sections

static/css/quay.css

@@ -4109,4 +4109,49 @@ have a fixed width and height (but it's not required).
 
 .tour-section.tour-header .tour-section-title {
   text-align: center;
-}
+}
+
+.screenshot-feature {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.screenshot-feature .fa {
+  float: left;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 50%;
+  background: #eee;
+  font-size: 28px;
+  text-align: center;
+  margin-right: 20px;
+  margin-top: 0px;
+  clear: both;
+}
+
+.screenshot-feature.active .fa {
+  color: white;
+  background: #428bca;
+}
+
+
+.screenshot-feature .sf-title {
+  font-size: 20px;
+  display: inline-block;
+  margin-bottom: 10px;
+  margin-top: 6px;
+}
+
+.screenshot-feature:hover {
+  cursor: pointer;
+}
+
+.screenshot-feature:hover .sf-title {
+  text-decoration: underline;
+}
+
+.screenshot-feature .sf-text {
+  margin-left: 70px;
+}

static/js/controllers.js

@@ -265,6 +265,7 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
 
 function LandingCtrl($scope, UserService, ApiService, Features, Config) {
   $scope.namespace = null;
+  $scope.currentScreenshot = 'repo-view';
 
   $scope.$watch('namespace', function(namespace) {
     loadMyRepos(namespace);
@@ -274,6 +275,10 @@ function LandingCtrl($scope, UserService, ApiService, Features, Config) {
     loadMyRepos($scope.namespace);
   });
 
+  $scope.changeScreenshot = function(screenshot) {
+    $scope.currentScreenshot = screenshot;
+  };
+
   $scope.canCreateRepo = function(namespace) {
     if (!$scope.user) { return false; }
 

static/partials/landing-normal.html

@@ -109,39 +109,44 @@
   </div> <!--  -->
 
   <div class="landing-section">
-    <h2>Business-class management tools</h2>
+    <h2>Built with our users in mind</h2>
     <div class="container">
       <div class="row">
-        <div class="col-md-4 feature-shoutout">
+        <div class="col-lg-8 feature-shoutout">
-          <img src="/static/img/user-home.png" class="img-responsive">
+          <img id="screenshot" ng-src="{{ '/static/img/' + currentScreenshot + '.png' }}" class="img-responsive">
-          <a href="">Customized for you</a>
         </div>
+        <div class="col-lg-4">
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-view' ? 'active' : ''" ng-click="changeScreenshot('repo-view')">
+            <i class="fa fa-hdd-o"></i>
+            <span class="sf-title">Beautiful repository view</span>
+            <div class="sf-text">
+              Repository is presented with the maximum amount of useful information, including a visual tree of its image history, markdown-based description, and tags.
+            </div>
+          </div>
 
-        <div class="col-md-4 feature-shoutout">
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-admin' ? 'active' : ''" ng-click="changeScreenshot('repo-admin')">
-          <img src="/static/img/repo-view.png" class="img-responsive">
+            <i class="fa fa-group"></i>
-          <a href="">Detailed repository information</a>
+            <span class="sf-title">Share at your control</span>
-        </div>
+            <div class="sf-text">
+              Set up the exact permissions your team, organization or business needs. Need to grant external access? Create one or more robot accounts to restrict access.
+            </div>
+          </div>
 
-        <div class="col-md-4 feature-shoutout">
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'build-history' ? 'active' : ''" ng-click="changeScreenshot('build-history')">
-          <img src="/static/img/build-history.png" class="img-responsive">
+            <i class="fa fa-tasks"></i>
-          <a href="">Dockerfile build in the cloud</a>
+            <span class="sf-title">Dockerfile Build</span>
-        </div>
+            <div class="sf-text">
-      </div>
+              Repositories can be linked to Github repositories, with automatic building of the Dockerfile(s) found on push.
+            </div>
+          </div>
 
-      <div class="row">
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-changes' ? 'active' : ''" ng-click="changeScreenshot('repo-changes')">
-        <div class="col-md-4 feature-shoutout">
+            <i class="fa fa-code-fork"></i>
-          <img src="/static/img/repo-admin.png" class="img-responsive">
+            <span class="sf-title">Repository Diff</span>
-          <a href="">Fine grain permissions model</a>
+            <div class="sf-text">
-        </div>
+              See exactly which files were added, changed, or removed for each image in a repository.
-
+            </div>
-        <div class="col-md-4 feature-shoutout">
+          </div>
-          <img src="/static/img/repo-changes.png" class="img-responsive">
-          <a href="">Docker diff visualized</a>
-        </div>
-
-        <div class="col-md-4 feature-shoutout">
-          <img src="/static/img/org-repo-list.png" class="img-responsive">
-          <a href="">Organizations and Teams</a>
         </div>
       </div>
     </div>