mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 18:45:49 +00:00
video integration Rubix 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://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;
|
||||
184
src/components/ArticleInternalSeven/ArticleInternalSeven.jsx
Normal file
184
src/components/ArticleInternalSeven/ArticleInternalSeven.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",
|
||||
},
|
||||
}}
|
||||
>
|
||||
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;
|
||||
Reference in New Issue
Block a user