Merge pull request #4170 from senali-d/senali-d/4150

[Create] Meshery Catalog page

src/pages/catalog.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import SEO from "../components/seo";
+import CatalogPage from "../sections/Cloud-Native-Catalog";
+
+const Catalog = () => {
+  return (
+    <>
+      <CatalogPage />
+    </>
+  );
+};
+export default Catalog;
+export const Head = () => {
+  return <SEO title="Cloud Native Catalog"
+    description="The Cloud Native Catalog, easily import any catalog item into Meshery."
+    image="/images/meshery-logo-dark-text.png" />;
+};

src/sections/Cloud-Native-Catalog/catalog.js

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import Wasm from "../../assets/images/webassembly/webssembly_icon.svg";
+import Patterns from "../../assets/images/service-mesh-patterns/service-mesh-pattern.svg";
+import Ebpf from "../../assets/images/meshmap/ebpf.svg";
+import Opa from "../../assets/images/meshmap/opa.svg";
+import CatalogsLight from "../../assets/images/catalog/catalog-light.svg";
+import CatalogsDark from "../../assets/images/catalog/catalog-dark.svg";
+import { Container, Row, Col } from "../../reusecore/Layout";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+
+const CatalogWrapper = styled.div`
+  min-height: fit-content;
+  border-width: 2px 2px 2px 2px;
+  background-color: ${(props) => props.theme.body};
+  padding-top: 100px;
+  padding-bottom: 100px;
+  @media (max-width: 468px) {
+    margin: 3rem 0;
+  }
+  @media (max-width: 767px) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .catalog-container .catalog:nth-child(odd) {
+    .catalog-image {
+      .image-wrapper {
+        justify-content: flex-start;
+        @media (max-width: 767px) {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .catalog-container .catalog:nth-child(even) {
+    .catalog-image {
+      @media (max-width: 767px) {
+        order: 0;
+      }
+    }
+    .catalog-detail {
+      @media (max-width: 767px) {
+        order: 1;
+      }
+    }
+  }
+
+  .catalog {
+    display: flex;
+    padding: 5rem 0;
+    @media (max-width: 768px) {
+      padding: 2rem 0;
+    }
+    @media (max-width: 468px) {
+      flex-direction: column;
+    }
+    .catalog-detail {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .heading {
+        font-size: 3.125rem;
+        line-height: 3.813rem;
+        color: ${(props) => props.theme.tertiaryColor};
+        margin-bottom: 2rem;
+        @media (max-width: 992px) {
+          font-size: 2.8rem;
+          line-height: 3rem;
+        }
+        @media (max-width: 767px) {
+          font-size: 2rem;
+          line-height: 2.5rem;
+          text-align: center;
+          padding-left: 100px;
+          padding-right: 100px;
+          margin-bottom: 1rem;
+        }
+        @media (max-width: 467px) {
+          padding-left: 25px;
+          padding-right: 25px;
+        }
+      }
+      .caption {
+        font-weight: 400;
+        font-size: 1.563rem;
+        line-height: 2rem;
+        color: ${(props) => props.theme.tertiaryColor};
+        opacity: 0.8;
+        @media (max-width: 767px) {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          text-align: center;
+          padding-left: 100px;
+          padding-right: 100px;
+        }
+        @media (max-width: 467px) {
+          padding-left: 25px;
+          padding-right: 25px;
+        }
+      }
+    }
+    .catalog-image {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .image-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        @media (max-width: 767px) {
+          justify-content: center;
+        }
+        .calalog-image {
+          max-width: 300px;
+          @media (max-width: 767px) {
+            max-width: 200px;
+            margin-bottom: 20px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const Catalog = () => {
+  const [img, setImg] = useState(CatalogsLight);
+  const { isDark } = useStyledDarkMode();
+
+  useEffect(() => {
+    isDark ? setImg(CatalogsDark) : setImg(CatalogsLight);
+  }, [isDark]);
+
+  return (
+    <CatalogWrapper>
+      <Container className="catalog-container">
+        <Row className="catalog">
+          <Col md={6} className="catalog-image">
+            <div className="image-wrapper">
+              <img src={img} className="calalog-image" />
+            </div>
+          </Col>
+          <Col md={6} className="catalog-detail">
+            <h2 className="heading">Harness Meshery's Compatibility</h2>
+            <p className="caption">
+              Easily manage and monitor your entire infrastructure, regardless
+              of the specific tools and services you use.
+            </p>
+          </Col>
+        </Row>
+        <Row className="catalog">
+          <Col md={6} className="catalog-detail">
+            <h2 className="heading">Unlock the Power of WebAssembly Filters</h2>
+            <p className="caption">
+              EWebAssembly filters grant meticulous command over service
+              requests, seamlessly integrated into the data plane.
+            </p>
+          </Col>
+          <Col md={6} className="catalog-image">
+            <div className="image-wrapper">
+              <img src={Wasm} className="calalog-image" />
+            </div>
+          </Col>
+        </Row>
+        <Row className="catalog">
+          <Col md={6} className="catalog-image">
+            <div className="image-wrapper">
+              <img src={Ebpf} className="calalog-image" />
+            </div>
+          </Col>
+          <Col md={6} className="catalog-detail">
+            <h2 className="heading">
+              Maximize Your Performance with eBPF Programs
+            </h2>
+            <p className="caption">
+              Embedded within the data plane, eBPF programs enable
+              high-performance, granular control over service requests.
+            </p>
+          </Col>
+        </Row>
+        <Row className="catalog">
+          <Col md={6} className="catalog-detail">
+            <h2 className="heading">
+              Deploy Applications with Meshery's Deployment Patterns
+            </h2>
+            <p className="caption">
+              Cloud native patterns enable the business function in simple
+              language.
+            </p>
+          </Col>
+          <Col md={6} className="catalog-image">
+            <div className="image-wrapper">
+              <img src={Patterns} className="calalog-image" />
+            </div>
+          </Col>
+        </Row>
+        <Row className="catalog">
+          <Col md={6} className="catalog-image">
+            <div className="image-wrapper">
+              <img src={Opa} className="calalog-image" />
+            </div>
+          </Col>
+          <Col md={6} className="catalog-detail">
+            <h2 className="heading">
+              Elevate Security Policies for a Revolutionary Transformation
+            </h2>
+            <p className="caption">
+              Applied across the cloud native infrastructure under management,
+              policies may be applied broadly and specifically.
+            </p>
+          </Col>
+        </Row>
+      </Container>
+    </CatalogWrapper>
+  );
+};
+
+export default Catalog;

src/sections/Cloud-Native-Catalog/header.js

@@ -0,0 +1,103 @@
+import React from "react";
+import styled from "styled-components";
+import { Row, Col, Container } from "../../reusecore/Layout";
+import CatalogCards from "../../assets/images/catalog/calalog-cards.svg";
+import Button from "../../reusecore/Button";
+
+const CatalogHeaderWrapper = styled.div`
+  .cloud-native-catalog.header {
+    min-height: 40rem;
+    background: ${({ theme }) => theme.linearToGreen};
+    display: flex;
+    align-items: center;
+    align-content: space-between;
+    flex-direction: column;
+    justify-content: center;
+    .header__detail {
+      display: flex;
+      flex-direction: column;
+    }
+    .header__title {
+      color: ${(props) => props.theme.secondaryColor};
+      padding-right: 80px;
+      margin-bottom: 20px;
+    }
+    .header__title_description {
+      color: ${(props) => props.theme.tertiaryColor};
+      font-weight: 400;
+      font-size: 1.438rem;
+      line-height: 2rem;
+      padding-right: 80px;
+      margin-bottom: 30px;
+    }
+    .catalog {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    @media screen and (max-width: 992px) {
+      padding-bottom: 100px;
+      .catalog {
+        margin: 50px 0 0 0;
+      }
+    }
+
+    @media screen and (max-width: 768px) {
+      padding: 50px 0;
+      .header__detail {
+        display: flex;
+        flex-direction: column;
+      }
+      .header__title {
+        padding-right: 0;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+      .header__title_description {
+        padding-right: 0;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+      .header__button_section {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+`;
+
+const Header = () => {
+  return (
+    <CatalogHeaderWrapper>
+      <div className="cloud-native-catalog header">
+        <Container>
+          <Row className="row">
+            <Col className="col header__detail" md={6}>
+              <h1 className="header__title">Cloud Native Catalog</h1>
+              <p className="header__title_description">
+                Discover top-quality cloud native services for your
+                infrastructure with the Cloud Native Catalog. Discover best
+                practices and upgrade your Kubernetes management practices.
+              </p>
+              <div className="header__button_section">
+                <Button
+                  primary
+                  title="Browse Catalog"
+                  external={true}
+                  url="https://meshery.io/catalog"
+                />
+              </div>
+            </Col>
+            <Col className="col catalog" md={6}>
+              <img src={CatalogCards} alt="catalog" />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </CatalogHeaderWrapper>
+  );
+};
+
+export default Header;

src/sections/Cloud-Native-Catalog/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Patterns from "./patterns";
+import Header from "./header";
+import NewCatalog from "./new-catalog";
+import Reviews from "../Pricing/review-slider";
+import Catalog from "./catalog";
+
+const CloudNativeCatalogPage = () => {
+  return (
+    <>
+      <Header />
+      <Catalog />
+      <Patterns />
+      <Reviews />
+      <NewCatalog />
+    </>
+  );
+};
+
+export default CloudNativeCatalogPage;

src/sections/Cloud-Native-Catalog/new-catalog.js

@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+import { Container } from "../../reusecore/Layout";
+import Button from "../../reusecore/Button";
+
+const NewCatalogWrapper = styled.div`
+  min-height: 500px;
+  background-color: ${({ theme }) => theme.whiteOneToGreyF0F0F0};
+  .container {
+    min-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .new-catalog__title {
+    text-align: center;
+    color: ${(props) => props.theme.tertiaryColor};
+    font-weight: 600;
+    font-size: 3.125rem;
+    line-height: 3.813rem;
+    padding: 0 200px 20px 200px;
+  }
+  .new-catalog__button_section {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+  }
+  @media screen and (max-width: 992px) {
+    .new-catalog__title {
+      padding: 0 0 10px 0;
+    }
+    .new-catalog__button_section {
+      padding-top: 10px;
+    }
+  }
+  @media screen and (max-width: 767px) {
+    .new-catalog__title {
+      font-size: 2rem;
+      line-height: 2.5rem;
+    }
+  }
+`;
+
+const NewCatalog = () => {
+  return (
+    <NewCatalogWrapper className="new-catalog">
+      <Container className="container">
+        <p className="new-catalog__title">
+          CREATE AND SHARE YOUR OWN BEST PRACTICES
+        </p>
+        <div className="new-catalog__button_section">
+          <Button primary external={true} title="Publish Your Own Design" url="https://github.com/meshery/meshery.io/blob/master/README.md#add-your-patterns-to-the-catalog" />
+        </div>
+      </Container>
+    </NewCatalogWrapper>
+  );
+};
+
+export default NewCatalog;

src/sections/Cloud-Native-Catalog/patterns.js

@@ -0,0 +1,322 @@
+import React from "react";
+import styled from "styled-components";
+import Mutual_tls from "../../assets/images/meshmap/catalog-card-images/mutual-tls.svg";
+import Retries from "../../assets/images/meshmap/catalog-card-images/retries.svg";
+import Traces from "../../assets/images/meshmap/catalog-card-images/traces.svg";
+import Denial from "../../assets/images/meshmap/catalog-card-images/denial.svg";
+import Correlate_event from "../../assets/images/meshmap/catalog-card-images/correlate-event.svg";
+import Only_wagent from "../../assets/images/meshmap/catalog-card-images/only-wagent.svg";
+import Node_agent from "../../assets/images/meshmap/catalog-card-images/node-agent.svg";
+import Single_tenant from "../../assets/images/meshmap/catalog-card-images/single-tenant.svg";
+import Pre_provison from "../../assets/images/meshmap/catalog-card-images/pre-provision.svg";
+import Circuit_breaker from "../../assets/images/meshmap/catalog-card-images/circuit-breaker.svg";
+import Retry_deadline from "../../assets/images/meshmap/catalog-card-images/retry-deadline.svg";
+import Singleton from "../../assets/images/meshmap/catalog-card-images/singleton.svg";
+import Jwt_transformer from "../../assets/images/meshmap/catalog-card-images/jwt.svg";
+import Multicluster from "../../assets/images/meshmap/catalog-card-images/multicluster.svg";
+import Http_metrics from "../../assets/images/meshmap/catalog-card-images/http.svg";
+import { Container } from "../../reusecore/Layout";
+
+const CatalogWrapper = styled.div`
+  margin: 0;
+  min-height: fit-content;
+  border-width: 2px 2px 2px 2px;
+
+  .catalog-container {
+    padding: 0;
+  }
+
+  .catalog-wrapper {
+    box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.25);
+    padding: 4rem;
+    background-color: ${(props) => props.theme.secondaryColor};
+    background: linear-gradient(
+      180deg,
+      hsla(173, 100%, 35%, 1) 7%,
+      hsla(0, 0%, 0%, 1) 90%
+    );
+  }
+
+  h3.containerCaption {
+    color: ${(props) => props.theme.saffronColor};
+    padding-top: 0.25rem;
+    margin-bottom: -0.5rem;
+    font-size: 1.44rem;
+    font-weight: normal;
+    text-align: center;
+    span {
+      color: ${(props) => props.theme.saffronColor};
+    }
+  }
+  .vertical-line {
+    position: relative;
+    margin: auto;
+    height: 20rem;
+    width: 0px;
+    border: 1.5px solid ${(props) => props.theme.green00B39FToGreyB3B3B3};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    @media (max-width: 468px) {
+      display: none;
+    }
+  }
+
+  .container {
+    margin: 4rem auto;
+    width: 120px;
+    height: 150px;
+    position: relative;
+    perspective: 1000px;
+  }
+
+  #carousel {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform-style: preserve-3d;
+    animation: swirl 40s steps(10000, end) infinite;
+  }
+
+  #carousel:hover {
+    animation-play-state: paused;
+  }
+
+  #carousel {
+    img {
+      transition: all 0.5s ease;
+    }
+  }
+
+  .slide {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  .slide.one {
+    transform: rotateY(0deg) translateZ(382px);
+  }
+  .slide.two {
+    transform: rotateY(24deg) translateZ(382px);
+  }
+  .slide.three {
+    transform: rotateY(48deg) translateZ(382px);
+  }
+  .slide.four {
+    transform: rotateY(72deg) translateZ(382px);
+  }
+  .slide.five {
+    transform: rotateY(96deg) translateZ(382px);
+  }
+  .slide.six {
+    transform: rotateY(120deg) translateZ(382px);
+  }
+  .slide.seven {
+    transform: rotateY(144deg) translateZ(382px);
+  }
+  .slide.eight {
+    transform: rotateY(168deg) translateZ(382px);
+  }
+  .slide.nine {
+    transform: rotateY(192deg) translateZ(382px);
+  }
+  .slide.ten {
+    transform: rotateY(216deg) translateZ(382px);
+  }
+  .slide.eleven {
+    transform: rotateY(240deg) translateZ(382px);
+  }
+  .slide.twelve {
+    transform: rotateY(264deg) translateZ(382px);
+  }
+  .slide.thirteen {
+    transform: rotateY(288deg) translateZ(382px);
+  }
+  .slide.fourteen {
+    transform: rotateY(312deg) translateZ(382px);
+  }
+  .slide.fifteen {
+    transform: rotateY(336deg) translateZ(382px);
+  }
+
+  @media screen and (max-width: 992px) {
+    .container {
+      width: 90px;
+    }
+    .slide.one {
+      transform: rotateY(0deg) translateZ(260px);
+    }
+    .slide.two {
+      transform: rotateY(24deg) translateZ(260px);
+    }
+    .slide.three {
+      transform: rotateY(48deg) translateZ(260px);
+    }
+    .slide.four {
+      transform: rotateY(72deg) translateZ(260px);
+    }
+    .slide.five {
+      transform: rotateY(96deg) translateZ(260px);
+    }
+    .slide.six {
+      transform: rotateY(120deg) translateZ(260px);
+    }
+    .slide.seven {
+      transform: rotateY(144deg) translateZ(260px);
+    }
+    .slide.eight {
+      transform: rotateY(168deg) translateZ(260px);
+    }
+    .slide.nine {
+      transform: rotateY(192deg) translateZ(260px);
+    }
+    .slide.ten {
+      transform: rotateY(216deg) translateZ(260px);
+    }
+    .slide.eleven {
+      transform: rotateY(240deg) translateZ(260px);
+    }
+    .slide.twelve {
+      transform: rotateY(264deg) translateZ(260px);
+    }
+    .slide.thirteen {
+      transform: rotateY(288deg) translateZ(260px);
+    }
+    .slide.fourteen {
+      transform: rotateY(312deg) translateZ(260px);
+    }
+    .slide.fifteen {
+      transform: rotateY(336deg) translateZ(260px);
+    }
+  }
+  @media screen and (max-width: 680px) {
+    .catalog-wrapper {
+      padding: 2rem;
+    }
+
+    .container {
+      width: 65px;
+      margin: 1.5rem auto 0rem;
+    }
+    .slide.one {
+      transform: rotateY(0deg) translateZ(160px);
+    }
+    .slide.two {
+      transform: rotateY(24deg) translateZ(160px);
+    }
+    .slide.three {
+      transform: rotateY(48deg) translateZ(160px);
+    }
+    .slide.four {
+      transform: rotateY(72deg) translateZ(160px);
+    }
+    .slide.five {
+      transform: rotateY(96deg) translateZ(160px);
+    }
+    .slide.six {
+      transform: rotateY(120deg) translateZ(160px);
+    }
+    .slide.seven {
+      transform: rotateY(144deg) translateZ(160px);
+    }
+    .slide.eight {
+      transform: rotateY(168deg) translateZ(160px);
+    }
+    .slide.nine {
+      transform: rotateY(192deg) translateZ(160px);
+    }
+    .slide.ten {
+      transform: rotateY(216deg) translateZ(160px);
+    }
+    .slide.eleven {
+      transform: rotateY(240deg) translateZ(160px);
+    }
+    .slide.twelve {
+      transform: rotateY(264deg) translateZ(160px);
+    }
+    .slide.thirteen {
+      transform: rotateY(288deg) translateZ(160px);
+    }
+    .slide.fourteen {
+      transform: rotateY(312deg) translateZ(160px);
+    }
+    .slide.fifteen {
+      transform: rotateY(336deg) translateZ(160px);
+    }
+  }
+
+  @keyframes swirl {
+    from {
+      transform: rotateY(-360deg);
+    }
+    to {
+      transform: rotateY(0deg);
+    }
+  }
+`;
+
+const Catalog = () => {
+  return (
+    <CatalogWrapper>
+      <a href="https://meshery.io/catalog">
+        <div className="catalog-wrapper">
+          <Container className="catalog-container">
+            <div className="container">
+              <div id="carousel">
+                <div className="slide one">
+                  <img src={Mutual_tls} />
+                </div>
+                <div className="slide two">
+                  <img src={Retries} />
+                </div>
+                <div className="slide three">
+                  <img src={Traces} />
+                </div>
+                <div className="slide four">
+                  <img src={Denial} />
+                </div>
+                <div className="slide five">
+                  <img src={Correlate_event} />
+                </div>
+                <div className="slide six">
+                  <img src={Only_wagent} />
+                </div>
+                <div className="slide seven">
+                  <img src={Node_agent} />
+                </div>
+                <div className="slide eight">
+                  <img src={Single_tenant} />
+                </div>
+                <div className="slide nine">
+                  <img src={Pre_provison} />
+                </div>
+                <div className="slide ten">
+                  <img src={Circuit_breaker} />
+                </div>
+                <div className="slide eleven">
+                  <img src={Retry_deadline} />
+                </div>
+                <div className="slide twelve">
+                  <img src={Singleton} />
+                </div>
+                <div className="slide thirteen">
+                  <img src={Jwt_transformer} />
+                </div>
+                <div className="slide fourteen">
+                  <img src={Multicluster} />
+                </div>
+                <div className="slide fifteen">
+                  <img src={Http_metrics} />
+                </div>
+              </div>
+            </div>
+            <h3 className="containerCaption">
+              Discover best practices. Publish design patterns.
+            </h3>
+          </Container>
+        </div>
+      </a>
+    </CatalogWrapper>
+  );
+};
+
+export default Catalog;

src/sections/General/Navigation/utility/menu-items.js

@@ -91,7 +91,7 @@ const Data = {
         },
         {
           name: "Catalog",
-          path: "https://meshery.io/catalog",
+          path: "/catalog",
         },
         {
           name: "Docker Extension",

src/theme/app/themeStyles.js

@@ -173,6 +173,7 @@ const lighttheme = {
   greyFiveToBlueFive: "rgb(71 126 150 / 0.5)",
   linearToLinear: "linear-gradient(90deg, rgba(0, 179, 159, 0.7) 0%, rgba(217, 217, 217, 0) 99.34%)",
   linearToLinear2: "linear-gradient(61.3deg, rgba(0, 179, 159, 0.2) -26.19%, rgba(255, 255, 255, 0.2) 40.19%), linear-gradient(303.45deg, rgba(0, 179, 159, 0.2) 0%, rgba(255, 255, 255, 0.2) 37.23%), linear-gradient(360deg, #00B39F -108%, #FFFFFF 63.36%)",
+  linearToGreen: "linear-gradient(90.2deg,rgba(255, 255, 255, 0.38) 33.89%,rgba(0, 179, 159, 0.74) 99.81%)",
   linearToWhite: "#FFFFFF",
   whiteEightToBlack: "#000000",
   whiteEightToBlackEight: "rgb(0 0 0 / 0.8)",
@@ -390,6 +391,7 @@ export const darktheme = {
   greyFiveToBlueFive: "rgb(122 132 142 / 0.5)",
   linearToLinear: "linear-gradient(89.99deg, rgba(0, 179, 159, 0.54) 10%, rgba(71, 126, 150, 0.26) 65.12%, rgba(18, 18, 18, 0.16) 90%)",
   linearToLinear2: "linear-gradient(61.3deg, rgba(0, 179, 159, 0.2) -26.19%, rgba(18, 18, 18, 0.2) 40.19%), linear-gradient(303.45deg, rgba(0, 179, 159, 0.2) 0%, rgba(18, 18, 18, 0.2) 37.23%), linear-gradient(360deg, #00B39F -11.84%, #121212 63.36%)",
+  linearToGreen: "linear-gradient(90.2deg, rgba(0, 0, 0, 0.2) 0.16%, rgba(0, 179, 159, 0.74) 99.81%)",
   linearToWhite: "linear-gradient(to right, #666666, #444444)",
   whiteEightToBlack: "rgb(255 255 255 / 0.8)",
   whiteEightToBlackEight: "rgb(255 255 255 / 0.8)",