chore: create hero section

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

overrides/assets/stylesheets/home.css

@@ -1,3 +1,13 @@
+.hero {
+  background-image: url("../../images/home-images/hero-bg.svg");
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: cover;
+  background-color: #fff;
+  height: 25rem;
+  margin-top: -50px;
+}
+
 .md-main__inner {
   margin: 0;
   max-width: 100%;
@@ -117,6 +127,7 @@ body {
 h2.secondary-headline, h3.trusted-by {
   color: black;
   font-weight: 700;
+  text-align: center;
 }
 
 .home-container h1 {

overrides/home.html

@@ -2,7 +2,7 @@
 <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
 
 <div class="md-container home-page">
-  <section class="home-container">
+  <!-- <section class="home-container">
     <div class="md-grid md-typeset">
       <div class="mdx-hero">
         <div class="headline-section">
@@ -18,18 +18,48 @@
             <h3 class="trusted-by">Trusted by</h3>
             <div class="scroller">
               <div class="scroller__inner">
-                  <!-- First row of adopters will be populated dynamically -->
+                  
               </div>
             </div>
             <div class="scroller" data-direction="right">
               <div class="scroller__inner">
-                  <!-- Second row of adopters will be populated dynamically -->
+                 
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </section> -->
+  <section>
+    <div class="hero">
+      <div class="md-grid md-typeset">
+        <div class="headline-section">
+          <h1 class="main-headline">
+            Knative is an Open-Source Enterprise-level<br>
+            solution to build Serverless and Event Driven Applications
+          </h1>
+          <h4>The easiest way to build and run serverless workloads on Kubernetes. Built by the community, for modern cloud-native teams</h4>
+          <p style="display: block">
+            <a href="{{ 'getting-started/tutorial' | url }}" class="md-button white md-button--primary">Try the tutorial</a>
+            <a href="{{ 'install/' | url }}" class="md-button white">Install Knative on your cluster</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="trusted-by-container">
+      <h3 class="trusted-by">Trusted by</h3>
+      <div class="scroller">
+        <div class="scroller__inner">
+            
+        </div>
+      </div>
+      <div class="scroller" data-direction="right">
+        <div class="scroller__inner">
+           
+        </div>
+      </div>
+    </div>
   </section>
 
   <section class="need-to-know-more-container">