diff --git a/src/assets/images/AWS-Diagram/aws-light.svg b/src/assets/images/AWS-Diagram/aws-light.svg new file mode 100644 index 000000000000..5338a4a46d10 --- /dev/null +++ b/src/assets/images/AWS-Diagram/aws-light.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/AWS-Diagram/aws.svg b/src/assets/images/AWS-Diagram/aws.svg new file mode 100644 index 000000000000..748975ea4421 --- /dev/null +++ b/src/assets/images/AWS-Diagram/aws.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/AWS-Diagram/infrastructure-dark.svg b/src/assets/images/AWS-Diagram/infrastructure-dark.svg new file mode 100644 index 000000000000..98da6cd83b3d --- /dev/null +++ b/src/assets/images/AWS-Diagram/infrastructure-dark.svg @@ -0,0 +1,454 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/AWS-Diagram/infrastructure-light.svg b/src/assets/images/AWS-Diagram/infrastructure-light.svg new file mode 100644 index 000000000000..3b4a517eef62 --- /dev/null +++ b/src/assets/images/AWS-Diagram/infrastructure-light.svg @@ -0,0 +1,553 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/AWS-Diagram/templates-dark.svg b/src/assets/images/AWS-Diagram/templates-dark.svg new file mode 100644 index 000000000000..6dba5c9c0fa1 --- /dev/null +++ b/src/assets/images/AWS-Diagram/templates-dark.svg @@ -0,0 +1,285 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/AWS-Diagram/templates.svg b/src/assets/images/AWS-Diagram/templates.svg new file mode 100644 index 000000000000..1dfb16223b23 --- /dev/null +++ b/src/assets/images/AWS-Diagram/templates.svg @@ -0,0 +1,285 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/cloud-native-management/aws-diagram.js b/src/pages/cloud-native-management/aws-diagram.js new file mode 100644 index 000000000000..c7adb9fbdccb --- /dev/null +++ b/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 ( + <> + + + ); +}; +export default Aws; +export const Head = () => { + return ; +}; \ No newline at end of file diff --git a/src/pages/cloud-native-management/gcp-diagram.js b/src/pages/cloud-native-management/gcp-diagram.js new file mode 100644 index 000000000000..43707e7ab0b9 --- /dev/null +++ b/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 ( + <> + + + ); +}; +export default Gcp; +export const Head = () => { + return ; +}; \ No newline at end of file diff --git a/src/sections/AWS-Diagram/diagram.js b/src/sections/AWS-Diagram/diagram.js new file mode 100644 index 000000000000..8b47c2a66616 --- /dev/null +++ b/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 ( + + + + +
+ AWS Diagrams for anything +
+ + +

AWS architectural diagrams tailored to meet any requirement

+ Extensive AWS Icon Library +

+ Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date. +

+ Cost-Effective Solutions +

+ AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions. +

+ + + + +

Designing AWS diagrams is effortless

+ Quick-start templates +

+ 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. +

+ User-friendly editor +

+ 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. +

+ + +
+ Designing AWS Diagrams with MeshMap +
+ + + + + ); +}; + +export default Aws; diff --git a/src/sections/AWS-Diagram/header.js b/src/sections/AWS-Diagram/header.js new file mode 100644 index 000000000000..c7b1949a8891 --- /dev/null +++ b/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 ( + +
+ + + +

AWS Architecture Diagram Tool

+

+ Create AWS diagrams easily with predefined templates and symbols designed for professionals. +

+
+
+ + + catalog + + + +
+ + ); +}; + +export default Header; diff --git a/src/sections/AWS-Diagram/index.js b/src/sections/AWS-Diagram/index.js new file mode 100644 index 000000000000..6ecae2e621d1 --- /dev/null +++ b/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 ( + <> +
+ + + + ); +}; + +export default AwsDiagramPage; diff --git a/src/sections/GCP-Diagram/diagram.js b/src/sections/GCP-Diagram/diagram.js new file mode 100644 index 000000000000..32698158fb36 --- /dev/null +++ b/src/sections/GCP-Diagram/diagram.js @@ -0,0 +1,177 @@ +import React from "react"; +import styled from "styled-components"; +import { Container, Row, Col } from "../../reusecore/Layout"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; +import DragDrop from "./../Meshmap/Meshmap-design/images/drag-drop-components.gif"; +import GCPIconsDark from "./images/gcp-icons-dark.svg"; +import GCPIconsLight from "./images/gcp-icons-light.svg"; +import GCPCatalogDark from "./images/gcp-catalog-dark.svg"; +import GCPCatalogLight from "./images/gcp-catalog-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; + } + .gcp-image { + @media (max-width: 767px) { + max-width: 90%; + margin-bottom: 2rem; + } + } + } + } + } +`; + +const Gcp = () => { + + const { isDark } = useStyledDarkMode(); + + return ( + + + + +
+ GCP Diagrams for anything +
+ + +

GCP architectural diagrams tailored to meet any requirement

+ Extensive GCP Icon Library +

+ Utilize a vast and continually expanding collection of GCP icons for creating globally comprehensible diagrams that are authentic and up-to-date. +

+ Manage and analyze data +

+ Leverage Google Cloud Platform diagrams to utilize various services in facilitating storage and analysis of large datasets. These services encompass BigQuery, Dataflow, Dataproc, and Data Fusion, contributing to cloud-based data management. +

+ + + + +

Designing GCP diagrams is effortless

+ Quick-start templates +

+ Get started quickly with our ready-to-use templates. Effortlessly create your GCP architecture diagrams using these professional templates. They are fully customizable and available for free download. +

+ User-friendly editor +

+ Create GCP 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. +

+ + +
+ Designing GCP Diagrams with MeshMap +
+ + + + + ); +}; + +export default Gcp; diff --git a/src/sections/GCP-Diagram/header.js b/src/sections/GCP-Diagram/header.js new file mode 100644 index 000000000000..e8b9367ab087 --- /dev/null +++ b/src/sections/GCP-Diagram/header.js @@ -0,0 +1,105 @@ +import React from "react"; +import styled from "styled-components"; +import { Row, Col, Container } from "../../reusecore/Layout"; +import Button from "../../reusecore/Button"; +import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode"; +import GCPDiagramDark from "./images/gcp-diagram-dark.svg"; +import GCPDiagramLight from "./images/gcp-diagram-light.svg"; + +const CatalogHeaderWrapper = styled.div` + .cloud-native-catalog.header { + background: ${({ theme }) => theme.linearToGreen}; + padding: 6rem 1rem; + 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.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; + } + + @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 ( + +
+ + + +

Google Cloud Platform Diagram Tool

+

+ Create GCP diagrams easily with predefined templates and symbols designed for professionals. +

+
+
+ + + catalog + + + +
+ + ); +}; + +export default Header; diff --git a/src/sections/GCP-Diagram/images/gcp-catalog-dark.svg b/src/sections/GCP-Diagram/images/gcp-catalog-dark.svg new file mode 100644 index 000000000000..95acc0deb6b5 --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-catalog-dark.svg @@ -0,0 +1,571 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/images/gcp-catalog-light.svg b/src/sections/GCP-Diagram/images/gcp-catalog-light.svg new file mode 100644 index 000000000000..e3c9e5a00898 --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-catalog-light.svg @@ -0,0 +1,571 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/images/gcp-diagram-dark.svg b/src/sections/GCP-Diagram/images/gcp-diagram-dark.svg new file mode 100644 index 000000000000..fcdd2b0b0f26 --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-diagram-dark.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/images/gcp-diagram-light.svg b/src/sections/GCP-Diagram/images/gcp-diagram-light.svg new file mode 100644 index 000000000000..e6bfe521b712 --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-diagram-light.svg @@ -0,0 +1,314 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/images/gcp-icons-dark.svg b/src/sections/GCP-Diagram/images/gcp-icons-dark.svg new file mode 100644 index 000000000000..a95330e519dc --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-icons-dark.svg @@ -0,0 +1,509 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/images/gcp-icons-light.svg b/src/sections/GCP-Diagram/images/gcp-icons-light.svg new file mode 100644 index 000000000000..ab55258f95fe --- /dev/null +++ b/src/sections/GCP-Diagram/images/gcp-icons-light.svg @@ -0,0 +1,509 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/GCP-Diagram/index.js b/src/sections/GCP-Diagram/index.js new file mode 100644 index 000000000000..8595e9e858fa --- /dev/null +++ b/src/sections/GCP-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 GcpDiagramPage = () => { + return ( + <> +
+ + + + ); +}; + +export default GcpDiagramPage;