Feat: new landing page

Signed-off-by: thisisobate <obasiuche62@gmail.com>

docs/assets/stylesheets/home.css

@@ -16,6 +16,39 @@ body {
     display: block;
 }
 
+.bg-blue {
+    background-color: #011549;
+    color: white;
+}
+
+.text-blue {
+    color: #232EAB;
+}
+
+.text-bold {
+    font-weight: 800;
+}
+
+.banner {
+    margin-top: 107px;
+}
+
+.cncf-disclaimer {
+    width: 800px;
+    height: 200px;
+    object-fit: cover;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+}
+
+.cncf-disclaimer {
+    background-image: url("../images/cncf-color.svg");
+}
+
+[data-md-color-scheme="slate"] .cncf-disclaimer {
+    background-image: url("../images/cncf-white.svg");
+}
+
 @media (max-width: 600px) {
     .md-typeset .header-link {
         display: none;
@@ -59,9 +92,9 @@ body {
     text-align: center;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
+    align-items: center;
     gap: 1rem;
-    padding-top: 20vh;
 }
 
 .tx-hero h1 {
@@ -73,7 +106,6 @@ body {
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    width: 65%;
     font-weight: 700;
     font-size: 4rem;
     margin: 0px;
@@ -166,7 +198,13 @@ body {
     .tx-hero {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .tx-hero h1 {
+        width: 54rem;
     }
 
     .tx-hero__content {
@@ -229,7 +267,6 @@ body {
     margin-top: 15px;
     font-family: "Lato", sans-serif;
     font-size: 23px;
-    font-weight: 300;
     padding-bottom: 10px;
 }
 

docs/overrides/home.html

@@ -40,7 +40,7 @@ <h1>Supercharge your deployments</h1>
                             data-proofer-ignore
                     />
                     <figcaption class="md-typeset">
-                        <h2 id="deployment-observability">Deployment Observability</h2>
+                        <h2 class="text-bold" id="deployment-observability">Deployment Observability</h2>
                         <h3>Make any Kubernetes workload observable</h3>
                         <p>
                             If you deploy with ArgoCD, Flux, GitLab, kubectl, etc. we provide you:
@@ -62,7 +62,7 @@ <h3>Make any Kubernetes workload observable</h3>
                             data-proofer-ignore
                     />
                     <figcaption class="md-typeset">
-                        <h2 id="gather-metrics-from-anywhere">Gather metrics from anywhere</h2>
+                        <h2 class="text-bold" id="gather-metrics-from-anywhere">Gather metrics from anywhere</h2>
                         <h3>Standardize access for all Observability Data for K8s</h3>
                         <p>
                             The Keptn Metrics Operator provides the following features:
@@ -84,7 +84,7 @@ <h3>Standardize access for all Observability Data for K8s</h3>
                             data-proofer-ignore
                     />
                     <figcaption class="md-typeset">
-                        <h2 id="orchestrate-deployment-checks">Orchestrate Deployment Checks</h2>
+                        <h2 class="text-bold" id="orchestrate-deployment-checks">Orchestrate Deployment Checks</h2>
                         <p>
                             To reduce complexity of custom checks use Keptn to:
                         </p>
@@ -112,6 +112,43 @@ <h2 id="orchestrate-deployment-checks">Orchestrate Deployment Checks</h2>
         </div>
     </div>
 </section>
+<section class="mdx-parallax__group bg-blue">
+    <div class="md-content md-grid" data-md-component="content">
+        <div class="md-content__inner">
+            <h3 class="text-center text-bold">Learn from the Community</h3>
+            <div class="mdx-spotlight">
+                <figure class="mdx-spotlight__feature">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/iyb6XD_KpQU?si=oKZUy3Y50rZBTJLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                    <figcaption class="md-typeset">
+                        <h2 class="text-bold" id="">Keptn online User group: An Introduction to Keptn</h2>
+                        <p>
+                            From Keptn Online User Group
+                        </p>
+                    </figcaption>
+                </figure>
+                <figure class="mdx-spotlight__feature">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/TyZS5mH6vM0?si=QX79_MxBdzA5x8ww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                    <figcaption class="md-typeset">
+                        <h2 class="text-bold" id="">Lightning Talk: From Novice to Keptn Contributor</h2>
+                        <p>
+                            From KubeCon EU 2024
+                        </p>
+                    </figcaption>
+                </figure>
+            </div>
+            <div class="text-center">
+                <a href="https://www.youtube.com/c/keptn" target="_blank" rel="noopener" data-proofer-ignore title="Resources" class="md-button md-button--secondary">
+                    Discover More
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="banner">
+    <h2 class="text-center text-bold">Keptn is a  <a href="https://www.cncf.io/" class="text-blue">Cloud Native Computing Foundation</a> incubating project</h2>
+    <div class="cncf-disclaimer">
+    </div>
+</section>
 
 {% endblock %}
 {% block content %}{% endblock %}