Merge pull request #5249 from iArchitSharma/orch

Orchestration Management page added

src/pages/orchestration-management/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Orchestration from "../../sections/OrchestrationManagement";
+import ServiceMeshFocused from "../../sections/Home/Service-mesh-focussed";
+
+const OrchestrationManagement = () => {
+  return (
+    <>
+      <Orchestration/>
+      <ServiceMeshFocused bookName={"enterprise-path"} />
+    </>
+  );
+};
+
+export default OrchestrationManagement;

src/sections/OrchestrationManagement/index.js

@@ -0,0 +1,61 @@
+import React from "react";
+import OrchestrationWrapper from "./orchestration.style";
+import { Container } from "../../reusecore/Layout";
+import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.png";
+import Partners from "../Home/Partners-home";
+import SeeYou from "../SeeYou";
+import FeatureHero from "../FeatureHero";
+import FeatureUseCard from "../../components/FeatureUseCard";
+import SelfServiceAndIntegrationsGIF from "./images/self-service-and-integration.gif";
+import DeployDesignsGIF from "./images/deploy-designs.gif";
+import Validate from "./images/validate.gif";
+
+let data = {
+  heading: "Insights Visualized into Action",
+  sub_heading: "Optimize and streamline operations through strategic orchestration of your infrastructure.",
+  image: whiteboard_svg
+};
+
+let card_data = [
+  {
+    heading: "Self-service & Integrations",
+    subtitle: "Empower DevOps teams with self-service capabilities for effortless infrastructure management. Seamlessly integrate with current tools and workflows for a smooth and efficient experience.",
+    image: SelfServiceAndIntegrationsGIF
+  },
+  {
+    heading: "Validate your infra before deployment",
+    subtitle: "Infrastructure is rigorously validated pre-deployment to ensure reliability, security, and optimal performance.",
+    image: Validate
+  },
+  {
+    heading: "Environment provisioning",
+    subtitle: "Automate infrastructure provisioning for efficient, ready-to-deploy designs, eliminating manual work for basic requests in development, QA, testing, and IT operations.",
+    image: DeployDesignsGIF
+  },
+
+];
+
+const Orchestration = () => {
+  return (
+    <OrchestrationWrapper>
+      <FeatureHero data={data} />
+
+      <Container>
+        <div className={"feature-use-container"}>
+          <div>
+            <h2 className={"use-heading"}> Cloud Infra Provisioning with Speed and Control </h2>
+          </div>
+          <div className={"collaboration_display"}>
+            {card_data.map((x) => (
+              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={6} />
+            ))}
+          </div>
+        </div>
+      </Container>
+      <Partners />
+      <SeeYou />
+    </OrchestrationWrapper>
+  );
+};
+
+export default Orchestration;

src/sections/OrchestrationManagement/orchestration.style.js

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+const OrchestrationWrapper = styled.div`
+  height: 100%;
+  .feature-use-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+
+  .collaboration_display {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 0 10px;
+    align-items: flex-start;
+    justify-content: center;
+  }
+  
+  
+  .use-heading {
+    color: {props => props.theme.whiteToBlack};
+    font-size: 2rem;
+    text-align: center;
+    margin-bottom: 2.5rem;
+
+    .highlighted-text {
+      color: white;
+      padding: 0 0.5rem;
+      border-radius: 0.5rem;
+      background: ${props => props.theme.green009A89ToGreen00B39F};
+      font-weight: bold;
+    }
+
+`;
+
+export default OrchestrationWrapper;