Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-29 01:35:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated UseCases blog content

Browse Source
This commit is contained in:
rockyeverlast
2024-04-16 20:34:44 +05:30
parent 2b0ef61017
commit dcdb49bc76
3 changed files with 144 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Box, Container, SimpleGrid, Text, Image } from "@chakra-ui/react";
@@ -16,7 +17,7 @@ import imgten from "../../assets/images/Component128.png";
import imgeleven from "../../assets/images/Component127.png";
import linkedin from "../../assets/images/linkedin.png";
import games from "../../assets/images/discot.png";
import {Pagination,Navigation} from "swiper/modules"
import { Pagination, Navigation } from "swiper/modules";
const individuals = [
{
@@ -48,7 +49,7 @@ const individuals = [
name: "Eser Torun, CFA",
jobTitle: "Chief Growth Officer",
description:
"Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
"Expert at balancing risk-taking with sound business judgment in decision-making.",
imageUrl: imgten,
},
{
@@ -80,7 +81,7 @@ const individuals = [
name: "Arnab Ghose",
jobTitle: "Senior Blockchain Engineer",
description:
"Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
"Master at handling complex tasks and gives 100% effort all the time.",
imageUrl: imgeleven,
},
{
@@ -118,9 +119,9 @@ const individuals = [
];
const MobileCommunityCard = () => {
return (
return (
<>
<Box backgroundColor={"#101015"}>
<Box backgroundColor={"#101015"}>
<Container
maxW={"container.xl"}
padding={"0 5rem"}
@@ -130,8 +131,8 @@ const MobileCommunityCard = () => {
padding: "3rem",
},
"@media (max-width: 500px)": {
padding:'0 1rem',
paddingBottom:'0rem'
padding: "0 1rem",
paddingBottom: "0rem",
},
}}
>
@@ -147,85 +148,87 @@ const MobileCommunityCard = () => {
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",
fontWeight:'400',
marginBottom:'0px',
paddingBottom:'30px'
fontWeight: "400",
marginBottom: "0px",
paddingBottom: "30px",
},
}}
>
Rubix Community
</Text>
<Swiper className="team-slider"
spaceBetween={20}
slidesPerView={2}
navigation={true}
pagination={{ clickable: true }}
modules={[ Navigation]} // Enables pagination and navigation modules
autoplay={{ delay: 3000 }}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
style={{paddingBottom:'8rem',position:'relative'}}
>
{individuals.map((item) => (
<SwiperSlide
// height={"100vh"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
<Text>
<Text
position="relative"
overflow="hidden"
_hover={{
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background:
"linear-gradient(to bottom, #f8697a8c 0%, #8d54f86e 86%)",
borderRadius: "5px",
},
}}
>
<Image src={item.imageUrl} />
</Text>
</Text>
<Swiper
className="team-slider"
spaceBetween={20}
slidesPerView={2}
navigation={true}
pagination={{ clickable: true }}
modules={[Navigation]} // Enables pagination and navigation modules
autoplay={{ delay: 3000 }}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
style={{ paddingBottom: "8rem", position: "relative" }}
>
{individuals.map((item, i) => (
<SwiperSlide
// height={"100vh"}
background={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
key={i}
>
<Text>
<Text
color={"#fff"}
fontSize={"16px"}
marginTop={"15px"}
maxWidth={"460px"}
position="relative"
overflow="hidden"
_hover={{
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background:
"linear-gradient(to bottom, #f8697a8c 0%, #8d54f86e 86%)",
borderRadius: "5px",
},
}}
>
{item.name}
<Image src={item.imageUrl} />
</Text>
<Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
{item.jobTitle}
</Text>
<Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
{item.description}
</Text>
<Text display={"flex"} marginTop={"20px"}>
<img
src={linkedin}
style={{
minWidth: "34px",
height: "34px",
marginBottom: "10px",
marginRight: "10px",
}}
/>
<img
src={games}
style={{ minWidth: "34px", height: "34px" }}
/>
</Text>
</SwiperSlide>
))}
</Swiper>
</Text>
<Text
color={"#fff"}
fontSize={"16px"}
marginTop={"15px"}
maxWidth={"460px"}
>
{item.name}
</Text>
<Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
{item.jobTitle}
</Text>
<Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
{item.description}
</Text>
<Text display={"flex"} marginTop={"20px"}>
<img
src={linkedin}
style={{
minWidth: "34px",
height: "34px",
marginBottom: "10px",
marginRight: "10px",
}}
/>
<img
src={games}
style={{ minWidth: "34px", height: "34px" }}
/>
</Text>
</SwiperSlide>
))}
</Swiper>
</Container>
</Box>
</>