516 lines
31 KiB
TypeScript
516 lines
31 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";
|
||
import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif"
|
||
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
|
||
import gifeightm from "../components/imageandgif/reminemobile.gif";
|
||
import giffivem from "../components/imageandgif/repairm.gif";
|
||
import gifsixm from "../components/imageandgif/newusenewuse.gif";
|
||
import gifonem from "../components/imageandgif/mine mobile.gif";
|
||
|
||
|
||
|
||
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 Regular, 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: "432px", lg: "60vh", sm: "487px", md: '400px' },
|
||
width: { lg: "100vw" },
|
||
backgroundColor: "white",
|
||
position: "relative",
|
||
paddingTop: { xs: '50px', lg: '5px' },
|
||
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
|
||
}}
|
||
>
|
||
<img src={loopgif} alt="Gif" style={{ width: "100%", height: '480px' }} />
|
||
|
||
</Grid>
|
||
|
||
|
||
</Grid>
|
||
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
|
||
<Grid item xs={12} sm={12} md={12}>
|
||
<Box
|
||
sx={{
|
||
p: 3,
|
||
borderRadius: "12px",
|
||
textAlign: "center",
|
||
color: '#333333',
|
||
height: {xs:'47px', sm:'87px'},
|
||
fontSize: { xs: '12px', sm: '16px' },
|
||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||
fontWeight: "500",
|
||
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h3"
|
||
sx={{ fontSize: { xs: '20px', sm: '48px' }, fontWeight: 'bold' }}
|
||
>
|
||
We aim to 'Do More With Less'
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
{items.map((text, index) => (
|
||
|
||
<Grid item xs={12} sm={6} md={4} key={index} >
|
||
<Box
|
||
sx={{
|
||
p: 3,
|
||
borderRadius: "12px",
|
||
backgroundColor: "#7c77770d",
|
||
textAlign: "center",
|
||
color: '#333333',
|
||
height: '107px',
|
||
fontSize: { xs: '12px', sm: '16px' },
|
||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||
}}
|
||
>
|
||
<Typography variant="body1">{text}</Typography>
|
||
</Box>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
{/* Grid 2 */}
|
||
<Box
|
||
sx={{
|
||
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2390 },
|
||
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%',
|
||
}}
|
||
>
|
||
{/* <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>
|
||
|
||
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid> */}
|
||
|
||
{/* 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" 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>
|
||
</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" 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>
|
||
</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" 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>
|
||
</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" 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>
|
||
</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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
|
||
<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.
|
||
</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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
|
||
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" 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>
|
||
</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" 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>
|
||
</Box>
|
||
|
||
|
||
</Box>
|
||
</Grid>
|
||
{/* mobile only */}
|
||
<Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
|
||
sx={{
|
||
display: { xs: "flex", md: "flex", lg: 'none' },
|
||
backgroundImage: { lg: null, xs: `url(${mobileback})` },
|
||
backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
|
||
backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
|
||
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: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
|
||
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
|
||
<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.
|
||
</Typography>
|
||
</Box>
|
||
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||
<img
|
||
src={gifsix}
|
||
alt="Reuse Gif"
|
||
style={{ width: "100%" }}
|
||
/>
|
||
</Box>
|
||
</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: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
|
||
<Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
|
||
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={{ display: "flex", justifyContent: "center" }}>
|
||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||
<img
|
||
src={giffive}
|
||
alt="Reuse Gif"
|
||
style={{ width: "100%" }}
|
||
/>
|
||
</Box>
|
||
</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={{ display: "flex", justifyContent: "center" }}>
|
||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||
<img
|
||
src={gifseven}
|
||
alt="Reuse Gif"
|
||
style={{ width: "100%" }}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
|
||
<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>
|
||
|
||
</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={{ display: "flex", justifyContent: "center" }}>
|
||
<Box sx={{ width: { xs: "100%", md: "60%" } }}>
|
||
<img
|
||
src={gifeight}
|
||
alt="Reuse Gif"
|
||
style={{ width: "100%" }}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
|
||
<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>
|
||
</Box>
|
||
</Box>
|
||
</Grid>
|
||
</Grid>
|
||
{/* na */}
|
||
{/* na */}
|
||
{/* na */}
|
||
</Grid>
|
||
|
||
</Box>
|
||
<WasteImageSection />
|
||
<WhyChooseUs />
|
||
<OurTeam />
|
||
|
||
<Footer />
|
||
|
||
</Box>
|
||
</ThemeProvider>
|
||
);
|
||
};
|
||
|
||
export default HomePage; |