Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-28 03:25:51 +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

118
src/components/Community/CommunityBanner.jsx
View File

@@ -1,5 +1,7 @@
/* eslint-disable react/no-unknown-property */
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/communityBanner.webp";
import { Link } from "react-router-dom";
const BannerContent = [
{
@@ -86,7 +88,7 @@ const CommunityBanner = () => {
</span>
<br
sx={{
display: ["block", "none"], // Show by default, hide on screens less than 600px wide
display: "block", // Show by default, hide on screens less than 600px wide
"@media (max-width: 600px)": {
display: "none", // Hide on screens less than 600px wide
},
@@ -123,63 +125,65 @@ const CommunityBanner = () => {
{BannerContent[1].subheading}
</Text>
</Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"280px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"18px"}
zIndex={"1"}
overflow={"hidden"}
marginTop={"2rem"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
"@media (max-width: 500px)": {
fontSize: "14px",
width: "230px",
height: "44px",
marginTop: "2rem",
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
<Link to="" target="_blank">
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"280px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"18px"}
zIndex={"1"}
overflow={"hidden"}
marginTop={"2rem"}
sx={{
"::before": {
content: '""',
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "65px",
height: "65px",
borderRadius: "50%",
transition: "0.35s linear",
zIndex: -1,
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
opacity: "0",
},
"&:hover::before": {
width: "100%",
height: "120%",
borderRadius: "0px",
opacity: "1",
},
"@media (max-width: 500px)": {
fontSize: "14px",
width: "230px",
height: "44px",
marginTop: "2rem",
bgGradient:
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
color: "#000",
fontWeight: "600",
},
}}
_hover={{
color: "#000",
fontWeight: "600",
},
}}
_hover={{
color: "#000",
border: "1px solid white",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
border: "1px solid white",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Link>
</Box>
</Container>
</Box>

4
src/components/Community/CommunityCard.jsx
View File

@@ -57,7 +57,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,
link: `https://www.linkedin.com/in/eser-torun-cfa?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
},
@@ -93,7 +93,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,
link: `https://www.linkedin.com/in/arnabghose997?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
},

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