Merge pull request #7089 from saurabhraghuvanshii/revert-collab

Reverted CollaboratorFeatures.js

Author: Rajesh-Nagarajan-11

src/sections/Kanvas/FeaturesSection/Collaborate/CollaboratorFeatures.js

@@ -36,33 +36,35 @@ export default function CollaboratorFeatures({ features }) {
                 <img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
               </div>
             </div>
-            <div className="g-grid-container contentContainer" id="add-border">
+          </Link>
+          <div className="g-grid-container contentContainer" id="add-border">
+            <Link to="/cloud-native-management/kanvas/collaborate">
               <div className="diagram scroll hideInMobile">
                 <CollaboratorFeaturesDiagram activeExampleIndex={activeExampleIndex} />
               </div>
-              <ul className="features collaborator-features">
-                {features.map((feature, index) => (
-                  <li className="collaborator-feature-slide" key={index}>
-                    <Feature
-                      {...feature}
-                      onInViewStatusChanged={(state) => {
-                        const newStatusArray = [...viewportStatus];
-                        newStatusArray[index] = state;
-                        setViewportStatus(newStatusArray);
-                        // Calculate the first element in focus, set that as
-                        // our new activeExampleIndex. If it's been updated
-                        // notify the subscriber.
-                        const newExampleIndex = newStatusArray.lastIndexOf(true);
-                        if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
-                          setActiveExampleIndex(newExampleIndex);
-                        }
-                      }}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </Link>
+            </Link>
+            <ul className="features collaborator-features">
+              {features.map((feature, index) => (
+                <li className="collaborator-feature-slide" key={index}>
+                  <Feature
+                    {...feature}
+                    onInViewStatusChanged={(state) => {
+                      const newStatusArray = [...viewportStatus];
+                      newStatusArray[index] = state;
+                      setViewportStatus(newStatusArray);
+                      // Calculate the first element in focus, set that as
+                      // our new activeExampleIndex. If it's been updated
+                      // notify the subscriber.
+                      const newExampleIndex = newStatusArray.lastIndexOf(true);
+                      if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
+                        setActiveExampleIndex(newExampleIndex);
+                      }
+                    }}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </Container>
     </CollaboratorFeaturesWrapper>

src/sections/Kanvas/FeaturesSection/Collaborate/CollaboratorFeatures.style.js

@@ -149,17 +149,6 @@ const CollaboratorFeaturesWrapper = styled.section`
     }
   }
 
-  .collaborator-trigger-container {
-    &:hover {
-      .fixed {
-        background: #EBC017;
-      }
-      #add-border {
-        border-color: #EBC017;
-      }
-    }
-  }
-
   .fixed {
     top: 6rem;
     font-weight: 300;
@@ -172,14 +161,17 @@ const CollaboratorFeaturesWrapper = styled.section`
     @media (max-width: 912px) {
       top: 5rem;
     }
+    &:hover{
+      background: #00d3a9;
+    }
   }
 
   #add-border {
     border-color: #00b39f;
     border-style: solid;
     border-width: 0px 2px 2px 2px;
     box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
-    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
+    transition: ease-in-out;
   }
 
   .hideInMobile{