Feature/company logos

src/.vuepress/components/logo.vue

@@ -0,0 +1,64 @@
+<script>
+export default {
+  name: 'logo',
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+      default: 'Cadence Slack Workspace',
+    },
+    img: {
+      type: String,
+    },
+    width: {
+      type: String,
+    }
+  },
+};
+</script>
+
+<template>
+<a
+  class="logo"
+  :href="href"
+  target="_blank"
+  rel="noopener noreferrer"
+  :title="label"
+  v-if="img"
+>
+  <img :src="img" :width="width" />
+</a>
+<a
+  class="logo-text"
+  :href="href"
+  target="_blank"
+  rel="noopener noreferrer"
+  v-else
+>{{label}}</a>
+</template>
+
+<style lang="stylus">
+.logo {
+  display: flex;
+  margin: auto 15px;
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+.logo-text {
+  display: flex;
+  font-weight: 1000;
+  font-size: 30px;
+  line-height: 100px;
+  margin: 0 15px;
+
+  &:hover {
+    opacity: 0.6;
+    text-decoration: underline;
+  }
+}
+</style>

src/.vuepress/config.js

@@ -21,7 +21,7 @@ module.exports = {
     'vuepress-plugin-glossary',
   ],
   head: [
-    ['link', { rel: 'icon', href: `/img/favicon.ico` }],
+    ['link', { rel: 'icon', href: `/img/icon/favicon.ico` }],
   ],
   themeConfig: {
     ...themeConfig,

src/docs/03-concepts/05-topology.md

@@ -15,7 +15,7 @@ Note that both types of :worker:workers: as well as external clients are roles a
 
 ## Cadence Service
 
-![Cadence Service](/img/overview.png)
+![Cadence Service](/img/content/overview.png)
 
 At the core of Cadence is a highly scalable multitentant service. The service exposes all of its functionality through a strongly typed [gRPC API](https://github.com/uber/cadence-idl/tree/master/proto/uber/cadence/api/v1). A Cadence cluster include multiple services, each of which may run on multiple nodes for scalability and reliablity:
 - Front End (FE): which is a stateless service used to handle incoming requests from Workers. It is expected that an external load balancing mechanism is used to distribute load between Front End instances.
@@ -30,7 +30,7 @@ Cadence service is responsible for keeping :workflow: state and associated durab
 
 Cadence service is multitentant. Therefore it is expected that multiple pools of :worker:workers: implementing different use cases connect to the same service instance. For example, at Uber a single service is used by more than a hundred applications. At the same time some external customers deploy an instance of Cadence service per application. For local development, a local Cadence service instance configured through docker-compose is used.
 
-![Cadence Overview](/img/cadence-overview.svg)
+![Cadence Overview](/img/content/cadence-overview.svg)
 
 ## Workflow Worker
 

src/index.md

@@ -7,47 +7,85 @@ actionLink: /docs/get-started/
 footer: © 2021 Uber Technologies, Inc.
 ---
 
-<div class="section">
-  <div class="content">
-    <h1>Easy to use</h1>
-    <div class="grid">
-      <div class="grid-col-4 text-align-center">
-        <img src="img/arrow_divert_filled.svg" width="200px" />
-      </div>
-      <div class="grid-col-8">
+<div class="section alt">
+  <div class="content content-wide">
+    <div class="grid grid-flex-start">
+      <div class="grid-col-4">
+        <img class="image-align-center" src="img/icon/arrow_divert_filled.svg" width="94px" />
+        <h2>Easy to use</h2>
         <p>Workflows provide primitives to allow application developers to express complex business logic as code.</p>
         <p>The underlying platform abstracts scalability, reliability and availability concerns from individual developers/teams.</p>
       </div>
-    </div>
-  </div>
-</div>
-
-<div class="section alt">
-  <div class="content">
-    <h1>Fault tolerant</h1>
-    <div class="grid">
-      <div class="grid-col-8">
+      <div class="grid-col-4">
+        <img class="image-align-center" src="img/icon/gears_outlined.svg" width="94px" />
+        <h2>Fault tolerant</h2>
         <p>Cadence enables writing stateful applications without worrying about the complexity of handling process failures.</p>
         <p>Cadence preserves complete multithreaded application state including thread stacks with local variables across hardware and software failures.</p>
       </div>
-      <div class="grid-col-4 text-align-center">
-        <img src="img/gears_outlined.svg" width="200px" />
+      <div class="grid-col-4">
+        <img class="image-align-center" src="img/icon/chart_bar_ascending_filled.svg" width="94px" />
+        <h2>Scalable & Reliable</h2>
+        <p>Cadence is designed to scale out horizontally to handle millions of concurrent workflows.</p>
+        <p>Cadence provides out-of-the-box asynchronous history event replication that can help you recover from zone failures.</p>
       </div>
     </div>
   </div>
 </div>
 
 <div class="section">
   <div class="content">
-    <h1>Scalable & Reliable</h1>
-    <div class="grid">
-      <div class="grid-col-4 text-align-center">
-        <img src="img/chart_bar_ascending_filled.svg" width="200px" />
-      </div>
-      <div class="grid-col-8">
-        <p>Cadence is designed to scale out horizontally to handle millions of concurrent workflows.</p>
-        <p>Cadence provides out-of-the-box asynchronous history event replication that can help you recover from zone failures.</p>
-      </div>
+    <h2>Cadence powering these companies</h2>
+    <div class="grid grid-always grid-justify-evenly grid-wrap">
+      <logo
+        href="https://www.grupomasmovil.com/en"
+        img="img/company-logo/masmovil.jpeg"
+        label="Masmovil"
+        width="160px"
+      />
+      <logo
+        href="https://www.aftership.com"
+        img="img/company-logo/aftership.svg"
+        label="Aftership"
+        width="163px"
+      />
+      <logo
+        href="https://www.cruxinformatics.com"
+        img="img/company-logo/crux.png"
+        label="Crux Informatics"
+        width="120px"
+      />
+      <logo
+        href="https://www.linkedin.com"
+        label="Linkedin"
+      />
+      <logo
+        href="https://www.doordash.com"
+        label="Doordash"
+      />
+      <logo
+        href="https://www.didiglobal.com"
+        label="Didi"
+      />
+      <logo
+        href="https://banzaicloud.com"
+        label="Banzai Cloud"
+      />
+      <logo
+        href="https://www.grab.com"
+        label="Grab"
+      />
+      <logo
+        href="https://www.momenta.cn"
+        label="Momenta"
+      />
+      <logo
+        href="https://mirato.com"
+        label="Mirato"
+      />
+      <logo
+        href="https://www.axon.com"
+        label="Axon"
+      />
     </div>
   </div>
 </div>

src/shared/config.js

@@ -2,7 +2,7 @@ const { slackUrl } = require('./constants');
 
 module.exports = {
   themeConfig: {
-    logo: '/img/logo-white.svg',
+    logo: '/img/icon/logo-white.svg',
     nav: [
       {
         text: 'Docs',

src/shared/styles/global.styl

@@ -13,3 +13,8 @@ a {
 .text-align-center {
   text-align: center;
 }
+
+.image-align-center {
+  margin: 0 auto;
+  display: block;
+}

src/shared/styles/grid.styl

@@ -3,6 +3,22 @@
   display: flex;
 }
 
+.grid-flex-start {
+  align-items: flex-start;
+}
+
+.grid-flex-direction-reverse {
+  flex-direction: row-reverse;
+}
+
+.grid-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.grid-wrap {
+  flex-wrap: wrap;
+}
+
 .grid-col-4 {
   flex: 4;
   padding: 0 20px;
@@ -22,4 +38,8 @@
   .grid {
     display: block;
   }
+
+  .grid-always {
+    display: flex !important;
+  }
 }

src/shared/styles/home.styl

@@ -61,8 +61,15 @@
       margin: 0 auto;
     }
 
-    h1 {
+    .content-wide {
+      max-width: 1000px !important;
+    }
+
+    h1, h2 {
+      border-bottom: none;
+      font-size: 2.2rem;
       font-weight: 1000;
+      line-height: 1.25;
       text-align: center;
     }