From cfcb2bc39a51873dc521d5783bb93782abd068d2 Mon Sep 17 00:00:00 2001
From: Mdkaif-123 <amdkaif843@gmail.com>
Date: Wed, 6 Nov 2024 02:40:39 +0530
Subject: [PATCH] chore: fix component not used warning

Signed-off-by: Mdkaif-123 <amdkaif843@gmail.com>
---
 .../kanvas-visualize-banner.js                | 135 +++++++++---------
 1 file changed, 67 insertions(+), 68 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
index 2d9f0db74702..dcfafdb31196 100644
--- a/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
+++ b/src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-banner.js
@@ -1,86 +1,82 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "../../../reusecore/Button";
 import KanvasBtn from "../kanvas-buttons";
 
 const VisualizeBannerWrapper = styled.div`
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .banner {
+    margin: 3%;
+    position: relative;
+    z-index: 10;
     display: flex;
+    flex-direction: column;
+    background-color: ${(props) => props.theme.grey121212EightToWhiteEight};
+    border-radius: 2rem;
+    max-width: 1920px;
+    width: 90vw;
+    max-height: 50rem;
     align-items: center;
-    justify-content: center;
-    .banner {
-        margin: 3%;
-        position: relative;
-        z-index: 10;
-        display: flex;
-        flex-direction: column;
-        background-color: ${props => props.theme.grey121212EightToWhiteEight};
-        border-radius: 2rem;
-        max-width: 1920px;
-        width: 90vw;
-        max-height: 50rem;
-        align-items: center;
-        padding: 4% 5% 6%;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-
+    padding: 4% 5% 6%;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 
-    .banner-text {
-        color: ${props => props.theme.primaryColor};
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        align-items: center;
-        z-index: 1;
-        padding: 3% 0%;
-        opacity: 1;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
+  .banner-text {
+    color: ${(props) => props.theme.primaryColor};
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    z-index: 1;
+    padding: 3% 0%;
+    opacity: 1;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 
-    h1 {
-        /* font-size: 4rem; */
-        /* color: ${props => props.theme.primaryColor}; */
-        position: relative;
-        display: inline-block;
-        @media only screen and (min-width: 1400px) {
-            font-size: 3.75rem;
-        }
+  h1 {
+    /* font-size: 4rem; */
+    /* color: ${(props) => props.theme.primaryColor}; */
+    position: relative;
+    display: inline-block;
+    @media only screen and (min-width: 1400px) {
+      font-size: 3.75rem;
     }
+  }
 
-    h4 {
-        padding: 3% 0% 5%;
-        color: #A0AAAA;
-
-        span {
-          color: ${props => props.theme.primaryColor};
-          transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-        }
-
-        @media only screen and (max-width: 500px) {
-            font-size: 1.1rem;
-        }
+  h4 {
+    padding: 3% 0% 5%;
+    color: #a0aaaa;
 
+    span {
+      color: ${(props) => props.theme.primaryColor};
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
 
-    h5 {
-        padding: 2rem 0;
+    @media only screen and (max-width: 500px) {
+      font-size: 1.1rem;
     }
+  }
 
-    p {
-        padding-top: 2rem;
-    }
+  h5 {
+    padding: 2rem 0;
+  }
 
-    .banner-image {
-      padding: 5%;
-    }
-    img {
-        position: relative;
-        z-index: 0;
-        opacity: 0.4;
-        filter: blur(1px);
-        box-shadow: ${props => props.theme.boxShadowGreen00D3A9};
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
+  p {
+    padding-top: 2rem;
+  }
+
+  .banner-image {
+    padding: 5%;
+  }
+  img {
+    position: relative;
+    z-index: 0;
+    opacity: 0.4;
+    filter: blur(1px);
+    box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
 `;
 
 const KanvasisualizeBanner = () => {
@@ -92,7 +88,10 @@ const KanvasisualizeBanner = () => {
       <div className="banner">
         <div className="banner-text">
           <h1>Visualize your infrastructure </h1>
-          <h4>See your designs <span>in action.</span> Operate with <span>best practices.</span></h4>
+          <h4>
+            See your designs <span>in action.</span> Operate with{" "}
+            <span>best practices.</span>
+          </h4>
           <KanvasBtn title="Explore Kanvasisualizer" />
         </div>
         {/* <div className="banner-image">
@@ -103,4 +102,4 @@ const KanvasisualizeBanner = () => {
   );
 };
 
-export default KanvasisualizeBanner;
\ No newline at end of file
+export default KanvasisualizeBanner;