Merge pull request #5244 from layer5io/enhance-whiteboard-page

[Update] Whiteboarding page

src/components/RelatedPicks/style.js

@@ -3,25 +3,30 @@ import styled from "styled-components";
 export const Container = styled("div")`
     max-width: 1170px;
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: 0 2rem;
 `;
 
 export const Wrapper = styled("div")`
     padding: 2rem 0;
     display: flex;
-    gap: 1.5rem;
-    flex-wrap: wrap;
+    gap: 1.5rem;    
+    @media only screen and (max-width: 675px){
+        flex-direction: column;
+    }
 `;
 
 export const CardWrapper = styled("div")`
-    max-width: 365px;
+    width: 300px;
     background: ${props => props.theme.grey212121ToLinear2};
     border-radius: 0.25rem;
     box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.green00D3A9ToGreyE6E6E6};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     &:hover {
         box-shadow: 0px 0px 5px ${props => props.theme.whiteToGreen3C494F};
     }
+    @media only screen and (max-width: 675px){
+        width: 100%;
+    }
 `;
 export const CardImageContainer = styled("div")``;
 export const Image = styled("img")``;

src/pages/architecture-diagram/design-architecture-diagram/index.js

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

src/sections/AWS-Diagram/index.js

@@ -12,7 +12,7 @@ const AwsDiagramPage = () => {
 
   let data = {
     heading: "AWS Architecture Diagram Tool",
-    sub_heading: "Create AWS diagrams easily with predefined templates and symbols designed for professionals.",
+    sub_heading: "Create Amazon Web Services diagrams easily with predefined templates and symbols designed for professionals.",
     image: isDark ? AWSDark : AWSLight
   };
   return (

src/sections/ArchitectureDiagram/index.js

@@ -0,0 +1,96 @@
+import React from "react";
+import WhiteboardWrapper from "./whiteboard.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 collaborationGIF from "./images/collaboration.gif";
+import optimizedGIF from "./images/optimized.gif";
+import customizationGIF from "./images/customization.gif";
+import shapesAndTemplatesGIF from "./images/shapes-and-templates.gif";
+import RelatedPicks from "../../components/RelatedPicks";
+import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg";
+import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg";
+import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg";
+import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+let data = {
+  heading: "Design Architecture Diagram Online",
+  sub_heading: "Effortlessly create software architectures, application architectures and system architectures in minutes.",
+  image: whiteboard_svg
+};
+
+let card_data = [
+  {
+    heading: "Numerous Architecture Diagram Shapes & Templates",
+    subtitle: "Designing visually striking and logical architecture diagram is much easier than you imagine. Simply drag and drop the pre-made shapes or templates that can fit your needs to the canvas, the architecture diagram in your mind will abruptly appear in front of you.",
+    image: shapesAndTemplatesGIF
+  },
+  {
+    heading: "Powerful Customizability",
+    subtitle: "Customize fonts, sizes, alignments, and styles easily according to your needs. In a word, you can customize everything to create the most engaging architecture diagram.",
+    image: customizationGIF
+  },
+  {
+    heading: "Cloud collaboration",
+    subtitle: "With cloud-based architecture diagram tool, you can efficiently collaborate with your team members at any time, anywhere.",
+    image: collaborationGIF
+  },
+  {
+    heading: "AWS, GCP and K8s optimized",
+    subtitle: "Capture your key services with smart components for EC2, ELB, Lambda, RDS, DynamoDB, Kinesis, etc.",
+    image: optimizedGIF
+  },
+
+];
+
+
+const ArchitectureDiagram = () => {
+  const { isDark } = useStyledDarkMode();
+  const content = [
+    {
+      id: 1,
+      title: "GCP architecture diagram",
+      redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram",
+      imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight,
+    },
+    {
+      id: 2,
+      title: "AWS architecture diagram",
+      redirectLink: "/cloud-native-management/generate-aws-architecture-diagram",
+      imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight,
+    }
+  ];
+  return (
+    <WhiteboardWrapper>
+      <FeatureHero data={data} />
+
+      <div className={"question-container"}>
+        <div className="wrapper">
+          <h2 className={"use-heading"}>Why use an architecture diagramming software?</h2>
+          <p>Following all the elements within your cloud environment can be challenging, but a visual diagram of your cloud architecture will help you stay up to date with its status, understand the relationship between components, identify and solve problems. This complexity adds up when multiple team members are working on the same project. A collaborative cloud diagramming sofware could help to pinpoint information and ensure that everybody is on the same page.</p>
+        </div>
+      </div>
+      <Container>
+        <div className={"feature-use-container"}>
+          <div>
+            <h2 className={"use-heading"}> Features that we provide</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>
+
+      <RelatedPicks content={content}/>
+      <SeeYou />
+      <Partners />
+    </WhiteboardWrapper>
+  );
+};
+
+export default ArchitectureDiagram;

src/sections/Whiteboard/whiteboard.style.js → src/sections/ArchitectureDiagram/whiteboard.style.js

@@ -22,10 +22,9 @@ const WhiteboardWrapper = styled.div`
   
   
   .use-heading {
-    color: {props => props.theme.whiteToBlack};
-    font-size: 2rem;
+    color: ${props => props.theme.whiteToBlack};
     text-align: center;
-    margin-bottom: 2.5rem;
+    margin-bottom: 2rem;
 
     .highlighted-text {
       color: white;
@@ -34,7 +33,26 @@ const WhiteboardWrapper = styled.div`
       background: ${props => props.theme.green009A89ToGreen00B39F};
       font-weight: bold;
     }
+  }
+  .question-container {
+    max-width: 1170px;
+    margin: 0rem auto 4rem;
+    .wrapper {
+      padding: 2rem;
+      margin: 0 2rem;
+      border-radius: 0.25rem;
+      background-color: ${props => props.theme.grey191919ToGreyFAFAFA};
+      & > p {
+        text-align: center;
+        color: ${props => props.theme.greyA0AAAAToGrey666666};
+      }
 
+      @media only screen and (max-width: 500px) {
+        padding: 1rem;
+        margin: 0 1rem;
+      }
+    }
+  }
 `;
 
 export default WhiteboardWrapper;

src/sections/GCP-Diagram/index.js

@@ -11,7 +11,7 @@ const GcpDiagramPage = () => {
   const { isDark } = useStyledDarkMode();
   let data = {
     heading: "GCP Architecture Diagram Tool",
-    sub_heading: "Create GCP diagrams easily with predefined templates and symbols designed for professionals.",
+    sub_heading: "Create Google Cloud Platform diagrams easily with predefined templates and symbols designed for professionals.",
     image: isDark ? GCPDiagramDark : GCPDiagramLight
   };
   return (

src/sections/Home/FeaturesContainer/index.js

@@ -32,7 +32,7 @@ const FeaturesContainer = () => {
       title: "Generate stunning diagrams",
       show_custom_cursor: false,
       animationOne: false,
-      redirectLink: "/whiteboard",
+      redirectLink: "/architecture-diagram/design-architecture-diagram",
       desc: "Crafting cloud-native symphonies: Our engineering diagramming tool is your conductor's baton, turning Kubernetes infrastructure into a canvas for freestyle orchestration.",
       imgLink: isDark ? WhiteboardingImage : WhiteboardingImageLight,
       cursor: true