diff --git a/public/index.html b/public/index.html
index aa069f2..dff3868 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Loop Sustainability </title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index fa96d34..a0497aa 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -1,22 +1,25 @@
 import React, { useRef } from "react";
 import { Box, Grid, Typography } from "@mui/material";
 import logo from "../loopslogo2.png";
-import backone from "../components/imageandgif/backgroundone.png";
-import backthree from "../components/imageandgif/backgroundthree.png";
-import backfour from "../components/imageandgif/backgroundfour.png";
-import backfive from "../components/imageandgif/backgroundfive.png";
-import backsix from "../components/imageandgif/backgroundsix.png";
-import gifone from "../components/imageandgif/gifone.gif"
-import giftwo from "../components/imageandgif/giftwo.gif"
-import gifthree from "../components/imageandgif/gifthree.gif"
-import giffour from "../components/imageandgif/giffour.gif"
-import giffive from "../components/imageandgif/giffive.gif"
-import gifsix from "../components/imageandgif/gifsix.gif"
-import gifseven from "../components/imageandgif/gifseven.gif"
-import gifeight from "../components/imageandgif/gifeight.gif"
-import loopgreen from "../components/imageandgif/newloop.png"
+import backone from "../components/imageandgif/newbgone.png";
+import backtwo from "../components/imageandgif/newnewtwo.png";
+import backthree from "../components/imageandgif/newthree.png";
+import gifone from "../components/imageandgif/gifone.gif";
+import giftwo from "../components/imageandgif/giftwo.gif";
+import gifthree from "../components/imageandgif/gifthree.gif";
+import giffour from "../components/imageandgif/giffour.gif";
+import giffive from "../components/imageandgif/giffive.gif";
+import gifsix from "../components/imageandgif/gifsix.gif";
+import gifseven from "../components/imageandgif/gifseven.gif";
+import gifeight from "../components/imageandgif/gifeight.gif";
+import loopgreen from "../components/imageandgif/newloop.png";
 import PartnerWork from "./ourwork";
 import Footer from "./footer";
+import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
+import OurTeam from "./ourteam";
+import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
 
 const HomePage: React.FC = () => {
     // Create refs for each content box
@@ -29,382 +32,430 @@ const HomePage: React.FC = () => {
     const remineRef = useRef<HTMLDivElement>(null);
     const impactRef = useRef<HTMLDivElement>(null);
     const reuseRef = useRef<HTMLDivElement>(null);
+
     // Function to scroll to the ref
     const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
         if (ref.current) {
             ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
         }
     };
+    const theme = createTheme({
+        breakpoints: {
+            values: {
+                xs: 0,     // Default
+                sm: 600,   // Default
+                md: 1000,   // Default
+                lg: 1400,  // Default
+                xl: 1800,  // Default
+
+            },
+        },
+    });
 
     return (
-        <Box>
-            <Grid container sx={{ position: "relative", marginTop: '119px' }}>
-                {/* Grid 1 */}
-                <Grid
-                    item
-                    xs={12}
-                    sx={{
-                        marginTop: "0px",
-                        height: "300px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${logo})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "right center",
-                        backgroundRepeat: "no-repeat",
-                    }}
-                >
-                    <Box
+        <ThemeProvider theme={theme}>
+            <Box>
+                <Grid container sx={{ position: "relative", marginTop: '119px' }}>
+                    {/* Grid 1 */}
+                    <Grid
+                        item
+                        xs={12}
                         sx={{
-                            position: "absolute",
-                            top: "80%",
-                            left: "5%",
-                            transform: "translateY(-30%)",
-                            height: "440px",
-                            width: "220px",
-                            backgroundColor: "#eee0e0a3",
-                            zIndex: 1,
-                            padding: "20px",
-                            overflowY: "auto",
-                            borderRadius: "8px",
+                            marginTop: "0px",
+                            height: { xs: "190px", md: "300px" },
+                            backgroundColor: "white",
+                            position: "relative",
+                            backgroundImage: {
+                                xs: `url(${mobileLogo})`, // Mobile background image
+                                md: `url(${logo})`, // Desktop background image
+                            },
+                            backgroundSize: "contain",
+                            backgroundPosition: "right center",
+                            backgroundRepeat: "no-repeat",
+                            marginBottom: { xs: "10px", md: "399px" },
                         }}
                     >
-                        <ul style={{
-                            listStyleType: "none",
-                            padding: "0",
-                            margin: "0",
+
+                        <Box
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "70%", md: "80%" },
+                                left: { xs: "2%", md: "5%" },
+                                transform: "translateY(-30%)",
+                                height: { xs: "235px", md: "440px" },
+                                width: { xs: "150px", md: "220px" },
+                                backgroundColor: "#eee0e0a3",
+                                zIndex: 1,
+                                padding: "20px",
+                                overflowY: "auto",
+                                borderRadius: "8px",
+                                display: { xs: "none", md: "block" },
+                            }}
+                        >
+                            <ul style={{
+                                listStyleType: "none",
+                                padding: "0",
+                                margin: "0",
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "10px"
+                            }}>
+                                <li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
+                                <li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
+                                <li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
+                                <li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
+                                <li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
+                                <li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
+                                <li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
+                                <li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
+                                <li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
+                            </ul>
+                        </Box>
+                    </Grid>
+
+                    {/* Grid 2 */}
+                    <Grid
+                        item
+                        xs={12}
+                        sx={{
+                            height: { xs: "900px", md: "965px" }, // Increased height for mobile view
+                            backgroundColor: "white",
+                            position: "relative",
+                            backgroundImage: {
+                                xs: null,
+                                md: `url(${backone})`,
+                            },
+                            backgroundSize: "contain",
+                            backgroundPositionX: "50.5%",
+                            backgroundPositionY: "60%",
+                            backgroundRepeat: "no-repeat",
                             display: "flex",
                             flexDirection: "column",
-                            gap: "10px"
+                            justifyContent: "center",
+                            alignItems: "center",
+                            textAlign: 'center',
+                            padding: { xs: "20px", md: "0" },
+                        }}
+                    >
+                        <Box
+                            ref={mineRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "15%", lg: "4%" },
+                                left: { lg: "10%" },
+                                transform: "translateY(-50%)",
+                                height: { xs: "332px", lg: "200px" },
+                                width: { xs: "80%", lg: "470px" },
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column", lg: "row" },
+                                justifyContent: "center",
+                                alignItems: "center",
+                                padding: "10px",
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
+                            }}
+                        >
+                            <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                <img src={gifone} alt="Gif" style={{ width: "100%" }} />
+                            </Box>
+                            <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" } }}>
+                                <Typography variant="h4">Mine from nature</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque</p>
+                            </Box>
+                        </Box>
+
+                        <Box
+                            ref={manufactureRef}
+                            sx={{
+                                position: "relative",
+                                top: { xs: "11%", lg: "-10%" }, // Adjust top for mobile
+                                right: { lg: "-22%" },
+                                height: { xs: "300px", md: "215px" },
+                                width: { xs: "80%", md: "560px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column-reverse", lg: "row" },
+                                justifyContent: "center",
+                                alignItems: "center",
+                                padding: "10px",
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
+                            }}
+                        >
+                            <Box sx={{ width: "60%", paddingLeft: { xs: "0", md: "10px" } }}>
+                                <Typography variant="h4">Manufacture</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto</p>
+                            </Box>
+                            <Box sx={{ width: "45%" }}>
+                                <img src={giftwo} alt="Gif" style={{ width: "70%", height: "auto" }} />
+                            </Box>
+                        </Box>
+
+                        <Box
+                            ref={assembleRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "74%", lg: "66%" },
+                                left: { lg: "12%" },
+                                height: { xs: "300px", md: "167px" },
+                                width: { xs: "80%", md: "534px" },
+                                backgroundColor: "white",
+                                display: "flex",
+                                flexDirection: { xs: "column-reverse", lg: "row" },
+                                justifyContent: "center",
+                                alignItems: "center",
+                                padding: "10px",
+                                textAlign: 'center',
+                                zIndex: 1,
+                            }}
+                        >
+                            <Box sx={{ width: "70%", paddingLeft: { xs: "0", md: "10px" } }}>
+                                <Typography variant="h4">Assemble</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!</p>
+                            </Box>
+                            <Box sx={{ width: "70%" }}>
+                                <img src={gifthree} alt="Gif" style={{ width: "85%", height: "auto" }} />
+                            </Box>
+                        </Box>
+                    </Grid>
+
+                    {/* Grid 3 */}
+                    <Grid
+                        item
+                        xs={12}
+                        sx={{
+                            height: { xs: "600px", lg: "615px" },
+                            backgroundColor: "white",
+                            position: "relative",
+                            backgroundImage: {
+                                xs: null,
+                                md: `url(${backtwo})`,
+                            },
+                            backgroundSize: "contain",
+                            backgroundPositionX: "41.5%",
+                            backgroundPositionY: "60%",
+                            backgroundRepeat: "no-repeat",
+                            display: { xs: "flex" },
+                            flexDirection: { xs: "column-reverse", lg: "row" },
+                            justifyContent: { xs: "center" },
+                            alignItems: { xs: "center" },
+                            textAlign: { xs: 'center' }
                         }}>
-                            <li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
-                            <li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
-                            <li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
-                            <li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
-                            <li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
-                            <li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
-                            <li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
-                            <li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
-                            <li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
-                        </ul>
-                    </Box>
-                </Grid>
+                        <Box
+                            ref={useRefBox}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "65%", lg: "17%" },
+                                right: { xs: "8%", md: "25%" },
+                                transform: "translateY(-50%)",
+                                height: { xs: "150px", md: "167px" },
+                                width: { xs: "80%", md: "523px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column-reverse", lg: 'row' },
+                                justifyContent: "flex-start",
+                                alignItems: "center",
+                                padding: "10px",
+                            }}
+                        >
+                            <Box sx={{ width: "70%", paddingLeft: "10px" }}>
+                                <Typography variant="h4">Use</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
+                            </Box>
+                            <Box sx={{ width: "70%" }}>
+                                <img src={giffour} alt="Gif" style={{ width: "69%", height: "auto" }} />
+                            </Box>
+                        </Box>
+                    </Grid>
 
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "400px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backone})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
-                    }}>
-                    <Box
-                        ref={mineRef} // Attach ref here
+                    {/* Grid 4 */}
+                    <Grid
+                        item
+                        xs={12}
                         sx={{
-                            position: "absolute",
-                            top: "80%",
-                            right: "3%",
-                            transform: "translateY(-50%)",
-                            height: "400px",
-                            width: "630px",
+                            height: { xs: "707px", md: "830px" },
                             backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%" }}>
-                            <img src={gifone} alt="Gif" style={{ width: "100%", height: "auto" }} />
+                            position: "relative",
+                            backgroundImage: { lg: `url(${backthree})`, xs: null },
+                            backgroundSize: "contain",
+                            backgroundPosition: "46.2% 50%",
+                            backgroundRepeat: "no-repeat",
+                        }}>
+                        <Box
+                            ref={reuseRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "5%", md: "7%" },
+                                left: { xs: "-1%", md: "17%" },
+                                transform: "translateY(-23%)",
+                                height: { xs: "150px", md: "167px" },
+                                width: { xs: "49%", md: "388px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
+                                alignItems: "center",
+                                justifyContent: "center", // Center vertically
+                                padding: "10px",
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    width: "80%",
+                                    paddingLeft: "10px",
+                                    backgroundColor: { xs: 'green', md: 'transparent' }, // Green background for mobile
+                                    display: 'flex', // Make the text box a flex container to center content vertically
+                                    flexDirection: 'column', // Align text content vertically
+                                    justifyContent: 'center', // Vertically center the text
+                                }}
+                            >
+                                <Typography variant="h4">Reuse</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
+                            </Box>
+                            <Box sx={{
+                                width: "80%",
+                                display: 'flex',
+                                justifyContent: 'center', // Center the gif horizontally
+                                alignItems: 'center', // Center the gif vertically
+                            }}>
+                                <img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
+                            </Box>
                         </Box>
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Mine from nature</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
+
+
+                        <Box
+                            ref={repairRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "1%", md: "20%" },
+                                right: { xs: "1%", md: "13%" },
+                                transform: "translateY(-23%)",
+                                height: { xs: "150px", md: "167px" },
+                                width: { xs: "47%", md: "390px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
+                                alignItems: "center",
+                                justifyContent: "center", // Center vertically
+                                padding: "10px",
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    width: "80%",
+                                    paddingLeft: "10px",
+                                    backgroundColor: { xs: 'green', md: 'transparent' }, 
+                                    display: 'flex',
+                                    flexDirection: 'column', 
+                                    justifyContent: 'center', 
+                                }}
+                            >
+                                <Typography variant="h4">Repair</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
+                            </Box>
+                            <Box sx={{ width: "80%" }}>
+                                <img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
+                            </Box>
                         </Box>
-                    </Box>
-                </Grid>
 
-                {/* Grid 3 */}
-                <Grid
-                    item
-                    xs={12}
+                        <Box
+                            ref={disintegrateRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "61%", md: "61%" },
+                                left: { xs: "-2%", md: "6%" },
+                                transform: "translateY(-23%)",
+                                height: { xs: "150px", md: "167px" },
+                                width: { xs: "51%", md: "409px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
+                                alignItems: "center",
+                                justifyContent: "center", // Center vertically
+                                padding: "10px",
+                                
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    width: "80%",
+                                    paddingLeft: "10px",
+                                    backgroundColor: { xs: 'green', md: 'transparent' }, 
+                                    display: 'flex',
+                                    flexDirection: 'column', 
+                                    justifyContent: 'center', 
+                                }}
+                            >
+                                <Typography variant="h4" sx={{fontSize:'2rem'}}>Disintegrate</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
+                            </Box>
+                            <Box sx={{ width: "70%" }}>
+                                <img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
+                            </Box>
+                        </Box>
 
-                    sx={{
-                        height: "400px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backone})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "50.5% 50%",
-                        backgroundRepeat: "no-repeat",
+                        <Box
+                            ref={remineRef}
+                            sx={{
+                                position: "absolute",
+                                top: { xs: "60%", md: "65%" },
+                                right: { xs: "-3%", md: "8%" },
+                                transform: "translateY(-23%)",
+                                height: { xs: "150px", md: "167px" },
+                                width: { xs: "50%", md: "309px" },
+                                backgroundColor: "white",
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
+                                alignItems: "center",
+                                justifyContent: "center", // Center vertically
+                                padding: "10px",
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    width: "80%",
+                                    paddingLeft: "10px",
+                                     
+                                }}
+                            >
+                                <img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
+                            </Box>
+                            <Box sx={{ width: "70%", paddingLeft: "10px",  backgroundColor: { xs: 'green', md: 'transparent' }, 
+                                    display: 'flex',
+                                    flexDirection: 'column', 
+                                    justifyContent: 'center', }}>
+                                <Typography variant="h4">Remine</Typography>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
+                            </Box>
+                        </Box>
+                    </Grid>
 
-                    }}>
-                    <Box
-                        ref={manufactureRef} // Attach ref here
+                    {/* Grid 5 */}
+                    <Grid
+                        item
+                        xs={12}
+                        ref={mineRef}
                         sx={{
-                            position: "absolute",
-                            top: "73%",
-                            left: "2%",
-                            transform: "translateY(-50%)",
-                            height: "400px",
-                            width: "630px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Manufacture</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
-                        </Box>
-                        <Box sx={{ width: "70%" }}>
-                            <img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
-                        </Box>
-                    </Box>
+                            height: { xs: "200px", md: "300px" },
+                            backgroundImage: `url(${loopgreen})`,
+                            position: "relative",
+                            backgroundSize: "contain",
+                            backgroundPosition: "center",
+                            backgroundRepeat: "no-repeat",
+                        }}>
+                    </Grid>
                 </Grid>
-
-                {/* Grid 4 */}
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "308px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backthree})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "61.2% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
-                    <Box
-                        ref={assembleRef}
-                        sx={{
-                            position: "absolute",
-                            top: "-12%",
-                            right: "5%",
-                            transform: "translateY(-50%)",
-                            height: "167px",
-                            width: "534px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Assemble</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
-                        </Box>
-                        <Box sx={{ width: "70%" }}>
-                            <img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} />
-                        </Box>
-                    </Box>
-                </Grid>
-
-                {/* Grid 5 */}
-                <Grid
-                    item
-                    xs={12}
-                    sx={{
-                        height: "408px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backfour})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "58% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
-                    <Box
-                        ref={useRefBox}
-                        sx={{
-                            position: "absolute",
-                            top: "10%",
-                            left: "8%",
-                            transform: "translateY(-50%)",
-                            height: "167px",
-                            width: "523px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Use</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
-                        </Box>
-                        <Box sx={{ width: "70%" }}>
-                            <img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} />
-                        </Box>
-                    </Box>
-                    <Box
-                        ref={reuseRef}
-                        sx={{
-                            position: "absolute",
-                            top: "60%",
-                            left: "7%",
-                            transform: "translateY(-23%)",
-                            height: "167px",
-                            width: "388px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            flexDirection: 'column',
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "80%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Reuse</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
-                        </Box>
-                        <Box sx={{ width: "80%" }}>
-                            <img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
-                        </Box>
-                    </Box>
-                </Grid>
-
-                {/* Grid 6 */}
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "400px",
-                        position: "relative",
-                        backgroundImage: `url(${backfive})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "63% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
-                    <Box
-                        ref={repairRef}
-                        sx={{
-                            position: "absolute",
-                            top: "12%",
-                            left: "39%",
-                            transform: "translateY(-23%)",
-                            height: "167px",
-                            width: "390px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "100%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Repair</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
-                        </Box>
-                        <Box sx={{ width: "80%" }}>
-                            <img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
-                        </Box>
-                    </Box>
-                    <Box
-                     ref={disintegrateRef}
-                        sx={{
-                            position: "absolute",
-                            top: "70%",
-                            left: "22%",
-                            transform: "translateY(-23%)",
-                            height: "167px",
-                            width: "409px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Disintegrate</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
-                        </Box>
-                        <Box sx={{ width: "70%" }}>
-                            <img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
-                        </Box>
-                    </Box>
-                </Grid>
-                {/* grid  */}
-                <Grid
-                    item
-                    xs={12}
-                    // Attach ref here
-                    sx={{
-                        height: "285px",
-                        position: "relative",
-                        backgroundImage: `url(${backsix})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "56% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
-                    <Box
-                    ref={remineRef} 
-                        sx={{
-                            position: "absolute",
-                            top: "44%",
-                            left: "56%",
-                            transform: "translateY(-23%)",
-                            height: "167px",
-                            width: "309px",
-                            backgroundColor: "white",
-                            zIndex: 1,
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            alignItems: "center",
-                            padding: "10px",
-                        }}
-                    >
-                        <Box sx={{ width: "70%" }}>
-                            <img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
-                        </Box>
-                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
-                            <Typography variant="h4">Remine</Typography>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
-                        </Box>
-
-                    </Box>
-                </Grid>
-                <Grid
-                    item
-                    xs={12}
-                    ref={mineRef} // Attach ref here
-                    sx={{
-                        height: "300px",
-                        backgroundImage: `url(${loopgreen})`,
-                        
-                        position: "relative",
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
-                    }}>
-                   
-                </Grid>
-            </Grid>
-            <PartnerWork/>
-            <Footer/>
-        </Box>
+                <PartnerWork />
+                <OurTeam />
+                <Footer />
+            </Box>
+        </ThemeProvider>
     );
 };
 
diff --git a/src/components/imageandgif/Screenshot_2025-02-11_080049-removebg-preview.png b/src/components/imageandgif/Screenshot_2025-02-11_080049-removebg-preview.png
new file mode 100644
index 0000000..08e917b
Binary files /dev/null and b/src/components/imageandgif/Screenshot_2025-02-11_080049-removebg-preview.png differ
diff --git a/src/components/imageandgif/Screenshot_2025-02-11_080104-removebg-preview.png b/src/components/imageandgif/Screenshot_2025-02-11_080104-removebg-preview.png
new file mode 100644
index 0000000..775de6c
Binary files /dev/null and b/src/components/imageandgif/Screenshot_2025-02-11_080104-removebg-preview.png differ
diff --git a/src/components/imageandgif/backgroundnewone.png b/src/components/imageandgif/backgroundnewone.png
new file mode 100644
index 0000000..69c8ce8
Binary files /dev/null and b/src/components/imageandgif/backgroundnewone.png differ
diff --git a/src/components/imageandgif/backgroundnewtwo.png b/src/components/imageandgif/backgroundnewtwo.png
new file mode 100644
index 0000000..4902962
Binary files /dev/null and b/src/components/imageandgif/backgroundnewtwo.png differ
diff --git a/src/components/imageandgif/bgone.png b/src/components/imageandgif/bgone.png
new file mode 100644
index 0000000..a322caf
Binary files /dev/null and b/src/components/imageandgif/bgone.png differ
diff --git a/src/components/imageandgif/color.png b/src/components/imageandgif/color.png
new file mode 100644
index 0000000..8543532
Binary files /dev/null and b/src/components/imageandgif/color.png differ
diff --git a/src/components/imageandgif/gifeight.gif b/src/components/imageandgif/gifeight.gif
index 5d70ded..5c237d1 100644
Binary files a/src/components/imageandgif/gifeight.gif and b/src/components/imageandgif/gifeight.gif differ
diff --git a/src/components/imageandgif/giffour.gif b/src/components/imageandgif/giffour.gif
index 17da6bf..c45e532 100644
Binary files a/src/components/imageandgif/giffour.gif and b/src/components/imageandgif/giffour.gif differ
diff --git a/src/components/imageandgif/gifone.gif b/src/components/imageandgif/gifone.gif
index 0ceb305..0b1ccef 100644
Binary files a/src/components/imageandgif/gifone.gif and b/src/components/imageandgif/gifone.gif differ
diff --git a/src/components/imageandgif/gifseven.gif b/src/components/imageandgif/gifseven.gif
index ffaae14..9910b9a 100644
Binary files a/src/components/imageandgif/gifseven.gif and b/src/components/imageandgif/gifseven.gif differ
diff --git a/src/components/imageandgif/gifsix.gif b/src/components/imageandgif/gifsix.gif
index 7e5a1cd..adaef8e 100644
Binary files a/src/components/imageandgif/gifsix.gif and b/src/components/imageandgif/gifsix.gif differ
diff --git a/src/components/imageandgif/gifthree.gif b/src/components/imageandgif/gifthree.gif
index 606826f..831dc87 100644
Binary files a/src/components/imageandgif/gifthree.gif and b/src/components/imageandgif/gifthree.gif differ
diff --git a/src/components/imageandgif/giftwo.gif b/src/components/imageandgif/giftwo.gif
index bab6b23..15f540a 100644
Binary files a/src/components/imageandgif/giftwo.gif and b/src/components/imageandgif/giftwo.gif differ
diff --git a/src/components/imageandgif/loopgreenbackground.png b/src/components/imageandgif/loopgreenbackground.png
new file mode 100644
index 0000000..3a891b1
Binary files /dev/null and b/src/components/imageandgif/loopgreenbackground.png differ
diff --git a/src/components/imageandgif/loopsMoblogo.png b/src/components/imageandgif/loopsMoblogo.png
new file mode 100644
index 0000000..879970f
Binary files /dev/null and b/src/components/imageandgif/loopsMoblogo.png differ
diff --git a/src/components/imageandgif/newbgone.png b/src/components/imageandgif/newbgone.png
new file mode 100644
index 0000000..8fbac77
Binary files /dev/null and b/src/components/imageandgif/newbgone.png differ
diff --git a/src/components/imageandgif/newbgtwo.png b/src/components/imageandgif/newbgtwo.png
new file mode 100644
index 0000000..0ffeb53
Binary files /dev/null and b/src/components/imageandgif/newbgtwo.png differ
diff --git a/src/components/imageandgif/newnewtwo.png b/src/components/imageandgif/newnewtwo.png
new file mode 100644
index 0000000..f795fad
Binary files /dev/null and b/src/components/imageandgif/newnewtwo.png differ
diff --git a/src/components/imageandgif/newthree.png b/src/components/imageandgif/newthree.png
new file mode 100644
index 0000000..44ed22e
Binary files /dev/null and b/src/components/imageandgif/newthree.png differ
diff --git a/src/components/imageandgif/robert.png b/src/components/imageandgif/robert.png
new file mode 100644
index 0000000..8700d7f
Binary files /dev/null and b/src/components/imageandgif/robert.png differ
diff --git a/src/components/ourteam.tsx b/src/components/ourteam.tsx
new file mode 100644
index 0000000..aaabb8a
--- /dev/null
+++ b/src/components/ourteam.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { Grid, Typography, Card, CardContent, CardMedia, Divider } from "@mui/material";
+import color from "../components/imageandgif/color.png"
+import robert from "../components/imageandgif/robert.png"
+
+interface TeamMember {
+    name: string;
+    role: string;
+    image: string;
+}
+
+const teamMembers: TeamMember[] = [
+    { name: "John Doe", role: "Software Engineer", image: robert },
+    { name: "Jane Smith", role: "UI/UX Designer", image: robert },
+    { name: "Alice Johnson", role: "Project Manager", image: robert },
+    { name: "Robert Brown", role: "Marketing Lead", image: robert },
+    { name: "Emma Wilson", role: "Backend Developer", image: robert },
+    { name: "Michael Davis", role: "Data Analyst", image: robert },
+];
+
+const OurTeam: React.FC = () => {
+    return (
+        <Grid
+            container
+            justifyContent="center"
+            alignItems="center"
+            sx={{
+                position: "relative",
+                minHeight: "100vh",
+                backgroundImage: `url(${color})`,
+                backgroundSize: "contain",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+
+            }}
+        >
+            <Typography
+                variant="h4"
+                sx={{
+                    textAlign: "center",
+                    fontWeight: "bold",
+                    color: "#333",
+                    marginBottom: "30px",
+                }}
+            >
+                Our Team
+            </Typography>
+
+            <Grid container spacing={1} justifyContent="center">
+                {teamMembers.map((member, index) => (
+                    <Grid item xs={12} sm={6} md={4} key={index}>
+                        <Card
+                            sx={{
+                                boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
+                                borderRadius: "12px",
+                                textAlign: "center",
+                                transition: "transform 0.3s",
+                                "&:hover": { transform: "translateY(-5px)" },
+                                backgroundColor: "white",
+                                maxWidth: "230px",
+                                margin: "0 auto",
+                            }}
+                        >
+                            <CardContent sx={{ paddingBottom: 1 }}>
+                                <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
+                                    {member.name}
+                                </Typography>
+                                <Typography variant="body2" sx={{ fontSize: "0.875rem", color: "gray" }}>
+                                    {member.role}
+                                </Typography>
+                            </CardContent>
+
+                            {/* Divider Line */}
+                            <Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
+
+                            <CardMedia
+                                component="img"
+                                height="140" // Reduced height slightly
+                                image={member.image}
+                                alt={member.name}
+                                sx={{
+                                    objectFit: "contain", // Ensure the entire image is visible
+                                    width: "80%", // Make the image width smaller
+                                    margin: "0 auto", // Center the image
+                                    padding: "10px", // Add some spacing around the image
+                                }}
+                            />
+
+                        </Card>
+                    </Grid>
+                ))}
+            </Grid>
+        </Grid>
+    );
+};
+
+export default OurTeam;
diff --git a/src/components/ourwork.tsx b/src/components/ourwork.tsx
index 0730654..3eb8ea9 100644
--- a/src/components/ourwork.tsx
+++ b/src/components/ourwork.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 import { Box, Card, CardContent, CardMedia, Typography, Button, Grid } from "@mui/material";
+import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
+import {  useMediaQuery, createTheme, ThemeProvider } from "@mui/material";
+
 
 const data = [
     { img: "https://s3-alpha-sig.figma.com/img/8e1a/c73a/f4e18134521c4a2ef1c70e0ba02fa636?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=iKYXVc~k5~LoiM0ep167AJSywxHpPueTEeheiHfxA-TT8SrzhLb0CZIR08zl9nMDz4gBOqlnKavcTEs~h3tu9gRAyIDMIgcFHIeFQ6IBSoeHabuJxmyP0qcdnWXNYJXze0oO8B~VDFHG0lOagJW~fnb8j8gB2W7M4oL2QPPQFsY3oFzEKW3Gydq7ijohnCXdQP5CPgJ2MPhMFQ59DDQsxv5YihKByOgVx3boAx1ABL05w25ab0DFrcPmSgx93rHzikBmmPNVoiLWW6-rYijbFaxZ~2wEbK4zwGZNtIYw~YGR9EG~h595FJDl1XeCaoMWVJFkfqqHcYDD2-1fLu3JFA__", title: "Lorem Ipsum Heading" },
@@ -14,117 +17,141 @@ const workImages = [
     "https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
 ];
 
+const theme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,     // Default
+            sm: 600,   // Tablets
+            md: 1000,  // Laptops
+            lg: 1400,  // Desktops
+            xl: 1800,  // Large Screens
+        },
+    },
+});
+
 const PartnerWork = () => {
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
+    const isTablet = useMediaQuery(theme.breakpoints.down("md")); // Below 1000px
+
     return (
-        <Box sx={{ textAlign: "center", padding: "80px 10%" }}>
-            {/* Why Partner with Us? Section */}
-            <Typography variant="h4" gutterBottom>
-                Why Partner with Us?
-            </Typography>
-            <Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
-                {data.map((item, index) => (
-                    <Grid item key={index} xs={12} sm={6} md={4}>
-                        <Card
+        <ThemeProvider theme={theme}>
+            <Box
+                sx={{
+                    textAlign: "center",
+                    padding: isMobile ? 5 : 20,
+                    backgroundImage: isMobile ? "none" : `url(${loopgreenback})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                }}
+            >
+                {/* Why Partner with Us? Section */}
+                <Typography variant="h4" gutterBottom>
+                    Why Partner with Us?
+                </Typography>
+                <Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
+                    {data.map((item, index) => (
+                        <Grid item key={index} xs={12} sm={6} md={4}>
+                            <Card
+                                sx={{
+                                    maxWidth: isMobile ? "100%" : 350,
+                                    mx: "auto",
+                                    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
+                                    borderRadius: 4,
+                                    p: 2,
+                                    background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
+                                    overflow: "visible",
+                                    border: "1px solid rgba(0, 0, 0, 0.1)",
+                                    "&:after": {
+                                        content: '""',
+                                        position: "absolute",
+                                        bottom: 0,
+                                        left: 0,
+                                        right: 0,
+                                        height: "10px",
+                                        background: "rgb(255, 255, 255)",
+                                        borderRadius: "0 0 4px 4px",
+                                        zIndex: -1,
+                                    },
+                                }}
+                            >
+                                <CardContent sx={{ textAlign: "left" }}>
+                                    <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                                        {item.title}
+                                    </Typography>
+                                    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                                        Lorem Ipsum subheading
+                                    </Typography>
+                                </CardContent>
+                                <CardMedia
+                                    component="img"
+                                    height={isMobile ? "150" : "200"}
+                                    image={item.img}
+                                    alt={item.title}
+                                    sx={{ borderRadius: 2, marginX: "auto" }}
+                                />
+                                <CardContent>
+                                    <Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
+                                        Learn more →
+                                    </Button>
+                                </CardContent>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+
+                {/* Our Work Section */}
+                <Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
+                    Our Work
+                </Typography>
+                <Grid container spacing={3} justifyContent="center">
+                    {workImages.map((img, index) => (
+                        <Grid item key={index}>
+                            <Box
+                                sx={{
+                                    width: isMobile ? 100 : 140,
+                                    height: isMobile ? 100 : 140,
+                                    borderRadius: "50%",
+                                    backgroundImage: `url(${img})`,
+                                    backgroundSize: "cover",
+                                    backgroundPosition: "center",
+                                    boxShadow: 3,
+                                }}
+                            />
+                        </Grid>
+                    ))}
+                </Grid>
+
+                {/* Call to Action Section */}
+                <Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
+                    <Grid item xs={12} sm={6}>
+                        <Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
+                            <Typography variant="body2" sx={{ fontSize: "1rem" }}>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </Typography>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <Button
+                            variant="contained"
                             sx={{
-                                maxWidth: 350,
-                                mx: "auto",
-                                boxShadow: "0px 4px 10px rgba(0,0,0,0.1)", // General shadow
-                                borderRadius: 4,
-                                p: 2,
-                                background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
-                                overflow: "visible",
-                                border: "1px solid rgba(0, 0, 0, 0.1)", // Light border around the card
-                                borderTop: "none", // Remove top border if you want only edges
-                                borderBottom: "none", // Remove bottom border if you want only edges
-                                "&:after": {
-                                    content: '""',
-                                    position: "absolute",
-                                    bottom: 0,
-                                    left: 0,
-                                    right: 0,
-                                    height: "10px", // Height of the shadow effect
-                                    background: "rgba(0, 0, 0, 0.1)", // Shadow color
-                                    borderRadius: "0 0 4px 4px", // Match the card's border radius
-                                    zIndex: -1, // Place it behind the card
-                                },
+                                width: "100%",
+                                height: "100%",
+                                fontSize: "1rem",
+                                borderRadius: 3,
+                                py: 2,
+                                backgroundColor: "#000",
+                                color: "#fff",
+                                "&:hover": { backgroundColor: "#333" },
                             }}
                         >
-                            <CardContent sx={{ textAlign: "left" }}>
-                                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                                    {item.title}
-                                </Typography>
-                                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                                    Lorem Ipsum subheading
-                                </Typography>
-                            </CardContent>
-                            <CardMedia
-                                component="img"
-                                height="200"
-                                image={item.img}
-                                alt={item.title}
-                                sx={{ borderRadius: 2, marginX: "auto" }}
-                            />
-                            <CardContent>
-                                <Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
-                                    Learn more →
-                                </Button>
-                            </CardContent>
-                        </Card>
+                            Explore our projects →
+                        </Button>
                     </Grid>
-                ))}
-            </Grid>
-
-            {/* Our Work Section */}
-            <Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
-                Our Work
-            </Typography>
-            <Grid container spacing={3} justifyContent="center">
-                {workImages.map((img, index) => (
-                    <Grid item key={index}>
-                        <Box
-                            sx={{
-                                width: 140,
-                                height: 140,
-                                borderRadius: "50%",
-                                backgroundImage: `url(${img})`,
-                                backgroundSize: "cover",
-                                backgroundPosition: "center",
-                                boxShadow: 3,
-                            }}
-                        />
-                    </Grid>
-                ))}
-            </Grid>
-
-            {/* Call to Action Section */}
-            <Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
-                <Grid item xs={12} sm={6}>
-                    <Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
-                        <Typography variant="body2" sx={{ fontSize: "1rem" }}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </Typography>
-                    </Box>
                 </Grid>
-                <Grid item xs={12} sm={6}>
-                    <Button
-                        variant="contained"
-                        sx={{
-                            width: "100%",
-                            height: "100%",
-                            fontSize: "1rem",
-                            borderRadius: 3,
-                            py: 2,
-                            backgroundColor: "#000",
-                            color: "#fff",
-                            '&:hover': { backgroundColor: "#333" },
-                        }}
-                    >
-                        Explore our projects →
-                    </Button>
-                </Grid>
-            </Grid>
-        </Box>
+            </Box>
+        </ThemeProvider>
     );
 };
 
-export default PartnerWork;
\ No newline at end of file
+export default PartnerWork;
