From cddc9e3a161765d200db2c8b50be86c1c8d01066 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 13 May 2024 17:37:06 +0530
Subject: [PATCH] video integration Rubix Insights

---
 .../ArticleInternalEigth.jsx                  | 184 ++++++++++++++++++
 .../ArticleInternalSeven.jsx                  | 184 ++++++++++++++++++
 2 files changed, 368 insertions(+)
 create mode 100644 src/components/ArticleInternalEight/ArticleInternalEigth.jsx
 create mode 100644 src/components/ArticleInternalSeven/ArticleInternalSeven.jsx

diff --git a/src/components/ArticleInternalEight/ArticleInternalEigth.jsx b/src/components/ArticleInternalEight/ArticleInternalEigth.jsx
new file mode 100644
index 0000000..3e5b773
--- /dev/null
+++ b/src/components/ArticleInternalEight/ArticleInternalEigth.jsx
@@ -0,0 +1,184 @@
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from "react";
+import { Box, Text, Image } from "@chakra-ui/react";
+import { AspectRatio } from "@chakra-ui/react";
+
+const VideoInternal = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const isMobile = windowWidth <= 996;
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <Box
+        bg="#000000"
+        height={"auto"}
+        display={"flex"}
+        gap={7}
+        justifyContent={"center"}
+        alignItems={"center"}
+        flexDirection={"column"}
+        color="white"
+      >
+        <Box
+          bg="#000000"
+          minHeight={"60vh"}
+          width={"70vw"}
+          display={"flex"}
+          gap={5}
+          marginTop={10}
+          justifyContent={"end"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          color="white"
+          marginBottom={"2rem"}
+          sx={{
+            "@media (max-width: 600px)": {
+              minHeight: "inherit",
+              width: "100vw",
+              marginTop: "6rem",
+            },
+          }}
+        >
+          <Text
+            textAlign={"center"}
+            className="rubix-fw-600"
+            fontSize={"40px"}
+            fontFamily={"Mona Sans"}
+            color={"#fff"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+                lineHeight: "45px",
+                padding: "0px 1rem",
+              },
+            }}
+          >
+            Driving Sustainable Innovations
+          </Text>
+
+          <Text
+            textAlign={"center"}
+            className="rubix-text-xsmall rubix-fw-500"
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "35px",
+              },
+            }}
+          >
+            Author - Keynote Speaker - Srini
+          </Text>
+
+          {/* <Text
+            textAlign={"center"}
+            className="rubix-text-medium rubix-fw-400"
+            sx={{
+              "@media (max-width: 600px)": {
+                padding: "0 15px",
+              },
+            }}
+          >
+            Rubix’s technology may live on the web but it was designed to
+            address real world problems like climate change, hunger and
+            inequality. We select our partners with care. Every app built on the
+            Rubix platform is designed to address a real world issue.
+          </Text> */}
+        </Box>
+
+        <Box
+          bg="#101015"
+          width={"85vw"}
+          height={"auto"}
+          display={"flex"}
+          //   pb={"60px"}
+          mb={"4rem"}
+          gap={5}
+          justifyContent={"center"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          color="white"
+          position={"relative"}
+          sx={{
+            "@media (max-width: 600px)": {
+              display: "block",
+              top: "inherit",
+            },
+          }}
+        >
+          {!isMobile ? (
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
+              }}
+            >
+              <iframe
+                src="https://www.youtube.com/embed/qBwj78F0i4E"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "70%",
+                  height: "70%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(22%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          ) : (
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
+              }}
+            >
+              <iframe
+                src="https://www.youtube.com/embed/qBwj78F0i4E"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "95%",
+                  height: "85%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(10%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default VideoInternal;
diff --git a/src/components/ArticleInternalSeven/ArticleInternalSeven.jsx b/src/components/ArticleInternalSeven/ArticleInternalSeven.jsx
new file mode 100644
index 0000000..5445ea0
--- /dev/null
+++ b/src/components/ArticleInternalSeven/ArticleInternalSeven.jsx
@@ -0,0 +1,184 @@
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from "react";
+import { Box, Text, Image } from "@chakra-ui/react";
+import { AspectRatio } from "@chakra-ui/react";
+
+const VideoInternal = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const isMobile = windowWidth <= 996;
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <Box
+        bg="#000000"
+        height={"auto"}
+        display={"flex"}
+        gap={7}
+        justifyContent={"center"}
+        alignItems={"center"}
+        flexDirection={"column"}
+        color="white"
+      >
+        <Box
+          bg="#000000"
+          minHeight={"60vh"}
+          width={"70vw"}
+          display={"flex"}
+          gap={5}
+          marginTop={10}
+          justifyContent={"end"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          color="white"
+          marginBottom={"2rem"}
+          sx={{
+            "@media (max-width: 600px)": {
+              minHeight: "inherit",
+              width: "100vw",
+              marginTop: "6rem",
+            },
+          }}
+        >
+          <Text
+            textAlign={"center"}
+            className="rubix-fw-600"
+            fontSize={"40px"}
+            fontFamily={"Mona Sans"}
+            color={"#fff"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+                lineHeight: "45px",
+                padding: "0px 1rem",
+              },
+            }}
+          >
+            Building Blocks of Next Gen Blockchain
+          </Text>
+
+          <Text
+            textAlign={"center"}
+            className="rubix-text-xsmall rubix-fw-500"
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "35px",
+              },
+            }}
+          >
+            Author - Keynote Speaker -Hari
+          </Text>
+
+          {/* <Text
+            textAlign={"center"}
+            className="rubix-text-medium rubix-fw-400"
+            sx={{
+              "@media (max-width: 600px)": {
+                padding: "0 15px",
+              },
+            }}
+          >
+            Rubix’s technology may live on the web but it was designed to
+            address real world problems like climate change, hunger and
+            inequality. We select our partners with care. Every app built on the
+            Rubix platform is designed to address a real world issue.
+          </Text> */}
+        </Box>
+
+        <Box
+          bg="#101015"
+          width={"85vw"}
+          height={"auto"}
+          display={"flex"}
+          //   pb={"60px"}
+          mb={"4rem"}
+          gap={5}
+          justifyContent={"center"}
+          alignItems={"center"}
+          flexDirection={"column"}
+          color="white"
+          position={"relative"}
+          sx={{
+            "@media (max-width: 600px)": {
+              display: "block",
+              top: "inherit",
+            },
+          }}
+        >
+          {!isMobile ? (
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
+              }}
+            >
+              <iframe
+                src="https://www.youtube.com/embed/5oMj9ZGIWU8"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "70%",
+                  height: "70%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(22%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          ) : (
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+                className: "iframeContainer",
+              }}
+            >
+              <iframe
+                src="https://www.youtube.com/embed/5oMj9ZGIWU8"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                style={{
+                  position: "absolute",
+                  width: "95%",
+                  height: "85%",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  transform: "translateY(10%)",
+                  left: 0,
+                  right: 0,
+                  border: "none",
+                }}
+              ></iframe>
+            </div>
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default VideoInternal;