New home page (#183)

* new home page

* 📱

* use lead form on hero

* cleanup

* typo

* more mobile fixes

src/components/deploy/CenteredDemoForm.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './CenteredDemoForm.module.css';
+
+import LeadForm from '../lead-form';
+
+export default () => (
+  <div className={styles.container}>
+    <h2>A Trusted Platform That Grows With You</h2>
+    <p className="L">
+      Complete audits faster with well-documented controls, clear
+      audit trails for third parties, and all of the security and
+      compliance features you need get certified.
+    </p>
+
+    <div className={styles.leadFormContainer}>
+      <LeadForm id="Home Page - Request a Demo" />
+    </div>
+  </div>
+);

src/components/deploy/CenteredDemoForm.module.css

@@ -0,0 +1,24 @@
+.container {
+  margin: 196px auto;
+  padding: 0 210px;
+  max-width: 1120px;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.leadFormContainer {
+  box-sizing: border-box;
+  padding: 0 90px;
+}
+
+@media (--mobile) {
+  .container {
+    width: auto;
+    margin: 48px 24px;
+    padding: 0;
+  }
+
+  .leadFormContainer {
+    padding: 0;
+  }
+}

src/components/deploy/Hero.js

@@ -1,28 +1,70 @@
 import React from 'react';
 import { Grid } from '../grid/Grid';
 import styles from './Hero.module.css';
-import SignupButton from '../signup/SignupButton';
-import Console from './Console';
-import quadpayIllustration from '../../images/deploy/quadpay.png';
+import hipaaBadge from '../../images/home/badges/hipaa-24x24.svg';
+import hitrustBadge from '../../images/home/badges/hitrust-24x24.svg'
+import soc2Badge from '../../images/home/badges/soc-24x24.svg';
+import isoBadge from '../../images/home/badges/iso-24x24.svg';
+import dashboardIlly from '../../images/home/illustrations/deploy-container-metrics-dashboard.svg';
+import deployConsoleIlly from '../../images/home/illustrations/deploy-console.svg';
+import mobileHero from '../../images/home/illustrations/mobile-hero-dashboard.svg';
+import LeadForm from '../../components/lead-form';
+
+const CompliancePills = () => {
+  return (
+    <div className={styles.compliancePills}>
+      <CompliancePill title="✓ HIPAA" svg={hipaaBadge} />
+      <CompliancePill title="✓ HITRUST" svg={hitrustBadge} />
+      <CompliancePill title="✓ SOC 2 Type 2" svg={soc2Badge} />
+      <CompliancePill title="✓ ISO 27001" svg={isoBadge} />
+    </div>
+  )
+}
+
+const CompliancePill = ({ title, svg }) => {
+  return (
+    <div className={styles.compliancePill}>
+      <img src={svg} className={styles.compliancePillBadge} />
+      <h6 className="small">{title}</h6>
+    </div>
+  );
+}
 
 export default () => (
   <div className={styles.container}>
     <Grid rows="2">
       <div className={styles.content}>
-        <h1 className="hero">
-          Deploy a secure, compliant app from day one
+        <h1 className={styles.heroItem}>
+          Deploy a fully secure, HIPAA-compliant app from day one
         </h1>
-        <p className="XL">
-          Aptible is a fully managed application platform with automated
-          security and compliance controls baked in. Get to market faster,
-          easily pass vendor audits, and never worry about maintaining servers.
-        </p>
 
-        <SignupButton text="Sign up for free" product="deploy" />
+        <div className={styles.heroItem}>
+          <CompliancePills />
+        </div>
+
+        <div className={styles.heroItem}>
+          <p className="XL">
+            Don’t waste engineering time building compliance into your cloud infrastructure.
+            Use Aptible to get your product to market faster and be HIPAA-compliant from day one.
+          </p>
+        </div>
+
+        <div className={styles.leadFormWrapper}>
+          <LeadForm id="Home Page Hero - Request a Demo" inputPlaceholder="Enter your email" />
+          <div className={styles.signUpYourself}>
+            <p className="M">Or try it yourself. <a href="https://dashboard.aptible.com/signup">Sign up for a free account today</a></p>
+          </div>
+        </div>
       </div>
 
       <div className={styles.illustration}>
-        <Console />
+        <img src={mobileHero} className={styles.mobileHero}/>
+        <img
+          className={styles.containerMeticsDashboard}
+          alt="Container Metrics Dashboard." src={dashboardIlly} />
+          <img
+          className={styles.containerDeploymentConsole}
+          alt="Image of console deploying a docker app on Aptible." src={deployConsoleIlly} />
       </div>
     </Grid>
   </div>

src/components/deploy/Hero.module.css

@@ -1,33 +1,37 @@
 .container {
-  padding: 30px 0 200px 0;
-  background-image: url('../../images/illustrations/deploy.png');
-  background-size: 900px auto;
-  background-repeat: no-repeat;
-  background-position: 90% 350px;
+  padding: 64px 0 200px 0;
+}
+
+.mobileHero {
+  display: none;
 }
 
 .content {
   grid-row: 1;
-  grid-column: 1 / span 5;
+  grid-column: 1 / span 4;
+}
+
+.signUpYourself {
+  margin-top: 32px;
+}
+
+.heroItem {
+  margin-bottom: 48px
 }
 
 .content h5 {
   margin-bottom: 30px;
 }
 
 .content p {
-  padding: 20px 0;
-  max-width: 600px;
+  padding: 0;
+  margin: 0;
 }
 
 .illustration {
   grid-row: 1 / span 2;
-  grid-column: 6 / span 2;
-  padding-top: 60px;
-}
-
-.illustration img {
-  width: 100%;
+  grid-column: 5 / span 3;
+  position: relative;
 }
 
 .consoleContainer {
@@ -36,15 +40,82 @@
   margin-top: 120px;
 }
 
+.compliancePills {
+  display: flex;
+  flex-direction: row;
+}
+
+.compliancePillBadge {
+  height: 24px;
+  width: 24px;
+  margin-right: 8px;
+}
+
+.compliancePill {
+  display: flex;
+  margin-right: 12px;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--aptible-green-ten);
+  border-radius: 14px;
+  height: 28px;
+  padding: 0px 16px 0px 12px;
+}
+
+.compliancePill > h6 {
+  color: var(--aptible-green);
+}
+
+.containerMeticsDashboard {
+  height: 920px;
+  width:800px;
+  position: absolute;
+  left: -40px;
+  top: -160px;
+}
+
+.containerDeploymentConsole {
+  position: absolute;
+  top:800px;
+  top: 460px;
+  left: -152px;
+}
+
+.leadFormWrapper {
+  width: 480px;
+}
+
 @media (--mobile) {
+  .leadFormWrapper {
+    width: 100%;
+  }
+
   .container {
     background: none;
+    padding: 0;
+    margin: 48px 0;
+  }
+
+  .compliancePills {
+    display: none
+  }
+
+  .mobileHero {
+    display: block;
+  }
+
+  .heroItem {
+    margin-bottom: 24px
+  }
+
+  .containerMeticsDashboard {
+    display: none;
   }
 
   .content {
     grid-row: 1;
     grid-column: 1 / span 7;
-    padding-bottom: 30px;
+    padding-bottom: 0;
   }
 
   .content h5 {
@@ -63,3 +134,6 @@
     display: none;
   }
 }
+
+
+

src/components/deploy/HowAptibleWorks.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import styles from './HowAptibleWorks.module.css';
+import cn from 'classnames';
+
+const steps = [
+  [
+    {
+      id: '01',
+      title: 'Deploy Your app',
+      text: 'Point the platform at an existing Docker image to deploy containers automatically, or let Aptible build Docker images for you.'
+    },
+    {
+      id: '02',
+      title: 'Provision a Database',
+      text: 'Quickly provision a database by picking a type and footprint and letting Aptible do the rest. Get your credentials instantly and resize the container and disk anytime.'
+    },
+    {
+      id: '03',
+      title: 'Configure Your Environment',
+      text: 'Aptible natively supports 12-factor apps—just provide a list of environment variables and Aptible will securely store and make them available.'
+    }
+  ],
+  [
+    {
+      id: '04',
+      title: 'Establish Encrypted Endpoints',
+      text: 'Add an endpoint and Aptible will provision and configure a load balancer that includes SSL termination. You’ll get a hostname back you can use to create a CNAME or send traffic there directly.'
+    },
+    {
+      id: '05',
+      title: 'Access Your Logs',
+      text: 'Access your logs in real-time via the Aptible CLI. For long-term storage or more advanced use cases, configure a Log Drain to deliver your logs via Syslog or HTTPS.'
+    },
+    {
+      id: '06',
+      title: 'Pass Audits',
+      text: 'Aptible automates the implementation of all of your infrastructure’s security controls. Evidence of your controls performance is continuously collected for you.'
+    }
+  ]
+]
+
+
+const Step = ({ id, title, text }) => (
+  <div className={styles.step}>
+    <p className={cn('L-bold', styles.stepId)}>{id}</p>
+    <p className={cn('L-bold', styles.stepTitle)}>{title}</p>
+    <p className={cn('L', styles.stepDescription)}>{text}</p>
+  </div>
+)
+
+export default () => (
+  <div className={styles.container} id="how-aptible-works">
+    <div className={styles.intro}>
+      <h2>How Aptible Works</h2>
+      <p className='XL'>Aptible is a Docker-based Platform-as-a-Service that helps you go from code to cloud without ever worrying about managing servers.</p>
+    </div>
+    <div className={styles.steps}>
+      {steps.map((stepRow, i) => (
+        <div key={`step-row-${i}`} className={styles.stepRow}>
+          {stepRow.map((step, k) => (
+            <Step key={`step-${i}-${k}`} {...step} />
+          ))}
+        </div>
+      ))}
+    </div>
+  </div>
+);

src/components/deploy/HowAptibleWorks.module.css

@@ -0,0 +1,54 @@
+.container {
+  margin-bottom: 196px;
+  max-width: 1120px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.step {
+  padding: 48px 32px 48px 0;
+  border-top: 1px solid var(--aptible-green-dark);
+  box-sizing: border-box;
+  width: 33%;
+}
+
+.stepId {
+  color: var(--aptible-yellow);
+}
+
+.stepTitle {
+  color: white;
+}
+
+.stepRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.intro {
+  width: 33%;
+  margin-bottom: 48px;
+}
+
+@media (--mobile) {
+  .container {
+    width: auto;
+    margin: 48px 24px; 
+  }
+
+  .intro {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
+  .stepRow {
+    flex-direction: column;
+  }
+
+  .step {
+    padding: 16px 16px 16px 0;
+    width: 100%;
+  }
+}