Merge pull request 'added new and improved background also added new content' (#30) from fix/tabview into main

Reviewed-on: #30

src/components/homepage.tsx

@@ -47,9 +47,6 @@ 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"));
@@ -94,67 +91,91 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "432px", lg: "60vh", sm: "487px", md: '400px' },
+                            height: { xs: "270px", lg: "77vh", sm: "487px", md: '517px' },
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             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 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
                             sx={{
                                 p: 3,
                                 borderRadius: "12px",
+                                backgroundColor: "#7c77770d",
                                 textAlign: "center",
                                 color: '#333333',
-                                height: {xs:'47px', sm:'87px'},
+                                height: '107px',
                                 fontSize: { xs: '12px', sm: '16px' },
                                 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>
                         </Box>
                     </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 2 */}
                 <Box
                     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%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",