src/components/homepage.tsx

@@ -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,53 +94,46 @@ 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' },
+                            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 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>
+                        </Box>
+                    </Grid>
+                    {items.map((text, index) => (
 
-                        </Box>
+                        <Grid item xs={12} sm={6} md={4} key={index}  >
-                    </Grid>
-                    <Grid item xs={12} sm={6} md={4} >
                             <Box
                                 sx={{
                                     p: 3,
@@ -150,32 +146,15 @@ const HomePage: React.FC = () => {
                                     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 variant="body1">{text}</Typography>
-                            </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={{
-                        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",