website: Main Syncbase page and the top level nav.

https://screenshot.googleplex.com/26XjN1vicDF.png

This CL defines the structure for Syncbase subsite and
completes the main Syncbase page (without the animation)

Change-Id: I3b0070a9935c399fd392545efd64b22ba112bec0
diff --git a/content/syncbase/api-reference.md b/content/syncbase/api-reference.md
new file mode 100644
index 0000000..24f201a
--- /dev/null
+++ b/content/syncbase/api-reference.md
@@ -0,0 +1,5 @@
+= yaml =
+title: API Reference
+layout: syncbase
+toc: true
+= yaml =
diff --git a/content/syncbase/example-apps.md b/content/syncbase/example-apps.md
index 0df0162..1bcd7d9 100644
--- a/content/syncbase/example-apps.md
+++ b/content/syncbase/example-apps.md
@@ -1,6 +1,5 @@
 = yaml =
 title: Example Apps
 layout: syncbase
-theme: teal
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/acls.md b/content/syncbase/guides/acls.md
deleted file mode 100644
index 6867784..0000000
--- a/content/syncbase/guides/acls.md
+++ /dev/null
@@ -1,7 +0,0 @@
-= yaml =
-title: Access Control
-layout: syncbase
-theme: teal
-sort: 5
-toc: true
-= yaml =
diff --git a/content/syncbase/guides/batches.md b/content/syncbase/guides/batches.md
index 5f5c608..c9b7463 100644
--- a/content/syncbase/guides/batches.md
+++ b/content/syncbase/guides/batches.md
@@ -1,7 +1,6 @@
 = yaml =
 title: Batches
 layout: syncbase
-theme: teal
 sort: 4
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/blobs.md b/content/syncbase/guides/blobs.md
deleted file mode 100644
index c10f63c..0000000
--- a/content/syncbase/guides/blobs.md
+++ /dev/null
@@ -1,7 +0,0 @@
-= yaml =
-title: Blobs
-layout: syncbase
-theme: teal
-sort: 7
-toc: true
-= yaml =
diff --git a/content/syncbase/guides/cloud.md b/content/syncbase/guides/cloud.md
index 82b7d94..dc6edb4 100644
--- a/content/syncbase/guides/cloud.md
+++ b/content/syncbase/guides/cloud.md
@@ -1,7 +1,6 @@
 = yaml =
 title: Cloud Syncbase
 layout: syncbase
-theme: teal
 sort: 10
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/conflict.md b/content/syncbase/guides/conflict.md
deleted file mode 100644
index bdf1b58..0000000
--- a/content/syncbase/guides/conflict.md
+++ /dev/null
@@ -1,7 +0,0 @@
-= yaml =
-title: Conflict Resolution
-layout: syncbase
-theme: teal
-sort: 8
-toc: true
-= yaml =
diff --git a/content/syncbase/guides/data-flow.md b/content/syncbase/guides/data-flow.md
index 3cba173..de03f53 100644
--- a/content/syncbase/guides/data-flow.md
+++ b/content/syncbase/guides/data-flow.md
@@ -1,7 +1,6 @@
 = yaml =
 title: Data Flow
 layout: syncbase
-theme: teal
 sort: 2
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/data-model.md b/content/syncbase/guides/data-model.md
index 8d26e8a..eac6dff 100644
--- a/content/syncbase/guides/data-model.md
+++ b/content/syncbase/guides/data-model.md
@@ -1,7 +1,6 @@
 = yaml =
 title: Data Model
 layout: syncbase
-theme: teal
 sort: 1
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/debugging.md b/content/syncbase/guides/debugging.md
new file mode 100644
index 0000000..062b54b
--- /dev/null
+++ b/content/syncbase/guides/debugging.md
@@ -0,0 +1,6 @@
+= yaml =
+title: Debugging
+layout: syncbase
+sort: 4
+toc: true
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/schema.md b/content/syncbase/guides/schema.md
deleted file mode 100644
index 6a6a9f1..0000000
--- a/content/syncbase/guides/schema.md
+++ /dev/null
@@ -1,7 +0,0 @@
-= yaml =
-title: Schema and upgrades
-layout: syncbase
-theme: teal
-sort: 9
-toc: true
-= yaml =
diff --git a/content/syncbase/guides/synchronization.md b/content/syncbase/guides/synchronization.md
index 548ac20..8ec8cb2 100644
--- a/content/syncbase/guides/synchronization.md
+++ b/content/syncbase/guides/synchronization.md
@@ -1,7 +1,6 @@
 = yaml =
-title: Synchronization
+title: Sharing Data
 layout: syncbase
-theme: teal
 sort: 3
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/guides/syncql.md b/content/syncbase/guides/syncql.md
deleted file mode 100644
index e95c03d..0000000
--- a/content/syncbase/guides/syncql.md
+++ /dev/null
@@ -1,7 +0,0 @@
-= yaml =
-title: SyncQL Queries
-layout: syncbase
-theme: teal
-sort: 6
-toc: true
-= yaml =
diff --git a/content/syncbase/index.md b/content/syncbase/index.md
index 59eb642..815864f 100644
--- a/content/syncbase/index.md
+++ b/content/syncbase/index.md
@@ -1,40 +1,54 @@
 = yaml =
-title: Syncbase
+title: Syncbase for Android
 layout: syncbase
-theme: teal
-toc: true
+toc: false
 = yaml =
 
 Syncbase is a storage system for developers that makes it easy to synchronize
 app data between devices. It works even when devices are not connected to the
-Internet.
+Internet. Syncbase runs on both Android and iOS.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/2cHzd8pBYmU" frameborder="0" allowfullscreen></iframe>
+<img src="http://placehold.it/600x400?text=Syncbase Animation">
+<figcaption>Syncbase's easy-to-use API and peer-to-peer synchronization make
+developing offline-first mobile apps a breeze.</figcaption>
 
 # Why use Syncbase?
 
-- Synchronization between one user's devices is trivial to configure; multiple
-  users can synchronize specific data too
-  - Low latency synchronization enables many apps to use storage for
-    asynchronous communication
-- Internet connection not required
-  - Local storage still works when not connected to the internet
-  - Synchronization protocol is peer-to-peer and works just as well over local
-    WiFi or Bluetooth as the internet
-- Conflict resolution system merges data when devices have been working offline
-- Unified storage model handles both structured data and blobs
-  - Structured databases are easy to use and queryable
-  - Blob caching policies work well on resource-limited devices
-- Powerful management tools
-  - Leverages the Vanadium namespace and security system
-  - Open source reference implementation of Syncbase for developers who want
-    tight control over the data
+<div class="intro-detail intro-detail-offline">
+<p>
+**Offline-first and peer-to-peer**<br>
+Syncbase provides local storage that opportunistically syncs data behind the
+scenes with very low latency. Then built-in conflict resolvers merge data
+seamlessly when devices have been working offline.
+<br>
+There is no cloud instance or internet required for data synchronization to work.
+Synchronization protocol is peer-to-peer and works just as well over local WiFi
+or Bluetooth as the internet. Of course, optionally adding a cloud peer can help
+with data backup and improved data availability.
+</p>
+</div>
 
-The initial version of Syncbase is ready for testing and evaluation by early
-adopters - it is suitable for prototyping, but not for production applications.
+<div class="intro-detail intro-detail-codebase">
+<p>
+**Easy to use**<br>
+Syncbase includes a high-level API that's intuitive and easy-to-use.
+The data model is simple to understand and based on collections of
+key-value pairs.<br>
+Synchronization between one user's devices works out of the box and sharing
+data with other users is trivial.
+</p>
+</div>
 
-This document presents an overview of the system. It is very light on
-implementation details. Subsequent docs will contain those details.
+<div class="intro-detail intro-detail-security">
+<p>
+**Secure**<br>
+Syncbase is secure by default. All data is only accessible by the creator unless
+shared explicitly with others using Syncbase's fine-grained access control
+feature.<br>
+When synchronizing with peers, all communication is encrypted end-to-end on the
+wire.
+</p>
+</div>
 
 # Background
 
@@ -45,3 +59,12 @@
 configurable conflict resolution we want. In summary, we're trying to solve a
 bunch of problems simultaneously whereas those other systems each solve a subset
 of those problems.
+
+# Ready to get started?
+
+The initial version of Syncbase is ready for testing and evaluation by early
+adopters - it is suitable for prototyping, but not for production applications.
+
+<a href="/syncbase/quickstart.html" class="button-passive">
+Build your first app
+</a>
\ No newline at end of file
diff --git a/content/syncbase/my-cloud-syncbase.md b/content/syncbase/my-cloud-syncbase.md
new file mode 100644
index 0000000..e6df83b
--- /dev/null
+++ b/content/syncbase/my-cloud-syncbase.md
@@ -0,0 +1,5 @@
+= yaml =
+title: My Cloud Syncbase
+layout: syncbase
+toc: true
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/quickstart.md b/content/syncbase/quickstart.md
index f5537b0..a26b971 100644
--- a/content/syncbase/quickstart.md
+++ b/content/syncbase/quickstart.md
@@ -1,6 +1,5 @@
 = yaml =
 title: Quick Start
 layout: syncbase
-theme: teal
 toc: true
-= yaml =
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/tutorial/introduction.md b/content/syncbase/tutorial/introduction.md
new file mode 100644
index 0000000..1715afe
--- /dev/null
+++ b/content/syncbase/tutorial/introduction.md
@@ -0,0 +1,6 @@
+= yaml =
+title: Introduction
+layout: syncbase_tutorial
+sort: 1
+toc: true
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/tutorial/step1.md b/content/syncbase/tutorial/step1.md
index b1fb618..cb3ff93 100644
--- a/content/syncbase/tutorial/step1.md
+++ b/content/syncbase/tutorial/step1.md
@@ -1,10 +1,7 @@
 = yaml =
-title: Step 1
+title: Setup
 layout: syncbase_tutorial
-theme: teal
 wherein: you do the step 1
 sort: 1
 toc: true
-= yaml =
-
-# Introduction to step 1
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/tutorial/step2.md b/content/syncbase/tutorial/step2.md
index 1bfd16f..6992ab9 100644
--- a/content/syncbase/tutorial/step2.md
+++ b/content/syncbase/tutorial/step2.md
@@ -1,10 +1,7 @@
 = yaml =
-title: Step 2
+title: Creating Todo Lists
 layout: syncbase_tutorial
-theme: teal
 wherein: you do the step 2
 sort: 2
 toc: true
-= yaml =
-
-# Introduction to step 2
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/tutorial/step3.md b/content/syncbase/tutorial/step3.md
index 839cbee..21b38b1 100644
--- a/content/syncbase/tutorial/step3.md
+++ b/content/syncbase/tutorial/step3.md
@@ -1,10 +1,7 @@
 = yaml =
-title: Step 3
+title: Sharing Todo Lists
 layout: syncbase_tutorial
-theme: teal
 wherein: you do the step 3
 sort: 3
 toc: true
-= yaml =
-
-# Introduction to step 3
+= yaml =
\ No newline at end of file
diff --git a/content/syncbase/tutorial/step4.md b/content/syncbase/tutorial/step4.md
new file mode 100644
index 0000000..3435c04
--- /dev/null
+++ b/content/syncbase/tutorial/step4.md
@@ -0,0 +1,7 @@
+= yaml =
+title: Additional Features
+layout: syncbase_tutorial
+wherein: you do the step 4
+sort: 4
+toc: true
+= yaml =
\ No newline at end of file
diff --git a/public/images/codebase.svg b/public/images/codebase.svg
new file mode 100644
index 0000000..ae0f849
--- /dev/null
+++ b/public/images/codebase.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 79 76" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><ellipse stroke="#b0bec5" stroke-width="4" cx="37.5" cy="36" rx="37.5" ry="36"/><path d="m31 46v-6.04l-5.07-3.801 5.07-3.999v-6.16l-13 10.254 13 9.746m14-20v6.07l5.185 4.09-5.185 3.888v5.952l13-9.746-13-10.254" fill="#ff6e40"/></g></svg>
\ No newline at end of file
diff --git a/public/images/discovery.svg b/public/images/discovery.svg
new file mode 100644
index 0000000..49fdfc8
--- /dev/null
+++ b/public/images/discovery.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><circle stroke="#b0bec5" stroke-width="4" fill="#fff" cx="36" cy="36" r="36"/><path d="m36 31c4.42 0 8-3.58 8-8 0-4.42-3.58-8-8-8-4.42 0-8 3.58-8 8 0 4.42 3.58 8 8 8m0-12c2.21 0 4 1.79 4 4 0 2.21-1.79 4-4 4-2.21 0-4-1.79-4-4 0-2.21 1.79-4 4-4m-12 18c-4.42 0-8 3.58-8 8 0 4.42 3.58 8 8 8 4.42 0 8-3.58 8-8 0-4.42-3.58-8-8-8m0 12c-2.21 0-4-1.79-4-4 0-2.21 1.79-4 4-4 2.21 0 4 1.79 4 4 0 2.21-1.79 4-4 4m12-15.8c-2.1 0-3.8 1.7-3.8 3.8 0 2.1 1.7 3.8 3.8 3.8 2.1 0 3.8-1.7 3.8-3.8 0-2.1-1.7-3.8-3.8-3.8m12 3.8c-4.42 0-8 3.58-8 8 0 4.42 3.58 8 8 8 4.42 0 8-3.58 8-8 0-4.42-3.58-8-8-8m0 12c-2.21 0-4-1.79-4-4 0-2.21 1.79-4 4-4 2.21 0 4 1.79 4 4 0 2.21-1.79 4-4 4" fill="#ff6e40"/></g></svg>
\ No newline at end of file
diff --git a/public/images/offline.svg b/public/images/offline.svg
new file mode 100644
index 0000000..c64e0bb
--- /dev/null
+++ b/public/images/offline.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><circle stroke="#b0bec5" stroke-width="4" cx="36" cy="36" r="36"/><path d="m27.481 20.828c2.419-1.677 5.354-2.661 8.519-2.661 7.28 0 13.35 5.19 14.71 12.07 5.18.37 9.29 4.65 9.29 9.93 0 3.574-1.878 6.712-4.7 8.48l-27.819-27.819m26.02 31.672l-2.5 2.5-1.414-1.414-3.418-3.418h-22.16c-6.63 0-12-5.37-12-12 0-6.05 4.476-11.04 10.285-11.878l-3.404-3.404-1.414-1.414 2.828-2.828 1.414 1.414 1.086 1.086-.328.328 1.414 1.414 29.615 29.615" fill="#ff6e40"/></g></svg>
\ No newline at end of file
diff --git a/public/images/security.svg b/public/images/security.svg
new file mode 100644
index 0000000..b9aadad
--- /dev/null
+++ b/public/images/security.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><circle stroke="#b0bec5" stroke-width="4" fill="#fff" cx="36" cy="36" r="36"/><path d="m44.563 28v-3.429c0-4.731-4.06-8.571-9.06-8.571-5 0-9.06 3.84-9.06 8.571v3.429h-1.813c-2 0-3.625 1.534-3.625 3.429v17.14c0 1.894 1.622 3.429 3.625 3.429h21.75c2 0 3.625-1.534 3.625-3.429v-17.14c0-1.894-1.622-3.429-3.625-3.429h-1.813m-8.764 16.16c-2.11 0-3.819-1.706-3.819-3.812 0-2.106 1.709-3.812 3.819-3.812 2.11 0 3.819 1.706 3.819 3.812 0 2.106-1.709 3.812-3.819 3.812m5.728-15.247h-11.457v-3.737c0-3.195 2.569-5.792 5.728-5.792 3.16 0 5.728 2.597 5.728 5.792v3.737" fill="#ff6e40"/></g></svg>
\ No newline at end of file
diff --git a/stylesheets/button.less b/stylesheets/button.less
new file mode 100644
index 0000000..3a8b7e4
--- /dev/null
+++ b/stylesheets/button.less
@@ -0,0 +1,33 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "constants";
+
+.button,
+.button-passive,
+.button-primary {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  text-transform: uppercase;
+  padding: 10px;
+  border-radius: 4px;
+  text-decoration: none;
+  outline: 0;
+}
+
+.button-passive {
+  color: @color-primary-700;
+  background-color: transparent;
+  border: 1px solid @color-primary-700;
+  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover, &:active {
+    color: @color-white;
+    background-color: @color-primary-700;
+    border: 1px solid @color-primary-700;
+  }
+}
diff --git a/stylesheets/home.less b/stylesheets/home.less
new file mode 100644
index 0000000..96c6eac
--- /dev/null
+++ b/stylesheets/home.less
@@ -0,0 +1,28 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "constants";
+
+.intro-detail {
+  margin: 28px 0;
+  padding-left: 80px;
+  background-repeat: no-repeat;
+  background-size: 60px;
+}
+
+.intro-detail-offline {
+  background-image: url(/images/offline.svg);
+}
+
+.intro-detail-security {
+  background-image: url(/images/security.svg);
+}
+
+.intro-detail-codebase {
+  background-image: url(/images/codebase.svg);
+}
+
+.intro-detail-discovery {
+  background-image: url(/images/discovery.svg);
+}
\ No newline at end of file
diff --git a/stylesheets/main.less b/stylesheets/main.less
index 76f2e9c..8276e61 100644
--- a/stylesheets/main.less
+++ b/stylesheets/main.less
@@ -2,8 +2,10 @@
 /* Use of this source code is governed by a BSD-style */
 /* license that can be found in the LICENSE file. */
 
+@import "button";
 @import "constants";
 @import "code";
+@import "home";
 @import "icon";
 
 /**
@@ -242,4 +244,4 @@
 
 .note {
   @import "note";
-}
+}
\ No newline at end of file
diff --git a/templates/partials/syncbase_header.mustache b/templates/partials/syncbase_header.mustache
index e02a204..08ae8eb 100644
--- a/templates/partials/syncbase_header.mustache
+++ b/templates/partials/syncbase_header.mustache
@@ -1,13 +1,13 @@
 <header class="mdl-shadow--2dp">
   <div class="row">
     <div class="icon menu"><i class="material-icons">menu</i></div>
-    <div class="icon v-icon"><img src="/images/v-icon-white.svg"></div>
-    <div class="logo"><a href="/">Vanadium</a> – <a href="/syncbase">Syncbase</a> </div>
+    <div class="icon v-icon"><a href="/"><img src="/images/v-icon-white.svg"></a></div>
+    <div class="logo"><a href="/syncbase">Syncbase</a></div>
     <div class="spacer"></div>
     <nav>
       <a href="/syncbase">Overview</a>
       <a href="/syncbase/quickstart.html">Quick Start</a>
-      <a href="/">Vanadium</a>
+      <a href="/syncbase/tutorial/introduction.html">Tutorial</a>
     </nav>
   </div>
 </header>
diff --git a/templates/partials/syncbase_sidebar.mustache b/templates/partials/syncbase_sidebar.mustache
index 83140fa..3de7bd6 100644
--- a/templates/partials/syncbase_sidebar.mustache
+++ b/templates/partials/syncbase_sidebar.mustache
@@ -22,5 +22,8 @@
     {{/ content.syncbase.guides }}
   </nav>
 
+  <a href="/syncbase/my-cloud-syncbase.html">My Cloud Syncbase</a>
+
   <a href="/syncbase/example-apps.html">Example Apps</a>
+  <a href="/syncbase/api-reference.html">API Reference</a>
 </div>