454 lines
26 KiB
TypeScript
454 lines
26 KiB
TypeScript
import React, { useRef } from "react";
|
||
import { Box, Grid, Typography } from "@mui/material";
|
||
import logo from "../components/imageandgif/newlogo.png";
|
||
import backone from "../components/imageandgif/newbgone.png";
|
||
import backtwo from "../components/imageandgif/newnewtwo.png";
|
||
import backthree from "../components/imageandgif/newthree.png";
|
||
import gifone from "../components/imageandgif/gifone.gif";
|
||
import giftwo from "../components/imageandgif/giftwo.gif";
|
||
import gifthree from "../components/imageandgif/gifthree.gif";
|
||
import giffour from "../components/imageandgif/giffour.gif";
|
||
import giffive from "../components/imageandgif/giffive.gif";
|
||
import gifsix from "../components/imageandgif/gifsix.gif";
|
||
import gifseven from "../components/imageandgif/gifseven.gif";
|
||
import gifeight from "../components/imageandgif/gifeight.gif";
|
||
import loopgreen from "../components/imageandgif/newloop.png";
|
||
import PartnerWork from "./ourwork";
|
||
import Footer from "./footer";
|
||
import loopgreenback from "../components/imageandgif/lsbg.png"
|
||
import OurTeam from "./ourteam";
|
||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||
import mobileback from "../components/imageandgif/mobileback.png"
|
||
import { useMediaQuery, useTheme } from "@mui/material";
|
||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||
import newbackground from "../components/imageandgif/full.png"
|
||
import sustainability from "../components/imageandgif/Untitled-2.png"
|
||
import wasteimage from "../components/imageandgif/loopwastemanage.png"
|
||
import WhyChooseUs from "./whyus";
|
||
import WasteImageSection from "./wastemanagement";
|
||
|
||
|
||
|
||
|
||
const HomePage: React.FC = () => {
|
||
// Create refs for each content box
|
||
const mineRef = useRef<HTMLDivElement>(null);
|
||
const manufactureRef = useRef<HTMLDivElement>(null);
|
||
const assembleRef = useRef<HTMLDivElement>(null);
|
||
const useRefBox = useRef<HTMLDivElement>(null);
|
||
const repairRef = useRef<HTMLDivElement>(null);
|
||
const disintegrateRef = useRef<HTMLDivElement>(null);
|
||
const remineRef = useRef<HTMLDivElement>(null);
|
||
const impactRef = useRef<HTMLDivElement>(null);
|
||
const reuseRef = useRef<HTMLDivElement>(null);
|
||
const items = [
|
||
"Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.",
|
||
"Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
|
||
"We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
|
||
];
|
||
// const theme = useTheme();
|
||
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||
|
||
// Function to scroll to the ref
|
||
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
|
||
if (ref.current) {
|
||
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
}
|
||
};
|
||
|
||
const theme = createTheme({
|
||
breakpoints: {
|
||
values: {
|
||
xs: 0, // Default
|
||
sm: 600, // Default
|
||
md: 1000, // Default
|
||
lg: 1400, // Default
|
||
xl: 1600, // Default
|
||
|
||
},
|
||
},
|
||
typography: {
|
||
fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
|
||
h4: {
|
||
color: "#333333",
|
||
},
|
||
body2:{
|
||
color:"#4D4D4D"
|
||
}
|
||
},
|
||
|
||
});
|
||
|
||
return (
|
||
<ThemeProvider theme={theme}>
|
||
<Box>
|
||
<Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
|
||
{/* Grid 1 */}
|
||
<Grid
|
||
item
|
||
xs={12}
|
||
sx={{
|
||
marginTop: "0px",
|
||
height: { xs: "190px", lg: "55vh" },
|
||
width: { lg: "100vw" },
|
||
backgroundColor: "white",
|
||
position: "relative",
|
||
backgroundImage:
|
||
|
||
`url(${loopgreenback})`
|
||
,
|
||
backgroundSize: "contain",
|
||
backgroundPosition: " center",
|
||
backgroundRepeat: "no-repeat",
|
||
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
|
||
}}
|
||
>
|
||
|
||
|
||
</Grid>
|
||
|
||
|
||
</Grid>
|
||
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
|
||
{items.map((text, index) => (
|
||
|
||
<Grid item xs={12} sm={6} md={4} key={index} >
|
||
<Box
|
||
sx={{
|
||
p: 3,
|
||
borderRadius: "12px",
|
||
backgroundColor: "#7c77770d",
|
||
textAlign: "center",
|
||
|
||
}}
|
||
>
|
||
<Typography variant="body1">{text}</Typography>
|
||
</Box>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
{/* Grid 2 */}
|
||
<Box
|
||
sx={{
|
||
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 },
|
||
width: '100%',
|
||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||
backgroundSize: "contain",
|
||
backgroundPosition: { lg: "center"},
|
||
backgroundRepeat: "no-repeat",
|
||
paddingBottom: { lg: 20, xs: 0 }
|
||
}}
|
||
>
|
||
<Grid
|
||
container
|
||
|
||
sx={{
|
||
|
||
width: '100%',
|
||
}}
|
||
>
|
||
{/* ROW 1 */}
|
||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||
<Box ref={mineRef} sx={{
|
||
height: { xs: "70%", lg: "215px" },
|
||
width: { xs: "83%", lg: "870px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column", lg: "row" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'center',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
}}>
|
||
<Box sx={{ width: { xs: "60%", md: "70%" } }}>
|
||
<img src={gifone} alt="Gif" style={{ width: "91%" }} />
|
||
</Box>
|
||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||
<Typography variant="h4">Mine from nature</Typography>
|
||
<Typography variant="body2">Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>
|
||
|
||
{/* ROW 2 */}
|
||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
|
||
<Box ref={manufactureRef} sx={{
|
||
height: { xs: "472px", lg: "215px" },
|
||
width: { xs: "80%", lg: "552px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'center',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
}}>
|
||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||
<Typography variant="h4">Manufacturing</Typography>
|
||
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
|
||
</Box>
|
||
<Box sx={{ width: { lg: '50%' , md:'67%' } }}>
|
||
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
|
||
</Box>
|
||
</Grid>
|
||
|
||
{/* ROW 3 */}
|
||
<Grid item xs={12} lg={6} md={6} sx={{
|
||
background: '#ffffff00', height: { xl: "500px", lg: '378px' },
|
||
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
|
||
}}>
|
||
<Box ref={assembleRef} sx={{
|
||
height: { xs: "332px", lg: "215px", sm: '500px' , md:'500px' },
|
||
width: { xs: "80%", lg: "595px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column", lg: "row" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'center',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
}}>
|
||
|
||
<Box sx={{ width: { xs: "60%", md:'70%' } }}>
|
||
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||
<Typography variant="h4">Assemble</Typography>
|
||
<Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
|
||
</Box>
|
||
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||
|
||
{/* ROW 4 */}
|
||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
|
||
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
|
||
<Box ref={useRefBox} sx={{
|
||
height: { xs: "451px", lg: "215px", sm: '555px' },
|
||
width: { xs: "80%", lg: "550px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'center',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
}}>
|
||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||
<Typography variant="h4">Use</Typography>
|
||
<Typography variant="body2">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 sx={{ width: { xs: "60%",md:'70%' } }}>
|
||
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
</Box>
|
||
|
||
</Grid>
|
||
{/* new2 */}
|
||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>
|
||
|
||
|
||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||
{/* newnew */}
|
||
{/* desktop view */}
|
||
{/* Reuse Section */}
|
||
<Grid item xs={5} sm={6} lg={6}
|
||
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
|
||
<Box ref={reuseRef}
|
||
sx={{
|
||
width: { xs: "90%", lg: "350px" },
|
||
height: { xs: "340px", lg: "240px" },
|
||
textAlign: "left",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
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="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%", maxWidth: "300px", mt: 2 }}>
|
||
<img src={gifsix} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
|
||
{/* Repair Section */}
|
||
<Grid item xs={5} sm={6} lg={6}
|
||
sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
|
||
<Box ref={reuseRef}
|
||
sx={{
|
||
width: { xs: "90%", lg: "350px" },
|
||
height: { xs: "340px", lg: "240px" },
|
||
textAlign: "left",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
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="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%", maxWidth: "300px", mt: 2 }}>
|
||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
|
||
|
||
{/* 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" }}>
|
||
<Box ref={disintegrateRef}
|
||
sx={{
|
||
height: { xs: "332px", lg: "115px" },
|
||
width: { xs: "92%", lg: "250px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column", lg: "column" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'left',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
marginTop: { xs: "20px" },
|
||
}}>
|
||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
<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="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>
|
||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||
<Box ref={remineRef} sx={{
|
||
height: { xs: "332px", lg: "115px" },
|
||
width: { xs: "92%", lg: "250px" },
|
||
zIndex: 1,
|
||
display: "flex",
|
||
flexDirection: { xs: "column", lg: "column" },
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
padding: "10px",
|
||
textAlign: 'center',
|
||
marginBottom: { xs: "20px", md: "0" },
|
||
marginTop: { xs: "20px" },
|
||
}}>
|
||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
<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="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>
|
||
{/* mobile only */}
|
||
<Grid container spacing={2} rowSpacing={{ xs: 18, sm: 26, md: 40 }}
|
||
sx={{
|
||
display: { xs: "flex", md: "flex", lg: 'none' },
|
||
backgroundImage: { lg: null, xs: `url(${mobileback})` },
|
||
backgroundSize: "contain",
|
||
backgroundPosition: { xs: "50% 60%", md:'50% 63%' },
|
||
backgroundRepeat: "no-repeat",
|
||
}}>
|
||
{/* Reuse */}
|
||
<Grid item xs={6}>
|
||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200}, maxHeight:270 }}>
|
||
<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: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}>
|
||
<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: { xs: "left", md: 'center' }, borderRadius: 2 }}>
|
||
<Box sx={{ width: "100%" }}>
|
||
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
<Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270 }}>
|
||
<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>
|
||
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
|
||
{/* Remine */}
|
||
<Grid item xs={6} sx={{ mt: 2 }}>
|
||
<Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 , maxHeight:270 }}>
|
||
<Box sx={{ width: "100%" }}>
|
||
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
|
||
</Box>
|
||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' },height:{xs:256 , sm:200} }}>
|
||
<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>
|
||
|
||
</Box>
|
||
<WasteImageSection/>
|
||
<WhyChooseUs />
|
||
<OurTeam />
|
||
|
||
<Footer />
|
||
|
||
</Box>
|
||
</ThemeProvider>
|
||
);
|
||
};
|
||
|
||
export default HomePage; |