diff --git a/src/pages/solutions/cloud-cost-control/index.js b/src/pages/solutions/cloud-cost-control/index.js new file mode 100644 index 0000000000000..3c48a9df1d636 --- /dev/null +++ b/src/pages/solutions/cloud-cost-control/index.js @@ -0,0 +1,19 @@ + +import React from "react"; +import SEO from "../../../components/seo"; +import CloudCostControl from "../../../sections/Cloud-Cost-Control"; + +const CloudCostControlPage = () => { + return ( + <> + + + ); +}; +export default CloudCostControlPage; +export const Head = () => { + return ; +}; diff --git a/src/sections/Cloud-Cost-Control/header.js b/src/sections/Cloud-Cost-Control/header.js new file mode 100644 index 0000000000000..19cae07af7c89 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/header.js @@ -0,0 +1,103 @@ +import React from "react"; +import styled from "styled-components"; +import { Row, Col, Container } from "../../reusecore/Layout"; +import HeaderImage from "./images/solutions-cost.svg"; +import Button from "../../reusecore/Button"; + +const SolutionsHeaderWrapper = styled.div` + .solutions.header { + min-height: 35rem; + 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.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; + } + .solution-hero { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + img { + max-width: 70%; + } + } + @media screen and (max-width: 992px) { + padding-bottom: 100px; + .solution-hero { + 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 SolutionHeader = () => { + return ( + +
+ + + +

Cost, incident and chaos oversight

+

+ Save cost, reduce risk and manage infrastructure failure. +

+
+
+ + + hero image + + + +
+ + ); +}; + +export default SolutionHeader; \ No newline at end of file diff --git a/src/sections/Cloud-Cost-Control/images/chaos-icon.svg b/src/sections/Cloud-Cost-Control/images/chaos-icon.svg new file mode 100644 index 0000000000000..b3f47da5e61e7 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/chaos-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/deploy-icon.svg b/src/sections/Cloud-Cost-Control/images/deploy-icon.svg new file mode 100644 index 0000000000000..09dbbd32ff85f --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/deploy-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/deploy.svg b/src/sections/Cloud-Cost-Control/images/deploy.svg new file mode 100644 index 0000000000000..b516f789665be --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/deploy.svg @@ -0,0 +1,194 @@ + +
 + + + +
 + + + +
 + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/images/execute-with-efficiency-icon.svg b/src/sections/Cloud-Cost-Control/images/execute-with-efficiency-icon.svg new file mode 100644 index 0000000000000..d341be493f490 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/execute-with-efficiency-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/execute-with-efficiency.svg b/src/sections/Cloud-Cost-Control/images/execute-with-efficiency.svg new file mode 100644 index 0000000000000..4b59064a75e65 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/execute-with-efficiency.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/images/integration-icon.svg b/src/sections/Cloud-Cost-Control/images/integration-icon.svg new file mode 100644 index 0000000000000..c90e0a122bccd --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/integration-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/meshsync.svg b/src/sections/Cloud-Cost-Control/images/meshsync.svg new file mode 100644 index 0000000000000..0f0200a098ec4 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/meshsync.svg @@ -0,0 +1 @@ +meshsync \ No newline at end of file diff --git a/src/sections/Cloud-Cost-Control/images/money-icon.svg b/src/sections/Cloud-Cost-Control/images/money-icon.svg new file mode 100644 index 0000000000000..b382c3547d06c --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/money-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/images/optimize-workflow-icon.svg b/src/sections/Cloud-Cost-Control/images/optimize-workflow-icon.svg new file mode 100644 index 0000000000000..f7548354866e0 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/optimize-workflow-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/optimize-workflow.svg b/src/sections/Cloud-Cost-Control/images/optimize-workflow.svg new file mode 100644 index 0000000000000..b0025a78d5449 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/optimize-workflow.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/images/patterns-icon.svg b/src/sections/Cloud-Cost-Control/images/patterns-icon.svg new file mode 100644 index 0000000000000..974ac8bce493d --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/patterns-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/sections/Cloud-Cost-Control/images/service-mesh.svg b/src/sections/Cloud-Cost-Control/images/service-mesh.svg new file mode 100644 index 0000000000000..41dcc52a04d12 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/service-mesh.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/images/solutions-cost.svg b/src/sections/Cloud-Cost-Control/images/solutions-cost.svg new file mode 100644 index 0000000000000..8166df76b8f80 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/images/solutions-cost.svg @@ -0,0 +1,295 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sections/Cloud-Cost-Control/index.js b/src/sections/Cloud-Cost-Control/index.js new file mode 100644 index 0000000000000..9de68750b25a6 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/index.js @@ -0,0 +1,18 @@ +import React from "react"; +import SolutionHeader from "./header"; +import SolutionsDetails from "./info"; +import WorkflowSection from "./workflows"; +import SolutionsPreFooter from "./pre-footer"; + +const CloudCostControl = () => { + return ( + <> + + + + + + ); +}; + +export default CloudCostControl; \ No newline at end of file diff --git a/src/sections/Cloud-Cost-Control/info.js b/src/sections/Cloud-Cost-Control/info.js new file mode 100644 index 0000000000000..8d4af1d3af375 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/info.js @@ -0,0 +1,166 @@ +import React from "react"; +import styled from "styled-components"; +import { Row, Col, Container } from "../../reusecore/Layout"; +import mesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-light.svg"; +import meshsyncLogo from "./images/meshsync.svg"; +import serviceMeshLogo from "./images/service-mesh.svg"; +// import Button from "../../reusecore/Button"; + +const SolutionsDetailsWrapper = styled.div` + margin-top: 4rem; + h2 { + margin-bottom: 2rem; + } + .solutions-details { + .list{ + h1{ + margin-bottom: 1.5rem; + @media screen and (min-width: 770px) { + width: 50%; + } + } + padding: 1.875rem 0px; + margin-top: 4rem; + .text{ + p{ + color: ${props => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + .tools{ + p{ + font-weight: bold; + } + + .logos { + display: flex; + gap: 0.5rem; + margin: 0 0 1rem 0; + + img{ + weight: 2rem; + height: 2rem; + } + } + } + .listed{ + text-align: left; + .table{ + .icon{ + object-fit: cover; + height: 2.5rem; + width: 2.5rem; + vertical-align: top; + } + svg { + rect { + fill: ${props => props.theme.grey313131ToGreenC9FCF6}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + path { + stroke: ${props => props.theme.green00D3A9ToGreen00B39F}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + .details-para{ + color: ${props => props.theme.tertiaryColor}; + font-size: 16px; + padding: 0 0 1.25rem 1.875rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + h4{ + font-weight: 600; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + } + } + } + } +`; + +const SolutionsDetails = () => { + return ( + +
+ +

The Issues

+ + +

On the one hand, cloud adoption offers the ability to quickly scale resources up or down, yet enterprises might overprovision resources due to a lack of proper monitoring and scaling strategies.

+

Also, very often, cloud resources are provisioned but not actively utilized, which creates unwanted room for waste without proper resource management and much-needed de-provisioning, thus increasing running cost of these resources.

+ + +

+ On some other occasions, some professionals have tools that already enable certain functionalities that ease workflow and implementation, and a lack of integration of these platforms can lead to further frustrations when implementing desired solutions. All of this can lead to higher, avoidable, and unnecessary costs. +

+

+ Additionally, cloud environments are often distributed, dynamic, and composed of various interconnected services. This level of complexity can make it challenging to both identify the root cause of incidents and effectively coordinate controlled chaos experiments to test the resilience of cloud infrastructure. +

+ + +
+

Minimize complexity and automate workflows

+ + +
+

Meshery helps users weigh the value of their cloud native deployments against the overhead cost incurred in running different deployment scenarios and different configurations. This empowers them with much needed information they require to optimize decision making for the business.Predefined patterns and profiles are already setup to make the configuration of cloud native infrastructure and its features simpler both to understand and execute. This reduces the learning curve required to implement complex cloud native infrastructure functionalities. Less time spent learning means appropriate utilization of resources which further minimizes incurred cost.

+
+
+

LAYER5 PRODUCTS AND TOOLS DEPLOYED

+ +
+ + + +
+

Expect efficiency when you apply our suggestions and utilize our toolset with respect to incident management and chaos experiment discharge. Achieve optimization as you

+ + + + + + + + + + + + + + + + + + + + +
+ Make use of our established cloud native infrastructure patterns since they promote best practices for handling incidents and failures and will guide you on how to design and configure your cloud native infrastructure for optimal resilience. +
+ Find in our playbooks, step-by-step procedures for identifying, diagnosing, and resolving common incidents that can occur in cloud native infrastructure environments. +
+ Use Meshery's integration of the Chaos Toolkit and our readily available chaos experiment template to mitigate cost when you streamline and speed up workflow while defining and executing controlled chaos experiments on your cloud native infrastructure deployments. +
+ Accurately monitor applications and infrastructure during chaos tests. Using data-driven insights gained from monitoring, you are able to observe how the system behaves under stress and when failures occur and then make improvements in your architecture using this information. +
+
+ + +
+ +
+ + ); +}; + +export default SolutionsDetails; diff --git a/src/sections/Cloud-Cost-Control/pre-footer.js b/src/sections/Cloud-Cost-Control/pre-footer.js new file mode 100644 index 0000000000000..3b6402d13ad1d --- /dev/null +++ b/src/sections/Cloud-Cost-Control/pre-footer.js @@ -0,0 +1,27 @@ +import React from "react"; +import Faq from "../General/Faq"; +import Customers from "../../reusecore/Blockquote/Blockquote-image"; +import Otto from "../../collections/members/otto-van-der-schaaf/otto-van-der-schaaf.webp"; +import styled from "styled-components"; + +const SolutionsPreFooterStyledWrapper = styled.div` + .type-one-wrapper { + max-width: 60rem !important; + } +`; + +const SolutionsPreFooter = () => { + return ( + + + + ); +}; + +export default SolutionsPreFooter; \ No newline at end of file diff --git a/src/sections/Cloud-Cost-Control/workflows.js b/src/sections/Cloud-Cost-Control/workflows.js new file mode 100644 index 0000000000000..0099435c78eb3 --- /dev/null +++ b/src/sections/Cloud-Cost-Control/workflows.js @@ -0,0 +1,348 @@ +import React from "react"; +import styled from "styled-components"; +import { Row, Col, Container } from "../../reusecore/Layout"; +import OptimizeWorkflowIcon from "./images/optimize-workflow-icon.svg"; +import ExecuteWithEfficiencyIcon from "./images/execute-with-efficiency-icon.svg"; +import ExecuteWithEfficiency from "./images/execute-with-efficiency.svg"; +import OptimizeWorkFlow from "./images/optimize-workflow.svg"; +import DeployIcon from "./images/deploy-icon.svg"; +import DeployImg from "./images/deploy.svg"; +import ArrowJoinIcon from "./images/chaos-icon.svg"; +import BrainCircuitIcon from "./images/integration-icon.svg"; +import CubeTreeIcon from "./images/patterns-icon.svg"; +import DollarSignIcon from "./images/money-icon.svg"; + +const WorkflowSectionWrapper = styled.div` + margin-bottom: 2.5rem; + .section-title { + text-align: center; + } + .cards { + margin: 3.125rem 0 0; + width: 100%; + min-height: 21.25rem; + padding: 0 1.25rem 0; + border-radius: 1.5rem; + + @media screen and (max-width: 1000px) { + padding-bottom: 0; + } + } + .content-container { + padding: 1rem 2rem; + background: ${props => props.theme.DarkTheme ? "linear-gradient(156deg, #293B43 -11.07%, rgba(41, 59, 67, 0.00) 135.21%);" : "linear-gradient(156deg,rgb(7, 221, 196) -11.07%,rgb(12, 29, 29) 135.21%);"} + border-radius: 1.5rem; + margin: 2rem 0; + .row { + align-items: center; + } + + @media screen and (max-width: 1000px) { + flex-direction: column; + gap: 1.5rem; + } + } +.content { + display: flex; + flex-direction: column; + gap: 1.5rem; + + .card-header { + display: flex; + gap: 1rem; + align-items: center; + margin: 0 0 1.5rem 1rem; + + h2 { + color: rgba(255, 255, 255, 0.8); + font-size: 2rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + @media screen and (max-width: 400px) { + h2 { + font-size: 1.7rem; + } + } + } + + .circle { + width: 3rem; + height: 3rem; + // background-color: ${props => props.theme.secondaryLightColorTwo}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + svg { + width: 60%; + height: 60%; + } + img { + padding: 0.3rem 0px; + } + + @media screen and (max-width: 400px) { + width: 5rem; + } + } + + ul { + color: rgba(255, 255, 255, 0.8); + font-size: 1.1rem; + line-height: 1.6; + } +} + .content-img { + display: flex; + height: 28.125rem; + padding: 0rem 3.5rem; + justify-content: center; + align-items: center; + flex: 1 0 0; + @media screen and (max-width: 600px) { + padding: 0 0.5rem; + } +} +.bottom-card { + background: ${props => props.theme.DarkTheme ? "linear-gradient(156deg, #293B43 -11.07%, rgba(41, 59, 67, 0.00) 135.21%);" : "linear-gradient(156deg,rgb(7, 221, 196) -11.07%,rgb(12, 29, 29) 135.21%);"} + border-radius: 1.25rem; + padding: 2rem; + height: 100%; + display: flex; + flex-direction: column; + gap: 1rem; + + .card-icon { + width: 3rem; + height: 3rem; + border-radius: 50%; + background: rgba(235, 192, 23, 0.20); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + } + + h4 { + color: rgba(255, 255, 255, 0.8); + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + line-height: 1.4; + } + + p { + color: rgba(255, 255, 255, 0.8); + font-size: 1rem; + line-height: 1.5; + margin: 0; + } +} + @media screen and (max-width: 767px) { + .bottom-cards{ + gap: 2rem; + } + } +`; + +const CardsContainer = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 1fr; + justify-content: space-between; + padding-left: 20px; + padding-right: 20px; + grid-gap: 30px; + .card { + box-shadow: rgb(0 0 0 / 5%) 2px 4px 2.5rem 0.5rem; + border-radius: 1.25rem; + background: ${props => props.theme.DarkTheme ? "linear-gradient(156deg, #293B43 -11.07%, rgba(41, 59, 67, 0.00) 135.21%);" : "linear-gradient(156deg,rgb(7, 221, 196) -11.07%,rgb(12, 29, 29) 135.21%);"} + margin: 2px; + padding: 2rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + .img-container{ + display: flex; + justify-content: center; + } + + p { + text-align: left; + padding: 0px 0px; + letter-spacing: 0; + margin-top: 10px; + } + ul { + text-align: left; + li { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 0.5rem; + } + } + a:hover { + color: ${props => props.theme.text}; + } + + .card-header { + display: flex; + gap: 1rem; + align-items: center; + margin: 0 0 1.5rem 1rem; + } + h2 { + color: rgba(255, 255, 255, 0.8); + font-size: 2rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .circle { + width: 3rem; + height: 3rem; + // background-color: ${props => props.theme.secondaryLightColorTwo}; + border-radius: 3.125rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + svg { + width: 100%; + height: 100%; + } + img { + padding: 0.3rem 0px; + } + + } + @media screen and (max-width: 400px) { + .circle { + width: 5rem; + } + + h2 { + color: rgba(255, 255, 255, 0.8); + font-size: 1.7rem; + } + } + } + @media screen and (max-width: 974px) { + grid-template-columns: 1fr; + grid-gap: 20px; + padding: 20px; + } + @media screen and (max-width: 767px) { + display: flex; + flex-direction: column; + } +`; + + + +const WorkflowSection = () => { + return ( + + +

Manage procedures and output conveniently

+
+ + +
+
+
+ +
+

Optimize Workflow

+
+
    +
  • Streamline and accelerate workflow while you monitor infrastructure during controlled chaos tests and thus diminish cost.
    • +
  • Further use data insights gathered while monitoring to optimize your architecture.
    • +
+
+ +
+
+
+
+
+ +
+

Execute with efficiency

+
+ +
    +
  • Spend less time learning and execute more with predefined cloud native patterns that allow accurate configuration and management of cloud nativees.
    • +
  • Reduce human error, adjust traffic routing, and de-provision services when no longer required.
    • +
+
+ +
+
+ + +
+ + +
+
+
+ +
+

Organize all deployments

+
+
+
    +
  • Utilize Meshery's user-friendly interface, to manage cloud native deployments by observing for and de-provisioning specific mesh configurations that are no longer required.
    • +
  • Capture and sync your configuration changes and cloud native events across various cloud native implementations making use of the unified data plane that MeshSync provides.
    • +
+
+
+ + +
+ content +
+ + + + + + +
+
+ +
+

Integrate tools already in use and get rid of potential frustrations that could hinder maximum functionality.

+
+ + + +
+
+ +
+

Compare cost incurred in running scenarios and configurations to value of deployed resources.

+
+ + + +
+
+ +
+

Predefined patterns provide design guides for configuration of cloud nativees to ensure resilience.

+
+ + + +
+
+ +
+

Incorporation of chaos engineering tools facilitates conduction of controlled chaos experiments

+
+ + + + + ); +}; + +export default WorkflowSection; diff --git a/src/sections/General/Navigation/utility/menu-items.js b/src/sections/General/Navigation/utility/menu-items.js index e6eed8c113696..ad825e50940ca 100644 --- a/src/sections/General/Navigation/utility/menu-items.js +++ b/src/sections/General/Navigation/utility/menu-items.js @@ -42,6 +42,11 @@ const Data = { path: "/solutions/platform-engineering", sepLine: true, }, + { + name: "Cloud Cost Control", + path: "/solutions/cloud-cost-control", + sepLine: true, + }, ], actionItems: [ { diff --git a/static/images/solutions-cost.png b/static/images/solutions-cost.png new file mode 100644 index 0000000000000..0a0e951ab5a52 Binary files /dev/null and b/static/images/solutions-cost.png differ