internal
/
Loops_Sustainability
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed 820px view #4

Merged
mihir merged 1 commits from fix/layout into main 2025-02-13 17:34:03 +05:30
Conversation 0 Commits 1 Files Changed 3 +58 -52
3 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/header.tsx
View File

@ -35,7 +35,7 @@ const Header: React.FC = () => {
<img <img
src={headerlogo} src={headerlogo}
alt="Logo" alt="Logo"
style={{ height: "40px", cursor: "pointer", width:'190px' }} style={{ height: "40px", cursor: "pointer", width:'159px' }}
/> />
</Box> </Box>

100
src/components/homepage.tsx
View File

@ -112,7 +112,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 }, height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` }, backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
@ -180,9 +180,10 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px" }, height: { xs: "332px", lg: "215px" ,sm:'500px' },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -210,7 +211,7 @@ const HomePage: React.FC = () => {
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
<Box ref={useRefBox} sx={{ <Box ref={useRefBox} sx={{
height: { xs: "332px", lg: "215px" }, height: { xs: "332px", lg: "215px" ,sm:'555px' },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -237,45 +238,23 @@ const HomePage: React.FC = () => {
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
{/* newnew */} {/* newnew */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
<Box ref={reuseRef} sx={{ <Box ref={reuseRef} >
height: { xs: "442px", lg: "115px" }, <Box
width: { xs: "100%", lg: "250px" }, sx={{
zIndex: 1, width: { xs: "90%", lg: "350px" }, // Set fixed width
height: { xs: "241px", lg: "180px" }, // Set fixed height
paddingLeft: { xs: "10px", md: "10px" },
paddingRight: { xs: "2px" },
textAlign: { lg: "left", xs: "left" },
backgroundColor: { xs: "#95CD41", lg: "white" },
display: "flex", display: "flex",
flexDirection: { xs: "column", lg: "column" }, flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", }}
padding: "10px", >
textAlign: 'left',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "8px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p> <Typography variant="body2" >We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</Typography>
</Box>
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={repairRef} sx={{
height: { xs: "332px", lg: "115px" },
width: { xs: "87%", lg: "250px" },
zIndex: 1,
display: "flex",
flexDirection: { xs: "column", lg: "column" },
justifyContent: "center",
alignItems: "center",
padding: "10px",
textAlign: 'left',
marginBottom: { xs: "20px", md: "0" },
}}>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, paddingRight: { xs: "2px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Repair</Typography>
<p>Loop Sustainability steps in to repair damaged or outdated electronics. Our repair services extend the life of devices, minimizing waste and reducing the need for new products.</p>
</Box> </Box>
<Box sx={{ width: { xs: "100%", md: "100%" } }}> <Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={gifsix} alt="Gif" style={{ width: "100%" }} /> <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
@ -283,10 +262,39 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={reuseRef} >
<Box
sx={{
width: { xs: "90%", lg: "350px" }, // Set fixed width
height: { xs: "241px", lg: "180px" }, // Set fixed height
paddingLeft: { xs: "10px", md: "10px" },
paddingRight: { xs: "2px" },
textAlign: { lg: "left", xs: "left" },
backgroundColor: { xs: "#95CD41", lg: "white" },
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<Typography variant="h4">Repair</Typography>
<Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and
reducing the need for new products.
</Typography>
</Box>
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
{/* newnewnwe */} {/* newnewnwe */}
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={disintegrateRef} sx={{ <Box ref={disintegrateRef} sx={{
height: { xs: "600px", lg: "115px" }, height: { xs: "332px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -303,7 +311,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Disintegrate</Typography> <Typography variant="h4">Disintegrate</Typography>
<p>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</p> <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
</Box> </Box>
@ -311,7 +319,7 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}> <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
<Box ref={remineRef} sx={{ <Box ref={remineRef} sx={{
height: { xs: "660px", lg: "115px" }, height: { xs: "332px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -328,7 +336,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
<Typography variant="h4">Remine</Typography> <Typography variant="h4">Remine</Typography>
<p>We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</p> <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</Typography>
</Box> </Box>
@ -360,8 +368,6 @@ const HomePage: React.FC = () => {
}} }}
/> />
</Grid> </Grid>
<PartnerWork />
<OurTeam /> <OurTeam />
<Footer /> <Footer />
</Box> </Box>

BIN
src/components/imageandgif/giffive.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 738 KiB