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

83
src/components/UseCase/UseCase.jsx
View File

@@ -16,6 +16,11 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
position="relative"
sx={{
"@media (max-width: 600px)": {
height: "400px",
},
}}
>
<Box
position="absolute"
@@ -29,16 +34,41 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
alignItems={"center"}
flexDirection={"column"}
>
<Box w={"50vw"}>
<Box
w={"50vw"}
sx={{
"@media (max-width: 600px)": {
width: "100vw",
padding: "2rem",
},
}}
>
<Text
textAlign={"center"}
className="rubix-text-heading-2 rubix-fw-700"
className="rubix-fw-700"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}}
>
{bannerHeading}
</Text>
<Text
textAlign={"center"}
className="rubix-text-medium rubix-fw-500"
className="rubix-fw-500"
fontSize={"20px"}
fontFamily={"Poppins"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{bannerSubHeading}
</Text>
@@ -67,33 +97,72 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
gap={7}
pt={5}
width={"85vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
{/* ========[ Head-Para ]====== */}
<Box width={"65vw"}>
<Box width={"65vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
},
}}
>
{useCaseHeading}
</Text>
<Text textColor={"#ffffff"} fontSize="xl">
<Text textColor={"#ffffff"} fontSize="xl"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{useCaseSubHeading}
</Text>
</Box>
{useCaseDetails.map(({ title, description }, index) => (
<Box width={"75vw"}>
<Box width={"75vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="2xl"
textColor={"#ffffff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{title}
</Text>
<Text textColor={"#ffffff"} fontSize="lg">
<Text textColor={"#ffffff"} fontSize="lg"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{description}
</Text>
</Box>