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 impactRef = useRef<HTMLDivElement>(null);
|
||||||
const reuseRef = useRef<HTMLDivElement>(null);
|
const reuseRef = useRef<HTMLDivElement>(null);
|
||||||
const items = [
|
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 theme = useTheme();
|
||||||
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
// const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||||
|
|
@ -91,91 +94,67 @@ const HomePage: React.FC = () => {
|
||||||
xs={12}
|
xs={12}
|
||||||
sx={{
|
sx={{
|
||||||
marginTop: "0px",
|
marginTop: "0px",
|
||||||
height: { xs: "270px", lg: "77vh", sm: "487px", md: '517px' },
|
height: { xs: "432px", lg: "60vh", sm: "487px", md: '400px' },
|
||||||
width: { lg: "100vw" },
|
width: { lg: "100vw" },
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
paddingTop: { xs: '50px', lg: '5px' , md:'10px' },
|
paddingTop: { xs: '50px', lg: '5px' },
|
||||||
marginBottom: { xs: "10px", md: "39px", lg: '30px' },
|
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img src={loopgif} alt="Gif" style={{ width: "100%", height: '480px' }} />
|
||||||
src={loopgif}
|
|
||||||
alt="Gif"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: "auto",
|
|
||||||
maxHeight: "610px",
|
|
||||||
}}
|
|
||||||
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
|
<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">
|
<Typography
|
||||||
<strong>We aim to 'Do More With Less'</strong> <br />
|
variant="h3"
|
||||||
Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.
|
sx={{ fontSize: { xs: '20px', sm: '48px' }, fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
We aim to 'Do More With Less'
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
{items.map((text, index) => (
|
||||||
|
|
||||||
</Box>
|
<Grid item xs={12} sm={6} md={4} key={index} >
|
||||||
</Grid>
|
<Box
|
||||||
<Grid item xs={12} sm={6} md={4} >
|
sx={{
|
||||||
<Box
|
p: 3,
|
||||||
sx={{
|
borderRadius: "12px",
|
||||||
p: 3,
|
backgroundColor: "#7c77770d",
|
||||||
borderRadius: "12px",
|
textAlign: "center",
|
||||||
backgroundColor: "#7c77770d",
|
color: '#333333',
|
||||||
textAlign: "center",
|
height: '107px',
|
||||||
color: '#333333',
|
fontSize: { xs: '12px', sm: '16px' },
|
||||||
height: '107px',
|
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||||||
fontSize: { xs: '12px', sm: '16px' },
|
}}
|
||||||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
>
|
||||||
}}
|
<Typography variant="body1">{text}</Typography>
|
||||||
>
|
</Box>
|
||||||
<Typography variant="body1"> "Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
|
</Grid>
|
||||||
</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>
|
||||||
{/* Grid 2 */}
|
{/* Grid 2 */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
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%',
|
width: '100%',
|
||||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||||
backgroundSize: "contain",
|
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