docs: new landing page design (v3)

docs/assets/stylesheets/home.css

@@ -7,10 +7,63 @@
     padding: 2.2rem 0;
 }
 
+.mdx-hero__content h1 {
+    color: #FFFFFF;
+    font-weight: 600;
+}
+
+.mdx-hero__content p {
+    color: #FFFFFF;
+    opacity: 0.4;
+}
+
+.mdx-expect {
+    margin-top: 5.2rem;
+    margin-bottom: 5.2rem;
+}
+
+.mdx-expect__description h2 {
+    margin-top: 0;
+}
+
 .md-content__inner:before {
     display: none;
 }
 
+
+.frame {
+    border: 0px;
+}
+
+.bg-blue {
+    background-color: #011549;
+    color: white;
+}
+
+.text-blue {
+    color: #232EAB;
+}
+
+.text-bold {
+    font-weight: 800;
+}
+
+.banner {
+    margin-top: 107px;
+}
+
+.cncf-disclaimer {
+    width: 600px;
+    height: 200px;
+    object-fit: cover;
+    background-repeat: no-repeat;
+    background-image: url("../images/cncf-color.svg");
+}
+
+[data-md-color-scheme="slate"] .cncf-disclaimer {
+    background-image: url("../images/cncf-white.svg");
+}
+
 /* Prevent removing default title on the page */
 .md-content__inner h1:first-child {
     display: block;
@@ -20,6 +73,28 @@
     .md-typeset .header-link {
         display: none;
     }
+
+    .cncf-disclaimer {
+        width: 400px;
+        height: 200px;
+    }
+
+    .youtube-container {
+        position: relative;
+            width: 100%;
+            overflow: hidden;
+            padding-top: 75%;
+    }
+
+    .frame {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .md-main {
@@ -112,6 +187,53 @@
     display: block;
 }
 
+.bg-default {
+    width: 100vw;
+    height: 80vh;
+    background-color: #006bba;
+    color: #FFFFFF;
+}
+
+.bg-dark {
+    background-color: #1e2129;
+    color: #e2e4e9d1;;
+}
+
+.font-color-white__faint {
+    color: #e2e4e98f;
+}
+
+.mdx-expect__list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1.6rem;
+    padding: 0;
+}
+
+.mdx-expect__item {
+    display: flex;
+    align-items: flex-start;
+    flex: 1 0 48%;
+    gap: .6rem;
+    margin: 0;
+}
+
+.mdx-expect__icon {
+    fill: currentcolor;
+    background-color: #e2e4e91f;
+    border-radius: 100%;
+    flex-shrink: 0;
+    height: 2.2rem;
+    padding: .4rem;
+    width: 2.2rem;
+}
+
+
+
+.mdx-hero__content {
+    margin-top: 50vh;
+}
+
 @media screen and (max-width:30em) {
     .tx-hero h1 {
         font-size: 1.4rem
@@ -273,7 +395,4 @@
         padding-bottom: 3vw;
     }
 
-    .mdx-spotlight__feature:nth-child(odd) {
-        flex-direction: row-reverse;
-    }
 }