Merge pull request #5731 from hargunkaur286/use-cases2

added use cases page

.github/workflows/meshmap.yml

@@ -32,7 +32,6 @@ jobs:
         run: |
           export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
           echo "PULL_NO=$pull_number" >> $GITHUB_ENV
-      - uses: actions/checkout@v3
       - uses: actions/checkout@v3
         with:
           path: action

src/pages/use-cases/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import UseCases from "../../sections/useCases";
+
+const UseCasesPage = () => {
+  return (
+    <>
+      <UseCases/>
+    </>
+  );
+};
+
+export default UseCasesPage;

src/sections/useCases/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
+import UseCasesWrapper from "./useCases.style";
+import { Container, Row, Col } from "../../reusecore/Layout";
+import Card from "../../components/Card";
+import Partners from "../Home/Partners-home";
+import SeeYou from "../SeeYou";
+
+const UseCases = () => {
+  const content = false;
+  const ID = "";
+
+  const data = useStaticQuery(
+    graphql `query allUseCases {
+        allMdx(
+          filter: {fields: {collection: {eq: "use-cases"}}, frontmatter: {category: {eq: "usecase"}}}
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              abstract
+              thumbnail {
+                childImageSharp {
+                  gatsbyImageData(layout: FULL_WIDTH)
+                }
+                extension
+                publicURL
+              }
+              eurl
+              category
+              status
+            }
+          }
+        }
+      }
+    `
+  );
+
+  return (
+    <UseCasesWrapper>
+      <div className="use-cases-title" >
+        <h2 className="heading"> Platform Engineering done right</h2>
+        <p className="description"> Infrastructure diagraming is intuitive with visual architecture of Kubernetes clusters and Cloud services in Meshery. Whether you're an SRE, Platform Engineer, DevOps engineer, developer... Kubernetes configuration and operational design reviews between your engineering teams is a breeze.</p>
+      </div>
+
+      <Container>
+        <div className="usecases-grid-wrapper">
+          <Row>
+            {data.allMdx.nodes.map(({ id, frontmatter }) => (
+              <Col {...content && ID === id ? { xs: 12, sm: 12, lg: 12 } : { xs: 12, sm: 6, lg: 4 } } key={id} className="workshop-grid-col">
+                <div className="usecases-grid-card">
+                  <Card frontmatter={{ ...frontmatter, eurl: frontmatter.eurl }} fields={{ slug: frontmatter.eurl }} />
+                </div>
+              </Col>
+            ))}
+          </Row>
+        </div>
+      </Container>
+
+      <Partners />
+      <SeeYou />
+    </UseCasesWrapper>
+  );
+};
+
+export default UseCases;

src/sections/useCases/useCases.style.js

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+
+const UseCasesWrapper = styled.div`
+  .use-cases-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 1rem 0;
+    .heading {
+      color: ${props => props.theme.whiteToBlack} !important;
+      font-size: 4rem;
+      font-weight: 700;
+      max-width: 80%;
+      margin: 0 auto;
+      padding: 0 1rem;
+    }
+    .description {
+      color: ${props => props.theme.greyA0AAAAToGrey666666};
+      font-size: 1.5rem;
+      line-height: 2rem;
+      max-width: 60%;
+      margin: 1rem auto;
+      padding: 0 1rem;
+    }
+    @media (max-width: 768px) {
+      .heading {
+        font-size: 2.75rem !important;
+      }
+      .description {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+      }
+    }
+    @media (max-width: 500px) {
+      .heading {
+        font-size: 2rem !important;
+      }
+      .whiteboard-text {
+        font-size: 1rem;
+        line-height: 1.2rem;
+      }
+    }
+  }
+  .usecases-grid-wrapper {
+    padding-bottom: 3.75rem;
+    .usecases-grid-card {
+      background-color: ${props => props.theme.grey212121ToWhite};
+      width: 100%;
+      display: block;
+      height: auto;
+      border-radius: 0.3125rem;
+      margin-bottom: 1.25rem;
+      box-shadow: 0rem 0.0625rem 0.3125rem rgba(0, 0, 0, 0.2);
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      .post-thumb-block {
+        width: 100%;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      .post-content-block {
+        padding: 1rem;
+      }
+    }
+    .externalLink {
+      position: relative;
+      left: 1rem;
+      margin-top: 0.25rem;
+    }
+    a.siteLink {
+      padding: 0.5rem 0.25rem 0rem;
+      filter: grayscale(100%) brightness(${props => props.theme.siteLinkBrightness});
+      transition: 0.2s ease-in-out all;
+      &:hover {
+        color: ${props => props.theme.keppelColor};
+        filter: none;
+      }
+    }
+  }
+`;
+
+export default UseCasesWrapper;