From e0eea5ff4ecd70dca60a82738433deac9623ccde Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 13 May 2024 16:58:20 +0530
Subject: [PATCH] Video for insights

---
 .../ArticleInternalEigth.jsx                  | 184 ++++++++++++++++++
 .../ArticleInternalSeven.jsx                  |  12 +-
 src/components/HomePage/Resources.jsx         |  10 +-
 src/routes/_routes.jsx                        |   7 +-
 4 files changed, 204 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ArticleInternalEight/ArticleInternalEigth.jsx

diff --git a/src/components/ArticleInternalEight/ArticleInternalEigth.jsx b/src/components/ArticleInternalEight/ArticleInternalEigth.jsx
new file mode 100644
index 0000000..0c07995
--- /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://drive.google.com/file/d/1KPaaSeVA0_0rRE3BV5K0PxJh09st9gsv/view?usp=drive_link"
+                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://drive.google.com/file/d/1KPaaSeVA0_0rRE3BV5K0PxJh09st9gsv/view?usp=drive_link"
+                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
index 221303f..745c9e9 100644
--- a/src/components/ArticleInternalSeven/ArticleInternalSeven.jsx
+++ b/src/components/ArticleInternalSeven/ArticleInternalSeven.jsx
@@ -69,7 +69,7 @@ const VideoInternal = () => {
               },
             }}
           >
-            Rubix Demo
+            Building Blocks of Next Gen Blockchain
           </Text>
 
           <Text
@@ -81,10 +81,10 @@ const VideoInternal = () => {
               },
             }}
           >
-            Videos January 5, 2023
+            Author - Keynote Speaker -Hari
           </Text>
 
-          <Text
+          {/* <Text
             textAlign={"center"}
             className="rubix-text-medium rubix-fw-400"
             sx={{
@@ -97,7 +97,7 @@ const VideoInternal = () => {
             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>
+          </Text> */}
         </Box>
 
         <Box
@@ -130,7 +130,7 @@ const VideoInternal = () => {
               }}
             >
               <iframe
-                src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
+                src="https://drive.google.com/file/d/1KO_ylPQsivirEwybGUeHPt5pEKRfrp-p/view"
                 title="YouTube video player"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
@@ -157,7 +157,7 @@ const VideoInternal = () => {
               }}
             >
               <iframe
-                src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
+                src="https://drive.google.com/file/d/1KO_ylPQsivirEwybGUeHPt5pEKRfrp-p/view"
                 title="YouTube video player"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 1593e44..0341833 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -6,8 +6,14 @@ const content = [
   {
     id: 7,
     date: `Published: January 12, 2022`,
-    text: `Rubix Video`,
-    link: `rubix-video`,
+    text: `Building Blocks of Next Gen Blockchain`,
+    link: `building-blocks-of-next-gen-blockchain`,
+  },
+  {
+    id: 8,
+    date: `Published: January 12, 2022`,
+    text: `Driving Sustainable Innovations`,
+    link: `driving-sustainable-innovations`,
   },
   {
     id: 1,
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 35f42d4..224a1c4 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -5,6 +5,7 @@ import ArticleInternalThree from "../components/ArticleInternalThree/ArticleInte
 import ArticleInternalTwo from "../components/ArticleInternalTwo/ArticleInternalTwo";
 import ArticleInternalfive from "../components/ArticleInternalfive/ArticleInternalfive";
 import ArticleInternalSeven from "../components/ArticleInternalSeven/ArticleInternalSeven";
+import ArticleInternalEight from "../components/ArticleInternalEight/ArticleInternalEigth";
 import {
   IdentitySecurityContent,
   adTechContent,
@@ -81,9 +82,13 @@ export const route = [
     element: <ArticleInternalSix />,
   },
   {
-    path: "rubix-video",
+    path: "building-blocks-of-next-gen-blockchain",
     element: <ArticleInternalSeven />,
   },
+  {
+    path: "driving-sustainable-innovations",
+    element: <ArticleInternalEight />,
+  },
   {
     path: "Contact",
     element: <Form />,