Merge pull request 'updated fonts and backgrounds' (#12) from fix/layout into main

Reviewed-on: #12

src/components/footer.tsx

@@ -13,53 +13,66 @@ const Footer: React.FC = () => {
         <Grid container spacing={4}>
           {/* Loop Sustainability */}
           <Grid item xs={12} md={3}>
-            <Typography variant="h6" fontWeight="bold">
+            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Loop Sustainability
             </Typography>
-            <Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
+            <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Loop Sustainability helps businesses responsibly recycle used electronic items through advanced refining and disintegration processes. We ensure compliance, sustainability, and a circular economy approach to e-waste management.
             </Typography>
           </Grid>
 
           {/* Get in Touch */}
           <Grid item xs={7} md={3}>
-            <Typography variant="h6" fontWeight="bold">
+            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Get in Touch
             </Typography>
-            <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
+            <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
               <LocationOn color="primary" sx={{ mt: 0.5 }} />
-              <Typography variant="body2" sx={{ ml: 1 }}>
+              <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
                 Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India.
               </Typography>
             </Box>
             <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
               <LocationOn color="primary" sx={{ mt: 0.5 }} />
-              <Typography variant="body2" sx={{ ml: 1 }}>
+              <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
                 Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India.
               </Typography>
             </Box>
             <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
               <Email color="primary" />
-              <Typography variant="body2" sx={{ ml: 1 }}>reach@letsloop.in</Typography>
+              <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
+                reach@letsloop.in
+              </Typography>
             </Box>
           </Grid>
 
           {/* Company Links */}
           <Grid item xs={5} md={3} textAlign="center">
-            <Typography variant="h6" fontWeight="bold">
+            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Company
             </Typography>
-            <Box sx={{ mt: 1  }}>
+            <Box sx={{ mt: 1 }}>
               {["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
-                <Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
+                <Link
+                  href="#"
+                  key={text}
+                  variant="body2"
+                  display="block"
+                  sx={{
+                    color: "#77808B",
+                    mt: 0.5,
+                    textDecoration: "none",
+                    fontFamily: "Helvetica, Arial, sans-serif",
+                    "&:hover": { textDecoration: "underline" },
+                  }}
+                >
                   {text}
                 </Link>
               ))}
             </Box>
-
-            {/* Social Media Icons */}
-
           </Grid>
+
+          {/* Social Media Icons */}
           <Grid item xs={12} md={3} textAlign="center">
             <Box display="flex" justifyContent="center" sx={{ mt: 2 }}>
               <IconButton color="default">
@@ -83,12 +96,22 @@ const Footer: React.FC = () => {
         <Box textAlign="center">
           <Box display="flex" justifyContent="center" gap={3}>
             {["Privacy Policy", "Terms of Use", "Sales and Refunds", "Legal", "Site Map"].map((text) => (
-              <Link href="#" key={text} variant="body2" sx={{ color: "gray", textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
+              <Link
+                href="#"
+                key={text}
+                variant="body2"
+                sx={{
+                  color: "gray",
+                  textDecoration: "none",
+                  fontFamily: "Helvetica, Arial, sans-serif",
+                  "&:hover": { textDecoration: "underline" },
+                }}
+              >
                 {text}
               </Link>
             ))}
           </Box>
-          <Typography variant="body2" sx={{ mt: 2, color: "gray" }}>
+          <Typography variant="body2" sx={{ mt: 2, color: "gray", fontFamily: "Helvetica, Arial, sans-serif" }}>
             © 2021 All Rights Reserved
           </Typography>
         </Box>

src/components/homepage.tsx

@@ -15,14 +15,14 @@ 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/newloop.png"
+import loopgreenback from "../components/imageandgif/lsbg.png"
 import OurTeam from "./ourteam";
 import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
 import mobileback from "../components/imageandgif/mobileback.png"
 import {  useMediaQuery, useTheme } from "@mui/material";
 import { createTheme, ThemeProvider  } from "@mui/material/styles";
 import newbackground from "../components/imageandgif/full.png"
-import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
+import sustainability  from "../components/imageandgif/Untitled-2.png"
 import wasteimage from "../components/imageandgif/loopwastemanage.png"
 import WhyChooseUs from "./whyus";
 import WasteImageSection from "./wastemanagement";
@@ -79,7 +79,7 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "190px", lg: "58vh" },
+                            height: { xs: "190px", lg: "55vh" },
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
@@ -96,11 +96,10 @@ const HomePage: React.FC = () => {
 
 
                     </Grid>
+                    
+                   
                 </Grid>
                 <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
-                    <Grid item xs={12} md={12} lg={12}  textAlign={"center"}>
-                        <Typography variant="h4">Sustainability</Typography>
-                        </Grid>
                     {items.map((text, index) => (
                         
                         <Grid item xs={12} sm={6} md={4} key={index}  >
@@ -371,7 +370,7 @@ const HomePage: React.FC = () => {
                             {/* Reuse */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200}, maxHeight:270 }}>
                                         <Typography variant="h4">Reuse</Typography>
                                         <Typography variant="body2">
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@@ -386,7 +385,7 @@ const HomePage: React.FC = () => {
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270  }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -402,11 +401,11 @@ const HomePage: React.FC = () => {
 
                             {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
                             <Grid item xs={6} sx={{ mt: 2 }}>
-                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2   }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1  ,height:{xs:256 , sm:200} , maxHeight:270 }}>
                                         <Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
                                         <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
 
@@ -416,11 +415,11 @@ const HomePage: React.FC = () => {
 
                             {/* Remine */}
                             <Grid item xs={6} sx={{ mt: 2 }}>
-                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2  , maxHeight:270  }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' },height:{xs:256 , sm:200} }}>
                                         <Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
                                         <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
                                     </Box>

src/components/ourteam.tsx

@@ -59,7 +59,7 @@ const OurTeam: React.FC = () => {
                 sx={{ cursor: "pointer", marginBottom: 10 }}
                 onClick={() => setShowTeam(!showTeam)}
             >
-                <Typography variant="h4" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h4" sx={{ fontWeight: "bold"  , color:'#333333'}}>
                     Our Team
                 </Typography>
 
@@ -67,7 +67,7 @@ const OurTeam: React.FC = () => {
                     {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                 </IconButton>
             </Box>
-            <Typography variant="body2">For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography>
+            <Typography variant="body2" sx={{color:'#4D4D4D'}}>For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography>
             {/* Expanding Team Section */}
             <motion.div
                 initial={{ opacity: 0, height: 0 }}