diff --git a/package-lock.json b/package-lock.json
index 5f59dcc..b0fbc4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,9 +19,11 @@
         "@types/node": "^16.7.13",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
+        "framer-motion": "^12.4.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-scripts": "5.0.1",
+        "swiper": "^11.2.2",
         "typescript": "^4.4.2",
         "web-vitals": "^2.1.0"
       }
@@ -9145,6 +9147,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz",
+      "integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -12367,6 +12396,21 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -16729,6 +16773,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz",
+      "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 41958e0..92b48b6 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,11 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "framer-motion": "^12.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
+    "swiper": "^11.2.2",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index a0497aa..5379fd4 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -19,6 +19,10 @@ 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";
+import newbackground from "../components/imageandgif/full.png"
+import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
+
+
 
 
 const HomePage: React.FC = () => {
@@ -112,40 +116,31 @@ const HomePage: React.FC = () => {
                             </ul>
                         </Box>
                     </Grid>
-
-                    {/* Grid 2 */}
+                </Grid>
+                {/* Grid 2 */}
+                <Box
+                    sx={{
+                        height: { xl: 1800, lg: 2000 , xs:2500 },
+                        width: '100%',
+                        backgroundImage:{lg: `url(${newbackground})`, xs:null},
+                        backgroundSize: "contain",
+                        backgroundPosition: "center",
+                        backgroundRepeat: "no-repeat",
+                        paddingBottom: 20
+                    }}
+                >
                     <Grid
-                        item
-                        xs={12}
+                        container
                         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",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            textAlign: 'center',
-                            padding: { xs: "20px", md: "0" },
+
+                            width: '100%',
                         }}
                     >
-                        <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" },
+                        {/* ROW 1 */}
+                        <Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "495px", lg: "215px" },
+                                width: { xs: "80%", lg: "870px" },
                                 zIndex: 1,
                                 display: "flex",
                                 flexDirection: { xs: "column", lg: "row" },
@@ -153,304 +148,220 @@ const HomePage: React.FC = () => {
                                 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' }
-                        }}>
-                        <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 4 */}
-                    <Grid
-                        item
-                        xs={12}
-                        sx={{
-                            height: { xs: "707px", md: "830px" },
-                            backgroundColor: "white",
-                            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
+                                marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
+                                <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" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                    <Typography variant="h4">Mine from nature</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
+                                </Box>
                             </Box>
-                        </Box>
+                        </Grid>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
 
-
-                        <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",
+                        {/* ROW 2 */}
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "472px", lg: "215px" },
+                                width: { xs: "80%", lg: "552px" },
                                 zIndex: 1,
                                 display: "flex",
-                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
+                                flexDirection: { xs: "column-reverse", lg: "row" },
+                                justifyContent: "center",
                                 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>
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" },
+                            }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                    <Typography variant="h4">Manufacturing</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+                                <Box sx={{ width: { lg: '50%' } }}>
+                                    <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
 
-                        <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",
+                            </Box>
+                        </Grid>
+
+                        {/* ROW 3 */}
+                        <Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "215px" },
+                                width: { xs: "80%", lg: "595px" },
                                 zIndex: 1,
                                 display: "flex",
-                                flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
+                                flexDirection: { xs: "column", lg: "row" },
+                                justifyContent: "center",
                                 alignItems: "center",
-                                justifyContent: "center", // Center vertically
                                 padding: "10px",
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" },
+                            }}>
+
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <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">Assemble</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+
+                            </Box>
+                        </Grid>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
+
+                        {/* ROW 4 */}
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
+                        <Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "215px" },
+                                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">Use</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <img src={giffour} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
+
+                            </Box>
+                        </Grid>
+                        {/* new2 */}
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
+
+
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        {/* newnew */}
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "115px" },
+                                width: { xs: "80%", lg: "250px" },
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column", lg: "column" },
+                                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">Reuse</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <img src={giffive} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
+
+                            </Box>
+                        </Grid>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "115px" },
+                                width: { xs: "80%", lg: "250px" },
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column", lg: "column" },
+                                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">Repair</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
+
+                            </Box>
+                        </Grid>
+                        {/* newnewnwe */}
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "115px" },
+                                width: { xs: "80%", lg: "250px" },
+                                zIndex: 1,
+                                display: "flex",
+                                flexDirection: { xs: "column", lg: "column" },
+                                justifyContent: "center",
+                                alignItems: "center",
+                                padding: "10px",
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" },
+                            }}>
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                    <Typography variant="h4">Disintegrate</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
                                 
-                            }}
-                        >
-                            <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>
 
-                        <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",
+                            </Box>
+                        </Grid>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                            <Box ref={mineRef} sx={{
+                                height: { xs: "332px", lg: "115px" },
+                                width: { xs: "80%", lg: "250px" },
                                 zIndex: 1,
                                 display: "flex",
-                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
+                                flexDirection: { xs: "column", lg: "column" },
+                                justifyContent: "center",
                                 alignItems: "center",
-                                justifyContent: "center", // Center vertically
                                 padding: "10px",
-                            }}
-                        >
-                            <Box
-                                sx={{
-                                    width: "80%",
-                                    paddingLeft: "10px",
-                                     
-                                }}
-                            >
-                                <img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
+                                textAlign: 'center',
+                                marginBottom: { xs: "20px", md: "0" },
+                            }}>
+                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                    <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
+                                </Box>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                    <Typography variant="h4">Remine</Typography>
+                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                </Box>
+                                
+
                             </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>
+                    </Grid>
+                </Box>
+                {/* <Grid
+                    container
+                    sx={{
+                        height: { xl: 1800, lg: 188 },
+                        width: '100%',
+                        backgroundImage: `url(${newbackgroundtwo})`,
+                        backgroundSize: "contain",
+                        backgroundPosition: "center",
+                        backgroundRepeat: "no-repeat",
+                    }}
+                >
+                    <Grid item>
+
                     </Grid>
 
-                    {/* Grid 5 */}
-                    <Grid
-                        item
-                        xs={12}
-                        ref={mineRef}
-                        sx={{
-                            height: { xs: "200px", md: "300px" },
-                            backgroundImage: `url(${loopgreen})`,
-                            position: "relative",
-                            backgroundSize: "contain",
-                            backgroundPosition: "center",
-                            backgroundRepeat: "no-repeat",
-                        }}>
-                    </Grid>
-                </Grid>
+                </Grid> */}
+
+
+
+
                 <PartnerWork />
                 <OurTeam />
                 <Footer />
diff --git a/src/components/imageandgif/full.png b/src/components/imageandgif/full.png
new file mode 100644
index 0000000..01e8dc8
Binary files /dev/null and b/src/components/imageandgif/full.png differ
diff --git a/src/components/imageandgif/fullwith.png b/src/components/imageandgif/fullwith.png
new file mode 100644
index 0000000..6806194
Binary files /dev/null and b/src/components/imageandgif/fullwith.png differ
diff --git a/src/components/imageandgif/newbackground.png b/src/components/imageandgif/newbackground.png
new file mode 100644
index 0000000..ae2cd9d
Binary files /dev/null and b/src/components/imageandgif/newbackground.png differ
diff --git a/src/components/imageandgif/newbacktwo.png b/src/components/imageandgif/newbacktwo.png
new file mode 100644
index 0000000..5c8a523
Binary files /dev/null and b/src/components/imageandgif/newbacktwo.png differ
diff --git a/src/components/imageandgif/newfullwid.png b/src/components/imageandgif/newfullwid.png
new file mode 100644
index 0000000..489a765
Binary files /dev/null and b/src/components/imageandgif/newfullwid.png differ
diff --git a/src/components/ourteam.tsx b/src/components/ourteam.tsx
index aaabb8a..6cc9a9c 100644
--- a/src/components/ourteam.tsx
+++ b/src/components/ourteam.tsx
@@ -1,7 +1,19 @@
-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"
+import React, { useState } from "react";
+import {
+    Grid,
+    Typography,
+    Card,
+    CardContent,
+    CardMedia,
+    Divider,
+    IconButton,
+    Box,
+} from "@mui/material";
+import { motion } from "framer-motion";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+
+import robert from "../components/imageandgif/robert.png";
 
 interface TeamMember {
     name: string;
@@ -19,77 +31,88 @@ const teamMembers: TeamMember[] = [
 ];
 
 const OurTeam: React.FC = () => {
+    const [showTeam, setShowTeam] = useState(false);
+
     return (
         <Grid
             container
+            direction="column"
             justifyContent="center"
             alignItems="center"
             sx={{
-                position: "relative",
-                minHeight: "100vh",
-                backgroundImage: `url(${color})`,
-                backgroundSize: "contain",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-
+                minHeight: showTeam ? "100vh" : "auto",
+                background: "white",
+                textAlign: "center",
+                padding: "40px 20px",
             }}
         >
-            <Typography
-                variant="h4"
-                sx={{
-                    textAlign: "center",
-                    fontWeight: "bold",
-                    color: "#333",
-                    marginBottom: "30px",
-                }}
+            {/* Title with Expand Icon */}
+            <Box
+                display="flex"
+                alignItems="center"
+                gap={1}
+                sx={{ cursor: "pointer" }}
+                onClick={() => setShowTeam(!showTeam)}
             >
-                Our Team
-            </Typography>
+                <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+                    Our Team
+                </Typography>
+                <IconButton sx={{ color: "black" }}>
+                    {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                </IconButton>
+            </Box>
 
-            <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}
+            {/* Expanding Team Section */}
+            <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+                style={{ overflow: "hidden", width: "100%" }}
+            >
+                <Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}>
+                    {teamMembers.map((member, index) => (
+                        <Grid item xs={12} sm={6} md={4} key={index}>
+                            <Card
                                 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
+                                    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>
 
-                        </Card>
-                    </Grid>
-                ))}
-            </Grid>
+                                {/* Divider */}
+                                <Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
+
+                                <CardMedia
+                                    component="img"
+                                    height="140"
+                                    image={member.image}
+                                    alt={member.name}
+                                    sx={{
+                                        objectFit: "contain",
+                                        width: "80%",
+                                        margin: "0 auto",
+                                        padding: "10px",
+                                    }}
+                                />
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            </motion.div>
         </Grid>
     );
 };
diff --git a/src/components/ourwork.tsx b/src/components/ourwork.tsx
index 3eb8ea9..bdb56f0 100644
--- a/src/components/ourwork.tsx
+++ b/src/components/ourwork.tsx
@@ -1,9 +1,13 @@
 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";
-
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Pagination } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/pagination";
+import loopgreenback from "../components/imageandgif/loopgreenbackground.png";
+import { useMediaQuery, createTheme, ThemeProvider } from "@mui/material";
 
+// Define Data
 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" },
     { img: "https://s3-alpha-sig.figma.com/img/7cf1/0d68/a23d760a5c95fc2a5ab5fb4e6e59deec?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=LJgcQKDXC323lViIWgemZBwZ2jUeEQY3t~y9XKfH3Fpg3njl0njNtFQFMCiwEjwXxS4Fl711FZGY-f-qf~m7pn60FtcOLNyigwNzabHL-a7AIg9Y0aivbsRyy-Lpe-HsV33-QpPENtci8SWvTZrOQkZ0lRIiwmybKiLv3twuexnx-jlGvUKsdKuX8WxT0jYxIfQcn93FFQaaHKyHH2ZlgwTj~~R4MJO8-K0oO-JX7EVTlLwK3V2~-WUS400GiThR4~-iqmCPVnvoUI2uHW29BpZFV48wfCcreOJVG3AKbQXlSWe23HWzprUWqiGHDlDOKlkfeJEErDMqCYvqnKPxmQ__", title: "Lorem Ipsum Heading" },
@@ -17,21 +21,15 @@ const workImages = [
     "https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
 ];
 
+// Theme for responsiveness
 const theme = createTheme({
     breakpoints: {
-        values: {
-            xs: 0,     // Default
-            sm: 600,   // Tablets
-            md: 1000,  // Laptops
-            lg: 1400,  // Desktops
-            xl: 1800,  // Large Screens
-        },
+        values: { xs: 0, sm: 600, md: 1000, lg: 1400, xl: 1800 },
     },
 });
 
 const PartnerWork = () => {
     const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
-    const isTablet = useMediaQuery(theme.breakpoints.down("md")); // Below 1000px
 
     return (
         <ThemeProvider theme={theme}>
@@ -45,76 +43,113 @@ const PartnerWork = () => {
                     backgroundRepeat: "no-repeat",
                 }}
             >
-                {/* Why Partner with Us? Section */}
+                {/* Why Partner with Us? */}
                 <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>
+
+                {/* Swiper for Mobile View */}
+                {isMobile ? (
+                    <Swiper
+                        modules={[Autoplay, Pagination]}
+                        autoplay={{ delay: 3000, disableOnInteraction: false }}
+                        pagination={{ clickable: true }}
+                        loop={true}
+                        spaceBetween={10}
+                        slidesPerView={1}
+                        style={{ width: "100%", maxWidth: 350 }}
+                    >
+                        {data.map((item, index) => (
+                            <SwiperSlide key={index}>
+                                <Card
+                                    sx={{
+                                        maxWidth: 350,
+                                        mx: "auto",
+                                        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
+                                        borderRadius: 4,
+                                        p: 2,
+                                        background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
+                                        border: "1px solid rgba(0, 0, 0, 0.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="150"
+                                        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>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                ) : (
+                    <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: 350,
+                                        mx: "auto",
+                                        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
+                                        borderRadius: 4,
+                                        p: 2,
+                                        background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
+                                        border: "1px solid rgba(0, 0, 0, 0.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="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) => (
+                    {[1, 2, 3].map((_, index) => (
                         <Grid item key={index}>
                             <Box
                                 sx={{
                                     width: isMobile ? 100 : 140,
                                     height: isMobile ? 100 : 140,
                                     borderRadius: "50%",
-                                    backgroundImage: `url(${img})`,
-                                    backgroundSize: "cover",
-                                    backgroundPosition: "center",
+                                    backgroundColor: "gray",
                                     boxShadow: 3,
                                 }}
                             />
diff --git a/yarn.lock b/yarn.lock
index ce74a20..e531347 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5041,6 +5041,15 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^12.4.2:
+  version "12.4.2"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz"
+  integrity sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==
+  dependencies:
+    motion-dom "^12.0.0"
+    motion-utils "^12.0.0"
+    tslib "^2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
@@ -6961,6 +6970,18 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+motion-dom@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz"
+  integrity sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==
+  dependencies:
+    motion-utils "^12.0.0"
+
+motion-utils@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz"
+  integrity sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==
+
 ms@^2.1.1, ms@^2.1.3, ms@2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
@@ -9325,6 +9346,11 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^11.2.2:
+  version "11.2.2"
+  resolved "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz"
+  integrity sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
@@ -9516,7 +9542,7 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.4.0:
   version "2.8.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==