diff --git a/src/components/ResourcesPage/NewestEvents.jsx b/src/components/ResourcesPage/NewestEvents.jsx index 15eabd7..255fa60 100644 --- a/src/components/ResourcesPage/NewestEvents.jsx +++ b/src/components/ResourcesPage/NewestEvents.jsx @@ -46,7 +46,7 @@ const NewestEvents = () => { height: "70vh", }, "@media (max-width: 600px)": { - height: "85vh", + height: "auto", backgroundPositionX: "center", }, }} @@ -58,7 +58,7 @@ const NewestEvents = () => { padding={"0 3.5rem"} sx={{ "@media (max-width: 500px)": { - paddingLeft: "1rem", + padding: "0px 0px", }, }} > @@ -73,6 +73,11 @@ const NewestEvents = () => { borderBottom={"1px solid #444444"} gap={"2rem"} marginBottom={"1rem"} + sx={{ + "@media (max-width: 500px)": { + gap: "0rem", + }, + }} > {tabsBtn.map((btn) => ( <> @@ -81,6 +86,11 @@ const NewestEvents = () => { color={"#fff"} fontWeight={"400"} fontSize={"20px"} + sx={{ + "@media (max-width: 500px)": { + fontSize: "15px", + }, + }} > {btn.btn} diff --git a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx index 2c1505f..e8aaad0 100644 --- a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx +++ b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx @@ -11,6 +11,11 @@ const TabsArticles = () => { alignItems={"center"} justifyContent={"start"} gap={"2rem"} + sx={{ + "@media (max-width: 600px)": { + flexDirection: "column", + }, + }} > diff --git a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx index 91ea1f8..5d6af48 100644 --- a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx +++ b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx @@ -10,6 +10,11 @@ const TabsVideo = () => { alignItems={"center"} justifyContent={"start"} gap={"2rem"} + sx={{ + "@media (max-width: 600px)": { + flexDirection: "column", + }, + }} > diff --git a/src/components/VideoInternal/VideoInternal.jsx b/src/components/VideoInternal/VideoInternal.jsx new file mode 100644 index 0000000..f4d9fcb --- /dev/null +++ b/src/components/VideoInternal/VideoInternal.jsx @@ -0,0 +1,139 @@ +/* eslint-disable no-unused-vars */ +import React, { useEffect } from "react"; +import { Box, Text, Image } from "@chakra-ui/react"; +import { AspectRatio } from "@chakra-ui/react"; + +const VideoInternal = () => { + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( + <> + + + + How is Rubix Changing the World? + + + + Videos January 5, 2023 + + + + 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. + + + + +
+ +
+
+
+ + ); +}; + +export default VideoInternal; diff --git a/src/index.css b/src/index.css index 6654c27..b0b2ac0 100644 --- a/src/index.css +++ b/src/index.css @@ -218,6 +218,16 @@ span.swiper-pagination-bullet { .rubix-text-small { font-size: 14px !important; } + + .iframeContainer { + width: 85%; + height: 85%; + transform: translateY(0%); + -webkit-transform: translateY(0%); + -moz-transform: translateY(0%); + -ms-transform: translateY(0%); + -o-transform: translateY(0%); + } } @media only screen and (max-width: 375px) { diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx index b156a6d..75fee8e 100644 --- a/src/routes/_routes.jsx +++ b/src/routes/_routes.jsx @@ -23,6 +23,7 @@ import healthTech from "../assets/images/health-tech.png"; import Form from "../components/Contact/Form"; import UseCase from "../components/UseCase/UseCase"; import ResourcesPage from "../pages/ResourcesPage"; +import VideoInternal from "../components/VideoInternal/VideoInternal"; export const route = [ { @@ -46,7 +47,7 @@ export const route = [ element: , }, - { + { path: "bring-your-own-blockspace", element: , }, @@ -78,6 +79,10 @@ export const route = [ path: "resources-page", element: , }, + { + path: "video-page", + element: , + }, { path: "*", element: ,