Redo the landing page to:

- Show the user's top repos if they have any
  - Show a link to the guide and the repos list if they do not

- Add a getting starting guide
- Redo the repos list to show the user's repos and the top 10 public repos separately

static/partials/guide.html

@@ -0,0 +1,33 @@
+<div class="container">
+  <div class="alert alert-warning">Warning: Quay requires docker version 0.7 or higher to work</div>
+
+  <h2>Getting started guide</h2>
+  <div class="container">
+  
+    <h3>Pushing a repository to Quay</h3>
+    <div class="container">
+      First, tag the image with your repository name:<br><br>
+      <pre>docker tag <i>0u123imageid</i> quay.io/<i>repo_namespace/repo_name</i></pre>
+      <br>
+      Second, push the repository to Quay:<br><br>
+      <pre>docker push quay.io/<i>repo_namespace/repo_name</i></pre>
+    </div>
+    <br>
+
+    <h3>Pulling a repository from Quay</h3>
+    <div class="container">
+      <div class="alert alert-info">Note: <b>Private</b> repositories require you to be <b>logged in</b> or the pull will fail. See below for how to sign into Quay if you have never done so before. </div>
+      To pull a repository from Quay, run the following command:
+      <br><br>
+      <pre>docker pull quay.io/<i>path/to/repository</i></pre>
+    </div>
+    <br>
+
+    <h3>Signing into to Quay <span class="label label-default">Optional</span></h3>
+    <div class="container">
+      If you have never pushed a repository to Quay and wish to pull a <b>private</b> repository, you can sign into Quay by running the following command:
+      <br><br>
+      <pre>docker login quay.io</pre>
+    </div>
+  </div>
+</div>

static/partials/landing.html

@@ -1,10 +1,36 @@
 <div class="landing">
   <div class="background"></div>
   <div class="background-mask"></div>
-  <div class="message-container">
+  <div class="message-container" ng-show="user.anonymous">
     <div class="message">Secure hosting for <b>private</b> docker containers</div>
-    <div class="sub-message" ng-show="user.anonymous">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
-    <div class="sellcall" ng-show="user.anonymous"><a href="">Starting at $7/mo</a></div>
+    <div class="sub-message">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
+    <div class="sellcall"><a href="">Starting at $7/mo</a></div>
+  </div>
+
+  <div class="message-container" ng-show="!user.anonymous">
+    <div ng-show="loadingmyrepos">
+      <div class="spin"></div>
+    </div>
+    <div ng-show="!loadingmyrepos && myrepos.length > 0">
+      <h2>Your Top Repositories</h4>      
+      <div class="repo-listing" ng-repeat="repository in myrepos">
+	<i class="icon-hdd icon-large"></i>
+	<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
+	<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+      </div>
+    </div>
+    <div ng-show="!loadingmyrepos && myrepos.length == 0">
+      <div class="sub-message">
+	You don't have any <b>private</b> repositories yet!
+
+	<div class="options">
+	  <div class="option"><a href="#/guide">Learn how to create a repository</a></div>
+	  <div class="or"><span>or</span></div>
+	  <div class="option"><a href="#/repository">Browse the public repositories</a></div>
+	</div>
+
+      </div>
+    </div>
   </div>
 
   <div class="signup-container">
@@ -24,10 +50,11 @@
       </div>
     </div>
     <div ng-show="!user.anonymous">
-      <div class="sub-message">
-	Welcome <b>{{ user.username }}</b>!
+      <div class="welcome-message">
+	<img class="gravatar" src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=128&d=identicon" />
+	<div class="sub-message">Welcome <b>{{ user.username }}</b>!</div>
       </div>
-      <button class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse repositories</button>
+      <button ng-show="myrepos" class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse all repositories</button>
     </div>
   </div>
 
@@ -74,6 +101,7 @@
     <h4>Support</h4>
     <ul>
       <li><a href="">Contact Support</a></li>
+      <li><a href="#/guide/">Getting Started Guide</a></li>
     </ul>
   </div>
 

static/partials/repo-list.html

@@ -3,10 +3,31 @@
 </div>
 
 <div class="container" ng-show="!loading">
-  <h3>Repositories</h3>
-  <div class="repo-listing" ng-repeat="repository in repositories">
-    <i class="icon-hdd icon-large"></i>
-    <a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
-    <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+  <div class="repo-list">
+    <h3>Your Repositories</h3>
+    <div ng-show="private_repositories.length > 0">
+      <div class="repo-listing" ng-repeat="repository in private_repositories">
+	<i class="icon-hdd icon-large"></i>
+	<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
+	<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+      </div>
+    </div>
+
+    <div ng-show="private_repositories.length == 0" style="padding:20px;">
+      <div class="alert alert-info">
+	<h4>You don't have any repositories yet!</h4>
+	<a href="#/guide"><b>Click here</b> to learn how to create a repository</a>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="repo-list">
+    <h3>Top Public Repositories</h3>
+    <div class="repo-listing" ng-repeat="repository in public_repositories">
+      <i class="icon-hdd icon-large"></i>
+      <a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
+      <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+    </div>
   </div>
 </div>