Merge pull request #4353 from Udit-takkar/leecalcote/github-actions/g…

…itops

src/components/Call-To-Actions/CTA_FullWidth/index.js

@@ -94,7 +94,7 @@ const CTA_FullWidthWrapper = styled.div`
 `;
 
 const defaultHeading = "Layer5 Community";
-const defaultContent = "Join the Layer5 community and explore the world of service meshes!";
+const defaultContent = "Join the Layer5 community and explore the world of cloud native!";
 const defaultURL = "https://slack.layer5.io";
 
 const CTA_FullWidth = ({ alt, button_text, category, content, external_link, image, url, heading, ...props }) => {

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

@@ -0,0 +1,18 @@
+import React from "react";
+
+import SEO from "../../../components/seo";
+import GitOps from "../../../sections/gitops";
+
+const Meshery = () => {
+  return (
+    <>
+      <GitOps />
+    </>
+  );
+};
+export default Meshery;
+export const Head = () => {
+  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/meshery/index.js

@@ -7,13 +7,11 @@ const Meshery = () => {
   return (
     <>
       <MesheryPage />
-
     </>
   );
 };
 export default Meshery;
 export const Head = () => {
-  return  <SEO title="Meshery"
-    description="Lifecycle, performance, and configuration management for cloud native infrastructure as code. Manage your Kubernetes clusters visually. Use the catalog of patterns and best practices."
+  return <SEO title="Meshery" description="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.webp" />;
 };

src/pages/cloud-native-management/meshmap/collaborate.js

@@ -13,5 +13,5 @@ const MeshmapCollaboratePage = () => {
 };
 export default MeshmapCollaboratePage;
 export const Head = () => {
-  return <SEO title="MeshMap Collaboration" description="Build an iterative design flow with live collaboration that keeps you in the loop whether you are working in the office or remotely." />;
+  return <SEO title="Collaborative GitOps" description="Build an iterative design flow with live collaboration that keeps you in the loop whether you are working in the office or remotely." />;
 };

src/sections/gitops/gitops.style.js

@@ -0,0 +1,218 @@
+import styled from "styled-components";
+
+export const GitOpsWrapper = styled.section`
+    position: relative;
+    z-index: 1;
+    font-size: 16px;
+
+    @media only screen and (max-width: 768px) {
+        font-size: 12px;
+    }
+
+    .gradient-wrapper {
+        background: linear-gradient(245.08deg, rgba(0, 0, 0, 0.06) 49.26%, rgba(0, 211, 169, 0.5) 100%);
+        width: 100%;
+        height: 40rem;
+        position: absolute;
+
+        @media only screen and (min-width: 768px) {
+          height: 43.75rem;
+        }
+    }
+
+    svg {
+      .meshmap-light-stacked_svg__cls-1 {
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        fill: ${props => props.theme.whiteToBlack};
+      }
+    }
+
+    .content-container {
+        position: relative;
+        overflow: hidden;
+        display: block;
+        padding-bottom: 4rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+
+        @media only screen and (min-width: 1024px) {
+            padding-bottom: 13rem;
+            padding-left: 3.125rem;
+            padding-right: 3.125rem;
+        }
+
+        .meshery-video {
+            border-radius: 1rem;
+            width: 100%;
+          }
+        .meshery-img{
+            max-width: 45rem;
+            position: relative;
+            bottom: 2rem;
+            margin: auto;
+        }
+        .content-row {
+             display: flex;
+             align-items: center;
+             justify-content: space-between;
+
+            .desc-text-container {
+                padding: 1.56rem;
+                h1 {
+                    font-weight: 600;
+                }
+                .heading-1 {
+                    font-weight: 600;
+                    font-size: 3.125em;
+                }
+                .desc-p {
+                    font-size: 1.25em;
+                    font-weight: 400;
+                    margin: 0.5rem 0 0.5rem 0;
+
+                    @media screen and (min-width: 640px) {
+                      margin: 1.875rem 0 2.5rem 0;
+                    }
+                }
+                .learn-more-btn{
+                    color:white;
+                    font-weight: 800;
+                    font-size: 1.5em;
+                }
+            }
+            .hero-images {
+                padding-top: 0rem;
+                justify-content: flex-start;
+
+                display:flex;
+                gap: 1.25rem;
+
+                .hero-image-container {
+                   height: 250px;
+                   width: 300px;
+                   position: relative;
+                   display:flex;
+                   align-items: center;
+                   justify-content: center;
+
+                   .meshmap-stack-hero {
+                      position: absolute;
+                      height: 80px;
+                      animation: "floating 3s ease-in-out infinite";
+                   }
+
+                  @media only screen and (min-width: 768px) {
+                    height: 542px;
+                    width: 465px;
+
+                    .meshmap-stack-hero {
+                      height: 100px;
+                    }
+                  }
+
+                  @media only screen and (min-width: 1280px) {
+                    .meshmap-stack-hero {
+                      height: 150px;
+                    }
+                  }
+                }
+
+                @media only screen and (min-width: 768px) {
+                  padding: 5rem 2rem 6rem 2rem;
+                  justify-content: flex-end;
+                }
+
+            }
+            .hero-image {
+                   display:flex;
+                   align-items: flex-end;
+                   justify-content: flex-end;
+
+                .image-container{
+                   display:flex;
+                   align-items: center;
+                   justify-content: center;
+                   margin-left: auto;
+                   margin-right: auto;
+                   height: 250px;
+                   width: 300px;
+
+                   .cone-image{
+                      width: 100%;
+                      height: 100%;
+                   }
+
+                   .logo {
+                      position: absolute;
+                        height: 235px;
+                        width: 235px ;
+                   }
+
+                   @media only screen and (min-width: 768px) {
+                    height: 542px;
+                    width: 465px;
+                  }
+                }
+            }
+        }
+    }
+    .content-container-more-width{
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+
+        @media only screen and (min-width: 768px) {
+          padding-left: 6rem;
+          padding-right: 6rem;
+        }
+    }
+
+    .first-content-container {
+       padding-top: 0rem;
+
+       @media only screen and (min-width: 360px) {
+          padding-top: 5rem;
+       }
+    }
+
+    .reviews-container{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+`;
+
+
+export const SquarePointWrapper = styled.div`
+   display: flex;
+   margin: 1.875rem 0 2.25rem 0;
+   gap: 1rem;
+   align-items: start;
+
+    @media only screen and (max-width: 768px) {
+        margin: 1.5rem 0 1.5rem 0;
+        gap: 0.5rem;
+    }
+
+  .square-box {
+    min-height:1.25rem;
+    min-width:1.25rem;
+    height:1.25rem;
+    width:1.25rem;
+    background-color: #00D3A9;
+    margin-top:0.25rem;
+    border-radius:0.25rem;
+
+    @media only screen and (max-width: 768px) {
+        min-height:0.75rem;
+        min-width: 0.75rem;
+        height: 0.75rem;
+        width: 0.75rem;
+    }
+  }
+  .content{
+    font-size: 1.5em;
+    font-weight: 500;
+    line-height: 1.875rem;
+    margin-bottom:0;
+  }
+`;

src/sections/gitops/index.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { Row, Col } from "../../reusecore/Layout";
+import Button from "../../reusecore/Button";
+import Cone from "../../assets/images/gitops/conelight.svg";
+import MeshMap from "../../assets/images/meshmap/meshmap-color-icon.svg";
+import { GitOpsWrapper, SquarePointWrapper } from "./gitops.style.js";
+import SmpLogo from "../../assets/images/app/projects/smp.svg";
+import Reviews from "../Pricing/review-slider";
+import { ReactComponent as MeshMapStack } from "../../assets/images/meshmap/meshmap-light-stacked.svg";
+
+
+const SquarePoint = ({ children }) => {
+  return <SquarePointWrapper>
+    <div className="square-box" />
+    <p className="content">{children}</p>
+  </SquarePointWrapper>;
+};
+
+
+const GitOpsPage = () => {
+  return (
+    <GitOpsWrapper>
+      <div className="gradient-wrapper" />
+      <div className="content-container first-content-container">
+        <Row className="content-row">
+          <Col className="desc-text-container" lg={6} md={6} sm={10} xs={10}>
+            <h1 className="heading-1"> GitOps with Cloud <br/> Native Insights</h1>
+            <p className="desc-p">
+                Using SMP specs on your CI/CD pipelines with Meshery's GitHub Actions and MeshMap GitHub Action
+            </p>
+          </Col>
+          <Col lg={6} md={6} className="hero-images">
+            <div className="hero-image-container" >
+              <MeshMapStack className="meshmap-stack-hero" />
+              <img src={Cone} />
+            </div>
+            <div className="hero-image-container">
+              <img src={SmpLogo} style={{ position: "absolute", height: "235px", width: "235px" }} />
+              <img src={Cone} />
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+      <div className="content-container content-container-more-width">
+        <Row className="content-row">
+          <Col lg={6} md={6} className="desc-text-container">
+            <h1 className="heading-1">MeshMap GitHub Action</h1>
+            <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" }}>
+              <Button primary className="learn-more-btn" title="Install" url="https://cloud.layer5.io/connect/github/new"/>
+            </div>
+          </Col>
+          <Col className="hero-image" lg={6} md={6} xs={12} sm={10} >
+            <div className="image-container" >
+              <img src={SmpLogo} className="logo" />
+              <img src={Cone} className="cone-image" />
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+      <div className="content-container content-container-more-width">
+        <Row className="content-row">
+          <Col className="desc-text-container" lg={6} md={6} xs={12} sm={10} >
+            <h1 className="heading-1">Service Mesh Performance GitHub Action</h1>
+            <SquarePoint>Measuring and managing the performance of a service mesh is key to efficient operation of any service mesh</SquarePoint>
+            <SquarePoint>Meshery is the canonical implementation of the Service Mesh Performance specification</SquarePoint>
+            <SquarePoint>Choose from multiple load generators</SquarePoint>
+            <SquarePoint>Use a highly configurable set of load profiles with variable tunable facets to run a performance test</SquarePoint>
+          </Col>
+          <Col lg={6} md={6} className="hero-image" style={{ display: "flex", justifyContent: "flex-end" }} >
+            <div className="image-container" >
+              <MeshMapStack className="logo" />
+              <img src={Cone} className="cone-image" />
+            </div>
+          </Col>
+        </Row>
+      </div>
+
+      <div className="reviews-container" >
+        <Reviews/>
+      </div>
+
+    </GitOpsWrapper>
+  );
+};
+
+export default GitOpsPage;