Logos on customers page (#291)

* Add logos to customers page

* Remove vidscrip

* Add changelog to developers menu

* Add epion, ginko, healthie. Re-order logos

src/components/customers/CustomerCards.js

@@ -21,7 +21,6 @@ class CustomerCards extends React.Component {
             <Card customer="healthify" />
             <Card customer="dorsata" />
             <Card customer="glidianInc" />
-            <Card customer="vidscrip" />
             <Card customer="aidin" />
           </div>
 

src/components/customers/GreatCompany.js

@@ -2,6 +2,35 @@ import React from 'react';
 import { Grid } from '../grid/Grid';
 import styles from './GreatCompany.module.css';
 
+import healthCatalystLogo from '../../images/customers/logos/health-catalyst.png';
+import ableHealthLogo from '../../images/customers/logos/able-health.png';
+import healthifyLogo from '../../images/customers/logos/healthify.svg';
+import mdsaveLogo from '../../images/customers/logos/mdsave.svg';
+import pathaiLogo from '../../images/customers/logos/pathai.png';
+import medicalMemoryLogo from '../../images/customers/logos/medical-memory-logo.png';
+import pagerLogo from '../../images/customers/logos/pager-logo.png';
+import rightwayLogo from '../../images/customers/logos/rightway-logo.png';
+import aidinLogo from '../../images/customers/logos/aidin-logo.png';
+import glidianLogo from '../../images/customers/logos/glidian-logo.png';
+import projectBeaconLogo from '../../images/customers/logos/project-beacon-logo.png';
+import himsHersLogo from '../../images/customers/logos/hims-hers-logo.png';
+import careportLogo from '../../images/customers/logos/careport-logo.png';
+import dorsataLogo from '../../images/customers/logos/dorsata.png';
+import greenspaceLogo from '../../images/customers/logos/greenspace.png';
+import stellarLogo from '../../images/customers/logos/stellar-health.png';
+import aliceLogoLogo from '../../images/customers/logos/alice-logo.png';
+import canvasLogo from '../../images/customers/logos/canvas-logo.png';
+import workItLogo from '../../images/customers/logos/workit-logo.png';
+import epionLogo from '../../images/customers/logos/epion-logo.png';
+import ginkoLogo from '../../images/customers/logos/ginko-logo.png';
+import healthieLogo from '../../images/customers/logos/healthie-logo.png';
+
+const CustomerLogo = ({logo}) => (
+  <div className={styles.logoContainer}>
+    <img src={logo} />
+  </div>
+)
+
 export default () => (
   <div className={styles.container}>
     <Grid>
@@ -12,6 +41,33 @@ export default () => (
           data when the stakes matters most.
         </p>
       </div>
+
+      <div className={styles.logos}>
+        <CustomerLogo logo={ginkoLogo} />
+        <CustomerLogo logo={himsHersLogo} />
+        <CustomerLogo logo={careportLogo} />
+        <CustomerLogo logo={rightwayLogo} />
+        <CustomerLogo logo={healthCatalystLogo} />
+        <CustomerLogo logo={ableHealthLogo} />
+        <CustomerLogo logo={aidinLogo} />
+        <CustomerLogo logo={projectBeaconLogo} />
+        <CustomerLogo logo={pathaiLogo} />
+        <CustomerLogo logo={workItLogo} />
+        <CustomerLogo logo={canvasLogo} />
+        <CustomerLogo logo={stellarLogo} />
+        <CustomerLogo logo={healthifyLogo} />
+        <CustomerLogo logo={healthieLogo} />
+        <CustomerLogo logo={dorsataLogo} />
+        <CustomerLogo logo={mdsaveLogo} />
+        <CustomerLogo logo={pagerLogo} />
+        <CustomerLogo logo={glidianLogo} />
+        <CustomerLogo logo={aliceLogoLogo} />
+        <CustomerLogo logo={epionLogo} />
+        <CustomerLogo logo={medicalMemoryLogo} />
+
+        <CustomerLogo logo={greenspaceLogo} />
+
+      </div>
     </Grid>
   </div>
 );

src/components/customers/GreatCompany.module.css

@@ -6,6 +6,26 @@
   grid-column: 2 / span 4;
 }
 
+.logos {
+  grid-column: 1 / span 7;
+  padding: 60px 0;
+}
+
+.logoContainer {
+  display: inline-block;
+  width: 120px;
+  height: 80px;
+  vertical-align: middle;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+.logoContainer img {
+  max-width: 100px;
+  margin: 0 auto;
+  vertical-align: middle;
+}
+
 @media (--mobile) {
   .container {
     padding-top: 100px;

src/components/header/Resources.js

@@ -17,6 +17,12 @@ export const RESOURCES_NAV = [
     url: '/blog/',
     external: false,
   },
+  {
+    title: 'Changelog',
+    url: 'https://deploy-docs.aptible.com/changelog',
+    external: true,
+    newDomain: true,
+  },
   {
     title: 'Library',
     url: '/resources/',

src/components/header/ResourcesLinks.js

@@ -7,6 +7,11 @@ export default () => (
     <div className={styles.column}>
       <a href="https://deploy-docs.aptible.com">Documentation</a>
       <Link to="/blog/">Blog</Link>
+      <a
+        href="https://deploy-docs.aptible.com/changelog"
+        target="_blank"
+        rel="noopener noreferrer"
+      >Changelog</a>
       <Link to="/resources/">Library</Link>
 
       <h6 className="small">Support</h6>