Merge pull request #4396 from Udit-takkar/feat/snapshot-page

feat: Snapshot page and Performance management page

src/pages/cloud-native-management/gitops/performance-management.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+import SEO from "../../../components/seo";
+import PerformanceManagementPage from "../../../sections/gitops/PerformanceManagementPage";
+
+export default PerformanceManagementPage;
+
+export const Head = () => {
+  // TODO Change this
+  return  <SEO title="GitOps with Meshery"
+    description="GitOps, lifecycle, performance, and configuration management for cloud native infrastructure as code. Manage your Kubernetes clusters visually. Use the catalog of patterns and best practices."
+    image="/images/meshery-logo-dark-text.png" />;
+};

src/pages/cloud-native-management/gitops/snapshot.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+import SEO from "../../../components/seo";
+import SnapshotPage from "../../../sections/gitops/SnapshotPage";
+
+export default SnapshotPage;
+
+export const Head = () => {
+  return  <SEO title="Visual insights for any Kubernetes environment in every pull request"
+    description="Layer5 creates a visual map of your infrastructure that stays up to date with every PR. Visualize your whole environment, see generated insights, and share a single, accurate source of truth to help quickly onboard new contributors. Layer5 MeshMap uses GitHub to generate dependencies between files and update your map to reflect changes in your codebase. We do not store your code, your code is only stored by GitHub. We analyze your code while it's on GitHub's servers using a GitHub Action."
+    image="/images/meshery-logo-dark-text.png" />;
+};

src/sections/gitops/PerformanceManagementPage.js

@@ -0,0 +1,109 @@
+import React from "react";
+import { PageWrapper,ContentContainerWrapper,HeroContentContainerWrapper, Heading, Description } from "./snapshot.style";
+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 Button from "../../reusecore/Button";
+import SquarePoint from "./SquarePoint";
+import Reviews from "../Pricing/review-slider";
+import ServicePerformanceProfileTest from "../../assets/images/gitops/service-mesh-performance-profile.png";
+import { ColumnContainer, ContentRow, TextColumn } from "./common";
+import { ReactComponent as SmpLogo }  from "../../assets/images/service-mesh-performance/stacked/smp-light-text.svg";
+import { ReactComponent as GithubLogo } from "../../collections/integrations/github/icon/color/github-color.svg";
+
+const PerformanceManagementPage = () => {
+  return (
+    <PageWrapper>
+
+      <div className="gradient-wrapper" />
+      <div className="gradient-wrapper-2" />
+
+      <HeroContentContainerWrapper>
+        <ContentRow>
+          <TextColumn>
+            <Heading>Performance regressions begone</Heading>
+            <Description>
+               Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification
+            </Description>
+            <Button primary className="learn-more-btn" title="Go to Documentation" url="https://cloud.layer5.io/connect/github/new"/>
+          </TextColumn>
+          <ColumnContainer>
+            <SmpLogo className="stack-logo" />
+            <img src={Cone} className="meshmap-stack-cone" />
+          </ColumnContainer>
+        </ContentRow>
+      </HeroContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <ColumnContainer >
+            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} />
+          </ColumnContainer>
+          <ColumnContainer>
+            <Heading>A sample configuration of the action</Heading>
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <ColumnContainer>
+            <GithubLogo className="stack-logo" />
+            <img src={Cone} className="meshmap-stack-cone" />
+          </ColumnContainer>
+
+          <TextColumn>
+            <Heading>Using Meshery's Service Mesh Performance GitHub Action</Heading>
+            <SquarePoint>The Service Mesh Performance GitHub Action is available in the GitHub Marketplace.</SquarePoint>
+            <SquarePoint>You can create your own performance profiles to run repeatable tests with Meshery.</SquarePoint>
+            <SquarePoint>You can configure this action to trigger with each of your releases, on every pull request.</SquarePoint>
+          </TextColumn>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <TextColumn>
+            <Heading>A sample configuration <br/> of the action</Heading>
+          </TextColumn>
+          <ColumnContainer >
+            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} />
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <ColumnContainer >
+            <img src={SMPTestconfig} className="code-screenshot" alt="SMPTestconfig" width={605} height={740} />
+          </ColumnContainer>
+          <TextColumn>
+            <Heading>Define your test <br /> configuration in an SMP compatible configuration file</Heading>
+          </TextColumn>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <TextColumn>
+            <Heading>See this sample GitHub workflow (action.yml) for more configuration details.</Heading>
+          </TextColumn>
+          <ColumnContainer >
+            <img src={ServicePerformanceProfileTest} className="screenshot" alt="ServicePerformanceProfileTest" width={530} height={375} />
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+
+      <div className="reviews-container" >
+        <Reviews/>
+      </div>
+
+    </PageWrapper>
+  );
+};
+
+export default PerformanceManagementPage;
+

src/sections/gitops/SnapshotPage.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { PageWrapper,ContentContainerWrapper,HeroContentContainerWrapper, Heading, Description } from "./snapshot.style";
+import { ReactComponent as MeshMapStack } from "../../assets/images/meshmap/meshmap-light-stacked.svg";
+import Cone from "../../assets/images/gitops/conelight.svg";
+import GithubActionComment from "../../assets/images/gitops/GithubActionComment.png";
+import Button from "../../reusecore/Button";
+import SquarePoint from "./SquarePoint";
+import Reviews from "../Pricing/review-slider";
+import ServicePerformanceProfileTest from "../../assets/images/gitops/service-mesh-performance-profile.png";
+import { ColumnContainer, ContentRow, TextColumn } from "./common";
+
+
+const SnapshotPage = () => {
+  return (
+    <PageWrapper>
+      <div className="gradient-wrapper" />
+      <div className="gradient-wrapper-2" />
+
+      <HeroContentContainerWrapper>
+        <ContentRow>
+          <TextColumn>
+            <Heading>Visual insights in every pull request</Heading>
+            <Description>
+               Test your Kubernetes cluster and service mesh implementation for conformance with the SMI specification
+            </Description>
+            <Button primary className="learn-more-btn" title="INSTALL" url="https://cloud.layer5.io/connect/github/new"/>
+          </TextColumn>
+          <ColumnContainer>
+            <MeshMapStack className="stack-logo" />
+            <img src={Cone} className="meshmap-stack-cone" />
+          </ColumnContainer>
+        </ContentRow>
+      </HeroContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <ColumnContainer >
+            <img src={GithubActionComment} className="screenshot" alt="GithubActionComment" width={530} height={375} />
+          </ColumnContainer>
+          <ColumnContainer>
+            <Heading>See your deployment <br/> before you merge.</Heading>
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <TextColumn >
+            <Heading>Using Meshery's Snapshot GitHub Action</Heading>
+            <SquarePoint>MeshMap Snapshot GitHub Action is available in the GitHub Marketplace.</SquarePoint>
+            <SquarePoint>Connect MeshMap to your GitHub repo and see changes pull request-to-pull request.</SquarePoint>
+            <SquarePoint>You can configure this action to trigger with each of your releases, on every pull request.</SquarePoint>
+          </TextColumn>
+
+          <ColumnContainer>
+            <MeshMapStack className="stack-logo" />
+            <img src={Cone} className="meshmap-stack-cone" />
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+
+      <ContentContainerWrapper>
+        <ContentRow>
+          <TextColumn>
+            <Heading>See this sample GitHub workflow (action.yml) for more configuration details.</Heading>
+          </TextColumn>
+          <ColumnContainer >
+            <img src={ServicePerformanceProfileTest} className="screenshot" alt="ServicePerformanceProfileTest" width={530} height={375} />
+          </ColumnContainer>
+        </ContentRow>
+      </ContentContainerWrapper>
+
+
+      <div className="reviews-container" >
+        <Reviews/>
+      </div>
+
+    </PageWrapper>
+  );
+};
+
+export default SnapshotPage;
+

src/sections/gitops/SquarePoint.js

@@ -0,0 +1,12 @@
+import React from "react";
+import {  SquarePointWrapper } from "./gitops.style.js";
+
+
+const SquarePoint = ({ children }) => {
+  return <SquarePointWrapper>
+    <div className="square-box" />
+    <p className="content">{children}</p>
+  </SquarePointWrapper>;
+};
+
+export default SquarePoint;

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 (
+    <ColumnWrapper lg={5} md={6}>
+      {children}
+    </ColumnWrapper>
+  );
+};
+
+
+export const ContentRow = ({ children }) => {
+
+  return (
+    <ContentRowWrapper>
+      {children}
+    </ContentRowWrapper>
+  );
+};
+
+export const TextColumn = ({ children }) => {
+  return (
+    <Col className="desc-text-container" lg={7} md={6} sm={10} xs={12}>
+      {children}
+    </Col>
+  );
+};

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};
       }
     }
 
@@ -75,9 +75,18 @@ export const GitOpsWrapper = styled.section`
                     }
                 }
                 .learn-more-btn{
-                    color:white;
-                    font-weight: 800;
+                    font-weight: 400;
                     font-size: 1.5em;
+                    width: 100%;
+                }
+                .buttons-container{
+                  display: flex;
+                  gap: 1rem;
+                  flex-direction: column;
+
+                  @media only screen and (min-width: 425px) {
+                    flex-direction: row;
+                  }
                 }
             }
             .hero-images {
@@ -168,10 +177,6 @@ export const GitOpsWrapper = styled.section`
 
     .first-content-container {
        padding-top: 0rem;
-
-       @media only screen and (min-width: 360px) {
-          padding-top: 5rem;
-       }
     }
 
     .reviews-container{

src/sections/gitops/index.js

@@ -3,20 +3,14 @@ import { Row, Col } from "../../reusecore/Layout";
 import Button from "../../reusecore/Button";
 import { ThemeManagerContext } from "../../theme/app/ThemeManager";
 import Cone from "../../assets/images/gitops/conelight.svg";
-import { GitOpsWrapper, SquarePointWrapper } from "./gitops.style.js";
+import { GitOpsWrapper } from "./gitops.style.js";
 import SmpLogo_dark from "../../assets/images/app/projects/smp.svg";
 import SmpLogo_light from "../../assets/images/service-mesh-performance/icon/smp-light.svg";
 import Reviews from "../Pricing/review-slider";
 import { ReactComponent as MeshMapStack } from "../../assets/images/meshmap/meshmap-light-stacked.svg";
+import SquarePoint from "./SquarePoint";
 
 
-const SquarePoint = ({ children }) => {
-  return <SquarePointWrapper>
-    <div className="square-box" />
-    <p className="content">{children}</p>
-  </SquarePointWrapper>;
-};
-
 
 const GitOpsPage = () => {
   const { isDark } = useContext(ThemeManagerContext);
@@ -51,8 +45,9 @@ const GitOpsPage = () => {
             <SquarePoint>See your deployment before you merge</SquarePoint>
             <SquarePoint>Connect MeshMap to your GitHub repo and see changes pull request-to-pull request</SquarePoint>
             <SquarePoint>Get snapshots of your infrastructure directly in your PRs</SquarePoint>
-            <div style={{ display: "flex", justifyContent: "center" }}>
+            <div className="buttons-container">
               <Button primary className="learn-more-btn" title="Install" url="https://meshery.layer5.io/connect/github/new"/>
+              <Button secondary className="learn-more-btn" title="Learn More" url="/cloud-native-management/gitops/snapshot"/>
             </div>
           </Col>
           <Col className="hero-image" lg={6} md={6} xs={12} sm={10} >