src/components/homepage.tsx

@@ -26,7 +26,7 @@ import sustainability from "../components/imageandgif/Untitled-2.png"
 import wasteimage from "../components/imageandgif/loopwastemanage.png"
 import WhyChooseUs from "./whyus";
 import WasteImageSection from "./wastemanagement";
-import loopgif from "../components/imageandgif/loop hero new (1).gif"
+import loopgif from "../components/imageandgif/Loopherosectionmobiless.gif"
 import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
 import gifeightm from "../components/imageandgif/reminemobile.gif";
 import giffivem from "../components/imageandgif/repairm.gif";
@@ -94,7 +94,7 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
+                            height: { xs: "432px", lg: "60vh", sm: "417px", md: '400px' },
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
@@ -102,13 +102,35 @@ const HomePage: React.FC = () => {
                             marginBottom: { xs: "10px", md: "39px", lg: '60px' },
                         }}
                     >
-                        <img src={loopgif} alt="Gif" style={{ width: "100%" }} />
+                        <img src={loopgif} alt="Gif" style={{ width: "100%", height: '400px' }} />
 
                     </Grid>
 
 
                 </Grid>
                 <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
+                    <Grid item xs={12} sm={12} md={12}>
+                        <Box
+                            sx={{
+                                p: 3,
+                                borderRadius: "12px",
+                                textAlign: "center",
+                                color: '#333333',
+                                height: {xs:'47px', sm:'87px'},
+                                fontSize: { xs: '12px', sm: '16px' },
+                                fontFamily: "SF Pro Regular, Arial, sans-serif",
+                                fontWeight: "500",
+
+                            }}
+                        >
+                            <Typography
+                                variant="h3"
+                                sx={{ fontSize: { xs: '20px', sm: '48px' }, fontWeight: 'bold' }}
+                            >
+                                We aim to 'Do More With Less'
+                            </Typography>
+                        </Box>
+                    </Grid>
                     {items.map((text, index) => (
 
                         <Grid item xs={12} sm={6} md={4} key={index}  >
@@ -132,7 +154,7 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2729, sm: 3630, md: 2390 },
+                        height: { xl: 1800, lg: 2000, xs: 2719, sm: 3740, md: 2390 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",
@@ -474,9 +496,9 @@ const HomePage: React.FC = () => {
                                 </Box>
                             </Grid>
                         </Grid>
-{/* na */}
+                        {/* na */}
-{/* na */}
+                        {/* na */}
-{/* na */}
+                        {/* na */}
                     </Grid>
 
                 </Box>