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

fix/layout #23

Merged
mihir merged 3 commits from fix/layout into main 2025-02-20 17:43:32 +05:30
Conversation 0 Commits 3 Files Changed 15 +46 -41
1 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7b6b91961d - Show all commits

83
src/components/homepage.tsx
View File

@ -26,7 +26,7 @@ import sustainability from "../components/imageandgif/Untitled-2.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png" import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus"; import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement"; import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif" import loopgif from "../components/imageandgif/loop hero new (1).gif"
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif"; import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
import gifeightm from "../components/imageandgif/reminemobile.gif"; import gifeightm from "../components/imageandgif/reminemobile.gif";
import giffivem from "../components/imageandgif/repairm.gif"; import giffivem from "../components/imageandgif/repairm.gif";
@ -94,7 +94,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
marginTop: "0px", marginTop: "0px",
height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' }, height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
width: { lg: "100vw" }, width: { lg: "100vw" },
backgroundColor: "white", backgroundColor: "white",
position: "relative", position: "relative",
@ -118,9 +118,9 @@ const HomePage: React.FC = () => {
borderRadius: "12px", borderRadius: "12px",
backgroundColor: "#7c77770d", backgroundColor: "#7c77770d",
textAlign: "center", textAlign: "center",
color:'#333333', color: '#333333',
height:'107px', height: '107px',
fontSize:{xs:'12px' , sm:'16px'}, fontSize: { xs: '12px', sm: '16px' },
fontFamily: "SF Pro Regular, Arial, sans-serif", fontFamily: "SF Pro Regular, Arial, sans-serif",
}} }}
> >
@ -170,11 +170,16 @@ const HomePage: React.FC = () => {
}}> }}>
<Box sx={{ width: { xs: "60%", md: "70%" } }}> <Box sx={{ width: { xs: "60%", md: "70%" } }}>
<img src={gifonem} alt="Gif" style={{ width: "91%" }} /> <img
src={window.innerWidth <= 1400 ? gifone : gifonem}
alt="Gif"
style={{ width: "91%" }}
/>
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Mine from nature</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
@ -196,8 +201,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Manufacturing</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box> </Box>
<Box sx={{ width: { lg: '50%', md: '67%' } }}> <Box sx={{ width: { lg: '50%', md: '67%' } }}>
<img src={giftwo} alt="Gif" style={{ width: "100%" }} /> <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@ -228,8 +233,8 @@ const HomePage: React.FC = () => {
<img src={gifthree} alt="Gif" style={{ width: "100%" }} /> <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Assemble</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
</Box> </Box>
</Box> </Box>
@ -252,8 +257,8 @@ const HomePage: React.FC = () => {
marginBottom: { xs: "20px", md: "0" }, marginBottom: { xs: "20px", md: "0" },
}}> }}>
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}> <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Use</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: '70%' } }}> <Box sx={{ width: { xs: "60%", md: '70%' } }}>
@ -284,8 +289,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
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>
@ -310,8 +315,8 @@ const HomePage: React.FC = () => {
margin: { xs: 1 } margin: { xs: 1 }
}}> }}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}> <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
@ -344,8 +349,8 @@ const HomePage: React.FC = () => {
<img src={gifseven} alt="Gif" style={{ width: "100%" }} /> <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
</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"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>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" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>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>
@ -369,19 +374,19 @@ const HomePage: React.FC = () => {
<img src={gifeight} alt="Gif" style={{ width: "100%" }} /> <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
</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"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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: 24, sm: 36, md: 30 }} <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
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: { xs: "60%", md: "50%", sm:'70%' }, backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
backgroundPosition: { xs: "50% 60%", md: '50% 57%' }, backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
}}> }}>
@ -389,8 +394,8 @@ const HomePage: React.FC = () => {
<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: 175, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
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>
@ -410,15 +415,15 @@ const HomePage: React.FC = () => {
{/* 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",marginBottom:'30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", marginBottom: '30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
<Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}> <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
Loop Sustainability steps in to repair damaged or outdated electronics. Loop Sustainability steps in to repair damaged or outdated electronics.
Our repair services extend the life of devices, minimizing waste and Our repair services extend the life of devices, minimizing waste and
reducing the need for new products. reducing the need for new products.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={giffivem} src={giffivem}
@ -433,7 +438,7 @@ 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={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } }}> <Box sx={{ width: { xs: "100%", md: "60%" } }}>
<img <img
src={gifsevenm} src={gifsevenm}
@ -442,9 +447,9 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138 , md:118}, maxHeight: 270 }}> <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>
</Box> </Box>
@ -453,8 +458,8 @@ 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={{ display: "flex", justifyContent: "center" }}> <Box sx={{ display: "flex", justifyContent: "center" }}>
<Box sx={{ width: { xs: "100%", md: "60%" } ,marginTop:'27px' }}> <Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
<img <img
src={gifeightm} src={gifeightm}
alt="Reuse Gif" alt="Reuse Gif"
@ -462,9 +467,9 @@ const HomePage: React.FC = () => {
/> />
</Box> </Box>
</Box> </Box>
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138 , md:118} }}> <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138, md: 118 } }}>
<Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography> <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
<Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>