mobileback not used, lint issue solved

Reviewed-on: #33
Reviewed-by: Mihir Motiyani <mihir@midastix.com>

src/components/homepage.tsx

@@ -18,15 +18,15 @@ import Footer from "./footer";
 // import loopgreenback from "../components/imageandgif/lsbg.png"
 import OurTeam from "./ourteam";
 // import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
-import mobileback from "../components/imageandgif/mobileback.png"
+// 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,72 @@ const HomePage: React.FC = () => {
                     </Grid>
                 </Grid >
                 {/* Grid 2 */}
+                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 5, md: 5 }, mt: { xs: 5, md: 5 } }}>
+                    <Grid container justifyContent="center">
+                        <Grid item lg={10} xs={10} md={10}>
+                            <Typography
+                                variant="h4"
+                                sx={{
+                                    fontSize: { xs: '28px', md: '36px', lg: '42px' },
+                                    textAlign: "left",
+                                    fontFamily: "Helvetica Neue, Arial, sans-serif",
+                                    fontWeight: "bold"
+                                }}
+                                gutterBottom
+                            >
+                                The Process
+                            </Typography>
+                            <Typography
+                                variant="body1"
+                                sx={{
+                                    fontSize: { xs: '14px', md: '18px', lg: '20px' },
+                                    textAlign: 'left',
+                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                                    lineHeight: { xs: '1.4', md: '1.6' }
+                                }}
+                            >
+                                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"
+                                sx={{
+                                    mt: { xs: 5, md: 9 },
+                                    mb: { xs: 5, md: 10 },
+                                    textAlign: "left",
+                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                                    fontSize: { xs: '32px', md: '48px', lg: '64px' },
+                                    color: "#95CD41",
+                                    fontWeight: "bold"
+                                }}
+                            >
+                                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: 800, lg: 700 },
                         width: '100%',
-                        backgroundImage: { lg: `url(${newbackground})`, xs: null },
+                        backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
-                        backgroundSize: "contain",
+                        backgroundSize: "261px 220px",
-                        backgroundPosition: { lg: "center" },
+                        // backgroundPosition: "638px 290px",
+                        background : 'center',
                         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}
@@ -426,15 +355,15 @@ const HomePage: React.FC = () => {
                         <Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
                             sx={{
                                 display: { xs: "flex", md: "flex", lg: 'none' },
-                                backgroundImage: { lg: null, xs: `url(${mobileback})` },
+                                backgroundImage: { lg: null, xs: `url(${newbackground})` },
-                                backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
+                                backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
                                 backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
                                 backgroundRepeat: "no-repeat",
                             }}>
                             {/* Reuse */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{  p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@@ -456,7 +385,7 @@ const HomePage: React.FC = () => {
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -488,7 +417,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
 
@@ -508,7 +437,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
+                                    <Box sx={{  p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
                                     </Box>

src/components/ourteam.tsx

@@ -36,7 +36,7 @@ const teamMembers: TeamMember[] = [
 ];
 
 const OurTeam: React.FC = () => {
-    const [showTeam, setShowTeam] = useState(false);
+    const [showTeam, setShowTeam] = useState(true);
 
     return (
         <Grid

src/components/whyus.tsx

@@ -47,7 +47,8 @@ const WhyChooseUs: React.FC = () => {
             item
             key={index}
             xs={6}
-            sm={2}
+            sm={6}
+            lg={3}
             display="flex"
             justifyContent="center"
           >