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

responsive

Browse Source
This commit is contained in:
YasinShaikh123
2024-04-16 17:08:05 +05:30
parent a032a7c314
commit 416018def5
37 changed files with 1077 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ const BannerContent = [
},
];
const BuildBanner = () => {
const BuildBanner = () => {
return (
<Box
height={"100vh"}
@@ -46,8 +46,8 @@ const BuildBanner = () => {
marginTop={"2rem"}
paddingLeft={"3.5rem"}
sx={{
"@media (max-width: 435px)": {
paddingLeft: "2rem",
"@media (max-width: 500px)": {
paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
},
}}
>
@@ -69,15 +69,12 @@ const BuildBanner = () => {
letterSpacing={"1px"}
sx={{
"@media (max-width: 996px)": {
fontSize: "35px",
fontSize: "46px",
},
"@media (max-width: 600px)": {
fontSize: "28px",
marginBottom: "2rem",
},
"@media (max-width: 412px)": {
fontSize: "24px",
marginTop: "2rem",
fontSize: "40px",
marginBottom: "0rem",
lineHeight: "54px",
},
}}
>
@@ -90,7 +87,12 @@ const BuildBanner = () => {
{BannerContent[0].heading2}
</span>
</Text>
<Box marginTop={"1.5rem"} width={"80%"}>
<Box marginTop={"1.5rem"} width={"80%"}
sx={{
"@media (max-width: 500px)": {
width: "100%",
},
}}>
<Text
color={"#fff"}
fontSize={"20px"}
@@ -102,9 +104,9 @@ const BuildBanner = () => {
"@media (max-width: 1024px)": {
fontSize: "22px",
},
"@media (max-width: 600px)": {
fontSize: "17px",
width: "100%",
"@media (max-width: 500px)": {
fontSize: "16px",
lineHeight: "28px",
},
}}
>
@@ -154,6 +156,16 @@ const BuildBanner = () => {
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",

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

@@ -60,13 +60,13 @@ const items = [
];
const Connect = () => {
return (
return (
<Box
// height={"80vh"}
// backgroundImage={`url(${banner})`}
// backgroundSize={"cover"}
// backgroundRepeat={"no-repeat"}
backgroundColor={"#000"}
backgroundColor={"#101015"}
backgroundSize={"cover"}
backgroundRepeat={"no-repeat"}
>
@@ -79,17 +79,25 @@ const Connect = () => {
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width: 435px)": {},
"@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"}
textAlign={"center"}
sx={{
"@media (max-width: 500px)": {
fontSize: "22px",
fontWeight: "400",
marginBottom: "30px",
},
}}
>
Connect with Rubix community
</Text>
@@ -113,17 +121,34 @@ const Connect = () => {
borderRadius={"10px"}
minH={"270px"}
border={"1px solid #454545"}
sx={{
"@media (max-width: 500px)": {
minHeight: "200px",
},
}}
>
<CardHeader
textAlign={"center"}
paddingBottom={"0px"}
marginTop={"2rem"}
sx={{
"@media (max-width: 500px)": {
marginTop: "0px",
},
}}
>
{/* <Image src={item.img} /> */}
<Heading
size="md"
className="rubix-text-large"
fontSize={"22px"}
fontWeight={"500"}
color={"#fff"}
sx={{
"@media (max-width: 500px)": {
fontSize: "17px",
fontWeight: "400",
},
}}
>
{item.head}
</Heading>

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

@@ -30,14 +30,14 @@ const LearnMore = () => {
paddingBottom={"1rem"}
fontWeight={700}
fontSize={"40px"}
className="rubix-text-title"
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",
},
}}
>
@@ -54,55 +54,72 @@ const LearnMore = () => {
<Text
color={"#E4E4E4"}
// fontSize={"22px"}
className="rubix-text-large"
marginBottom={"2rem"}
fontFamily={"Poppins"}
sx={{
"@media (max-width: 500px)": {
fontSize: "14px",
fontWeight: "100",
// marginBottom:'5px',
marginBottom: "30px",
},
}}
>
{SectionContent.subContent}
</Text>
<Link to="/Contact">
<Button
fontSize={"20px"}
// minW={"284px"}
minH={"60px"}
fontFamily={"Poppins"}
backgroundColor={"transparent"}
border={"1px solid #fff"}
color={"#fff"}
fontWeight={"400"}
margin={"0 auto"}
// transition="0.3s ease-in-out"
zIndex={"1"}
overflow={"hidden"}
padding={"0 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",
},
}}
_hover={{
color: "#000",
border: "1px solid white",
zIndex: 1,
}}
fontSize={"20px"}
// minW={"284px"}
height={"54px"}
fontFamily={"Poppins"}
backgroundColor={"transparent"}
border={"1px solid #fff"}
color={"#fff"}
fontWeight={"400"}
margin={"0 10px"}
// transition="0.3s ease-in-out"
zIndex={"1"}
overflow={"hidden"}
padding={"0 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)": {
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",
border: "1px solid white",
zIndex: 1,
}}
>
{SectionContent.btnContent}
</Button>

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

@@ -88,13 +88,34 @@ const Solve = () => {
};
return (
<Box backgroundColor={"#00020E"} padding={"5rem"}>
<Container maxW="container.xl">
<Box
backgroundColor={"#00020E"}
padding={"5rem"}
sx={{
"@media (max-width: 600px)": {
padding: "4rem 1rem",
},
}}
>
<Container
maxW="container.xl"
sx={{
"@media (max-width: 600px)": {
padding: "0rem",
},
}}
>
<Text
fontFamily={"Mona Sans"}
fontWeight={"700"}
fontSize={"40px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
fontWeight: "500",
},
}}
>
Solving Real-World Issues And Business Problems
</Text>
@@ -103,10 +124,21 @@ const Solve = () => {
maxW="container.xl"
justifyContent={"center"}
marginTop={"4rem"}
sx={{
"@media (max-width: 600px)": {
marginTop: "2rem ",
padding: "0px",
},
}}
>
<SimpleGrid
spacing={20}
templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
sx={{
"@media (max-width: 600px)": {
gridGap:'10px'
},
}}
>
{items.map((item, index) => (
<Card
@@ -122,8 +154,12 @@ const Solve = () => {
fontWeight={"600"}
fontSize={"20px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{" "}
{item.title}
</Heading>
</CardHeader>
@@ -132,18 +168,31 @@ const Solve = () => {
paddingLeft={"0px"}
paddingRight={"0px"}
paddingBottom={"0px"}
color={"#E8E8E8"}
color={"#BCBCBC"}
fontFamily={"Poppins"}
fontWeight={"500"}
fontSize={"17px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
<Collapse startingHeight={55} in={expandedCardIndex === index}>
<Collapse
startingHeight={55}
in={expandedCardIndex === index}
sx={{
"@media (max-width: 500px)": {
height: '30px' // Adjusted property to set the height
}
}}
>
<Text dangerouslySetInnerHTML={{ __html: item.content }} />
</Collapse>
<Button
onClick={() => handleToggle(index)}
background={"transparent"}
color={"#fff"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"100"}
fontSize={"16px"}

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

@@ -56,20 +56,29 @@ const Tools = () => {
backgroundRepeat={"no-repeat"}
padding={"5rem"}
sx={{
"@media (max-width: 1024px)": {
height: "auto",
},
"@media (max-width: 600px)": {
fontSize: "28px",
padding: "4rem 1rem",
},
}}
>
<Container maxW="container.xl">
<Container maxW="container.xl"
sx={{
"@media (max-width: 600px)": {
padding: "0rem",
},
}}
>
<Text
fontFamily={"Mona Sans"}
fontWeight={"600"}
fontSize={"38px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
fontWeight:'500'
},
}}
>
Tools And Resources To Help You Succeed
</Text>
@@ -119,6 +128,11 @@ const Tools = () => {
textAlign={"center"}
fontWeight={"400"}
dangerouslySetInnerHTML={{ __html: item.title }}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
/>
</CardBody>
<CardFooter

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

@@ -53,10 +53,9 @@ const WhyBuild = () => {
maxW={"container.xl"}
padding={"4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
"@media (max-width: 600px)": {
padding:'4rem 1rem'
},
"@media (max-width: 435px)": {},
}}
>
<Text
@@ -69,12 +68,10 @@ const WhyBuild = () => {
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "35px",
},
"@media (max-width: 475px)": {
fontSize: "26px",
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
fontWeight:'500'
},
}}
>
@@ -86,11 +83,10 @@ const WhyBuild = () => {
justifyContent={"space-between"}
gap={"2rem"}
sx={{
"@media (max-width: 435px)": {
"@media (max-width: 600px)": {
flexDirection: "column-reverse",
alignItems: "center",
},
"@media (max-width: 375px)": {},
}}
>
<Box
@@ -99,7 +95,6 @@ const WhyBuild = () => {
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
@@ -111,6 +106,11 @@ const WhyBuild = () => {
marginBottom={"1rem"}
padding={"1rem 0"}
key={accord.id}
sx={{
"@media (max-width: 600px)": {
marginBottom: "0px",
},
}}
>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
@@ -123,15 +123,19 @@ const WhyBuild = () => {
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 435px)": {
fontSize: "22px",
"@media (max-width: 600px)": {
fontSize: "16px",
},
"@media (max-width: 375px)": {},
}}
>
{accord.title}
</Box>
<AccordionIcon color={"#fff"} fontSize={"40px"} />
<AccordionIcon color={"#fff"} fontSize={"40px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}} />
</AccordionButton>
</h2>
<AccordionPanel
@@ -143,12 +147,10 @@ const WhyBuild = () => {
fontSize={"20px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {
"@media (max-width: 600px)": {
fontSize: "14px",
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "18px",
},
}}
>
<span style={{ paddingBottom: "2rem" }}>