From 963b8d69b404e4a230f1605e9ee5b1a17fc04142 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <tharanishwaran.ta@gmail.com>
Date: Thu, 24 Oct 2024 02:41:07 +0530
Subject: [PATCH 1/4] Increase integration icons in homepage animation

Signed-off-by: Tharanishwaran <tharanishwaran.ta@gmail.com>
---
 src/sections/Home/Playground-home/index.js | 327 ++++++++++-----------
 1 file changed, 152 insertions(+), 175 deletions(-)

diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index 08347396418c..d94caaba2c87 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 import { useInView } from "react-intersection-observer";
-import { useState } from "react";
 import Button from "../../../reusecore/Button";
 import argocd from "../../../collections/integrations/argo-cd/icons/color/argo-cd-color.svg";
 import cilium from "../../../collections/integrations/cilium/icons/color/cilium-color.svg";
@@ -9,46 +8,56 @@ import prometheus from "../../../collections/integrations/prometheus/icons/color
 import kubernetes from "../../../collections/integrations/kubernetes/icons/color/kubernetes-color.svg";
 import keda from "../../../collections/integrations/keda/icons/color/keda-color.svg";
 import linkerd from "../../../collections/integrations/linkerd/icons/color/linkerd-color.svg";
+import istio from "../../../collections/integrations/istio-base/icons/color/istio-base-color.svg";
+import jaeger from "../../../collections/integrations/jaeger/icons/color/jaeger-color.svg";
+import envoy from "../../../collections/integrations/envoy/icons/color/envoy-color.svg";
+import kong from "../../../collections/integrations/kong/icons/color/kong-color.svg";
+import grafana from "../../../collections/integrations/grafana-agent-operator/icons/color/grafana-agent-operator-color.svg";
+import docker from "../../../collections/integrations/docker/icons/color/docker-color.svg";
+import opentelemetry from "../../../collections/integrations/opentelemetry-operator/icons/color/opentelemetry-operator-color.svg";
+import kiali from "../../../collections/integrations/kiali-operator/icons/color/kiali-operator-color.svg";
+import knative from "../../../collections/integrations/knative/icons/color/knative-color.svg";
+import dapr from "../../../collections/integrations/dapr/icons/color/dapr-color.svg";
+import fabedge from "../../../collections/integrations/fabedge/icons/color/fabedge-color.svg";
+import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
+import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
+import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
+import terform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
+import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";
 
-const ViewsSectionWrapper = styled.div`
 
+const ViewsSectionWrapper = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .small-card-container {
+    .views-section {
+      position: relative;
       display: flex;
-      gap: 1rem;
+      flex-direction: row;
+      background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
+      margin: 3%;
+      border-radius: 1rem;
+      max-width: 1920px;
+      width: 90vw;
+      height: 500px; 
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 5% 0 0;
+      box-sizing: border-box;
+      overflow: hidden;
+      
+      @media only screen and (max-width: 767px) {
+        text-align: center;
+        flex-direction: column-reverse;
+      }
     }
 
-    .views-section {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
-    margin: 3%;
-    border-radius: 1rem;
-    max-width: 1920px;
-    width: 90vw;
-    height: 500px;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 0 5% 0 0;
-    box-sizing: border-box;
-    //box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    overflow: hidden;
-
-    @media only screen and (max-width: 767px) {
-      text-align: center;
-      flex-direction: column-reverse;
-    }
-}
     .hero-text {
         display: flex;
         flex-direction: column;
-        flex: 0 0 50%;
-        max-width: 50%;
+        flex: 0 0 50%; 
+        max-width: 50%; 
         padding-bottom: 3rem;
         @media only screen and (max-width: 767px) {
           max-width: 100%;
@@ -57,132 +66,99 @@ const ViewsSectionWrapper = styled.div`
         }
     }
 
-    h2 {
-        /* max-width: 90%; */
-        padding-bottom: 2%;
-      }
-    }
-
-    h4 {
-        max-width: 90%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          }
-    }
-
     .hero-image {
         position: relative;
         display: flex;
         justify-content: center;
-        flex: 0 0 50%;
-        max-width: 50%;
-
+        flex: 0 0 50%; 
+        max-width: 50%; 
+        overflow: hidden;
+        height: 100%; 
         
-
-        svg {
-          align-items: center;
-          justify-content: center;
-          width: 70%;
-          .visualizer-views-colorMode_svg__colorMode1 {
-            fill: ${(props) => props.theme.whiteToGrey737373};
-            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-          }
-        }
-
-        .visible {
-                opacity: 1;
-                transition: all 0.2s ease-in;
-        }
-
-        .not-visible {
-                opacity: 0;
-                transition: all 0.5s ease;
-        }
-
         @media only screen and (max-width: 767px) {
           max-width: 100%;
         }
-
     }
 
-    .overlay {
-        width: 483px;
-        height: 680px;
+    .small-card-container {
+        display: flex;
+        gap: 1rem; 
     }
 
     .container {
       display: flex;
       justify-content: center;
+      gap: 1rem; 
+      height: 100%; 
     }
-    
+
     .line {
+      position: relative;
+      height: 100%; 
+      overflow: hidden;
+      width: 200px; 
+    }
+
+    .scroll-track {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      margin-right: 2rem;
-      flex-wrap: wrap;
-    }
-    .position-line-down{
-        transform: translateY(-20em);
-    }
-    .position-line-up{
-        transform: translateY(20em);
+      gap: 1rem;
     }
 
-    .line-primary, .line-secondary {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+    .scroll-down .scroll-track {
+      animation: scrollDown 25s linear infinite;
     }
 
-    .animation-up-scroll {
-        animation: scroll-up-animation 15s linear infinite;
+    .scroll-up .scroll-track {
+      animation: scrollUp 25s linear infinite;
+    }
 
-        @keyframes scroll-up-animation {
-            0% {
-                transform: translateY(0%);
-            }
-            100% {
-                transform: translateY(-100%);
-            }
-        }
+    @keyframes scrollDown {
+      0% {
+        transform: translateY(-50%);
+      }
+      100% {
+        transform: translateY(0%);
+      }
     }
-    .animation-down-scroll {
 
-        animation: scroll-down-animation 15s linear infinite;
-        @keyframes scroll-down-animation {
-            0% {
-                transform: translateY(0);
-            }
-            100% {
-                transform: translateY(100%);
-            }
-        }
+    @keyframes scrollUp {
+      0% {
+        transform: translateY(0%);
+      }
+      100% {
+        transform: translateY(-50%);
+      }
     }
+
     .box {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 100%;
-      height:150px;
-      padding: 2rem;
+      width: 100%; 
+      height: 150px; 
+      padding: 2rem; 
       box-sizing: border-box;
       background-color: ${(props) => props.theme.backgroundColor}; 
-      margin-bottom: 1rem; 
       border-radius: 1rem;
-      //box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive};
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: scale(1.02);
+      }
     }
-    // .box:hover {
-    //   box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
-    // }
 
     .box .boxImg {
       width: auto;
-      height: 60px;
+      height: 60px; 
       max-width: 100%;
     }
-    
+
     .box .boxText {
       margin-top: 1rem;
       text-align: center;
@@ -196,77 +172,78 @@ const ViewsSectionWrapper = styled.div`
         padding: 2rem 2rem 0 2rem;
         height: auto;
       }
-      .small-card-container {
-        display: flex;
-        justify-content: center;
-      }
     }
-
 `;
 
+
 const KanvasVisualizerViews = () => {
-  const [imageRef, inView] = useInView({ threshold: 0.3 });
-  const [imageInView, setimageInView] = useState(false);
+  const [imageRef] = useInView({ threshold: 0.3 });
+
+  const leftColumnItems = [
+    { img: prometheus, name: "Prometheus" },
+    { img: argocd, name: "Argo CD" },
+    { img: cilium, name: "Cilium" },
+    { img: istio, name: "Istio" },
+    { img: grafana, name: "Grafana" },
+    { img: knative, name: "Knative" },
+    { img: docker, name: "Docker" },
+    { img: envoy, name: "Envoy" },
+    { img: karmada, name: "Karmada" },
+    { img: helm, name: "Helm" },
+    { img: fluentd, name: "Fluentd" }
+
+  ];
 
-  if (inView && !imageInView) setimageInView(true);
-  else if (imageInView && !inView) setimageInView(false);
+  const rightColumnItems = [
+    { img: kubernetes, name: "Kubernetes" },
+    { img: keda, name: "Keda" },
+    { img: linkerd, name: "Linkerd" },
+    { img: jaeger, name: "Jaeger" },
+    { img: kong, name: "Kong" },
+    { img: opentelemetry, name: "Opentelemetry" },
+    { img: dapr, name: "Dapr" },
+    { img: kiali, name: "Kiali" },
+    { img: fabedge, name: "FabEdge" },
+    { img: kubeflow, name: "Kubeflow" },
+    { img: terform, name: "Terform" }
+
+  ];
+
+  const renderColumn = (items, direction) => (
+    <div className={`line scroll-${direction}`}>
+      <div className="scroll-track">
+        {/* Original set */}
+        {items.map((item, index) => (
+          <div className="box" key={`set1-${index}`}>
+            <img className="boxImg" src={item.img} alt={item.name} />
+            <div className="boxText">{item.name}</div>
+          </div>
+        ))}
+        {/* First duplicate set */}
+        {items.map((item, index) => (
+          <div className="box" key={`set2-${index}`}>
+            <img className="boxImg" src={item.img} alt={item.name} />
+            <div className="boxText">{item.name}</div>
+          </div>
+        ))}
+        {/* Second duplicate set for seamless loop */}
+        {items.map((item, index) => (
+          <div className="box" key={`set3-${index}`}>
+            <img className="boxImg" src={item.img} alt={item.name} />
+            <div className="boxText">{item.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 
   return (
     <ViewsSectionWrapper>
       <div className="views-section">
         <div className="hero-image" ref={imageRef}>
-          {/* <img
-            className={imageInView ? "lines-visible" : "not-visible"}
-            src={CommentingImageDark}
-            alt=""
-          /> */}
-          <div
-            // className={
-            //   imageInView ? "visible container" : "not-visible container"
-            // }
-            className="visible container"
-          >
-            <div className="line position-line-down">
-              <div className="line-primary animation-down-scroll">
-                <div className="box">
-                  <img className="boxImg" src={prometheus} alt="" />
-                  <div>Prometheus</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={argocd} alt="" />
-                  <div className="boxText">Argo CD</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={cilium} alt="" />
-                  <div>Cilium</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={prometheus} alt="" />
-                  <div>Prometheus</div>
-                </div>
-              </div>
-
-            </div>
-            <div className="line position-line-up">
-              <div className="line-primary animation-up-scroll">
-                <div className="box">
-                  <img className="boxImg" src={kubernetes} alt="" />
-                  <div>Kubernetes</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={keda} alt="" />
-                  <div>Keda</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={linkerd} alt="" />
-                  <div>Linkerd</div>
-                </div>
-                <div className="box">
-                  <img className="boxImg" src={kubernetes} alt="" />
-                  <div>Kubernetes</div>
-                </div>
-              </div>
-            </div>
+          <div className="container">
+            {renderColumn(leftColumnItems, "down")}
+            {renderColumn(rightColumnItems, "up")}
           </div>
         </div>
         <div className="hero-text">

From 22b45eff6e42f19c4631d634c9484adaff35b1b3 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
Date: Thu, 24 Oct 2024 08:22:24 +0530
Subject: [PATCH 2/4] Update index.js

Signed-off-by: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
---
 src/sections/Home/Playground-home/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index d94caaba2c87..8a4ff2125430 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -22,7 +22,7 @@ import fabedge from "../../../collections/integrations/fabedge/icons/color/fabed
 import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
 import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
 import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
-import terform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
+import terraform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
 import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";
 
 
@@ -205,7 +205,7 @@ const KanvasVisualizerViews = () => {
     { img: kiali, name: "Kiali" },
     { img: fabedge, name: "FabEdge" },
     { img: kubeflow, name: "Kubeflow" },
-    { img: terform, name: "Terform" }
+    { img: terraform, name: "Terraform" }
 
   ];
 

From 66dc0af4c5b060632fc7071e567408cf9a45455e Mon Sep 17 00:00:00 2001
From: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
Date: Sat, 26 Oct 2024 00:28:22 +0530
Subject: [PATCH 3/4] Revert-lint-change

Signed-off-by: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
---
 src/sections/Home/Playground-home/index.js | 208 +++++++++++++--------
 1 file changed, 131 insertions(+), 77 deletions(-)

diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index 8a4ff2125430..cc438b3011cf 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -19,45 +19,51 @@ import kiali from "../../../collections/integrations/kiali-operator/icons/color/
 import knative from "../../../collections/integrations/knative/icons/color/knative-color.svg";
 import dapr from "../../../collections/integrations/dapr/icons/color/dapr-color.svg";
 import fabedge from "../../../collections/integrations/fabedge/icons/color/fabedge-color.svg";
-import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
+import amdgpu from "../../../collections/integrations/amd-gpu/icons/color/amd-gpu-color.svg";
 import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
 import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
 import terraform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
 import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";
 
-
 const ViewsSectionWrapper = styled.div`
+
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .views-section {
-      position: relative;
+    .small-card-container {
       display: flex;
-      flex-direction: row;
-      background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
-      margin: 3%;
-      border-radius: 1rem;
-      max-width: 1920px;
-      width: 90vw;
-      height: 500px; 
-      justify-content: space-evenly;
-      align-items: center;
-      padding: 0 5% 0 0;
-      box-sizing: border-box;
-      overflow: hidden;
-      
-      @media only screen and (max-width: 767px) {
-        text-align: center;
-        flex-direction: column-reverse;
-      }
+      gap: 1rem;
     }
 
+    .views-section {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
+    margin: 3%;
+    border-radius: 1rem;
+    max-width: 1920px;
+    width: 90vw;
+    height: 500px;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 0 5% 0 0;
+    box-sizing: border-box;
+    //box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    overflow: hidden;
+
+    @media only screen and (max-width: 767px) {
+      text-align: center;
+      flex-direction: column-reverse;
+    }
+}
     .hero-text {
         display: flex;
         flex-direction: column;
-        flex: 0 0 50%; 
-        max-width: 50%; 
+        flex: 0 0 50%;
+        max-width: 50%;
         padding-bottom: 3rem;
         @media only screen and (max-width: 767px) {
           max-width: 100%;
@@ -70,69 +76,118 @@ const ViewsSectionWrapper = styled.div`
         position: relative;
         display: flex;
         justify-content: center;
-        flex: 0 0 50%; 
-        max-width: 50%; 
+        flex: 0 0 50%;
+        max-width: 50%;
         overflow: hidden;
-        height: 100%; 
-        
+        height: 100%;
+
         @media only screen and (max-width: 767px) {
           max-width: 100%;
         }
     }
 
-    .small-card-container {
+    h2 {
+      /* max-width: 90%; */
+      padding-bottom: 2%;
+    }
+  }
+
+  h4 {
+      max-width: 90%;
+      @media only screen and (max-width: 767px) {
+        max-width: 100%;
+        }
+  }
+
+   .hero-image {
+        position: relative;
         display: flex;
-        gap: 1rem; 
+        justify-content: center;
+        flex: 0 0 50%;
+        max-width: 50%;
+
+        
+
+        svg {
+          align-items: center;
+          justify-content: center;
+          width: 70%;
+          .visualizer-views-colorMode_svg__colorMode1 {
+            fill: ${(props) => props.theme.whiteToGrey737373};
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+          }
+        }
+
+      
+        .visible {
+                opacity: 1;
+                transition: all 0.2s ease-in;
+        }
+
+        .not-visible {
+                opacity: 0;
+                transition: all 0.5s ease;
+        }
+
+        @media only screen and (max-width: 767px) {
+          max-width: 100%;
+        }
+
     }
 
-    .container {
-      display: flex;
-      justify-content: center;
-      gap: 1rem; 
-      height: 100%; 
+    .overlay {
+        width: 483px;
+        height: 680px;
     }
 
+
+    .container {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem; 
+        height: 100%; 
+      }
+
     .line {
-      position: relative;
-      height: 100%; 
-      overflow: hidden;
-      width: 200px; 
+        position: relative;
+        height: 100%;
+        overflow: hidden;
+        width: 200px;
     }
 
     .scroll-track {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
     .scroll-down .scroll-track {
-      animation: scrollDown 25s linear infinite;
+        animation: scrollDown 35s linear infinite;
     }
 
     .scroll-up .scroll-track {
-      animation: scrollUp 25s linear infinite;
+        animation: scrollUp 35s linear infinite;
     }
 
     @keyframes scrollDown {
-      0% {
-        transform: translateY(-50%);
-      }
-      100% {
-        transform: translateY(0%);
-      }
+        0% {
+            transform: translateY(-50%);
+        }
+        100% {
+            transform: translateY(0%);
+        }
     }
 
     @keyframes scrollUp {
-      0% {
-        transform: translateY(0%);
-      }
-      100% {
-        transform: translateY(-50%);
-      }
+        0% {
+            transform: translateY(0%);
+        }
+        100% {
+            transform: translateY(-50%);
+        }
     }
 
     .box {
@@ -140,25 +195,25 @@ const ViewsSectionWrapper = styled.div`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 100%; 
-      height: 150px; 
-      padding: 2rem; 
+      width: 100%;
+      height:150px;
+      padding: 2rem;
       box-sizing: border-box;
       background-color: ${(props) => props.theme.backgroundColor}; 
+      margin-bottom: 1rem; 
       border-radius: 1rem;
-      transition: transform 0.2s ease;
-
-      &:hover {
-        transform: scale(1.02);
-      }
+      //box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive};
     }
+    // .box:hover {
+    //   box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
+    // }
 
     .box .boxImg {
       width: auto;
-      height: 60px; 
+      height: 60px;
       max-width: 100%;
     }
-
+    
     .box .boxText {
       margin-top: 1rem;
       text-align: center;
@@ -172,9 +227,13 @@ const ViewsSectionWrapper = styled.div`
         padding: 2rem 2rem 0 2rem;
         height: auto;
       }
+      .small-card-container {
+        display: flex;
+        justify-content: center;
+      }
     }
-`;
 
+`;
 
 const KanvasVisualizerViews = () => {
   const [imageRef] = useInView({ threshold: 0.3 });
@@ -189,9 +248,8 @@ const KanvasVisualizerViews = () => {
     { img: docker, name: "Docker" },
     { img: envoy, name: "Envoy" },
     { img: karmada, name: "Karmada" },
-    { img: helm, name: "Helm" },
+    { img: amdgpu, name: "AMD GPU" },
     { img: fluentd, name: "Fluentd" }
-
   ];
 
   const rightColumnItems = [
@@ -206,27 +264,23 @@ const KanvasVisualizerViews = () => {
     { img: fabedge, name: "FabEdge" },
     { img: kubeflow, name: "Kubeflow" },
     { img: terraform, name: "Terraform" }
-
   ];
 
   const renderColumn = (items, direction) => (
     <div className={`line scroll-${direction}`}>
       <div className="scroll-track">
-        {/* Original set */}
         {items.map((item, index) => (
           <div className="box" key={`set1-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
             <div className="boxText">{item.name}</div>
           </div>
         ))}
-        {/* First duplicate set */}
         {items.map((item, index) => (
           <div className="box" key={`set2-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
             <div className="boxText">{item.name}</div>
           </div>
         ))}
-        {/* Second duplicate set for seamless loop */}
         {items.map((item, index) => (
           <div className="box" key={`set3-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
@@ -253,7 +307,7 @@ const KanvasVisualizerViews = () => {
           <p>
             Employ a set of learning paths that incorporate an application
             networking centric curriculum featuring training on 200+
-            integrations.
+            integrations.           
           </p>
           <Button
             $primary

From c623ebfbf0ac6f2e5d7c44972a88996194075052 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
Date: Sat, 26 Oct 2024 00:51:51 +0530
Subject: [PATCH 4/4] fix checks failing

Signed-off-by: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
---
 src/sections/Home/Playground-home/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index cc438b3011cf..87a6c545d36c 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -307,7 +307,7 @@ const KanvasVisualizerViews = () => {
           <p>
             Employ a set of learning paths that incorporate an application
             networking centric curriculum featuring training on 200+
-            integrations.           
+            integrations.
           </p>
           <Button
             $primary