src/components/homepage.tsx

@@ -21,12 +21,12 @@ import OurTeam from "./ourteam";
 import mobileback from "../components/imageandgif/mobileback.png"
 // import { useMediaQuery, useTheme } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import newbackground from "../components/imageandgif/full.png"
+import newbackground from "../components/imageandgif/loopcentrelaptop.png"
 // import sustainability from "../components/imageandgif/Untitled-2.png"
 // import wasteimage from "../components/imageandgif/loopwastemanage.png"
 import WhyChooseUs from "./whyus";
 import WasteImageSection from "./wastemanagement";
-import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif"
+import loopgif from "../components/imageandgif/Loop hero 29_04 (2).gif"
 // import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
 // import gifeightm from "../components/imageandgif/reminemobile.gif";
 // import giffivem from "../components/imageandgif/repairm.gif";
@@ -179,143 +179,42 @@ const HomePage: React.FC = () => {
                     </Grid>
                 </Grid >
                 {/* Grid 2 */}
+                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: 20, mt: 20 }}>
+                    <Grid container justifyContent="center">
+                        <Grid item lg={10} xs={12} md={10}>
+                            <Typography variant="h4" fontWeight="bold" gutterBottom textAlign="left">
+                                The Process
+                            </Typography>
+                            <Typography variant="body1" sx={{ fontSize: { xs: '14px', md: '18px' }, textAlign: 'left' }}>
+                                Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
+                                Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
+                                Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.
+                            </Typography>
+                            <Typography variant="h2" fontWeight="bold" color="green" sx={{ mt: 9,mb:10, textAlign: "left" }}>
+                                This is where we come in.
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Box>
+
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2350 },
+                        height: { xl: 1800, lg: 700 },
                         width: '100%',
-                        backgroundImage: { lg: `url(${newbackground})`, xs: null },
+                        backgroundImage: `url(${newbackground})`,
-                        backgroundSize: "contain",
+                        backgroundSize: "261px 220px",
-                        backgroundPosition: { lg: "center" },
+                        backgroundPosition: "638px 290px",
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
                 >
-
                     <Grid
                         container
-
                         sx={{
-
                             width: '100%',
                         }}
                     >
-                        {/* <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
-                            <Box ref={mineRef} sx={{
-                                height: { xs: "70%", lg: "215px" },
-                                width: { xs: "83%", lg: "870px" },
-                                zIndex: 1,
-                                display: "flex",
-                                flexDirection: { xs: "column", lg: "row" },
-                                justifyContent: "center",
-                                alignItems: "center",
-                                padding: "10px",
-                                textAlign: 'center',
-                                marginBottom: { xs: "20px", md: "0" },
 
-                            }}>
-                                <Box sx={{ width: { xs: "60%", md: "70%" } }}>
-                                    <img
-                                        src={gifone}
-                                        alt="Gif"
-                                        style={{ width: "91%" }}
-                                    />
-
-                                </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
-                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
-                                </Box>
-                            </Box>
-                        </Grid>
-                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid> */}
-
-                        {/* ROW 2 */}
-                        {/* <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
-                            <Box ref={manufactureRef} sx={{
-                                height: { xs: "472px", lg: "215px" },
-                                width: { xs: "80%", lg: "552px" },
-                                zIndex: 1,
-                                display: "flex",
-                                flexDirection: { xs: "column-reverse", lg: "row" },
-                                justifyContent: "center",
-                                alignItems: "center",
-                                padding: "10px",
-                                textAlign: 'center',
-                                marginBottom: { xs: "20px", md: "0" },
-                            }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
-                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
-                                </Box>
-                                <Box sx={{ width: { lg: '50%', md: '67%' } }}>
-                                    <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
-                                </Box>
-
-                            </Box>
-                        </Grid> */}
-
-                        {/* ROW 3 */}
-                        {/* <Grid item xs={12} lg={6} md={6} sx={{
-                            background: '#ffffff00', height: { xl: "500px", lg: '378px' },
-                            display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
-                        }}>
-                            <Box ref={assembleRef} sx={{
-                                height: { xs: "332px", lg: "215px", sm: '500px', md: '500px' },
-                                width: { xs: "80%", lg: "595px" },
-                                zIndex: 1,
-                                display: "flex",
-                                flexDirection: { xs: "column", lg: "row" },
-                                justifyContent: "center",
-                                alignItems: "center",
-                                padding: "10px",
-                                textAlign: 'center',
-                                marginBottom: { xs: "20px", md: "0" },
-                            }}>
-
-                                <Box sx={{ width: { xs: "60%", md: '70%' } }}>
-                                    <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
-                                </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
-                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose. </Typography>
-                                </Box>
-
-                            </Box>
-                        </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid> */}
-
-                        {/* ROW 4 */}
-                        {/* <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
-                            <Box ref={useRefBox} sx={{
-                                height: { xs: "451px", lg: "215px", sm: '555px' },
-                                width: { xs: "80%", lg: "550px" },
-                                zIndex: 1,
-                                display: "flex",
-                                flexDirection: { xs: "column-reverse", lg: "row" },
-                                justifyContent: "center",
-                                alignItems: "center",
-                                padding: "10px",
-                                textAlign: 'center',
-                                marginBottom: { xs: "20px", md: "0" },
-                            }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
-                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
-                                </Box>
-
-                                <Box sx={{ width: { xs: "60%", md: '70%' } }}>
-                                    <img src={giffour} alt="Gif" style={{ width: "100%" }} />
-                                </Box>
-                            </Box>
-                        </Grid> */}
-                        {/* new2 */}
-                        {/* <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid> */}
-                        {/* newnew */}
-                        {/* desktop view */}
-                        {/* Reuse Section */}
                         <Grid item xs={5} sm={6} lg={6}
                             sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
                             <Box ref={reuseRef}