mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 18:45:49 +00:00
Video for insights
This commit is contained in:
rockyeverlast
184
src/components/ArticleInternalEight/ArticleInternalEigth.jsx
Normal file
184
src/components/ArticleInternalEight/ArticleInternalEigth.jsx
Normal file
@@ -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;
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 />,
|
||||
|
||||
Reference in New Issue
Block a user