New home design (#4715)

* added headline section to home, still some details to polish

* added need to know more section, removed old sections and started why serverless section

* finishing sections content and build up + still some css polishing to do

* header changes according to the design

* header changes according to the design

* fixing lint

* fixed some responsiveness and css issues and finished case studies and kantive components sections

* added remaining assets and formated home css

* extra css changes to maintain consistency throughout the site

* almost done with the why serverless section + some more style changes to improve responsiveness

* improved font sizes and responsivenes in titles + just the whats next section to go and some adjustments in the on hover changing images

* ready for the first pass, waiting on the missing icon to finish

* added resources and last detaisl

* removed unused svgs and that were causing reviewdog errors

* improved scale transform animation on home images

* fixing pr comments

* corrected the dkblue autoscaling image with the right png

blog/mkdocs.yml

@@ -13,7 +13,7 @@ edit_uri: edit/main/blog/docs
 theme:
   name: material
   docs_dir: blog/
-  logo: images/logo/rgb/knative-logo-rgb.png
+  logo: images/logo/rgb/knative-logo.png
   favicon: images/favicon.ico
   custom_dir: overrides
   features:

docs/stylesheets/extra.css

@@ -1,5 +1,5 @@
 :root {
-  --md-primary-fg-color: #1a7dc9;
+  --md-primary-fg-color: #f3f1f2;
   --home-color: #0071c7;
   --nav-item-color: #4d4d4d;
 }
@@ -12,10 +12,13 @@
   display: none;
 }
 
-.md-header__button.md-logo img {
+a.md-header__button.md-logo :-webkit-any(img, svg),
+a.md-header__button.md-logo :is(img, svg),
+a.md-header__button.md-logo img {
   width: 3rem;
   height: 2.4rem;
 }
+
 .md-header__button.md-logo {
   transition-duration: 0.2s;
   transition-property: transform;
@@ -27,23 +30,94 @@
   -webkit-transform: rotate(5deg);
 }
 
+.md-header__topic {
+  margin: 5px -14px;
+}
+
 .md-nav__item--nested>.md-nav__link, .md-nav__item a {
   color: var(--nav-item-color);
 }
 
+.md-nav__item .md-nav__link--active {
+  font-weight: bold;
+  color: var(--nav-item-color);
+}
+
 .md-nav__item--nested>.md-nav__link:hover {
   color: var(--md-accent-fg-color);
 }
 
+/* header css */
+.md-header {
+  color: black
+}
+
+.md-header[data-md-state=shadow], .md-tabs {
+  background-color: #f3f1f2;
+}
+
 .md-tabs {
-  border-bottom: 1px solid var(--home-color);
+  color: black;
+  font-weight: bold;
+}
+
+.md-header__source {
+  color: #034b95;
+}
+
+.md-search__input {
+  background-color: white;
+  border: black 1px solid;
+}
+
+.md-search__input::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #4d4d4d;
+  opacity: 1;
+  /* Firefox */
+}
+
+.md-search__input:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: #4d4d4d;
+}
+
+.md-search__input::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: #4d4d4d;
+}
+
+.md-search__input.focus-visible {
+  border: none;
+}
+
+.md-search__icon[for=__search] {
+  color: var(--md-default-fg-color--light);
+}
+
+.md-source__icon+.md-source__repository {
+  font-weight: bold;
 }
 
 .md-tabs__list li:nth-last-child(1),
 .md-tabs__list li:nth-last-child(2),
-.md-tabs__list li:nth-last-child(3){
-  background: var(--home-color);
+.md-tabs__list li:nth-last-child(3) {
   float: right;
+  background-color: #024c93;
+  color: white;
+  padding: 0 2em;
+}
+
+.md-tabs__list li:nth-last-child(1) a,
+.md-tabs__list li:nth-last-child(2) a,
+.md-tabs__list li:nth-last-child(3) a {
+  opacity: 1;
+}
+
+.md-tabs__list li:nth-last-child(1) a:hover,
+.md-tabs__list li:nth-last-child(2) a:hover,
+.md-tabs__list li:nth-last-child(3) a:hover {
+  color: var(--md-accent-fg-color);
 }
 
 .md-nav__title .md-nav__button.md-logo img,
@@ -51,12 +125,25 @@
   width: auto;
 }
 
+.md-typeset a {
+  color: #024c93;
+  word-break: break-word;
+  font-weight: 600;
+}
+
+.md-typeset .admonition, .md-typeset details {
+  font-size: .7rem;
+}
+
 /**Modify H1**/
 .md-typeset h1 {
   margin: 1em 0 0.75em;
+  font-weight: bold;
+  font-size: 2rem;
+  color: var(--nav-item-color);
 }
 
-.md-typeset > h1:first-of-type {
+.md-typeset>h1:first-of-type {
   margin: 0 0 0.75em;
 }
 
@@ -69,15 +156,19 @@
   margin: 0 auto;
   padding: 0;
 }
+
 .md-banner {
   background: #fff5b5;
 }
+
 .md-banner .versionwarning h1 {
   font-weight: bold;
 }
+
 .md-banner .versionwarning p {
   color: black;
 }
+
 .md-banner a {
   color: blue;
   text-decoration: underline;
@@ -218,18 +309,18 @@
   pointer-events: auto;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid rgba(0,0,0,.2);
+  border: 1px solid rgba(0, 0, 0, .2);
   outline: 0;
 }
 
 /* Tame the footer and make the prev/next stand out */
 .md-footer {
-    color: var(--md-typeset-a-color);
-    background-color: var(--md-default-bg-color);
+  color: var(--md-typeset-a-color);
+  background-color: #024c93;
 }
 
 .md-footer-meta {
-    background-color: var(--md-footer-bg-color);
+  background-color: var(--md-footer-bg-color);
 }
 
 .footer-links {
@@ -237,6 +328,7 @@
   flex-grow: 1;
   align-items: center;
 }
+
 .footer-links a {
   margin: 0.4em;
 }
@@ -249,12 +341,15 @@
   display: inline-block;
   font-weight: bold;
 }
+
 .feature-alpha {
   background: rgb(255, 218, 218);
 }
+
 .feature-beta {
   background: rgb(251, 244, 182);
 }
+
 .feature-stable {
   background: rgb(228, 255, 218);
 }

mkdocs.yml

@@ -11,7 +11,7 @@ edit_uri: edit/main/docs
 
 theme:
   name: material
-  logo: images/logo/rgb/knative-logo-rgb.png
+  logo: images/logo/rgb/knative-logo.png
   favicon: images/favicon.ico
   custom_dir: overrides
   features:

overrides/assets/stylesheets/home.css

@@ -4,7 +4,7 @@
 }
 
 .md-main__inner .md-content__inner,
-.md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
+.md-sidebar--primary:not([hidden])~.md-content>.md-content__inner {
   margin: 0;
   padding: 0;
 }
@@ -18,6 +18,7 @@
     display: none;
   }
 }
+
 @media screen and (min-width: 76.25em) {
   .md-sidebar--primary {
     display: none;
@@ -29,33 +30,35 @@
 }
 
 @keyframes continuousgradient {
-  0% {background-position: 0% 50%;}
-  50% {background-position: 100% 50%;}
-  100% {background-position: 0% 50%;}
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
-.animated-gradient {
-  animation-name: continuousgradient;
-  background: linear-gradient(-45deg, #1d6ba6, #000);
-  animation-duration: 12s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-in-out;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  background-repeat: no-repeat;
-  background-size: 300% 100%;
-  opacity: 0.4;
-  z-index: -1;
-  padding: 20px;
+/* containers specific css */
+.headline-section {
+  text-align: center;
 }
 
-.animated-gradient img {
-  display: block !important;
+.why-serverless-container, .need-to-know-more-container,
+.knative-components-container, .trying-it-all-container,
+.whats-next-container, .whats-next-container,
+.case-studies-container {
+  text-align: center;
+  padding: 4em 3em;
+}
+
+.home-page .md-typeset {
+  font-size: 1rem;
+  line-height: 1.2;
 }
 
 .md-typeset img,
@@ -63,225 +66,396 @@
   max-width: initial;
 }
 
-/* Fixes logo aspect ratio in Safari */
-section.home-container img {
-  object-fit: contain;
-  object-position: right;
-}
-
+/* home headline section css */
 section.home-container {
   min-height: 435px;
   justify-content: center;
-  color: #fff;
+  background-color: white;
   position: relative;
   display: flex;
   align-items: center;
-  padding-bottom: 0;
+  padding-bottom: 2em;
   padding-top: 0;
 }
 
-.home-container > .md-typeset {
+.home-container>.md-typeset {
   flex-grow: 2;
 }
 
 body {
-  color: #fff;
+  color: white;
   background: var(--md-primary-fg-color);
   background: #5063d0;
   background: #0071c7;
   background: var(--home-color);
 }
 
-.whats-next-container,
-.usedby-container,
-.home-container,
-.features-container,
-.intro-container,
-.case-studies-container,
-.components-container {
-  margin: 0;
-  border: 0;
-  padding-top: 2em;
-  padding-bottom: 5em;
+.home-container .md-button,
+.home-container .md-button--primary {
+  color: white;
+  width: 28%;
+  font-size: large;
+  padding: 0.525em 1em;
+  min-width: fit-content;
 }
 
-.home-container .md-button {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-  color: var(--md-primary-bg-color);
+.home-container .md-button,
+.need-to-know-more-container .md-button {
+  background-color: #52b3dd;
+  border-color: #52b3dd;
 }
 
 .home-container .md-button--primary {
-  background-color: var(--md-primary-bg-color);
-  color: hsla(280deg, 37%, 48%, 1);
-  border-color: var(--md-primary-bg-color);
+  margin-top: 0.5rem;
+  background-color: #024c93;
+  border-color: #024c93;
+}
+
+h2.secondary-headline, h3.trusted-by {
+  color: black;
+  font-weight: 700;
 }
 
 .home-container h1 {
-  color: #fff;
-  font-weight: bolder;
+  color: #024c93;
   margin-top: 1em;
   margin-bottom: 0;
 }
 
+.trusted-by-container #usedby {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.trusted-by-container .logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 120pt;
+  height: 36pt;
+}
+
+.trusted-by-container .logo img {
+  max-width: 86pt;
+  max-height: 24pt;
+}
+
+.trusted-by-container .logo.triggermesh {
+  width: 162pt;
+}
+
+.trusted-by-container .logo.triggermesh img {
+  width: 121pt;
+  height: auto;
+}
+
 .home-container h2 {
+  margin-top: 10px;
+  color: black;
+  font-weight: bold;
+}
+
+/* need to know more section css */
+.need-to-know-more-container, .knative-components-container,
+.whats-next-container {
+  background-color: #024c93;
+}
+
+.need-to-know-more-container h1, .whats-next-container h1 {
+  color: white;
+}
+
+.need-to-know-more-container .md-button {
+  font-size: x-large;
+  margin-top: 1em;
+  padding: 4px 3em;
+  color: white;
+}
+
+/* why serverless container css */
+.why-serverless-container, .trying-it-all-container {
+  background-color: #f3f1f2;
+  color: var(--md-default-fg-color--light);
+}
+
+.why-serverless-container h1, .trying-it-all-container h1,
+.case-studies-container h1 {
+  color: #024c93;
+}
+
+.why-serverless-container .normal-text,
+.trying-it-all-container .normal-text {
+  font-weight: 600;
+  margin: 0 auto 2rem;
+  max-width: 75%;
+}
+
+.why-serverless-container .md-typeset h1,
+.trying-it-all-container .md-typeset h1 {
+  margin-bottom: 1rem;
+}
+
+.why-serverless-container .md-typeset h2,
+.trying-it-all-container .md-typeset h2 {
+  font-weight: bold;
+  color: black;
   margin: 0;
 }
 
-.whats-next-container {
-  color: #fff;
-  background: #1b2f52;
+.why-serverless-container .normal-text {
+  font-size: .8rem;
 }
 
+.img-table {
+  margin: 1rem auto -1rem;
+}
+
+.img-row {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.img-col {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.why-serverless-container .md-typeset img {
+  max-width: 120px;
+  transform: scale(1);
+  transition: transform 0.25s ease-in-out 0s;
+}
+
+.why-serverless-container .md-typeset img:hover {
+  transform: scale(1.15);
+}
+
+/* knative components container css */
+.knative-components-container h1 {
+  color: #7dc47e;
+}
+
+.knative-components-container .text-table .normal-text {
+  width: 30%;
+  text-align: start;
+  margin-left: 1%;
+  font-size: .8rem;
+  margin-top: -1rem;
+}
+
+.knative-components-container .text-table .normal-text:last-child {
+  padding-left: 2em;
+  margin-left: 32%;
+}
+
+.knative-components-container .components-content .components-img {
+  max-width: 80%;
+  padding: 2em;
+}
+
+.text-table {
+  display: flex;
+  max-width: 80%;
+  margin: auto;
+  padding: 0 2.5em;
+}
+
+/* trying it all container css */
+.trying-it-all-container .reason-img {
+  margin: auto;
+  height: 130px;
+}
+
+.trying-it-all-container .md-typeset h2 {
+  color: #024c93;
+  line-height: 1;
+  margin-bottom: 1rem;
+}
+
+.trying-it-all-container .img-col {
+  place-self: flex-start;
+}
+
+.trying-it-all-container .img-col:first-child img {
+  height: 106px;
+  margin-top: 10px;
+}
+
+.trying-it-all-container .img-col img {
+  height: 130px;
+}
+
+.trying-it-all-container .img-col:last-child img {
+  height: 94px;
+  margin-top: 20px;
+}
+
+.trying-it-all-container .md-button.call-to-action {
+  font-size: x-large;
+  padding: 0.5rem 2em;
+  background-color: #024c93;
+  color: white;
+  margin-top: 1em;
+}
+
+.trying-it-all-container .md-button.call-to-action:hover {
+  background-color: var(--md-accent-fg-color);
+}
+
+/* case studies container css */
+.case-studies-container {
+  text-align: center;
+  justify-content: center;
+  color: black;
+  display: flex;
+  background-color: white;
+}
+
+.case-studies-container h1 {
+  margin-bottom: 0.45em;
+}
+
+.case-studies-container .cases-table {
+  display: flex;
+  justify-content: center;
+  max-width: 90%;
+  margin: auto;
+}
+
+.case-studies-container .logo {
+  display: flex;
+  height: 26px;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0 2em;
+}
+
+.case-studies-container .col {
+  min-width: 38%;
+  max-width: 40%;
+}
+
+.case-studies-container .logo img {
+  max-width: 110px
+}
+
+.case-studies-container .logo .deepc {
+  width: 108px;
+}
+
+.case-studies-container .logo .outfit7 {
+  max-height: 18px;
+  max-width: 98px;
+}
+
+.case-studies-container .logo .puppet {
+  width: 94px;
+}
+
+.case-studies-container .normal-text {
+  text-align: start;
+  padding: 0 2em;
+  color: #497bb2;
+  font-weight: 600;
+  font-style: italic;
+  line-height: 1.1;
+  font-family: serif;
+  font-size: .95rem;
+}
+
+.case-studies-container hr {
+  border-bottom: 2px solid #89c487;
+  display: flow-root;
+  margin: .4em 5em -4px 2em;
+}
+
+/* whats next container css */
 .whats-next-container .component-flex {
   display: flex;
   gap: 2em;
   padding-top: 1em;
 }
 
-.whats-next-container .pane h4 {
-  font-size: 1.3em;
+.whats-next-container h1 {
+  margin: 0;
+}
+
+.whats-next-container h2 {
+  color: white;
+  font-size: 1.3rem;
+  margin: .6em 0 0;
+  font-weight: bold;
+}
+
+.whats-next-container .normal-text {
+  font-weight: 500;
+  font-size: .8em;
+  padding-top: 0;
+  color: white;
 }
 
 .whats-next-container .twemoji {
-  color: #fff;
+  color: white;
   justify-content: center;
 }
 
-.whats-next-container .twemoji, .whats-next-container .twemoji svg {
+.whats-next-container .twemoji,
+.whats-next-container .twemoji svg {
   height: 3.5em;
   width: 3.5em;
 }
 
-.whats-next-container .pane {
-  text-align: center;
+.whats-next-container .twemoji svg:hover {
+  color: #7cc57c;
 }
 
-.whats-next-container .md-button {
-  display: inline-block;
-  margin: 0.5em auto;
-}
-
-.intro-container img {
-  height: 10em;
-  float: right;
-  margin: 0 0 0 2em;
-}
-
-.case-studies-container {
-  background: #fff;
-  color: #000;
-  display: flex;
-  justify-content: center;
-}
-.case-studies-container #case-studies-title {
-  display: flex;
-  justify-content: center;
-}
-
-.case-studies-container #case-studies {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.case-studies-container #case-studies-more {
-  font-style: italic;
-  font-size: smaller;
-  color: #aaa;
-  text-align: center;
-}
-
-.case-studies-container .logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 3em 1em;
-  width: 150pt;
-  height: 36pt;
-}
-
-.case-studies-container .logo img {
-  max-width: 150pt;
-  max-height: 36pt;
-}
-
-.usedby-container {
-  background: #d6e1f3;
-  color: #000;
-  display: flex;
-  justify-content: center;
-}
-
-.usedby-container #usedby-title {
-  display: flex;
-  justify-content: center;
-}
-
-.usedby-container #usedby {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.usedby-container #usedby-more {
-  font-style: italic;
-  font-size: smaller;
-  color: #aaa;
-  text-align: center;
-}
-
-.usedby-container .logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 3em 1em;
-  width: 150pt;
-  height: 36pt;
-}
-
-.usedby-container .logo img {
-  max-width: 150pt;
-  max-height: 36pt;
-}
-
-.features-container {
-  color: #000;
-  background: #fff;
-}
-
-@media only screen and (max-width: 1440px) {
-  .components-container,
-  .whats-next-container,
-  .usedby-container,
-  .home-container,
-  .features-container,
-  .intro-container {
-    padding: 40px;
+@media only screen and (max-width: 1219px) {
+  .md-header__topic {
+    margin: 0;
   }
 }
 
 @media only screen and (max-width: 800px) {
-  .component-flex {
+  .component-flex, .case-studies-container .cases-table {
     flex-wrap: wrap;
   }
 
-  .intro-container img {
-    display: block;
-    margin:0 auto;
-    float: none;
+  .knative-components-container .text-table .normal-text {
+    width: 80%;
   }
-}
 
-/*fixing issue in safari css */
-.md-typeset .task-list-item {
-  margin-left: 25px;
+  .knative-components-container .text-table .normal-text:first-child {
+    margin-left: -15%;
+  }
+
+  .knative-components-container {
+    padding: 3em 1em;
+  }
+
+  .knative-components-container .components-content .components-img {
+    max-width: 100%;
+  }
+
+  .case-studies-container .col {
+    max-width: 50%;
+  }
+
+  .case-studies-container .col .normal-text {
+    padding-right: .5em;
+  }
 }
 
 /* No next/prev links on home page so make sure next/prev area of footer collapses nicely */
 footer nav.md-footer__inner {
   padding: 0;
 }
+
 footer .md-footer-meta .md-footer-meta__inner {
   padding: 1em 0;
 }

overrides/home.html

@@ -1,158 +1,290 @@
 {% extends "main.html" %} {% block content %}
 <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
 
-<div class="md-container">
+<div class="md-container home-page">
   <section class="home-container">
-    <div class="animated-gradient">
-      <img src="images/logo/rgb/knative-logo-rgb.png" style="display: none;"/>
-    </div>
     <div class="md-grid md-typeset">
       <div class="mdx-hero">
-        <div>
-          <h1>Enterprise-grade Serverless on your own terms.</h1>
-          <h2>Kubernetes-based platform to deploy and manage modern serverless workloads.</h2>
+        <div class="headline-section">
+          <h1 class="main-headline">
+            Knative is an open-source enterprise-level<br>
+            solution for leveraging Kubernetes in<br>
+            in serverless applications.
+          </h1>
+          <h2>Serverless workloads in Kubernetes environments.</h2>
           <p style="display: block">
             <a href="{{ 'getting-started/' | url }}" class="md-button md-button--primary">
-              Developer? Get Started Here!
+              Developer? Start Here!
             </a>
-            <a href="{{ 'install/' | url }}" class="md-button"> Cluster Administrator? Get Started Here!</a>
+            <a href="{{ 'install/' | url }}" class="md-button"> Cluster Administrator? Start Here!</a>
+          </p>
+          <div class="trusted-by-container">
+            <h3 class="trusted-by">Trusted by</h3>
+            <div id="usedby">
+              <div class="logo">
+                <img src="images/corporate-logos/Google.svg" alt="" draggable="false" />
+              </div>
+              <div class="logo">
+                <img src="images/corporate-logos/vmware.svg" alt="" draggable="false" />
+              </div>
+              <div class="logo">
+                <img src="images/corporate-logos/IBM.svg" alt="" draggable="false" />
+              </div>
+              <div class="logo">
+                <img src="images/corporate-logos/Redhat.svg" alt="" draggable="false" />
+              </div>
+              <div class="logo triggermesh">
+                <img src="images/corporate-logos/triggermesh_logo_hp.png" alt="" draggable="false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="need-to-know-more-container">
+    <div class="md-grid md-typeset">
+      <h1>Need to know more?</h1>
+      <p class="normal-text">
+        Learn about how Knative works with Kubernetes and the underlying ideas behind containers<br>
+        and serverless infrastructure.
+      </p>
+      <a href="{{ 'getting-started/' | url }}" class="md-button call-to-action">
+        Explore Knative
+      </a>
+    </div>
+  </section>
+
+  <section class="why-serverless-container">
+    <div class="md-grid md-typeset">
+      <h1>Why serverless containers?</h1>
+      <p class="normal-text">
+        Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
+        meaning that companies only use what they pay for. Knative is a platform-agnostic
+        solution for running serverless deployments.
+      </p>
+      <div class="img-table">
+        <div class="img-row">
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_simple_abstractions_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.png'"
+                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Simpler Abstractions</h2>
+              <p class="normal-text">
+                Simplify your YAML with our custom CRD's
+              </p>
+            </div>
+          </div>
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_autoscaling_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.png'"
+                onmouseout="this.src='images/home-images/blue_autoscaling_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Autoscaling</h2>
+              <p class="normal-text">
+                Scale down to zero and from zero
+              </p>
+            </div>
+          </div>
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_progressive_rollouts_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.png'"
+                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Progressive Rollouts</h2>
+              <p class="normal-text">
+                Choose your rollout strategy depending on your needs
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="img-row">
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_event_intergrations_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.png'"
+                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Event Integrations</h2>
+              <p class="normal-text">
+                Handle events from many sources
+              </p>
+            </div>
+          </div>
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_handle_events_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_handle_events_icon.png'"
+                onmouseout="this.src='images/home-images/blue_handle_events_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Handle Events</h2>
+              <p class="normal-text">
+                Trigger handlers from the event broker
+              </p>
+            </div>
+          </div>
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/blue_plugable_icon.png"
+                onmouseover="this.src='images/home-images/dkblue_plugable_icon.png'"
+                onmouseout="this.src='images/home-images/blue_plugable_icon.png'" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Plugable</h2>
+              <p class="normal-text">
+                Kubernetes native to be integrated and extended
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="knative-components-container">
+    <div class="md-grid md-typeset">
+      <h1>Knative Components</h1>
+      <p class="normal-text">
+        Knative has two main components that empower teams working with Kubernetes. Serving and<br>
+        Eventing work together to automate and manage tasks and applications.
+      </p>
+      <div class="components-content">
+        <img class="components-img" src="images/home-images/knative_componets_image.png" alt="" draggable="false" />
+        <div class="text-table">
+          <p class="normal-text">
+            Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
+            autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming
+            language.
+          </p>
+          <p class="normal-text">
+            Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data
+            stream with declarative event connectivity and developer friendly object models.
           </p>
         </div>
       </div>
     </div>
   </section>
 
-  <section class="features-container">
+  <section class="trying-it-all-container">
     <div class="md-grid md-typeset">
-      <h2>Highlights</h2>
-      <ul class="task-list-control" style="columns: 2">
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled />
-          <span class="task-list-indicator"></span>
-          <b>Stand up scalable, secure, stateless services in seconds.</b>
-        </li>
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled /><span class="task-list-indicator"></span><b>Focused API</b> with
-          higher level abstractions for common app use-cases.
-        </li>
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled /><span class="task-list-indicator"></span
-          ><b>Pluggable components</b> let you bring your own logging and monitoring, networking, and service mesh.
-        </li>
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled /><span class="task-list-indicator"></span>Run Knative anywhere
-          Kubernetes runs, <b>never worry about vendor lock-in.</b>
-        </li>
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled /><span class="task-list-indicator"></span
-          ><b>Seamless developer experience</b>, supports GitOps, DockerOps, ManualOps, etc..
-        </li>
-        <li class="task-list-item">
-          <input type="checkbox" checked disabled /><span class="task-list-indicator"></span
-          ><b>Supports many common tools and frameworks</b> such as Django, Ruby on Rails, Spring, and many more.
-        </li>
-      </ul>
-    </div>
-  </section>
+      <h1>Trying it all together</h1>
+      <div class="img-table">
+        <div class="img-row">
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/dev_focus_code_icon.png" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Developers focus on code</h2>
+              <p class="normal-text">
+                From container to URL<br>
+                with less YAML config
+              </p>
+            </div>
+          </div>
 
-  <section class="intro-container">
-    <div class="md-grid md-typeset">
-      <img
-        src="images/rocket.svg"
-        class="rocket"
-        alt=""
-        draggable="false"
-      />
-      <div>
-        <h2>Make your developers more productive</h2>
-        <p>
-          Knative components build on top of Kubernetes,
-          <b>abstracting away the complex details and enabling developers to focus on what matters</b>. Built by
-          codifying the best practices shared by successful real-world implementations, Knative solves the "boring but
-          difficult" parts of deploying and managing cloud native services so you don't have to.
-        </p>
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/dkblue_scale_icon.png" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Scale up and down</h2>
+              <p class="normal-text">
+                Scale down to zero<br>
+                based on traffic patterns
+              </p>
+            </div>
+          </div>
+
+          <div class="img-col">
+            <div class="reason-img">
+              <img src="images/home-images/cloud_agnostic_icon.png" alt="" draggable="false">
+            </div>
+            <div class="reason-text">
+              <h2>Cloud agnostic</h2>
+              <p class="normal-text">
+                Control traffic shifting<br>
+                for smoother rollouts
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
+      <a href="{{ 'install/' | url }}" class="md-button call-to-action">
+        Deploy Knative Today
+      </a>
     </div>
   </section>
 
   <section class="case-studies-container">
-    <div class="md-grid md-typeset" style="width: 100%">
-      <div id="case-studies-title">
-        <h3>Case Studies:</h3>
-      </div>
-      <div id="case-studies">
-
-        <a href="{{ 'about/case-studies/deepc/' | url }}">
-        <div class="logo">
-          <img src="images/case-studies/deepc.png" alt="" draggable="false" />
-        </div>
-        </a>
-
-        <a href="{{ 'about/case-studies/outfit7/' | url }}">
-        <div class="logo">
-          <img src="images/case-studies/outfit7.png" alt="" draggable="false" />
-        </div>
-        </a>
-
-        <a href="{{ 'about/case-studies/puppet/' | url }}">
-        <div class="logo">
-          <img src="images/case-studies/puppet.png" alt="" draggable="false" />
-        </div>
-        </a>
-
-      </div>
-    </div>
-  </section>
-
-  <section class="usedby-container">
-    <div class="md-grid md-typeset" style="width: 100%">
-      <div id="usedby-title">
-        <h3>Trusted by:</h3>
-      </div>
-      <div id="usedby">
-        <div class="logo">
-          <img src="images/corporate-logos/Google.svg" alt="" draggable="false" />
-        </div>
-        <div class="logo">
-          <img src="images/corporate-logos/vmware.svg" alt="" draggable="false" />
-        </div>
-        <div class="logo">
-          <img src="images/corporate-logos/IBM.svg" alt="" draggable="false" />
-        </div>
-        <div class="logo">
-          <img src="images/corporate-logos/Redhat.svg" alt="" draggable="false" />
-        </div>
-        <div class="logo">
-          <img src="images/corporate-logos/Triggermesh.svg" alt="" draggable="false" />
-        </div>
-      </div>
-      <div id="usedby-more">..and more!</div>
-    </div>
-  </section>
-
-  <section class="components-container">
     <div class="md-grid md-typeset">
-      <div>
-        <h2>Knative Components</h2>
-      </div>
-      <div style="display: flex; gap: 4em;" class="component-flex">
-        <div>
-          <div>
-            <h4><a style="color: white" href="{{ 'serving' | url }}">Serving ›</a></h4>
-          </div>
-          <p>
-            Run serverless containers on Kubernetes with ease, Knative takes care of the details of networking,
-            autoscaling (even to zero), and revision tracking. You just have to focus on your core logic.
-          </p>
+      <h1>Case Studies</h1>
+      <div class="cases-table">
+        <div class="col">
+          <a href="{{ 'about/case-studies/deepc/' | url }}">
+            <div class="logo">
+              <img class="deepc" src="images/case-studies/deepc.png" alt="" draggable="false" />
+            </div>
+            <hr>
+            <p class="normal-text">
+              "It should be possible for
+              somebody with an algorithm to have it on the platform in an hour"<br><br>
+
+              —Andrew Webber,<br>
+              Senior Software Engineer for deepc
+            </p>
+          </a>
         </div>
-        <div>
-          <div>
-            <h4><a style="color: white" href="{{ 'eventing' | url }}">Eventing ›</a></h4>
-          </div>
-          <p>
-            Universal subscription, delivery, and management of events. Build modern apps by attaching compute to a data
-            stream with declarative event connectivity and developer-friendly object model.
-          </p>
+        <div class="col">
+          <a href="{{ 'about/case-studies/outfit7/' | url }}">
+            <div class="logo">
+              <img class="outfit7" src="images/case-studies/outfit7.png" alt="" draggable="false" />
+            </div>
+            <hr>
+            <p class="normal-text">
+              "The community support is
+              really great. The hands-on
+              experience with Knative was
+              so impressive. On the Slack
+              channel, we got actual
+              engineers to answer our questions"<br><br>
+
+              —Tilen Kavcic,<br>
+              Software Engineer for Outfit7
+            </p>
+          </a>
+        </div>
+        <div class="col">
+          <a href="{{ 'about/case-studies/puppet/' | url }}">
+            <div class="logo">
+              <img class="puppet" src="images/case-studies/puppet.png" alt="" draggable="false" />
+            </div>
+            <hr>
+            <p class="normal-text">
+              "I'm a strong believer in
+              working with open-source
+              vendors. We've made
+              contributions to numerous
+              projects, including Tekton,
+              Knative, Ambassador, and
+              gVisor --All of which we depend
+              on to make our product
+              functional."<br><br>
+
+              —Noah Fontes,<br>
+              Senior Principal Software Engineer for<br>Puppet
+            </p>
+          </a>
         </div>
       </div>
     </div>
@@ -160,31 +292,34 @@
 
   <section class="whats-next-container">
     <div class="md-grid md-typeset">
-      <h2>What's Next?</h2>
+      <h1>What's Next?</h1>
       <div class="component-flex">
         <div class="pane">
-          <div class="twemoji">
-            {% include ".icons/fontawesome/brands/slack.svg" %}
-          </div>
-          <h4>Talk to us on Slack</h4>
-          <a href="https://slack.knative.dev" title="Slack Link" class="md-button">Talk</a>
-          <p>Interested in learning more, speaking to other contributors, or finding answers?</p>
+          <a href="https://slack.knative.dev" title="Slack Link">
+            <div class="twemoji">
+              {% include ".icons/fontawesome/brands/slack.svg" %}
+            </div>
+            <h2>Talk to us on Slack</h2>
+            <p class="normal-text">Interested in learning more, speaking to other contributors, or finding answers?</p>
+          </a>
         </div>
         <div class="pane">
-          <div class="twemoji">
-            {% include ".icons/fontawesome/brands/github.svg" %}
-          </div>
-          <h4>Contributions Welcome</h4>
-          <a href="./community/contributing/" title="Contributing Link" class="md-button">Contribute</a>
-          <p>Want to join the fun on Github? New users are always welcome!</p>
+          <a href="./community/contributing/" title="Contributing Link">
+            <div class="twemoji">
+              {% include ".icons/fontawesome/brands/github.svg" %}
+            </div>
+            <h2>Contributions Welcome</h2>
+            <p class="normal-text">Want to join the fun on Github? New users are always welcome!</p>
+          </a>
         </div>
         <div class="pane">
-          <div class="twemoji">
-            {% include ".icons/fontawesome/brands/twitter.svg" %}
-          </div>
-          <h4>Follow us on Twitter</h4>
-          <a href="https://twitter.com/KnativeProject" title="Twitter Link" class="md-button">Follow</a>
-          <p>For features announcements, interesting Knative news, and other great things.</p>
+          <a href="https://twitter.com/KnativeProject" title="Twitter Link">
+            <div class="twemoji">
+              {% include ".icons/fontawesome/brands/twitter.svg" %}
+            </div>
+            <h2>Follow us on Twitter</h2>
+            <p class="normal-text">For features announcements, interesting Knative news, and other great things.</p>
+          </a>
         </div>
       </div>
     </div>
@@ -193,22 +328,22 @@
 {% endblock %}
 
 {% block scripts %}
-  {{ super() }}
-  <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        const logos = document.getElementById("usedby").getElementsByTagName("div");
-        for (let i = 0; i < logos.length - 1; i++) {
-            // Technically there's a chance two elements end up with the same
-            // random order in which case the result won't be truly random (it'll be based
-            // on the original document order). This really doesn't matter.
-            logos[i].style.order = Math.floor(Math.random() * 99);
-        }
-        logos[logos.length - 1].style.order = 100;
-    })
-  </script>
+{{ super() }}
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const logos = document.getElementById("usedby").getElementsByTagName("div");
+    for (let i = 0; i < logos.length - 1; i++) {
+      // Technically there's a chance two elements end up with the same
+      // random order in which case the result won't be truly random (it'll be based
+      // on the original document order). This really doesn't matter.
+      logos[i].style.order = Math.floor(Math.random() * 99);
+    }
+    logos[logos.length - 1].style.order = 100;
+  })
+</script>
 {% endblock %}
 
 <!-- Application footer -->
 {% block footer %}
-  {% include "partials/footer.html" %}
+{% include "partials/footer.html" %}
 {% endblock %}