Merge pull request 'background color change' (#33) from feature/new_ui into main

Reviewed-on: #33
Reviewed-by: Mihir Motiyani <mihir@midastix.com>

src/components/homepage.tsx

@@ -179,7 +179,7 @@ const HomePage: React.FC = () => {
                     </Grid>
                 </Grid >
                 {/* Grid 2 */}
-                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 10, md: 20 }, mt: { xs: 10, md: 20 } }}>
+                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 5, md: 5 }, mt: { xs: 5, md: 5 } }}>
                     <Grid container justifyContent="center">
                         <Grid item lg={10} xs={10} md={10}>
                             <Typography
@@ -228,11 +228,12 @@ const HomePage: React.FC = () => {
 
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 700 },
+                        height: { xl: 800, lg: 700 },
                         width: '100%',
                         backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
                         backgroundSize: "261px 220px",
-                        backgroundPosition: "638px 290px",
+                        // backgroundPosition: "638px 290px",
+                        background : 'center',
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
@@ -362,7 +363,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, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{  p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@@ -384,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, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{ p: 1, height: { xs: 172, 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.
@@ -416,7 +417,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                    <Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
 
@@ -436,7 +437,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
+                                    <Box sx={{  p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
                                         <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                         <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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

@@ -36,7 +36,7 @@ const teamMembers: TeamMember[] = [
 ];
 
 const OurTeam: React.FC = () => {
-    const [showTeam, setShowTeam] = useState(false);
+    const [showTeam, setShowTeam] = useState(true);
 
     return (
         <Grid

src/components/whyus.tsx

@@ -48,6 +48,7 @@ const WhyChooseUs: React.FC = () => {
             key={index}
             xs={6}
             sm={6}
+            lg={3}
             display="flex"
             justifyContent="center"
           >