mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 19:45:49 +00:00
community page
This commit is contained in:
YasinShaikh123
@@ -12,6 +12,12 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
|
||||
position={"relative"}
|
||||
// minHeight={"402px"}
|
||||
key={key}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width:'320px',
|
||||
minHeight:'300px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
@@ -26,15 +32,44 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
|
||||
<br />
|
||||
{curentDate}
|
||||
</Text>
|
||||
<Image src={CardImg2} borderTopLeftRadius={"10px"} borderTopRightRadius={"10px"} />
|
||||
<Image
|
||||
src={CardImg2}
|
||||
borderTopLeftRadius={"10px"}
|
||||
borderTopRightRadius={"10px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box padding={"1rem"}>
|
||||
<Text fontSize={"14px"} color={"#979797"} marginBottom={"10px"}>
|
||||
{date}
|
||||
</Text>
|
||||
<Text color={"#fff"} fontSize={"20px"} marginBottom={"10px"}>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"20px"}
|
||||
marginBottom={"10px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "16px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
<Text color={"#E1E1E1"}>{para}</Text>
|
||||
<Text
|
||||
color={"#E1E1E1"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{para}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -13,6 +13,11 @@ const InsightsCard = ({ key, title, text }) => {
|
||||
}
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
marginBottom:'2rem'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
className="card__container"
|
||||
@@ -24,6 +29,12 @@ const InsightsCard = ({ key, title, text }) => {
|
||||
minHeight={"430px"}
|
||||
key={key}
|
||||
transition={"all 1s"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width:'320px',
|
||||
minHeight:'300px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text position={"relative"}>
|
||||
<Image src={cardimg} />
|
||||
@@ -39,13 +50,25 @@ const InsightsCard = ({ key, title, text }) => {
|
||||
bottom={"14px"}
|
||||
left={"12px"}
|
||||
transition={"all 1s"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize:'12px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
INSIGHT
|
||||
</Badge>
|
||||
)}
|
||||
</Text>
|
||||
<Box padding={"1rem"}>
|
||||
<Text fontSize={"20px"} color={"#ffffff"} margin={"10px 0px"}>
|
||||
<Text fontSize={"20px"} color={"#ffffff"} margin={"10px 0px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize:'16px',
|
||||
margin:'0px 0px 5px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
@@ -54,6 +77,11 @@ const InsightsCard = ({ key, title, text }) => {
|
||||
marginBottom={"20px"}
|
||||
minHeight={"73px"}
|
||||
maxWidth={"460px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize:'14px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import {ArrowForwardIcon } from '@chakra-ui/icons'
|
||||
import Arrow from "../../assets/images/arrow-right.png"
|
||||
import { ArrowForwardIcon } from "@chakra-ui/icons";
|
||||
import Arrow from "../../assets/images/arrow-right.png";
|
||||
|
||||
const PlaceCard = ({ key, text, cardicon ,title,button}) => {
|
||||
const PlaceCard = ({ key, text, cardicon, title, button }) => {
|
||||
return (
|
||||
<Box
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
>
|
||||
<Box padding={"1px"} borderRadius={"10px"}>
|
||||
<Box
|
||||
width={"502px"}
|
||||
background={"#46464647"}
|
||||
@@ -16,11 +13,32 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
|
||||
minHeight={"350px"}
|
||||
key={key}
|
||||
padding={"15px 20px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "320px",
|
||||
fontWeight: "400",
|
||||
minHeight:'290px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={cardicon} />
|
||||
<Image
|
||||
src={cardicon}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
height: "40px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"} >
|
||||
<span style={{borderBottom:'1px solid #DE858E'}}>{title}</span>
|
||||
<Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "15px",
|
||||
margin:'10px 0'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<span style={{ borderBottom: "1px solid #DE858E" }}>{title}</span>
|
||||
</Text>
|
||||
<Text
|
||||
color={"#D4D4D4"}
|
||||
@@ -28,13 +46,15 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
|
||||
marginBottom={"20px"}
|
||||
minHeight={"73px"}
|
||||
maxWidth={"460px"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Text
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
@@ -43,8 +63,20 @@ const PlaceCard = ({ key, text, cardicon ,title,button}) => {
|
||||
fontWeight={"400"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{button} <Image src={Arrow} style={{width:'30px',marginLeft:'8px'}} />
|
||||
{button}
|
||||
<Image src={Arrow} style={{ width: "30px", marginLeft: "8px" }}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "25px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -68,16 +68,12 @@ const CommunityBanner = () => {
|
||||
letterSpacing={"1px"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
fontSize: "35px",
|
||||
fontSize: "46px",
|
||||
},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
marginBottom: "2rem",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
marginTop: "2rem",
|
||||
marginBottom: "2rem",
|
||||
fontSize: "36px",
|
||||
fontSize: "40px",
|
||||
marginBottom: "0rem",
|
||||
lineHeight:'54px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -113,6 +109,7 @@ const CommunityBanner = () => {
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "16px",
|
||||
lineHeight:'28px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -162,6 +159,10 @@ const CommunityBanner = () => {
|
||||
width: "230px",
|
||||
height: "44px",
|
||||
marginTop: "2rem",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
|
||||
@@ -64,99 +64,175 @@ const Connect = () => {
|
||||
backgroundRepeat={"no-repeat"}
|
||||
>
|
||||
<Container
|
||||
maxW={"container.xl"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"5rem"}
|
||||
paddingTop={"5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 435px)": {},
|
||||
}}
|
||||
maxW={"container.xl"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"5rem"}
|
||||
paddingTop={"5rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding: "4rem 1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
className="rubix-text-title"
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"700"}
|
||||
// fontSize={"40px"}
|
||||
fontSize={"38px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"3rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight: "400",
|
||||
marginBottom: "30px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Connect with Rubix community
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
spacing={4}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
padding={"1px"}
|
||||
<SimpleGrid
|
||||
spacing={4}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<Box
|
||||
padding={"1px"}
|
||||
borderRadius={"10px"}
|
||||
key={item.id}
|
||||
_hover={{
|
||||
backgroundImage:
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
background={"#000"}
|
||||
borderRadius={"10px"}
|
||||
key={item.id}
|
||||
_hover={{
|
||||
backgroundImage:
|
||||
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
|
||||
minH={"270px"}
|
||||
border={"1px solid #454545"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
minHeight: "200px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
background={"#000"}
|
||||
borderRadius={"10px"}
|
||||
minH={"270px"}
|
||||
border={"1px solid #454545"}
|
||||
<CardHeader
|
||||
textAlign={"center"}
|
||||
paddingBottom={"0px"}
|
||||
marginTop={"2rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
marginTop: "0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardHeader
|
||||
textAlign={"center"}
|
||||
paddingBottom={"0px"}
|
||||
marginTop={"2rem"}
|
||||
{/* <Image src={item.img} /> */}
|
||||
<Heading
|
||||
size="md"
|
||||
fontSize={"22px"}
|
||||
fontWeight={"500"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "17px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* <Image src={item.img} /> */}
|
||||
<Heading
|
||||
size="md"
|
||||
className="rubix-text-large"
|
||||
fontWeight={"500"}
|
||||
{item.head}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
<CardBody
|
||||
padding={"0px"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
gap={"2.5rem"}
|
||||
>
|
||||
<Link placeContent={"center"}>
|
||||
<Box>
|
||||
<Image
|
||||
src={item.logo1}
|
||||
margin={"0 auto 20px auto"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "50px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Text
|
||||
fontSize={"17px"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.head}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
<CardBody
|
||||
padding={"0px"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"center"}
|
||||
gap={"2.5rem"}
|
||||
>
|
||||
<Link placeContent={"center"}>
|
||||
<Box>
|
||||
<Image src={item.logo1} margin={"0 auto 20px auto"} />
|
||||
</Box>
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social1}
|
||||
{item.social1}
|
||||
</Text>
|
||||
</Link>
|
||||
<Link placeContent={"center"}>
|
||||
<Image
|
||||
src={item.logo2}
|
||||
margin={"0 auto 20px auto"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "50px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
fontSize={"17px"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.social2}
|
||||
</Text>
|
||||
</Link>
|
||||
{item.social3 ? (
|
||||
<Link display={"grid"} placeContent={"center"}>
|
||||
<Image
|
||||
src={item.logo3}
|
||||
margin={"0 auto 20px auto"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
width: "50px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
fontSize={"17px"}
|
||||
color={"#fff"}
|
||||
fontWeight={"400"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.social3}
|
||||
</Text>
|
||||
</Link>
|
||||
<Link placeContent={"center"}>
|
||||
<Image src={item.logo2} margin={"0 auto 20px auto"} />
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social2}
|
||||
</Text>
|
||||
</Link>
|
||||
{item.social3 ? (
|
||||
<Link display={"grid"} placeContent={"center"}>
|
||||
<Image src={item.logo3} margin={"0 auto 20px auto"} />
|
||||
<Text className="rubix-text-small" fontWeight={"400"}>
|
||||
{item.social3}
|
||||
</Text>
|
||||
</Link>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Box>
|
||||
</>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -40,8 +40,7 @@ const Content = {
|
||||
heading: `Latest Happenings`,
|
||||
};
|
||||
|
||||
const Happen = () => {
|
||||
return (
|
||||
const Happen = () => { return (
|
||||
<Box
|
||||
// height={"100vh"}
|
||||
background={"#000"}
|
||||
@@ -56,7 +55,9 @@ const Happen = () => {
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 435px)": {},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'1rem'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
@@ -67,6 +68,12 @@ const Happen = () => {
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight:'400'
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Content.heading}
|
||||
</Text>
|
||||
@@ -74,8 +81,8 @@ const Happen = () => {
|
||||
paddingBottom={"2rem"}
|
||||
// height={"50vh"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
paddingLeft: "3rem",
|
||||
"@media (max-width: 500px)": {
|
||||
paddingLeft: "0rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -83,6 +90,15 @@ const Happen = () => {
|
||||
<SimpleGrid
|
||||
spacing={5}
|
||||
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
display:'flex',
|
||||
overflowX:'scroll',
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "0px",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Latest.map((item) => (
|
||||
<HappenCard
|
||||
@@ -96,7 +112,13 @@ const Happen = () => {
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
<Box textAlign={"center"} marginTop={"4rem"}>
|
||||
<Box textAlign={"center"} marginTop={"4rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
marginTop:'2rem',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
@@ -134,6 +156,17 @@ const Happen = () => {
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight:'400',
|
||||
height:'40px',
|
||||
width:'140px',
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
fontWeight: "600",
|
||||
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
|
||||
@@ -39,8 +39,8 @@ const Insights = () => {
|
||||
paddingBottom={"2rem"}
|
||||
// height={"50vh"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
paddingLeft: "3rem",
|
||||
"@media (max-width: 500px)": {
|
||||
padding: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -53,11 +53,9 @@ const Insights = () => {
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "28px",
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -79,54 +77,71 @@ const Insights = () => {
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box textAlign={"center"} marginTop={"1rem"}>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"210px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
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",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
<Box
|
||||
textAlign={"center"}
|
||||
marginTop={"1rem"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
marginTop: "0px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
position={"relative"}
|
||||
backgroundColor={"transparent"}
|
||||
cursor={"pointer"}
|
||||
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||
color={"#fff"}
|
||||
width={"210px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
border={"1px solid white"}
|
||||
borderRadius={"10px"}
|
||||
fontSize={"20px"}
|
||||
zIndex={"1"}
|
||||
overflow={"hidden"}
|
||||
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",
|
||||
height: "40px",
|
||||
width: "140px",
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color: "#000",
|
||||
border: "none",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</Box>
|
||||
fontWeight: "600",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
border: "none",
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,15 +29,16 @@ const LearnMore = () => {
|
||||
paddingTop={"3rem"}
|
||||
paddingBottom={"1rem"}
|
||||
fontWeight={700}
|
||||
// fontSize={"40px"}
|
||||
className="rubix-text-title"
|
||||
fontSize={"38px"}
|
||||
textAlign={"center"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "20px",
|
||||
fontWeight:'500',
|
||||
marginBottom:'5px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -53,10 +54,17 @@ const LearnMore = () => {
|
||||
>
|
||||
<Text
|
||||
color={"#E4E4E4"}
|
||||
// fontSize={"22px"}
|
||||
className="rubix-text-large"
|
||||
fontSize={"22px"}
|
||||
marginBottom={"2rem"}
|
||||
fontFamily={"Poppins"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "14px",
|
||||
fontWeight:'100',
|
||||
marginBottom:'5px',
|
||||
marginBottom:'30px'
|
||||
},
|
||||
}}
|
||||
>
|
||||
{SectionContent.subContent}
|
||||
</Text>
|
||||
@@ -64,7 +72,7 @@ const LearnMore = () => {
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
minH={"60px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
@@ -97,6 +105,16 @@ const LearnMore = () => {
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'5px 15px',
|
||||
height:'40px',
|
||||
fontSize:'14px',
|
||||
margin:'0 7px',
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
@@ -109,7 +127,7 @@ const LearnMore = () => {
|
||||
<Button
|
||||
fontSize={"20px"}
|
||||
// minW={"284px"}
|
||||
minH={"60px"}
|
||||
height={"54px"}
|
||||
fontFamily={"Poppins"}
|
||||
backgroundColor={"transparent"}
|
||||
border={"1px solid #fff"}
|
||||
@@ -142,6 +160,16 @@ const LearnMore = () => {
|
||||
borderRadius: "0px",
|
||||
opacity: "1",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'5px 15px',
|
||||
height:'40px',
|
||||
fontSize:'14px',
|
||||
margin:'0 7px',
|
||||
bgGradient:
|
||||
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
||||
color:'#000',
|
||||
fontWeight:'600'
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "#000",
|
||||
|
||||
@@ -50,13 +50,18 @@ const Place = () => {
|
||||
backgroundSize={"cover"}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
backgroundImage={`url(${Banner})`}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
backgroundImage: "inherit",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
paddingLeft={"7rem"}
|
||||
// height={"50vh"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
paddingLeft: "3rem",
|
||||
"@media (max-width: 500px)": {
|
||||
paddingLeft: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -68,11 +73,9 @@ const Place = () => {
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "28px",
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
fontWeight:'400',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
236
src/components/MobileComponent/MobileCommunityCard.jsx
Normal file
236
src/components/MobileComponent/MobileCommunityCard.jsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Box, Container, SimpleGrid, Text, Image } from "@chakra-ui/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import imgOne from "../../assets/images/Component115.png";
|
||||
import imgtwo from "../../assets/images/Component116.png";
|
||||
import imgthree from "../../assets/images/Component117.png";
|
||||
import imgfour from "../../assets/images/Component118.png";
|
||||
import imgfive from "../../assets/images/Component119.png";
|
||||
import imgsix from "../../assets/images/Component120.png";
|
||||
import imgseven from "../../assets/images/Component121.png";
|
||||
import imgeight from "../../assets/images/Component122.png";
|
||||
import imgnine from "../../assets/images/Component123.png";
|
||||
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"
|
||||
|
||||
const individuals = [
|
||||
{
|
||||
location: "india",
|
||||
name: "KC Reddy",
|
||||
jobTitle: "Founder/CTO",
|
||||
description:
|
||||
"A visionary poised to deliver trustless, secure internet and passwordless cyber security",
|
||||
imageUrl: imgOne,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Ravi Srinivasa Murty",
|
||||
jobTitle: "Chief Strategy Officer",
|
||||
description:
|
||||
"Global business leader with a technology orientation and a vision to drive economic value.",
|
||||
imageUrl: imgtwo,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Hari Krishnan",
|
||||
jobTitle: "Chief Growth Officer",
|
||||
description:
|
||||
"Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
|
||||
imageUrl: imgthree,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Eser Torun, CFA",
|
||||
jobTitle: "Chief Growth Officer",
|
||||
description:
|
||||
"Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
|
||||
imageUrl: imgten,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Gokul P S",
|
||||
jobTitle: "Core Blockchain Developer",
|
||||
description:
|
||||
"A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
|
||||
imageUrl: imgfour,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Allen Iype P Cherian",
|
||||
jobTitle: "Blockchain Engineer",
|
||||
description:
|
||||
"A motivated and responsible B tech Graduate, with a strong work ethic.",
|
||||
imageUrl: imgfive,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Nidhin M.",
|
||||
jobTitle: "Lead Engineer",
|
||||
description:
|
||||
"Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
|
||||
imageUrl: imgsix,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Arnab Ghose",
|
||||
jobTitle: "Senior Blockchain Engineer",
|
||||
description:
|
||||
"Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
|
||||
imageUrl: imgeleven,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "ASHITA GUPTA",
|
||||
jobTitle: "Blockchain Developer",
|
||||
description:
|
||||
"Enthusiastic blockchain developer who pushes herself every day to excel at work.",
|
||||
imageUrl: imgseven,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Vaishnav C H",
|
||||
jobTitle: "Blockchain Developer",
|
||||
description:
|
||||
"A very humble and talented Golang developer and mechatronics and blockchain engineer",
|
||||
imageUrl: imgeight,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Maneesha Panda",
|
||||
jobTitle: "Blockchain Engineer",
|
||||
description:
|
||||
"A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
|
||||
imageUrl: imgnine,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
name: "Maneesha Panda",
|
||||
jobTitle: "Blockchain Engineer",
|
||||
description:
|
||||
"A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
|
||||
imageUrl: imgnine,
|
||||
},
|
||||
];
|
||||
|
||||
const MobileCommunityCard = () => {
|
||||
return (
|
||||
<>
|
||||
<Box backgroundColor={"#101015"}>
|
||||
<Container
|
||||
maxW={"container.xl"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"6rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
padding: "3rem",
|
||||
},
|
||||
"@media (max-width: 500px)": {
|
||||
padding:'0 1rem',
|
||||
paddingBottom:'5rem'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"3rem"}
|
||||
paddingBottom={"3rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"38px"}
|
||||
textAlign={"left"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
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:'60px',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>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileCommunityCard;
|
||||
@@ -48,7 +48,42 @@
|
||||
color: #de858e;
|
||||
/* background-color: #de858e; */
|
||||
}
|
||||
|
||||
span.swiper-pagination-bullet {
|
||||
background: #de858e;
|
||||
width: 35px;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.team-slider .swiper-button-next:after {
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
right: 110px;
|
||||
background-image: radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e);
|
||||
}
|
||||
.team-slider .swiper-button-prev:after {
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
left: 110px;
|
||||
background-image: radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e);
|
||||
}
|
||||
/* html {
|
||||
font-family: "Mona Sans";
|
||||
} */
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import CommunityBanner from '../components/Community/CommunityBanner'
|
||||
import CommunityCard from '../components/Community/CommunityCard'
|
||||
import Place from '../components/Community/Place'
|
||||
@@ -7,12 +7,35 @@ import Happen from '../components/Community/Happen'
|
||||
import Insights from '../components/Community/Insights'
|
||||
import LearnMore from '../components/Community/LearnMore'
|
||||
import Footer from '../components/Footer/Footer'
|
||||
import MobileCommunityCard from '../components/MobileComponent/MobileCommunityCard'
|
||||
|
||||
const Community = () => {
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Scroll to the top of the page when the component mounts
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
const isMobile = windowWidth <= 996;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommunityBanner/>
|
||||
<CommunityCard/>
|
||||
{!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
|
||||
<Place />
|
||||
<Connect/>
|
||||
<Happen />
|
||||
|
||||
Reference in New Issue
Block a user