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

Compare commits

base: internal:6383716b8fa92939f5ecd44625dfba65a6ac5268
Branches Tags
internal:main
..
compare: internal:5fa67bfa0cf0eaa5985775498b5f08f72ab8b8a2
Branches Tags
internal:main

No commits in common. "6383716b8fa92939f5ecd44625dfba65a6ac5268" and "5fa67bfa0cf0eaa5985775498b5f08f72ab8b8a2" have entirely different histories.
6383716b8f ... 5fa67bfa0c

3 changed files with 65 additions and 193 deletions
Show Stats Expand all files Collapse all files

5
src/components/header.tsx
View File

@ -26,8 +26,7 @@ const Header: React.FC = () => {
lg: "96.8vw", lg: "96.8vw",
xl: "96.4vw" xl: "96.4vw"
}, },
color: "black", color: "black"
zIndex:11111
}} }}
> >
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}> <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
@ -36,7 +35,7 @@ const Header: React.FC = () => {
<img <img
src={headerlogo} src={headerlogo}
alt="Logo" alt="Logo"
style={{ height: "50px", cursor: "pointer", width:'159px' }} style={{ height: "40px", cursor: "pointer", width:'159px' }}
/> />
</Box> </Box>

160
src/components/homepage.tsx
View File

@ -24,7 +24,6 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png" import newbackground from "../components/imageandgif/full.png"
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png" import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png" import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
@ -68,7 +67,7 @@ const HomePage: React.FC = () => {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Box> <Box>
<Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}> <Grid container sx={{ position: "relative", marginTop: '119px' }}>
{/* Grid 1 */} {/* Grid 1 */}
<Grid <Grid
item item
@ -101,7 +100,7 @@ const HomePage: React.FC = () => {
p: 3, p: 3,
borderRadius: "12px", borderRadius: "12px",
backgroundColor: "#7c77770d", backgroundColor: "#7c77770d",
textAlign: "center", textAlign: "left",
}} }}
> >
@ -113,18 +112,17 @@ const HomePage: React.FC = () => {
{/* Grid 2 */} {/* Grid 2 */}
<Box <Box
sx={{ sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 }, 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",
backgroundPosition: { lg: "center", xs: "50% 86%" }, backgroundPosition: { lg: "center", xs: "50% 87%" },
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 } paddingBottom: { lg: 20, xs: 0 }
}} }}
> >
<Grid <Grid
container container
sx={{ sx={{
width: '100%', width: '100%',
@ -133,7 +131,7 @@ const HomePage: React.FC = () => {
{/* ROW 1 */} {/* ROW 1 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{ <Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" }, height: { xs: "495px", lg: "215px" },
width: { xs: "80%", lg: "870px" }, width: { xs: "80%", lg: "870px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -157,7 +155,7 @@ const HomePage: React.FC = () => {
{/* ROW 2 */} {/* ROW 2 */}
<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={manufactureRef} sx={{ <Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" }, height: { xs: "472px", lg: "215px" },
width: { xs: "80%", lg: "552px" }, width: { xs: "80%", lg: "552px" },
@ -182,12 +180,10 @@ const HomePage: React.FC = () => {
</Grid> </Grid>
{/* ROW 3 */} {/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{ <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
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" ,sm:'500px' },
width: { xs: "80%", lg: "595px" }, width: { xs: "80%", lg: "595px" },
zIndex: 1, zIndex: 1,
display: "flex", display: "flex",
@ -215,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: "451px", lg: "215px", sm: '555px' }, 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",
@ -230,12 +226,11 @@ const HomePage: React.FC = () => {
<Typography variant="h4">Use</Typography> <Typography variant="h4">Use</Typography>
<p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p> <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
</Box> </Box>
<Box sx={{ width: { xs: "60%", md: "100%" } }}> <Box sx={{ width: { xs: "60%", md: "100%" } }}>
<img src={giffour} alt="Gif" style={{ width: "100%" }} /> <img src={giffour} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box>
</Box>
</Grid> </Grid>
{/* new2 */} {/* new2 */}
<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>
@ -243,48 +238,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 */}
{/* desktop view */} <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
{/* Reuse Section */} <Box ref={reuseRef} >
<Grid item xs={5} sm={6} lg={6} <Box
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
<Box ref={reuseRef}
sx={{ sx={{
width: { xs: "90%", lg: "350px" }, width: { xs: "90%", lg: "350px" }, // Set fixed width
height: { xs: "340px", lg: "240px" }, height: { xs: "241px", lg: "180px" }, // Set fixed height
textAlign: "left", paddingLeft: { xs: "10px", md: "10px" },
paddingRight: { xs: "2px" },
textAlign: { lg: "left", xs: "left" },
backgroundColor: { xs: "#95CD41", lg: "white" },
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", }}
margin: { xs: 1 } >
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<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.</Typography>
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>
<Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}> <Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={gifsix} alt="Gif" style={{ width: "100%" }} /> <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</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" }}>
{/* Repair Section */} <Box ref={reuseRef} >
<Grid item xs={5} sm={6} lg={6} <Box
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
<Box ref={reuseRef}
sx={{ sx={{
width: { xs: "90%", lg: "350px" }, width: { xs: "90%", lg: "350px" }, // Set fixed width
height: { xs: "340px", lg: "240px" }, height: { xs: "241px", lg: "180px" }, // Set fixed height
textAlign: "left", paddingLeft: { xs: "10px", md: "10px" },
paddingRight: { xs: "2px" },
textAlign: { lg: "left", xs: "left" },
backgroundColor: { xs: "#95CD41", lg: "white" },
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", }}
margin: { xs: 1 } >
}}>
<Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
<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.
@ -292,17 +284,16 @@ const HomePage: React.FC = () => {
reducing the need for new products. reducing the need for new products.
</Typography> </Typography>
</Box> </Box>
<Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
<img src={giffive} alt="Gif" style={{ width: "100%" }} /> <img src={giffive} alt="Gif" style={{ width: "100%" }} />
</Box> </Box>
</Box> </Box>
</Grid> </Grid>
{/* newnewnwe */} {/* newnewnwe */}
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, 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} <Box ref={disintegrateRef} sx={{
sx={{
height: { xs: "332px", lg: "115px" }, height: { xs: "332px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
zIndex: 1, zIndex: 1,
@ -326,7 +317,7 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, 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: "332px", lg: "115px" },
width: { xs: "92%", lg: "250px" }, width: { xs: "92%", lg: "250px" },
@ -351,68 +342,6 @@ const HomePage: React.FC = () => {
</Box> </Box>
</Grid> </Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
{/* Reuse */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<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>
</Box>
<Box sx={{ width: "100%" }}>
<img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
{/* Repair */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<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: "100%" }}>
<img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
</Box>
</Box>
</Grid>
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4" sx={{fontSize:"1.6rem"}}>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>
</Box>
</Box>
</Grid>
{/* Remine */}
<Grid item xs={6} sx={{ mt: 2 } }>
<Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left' }}>
<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>
</Box>
</Box>
</Grid>
</Grid>
</Grid> </Grid>
</Box> </Box>
@ -421,7 +350,7 @@ const HomePage: React.FC = () => {
xs={12} xs={12}
sx={{ sx={{
height: "660px", height: "66 0px",
marginTop: { lg: 20, xs: 0 }, marginTop: { lg: 20, xs: 0 },
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
@ -439,11 +368,8 @@ const HomePage: React.FC = () => {
}} }}
/> />
</Grid> </Grid>
<WhyChooseUs/>
<OurTeam /> <OurTeam />
<Footer /> <Footer />
</Box> </Box>
</ThemeProvider> </ThemeProvider>
); );

53
src/components/whyus.tsx
View File

@ -1,53 +0,0 @@
import React from "react";
import { Box, Grid, Typography } from "@mui/material";
import { styled } from "@mui/system";
const Circle = styled(Box)(({ theme }) => ({
width: 150, // Increased size
height: 150,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "5px solid",
transition: "0.3s",
[theme.breakpoints.down("sm")]: {
width: 120, // Adjusting for mobile
height: 120,
},
}));
const items = [
{ text: "Partnerships", color: "#E3C34D" },
{ text: "Technology", color: "#90B5D4" },
{ text: "Professionalism", color: "#A2C08A" },
{ text: "Transparency", color: "#EDEAE3" },
];
const WhyChooseUs: React.FC = () => {
return (
<Box sx={{ textAlign: "center", mt: 5 }}>
<Typography variant="h5" fontWeight="bold" mb={3}>
Why Choose Us?
</Typography>
<Grid
container
spacing={1}
justifyContent="center"
alignItems="center"
>
{items.map((item, index) => (
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
<Circle sx={{ borderColor: item.color }}>
<Typography variant="body1" fontWeight="500">
{item.text}
</Typography>
</Circle>
</Grid>
))}
</Grid>
</Box>
);
};
export default WhyChooseUs;