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

Compare commits

base: internal:5fa67bfa0cf0eaa5985775498b5f08f72ab8b8a2
Branches Tags
internal:main
..
compare: internal:b923e5ac44ea3f24b251a12b2aece6898fce6f59
Branches Tags
internal:main

No commits in common. "5fa67bfa0cf0eaa5985775498b5f08f72ab8b8a2" and "b923e5ac44ea3f24b251a12b2aece6898fce6f59" have entirely different histories.
5fa67bfa0c ... b923e5ac44

3 changed files with 52 additions and 58 deletions
Show Stats 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:'159px' }} style={{ height: "40px", cursor: "pointer", width:'190px' }}
/> />
</Box> </Box>

108
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: 3580 }, height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 },
width: '100%', width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` }, backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain", backgroundSize: "contain",
@ -180,10 +180,9 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
<Box ref={assembleRef} sx={{ <Box ref={assembleRef} sx={{
height: { xs: "332px", lg: "215px" ,sm:'500px' }, height: { xs: "332px", lg: "215px" },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -211,7 +210,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" ,sm:'555px' }, height: { xs: "332px", lg: "215px" },
width: { xs: "80%", lg: "550px" }, width: { xs: "80%", lg: "550px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -238,23 +237,45 @@ 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' , sm:"center" }, alignItems: "center" }}> <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 ref={reuseRef} sx={{
<Box height: { xs: "442px", lg: "115px" },
sx={{ width: { xs: "100%", lg: "250px" },
width: { xs: "90%", lg: "350px" }, // Set fixed width zIndex: 1,
height: { xs: "241px", lg: "180px" }, // Set fixed height display: "flex",
paddingLeft: { xs: "10px", md: "10px" }, flexDirection: { xs: "column", lg: "column" },
paddingRight: { xs: "2px" }, justifyContent: "center",
textAlign: { lg: "left", xs: "left" }, alignItems: "center",
backgroundColor: { xs: "#95CD41", lg: "white" }, padding: "10px",
display: "flex", textAlign: 'left',
flexDirection: "column", marginBottom: { xs: "20px", md: "0" },
justifyContent: "center", }}>
}} <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>
<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> <p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p>
</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%" }} />
@ -262,39 +283,10 @@ 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', xs: '800px' }, 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={disintegrateRef} sx={{ <Box ref={disintegrateRef} sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "600px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -311,7 +303,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>
<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> <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>
</Box> </Box>
@ -319,7 +311,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: "332px", lg: "115px" }, height: { xs: "660px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -336,19 +328,19 @@ 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> <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>
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
</Grid> </Grid>
</Box> </Box>
<Grid <Grid
container container
xs={12} xs={12}
sx={{ sx={{
height: "66 0px", height: "66 0px",
marginTop: { lg: 20, xs: 0 }, marginTop: { lg: 20, xs: 0 },
@ -368,6 +360,8 @@ 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: 738 KiB

After

Width:  |  Height:  |  Size: 196 KiB