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 = () => {