Merge branch 'showcase-custom-resources-homepage'

kotaicode · Feb 9, 2023 · c6cf66d · c6cf66d
2 parents 31639a4 + caabaa9
commit c6cf66d
Show file tree

Hide file tree

Showing 6 changed files with 608 additions and 5 deletions.
diff --git a/assets/img/booking-showcase.svg b/assets/img/booking-showcase.svg
diff --git a/assets/img/monitor-showcase.svg b/assets/img/monitor-showcase.svg
diff --git a/assets/img/resource-showcase.svg b/assets/img/resource-showcase.svg
diff --git a/config/samples/manager_v1_resource.yaml b/config/samples/manager_v1_resource.yaml
@@ -9,6 +9,7 @@ metadata:
     app.kubernetes.io/created-by: resource-booking-operator
   name: analytics
 spec:
+  booked_by: cd39ad8bc3
+  booked_until: 2023-01-10T22:45:00Z
   type: ec2
   tag: analytics
-  booked: false
diff --git a/config/samples/manager_v1_resourcemonitor.yaml b/config/samples/manager_v1_resourcemonitor.yaml
@@ -3,10 +3,10 @@ kind: ResourceMonitor
 metadata:
   labels:
     app.kubernetes.io/name: resourcemonitor
-    app.kubernetes.io/instance: resourcemonitor-sample
+    app.kubernetes.io/instance: ec2
     app.kubernetes.io/part-of: resource-booking-operator
     app.kuberentes.io/managed-by: kustomize
     app.kubernetes.io/created-by: resource-booking-operator
-  name: resourcemonitor-sample
+  name: ec2
 spec:
   type: ec2
diff --git a/index.html b/index.html
@@ -138,8 +138,43 @@
           font-family: 'Lato', sans-serif;
         }
 
+        .showcase-wrapper {
+            padding-bottom: 20px;
+            border-radius: 16px;
+            /* background-color: rgb(255 255 255 / 70%); */
+        }
+
+        .showcase-info {
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+            padding: 2%;
+        }
+
+        .showcase-info-details {
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .showcase-info-title {
+            font-size: 2em;
+            margin-bottom: 10px;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .showcase-info-image {
+            clip-path: inset(12px 12px 12px 12px round 12px);
+        }
+
+        .showcase-info-text {
+            font-size: 1.3em;
+            line-height: 1.3em;
+        }
+
         .features-wrapper {
-            margin-top: 50px;
+            margin: 50px 0;
             display: flex;
             justify-content: space-between;
         }
@@ -231,6 +266,16 @@
                 border-color: #99b9e5;
             }
 
+            .showcase-wrapper {
+                background-color: rgba(56, 59, 61, 0.7);
+            }
+
+            .showcase-info-title {
+                background: linear-gradient(to right, #538BDB 0%, #9854d0 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+
             .logo-wrapper {
             }
         }
@@ -268,6 +313,16 @@
                 border-color: #538BDB;
             }
 
+            .showcase-info {
+                background-color: rgba(255, 255, 255, 0.7);
+            }
+
+            .showcase-info-title {
+                background: linear-gradient(to right, #538BDB 0%, #DB7FD8 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+
             .logo-wrapper {
             }
         } 
@@ -309,7 +364,7 @@ <h3 class="subtitle">Cloud resource scheduling using Kubernetes custom resources
                   src="assets/vid/captions-en.vtt"
                   default />
             </video>
-          </section>
+        </section>
 
         <section class="features-wrapper">
             <div class="feature">
@@ -332,6 +387,30 @@ <h3 class="subtitle">Cloud resource scheduling using Kubernetes custom resources
             </div>
         </section>
 
+        <section class="showcase-wrapper">
+            <div class="showcase-info">
+                <img class="showcase-info-image" src="assets/img/monitor-showcase.svg" />
+                <div class="showcase-info-details">
+                    <h1 class="showcase-info-title">Resource monitor</h1>
+                    <p class="showcase-info-text">Continuously scans the given type of resources and manages the resources on the cluster based on the tracked cloud instances. When new instances are tagged, they will instantly appear as a resource.</p>
+                </div>
+            </div>
+            <div class="showcase-info">
+                <div class="showcase-info-details">
+                    <h1 class="showcase-info-title">Resource</h1>
+                    <p class="showcase-info-text">A group of instances that share a common tag name. Resources describe the status of the instances they represent, and can also control their state depending on the existence of a booking that reserves them.</p>
+                </div>
+                <img class="showcase-info-image" src="assets/img/resource-showcase.svg" />
+            </div>
+            <div class="showcase-info">
+                <img class="showcase-info-image" src="assets/img/booking-showcase.svg" />
+                <div class="showcase-info-details">
+                    <h1 class="showcase-info-title">Booking</h1>
+                    <p class="showcase-info-text">Used to reserve resources, bookings trigger a state change on the resource they’ve scheduled. They have a start and end time based on which the resource should start or stop the cloud instances.</p>
+                </div>
+            </div>
+        </section>
+
         <section class="actions-box">
             <a href="https://github.com/kotaicode/resource-booking-operator" target="_blank">Get Started</a>
             <a href="https://kotaico.de/resource-booking-operator-docs">Documentation</a>