Whiteboard and Comment page layout updated

src/sections/Comments/index.js

@@ -39,7 +39,6 @@ const Comments = () => {
   return (
     <CommentsWrapper>
       <FeatureHero data={data} />
-      <Partners />
 
       <Container>
         <div className={"feature-use-container"}>
@@ -53,6 +52,7 @@ const Comments = () => {
           </div>
         </div>
       </Container>
+      <Partners />
       <SeeYou />
     </CommentsWrapper>
   );

src/sections/FeatureHero/featureHero.style.js

@@ -4,37 +4,38 @@ const FeatureHeroWrapper = styled.div`
   .heading-container {
     z-index: 3;
     width: 100%;
-    overflow: hidden;
     position: relative;
-    padding: 100px 50px 0 50px ;
+    padding: 100px 0 70px;
 
     .section-title {
       text-align: left;
     }
 
     .whiteboard-image{
       perspective: 1000px;
+      padding: 0 1rem;
+      &>img {
+        width: 100%;
+        margin: 2rem auto;
+      }
     }
 
     #whiteboard-svg {
       transition: transform 0.3s ease-out;
       transform-origin: top center;
-      min-width: 400px;
-    }
-
-    h2 {
-      margin: 0 0 10px 0;
     }
 
     .whiteboard-heading {
       color: ${props => props.theme.whiteToBlack} !important;
+      text-align: center;
+      font-size: 4rem;
+      font-weight: 600;
+      max-width: 768px;
+      margin: 0 auto;
+      padding: 0 1rem;
     }
 
     .heading-image {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: center;
       margin: 0 auto;
     }
 
@@ -55,24 +56,40 @@ const FeatureHeroWrapper = styled.div`
   }
 
   .whiteboard-text {
-    color: ${props => props.theme.greyA0AAAAToGrey666666}
+    color: ${props => props.theme.greyA0AAAAToGrey666666};
+    text-align: center;
+    font-size: 1.75rem;
+    line-height: 2.4rem;
+    max-width: 600px;
+    margin: 1rem auto;
+    padding: 0 1rem
   }
 
-  @media (max-width: 500px) {
-    .heading-image {
-      align-items: center;
-      justify-content: center;
-      flex-wrap: wrap;
+  @media (max-width: 768px) {
+    .whiteboard-heading{
+      font-size: 2.75rem !important;
     }
+    .whiteboard-text {
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+    }
+  }
 
+  @media (max-width: 500px) {
     .section-title {
       margin-bottom: 1rem;
       text-align: center !important;
     }
 
     .whiteboard-heading{
-      font-size: 2rem;
+      font-size: 2rem !important;
     }
+
+    .whiteboard-text {
+      font-size: 1rem;
+      line-height: 1.2rem;
+    }
+  }
 
 `;
 

src/sections/FeatureHero/index.js

@@ -1,6 +1,4 @@
 import React, { useEffect } from "react";
-import SectionTitle from "../../reusecore/SectionTitle";
-import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.svg";
 import FeatureHeroWrapper from "./featureHero.style";
 import { Container } from "../../reusecore/Layout";
 
@@ -11,7 +9,7 @@ const FeatureHero = (props) => {
 
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
-      const translateY = -scrollPosition / 5;
+      const translateY = -scrollPosition / 16;
       scrollingImage.style.transform = `rotateX(${translateY}deg)`;
     };
 
@@ -26,16 +24,14 @@ const FeatureHero = (props) => {
   return (
     <FeatureHeroWrapper>
       <Container className={"heading-container"}>
-        <div className={"heading-image"}>
-          <SectionTitle className={"section-title"}  >
-            <h2>
-              <span className={"whiteboard-heading"}>{props.data.heading}</span>
-            </h2>
-            <span className={"whiteboard-text"}>{props.data.sub_heading}</span>
-          </SectionTitle>
-          <div className={"whiteboard-image"}>
-            <img id={"whiteboard-svg"} src={props.data.image} alt={""}/>
-          </div>
+        <div className={"section-title"} >
+          <h2 className={"whiteboard-heading"}>
+            {props.data.heading}
+          </h2>
+          <p className={"whiteboard-text"}>{props.data.sub_heading}</p>
+        </div>
+        <div className={"whiteboard-image"}>
+          <img id={"whiteboard-svg"} src={props.data.image} alt={""} />
         </div>
       </Container>
     </FeatureHeroWrapper>

src/sections/Playground/playground-features.js

@@ -87,7 +87,7 @@ const PlaygroundFeatures = () => {
         <div className="feature-text">
           <h2>Use Whiteboarding </h2>
           <h5>The Whiteboarding and Freestyle Drawing feature introduces versatile drawing capabilities within Playground.</h5>
-          <Button url="https://layer5.io/whiteboard" style={{ marginTop: "1.5rem" }}>
+          <Button url="/whiteboard" style={{ marginTop: "1.5rem" }}>
             Learn more
           </Button>
         </div>
@@ -100,7 +100,7 @@ const PlaygroundFeatures = () => {
         <div className="feature-text">
           <h2>Brainstorm with Comments </h2>
           <h5>Playground’s Designer Mode offers a powerful collaboration feature through comments.</h5>
-          <Button url="https://layer5.io/comments" style={{ marginTop: "1.5rem" }}>
+          <Button url="/comments" style={{ marginTop: "1.5rem" }}>
             Learn more
           </Button>
         </div>

src/sections/Whiteboard/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import WhiteboardWrapper from "./whiteboard.style";
 import { Container } from "../../reusecore/Layout";
-import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.svg";
+import whiteboard_svg from "../../assets/images/whiteboard/whiteboard.png";
 import Partners from "../Home/Partners-home";
 import SeeYou from "../SeeYou";
 import FeatureHero from "../FeatureHero";
@@ -11,7 +11,7 @@ import use_case_2 from "../../assets/images/whiteboard/use-case-2.png";
 import use_case_3 from "../../assets/images/whiteboard/use-case-3.png";
 
 let data = {
-  heading: "Whiteboarding",
+  heading: "Beautify your infra with Whiteboarding",
   sub_heading: "All-in-one markdown editor, collaborative canvas, and diagram-as-code builder",
   image: whiteboard_svg
 };
@@ -23,12 +23,12 @@ let card_data = [
     image: use_case_1
   },
   {
-    heading: "Text Annotation",
+    heading: "Add notes for colleagues",
     subtitle: "Text annotations come with various options. Customize fonts, sizes, alignments, and styles easily",
     image: use_case_2
   },
   {
-    heading: "Interactive Tooltip Interface",
+    heading: "Direct customization from canvas",
     subtitle: "The tooltip serves as your gateway to customization, providing a simple and intuitive experience by offering a range of editing options upon selection.",
     image: use_case_3
   },
@@ -38,8 +38,7 @@ let card_data = [
 const Whiteboard = () => {
   return (
     <WhiteboardWrapper>
-      <FeatureHero data={data}/>
-      <Partners />
+      <FeatureHero data={data} />
 
       <Container>
         <div className={"feature-use-container"}>
@@ -48,12 +47,13 @@ const Whiteboard = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4}/>
+              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4} />
             ))}
           </div>
         </div>
       </Container>
-      <SeeYou/>
+      <Partners />
+      <SeeYou />
     </WhiteboardWrapper>
   );
 };