464 lines
26 KiB
TypeScript
464 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/loopcentrelaptop.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/Loop hero 29_04 (2).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 features = [
|
||
// {
|
||
// title: "Reuse",
|
||
// description:
|
||
// "We help businesses repair their old electronics by recommending reusable parts and components for future use or resale.",
|
||
// icon: <RecyclingIcon fontSize="large" color="primary" />,
|
||
// },
|
||
// {
|
||
// title: "Repair",
|
||
// description:
|
||
// "Repair services extend the life of devices, minimizing waste and reducing the need for new products.",
|
||
// icon: <BuildIcon fontSize="large" color="secondary" />,
|
||
// },
|
||
// {
|
||
// title: "Disintegrate",
|
||
// description:
|
||
// "When devices can no longer be repaired, we ensure responsible recycling and proper disposal.",
|
||
// icon: <DeleteIcon fontSize="large" color="error" />,
|
||
// },
|
||
// {
|
||
// title: "Remine",
|
||
// description:
|
||
// "We take the decomposed materials and refine them for reuse, reducing environmental impact.",
|
||
// icon: <LocalFireDepartmentIcon fontSize="large" color="warning" />,
|
||
// },
|
||
// ];
|
||
|
||
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 disintegrateRef = useRef<HTMLDivElement>(null);
|
||
const remineRef = useRef<HTMLDivElement>(null);
|
||
const reuseRef = useRef<HTMLDivElement>(null);
|
||
|
||
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: "270px", lg: "77vh", sm: "487px", md: '517px' },
|
||
width: { lg: "100vw" },
|
||
backgroundColor: "white",
|
||
position: "relative",
|
||
paddingTop: { xs: '50px', lg: '5px', md: '10px' },
|
||
marginBottom: { xs: "10px", md: "39px", lg: '30px' },
|
||
}}
|
||
>
|
||
<img
|
||
src={loopgif}
|
||
alt="Gif"
|
||
style={{
|
||
width: "100%",
|
||
height: "auto",
|
||
maxHeight: "610px",
|
||
}}
|
||
|
||
/>
|
||
</Grid>
|
||
</Grid>
|
||
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
|
||
<Grid item xs={12} sm={6} md={4} >
|
||
<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">
|
||
<strong>We aim to 'Do More With Less'</strong> <br />
|
||
Our mission is to maximize the reuse of nature's precious resources, fostering a circular economy and driving true sustainability.
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4} >
|
||
<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"> "Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4} >
|
||
<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"> "We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
</Grid >
|
||
{/* Grid 2 */}
|
||
<Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 5, md: 5 }, mt: { xs: 5, md: 5 } }}>
|
||
<Grid container justifyContent="center">
|
||
<Grid item lg={10} xs={10} md={10}>
|
||
<Typography
|
||
variant="h4"
|
||
sx={{
|
||
fontSize: { xs: '28px', md: '36px', lg: '42px' },
|
||
textAlign: "left",
|
||
fontFamily: "Helvetica Neue, Arial, sans-serif",
|
||
fontWeight: "bold"
|
||
}}
|
||
gutterBottom
|
||
>
|
||
The Process
|
||
</Typography>
|
||
<Typography
|
||
variant="body1"
|
||
sx={{
|
||
fontSize: { xs: '14px', md: '18px', lg: '20px' },
|
||
textAlign: 'left',
|
||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||
lineHeight: { xs: '1.4', md: '1.6' }
|
||
}}
|
||
>
|
||
Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
|
||
Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
|
||
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="h2"
|
||
sx={{
|
||
mt: { xs: 5, md: 9 },
|
||
mb: { xs: 5, md: 10 },
|
||
textAlign: "left",
|
||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||
fontSize: { xs: '32px', md: '48px', lg: '64px' },
|
||
color: "#95CD41",
|
||
fontWeight: "bold"
|
||
}}
|
||
>
|
||
This is where we come in.
|
||
</Typography>
|
||
</Grid>
|
||
</Grid>
|
||
</Box>
|
||
|
||
|
||
<Box
|
||
sx={{
|
||
height: { xl: 800, lg: 700 },
|
||
width: '100%',
|
||
backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
|
||
backgroundSize: "261px 220px",
|
||
// backgroundPosition: "638px 290px",
|
||
background : 'center',
|
||
backgroundRepeat: "no-repeat",
|
||
paddingBottom: { lg: 20, xs: 0 }
|
||
}}
|
||
>
|
||
<Grid
|
||
container
|
||
sx={{
|
||
width: '100%',
|
||
}}
|
||
>
|
||
|
||
<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(${newbackground})` },
|
||
backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
|
||
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={{ 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={{ 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={{ 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={{ 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; |