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

Merge pull request 'new things' (#19) from fix/layout into main
continuous-integration/drone/push Build is passing Details 

Reviewed-on: #19
This commit is contained in:
Mihir Motiyani 2025-02-20 09:52:26 +05:30
parent 7f8d4e95bf b0450952ff
commit 5a99fb5b16
2 changed files with 82 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/header.tsx
View File

@ -17,7 +17,7 @@ const Header: React.FC = () => {
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ sx={{
backgroundColor: "#7c77770d", backgroundColor: {md:"#f7f7f7" , xs:'white'},
margin: "20px 20px 10px 20px", margin: "20px 20px 10px 20px",
boxShadow: "none", boxShadow: "none",

107
src/components/homepage.tsx
View File

@ -70,15 +70,15 @@ const HomePage: React.FC = () => {
}, },
}, },
// typography: { typography: {
// fontFamily: "SF Pro Rounded Medium, Arial, sans-serif", fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
// h4: { h4: {
// color: "#333333", color: "#333333",
// }, },
// body2:{ body2: {
// color:"#77808B" color: "#4D4D4D"
// } }
// }, },
}); });
@ -92,7 +92,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
marginTop: "0px", marginTop: "0px",
height: { xs: "190px", lg: "55vh" }, height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
@ -127,7 +127,7 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 }, height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2550 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: null }, backgroundImage: { lg: `url(${newbackground})`, xs: null },
backgroundSize: "contain", backgroundSize: "contain",
@ -364,40 +364,75 @@ 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>
<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> <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>
</Box> </Box>
</Grid> </Grid>
{/* mobile only */} {/* mobile only */}
<Grid container spacing={2} rowSpacing={{ xs: 18, sm: 26, md: 40 }} <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 , }}
sx={{ sx={{
display: { xs: "flex", md: "flex", lg: 'none' }, display: { xs: "flex", md: "flex", lg: 'none' },
backgroundImage: { lg: null, xs: `url(${mobileback})` }, backgroundImage: { lg: null, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: { xs: "contain", md: "70%", sm:'70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 63%' }, backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
{/* Reuse */} {/* Reuse */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4">Reuse</Typography> <Typography variant="h4">Reuse</Typography>
<Typography variant="body2"> <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. We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: "100%" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} /> <Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifsix}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box> </Box>
</Box> </Box>
</Box>
</Grid> </Grid>
{/* Repair */} {/* Repair */}
<Grid item xs={6}> <Grid item xs={6}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4">Repair</Typography> <Typography variant="h4">Repair</Typography>
<Typography variant="body2"> <Typography variant="body2">
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
@ -405,8 +440,14 @@ const HomePage: React.FC = () => {
reducing the need for new products. reducing the need for new products.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: "100%" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} /> <Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={giffive}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
@ -414,10 +455,16 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */} {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} /> <Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifseven}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131 , md:118}, maxHeight: 270 }}>
<Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
<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> <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>
@ -428,10 +475,16 @@ const HomePage: React.FC = () => {
{/* Remine */} {/* Remine */}
<Grid item xs={6} sx={{ mt: 2 }}> <Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}> <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
<Box sx={{ width: "100%" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} /> <Box sx={{ width: { xs: "100%", md: "80%" } }}>
<img
src={gifeight}
alt="Reuse Gif"
style={{ width: "100%" }}
/>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 200 } }}> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 131 , md:118} }}>
<Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
<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> <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>