Compare commits
No commits in common. "50824156749b20f91ae4378b14241f4af81bfb80" and "0317afe2d8991011a7b0018edbf0f6f86b37437e" have entirely different histories.
5082415674
...
0317afe2d8
|
|
@ -47,6 +47,9 @@ const HomePage: React.FC = () => {
|
|||
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"));
|
||||
|
|
@ -91,91 +94,67 @@ const HomePage: React.FC = () => {
|
|||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: { xs: "270px", lg: "77vh", sm: "487px", md: '517px' },
|
||||
height: { xs: "432px", lg: "60vh", sm: "487px", md: '400px' },
|
||||
width: { lg: "100vw" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
paddingTop: { xs: '50px', lg: '5px' , md:'10px' },
|
||||
marginBottom: { xs: "10px", md: "39px", lg: '30px' },
|
||||
paddingTop: { xs: '50px', lg: '5px' },
|
||||
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={loopgif}
|
||||
alt="Gif"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
maxHeight: "610px",
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
<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",
|
||||
|
||||
<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
|
||||
variant="h3"
|
||||
sx={{ fontSize: { xs: '20px', sm: '48px' }, fontWeight: 'bold' }}
|
||||
>
|
||||
We aim to 'Do More With Less'
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
{items.map((text, index) => (
|
||||
|
||||
</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 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: 2350 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2390 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||
backgroundSize: "contain",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB |
Loading…
Reference in New Issue