added new and improved background also added new content #30
|
|
@ -47,9 +47,6 @@ 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"));
|
||||||
|
|
@ -94,67 +91,91 @@ const HomePage: React.FC = () => {
|
||||||
xs={12}
|
xs={12}
|
||||||
sx={{
|
sx={{
|
||||||
marginTop: "0px",
|
marginTop: "0px",
|
||||||
height: { xs: "432px", lg: "60vh", sm: "487px", md: '400px' },
|
height: { xs: "270px", lg: "77vh", sm: "487px", md: '517px' },
|
||||||
width: { lg: "100vw" },
|
width: { lg: "100vw" },
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
paddingTop: { xs: '50px', lg: '5px' },
|
paddingTop: { xs: '50px', lg: '5px' , md:'10px' },
|
||||||
marginBottom: { xs: "10px", md: "39px", lg: '60px' },
|
marginBottom: { xs: "10px", md: "39px", lg: '30px' },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img src={loopgif} alt="Gif" style={{ width: "100%", height: '480px' }} />
|
<img
|
||||||
|
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}>
|
|
||||||
|
<Grid item xs={12} sm={6} md={4} >
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
p: 3,
|
p: 3,
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
|
backgroundColor: "#7c77770d",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
color: '#333333',
|
color: '#333333',
|
||||||
height: {xs:'47px', sm:'87px'},
|
height: '107px',
|
||||||
fontSize: { xs: '12px', sm: '16px' },
|
fontSize: { xs: '12px', sm: '16px' },
|
||||||
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
fontFamily: "SF Pro Regular, Arial, sans-serif",
|
||||||
fontWeight: "500",
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography variant="body1">
|
||||||
variant="h3"
|
<strong>We aim to 'Do More With Less'</strong> <br />
|
||||||
sx={{ fontSize: { xs: '20px', sm: '48px' }, fontWeight: 'bold' }}
|
Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.
|
||||||
>
|
</Typography>
|
||||||
We aim to 'Do More With Less'
|
|
||||||
|
</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>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</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>
|
||||||
{/* Grid 2 */}
|
{/* Grid 2 */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2390 },
|
height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2350 },
|
||||||
width: '100%',
|
width: '100%',
|
||||||
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
backgroundImage: { lg: `url(${newbackground})`, xs: null },
|
||||||
backgroundSize: "contain",
|
backgroundSize: "contain",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Loading…
Reference in New Issue