feat: add a basic architectural diagram and a call to action

- add an architecture diagram
- add a call-to-action button on the front page
- clean up some lint issues
- adjust the way the "chips" image is displayed
- move the K8s certified logo to the "Features" section

Signed-off-by: Tim Gerla <tim@gerla.net>

docs/website/assets/css/main.css

@@ -87,4 +87,12 @@ p a:hover {
 .section-docs .page-heading {
   @apply mb-1;
 }
+
+.teal-cta-button {
+  @apply bg-logo-teal text-white font-bold py-2 px-4 rounded;
+}
+
+.teal-cta-button:hover {
+  @apply bg-logo-teal-darker;
+}
 /* purgecss end ignore */

docs/website/components/Content.vue

@@ -19,7 +19,7 @@
         Edit this page
       </a>
     </div>
-    <div class="border-t pt-4" v-html="doc.content"></div>
+    <div v-html="doc.content" class="border-t pt-4"></div>
   </article>
 </template>
 

docs/website/components/DocumentationDropdown.vue

@@ -17,8 +17,8 @@
       <li v-for="option in options" :key="option.version" class="">
         <a
           :href="option.url"
-          class="rounded-t py-2 px-4 block whitespace-no-wrap"
           @click="handleClick(option)"
+          class="rounded-t py-2 px-4 block whitespace-no-wrap"
           >{{ version(option) }}</a
         >
       </li>

docs/website/components/Footer.vue

@@ -1,26 +1,36 @@
 <template>
-  <footer>
+  <div>
-    <div class="flex flex-col items-center my-3">
+    <footer>
-      <img class="cncf" src="/images/cncf-color.png" alt="" />
+      <div class="pb-32 lg:pb-64">
-      <p>
+        <div class="flex flex-col items-center my-3">
-        We are a
+          <img class="cncf" src="/images/cncf-color.png" alt="" />
-        <a href="https://cncf.io" target="_blank"
+          <p class="pt-2">
-          >Cloud Native Computing Foundation</a
+            We are a
-        >
+            <a href="https://cncf.io" target="_blank"
-        member.
+              >Cloud Native Computing Foundation</a
-      </p>
+            >
-    </div>
+            member.
-    <div>
+          </p>
-      <a class="inline-block no-underline color-inherit" href="/">
+        </div>
-        © 2019 Talos Systems, Inc.
+        <div class="text-center">
-      </a>
+          <a class="inline-block no-underline color-inherit" href="/">
-    </div>
+            © 2019 Talos Systems, Inc.
-  </footer>
+          </a>
+        </div>
+      </div>
+    </footer>
+  </div>
 </template>
 
 <style>
+body {
+  background-image: url(~assets/images/chips_bg_v1.svg);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+
 footer {
-  @apply bg-white flex flex-col items-center font-sans justify-between py-5;
+  @apply flex flex-col items-center font-sans justify-between py-5;
 }
 
 footer a {

docs/website/components/Sidebar.vue

@@ -4,31 +4,31 @@
       <li
         v-for="entry in $store.state.sidebar.menu"
         :key="entry.title"
-        class="py-2"
         @click="selected = entry.title"
+        class="py-2"
       >
         <a
-          class="sidebar-category"
           :href="'#' + entry.path"
           @click="handleClick(entry)"
+          class="sidebar-category"
         >
           <span class="relative">{{ entry.title }}</span>
         </a>
         <ul class="py-0 pl-4">
           <li v-for="item in entry.items" :key="item.path" class="ml-0">
             <a
-              class="sidebar-item"
               :href="'#' + item.path"
               @click="handleClick(item)"
+              class="sidebar-item"
             >
               <span class="relative">{{ item.title }}</span>
             </a>
             <ul class="py-0 pl-4">
               <li v-for="child in item.children" :key="child.path" class="ml-0">
                 <a
-                  class="sidebar-child"
                   :href="'#' + child.path"
                   @click="handleClick(child)"
+                  class="sidebar-child"
                 >
                   <span class="relative">{{ child.title }}</span>
                 </a>

docs/website/components/Terminal.vue

@@ -8,9 +8,9 @@
         <button
           v-for="cast in casts"
           :key="cast.src"
+          @click="handleClick(cast.src, cast.cols, cast.rows)"
           class="bg-primary-color-500 text-white font-semibold m-1 p-1 rounded"
           style="width: 100px"
-          @click="handleClick(cast.src, cast.cols, cast.rows)"
         >
           <span class="mr-1">{{ cast.title }}</span>
         </button>

docs/website/pages/index.vue

@@ -1,32 +1,46 @@
 <template>
   <div id="landing-page" class="c-rich-text">
-    <div class="w-auto lg:w-1/2 h-auto mx-auto md:mt-10 mb-16 px-4">
+    <div class="w-auto lg:w-3/4 h-auto mx-auto md:mt-10 mb-16 px-4 bg-white">
-      <div class="text-center py-8 m-0">
-        <h1>What is Talos?</h1>
-      </div>
       <div class="flex flex-wrap justify-center items-center">
-        <div class="px-4 md:px-2 md:w-3/4 text-xl text-gray-700">
+        <div class="text-xl text-gray-700 lg:w-1/2">
+          <div class="text-center py-8 m-0">
+            <h1>What is Talos?</h1>
+          </div>
+
           <p>
             Talos is a modern OS designed to be secure, immutable, and minimal.
             Its purpose is to host Kubernetes clusters, so it is tightly
             integrated with Kubernetes.
           </p>
+
           <p>
             Talos is based on the Linux kernel, and supports most cloud
             platforms, bare metal, and most virtualization platforms. All system
             management is done via an API, and there is no shell or interactive
             console.
           </p>
+
+          <div class="py-4 flex">
+            <p class="flex-1 text-sm text-gray-600 mr-2">
+              It takes about 3 minutes to launch a small Talos cluster on your
+              laptop inside Docker.
+            </p>
+            <div class="flex-1 text-center pb-4 m-0">
+              <a
+                href="https://www.talos.dev/docs/v0.3/#v0.3/en/guides/getting-started"
+              >
+                <button class="teal-cta-button">
+                  Try it now
+                </button></a
+              >
+            </div>
+          </div>
         </div>
-        <div class="w-1/3 md:w-1/6 md:ml-8 pt-4 md:pt-0">
+        <div class="w-full lg:w-1/2 p-16 pr-0">
-          <a
+          <img
-            href="https://landscape.cncf.io/category=certified-kubernetes-installer&format=card-mode&grouping=category"
+            src="~/assets/images/talos-arch.svg"
-            target="_blank"
+            alt="A description of the basic Talos architecture."
-          >
+          />
-            <img
-              src="/images/certified-kubernetes-color.png"
-              alt="Certified Kubernetes Logo"
-          /></a>
         </div>
       </div>
     </div>
@@ -72,7 +86,7 @@
       </div>
     </div>
 
-    <div class="w-1/2 h-auto mx-auto mb-20">
+    <div class="w-1/2 h-auto mx-auto">
       <div class="text-center pt-6">
         <h1>Built with Modern Technology</h1>
       </div>
@@ -100,7 +114,7 @@
       </div>
     </div>
 
-    <div class="w-3/4 h-auto mx-auto pb-12 mb-20">
+    <div class="w-3/4 h-auto mx-auto pb-8">
       <div class="text-center">
         <h1>Features</h1>
       </div>
@@ -153,38 +167,45 @@
         </div>
         <div>
           <h2 class="text-center">Immutable</h2>
-          <div>
+          <p>
             Talos improves its security posture further by mounting the root
             filesystem as read-only and removing any host-level access by
             traditional means such as a shell and SSH.
-          </div>
+          </p>
         </div>
       </div>
+
       <div
-        class="md:grid grid-columns-2 grid-gap-12 justify-center md:w-2/3 md:mx-auto"
+        class="md:grid grid-columns-2 grid-gap-12 justify-center w-2/3 mx-auto"
       >
         <div>
           <h2 class="text-center">Ephemeral</h2>
-          <div>
+          <p>
             Talos runs in memory from a SquashFS, and persists nothing, leaving
             the primary disk entirely to Kubernetes.
-          </div>
+          </p>
         </div>
         <div>
           <h2 class="text-center">Current</h2>
-          <div>
+          <p>
             We are committed to staying current with the latest stable versions
             of Kubernetes, and Linux.
-          </div>
+          </p>
-        </div>
-        <div>
-          <img
-            class="hidden"
-            src="https://placeholder.pics/svg/300/DEDEDE/555555/some%20nifty%20image%20here"
-          />
         </div>
       </div>
     </div>
+
+    <div class="pb-8">
+      <a
+        href="https://landscape.cncf.io/category=certified-kubernetes-installer&format=card-mode&grouping=category"
+        target="_blank"
+      >
+        <img
+          class="h-48 mx-auto"
+          src="/images/certified-kubernetes-color.png"
+          alt="Certified Kubernetes Logo"
+      /></a>
+    </div>
   </div>
 </template>
 
@@ -200,16 +221,6 @@ export default {
 </script>
 
 <style>
-#landing-page {
-  height: 100%;
-  background: url(~assets/images/chips_bg_v1.svg) no-repeat center center fixed;
-  -webkit-background-size: contain;
-  -moz-background-size: contain;
-  -o-background-size: contain;
-  background-size: contain;
-  background-position: center bottom;
-}
-
 .logo {
   display: block;
   width: 189px;

docs/website/tailwind.config.js

@@ -22,6 +22,10 @@ module.exports = {
           800: '#174F59',
           900: '#0F353B'
         },
+        'logo-teal': {
+          default: '#32AFC5',
+          darker: '#2c95a8'
+        },
         'logo-colors': {
           1: '#32AFC5',
           2: '#6D9CBC',