Mobile Responsive and Video internal page

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}
                   </Tab>

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",
+            },
+          }}
         >
           <Box>
             <Image src={pic} />

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",
+          },
+        }}
       >
         <Box>
           <Image src={pic} />

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 (
+    <>
+      <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",
+              },
+            }}
+          >
+            How is Rubix Changing the World?
+          </Text>
+
+          <Text
+            textAlign={"center"}
+            className="rubix-text-xsmall rubix-fw-500"
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "35px",
+              },
+            }}
+          >
+            Videos January 5, 2023
+          </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",
+            },
+          }}
+        >
+          <div
+            style={{
+              position: "relative",
+              width: "100%",
+              paddingBottom: "56.25%" /* 16:9 aspect ratio */,
+              className: "iframeContainer",
+            }}
+          >
+            <iframe
+              src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
+              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>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default VideoInternal;

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) {

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: <Community />,
   },
 
-  { 
+  {
     path: "bring-your-own-blockspace",
     element: <ArticleInternalOne />,
   },
@@ -78,6 +79,10 @@ export const route = [
     path: "resources-page",
     element: <ResourcesPage />,
   },
+  {
+    path: "video-page",
+    element: <VideoInternal />,
+  },
   {
     path: "*",
     element: <NotFound />,