src/components/footer.tsx

@@ -13,7 +13,7 @@ const Footer: React.FC = () => {
         <Grid container spacing={4}>
           {/* Loop Sustainability */}
           <Grid item xs={12} md={3}>
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Loop Sustainability
             </Typography>
             <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
@@ -23,7 +23,7 @@ const Footer: React.FC = () => {
 
           {/* Get in Touch */}
           <Grid item xs={7} md={3}>
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Get in Touch
             </Typography>
             <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
@@ -48,7 +48,7 @@ const Footer: React.FC = () => {
 
           {/* Company Links */}
           <Grid item xs={5} md={3} textAlign="center">
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Company
             </Typography>
             <Box sx={{ mt: 1 }}>
@@ -60,7 +60,7 @@ const Footer: React.FC = () => {
                   display="block"
                   sx={{
                     color: "#77808B",
-                    mt: 0.5,
+                    mt: 1,
                     textDecoration: "none",
                     fontFamily: "Helvetica, Arial, sans-serif",
                     "&:hover": { textDecoration: "underline" },

src/components/homepage.tsx

@@ -26,10 +26,12 @@ 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 gifsevenm from "../components/imageandgif/disintegrate mobile.gif";
-import gifeightm from "../components/imageandgif/gifeight.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";
+import gifsixm from "../components/imageandgif/newusenewuse.gif";
+import gifonem from "../components/imageandgif/mine mobile.gif";
 
 
 
@@ -168,7 +170,7 @@ const HomePage: React.FC = () => {
                                 
                             }}>
                                 <Box sx={{ width: { xs: "60%", md: "70%" } }}>
-                                    <img src={gifone} alt="Gif" style={{ width: "91%" }} />
+                                    <img src={gifonem} alt="Gif" style={{ width: "91%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Mine from nature</Typography>
@@ -395,7 +397,7 @@ const HomePage: React.FC = () => {
                                     <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
-                                                src={gifsix}
+                                                src={gifsixm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
@@ -408,7 +410,7 @@ const HomePage: React.FC = () => {
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{ background: "#95CD41",marginBottom:'30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
                                         <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -419,7 +421,7 @@ const HomePage: React.FC = () => {
                                     <Box sx={{ display: "flex", justifyContent: "center"  }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
-                                                src={giffive}
+                                                src={giffivem}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
@@ -434,7 +436,7 @@ const HomePage: React.FC = () => {
                                 <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
-                                                src={gifseven}
+                                                src={gifsevenm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
@@ -452,9 +454,9 @@ const HomePage: React.FC = () => {
                             <Grid item xs={6} sx={{ mt: 2 }}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
                                 <Box sx={{ display: "flex", justifyContent: "center" }}>
-                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
+                                        <Box sx={{ width: { xs: "100%", md: "60%" } ,marginTop:'27px' }}>
                                             <img
-                                                src={gifeight}
+                                                src={gifeightm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />

src/components/ourteam.tsx

@@ -82,8 +82,9 @@ const OurTeam: React.FC = () => {
                     color: "#4D4D4D",
                     fontSize: { xs: "12px", sm: "20px" },
                     fontFamily: "SF Pro Regular, Arial, sans-serif",
-                    padding:"30px",
-                    textAlign:'center'
+                    paddingLeft:"60px",
+                    textAlign:'center',
+                    paddingRight:"60px",
                 }}
             >
                 For over a decade, our team members have been actively involved in