Home fixes (#190)

* improvements and cleanup to homepage

* add meet aptible video

src/components/deploy/CenteredDemoForm.js

@@ -3,17 +3,12 @@ import styles from './CenteredDemoForm.module.css';
 
 import LeadForm from '../lead-form';
 
-export default () => (
+export default ({ title, body, leadFormId }) => (
   <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>
-
+    <h2>{title}</h2>
+    <p className="L">{body}</p>
     <div className={styles.leadFormContainer}>
-      <LeadForm id="Home Page - Request a Demo" />
+      <LeadForm id={leadFormId} />
     </div>
   </div>
 );

src/components/deploy/HowAptibleWorks.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import WistiaVideo from '../shared/WistiaVideo';
 import styles from './HowAptibleWorks.module.css';
 import cn from 'classnames';
 
@@ -34,7 +35,7 @@ const steps = [
     {
       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.'
+      text: 'Aptible automates the design and operation of all of your infrastructure’s security controls. Evidence of your controls\' performance is made available directly in your Aptible Dashboard.'
     }
   ]
 ]
@@ -50,10 +51,16 @@ const Step = ({ id, title, text }) => (
 
 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 className={styles.heading}>
+      <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.videoContainer}>
+        <WistiaVideo videoId="somm4d44rt" />
+      </div>
     </div>
+
     <div className={styles.steps}>
       {steps.map((stepRow, i) => (
         <div key={`step-row-${i}`} className={styles.stepRow}>

src/components/deploy/HowAptibleWorks.module.css

@@ -28,21 +28,48 @@
 }
 
 .intro {
-  width: 33%;
+  width: calc(100%*5/13);
+}
+
+.heading {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   margin-bottom: 48px;
 }
 
+.videoContainer {
+  margin-left: calc(100%*1/13);
+  width: calc(100%*7/13);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 16px 16px rgba(0,0,0,0.5);
+}
+
+
 @media (--mobile) {
   .container {
     width: auto;
     margin: 48px 24px; 
   }
 
-  .intro {
+  .intro,
+  .videoContainer {
     width: 100%;
+    margin: 0;
+  }
+
+  .intro {
     margin-bottom: 16px;
   }
 
+
+  .heading {
+    margin-bottom: 16px;
+    flex-direction: column;
+  }
+
+
   .stepRow {
     flex-direction: column;
   }

src/components/deploy/SecurityControls.js

@@ -72,11 +72,6 @@ export default () => (
           />
         </svg>
       </div>
-
-      <div className={styles.useAptible}>
-        <h2>Or Use Aptible and Deploy in Just 3 Steps.</h2>
-        <LeadForm id="Home Page - Request a Demo" />
-      </div>
     </Grid>
   </div>
 );

src/components/deploy/SecurityControls.module.css

@@ -28,7 +28,7 @@
 .steps {
   grid-row: 2;
   grid-column: 3 / span 5;
-  margin: 130px 0 196px;
+  margin: 130px 0 0;
 }
 
 .aws {
@@ -74,8 +74,8 @@
 
 .stepsArrow svg {
   position: absolute;
-  top: 315px;
-  left: 250px;
+  top: 217px;
+  left: 314px;
   z-index: 0;
 }
 
@@ -85,6 +85,10 @@
   margin-bottom: 196px;
 }
 
+.useAptible h2 {
+  margin-bottom: 24px;
+}
+
 @media (--mobile) {
   .intro {
     grid-column: 1 / span 7;

src/components/deploy/Solutions.js

@@ -100,7 +100,7 @@ export default () => (
     <Solution
       id="solution-automated-devops"
       title="Zero-configuration DevOps"
-      description="Can’t spend hours a day on DevOps? Aptible automatically manages and monitors infrastructure, scaling up easily as your capacity demands increase."
+      description="Aptible solves the hard parts of deploying and scaling high-availability infrastructure"
       primaryImage={<img src={zeroConfigImg} alt="Aptibles Container Dashboard. Horizontal and Vertical scaling of your Docker containers on Aptible." />}
       supportingImage={<img src={devOpsSupportingImage} alt="List of target frameworks that Aptible addresses. HIPAA, HITRUST, SOC 2, ISO 27001" />}
       features={features['devops']} />

src/pages/index.js

@@ -15,7 +15,7 @@ import Solutions from '../components/deploy/Solutions';
 const stickyNavItems = [
   { title: 'How Aptible Works', ref: '#how-aptible-works' },
   { title: 'Solutions', ref: '#solutions' },
-  { title: 'Aptible vs AWS', ref: '#aptible-vs-aws' },
+  { title: 'Aptible vs DIY on AWS', ref: '#aptible-vs-aws' },
   { title: 'Who Uses Deploy', ref: '#who-uses-deploy' },
 ];
 
@@ -32,9 +32,18 @@ export default () => (
     <Proof />
     <Nav items={stickyNavItems} ctaText="Sign up for free" product="deploy" />
     <HowAptibleWorks />
-    <CenteredDemoForm />
+    <CenteredDemoForm
+      title="A Trusted Platform That Grows With You"
+      body="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."
+      leadFormId="Home Page - Request a Demo" />
     <Solutions />
     <SecurityControls />
+    <CenteredDemoForm
+      title="Use Aptible and Deploy in Three Steps"
+      body="Save your engineering team the headache of building compliant infra on AWS. Use Aptible and get back to building your product. Request a demo to see how it works."
+      leadFormId="Home Page - Request a Demo" />
     <WhoUses />
     <ZeroTo />
   </AptibleLayout>