Merge pull request #389 from bitovi/docs/landing-page

Docs landing page: bitops values & align with the video

docs/index.md

@@ -8,8 +8,20 @@ hide:
 
 <!-- Custom hero banner using docs/stylesheets/custom.css -->
 <div class="bitovi-row">
+    <div class="bitovi-column bitovi-list">
+        <img alt="BitOps Logo" float="middle" style="vertical-align: middle;" src="assets/images/logo/bitops_horizontal.png" width="300" height="75" />
+        <ul>
+            <li>Keeps the working environment clean</li>
+            <li><a href="/operations-repo-structure/" target="_blank">Organizes your deployment configuration</a></li>
+            <li>Faster developer onboarding</li>
+            <li><a href="https://github.com/bitops-plugins" target="_blank">Integrates with your favorite tools</a></li>
+            <li><a href="https://github.com/bitovi/bitops/tree/main/docs/examples" target="_blank">Saves weeks of engineering efforts</a></li>
+            <li>Encourages GitOps best practices</li>
+            <li><a href="https://github.com/bitovi/bitops" target="_blank">Open source and free</a></li>
+        </ul>
+    </div>
     <div class="bitovi-column">
-        <img alt="Logo" float="middle" style="vertical-align: middle;" src="assets/images/logo/Bitops%28RGB%29_L2_Full_4C.png" width="350" />
+        <iframe width="500" height="310" src="https://www.youtube.com/embed/BiytYu3EefY" title="Intro to BitOps" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
 </div>
 

docs/stylesheets/custom.css

@@ -7,7 +7,7 @@
     flex-wrap: wrap;
     width: 100%;
   }
-  
+
 .bitovi-column {
     display: flex;
     flex-direction: column;
@@ -18,10 +18,31 @@
     flex: 1;
     margin: 20px;
   }
-  
+
 @media screen and (max-width: 800px) {
     .bitovi-row {
         flex-direction: column;
         align-items: center;
+        /* margin-left: -100px; */
     }
-  }
+  }
+
+/* override to save the empty space in the header */
+.md-main__inner {
+    margin-top: -15px;
+}
+
+.bitovi-list {
+  margin-left: -50px;
+}
+
+.bitovi-list ul {
+    text-align: left;
+    list-style-type: none;
+}
+
+.bitovi-list ul li:before {
+    content: '✅';
+    margin-left: 50px;
+    margin-right: 10px
+}