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

spacing

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-09 13:00:11 +05:30
parent 27b2e99823
commit ee9ed5fc65
26 changed files with 305 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/BuildPage/BuildBanner.jsx
View File

@@ -34,10 +34,15 @@ const BuildBanner = () => {
}}
>
<Container
alignItems={"center"}
display={"flex"}
height={"100vh"}
alignContent={"center"}
paddingTop={"10%"}
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"4rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
@@ -55,9 +60,11 @@ const BuildBanner = () => {
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
fontSize={"52px"}
textTransform={"capitalize"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "35px",
@@ -76,7 +83,6 @@ const BuildBanner = () => {
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{BannerContent[0].heading2}
@@ -101,69 +107,55 @@ const BuildBanner = () => {
{BannerContent[1].subheading}
</Text>
</Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"216px"}
marginTop={"2rem"}
height={"56px"}
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={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Box>
</Container>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"3rem"}
paddingLeft={"4rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
},
"@media (max-width: 375px)": {
marginTop: "1rem",
},
}}
>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
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={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Container>
</Box>
);
};

16
src/components/BuildPage/Connect.jsx
View File

@@ -147,12 +147,16 @@ const Connect = () => {
{item.social2}
</Text>
</Link>
<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>
{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>
) : (
""
)}
{/* <>{console.log(item.logo1)}</> */}
</CardBody>
</Card>

4
src/components/BuildPage/LearnMore.jsx
View File

@@ -26,9 +26,9 @@ const LearnMore = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingBottom={"1rem"}
fontWeight={700}
// fontSize={"40px"}
fontSize={"40px"}
className="rubix-text-title"
textAlign={"center"}
textTransform={"capitalize"}

4
src/components/BuildPage/Solve.jsx
View File

@@ -154,8 +154,8 @@ const Solve = () => {
background={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
// fontWeight={"500"}
fontSize={"18px"}
fontWeight={"100"}
fontSize={"16px"}
padding={"0px"}
_hover={{
background: "transparent",

24
src/components/BuildPage/Tools.jsx
View File

@@ -62,17 +62,17 @@ const Tools = () => {
<Container maxW="container.xl">
<Text
fontFamily={"Mona Sans"}
fontWeight={"700"}
fontSize={"40px"}
fontWeight={"600"}
fontSize={"38px"}
color={"#fff"}
>
Tools and resources to help you succeed
Tools And Resources To Help You Succeed
</Text>
</Container>
<Container
maxW="container.xl"
justifyContent={"center"}
marginTop={"4rem"}
marginTop={"3rem"}
textAlign={"center"}
>
<SimpleGrid
@@ -83,7 +83,7 @@ const Tools = () => {
<>
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f866), color-stop(0.67, #f8697a9e));"
}
padding={"1px"}
borderRadius={"10px"}
@@ -94,8 +94,8 @@ const Tools = () => {
borderRadius={"10px"}
height={"100%"}
>
<CardHeader display={"flex"} justifyContent={"center"}>
<Image src={item.img} />
<CardHeader display={"flex"} justifyContent={"center"} paddingBottom={"15px"}>
<Image height={"70px"} src={item.img} />
{/* <Heading size="md"></Heading> */}
</CardHeader>
<CardBody
@@ -106,13 +106,13 @@ const Tools = () => {
<Text
color={"#fff"}
fontFamily={"Poppins"}
fontSize={"20px"}
fontSize={"18px"}
textAlign={"center"}
fontWeight={"400"}
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</CardBody>
<CardFooter justifyContent={"center"} cursor={"pointer"}>
<CardFooter justifyContent={"center"} cursor={"pointer"} paddingTop={"15px"}>
<Image
src={arrow}
transition="all .5s"
@@ -132,13 +132,13 @@ const Tools = () => {
cursor={"pointer"}
transition="0.3s ease-in"
color={"#fff"}
width={"227px"}
height={"60px"}
width={"216px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
fontSize={"18px"}
zIndex={"1"}
overflow={"hidden"}
marginTop={"4rem"}

4
src/components/BuildPage/WhyBuild.jsx
View File

@@ -115,7 +115,7 @@ const WhyBuild = () => {
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"30px"}
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
@@ -135,7 +135,7 @@ const WhyBuild = () => {
fontWeight={"400"}
color={"#E8E8E8"}
width={"100%"}
fontSize={"21px"}
fontSize={"20px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {

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

@@ -39,17 +39,17 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
content: "''",
position: "absolute",
bottom: 0,
left: "20px",
height: "67%",
left: "15px",
height: "62%",
width: "100%",
borderLeft: "1px solid #ffffff70",
}}
>
<img
src={linkedin}
style={{ minWidth: "42px", height: "42px", marginBottom: "10px" }}
style={{ minWidth: "34px", height: "34px", marginBottom: "10px" }}
/>
<img src={games} style={{ minWidth: "42px", height: "42px" }} />
<img src={games} style={{ minWidth: "34px", height: "34px" }} />
</Text>
</Text>
{/* <Text

2
src/components/Card/HappenCard.jsx
View File

@@ -26,7 +26,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
<br />
{curentDate}
</Text>
<Image src={CardImg2} />
<Image src={CardImg2} borderTopLeftRadius={"10px"} borderTopRightRadius={"10px"} />
<Box padding={"1rem"}>
<Text fontSize={"14px"} color={"#979797"} marginBottom={"10px"}>
{date}

2
src/components/Card/InsightsCard.jsx
View File

@@ -9,7 +9,7 @@ const InsightsCard = ({ key, title, text }) => {
return (
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75));"
}
padding={"1px"}
borderRadius={"10px"}

16
src/components/Card/LearnCard.jsx
View File

@@ -5,9 +5,6 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
const LearnCard = ({ id, src, alt, text }) => {
return (
<Box
backgroundImage={
"-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
}
padding={"1px"}
borderRadius={"10px"}
>
@@ -17,10 +14,11 @@ const LearnCard = ({ id, src, alt, text }) => {
<Box
display="inline-block"
width={"650px"}
width={"520px"}
height={"300px"}
background={"#151419"}
background={"#161616"}
borderRadius={"10px"}
padding={"20px"}
key={id}
sx={{
"@media (max-width: 435px)": {
@@ -28,17 +26,17 @@ const LearnCard = ({ id, src, alt, text }) => {
},
}}
>
<Box padding={"1rem"}>
<Image src={src} alt={alt} />
<Box padding={"1rem"} >
<Image height={"60px"} src={src} alt={alt} />
</Box>
<Box padding={"1rem"} height={"110px"}>
<Text
color={"#fff"}
color={"#E8E8E8"}
fontSize={"18px"}
fontFamily={"Poppins"}
marginBottom={"20px"}
fontWeight={"300"}
// fontWeight={"100"}
>
{text}
</Text>

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

@@ -35,10 +35,15 @@ const CommunityBanner = () => {
}}
>
<Container
alignItems={"center"}
display={"flex"}
height={"100vh"}
alignContent={"center"}
paddingTop={"10%"}
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
paddingLeft={"5rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 500px)": {
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
@@ -46,7 +51,7 @@ const CommunityBanner = () => {
}}
>
<Box
width={"90%"}
width={"75%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
@@ -56,9 +61,11 @@ const CommunityBanner = () => {
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
fontSize={"52px"}
// textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "35px",
@@ -69,22 +76,24 @@ const CommunityBanner = () => {
},
"@media (max-width: 500px)": {
marginTop: "2rem",
marginBottom:'2rem',
fontSize:'36px'
marginBottom: "2rem",
fontSize: "36px",
},
}}
>
{BannerContent[0].heading1} <br />
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{BannerContent[0].heading2}
</span>
{BannerContent[0].heading1}
</span>{" "}
<br />
{BannerContent[0].heading2}
</Text>
<Box marginTop={"1.5rem"} width={"80%"}
<Box
marginTop={"1.5rem"}
width={"80%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
@@ -93,7 +102,7 @@ const CommunityBanner = () => {
>
<Text
color={"#fff"}
fontSize={"25px"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
@@ -110,61 +119,60 @@ 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",
},
}}
_hover={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"320px"}
height={"60px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}
borderRadius={"10px"}
fontSize={"20px"}
zIndex={"1"}
overflow={"hidden"}
marginTop={"3rem"}
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"
},
}}
_hover={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Container>
</Box>
);

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

@@ -130,7 +130,7 @@ const CommunityCard = () => {
<Container
maxW={"container.xl"}
padding={"0 5rem"}
paddingBottom={"5rem"}
paddingBottom={"6rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
@@ -140,10 +140,10 @@ const CommunityCard = () => {
>
<Text
as={"h2"}
paddingTop={"3rem"}
paddingBottom={"2rem"}
paddingTop={"4rem"}
paddingBottom={"5rem"}
fontWeight={700}
fontSize={"40px"}
fontSize={"38px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
@@ -160,8 +160,8 @@ const CommunityCard = () => {
Rubix Community
</Text>
<SimpleGrid
spacing={10}
templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
spacing={"50px"}
templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
>
{individuals.map((item) => (
<CommCard

7
src/components/Community/Connect.jsx
View File

@@ -66,7 +66,8 @@ const Connect = () => {
<Container
maxW={"container.xl"}
padding={"0 5rem"}
paddingBottom={"2rem"}
paddingBottom={"5rem"}
paddingTop={"5rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
@@ -80,7 +81,7 @@ const Connect = () => {
fontWeight={"700"}
// fontSize={"40px"}
color={"#fff"}
marginBottom={"35px"}
marginBottom={"3rem"}
>
Connect with Rubix community
</Text>
@@ -138,7 +139,7 @@ const Connect = () => {
<Image src={item.logo2} margin={"0 auto 20px auto"} />
<Text className="rubix-text-small" fontWeight={"400"}>
{item.social2}
</Text>
</Text>
</Link>
{item.social3 ? (
<Link display={"grid"} placeContent={"center"}>

6
src/components/Community/Happen.jsx
View File

@@ -81,7 +81,7 @@ const Happen = () => {
>
<Box>
<SimpleGrid
spacing={4}
spacing={5}
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
>
{Latest.map((item) => (
@@ -103,8 +103,8 @@ const Happen = () => {
cursor={"pointer"}
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
width={"216px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}

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

@@ -86,8 +86,8 @@ const Insights = () => {
cursor={"pointer"}
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
width={"210px"}
height={"54px"}
fontFamily={"Poppins"}
fontWeight={"400"}
border={"1px solid white"}

6
src/components/Community/LearnMore.jsx
View File

@@ -26,8 +26,8 @@ const LearnMore = () => {
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingTop={"3rem"}
paddingBottom={"1rem"}
fontWeight={700}
// fontSize={"40px"}
className="rubix-text-title"
@@ -49,7 +49,7 @@ const LearnMore = () => {
display={"grid"}
placeContent={"center"}
// height={"30vh"}
paddingBottom={"3rem"}
paddingBottom={"4rem"}
>
<Text
color={"#E4E4E4"}

8
src/components/Community/Place.jsx
View File

@@ -45,13 +45,14 @@ const Place = () => {
<Box
// height={"100vh"}
background={"#000"}
paddingTop={"4rem"}
paddingBottom={"4rem"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
backgroundImage={`url(${Banner})`}
>
<Box
paddingLeft={"7rem"}
paddingBottom={"2rem"}
// height={"50vh"}
sx={{
"@media (max-width: 435px)": {
@@ -61,10 +62,9 @@ const Place = () => {
>
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingBottom={"3rem"}
fontWeight={700}
fontSize={"40px"}
fontSize={"38px"}
textTransform={"capitalize"}
color={"#fff"}
sx={{

54
src/components/Contact/Form.jsx
View File

@@ -82,7 +82,7 @@ const Contact = () => {
justifyContent={"start"}
alignItems={"baseline"}
gap={"2rem"}
padding={"3rem 0rem"}
paddingTop={"5rem"}
sx={{
"@media (max-width: 2160px)": {},
"@media (max-width: 1440px)": {},
@@ -133,17 +133,18 @@ const Contact = () => {
textTransform={"capitalize"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"20px"}
fontSize={"18px"}
marginBottom={"10px"}
>
Contact Us
</Badge>
<Box textAlign={"left"} marginBottom={"2rem"}>
<Box textAlign={"left"} marginBottom={"3rem"}>
<Text
as={"h2"}
className="rubix-text-title"
fontWeight={"700"}
fontWeight={"600"}
textTransform={"capitalize"}
lineHeight={"54px"}
lineHeight={"47px"}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 768px)": {},
@@ -153,7 +154,7 @@ const Contact = () => {
Start reaching <br /> your digital goals
</Text>
</Box>
<Box marginBottom={"2rem"}>
<Box marginBottom={"3em"}>
<Badge
textAlign={"left"}
background={"transparent"}
@@ -161,7 +162,7 @@ const Contact = () => {
textTransform={"capitalize"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"20px"}
fontSize={"18px"}
>
Social Media
</Badge>
@@ -177,7 +178,7 @@ const Contact = () => {
</Box>
</Box>
<Box marginBottom={"2rem"}>
<Box marginBottom={"3rem"}>
<Badge
textAlign={"left"}
background={"transparent"}
@@ -186,6 +187,7 @@ const Contact = () => {
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"18px"}
padding={"0px"}
>
Chat to us
</Badge>
@@ -213,6 +215,7 @@ const Contact = () => {
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"18px"}
padding={"0px"}
>
Call us
</Badge>
@@ -284,9 +287,10 @@ const Contact = () => {
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
First Name*
@@ -321,9 +325,10 @@ const Contact = () => {
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
Last Name*
@@ -379,9 +384,10 @@ const Contact = () => {
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
Email*
@@ -416,9 +422,10 @@ const Contact = () => {
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
Phone*
@@ -461,9 +468,10 @@ const Contact = () => {
<Box width={"100%"} minH={"120px"}>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
Choose type of inquiry
@@ -519,15 +527,16 @@ const Contact = () => {
>
<label
style={{
fontSize: "22px",
color: "#fff",
fontSize: "20px",
color: "#DFDFDF",
fontFamily: "Poppins",
fontWeight:'400'
}}
>
Message*
</label>
<Textarea
placeholder="Type your message here..."
// placeholder="Type your message here..."
size="xl"
resize="vertical"
minH={"200px"}
@@ -543,6 +552,7 @@ const Contact = () => {
/>
<Button
type="submit"
border={"none"}
isLoading={isLoading}
loadingText="Submitting"
fontFamily={"poppins"}
@@ -556,7 +566,7 @@ const Contact = () => {
minHeight={"55px"}
padding={"0rem 2rem 0rem 2rem"}
_hover={{
background: "#ef843c",
background: "DE858E",
color: "#fff",
}}
>

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

@@ -71,6 +71,7 @@ const HomeBanner = () => {
textTransform={"upperCase"}
color={"#DE858E"}
lineHeight={"62px"}
// letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "45px",

2
src/components/HomePage/WhitePaper.jsx
View File

@@ -26,7 +26,7 @@ const WhitePaper = () => {
<Text
as={"h2"}
paddingTop={"2rem"}
paddingBottom={"2rem"}
paddingBottom={"1rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"center"}

10
src/components/LearnPage/Faq.jsx
View File

@@ -49,9 +49,11 @@ const accordion = [
export const Faq = () => {
return (
<Box
backgroundImage={`url(${banner})`}
// backgroundImage={`url(${banner})`}
backgroundColor={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
borderBottom={"1px solid #ffffff59"}
>
<Container
maxW={"container.xl"}
@@ -92,7 +94,7 @@ export const Faq = () => {
borderTop={"none"}
borderBottom={"none"}
marginBottom={"1rem"}
padding={"1.5rem"}
padding={"20px"}
borderRadius={"10px"}
background={"#161616"}
>
@@ -106,7 +108,7 @@ export const Faq = () => {
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"30px"}
fontSize={"24px"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {},
@@ -130,7 +132,7 @@ export const Faq = () => {
fontWeight={"300"}
color={"#BDBDBD"}
width={"100%"}
fontSize={"21px"}
fontSize={"18px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {},

133
src/components/LearnPage/LearnBanner.jsx
View File

@@ -3,7 +3,8 @@ import banner from "../../assets/images/learnBanner.webp";
const BannerContent = [
{
heading1: `Powerful blockchain tools`,
head:'Powerful',
heading1: ` blockchain tools`,
heading2: `for developers`,
},
{
@@ -35,6 +36,11 @@ const LearnBanner = () => {
}}
>
<Container
alignItems={"center"}
display={"flex"}
height={"100vh"}
alignContent={"center"}
paddingTop={"10%"}
maxW="container.xl"
textAlign={"left"}
marginTop={"2rem"}
@@ -52,13 +58,16 @@ const LearnBanner = () => {
width: "100%",
},
}}
>
>
<Text
as={"h2"}
fontWeight={700}
fontSize={"60px"}
fontSize={"52px"}
textTransform={"Capitalize"}
color={"#DE858E"}
lineHeight={"62px"}
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "35px",
@@ -73,20 +82,24 @@ const LearnBanner = () => {
},
}}
>
<span
style={{
color: "#fff",
}}
>{BannerContent[0].head}</span>
{BannerContent[0].heading1} <br />
<span
style={{
color: "#fff",
fontWeight: "600",
}}
>
{BannerContent[0].heading2}
</span>
</Text>
<Box marginTop={"1.5rem"} width={"80%"}>
<Box marginTop={"10px"} width={"80%"}>
<Text
color={"#fff"}
fontSize={"25px"}
fontSize={"20px"}
fontWeight={"400"}
lineHeight={"37.5px"}
fontFamily={"Poppins"}
@@ -102,69 +115,55 @@ const LearnBanner = () => {
{BannerContent[1].subheading}
</Text>
</Box>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"216px"}
marginTop={"2rem"}
height={"56px"}
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={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Box>
</Container>
<Container
maxW="container.xl"
textAlign={"left"}
marginTop={"3rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
},
"@media (max-width: 375px)": {
marginTop: "1rem",
},
}}
>
<Button
position={"relative"}
backgroundColor={"transparent"}
cursor={"pointer"}
transition="0.3s ease-in-out"
color={"#fff"}
width={"227px"}
height={"60px"}
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={{
color: "#000",
border: "none",
zIndex: 1,
}}
>
{BannerContent[2].btn}
</Button>
</Container>
</Box>
);
};

1
src/components/LearnPage/LearnDev.jsx
View File

@@ -56,6 +56,7 @@ const LearnDev = () => {
background={"#000"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
padding={"2rem 0 4rem 0"}
>
<Container maxW="container.xl">
<Text

4
src/components/LearnPage/WhyRubix.jsx
View File

@@ -118,7 +118,7 @@ const WhyRubix = () => {
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"30px"}
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
@@ -138,7 +138,7 @@ const WhyRubix = () => {
fontWeight={"400"}
color={"#E8E8E8"}
width={"80%"}
fontSize={"21px"}
fontSize={"20px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {

4
src/components/SubnetsComponent/NewSubnetComp.jsx
View File

@@ -33,7 +33,7 @@ export const NewSubnetComp = () => {
start: "top top",
scrub: 1,
pin: true,
end: "bottom bottom",
end: "bottom bottom-=1000px",
markers: true,
},
})
@@ -77,7 +77,7 @@ export const NewSubnetComp = () => {
>
<Box
ref={mainBox}
height={"300vh"}
height={"100vh"}
position={"relative"}
display={"flex"}
justifyContent={"center"}

4
src/index.css
View File

@@ -15,12 +15,12 @@
font-size: 25px !important;
}
.rubix-text-title {
font-size: 40px !important;
font-size: 38px !important;
color: #fff;
}
.rubix-text-large {
font-size: 25px !important;
font-size: 22px !important;
font-family: "Poppins" !important;
color: #fff !important;
}