AWS Diagram page created

src/pages/cloud-native-management/aws-diagram.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import SEO from "../../components/seo";
+import AwsDiagram from "../../sections/AWS-Diagram";
+
+const Aws = () => {
+  return (
+    <>
+      <AwsDiagram />
+    </>
+  );
+};
+export default Aws;
+export const Head = () => {
+  return <SEO title="AWS Architecture Diagram"
+    description="Create your own AWS architecture diagrams with Meshmap."
+    image="/images/meshery-logo-dark-text.webp" />;
+};

src/pages/cloud-native-management/gcp-diagram.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import SEO from "../../components/seo";
+import GcpDiagram from "../../sections/GCP-Diagram";
+
+const Gcp = () => {
+  return (
+    <>
+      <GcpDiagram />
+    </>
+  );
+};
+export default Gcp;
+export const Head = () => {
+  return <SEO title="GCP Architecture Diagram"
+    description="Create your own Google Cloud Platform diagrams with Meshmap."
+    image="/images/meshery-logo-dark-text.webp" />;
+};

src/sections/AWS-Diagram/diagram.js

@@ -0,0 +1,176 @@
+import React from "react";
+import styled from "styled-components";
+import { Container, Row, Col } from "../../reusecore/Layout";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+import TemplateDark from "../../assets/images/AWS-Diagram/templates-dark.svg";
+import TemplateLight from "../../assets/images/AWS-Diagram/templates.svg";
+import InfrastructureDark from "../../assets/images/AWS-Diagram/infrastructure-dark.svg";
+import InfrastructureLight from "../../assets/images/AWS-Diagram/infrastructure-light.svg";
+
+const DiagramWrapper = styled.div`
+  min-height: fit-content;
+  border-width: 2px 2px 2px 2px;
+  background-color: ${(props) => props.theme.body};
+  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  padding-bottom: 100px;
+  @media (max-width: 850px) {
+    margin: 3rem 0;
+  }
+  @media (max-width: 767px) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .diagram-container .catalog:nth-child(odd) {
+    .diagram-image {
+      .image-wrapper {
+        justify-content: center;
+        @media (max-width: 767px) {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .diagram-container .catalog:nth-child(even) {
+    .diagram-image {
+      @media (max-width: 767px) {
+        order: 0;
+      }
+    }
+    .diagram-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;
+    }
+    .diagram-detail {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .heading {
+        color: ${(props) => props.theme.tertiaryColor};
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        margin-bottom: 2rem;
+        @media (max-width: 767px) {
+          text-align: center;
+          padding-left: 100px;
+          padding-right: 100px;
+          margin-bottom: 1rem;
+        }
+        @media (max-width: 467px) {
+          padding-left: 25px;
+          padding-right: 25px;
+          text-align: left;
+        }
+      }
+      .sub-heading {
+        @media (max-width: 767px) {
+          text-align: center;
+        }
+        @media (max-width: 467px) {
+          padding-left: 25px;
+          text-align: left;
+        }
+      }
+      .caption {
+        font-weight: 400;
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        color: ${(props) => props.theme.tertiaryColor};
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        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;
+          text-align: left;
+        }
+      }
+    }
+    .diagram-image {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .image-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @media (max-width: 767px) {
+          justify-content: center;
+        }
+        .aws-image {
+          @media (max-width: 767px) {
+            max-width: 90%;
+            margin-bottom: 2rem;
+          }
+        } 
+      }
+    }
+  }
+`;
+
+const Aws = () => {
+
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <DiagramWrapper>
+      <Container className="diagram-container">
+        <Row className="catalog">
+          <Col md={6} className="diagram-image">
+            <div className="image-wrapper">
+              <img src={isDark ? InfrastructureDark : InfrastructureLight} alt="AWS Diagrams for anything" className="aws-image" />
+            </div>
+          </Col>
+          <Col md={6} className="diagram-detail">
+            <h1 className="heading">AWS architectural diagrams tailored to meet any requirement</h1>
+            <b className="sub-heading">Extensive AWS Icon Library </b>
+            <p className="caption">
+            Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date.
+            </p>
+            <b className="sub-heading">Cost-Effective Solutions </b>
+            <p className="caption">
+            AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions.
+            </p>
+          </Col>
+        </Row>
+        <Row className="catalog">
+          <Col md={6} className="diagram-detail">
+            <h1 className="heading">Designing AWS diagrams is effortless</h1>
+            <b className="sub-heading">Quick-start templates </b>
+            <p className="caption">
+            Get started quickly with our ready-to-use templates. Effortlessly create your AWS architecture diagrams using these professional templates. They are fully customizable and available for free download.
+            </p>
+            <b className="sub-heading">User-friendly editor </b>
+            <p className="caption">
+            Create AWS diagrams effortlessly with an intuitive layout and interface. Benefit from intelligent auto-adjustment, drag-and-drop functionality, and a comprehensive toolkit for quick diagram creation in minutes.
+            </p>
+          </Col>
+          <Col md={6} className="diagram-image">
+            <div className="image-wrapper">
+              <img src={isDark ? TemplateDark : TemplateLight} alt="Designing AWS Diagrams with MeshMap" className="aws-image" />
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </DiagramWrapper>
+  );
+};
+
+export default Aws;

src/sections/AWS-Diagram/header.js

@@ -0,0 +1,119 @@
+import React from "react";
+import styled from "styled-components";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+import { Row, Col, Container } from "../../reusecore/Layout";
+import AWSCardDark from "../../assets/images/AWS-Diagram/aws-light.svg";
+import AWSCardLight from "../../assets/images/AWS-Diagram/aws.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;
+    overflow: hidden;
+    .header__detail {
+      display: flex;
+      flex-direction: column;
+    }
+    .header__title {
+      color: ${(props) => props.theme.primaryColor};
+      padding-right: 80px;
+      margin-bottom: 20px;
+    }
+    .header__title_description {
+      color: ${(props) => props.theme.tertiaryColor};
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      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;
+    }
+
+    img {
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+      transform-origin: center; /* Set the transform origin to the center */
+      transform: translateZ(-50px) scale(1.1); /* Adjust translateZ and scale values for the desired parallax effect */
+      transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
+    }
+
+    &:hover img {
+      transform: translateZ(0) scale(1); /* Adjust values for hover effect */
+    }
+
+    @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 = () => {
+  const { isDark } = useStyledDarkMode();
+  return (
+    <CatalogHeaderWrapper>
+      <div className="cloud-native-catalog header">
+        <Container>
+          <Row className="row">
+            <Col className="col header__detail" md={6}>
+              <h1 className="header__title">AWS Architecture Diagram Tool</h1>
+              <p className="header__title_description">
+              Create AWS diagrams easily with predefined templates and symbols designed for professionals.
+              </p>
+              <div className="header__button_section">
+                <Button
+                  primary
+                  title="Try MeshMap Now!"
+                  external={true}
+                  url="/meshmap"
+                />
+              </div>
+            </Col>
+            <Col className="col catalog" md={6}>
+              <img src={isDark ? AWSCardLight : AWSCardDark} alt="catalog" />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </CatalogHeaderWrapper>
+  );
+};
+
+export default Header;

src/sections/AWS-Diagram/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Header from "./header";
+import Reviews from "../Pricing/review-slider";
+import Diagram from "./diagram";
+
+const AwsDiagramPage = () => {
+  return (
+    <>
+      <Header />
+      <Diagram />
+      <Reviews />
+    </>
+  );
+};
+
+export default AwsDiagramPage;