From cfaa74fcf8da22920e5e452579a5d4e69562a29e Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Sun, 18 Jun 2023 15:09:15 +0530 Subject: [PATCH 01/13] feat: WIP Signed-off-by: Udit Takkar --- .../gitops/snapshot.js | 19 ++++ src/sections/gitops/SnapshotPage.js | 62 ++++++++++++ src/sections/gitops/snapshot.style.js | 99 +++++++++++++++++++ 3 files changed, 180 insertions(+) create mode 100644 src/pages/cloud-native-management/gitops/snapshot.js create mode 100644 src/sections/gitops/SnapshotPage.js create mode 100644 src/sections/gitops/snapshot.style.js diff --git a/src/pages/cloud-native-management/gitops/snapshot.js b/src/pages/cloud-native-management/gitops/snapshot.js new file mode 100644 index 0000000000000..ea743e945f456 --- /dev/null +++ b/src/pages/cloud-native-management/gitops/snapshot.js @@ -0,0 +1,19 @@ +import React from "react"; + +import SEO from "../../../components/seo"; +import SnapshotPage from "../../../sections/gitops/SnapshotPage"; + +const Meshery = () => { + return ( + <> + + + ); +}; +export default Meshery; +export const Head = () => { + // TODO Change this + return ; +}; \ No newline at end of file diff --git a/src/sections/gitops/SnapshotPage.js b/src/sections/gitops/SnapshotPage.js new file mode 100644 index 0000000000000..6ccf264aaefcb --- /dev/null +++ b/src/sections/gitops/SnapshotPage.js @@ -0,0 +1,62 @@ +import React from "react"; +import { SnapshotWrapper,ContentContainerWrapper,HeroContentContainerWrapper,ContentRowWrapper, Heading, Description, HeroImageWrapper } from "./snapshot.style"; +import { Row, Col } from "../../reusecore/Layout"; +import { ReactComponent as MeshMapStack } from "../../assets/images/meshmap/meshmap-light-stacked.svg"; +import Cone from "../../assets/images/gitops/conelight.svg"; +import Button from "../../reusecore/Button"; + +const SnapshotPage = () => { + return ( + +
+ + + + Visual insights in every pull request + + Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification + +
- + ); }; export default SnapshotPage; -const ColumnContainer = ({ children }) => { - - return ( - - {children} - - ); -}; - - -const ContentRow = ({ children }) => { - - return ( - - {children} - - ); -}; - -const TextColumn = ({ children }) => { - return ( - - {children} - - ); -}; diff --git a/src/sections/gitops/common.js b/src/sections/gitops/common.js new file mode 100644 index 0000000000000..7da545672ab0d --- /dev/null +++ b/src/sections/gitops/common.js @@ -0,0 +1,31 @@ + +import React from "react"; +import { ContentRowWrapper, ColumnWrapper } from "./snapshot.style"; +import { Col } from "../../reusecore/Layout"; + +export const ColumnContainer = ({ children }) => { + + return ( + + {children} + + ); +}; + + +export const ContentRow = ({ children }) => { + + return ( + + {children} + + ); +}; + +export const TextColumn = ({ children }) => { + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/sections/gitops/gitops.style.js b/src/sections/gitops/gitops.style.js index eca2ecbdf3a85..9cdaaf68bddc2 100644 --- a/src/sections/gitops/gitops.style.js +++ b/src/sections/gitops/gitops.style.js @@ -23,7 +23,7 @@ export const GitOpsWrapper = styled.section` svg { .meshmap-light-stacked_svg__cls-1 { transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - fill: ${props => props.theme.whiteToBlack}; + fill: ${props => props.theme.primaryColor}; } } diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index d2f59a7b12cb0..fb3d36dbc4f27 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -2,7 +2,7 @@ import styled from "styled-components"; import { Row, Col } from "../../reusecore/Layout"; -export const SnapshotWrapper = styled.section` +export const PageWrapper = styled.section` position: relative; z-index: 1; font-size: 12px; @@ -62,6 +62,7 @@ export const ContentRowWrapper = styled(Row)` align-items: center; justify-content: space-between; + .desc-text-container { padding: 1.5rem; @@ -96,11 +97,16 @@ export const ColumnWrapper = styled(Col)` justify-content: center; position: relative; - - .meshmap-stack-hero { + .stack-logo { position: absolute; height: 150px; animation: "floating 3s ease-in-out infinite"; + fill: ${props => props.theme.primaryColor}; + + .meshmap-light-stacked_svg__cls-1, .smp-light-text_svg__cls-6 { + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + fill: ${props => props.theme.primaryColor}; + } @media screen and (min-width: 768px) { height: 200px; @@ -124,5 +130,14 @@ export const ColumnWrapper = styled(Col)` } } + + .code-screenshot { + height:300px; + + @media screen and (min-width: 768px) { + width: 605px; + height: 700px; + } + } `; From f2577996bb1104336c2bf0f9347e4c311d1baff6 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Mon, 17 Jul 2023 17:04:55 +0530 Subject: [PATCH 04/13] fix: animation and responsiveness Signed-off-by: Udit Takkar --- .../gitops/PerformanceManagementPage.js | 11 ++--- src/sections/gitops/SnapshotPage.js | 2 + src/sections/gitops/snapshot.style.js | 42 ++++++++++++++++--- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js index d671fcfdb5cc1..82a31e96e4799 100644 --- a/src/sections/gitops/PerformanceManagementPage.js +++ b/src/sections/gitops/PerformanceManagementPage.js @@ -16,7 +16,10 @@ import { ReactComponent as GithubLogo } from "../../collections/integrations/git const PerformanceManagementPage = () => { return ( +
+
+ @@ -44,8 +47,6 @@ const PerformanceManagementPage = () => { - - @@ -62,7 +63,6 @@ const PerformanceManagementPage = () => { - @@ -74,8 +74,6 @@ const PerformanceManagementPage = () => { - - @@ -87,9 +85,6 @@ const PerformanceManagementPage = () => { - - - diff --git a/src/sections/gitops/SnapshotPage.js b/src/sections/gitops/SnapshotPage.js index d48e13ba0850b..8f9703dfa2a10 100644 --- a/src/sections/gitops/SnapshotPage.js +++ b/src/sections/gitops/SnapshotPage.js @@ -14,6 +14,8 @@ const SnapshotPage = () => { return (
+
+ diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index fb3d36dbc4f27..559676253d06c 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -1,7 +1,13 @@ -import styled from "styled-components"; +import styled,{ keyframes } from "styled-components"; import { Row, Col } from "../../reusecore/Layout"; +const floatAnim = keyframes` + 0% { transform: translate(0px,0px); } + 50% { transform: translate(0px,15px); } + 100% { transform: translate(0px,0px); } +`; + export const PageWrapper = styled.section` position: relative; z-index: 1; @@ -18,7 +24,25 @@ export const PageWrapper = styled.section` } @media only screen and (min-width: 1024px) { - height: 78rem; + height: 50rem; + } + } + + .gradient-wrapper-2 { + background: linear-gradient(300deg, rgba(0, 0, 0, 0.00) 53.06%, rgba(0, 211, 169, 0.50) 100.00%); + width: 100%; + height: 50rem; + position: absolute; + top: 50rem; + + @media only screen and (min-width: 768px) { + height: 25rem; + top: 65rem; + } + + @media only screen and (min-width: 1024px) { + height: 30rem; + top: 50rem; } } @@ -77,7 +101,15 @@ export const ContentRowWrapper = styled(Row)` export const Heading = styled.h1` font-weight: 600; - font-size: 3.125em; + font-size: 3em; + + @media only screen and (min-width: 768px) { + font-size: 2.5em; + } + + @media only screen and (min-width: 1024px) { + font-size: 3.125em; + } `; @@ -99,9 +131,9 @@ export const ColumnWrapper = styled(Col)` .stack-logo { position: absolute; - height: 150px; - animation: "floating 3s ease-in-out infinite"; + height: 120px; fill: ${props => props.theme.primaryColor}; + animation: ${floatAnim} 3.5s ease-in-out infinite; .meshmap-light-stacked_svg__cls-1, .smp-light-text_svg__cls-6 { transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); From b8b437cbd3fe465e984405e4b2c6509d91c05f23 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Mon, 17 Jul 2023 17:12:27 +0530 Subject: [PATCH 05/13] fix: gradient design Signed-off-by: Udit Takkar --- src/sections/gitops/snapshot.style.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index 559676253d06c..8504fc8d4bcef 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -18,6 +18,7 @@ export const PageWrapper = styled.section` width: 100%; height: 50rem; position: absolute; + filter: blur(100px); @media only screen and (min-width: 768px) { height: 65rem; @@ -29,11 +30,12 @@ export const PageWrapper = styled.section` } .gradient-wrapper-2 { - background: linear-gradient(300deg, rgba(0, 0, 0, 0.00) 53.06%, rgba(0, 211, 169, 0.50) 100.00%); + background: linear-gradient(300deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.50) 100.00%); + filter: blur(100px); width: 100%; height: 50rem; position: absolute; - top: 50rem; + top: 50rem; @media only screen and (min-width: 768px) { height: 25rem; From 08882cb89668efee81b8e40778e8c7810bac61a6 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Mon, 17 Jul 2023 18:30:34 +0530 Subject: [PATCH 06/13] fix: build issue Signed-off-by: Udit Takkar --- src/sections/gitops/PerformanceManagementPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js index 82a31e96e4799..84541fbce88d1 100644 --- a/src/sections/gitops/PerformanceManagementPage.js +++ b/src/sections/gitops/PerformanceManagementPage.js @@ -3,7 +3,7 @@ import { PageWrapper,ContentContainerWrapper,HeroContentContainerWrapper, Headin import { ReactComponent as MeshMapStack } from "../../assets/images/meshmap/meshmap-light-stacked.svg"; import Cone from "../../assets/images/gitops/conelight.svg"; import SMPconfig from "../../assets/images/gitops/SMPconfig.png"; -import SMPTestconfig from "../../assets/images/gitops/SMPTestconfig.png"; +import SMPTestconfig from "../../assets/images/gitops/SMPTestConfig.png"; import Button from "../../reusecore/Button"; import SquarePoint from "./SquarePoint"; @@ -77,7 +77,7 @@ const PerformanceManagementPage = () => { - SMPconfig + SMPTestconfig Define your test
configuration in an SMP compatible configuration file From af53542c2f3c85adb4c78478d0451030a20cfb39 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Mon, 17 Jul 2023 18:43:19 +0530 Subject: [PATCH 07/13] fix: button Signed-off-by: Udit Takkar --- src/sections/gitops/snapshot.style.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index 8504fc8d4bcef..9fd29d6b4e9cc 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -91,12 +91,16 @@ export const ContentRowWrapper = styled(Row)` .desc-text-container { padding: 1.5rem; - - .learn-more-btn{ + .learn-more-btn{ color:white; font-weight: 800; font-size: 1.5em; - } + width: 100%; + + @media only screen and (min-width: 420px) { + width: auto; + } + } } `; From 3069f48add50177037e47e07acb064d5cbee43c3 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Sun, 23 Jul 2023 20:01:26 +0530 Subject: [PATCH 08/13] fix: font weight Signed-off-by: Udit Takkar --- src/sections/gitops/SnapshotPage.js | 2 +- src/sections/gitops/snapshot.style.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sections/gitops/SnapshotPage.js b/src/sections/gitops/SnapshotPage.js index 8f9703dfa2a10..cc079b9aa2f16 100644 --- a/src/sections/gitops/SnapshotPage.js +++ b/src/sections/gitops/SnapshotPage.js @@ -23,7 +23,7 @@ const SnapshotPage = () => { Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification -
diff --git a/src/sections/gitops/snapshot.style.js b/src/sections/gitops/snapshot.style.js index e5d5e07051472..6d627da9ec7fe 100644 --- a/src/sections/gitops/snapshot.style.js +++ b/src/sections/gitops/snapshot.style.js @@ -92,10 +92,10 @@ export const ContentRowWrapper = styled(Row)` .desc-text-container { padding: 1.5rem; .learn-more-btn{ - color:white; - font-weight: 700; + font-weight: 400; font-size: 1.375em; width: 100%; + text-transform: capitalize; @media only screen and (min-width: 420px) { width: auto; From fdfb772df3d398e51fbba194f81f523b659ac73d Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Sun, 6 Aug 2023 13:55:22 +0530 Subject: [PATCH 13/13] chore: add title Signed-off-by: Udit Takkar --- .../gitops/performance-management.js | 10 ++-------- .../cloud-native-management/gitops/snapshot.js | 15 ++++----------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/pages/cloud-native-management/gitops/performance-management.js b/src/pages/cloud-native-management/gitops/performance-management.js index f96a27a03afa4..6cf25552f0410 100644 --- a/src/pages/cloud-native-management/gitops/performance-management.js +++ b/src/pages/cloud-native-management/gitops/performance-management.js @@ -3,14 +3,8 @@ import React from "react"; import SEO from "../../../components/seo"; import PerformanceManagementPage from "../../../sections/gitops/PerformanceManagementPage"; -const Page = () => { - return ( - <> - - - ); -}; -export default Page; +export default PerformanceManagementPage; + export const Head = () => { // TODO Change this return { - return ( - <> - - - ); -}; -export default Meshery; +export default SnapshotPage; + export const Head = () => { - // TODO Change this - return ; }; \ No newline at end of file