Merge branch 'layer5io:master' into refresh

src/components/Contact-Modal/index.js

@@ -44,4 +44,4 @@ const ContactFormModal = (props) => {
   );
 };
 
-export default ContactFormModal;
+export default ContactFormModal;

src/components/TeaserModal/index.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import Modal from "react-modal";
+import Button from "../../reusecore/Button";
+import { GrFormClose } from "@react-icons/all-files/gr/GrFormClose";
+import styled from "styled-components";
+import playIcon from "../../assets/images/homePage-images/play-button.webp";
+import ReactPlayer from "react-player";
+import StyledEmbdedVideo from "./style";
+
+const TeaserModalWrapper = styled.div`
+
+`;
+
+const TeaserModal = (props) => {
+  const {
+    title,
+    open
+  } = props;
+
+  const [modalIsOpen,setIsOpen] = useState(open);
+
+  const closeModal = () => setIsOpen(false);
+
+  return (
+    <TeaserModalWrapper>
+      <Modal
+        style={{
+          content: {
+            maxWidth: "105rem",
+            maxHeight: "105rem",
+            width: "105%",
+            height: "auto",
+          },
+        }}
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        className="Modal"								//Styles for this have been applied to global CSS, app.style.js file.
+        overlayClassName="Overlay"			// Same as above
+        ariaHideApp={false}
+        contentLabel={title}
+      >
+        <Button secondary className="close-modal-btn" onClick={closeModal}> <GrFormClose /></Button>
+        <div>
+          <StyledEmbdedVideo>
+            <ReactPlayer
+              url="https://www.youtube.com/embed/034nVaQUyME?si=BhO8IGawxc5YSRuw?vq=large"
+              playing
+              controls
+              playIcon={
+                <img
+                  src={playIcon}
+                  className="playBtn"
+                  loading="lazy"
+                  alt="Play"
+                  role="button"
+                  aria-label="Play"
+                  style={{ fontSize: "24px" }}
+                />
+              }
+              width="100%"
+              height="90vh"
+              className="embedVideo"
+            />
+          </StyledEmbdedVideo>
+        </div>
+      </Modal>
+    </TeaserModalWrapper>
+  );
+};
+
+export default TeaserModal;

src/components/TeaserModal/style.js

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+const StyledEmbdedVideo = styled.section`
+
+  .embedVideo {
+   position: relative;
+        min-width:25%;
+        max-width:100%;
+        object-fit: cover;
+        /* height: 44vw !important;
+        border-radius: 2.5%;
+        transition: 0.2s ease-in-out;
+        box-shadow: 0px 3px 20px 4px rgba(0, 179, 159, 0.5); */
+
+        .react-player__preview {
+        border-radius: 1.5%;
+        }
+
+        .react-player__play-icon {
+        transform: scale(3, 3);
+        }
+
+        iframe {
+        border-radius: 2.5%;
+        }
+
+        @media (max-width: 768px) {
+        height: 54vw !important;
+        }
+
+        &:hover {
+        /* box-shadow: 0px 3px 20px 4px rgba(0, 179, 159, 0.75);
+        .react-player__play-icon {
+            border-color: transparent transparent transparent #EBC017 !important;
+        } */
+        .playBtn {
+        box-shadow: 0px 0px 16px 3px #00B39F;
+        }
+        }
+}
+ .player-wrapper {
+  position: relative;
+}
+
+.react-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+`;
+
+export default StyledEmbdedVideo;

src/pages/cloud-native-management/meshmap/index.js

@@ -3,11 +3,22 @@ import React from "react";
 import SEO from "../../../components/seo";
 
 import Meshmap from "../../../sections/Meshmap/index";
-const MeshmapPage = () => {
+const MeshmapPage = ({ location }) => {
+  const params = new URLSearchParams(location.search);
+  const parameter1 = params.get("teaser");
+  const parameter2 = params.get("parameter2");
+
+  console.log(parameter1); // -> "firstParam"
+  console.log(parameter2); // -> "secondParam"
+  // ...
+  // let teaser = "";
+  // if (window !== undefined) {
+  //   const params = new URLSearchParams(window.location.search);
+  //   teaser = params.get("teaser");
+  // }
   return (
     <>
-      <Meshmap  />
-
+      <Meshmap teaser={parameter1 === "play"} />
     </>
   );
 };

src/sections/Meshmap/index.js

@@ -34,9 +34,10 @@ import Kaur from "../../sections/Pricing/reviews/kaur-kallas.webp";
 import Ala from "../../sections/Pricing/reviews/ala-eddine-benhassir.jpeg";
 import Phillip from "../../sections/Pricing/reviews/phillip-ulberg.jpeg";
 import Alex from "../../sections/Pricing/reviews/alex-hokanson.jpeg";
+import TeaserModal from "../../components/TeaserModal";
 
 
-const Meshmap = () => {
+const Meshmap = (props) => {
 
   return (
     <MeshmapWrapper>
@@ -245,11 +246,14 @@ const Meshmap = () => {
           {/* <MesheryAction /> */}
           <SignupForm />
           <Platform />
-        </Container >
-      </div >
-      <Reviews />
+        </Container>
+      </div>
+      <>
+        <Reviews />
+        <TeaserModal title="MeshMap Teaser" open={props?.teaser} />
+      </>
     </MeshmapWrapper>
   );
 };
 
-export default Meshmap;
+export default Meshmap;

src/sections/app.style.js

@@ -221,6 +221,10 @@ section{
     margin: auto -1rem;
 }
 
+.teaser-modal {
+  margin: 1rem -2rem;
+}
+
 .form-frame {
     height: 36rem;
     width: 35rem;