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

Mobile responsive home page

Browse Source
This commit is contained in:
rockyeverlast
2024-04-10 12:08:14 +05:30
parent a328876fe5
commit b181228875
11 changed files with 643 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Card/HomeCard.jsx
View File

@@ -12,6 +12,12 @@ const HomeCard = ({ key, date, text }) => {
}
padding={"1px"}
borderRadius={"10px"}
sx={{
"@media (max-width: 600px)": {
width: "90%",
margin: "0 auto",
},
}}
>
<Box
width={"502px"}
@@ -19,6 +25,12 @@ const HomeCard = ({ key, date, text }) => {
borderRadius={"10px"}
minHeight={"502px"}
key={key}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>

105
src/components/Card/MobileHomeCard.jsx Normal file
View File

@@ -0,0 +1,105 @@
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import cardimg from "../../assets/images/CardImg.png";
import { Badge } from "@chakra-ui/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
const MobileHomeCard = () => {
return (
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
}
padding={"1px"}
borderRadius={"10px"}
sx={{
"@media (max-width: 600px)": {
width: "90%",
margin: "0 auto",
},
}}
>
<Box
width={"502px"}
background={"#151419"}
borderRadius={"10px"}
minHeight={"502px"}
key={key}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Badge
backgroundColor={"#565263"}
color={"#fff"}
fontWeight={"400"}
borderRadius={"20px"}
padding={"3px 16px"}
>
INSIGHT
</Badge>
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
{date}
</Text>
<Text
color={"#fff"}
fontSize={"24px"}
marginBottom={"20px"}
minHeight={"73px"}
maxWidth={"460px"}
>
{text}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "1px solid #DE858E",
zIndex: "2",
}}
></Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
Read More
</Button>
</Box>
</Box>
</Box>
</Box>
);
};
export default MobileHomeCard;

138
src/components/HomePage/HomeBanner.jsx
View File

@@ -62,74 +62,80 @@ const HomeBanner = () => {
textAlign={"center"}
paddingTop={"12%"}
>
{BannerContent.map((item, index) => {
return (
<Box key={index}>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
// letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "45px",
},
"@media (max-width: 600px)": {
<Box>
<Text
as={"h2"}
fontWeight={700}
fontSize={"52px"}
textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
// letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "45px",
},
"@media (max-width: 600px)": {
fontSize: "38px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
fontSize: "24px",
marginTop: "2rem",
},
}}
>
{BannerContent[0].heading1}
{!isSmallScreen ? (
<>
<br />
<span
style={{
color: "#fff",
fontWeight: "500",
fontSize: "38px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
}}
>
{BannerContent[0].heading2}
</span>
</>
) : (
<>
<br />
<span
style={{
color: "#fff",
fontWeight: "500",
fontSize: "24px",
marginTop: "2rem",
},
}}
>
{item.heading1}
{!isSmallScreen ? (
<span
fontSize={"42px"}
style={{
color: "#fff",
fontWeight: "500",
}}
>
{item.heading2}
</span>
) : (
<span
style={{
color: "#fff",
fontWeight: "500",
fontSize: "24px",
}}
>
{item.heading2}
</span>
)}
</Text>
<Text
color={"#fff"}
fontSize={"22px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 600px)": {
fontSize: "17px",
},
}}
>
{item.subheading}
</Text>
</Box>
);
})}
}}
>
{BannerContent[0].heading2}
</span>
</>
)}
</Text>
<Text
color={"#fff"}
fontSize={"22px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
width={"80%"}
margin={"20px auto 0 auto"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 600px)": {
fontSize: "17px",
width: "100%",
},
}}
>
{BannerContent[1].subheading}
</Text>
</Box>
{BannerContent[2] && (
<Button
position={"relative"}

302
src/components/HomePage/Partner.jsx
View File

@@ -28,7 +28,8 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import { Navigation, Pagination } from "swiper/modules";
import { useState } from "react";
const imgWidth = {
width: "180px",
@@ -47,203 +48,130 @@ const Content = {
};
export default function Partner() {
const isSmallScreen = useMediaQuery("(max-width: 430px)");
console.log(isSmallScreen);
return (
<>
{isSmallScreen ? (
<Box
position={"relative"}
width={"full"}
overflow={"hidden"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"3rem"}
<Box
position={"relative"}
width={"full"}
overflow={"hidden"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"3rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
}}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
{Content.heading}
</Text>
{/* Slider */}
{Content.heading}
</Text>
{/* Slider */}
{/* Box1 */}
<Swiper
pagination={{
type: "fraction",
}}
navigation={true}
modules={[Navigation]}
loop={true}
style={{
marginBottom: "4rem",
}}
>
<SwiperSlide>
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
// flexWrap={"wrap"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
</SwiperSlide>
{/* Box2 */}
<SwiperSlide>
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
</SwiperSlide>
</Swiper>
</Box>
) : (
<Box
position={"relative"}
width={"full"}
overflow={"hidden"}
height={"auto"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
{/* Box1 */}
<Swiper
pagination={true}
navigation={true}
modules={[Navigation, Pagination]}
loop={true}
style={{
paddingBottom: "4rem",
}}
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"4rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
},
"@media (max-width: 412px)": {},
}}
>
{Content.heading}
</Text>
{/* Slider */}
{/* Box1 */}
{/* <Container maxW="container.lg"> */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<SwiperSlide>
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
// flexWrap={"wrap"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
</Box>
</Box>
</SwiperSlide>
{/* Box2 */}
{/* </Container> */}
</Box>
)}
<SwiperSlide>
<Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
marginBottom={"8rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
<Image src={ondc} sx={imgWidth} />
</Box>
<Box
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
gap={"2rem"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={ensurity} sx={imgWidth} />
<Image src={exr} sx={imgWidth} />
<Image src={iskon} sx={imgWidth} />
<Image src={smartcity} sx={imgWidth} />
<Image src={bescom} sx={imgWidth} />
</Box>
</Box>
</SwiperSlide>
</Swiper>
</Box>
</>
);
}

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

@@ -43,11 +43,9 @@ const Resources = () => {
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "35px",
},
"@media (max-width: 375px)": {
fontSize: "28px",
fontSize: "26px",
},
"@media (max-width: 375px)": {},
}}
>
{Content.heading}

53
src/components/MobileComponent/MobileSubnet2.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";
@@ -48,18 +49,12 @@ const MobileSubnet2 = () => {
textTransform={"capitalize"}
color={"#fff"}
>
P2P
01. Decentralisation
</Text>
<Text color={"#E1E1E1"}>
Rubix Decentralised Identity( DID) issued at L1 is the foundation
for building digital ownership enhancing applications.
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Only L1 powering full mobile nodes</ListItem>
<ListItem>
Mobile nodes with full state data will settle P2P . Consensus
provided by nearby node validators.
</ListItem>
<ListItem>
High scalability, Partition tolerance and portability
</ListItem>
</UnorderedList>
</Box>
<Box>
@@ -71,18 +66,14 @@ const MobileSubnet2 = () => {
textTransform={"capitalize"}
color={"#fff"}
>
Self Sovereign
02. Ultra Scalability
</Text>
<Text color={"#E1E1E1"}>
Unlike monolithic chains which become centralized and introduce
latency to achieve high throughput, in the Rubix object chain
architecture, where mobile nodes have real time full state data,
the network TPS will increase with increase in numbers of nodes.
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>
Permissioned subnets with no oracles and <br /> intermediaries
</ListItem>
<ListItem>INo block space ransom</ListItem>
<ListItem>
Zero risk of transactions being blocked out of <br />
chain.
</ListItem>
</UnorderedList>
</Box>
<Box>
@@ -94,16 +85,16 @@ const MobileSubnet2 = () => {
textTransform={"capitalize"}
color={"#fff"}
>
Easier
03. Data Security and Privacy
</Text>
<Text color={"#E1E1E1"}>
{" "}
Rubix Decentralised Identity(DID) issued at L1 is the foundation
for building digital ownership enhancing applications
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>Leverage own infrastructure for block space</ListItem>
<ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
<ListItem>WASM compiler for smooth code migration</ListItem>
</UnorderedList>
</Box>
<Box>
{/* <Box paddingBottom={"2rem"}>
<Text
as={"h2"}
paddingTop={"2rem"}
@@ -112,7 +103,7 @@ const MobileSubnet2 = () => {
textTransform={"capitalize"}
color={"#fff"}
>
cheaper
All In One Composable Stack
</Text>
<UnorderedList color={"#E1E1E1"}>
<ListItem>No GAS fees</ListItem>
@@ -122,7 +113,7 @@ const MobileSubnet2 = () => {
resources
</ListItem>
</UnorderedList>
</Box>
</Box> */}
</Box>
</Box>
</Box>

8
src/components/MobileComponent/MobileSubnet3.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import stack from "../../assets/images/stacksmall.png";
@@ -24,11 +25,6 @@ const MobileSubnet3 = () => {
</Text>
<Image
src={stack}
// position={"absolute"}
// right={"0"}
// top={"0"}
// marginLeft={"auto"}
// marginRight={"auto"}
width={"140px"}
transform="translateY(-10%)"
animation="floatAnimation 2s infinite alternate"
@@ -130,7 +126,7 @@ const MobileSubnet3 = () => {
</UnorderedList>
</Box>
<Box>
<Box paddingBottom={"2rem"}>
<Text
as={"h2"}
paddingTop={"2rem"}

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

@@ -19,54 +19,58 @@ 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 Slider from "react-slick";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Navigation, Pagination } from "swiper/modules";
import { useState } from "react";
// Settings for the slider
const settings = {
dots: true,
arrows: false,
fade: false,
infinite: true,
autoplay: true,
speed: 500,
autoplaySpeed: 5000,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 0,
},
},
],
};
const imgWidth = {
width: "165px",
height: "82px",
objectFit: "contain",
};
import { useMediaQuery } from "@chakra-ui/react";
const Content = {
heading: `Look Who's Building on Rubix`,
};
const tabWidth = "180px";
const phoneWidth = "150px";
const clients = [
{
img: chainx,
},
{
img: ensurity,
},
{
img: exr,
},
{
img: finalo,
},
{
img: iskon,
},
{
img: jupiter,
},
{
img: ondc,
},
{
img: smartcity,
},
{
img: ymca,
},
{
img: bescom,
},
];
export default function PartnerMobile() {
const [slider, setSlider] = useState(null);
const top = useBreakpointValue({ base: "90%", md: "50%" });
const side = useBreakpointValue({ base: "30%", md: "10px" });
return (
<Box
position={"relative"}
@@ -76,52 +80,8 @@ export default function PartnerMobile() {
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"2rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 996px)": {
paddingBottom: "3rem",
},
}}
padding={"1rem"}
>
{/* Left Icon */}
<IconButton
aria-label="left-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
left={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickPrev()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowBackIcon />
</IconButton>
{/* Right Icon */}
<IconButton
aria-label="right-arrow"
colorScheme="messenger"
borderRadius="full"
position="absolute"
right={side}
top={top}
transform={"translate(0%, -50%)"}
zIndex={2}
onClick={() => slider?.slickNext()}
background={"#DE858E"}
_hover={{
background: "#DE858E",
}}
>
<ArrowForwardIcon />
</IconButton>
<Text
as={"h2"}
paddingTop={"2rem"}
@@ -142,38 +102,193 @@ export default function PartnerMobile() {
</Text>
{/* Slider */}
<Slider
{...settings}
ref={(slider) => setSlider(slider)}
style={{ marginBottom: "4rem" }}
>
{/* Box1 */}
{/* <Container maxW="container.lg"> */}
<Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
sx={{
"@media (max-width: 996px)": {},
}}
>
<Image src={chainx} sx={imgWidth} />
<Image src={jupiter} sx={imgWidth} />
</Box>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
>
<Image src={finalo} sx={imgWidth} />
<Image src={ymca} sx={imgWidth} />
</Box>
</Box>
{/* Box2 */}
<Box>
<Swiper
pagination={true}
navigation={true}
modules={[Navigation, Pagination]}
loop={true}
style={{
PaddingBottom: "2rem",
}}
>
<SwiperSlide>
<Box>
<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={chainx}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
{/* </Container> */}
</Slider>
<Image
src={jupiter}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
</Box>
<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: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
<Image
src={bescom}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
</Box>
</Box>
</SwiperSlide>
{/* Box2 */}
<SwiperSlide>
<Box>
<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: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
<Image
src={ondc}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
</Box>
<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={ensurity}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
<Image
src={exr}
sx={{
"@media (max-width: 996px)": {
width: `${tabWidth}`,
height: "82px",
objectFit: "contain",
},
"@media (max-width: 600px)": {
width: `${phoneWidth}`,
},
}}
/>
</Box>
</Box>
</SwiperSlide>
</Swiper>
</Box>
{/* Box2 */}
</Box>
);
}

51
src/components/MobileComponent/ResourcesMobile.jsx Normal file
View File

@@ -0,0 +1,51 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import HomeCard from "../Card/HomeCard";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import MobileHomeCard from "../Card/MobileHomeCard";
const content = [
{
id: 1,
date: `Published: March 13, 2020`,
text: `Multichain over Blockchain — A reality check on security threat`,
},
{
id: 2,
date: `Published: March 13, 2020`,
text: `Financial Times Crypto & Digital Assets Summit Panel`,
},
{
id: 3,
date: `Published: March 13, 2020`,
text: `Enterprise blockchains on a Public Chain!`,
},
];
const ResourcesMobile = () => {
return (
<Box backgroundColor={"#101015"}>
{content.map((item) => (
<>
<Swiper
pagination={true}
navigation={true}
modules={[Navigation, Pagination]}
loop={true}
>
<SwiperSlide>
<MobileHomeCard key={item.id} date={item.date} text={item.text} />
</SwiperSlide>
</Swiper>
</>
))}
</Box>
);
};
export default ResourcesMobile;

26
src/index.css
View File

@@ -49,6 +49,32 @@
/* background-color: #de858e; */
}
.swiper-pagination {
top: 90% !important;
}
.swiper-pagination-bullet {
background: #383838 !important;
}
.swiper-pagination-bullet-active {
background: #fff !important;
}
@media only screen and (max-width: 600px) {
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 20px;
}
.swiper-pagination-bullets {
height: fit-content !important;
}
.swiper-pagination {
top: 95% !important;
}
}
/* html {
font-family: "Mona Sans";
} */

6
src/pages/HomePage.jsx
View File

@@ -10,6 +10,8 @@ import WhitePaper from "../components/HomePage/WhitePaper";
import MobileSubnet from "../components/MobileComponent/MobileSubnet";
import { NewSubnetComp } from "../components/SubnetsComponent";
import Partner from "../components/HomePage/Partner";
import PartnerMobile from "../components/MobileComponent/PartnerMobile";
import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
// import { useBreakpointValue } from "@chakra-ui/react";
const HomePage = () => {
@@ -40,9 +42,9 @@ const HomePage = () => {
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
<Stats />
<WhitePaper />
<Partner />
{!isMobile ? <Partner /> : <PartnerMobile />}
{/* <Client /> */}
<Resources />
{!isMobile ? <Resources /> : <ResourcesMobile />}
<Footer />
</>
);