From b0450952ffc170ed0aa94700c2acc500e536f6e0 Mon Sep 17 00:00:00 2001
From: hardik <hardik@navigolabs.com>
Date: Thu, 20 Feb 2025 09:43:54 +0530
Subject: [PATCH] new things

---
 src/components/header.tsx   |   2 +-
 src/components/homepage.tsx | 109 +++++++++++++++++++++++++++---------
 2 files changed, 82 insertions(+), 29 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index bc1a317..b166fb4 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -17,7 +17,7 @@ const Header: React.FC = () => {
     <AppBar 
       position="fixed" 
       sx={{ 
-        backgroundColor: "#7c77770d", 
+        backgroundColor: {md:"#f7f7f7" , xs:'white'}, 
         margin: "20px 20px 10px 20px",
        
         boxShadow: "none",
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index d07a156..61a1d21 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -70,15 +70,15 @@ const HomePage: React.FC = () => {
 
             },
         },
-        // typography: {
-        //     fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
-        //     h4: {
-        //         color: "#333333", 
-        //       },
-        //     body2:{
-        //         color:"#77808B"
-        //     }
-        //   },
+        typography: {
+            fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
+            h4: {
+                color: "#333333",
+            },
+            body2: {
+                color: "#4D4D4D"
+            }
+        },
 
     });
 
@@ -92,11 +92,11 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "190px", lg: "55vh" },
+                            height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
-                            paddingTop:{xs:'50px', lg:'5px'},
+                            paddingTop: { xs: '50px', lg: '5px' },
                             marginBottom: { xs: "10px", md: "39px", lg: '60px' },
                         }}
                     >
@@ -127,7 +127,7 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3075 },
+                        height: { xl: 1800, lg: 2000, xs: 2857, sm: 3630, md: 2550 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",
@@ -364,40 +364,75 @@ const HomePage: React.FC = () => {
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                     <Typography variant="h4">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>
+                                    <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>
 
 
                             </Box>
                         </Grid>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={{ xs: 18, sm: 26, md: 40 }}
+                        <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 38 ,  }}
                             sx={{
                                 display: { xs: "flex", md: "flex", lg: 'none' },
                                 backgroundImage: { lg: null, xs: `url(${mobileback})` },
-                                backgroundSize: "contain",
-                                backgroundPosition: { xs: "50% 60%", md: '50% 63%' },
+                                backgroundSize: { xs: "contain", md: "70%", sm:'70%' },
+                                backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
                                 backgroundRepeat: "no-repeat",
                             }}>
                             {/* Reuse */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, 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.
                                         </Typography>
                                     </Box>
-                                    <Box sx={{ width: "100%" }}>
-                                        <img src={gifsix} alt="Reuse Gif" style={{ width: "100%" }} />
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "80%" } }}>
+                                            <img
+                                                src={gifsix}
+                                                alt="Reuse Gif"
+                                                style={{ width: "100%" }}
+                                            />
+                                        </Box>
                                     </Box>
+
                                 </Box>
                             </Grid>
 
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131, md: 118 }, maxHeight: 270 }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -405,8 +440,14 @@ const HomePage: React.FC = () => {
                                             reducing the need for new products.
                                         </Typography>
                                     </Box>
-                                    <Box sx={{ width: "100%" }}>
-                                        <img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "80%" } }}>
+                                            <img
+                                                src={giffive}
+                                                alt="Reuse Gif"
+                                                style={{ width: "100%" }}
+                                            />
+                                        </Box>
                                     </Box>
                                 </Box>
                             </Grid>
@@ -414,10 +455,16 @@ 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={{ width: "100%" }}>
-                                        <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
+                                <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "80%" } }}>
+                                            <img
+                                                src={gifseven}
+                                                alt="Reuse Gif"
+                                                style={{ width: "100%" }}
+                                            />
+                                        </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 131 , md:118}, 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>
 
@@ -428,10 +475,16 @@ const HomePage: React.FC = () => {
                             {/* Remine */}
                             <Grid item xs={6} sx={{ mt: 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 sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "80%" } }}>
+                                            <img
+                                                src={gifeight}
+                                                alt="Reuse Gif"
+                                                style={{ width: "100%" }}
+                                            />
+                                        </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 200 } }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 131 , md:118} }}>
                                         <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>
-- 
2.40.1