Doc site: updating landing page content (#393)

* doc-site: update landing page content

* fixup! doc-site: update landing page content

Author: davidcheung

doc-site/src/components/HomepageFeatures.js

@@ -8,11 +8,10 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-reliable.svg').default,
     description: (
       <>
-        Your infrastructure will be highly available and fault tolerant. 
-        Production workloads will be self-healing, with all traffic load 
-        balanced to multiple instances of your application. All the 
-        infrastructure is represented with code to be reproducible, 
-        auditable, and easy to configure.
+        Fault-tolerant infrastructure. Production workloads will be 
+        highly available, with traffic load balanced to multiple 
+        instances of your application. All the infrastructure is 
+        represented with code to be reproducible and easy to configure.
       </>
     ),
   },
@@ -21,9 +20,9 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-scalable.svg').default,
     description: (
       <>
-        Everything in your system will scale automatically based on the needs 
-        of your application. For frontend assets, using a CDN will ensure global 
-        scale, so you don’t need to worry about it.
+        Your system will scale automatically based on your application’s 
+        needs. For frontend assets, using a CDN will ensure availability 
+        at global scale.
       </>
     ),
   },
@@ -32,25 +31,11 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-secure.svg').default,
     description: (
       <>
-        All your systems will follow security best practices backed up
+        All your systems will follow security best practices backed up 
         by multiple security audits and penetration tests, and will be 
-        properly configured to make sure access is controlled to 
-        private networks, secrets, and data. Built-in application 
-        features help you bullet-proof your application by using 
-        existing, tested tools rather than reinventing the wheel.
-      </>
-    ),
-  },
-  {
-    title: 'Modular',
-    Svg: require('../../static/img/icons/attr-modular.svg').default,
-    description: (
-      <>
-        Everything built by Zero is yours. After Zero generates your 
-        infrastructure, backend, and frontend, all the code is checked 
-        into your source control repositories and becomes the basis for 
-        your new system. You can customize as much as you like. We 
-        provide constant updates and new modules.
+        properly configured to limit access to private networks, 
+        secrets, and data. Bullet-proof your application by default 
+        using existing, tested tools.
       </>
     ),
   },

doc-site/src/components/HomepageFeatures.module.scss

@@ -1,9 +1,8 @@
 .features {
-  background: white;
   align-items: center;
 
   .title {
-    color: var(--ifm-landing-page-inverse-font-color);
+    color: white;
     font-weight: 400;
     text-transform: inherit;
     max-width: 34rem;
@@ -24,8 +23,8 @@
   }
 
   p {
-    color: var(--ifm-landing-page-inverse-font-color);
-    font-size: 0.8rem;
+    color: white;
+    font-size: 0.9rem;
     padding: 0 calc(var(--ifm-spacing-horizontal)*2);
   }
 

doc-site/src/components/HomepageVideo.js

@@ -3,6 +3,6 @@ import styles from './HomepageVideo.module.scss';
 
 export default function FeatureVideo () {
 return <div className={styles.video}>
-    <iframe width="850" height="450" src="https://www.youtube.com/embed/IZ45Wm3wN7s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <iframe width="850" height="450" src="https://www.youtube.com/embed/6rBM8L8dz4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </div>
 }

doc-site/src/components/HomepageWhyZero.js

@@ -6,17 +6,18 @@ const reasons = [
   {
     logo: require('../../static/img/icons/reason-diamond.svg').default,
     title: 'Quality',
-    text: `The same quality as hiring an experienced DevOps engineer`,
+    text: `Like the best DevOps engineer you’ve ever met - except open source and free.`,
     details: [
-      `The devops skill gap is real. Why spend precious time picking up unfamiliar tech, making wrong choices that result in costly refactoring or rebuilding in 
-      the future, and missing tools and best practices that would speed up your product iteration?`,
-      `Think of Zero as the best DevOps engineer you’ve ever met - except it’s open-source, and free.`
+      `The devops skill gap is real. Why spend precious time picking up unfamiliar tech, 
+      making wrong choices that result in costly refactoring or rebuilding in the future, 
+      and missing tools and best practices that would speed up your product iteration?`,
+      `Get real-time support for all your questions from Zero’s community.`
     ]
   },
   {
     logo: require('../../static/img/icons/reason-clockwise.svg').default,
     title: 'Speed',
-    text: `Just as fast as Render`,
+    text: `Just as fast as other tools like Heroku to get up and running.`,
     details: [
       `Building foundational infrastructure the right way doesn’t have to take a long time. Our team has years of experience building and scaling startups and have poured that knowledge into Zero. What used to take us weeks of DevOps work can now take you 30 minutes.`,
       `We provide constant updates and new modules that you can pull in on an ongoing basis.`,
@@ -25,10 +26,12 @@ const reasons = [
   {
     logo: require('../../static/img/icons/reason-key.svg').default,
     title: 'Ownership',
-    text: `You own 100% of the code`,
+    text: `You own 100% of the code. No lock-in!`,
     details: [
-      `We don’t lock you into any decisions. It’s your code to change or migrate off at any point without consequence.`,
+      `Everything built by Zero is yours. It’s your code to change or migrate off at any point.`,
       `Cloud application hosting tools are built to lock you in and don’t scale. `,
+      `Infrastructure is created in your cloud provider account. You can customize as much 
+      as you like with no strings attached. You control how much you spend.`
     ]
   }
 ];
@@ -55,9 +58,9 @@ const title = "Why is Zero good for startups ?"
 return <div className={`${styles.reasons_container} featured-sections`}>
     <h2 className={styles.title}>
       {title}
-      <h5 className={styles.subtitle}>
+      <h4 className={styles.subtitle}>
         As engineer #1, your sole priority is to build the logic for your application and get it into customers’ hands as quickly and reliably as possible.
-      </h5>
+      </h4>
     </h2>
     <Reasons data={reasons} expanded={expanded} setExpanded={setExpanded} />
     <div className={`${styles.expand} ${expanded && styles.expanded}`}>

doc-site/src/components/HomepageWhyZero.module.scss

@@ -1,7 +1,7 @@
 .reasons_container{
-  // background: rgba(232, 237, 244, 1);
   text-align: center;
-  color: white;
+  background: white;
+  color: var(--ifm-landing-page-inverse-font-color);
 
   .title {
     margin-bottom: 5rem;
@@ -12,7 +12,7 @@
     margin: 1rem auto;
     font-family: 'lato';
     font-weight: 400;
-    max-width: 30rem;
+    max-width: 34rem;
     letter-spacing: normal;
   }
   .expand {
@@ -24,7 +24,7 @@
 
       &:active, &:link, &:visited{
         text-decoration: none;
-        color:#7A8AA9;;
+        color: var(--ifm-landing-page-inverse-font-color);
       }
       &:after {
         align-self: center;
@@ -63,11 +63,13 @@
   }
 
   .description{
-    font-size: 0.8rem;
+    min-height: 2.5rem;
+    font-size: 0.9rem;
     align-self: center;
   }
   ul.description {
     margin-top: 2rem;
+    padding-left: 1rem;
   }
   .description li{
     text-align: left;

doc-site/src/pages/index.js

@@ -59,8 +59,8 @@ export default function Home() {
         <HomepageVideo />
         <HomePageCallToAction />
         <HomepageTrustedBy />
-        <HomepageFeatures />
         <HomepageWhyZero />
+        <HomepageFeatures />
         <HomepageOfferings />
         <HomePageCallToAction />
       </main>