Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-27 20:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Responsive design updates and bugs fixing

Browse Source
This commit is contained in:
rockyeverlast
2024-04-17 18:54:21 +05:30
parent 0a822b3c04
commit 3eb1edbca4
14 changed files with 352 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/eventsPic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

8
src/components/Card/PlaceCard.jsx
View File

@@ -5,21 +5,21 @@ import { ArrowForwardIcon } from "@chakra-ui/icons";
import Arrow from "../../assets/images/arrow-right.png";
import { Link } from "react-router-dom";
const PlaceCard = ({ key, text, cardicon, title, button, link }) => {
const PlaceCard = ({ text, cardicon, title, button, link }) => {
return (
<Box borderRadius={"10px"}>
<Box
width={"502px"}
background={"#46464647"}
borderRadius={"10px"}
minHeight={"350px"}
key={key}
borderRadius={"10px"}
minHeight={"350px"}
padding={"15px 20px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
fontWeight: "400",
minHeight: "290px",
minW: "300px",
},
}}
>

2
src/components/Footer/MobileFooter.jsx
View File

@@ -101,7 +101,7 @@ const MobileFooter = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"16px"}
fontSize={"22px"}
>
Social
</Text>

6
src/components/HomePage/Resources.jsx
View File

@@ -51,8 +51,8 @@ const content = [
const Content = {
heading: `Rubix Insights`,
};
const Resources = () => {
const ResourcesPage = () => {
return (
<Box
// height={"100vh"}
@@ -163,4 +163,4 @@ const Resources = () => {
);
};
export default Resources;
export default ResourcesPage;

1
src/components/MobileComponent/MobileCommunityCard.jsx
View File

@@ -145,6 +145,7 @@ const MobileCommunityCard = () => {
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
id="rubix-community"
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",

80
src/components/MobileComponent/MobilePlace.jsx
View File

@@ -1,56 +1,46 @@
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import {
Box,
Container,
Text,
} from "@chakra-ui/react";
import { Box, Container, Text } from "@chakra-ui/react";
import "swiper/css";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import Partner from "../../assets/images/partner.png";
import PlaceCard from "../Card/PlaceCard";
import Enterprise from "../../assets/images/enterprise.png";
import Banner from "../../assets/images/place-banner.png";
const content = [
{
id: 1,
title: "Partners",
cardicon: Partner,
text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`,
button: "Explore our ecosystem",
link: `/`,
},
{
id: 2,
title: "Enterprises",
cardicon: Enterprise,
text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`,
button: "See how it works",
link: `/LearnPage`,
},
{
id: 3,
title: "Developers",
cardicon: Enterprise,
text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`,
button: "Start Building",
link: `/BuildPage`,
},
{
id: 4,
title: "Advisors",
cardicon: Enterprise,
text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`,
button: "Contact Us",
link: `/Contact`,
},
];
const Content = {
heading: `Find your place at the table`,
};
{
id: 1,
title: "Partners",
cardicon: Partner,
text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`,
button: "Explore our ecosystem",
link: `/`,
},
{
id: 2,
title: "Enterprises",
cardicon: Enterprise,
text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`,
button: "See how it works",
link: `/LearnPage`,
},
{
id: 3,
title: "Developers",
cardicon: Enterprise,
text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`,
button: "Start Building",
link: `/BuildPage`,
},
{
id: 4,
title: "Advisors",
cardicon: Enterprise,
text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`,
button: "Contact Us",
link: `/Contact`,
},
];
const MobilePlace = () => {
return (
@@ -86,9 +76,9 @@ const MobilePlace = () => {
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
key={item.id}
>
<PlaceCard
key={item.id}
cardicon={item.cardicon}
title={item.title}
date={item.date}

366
src/components/MobileComponent/PartnerMobile.jsx
View File

@@ -19,6 +19,13 @@ import ondc from "../../assets/images/ondc.png";
import smartcity from "../../assets/images/smartcity.png";
import ymca from "../../assets/images/ymca.png";
import bescom from "../../assets/images/bescom.png";
import kpmg from "../../assets/images/kpmg.png";
import cwde from "../../assets/images/cwde.png";
import tzero from "../../assets/images/tzero.png";
import irctc from "../../assets/images/irctc.png";
import hdfc from "../../assets/images/hdfc.png";
import bharat from "../../assets/images/bharat.png";
import zing from "../../assets/images/zing.png";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
@@ -37,37 +44,75 @@ const tabWidth = "200px";
const phoneWidth = "200px";
const imgHeight = "130px";
const clients = [
const partners = [
{
id: 1,
img: chainx,
},
{
id: 2,
img: ensurity,
},
{
id: 3,
img: exr,
},
{
id: 4,
img: finalo,
},
{
id: 5,
img: iskon,
},
{
id: 6,
img: jupiter,
},
{
id: 7,
img: ondc,
},
{
id: 8,
img: smartcity,
},
{
id: 9,
img: ymca,
},
{
id: 10,
img: bescom,
},
{
id: 11,
img: kpmg,
},
{
id: 12,
img: cwde,
},
{
id: 11,
img: tzero,
},
{
id: 12,
img: irctc,
},
{
id: 13,
img: hdfc,
},
{
id: 14,
img: bharat,
},
{
id: 15,
img: zing,
},
];
export default function PartnerMobile() {
@@ -80,7 +125,7 @@ export default function PartnerMobile() {
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"1rem"}
padding={"1rem"}
paddingBottom={"4rem"}
>
<Text
@@ -117,289 +162,44 @@ export default function PartnerMobile() {
PaddingBottom: "2rem",
}}
>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={smartcity}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={ymca}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={jupiter}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={smartcity}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={bescom}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={smartcity}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={smartcity}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={bescom}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
{/* Box2 */}
<SwiperSlide>
<Box
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={exr}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
{partners.map((partner) => (
<>
<SwiperSlide>
<Box
key={partner.id}
display={"flex"}
alignItems={"center"}
marginBottom={"2rem"}
sx={{
"@media (max-width: 996px)": {
justifyContent: "space-around",
},
"@media (max-width: 600px)": {
justifyContent: "center",
gap: "15px",
},
}}
>
<Image
src={partner.img}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: `${imgHeight}`,
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
height: `${imgHeight}`,
},
}}
/>
</Box>
</SwiperSlide>
</>
))}
</Swiper>
</Box>
{/* Box2 */}
</Box>
);
}

15
src/components/MobileMenu/MobileMenu.jsx
View File

@@ -51,6 +51,7 @@ export const MobileMenu = () => {
return (
<>
<Box
id="navbar"
position={"fixed"}
top={"0px"}
zIndex={888}
@@ -101,7 +102,7 @@ export const MobileMenu = () => {
justifyContent={"space-between"}
alignItems={"center"}
padding={"2rem 1rem"}
marginBottom={"4rem"}
marginBottom={"2rem"}
gap={"2rem"}
sx={{
"@media (max-width: 1024px)": {},
@@ -134,7 +135,7 @@ export const MobileMenu = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"20px"}
fontSize={"16px"}
>
LEARN cdcdc
</Text>
@@ -187,14 +188,14 @@ export const MobileMenu = () => {
</AccordionItem>
{/* Build */}
<AccordionItem padding={"2rem 1rem"}>
<AccordionItem padding={"1rem 1rem"}>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
<Text
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"20px"}
fontSize={"16px"}
>
BUILD
</Text>
@@ -254,7 +255,7 @@ export const MobileMenu = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"20px"}
fontSize={"16px"}
>
USE CASES
</Text>
@@ -335,7 +336,7 @@ export const MobileMenu = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"20px"}
fontSize={"16px"}
>
COMMUNITY
</Text>
@@ -368,7 +369,7 @@ export const MobileMenu = () => {
color={"#B0B0B0"}
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"20px"}
fontSize={"16px"}
>
AFFILIATES
</Text>

98
src/components/ResourcesPage/EventSection.jsx Normal file
View File

@@ -0,0 +1,98 @@
import { Badge, Box, Container, Text } from "@chakra-ui/react";
const EventSection = () => {
return (
<Box
height={"100vh"}
backgroundColor={"#000"}
display={"grid"}
alignContent={"center"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
},
}}
>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem",
},
}}
>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Mona Sans"}
fontSize={"20px"}
marginBottom={"1.5rem"}
>
RESOURCES
</Badge>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
color={"#fff"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
Resources From{" "}
<Text as={"span"} color="#DE858E">
Rubix
</Text>
</Text>
<Box
marginTop={"1.5rem"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}
>
<Text
color={"#fff"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
// textTransform={"capitalize"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
Stay up to date on what’s happening with Rubix,
<br /> learn about upcoming events and access <br /> important
resources.
</Text>
</Box>
</Container>
</Box>
);
};
export default EventSection;

84
src/components/ResourcesPage/NewestEvents.jsx Normal file
View File

@@ -0,0 +1,84 @@
/* eslint-disable no-unused-vars */
import {
Box,
Container,
Image,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from "@chakra-ui/react";
const tabsBtn = [
{
id: "1",
btn: "The Rubix whitepapers",
},
{
id: "2",
btn: "Articles",
},
{
id: "3",
btn: "Videos",
},
];
const NewestEvents = () => {
return (
<Box
background={"#000"}
height={"100vh"}
sx={{
"@media (max-width: 1024px)": {
height: "70vh",
},
"@media (max-width: 600px)": {
height: "85vh",
backgroundPositionX: "center",
},
}}
>
<Container
maxW="container.xl"
textAlign={"left"}
background={"#000"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem",
},
}}
>
<Box>
<Tabs variant="solid-rounded" colorScheme="green">
<TabList>
{tabsBtn.map((btn) => (
<>
<Tab id={btn.id} color={"#fff"}>
{btn.btn}
</Tab>
</>
))}
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Container>
</Box>
);
};
export default NewestEvents;

9
src/index.css
View File

@@ -219,3 +219,12 @@ span.swiper-pagination-bullet {
font-size: 14px !important;
}
}
@media only screen and (max-width: 375px) {
.team-slider .swiper-button-prev:after {
left: 70px;
}
.team-slider .swiper-button-next:after {
right: 70px;
}
}

5
src/pages/Community.jsx
View File

@@ -9,6 +9,7 @@ import LearnMore from "../components/Community/LearnMore";
import Footer from "../components/Footer/Footer";
import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
import { useEffect, useState } from "react";
import MobilePlace from "../components/MobileComponent/MobilePlace";
const Community = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -47,9 +48,9 @@ const Community = () => {
{!isMobile ? (
<CommunityCard id="next-section" />
) : (
<MobileCommunityCard />
<MobileCommunityCard id="next-section" />
)}
<Place />
{!isMobile ? <Place /> : <MobilePlace />}
<Connect />
{/* <Happen />
<Insights /> */}

18
src/pages/ResourcesPage.jsx Normal file
View File

@@ -0,0 +1,18 @@
import { useEffect } from "react";
import EventSection from "../components/ResourcesPage/EventSection";
import NewestEvents from "../components/ResourcesPage/NewestEvents";
const ResourcesPage = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<EventSection />
<NewestEvents />
</>
);
};
export default ResourcesPage;

5
src/routes/_routes.jsx
View File

@@ -22,6 +22,7 @@ import martech from "../assets/images/martech.png";
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";
export const route = [
{
@@ -73,6 +74,10 @@ export const route = [
path: "Contact",
element: <Form />,
},
{
path: "resources-page",
element: <ResourcesPage />,
},
{
path: "*",
element: <NotFound />,