Doc site: landing page design update and swizzle sidebar

.github/workflows/doc-site.yml

@@ -15,7 +15,7 @@ env:
   region: us-west-2
   s3_sync_path_to_exclude: docs/modules/*
   s3_sync_path: ""
-  BUILD_DOMAIN: staging.getzero.dev
+  BUILD_DOMAIN: ${{ secrets.ZERO_DOC_SITE_DOMAIN_NAME }}
 jobs:
   build:
     runs-on: ubuntu-latest

doc-site/docs/about/overview.md

@@ -39,7 +39,7 @@ Security: Properly configured access-control to resources/security groups, using
 
 [Check out some resources for learning more about these technologies.][learning-resources]
 
-### Infrastructure
+### [Infrastructure][docs-infra]
 - Fully configured infrastructure-as-code AWS environment including:
   - VPCs per environment (staging, production) with pre-configured subnets, security groups, etc.
   - EKS Kubernetes cluster per environment, pre-configured with helpful tools like cert-manager, external-dns, nginx-ingress-controller
@@ -51,15 +51,15 @@ Security: Properly configured access-control to resources/security groups, using
 - Tooling to make it easy to set up secure access for your dev team
 - Local/Cloud Hybrid developer environment using Telepresence (Optional)
 
-### Backend
+### [Backend][docs-backend-go] ([Go][docs-backend-go] / [Node.js][docs-backend-nodejs])
 - Golang or Node.js example project automatically set up, Dockerized, and deployed to your new Kubernetes cluster
 - CI pipeline built with [CircleCI][circleci] or GitHub Actions. Just merge a PR and a deploy will start. Your code will be built and tested, deployed to staging, then prompt you to push to production
 - File upload / download support using signed Cloudfront URLs (Optional)
 - Email support using [SendGrid][sendgrid] or AWS SES (Optional)
 - Notification support for sending and receiving messages in your application (web, mobile, SMS, Email, etc.) (Optional) (In Progress)
 - User management integration with Kratos and Oathkeeper - No need to handle login, signup, authentication yourself (Optional)
 
-### Frontend
+### [Frontend][docs-frontend-react]
 - React example project automatically set up, deployed and served securely to your customers
 - CI pipeline built with CircleCI or GitHub Actions. Just merge a PR and a deploy will start. Your code will be built and tested, deployed to staging, then prompt you to push to production
 - File upload / download support using signed Cloudfront URLs (Optional)
@@ -70,6 +70,10 @@ Security: Properly configured access-control to resources/security groups, using
 [real-world-usage]: ./real-world-usage
 [technology-choices]: ./technology-choices
 [learning-resources]: ../reference/learning-resources
+[docs-infra]: /docs/modules/aws-eks-stack/
+[docs-backend-go]: /docs/modules/backend-go/
+[docs-backend-nodejs]: /docs/modules/backend-nodejs/
+[docs-frontend-react]: /docs/modules/frontend-react/
 <!-- links -->
 
 
@@ -92,4 +96,4 @@ Security: Properly configured access-control to resources/security groups, using
 [wireguard]: https://wireguard.com/
 [circleci]: https://circleci.com/
 [sendgrid]: https://sendgrid.com/
-[launchdarkly]: https://launchdarkly.com/
+[launchdarkly]: https://launchdarkly.com/

doc-site/package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@commitdev/zero-doc-site-common-elements": "0.0.1",
-    "@docusaurus/core": "2.0.0-beta.0",
-    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@commitdev/zero-doc-site-common-elements": "0.0.7",
+    "@docusaurus/core": "2.0.0-beta.3",
+    "@docusaurus/preset-classic": "2.0.0-beta.3",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

doc-site/src/components/HomepageFeatures.js

@@ -8,10 +8,11 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-reliable.svg').default,
     description: (
       <>
-        Your infrastructure will be set up in multiple availability zones
-        making it highly available and fault tolerant. All infrastructure is
-        represented with code using HashiCorp Terraform so your
-        environments are reproducible, auditable, and easy to configure.
+        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.
       </>
     ),
   },
@@ -20,10 +21,9 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-scalable.svg').default,
     description: (
       <>
-        Your services will be running in Kubernetes, with the EKS nodes 
-        running in AWS Auto Scaling Group. The application workloads 
-        and cluster size are ready to scale whenever the need arises. 
-        Frontend assets will be served from AWS' Cloudfront CDN.
+        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.
       </>
     ),
   },
@@ -32,11 +32,12 @@ const FeatureList = [
     Svg: require('../../static/img/icons/attr-secure.svg').default,
     description: (
       <>
-        Properly configured access-control to resources/security groups. 
-        Our practices are built on top of multiple security audits and 
-        penetration tests. Automatic certificate management using 
-        Let's Encrypt, database encryption, VPN support, and more means 
-        your traffic will always be encrypted. 
+        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.
       </>
     ),
   },
@@ -56,7 +57,7 @@ const FeatureList = [
 ];
 
 const Feature = ({Svg, title, description}) => (
-  <div className={clsx('col col--6') + " feature"}>
+  <div className={clsx('col col--5') + " feature"}>
     <div className="text--center">
       <Svg className={styles.featureSvg} alt={title} />
     </div>
@@ -68,13 +69,15 @@ const Feature = ({Svg, title, description}) => (
 )
 
 export default function HomepageFeatures() {
-  return (
+  return (<>
     <section className={`${styles.features} featured-sections`}>
-      <div className="row">
+
+      <h2 className={styles.title}>Building something <strong>fast</strong> doesn't mean you can't also build it <strong>right</strong></h2>
+      <div className={`${styles.row} row`}>
         {FeatureList.map((props, idx) => (
           <Feature key={idx} {...props} />
         ))}
       </div>
     </section>
-  )
+  </>)
 }

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

@@ -1,8 +1,18 @@
 .features {
   background: white;
-  display: flex;
   align-items: center;
 
+  .title {
+    color: var(--ifm-landing-page-inverse-font-color);
+    font-weight: 400;
+    text-transform: inherit;
+    max-width: 34rem;
+  }
+
+  .row {
+    justify-content: center;
+  }
+
   &>div{
     row-gap: 3rem;
   }

doc-site/src/components/HomepageOfferings.js

@@ -1,4 +1,4 @@
-import React, {useState } from 'react';
+import React, { useState } from 'react';
 import styles from './HomepageOfferings.module.scss';
 
 const offerings = [
@@ -199,7 +199,7 @@ export default function FeaturedOfferings() {
   })
 
   return <div className={`${styles.offerings_container} featured-sections`}>
-    <h3>{title}</h3>
+    <h2>{title}</h2>
     <Offerings data={offerings} active={state.active} clickHandler={setState} />
   </div>
 }

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

@@ -3,6 +3,9 @@
   padding: 9rem 8rem 5rem;
   margin: 0 auto;
   min-height: 53rem;
+  background-color: #E8EDF4;
+  color: var(--ifm-landing-page-inverse-font-color);
+
 
   .offering_box {
     display: flex;
@@ -18,6 +21,7 @@
   display: flex;
   flex-direction: column;
   column-gap: 1rem;
+  row-gap: 1rem;
 
   .discipline {
     display: flex;
@@ -28,6 +32,9 @@
     text-transform: uppercase;
     flex: 0 0 auto;
     cursor: pointer;
+    border-radius: 12px;
+    background: #D7DEE8;
+    padding-right: 1rem;
 
     .logo {
       flex: 1;
@@ -50,7 +57,6 @@
   }
 
   .discipline_active{
-    border-radius: 12px;
     background: var(--ifm-color-secondary);
     color: var(--ifm-color-dark-active);
 
@@ -96,7 +102,7 @@
         display: flex;
         column-gap: 1rem;
         text-decoration: none;
-        color: var(--ifm-font-color-base-inverse);
+        color: var(--ifm-landing-page-inverse-font-color);
         font-weight: bold;
 
         &:hover{

doc-site/src/components/HomepageWhyZero.js

@@ -1,47 +1,67 @@
-import React from 'react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
 import styles from './HomepageWhyZero.module.scss';
 
 const reasons = [
   {
-    logo: require('../../static/img/icons/reason-technical-founder.svg').default,
-    text: `As a technical founder or the first technical hire at a startup, 
-    your sole focus is to build the logic for your application and get it into customers’ 
-    hands as quickly and reliably as possible. Yet you immediately face multiple hurdles 
-    before even writing the first line of code. You’re forced to make many tech trade-offs, 
-    leading to decision fatigue. You waste countless hours building boilerplate SaaS 
-    features not adding direct value to your customers. You spend precious time picking 
-    up unfamiliar tech, make wrong choices that result in costly refactoring or rebuilding 
-    in the future, and are unaware of tools and best practices that would speed up your 
-    product iteration.`,
+    logo: require('../../static/img/icons/reason-diamond.svg').default,
+    title: 'Quality',
+    text: `The same quality as hiring an experienced DevOps engineer`,
+    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.`
+    ]
   },
   {
-    logo: require('../../static/img/icons/reason-tools.svg').default,
-    text: `Zero was built by a team of engineers with many years of experience in building
-    and scaling startups. We have faced all the problems you will and want to provide a way 
-    for new startups to avoid all those pitfalls. We also want to help you learn about the 
-    tech choices we made so your team can become proficient in some of the great tools we 
-    have included. The system you get starts small but allows you to scale well into the 
-    future when you need to.`,
+    logo: require('../../static/img/icons/reason-clockwise.svg').default,
+    title: 'Speed',
+    text: `Just as fast as Render`,
+    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.`,
+    ]
+  },
+  {
+    logo: require('../../static/img/icons/reason-key.svg').default,
+    title: 'Ownership',
+    text: `You own 100% of the code`,
+    details: [
+      `We don’t lock you into any decisions. It’s your code to change or migrate off at any point without consequence.`,
+      `Cloud application hosting tools are built to lock you in and don’t scale. `,
+    ]
   }
 ];
 
-const Reasons = ({data}) => (
-  <div className={`${styles.reasons}`}>
+const Reasons = ({ data, expanded, setExpanded }) => (
+  <div className={`${styles.reasons} row`}>
     {
       data.map((i, idx) => (
-        <div key={idx} className={styles.reason}>
+        <div key={idx} className={`${styles.reason} ${clsx('col col--3') }`}>
           <i.logo className={styles.reason_logo} alt="logo" />
+          <h4 className={styles.title}>{i.title}</h4>
+
           <p className={`${styles.description} description`}>{i.text}</p>
+          {expanded && <ul className={`${styles.description} description`}>{i.details.map(content=> <li>{content}</li>)}</ul>}
         </div>
       ))
     }
   </div>
 )
 
 export default function FeatureWhyZero () {
+  const [expanded, setExpanded] = useState(false)
 const title = "Why is Zero good for startups ?"
 return <div className={`${styles.reasons_container} featured-sections`}>
-    <h3>{title}</h3>
-    <Reasons data={reasons} />
+    <h2 className={styles.title}>
+      {title}
+      <h5 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>
+    </h2>
+    <Reasons data={reasons} expanded={expanded} setExpanded={setExpanded} />
+    <div className={`${styles.expand} ${expanded && styles.expanded}`}>
+      <a href="javascript:void(0);" onClick={()=>{setExpanded(!expanded)}}>{expanded ? "Less" : "More" } Details</a>
+    </div>
   </div>
 }