Added Operate section under Homepage

Author: ajeetraina

docs/operate/continuous-integration-continuous-deployment/argocd/index-argocd.mdx

@@ -1,7 +1,7 @@
 ---
 id: index-argocd
-title: 'ArgoCD: What It Is And Why It Should Be Part of Your Redis CI-CD Pipeline'
-sidebar_label: Redis using ArgoCD
+title: 'Argo CD: What It Is And Why It Should Be Part of Your Redis CI-CD Pipeline'
+sidebar_label: Redis using Argo CD
 slug: /operate/continuous-integration-continuous-deployment/argocd
 authors: [ajeet,talon]
 ---

docs/operate/continuous-integration-continuous-deployment/index-continuous-integration-continuous-deployment.mdx

@@ -22,8 +22,8 @@ The following links show you the different ways to embed Redis into your continu
 
    <div class="col">
         <RedisCard
-            title="ArgoCD - What It Is And Why It Should Be Part of Your Redis CI-CD Pipeline"
-            description="Learn about ArgoCD and implement voting app using Redis"
+            title="Argo CD - What It Is And Why It Should Be Part of Your Redis CI-CD Pipeline"
+            description="Learn about Argo CD and implement voting app using Redis"
             page="/operate/continuous-integration-continuous-deployment/argocd"
             />
      </div>

docs/operate/index-operate.mdx

@@ -1,6 +1,6 @@
 ---
 id: index-operate
-title: Operate Your Redis Database
+title: Operate Your Redis database
 sidebar_label: Overview
 slug: /operate
 ---
@@ -9,38 +9,39 @@ import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import RedisCard from '@site/src/theme/RedisCard';
 
-The following links demonstrate various ways to provision Redis and accelerate app deployment using Devops.
+The following links provides you with the available options to provision Redis and acceperate app deployment using Devops.
 
 <a href="https://redis.com/blog/why-devops-teams-love-redis-enterprise/">
-<img src="/img/logos/devopslogo.jpg" alt="devops logo" />
+<img src="/img/logos/devopslogo.png" alt="docusaurus mascot" />
 </a>
 
 # Explore by Category
 
 <div class="row">
-    <div class="col">
+    <div class="col continuous">
         <RedisCard
             title="Continuous Integration and Deployment"
             description="Embed Redis into your CI-CD Process"
+            preview="/img/logos/devops.png"
             page="/operate/continuous-integration-continuous-deployment"
             />
     </div>
- <div class="col">
+ <div class="col observability">
      <RedisCard
         title="Observability"
         description="Observe key indicators critical to operating Redis"
         page="/operate/observability"
         />
   </div>
- <div class="col">
+ <div class="col provisioning">
      <RedisCard
         title="Provisioning"
-        description="Automate deployment and delivery of Redis to your organization"
+        description="Automate delivery of Redis to your org"
         page="/operate/provisioning"
         />
   </div>
 
- <div class="col">
+ <div class="col orchestration">
         <RedisCard
             title="Orchestration"
             description="Connect your containerized workloads to Redis"

src/css/_article.scss

@@ -344,6 +344,84 @@ main:not(.home-main) {
   }
 }
 
+.orchestration {
+  .ri-container {
+    .ri-detail {
+      padding-top: 2.5rem;
+      position: relative;
+      &:before {
+        background: url("/img/orchestrating-icon-black.svg") no-repeat;
+        background-size: contain;
+        content: '';
+        height: 40px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 40px;
+
+        html[data-theme="dark"] & {
+          background: url("/img/orchestrating-icon.svg") no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+.provisioning {
+  @extend .orchestration;
+
+  .ri-container {
+    .ri-detail {
+      &:before {
+        background: url("/img/provisioning-icon-black.svg") no-repeat;
+        background-size: contain;
+
+        html[data-theme="dark"] & {
+          background: url("/img/provisioning-icon.svg") no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+.observability {
+  @extend .orchestration;
+
+  .ri-container {
+    .ri-detail {
+      &:before {
+        background: url("/img/observability-icon-black.svg") no-repeat;
+        background-size: contain;
+
+        html[data-theme="dark"] & {
+          background: url("/img/observability-icon.svg") no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+.continuous {
+  @extend .orchestration;
+
+  .ri-container {
+    .ri-detail {
+      &:before {
+        background: url("/img/ci-cd-icon-black.svg") no-repeat;
+        background-size: contain;
+
+        html[data-theme="dark"] & {
+          background: url("/img/ci-cd-icon.svg") no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
 .ri-container {
   position: relative;
   margin-bottom: 30px;

src/css/components/_hero.scss

@@ -1,20 +1,20 @@
 .rds-hero {
   margin-top: -63px;
-  padding: 114px 0 65px;
+  padding: 100px 0 100px;
   border-radius: 0 0 10px 10px;
   background-color: $primary-blue;
   color: $white;
 
-  @media only screen and (min-width: 997px) and (max-width: 1100px) {
-    padding-left: 15px;
-    padding-right: 15px;
+  @media only screen and (min-width: 1000px) and (max-width: 1000px) {
+    padding-left: 30px;
+    padding-right: 30px;
 
     .row {
       flex-wrap: nowrap;
     }
 
     .col--7 {
-      min-width: 665px;
+      min-width: 1500px;
     }
 
     .col--5 {
@@ -61,7 +61,7 @@
 
   .hero-subtitle {
     margin: 17px 0 0 0;
-    line-height: 1.5;
+    line-height: 2.0;
     font-size: 18px;
     font-weight: 400;
 
@@ -88,7 +88,7 @@
       flex: 1;
       position: relative;
       border: 1px dashed $red;
-      border-radius: 3px;
+      border-radius: 10px;
       transition: background-color .2s ease-in-out;
 
       @include mobile {
@@ -116,18 +116,24 @@
       }
 
       &.box-create .bg {
-        top: 0;
-        left: 13px;
+        top: 900px;
+        left: 520px;
       }
 
       &.box-develop .bg {
-        top: 9px;
-        left: 5px;
+        top: 900px;
+        left: 520px;
       }
 
       &.box-explore .bg {
-        top: 15px;
-        left: 43px;
+        top: 900px;
+        left: 520px;
+      }
+
+
+      &.box-operate .bg {
+        top: 900px;
+        left: 520px;
       }
 
       .icon {
@@ -168,7 +174,7 @@
         }
 
         .description {
-          margin: 5px 0 0 0;
+          margin: 10px 0 0 0;
           line-height: 1.5;
           font-size: 14.5px;
 
@@ -225,10 +231,6 @@
   .illustration {
     max-width: 100%;
 
-    @include desktop {
-      margin-left: 66px;
-    }
-
     @media only screen and (min-width: 997px) and (max-width: 1100px) {
       float: right;
       margin-left: 0;

src/css/components/_languages.scss

@@ -19,12 +19,12 @@
   }
 
   .languages-list {
+    align-items: center;
     z-index: 2;
     display: flex;
-    // justify-content: space-between;
     justify-content: space-around;
     position: relative;
-    margin: 0 auto;
+    margin: 0 auto .5rem;
     padding: 0;
     max-width: 1050px;
     list-style: none;
@@ -35,7 +35,7 @@
     }
 
     &:not(:first-child) {
-      margin-top: 76px;
+      margin-top: 2rem;
 
       @include mobile {
         margin-top: 12px;
@@ -58,11 +58,10 @@
         text-decoration: none;
 
         svg {
-          margin-bottom: 27px;
+          margin-bottom: 1rem;
 
           @include mobile {
             zoom: .85;
-            margin-bottom: 21px;
           }
         }