From b8528e1ac2b2a2777ce984a9cf04b610527aa38b Mon Sep 17 00:00:00 2001
From: hardik <hardik@navigolabs.com>
Date: Fri, 14 Feb 2025 00:03:32 +0530
Subject: [PATCH 1/2] fixed mobile view layout

---
 src/components/header.tsx   |   5 +-
 src/components/homepage.tsx | 198 +++++++++++++++++++++++++-----------
 src/components/whyus.tsx    |  53 ++++++++++
 3 files changed, 192 insertions(+), 64 deletions(-)
 create mode 100644 src/components/whyus.tsx

diff --git a/src/components/header.tsx b/src/components/header.tsx
index b137a74..bad4420 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -26,7 +26,8 @@ const Header: React.FC = () => {
           lg: "96.8vw",
           xl: "96.4vw"
         },
-        color: "black"
+        color: "black",
+        zIndex:11111
       }}
     >
       <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
@@ -35,7 +36,7 @@ const Header: React.FC = () => {
           <img 
             src={headerlogo}
             alt="Logo" 
-            style={{ height: "40px", cursor: "pointer", width:'159px' }} 
+            style={{ height: "50px", cursor: "pointer", width:'159px' }} 
           />
         </Box>
 
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index e3fc0f9..1cb26c8 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -24,6 +24,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import newbackground from "../components/imageandgif/full.png"
 import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
 import wasteimage from "../components/imageandgif/loopwastemanage.png"
+import WhyChooseUs from "./whyus";
 
 
 
@@ -100,7 +101,7 @@ const HomePage: React.FC = () => {
                                     p: 3,
                                     borderRadius: "12px",
                                     backgroundColor: "#7c77770d",
-                                    textAlign: "left",
+                                    textAlign: "center",
 
                                 }}
                             >
@@ -112,17 +113,18 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 },
+                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center", xs: "50% 87%" },
+                        backgroundPosition: { lg: "center", xs: "50% 86%" },
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
                 >
                     <Grid
                         container
+
                         sx={{
 
                             width: '100%',
@@ -131,7 +133,7 @@ const HomePage: React.FC = () => {
                         {/* ROW 1 */}
                         <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
-                                height: { xs: "495px", lg: "215px" },
+                                height: { xs: "70%", lg: "215px" },
                                 width: { xs: "80%", lg: "870px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -155,7 +157,7 @@ const HomePage: React.FC = () => {
 
                         {/* ROW 2 */}
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                             <Box ref={manufactureRef} sx={{
                                 height: { xs: "472px", lg: "215px" },
                                 width: { xs: "80%", lg: "552px" },
@@ -180,10 +182,12 @@ const HomePage: React.FC = () => {
                         </Grid>
 
                         {/* ROW 3 */}
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
-                         display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} sx={{
+                            background: '#ffffff00', height: { xl: "500px", lg: '401px' },
+                            display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
+                        }}>
                             <Box ref={assembleRef} sx={{
-                                height: { xs: "332px", lg: "215px" ,sm:'500px' },
+                                height: { xs: "332px", lg: "215px", sm: '500px' },
                                 width: { xs: "80%", lg: "595px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -211,7 +215,7 @@ const HomePage: React.FC = () => {
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                         <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                             <Box ref={useRefBox} sx={{
-                                height: { xs: "332px", lg: "215px" ,sm:'555px' },
+                                height: { xs: "451px", lg: "215px", sm: '555px' },
                                 width: { xs: "80%", lg: "550px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -226,11 +230,12 @@ const HomePage: React.FC = () => {
                                     <Typography variant="h4">Use</Typography>
                                     <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
                                 </Box>
+
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={giffour} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-
                             </Box>
+
                         </Grid>
                         {/* new2 */}
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
@@ -238,45 +243,48 @@ const HomePage: React.FC = () => {
 
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                         {/* newnew */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
-                            <Box ref={reuseRef} >
-                                <Box
-                                    sx={{
-                                        width: { xs: "90%", lg: "350px" }, // Set fixed width
-                                        height: { xs: "241px", lg: "180px" }, // Set fixed height
-                                        paddingLeft: { xs: "10px", md: "10px" },
-                                        paddingRight: { xs: "2px" },
-                                        textAlign: { lg: "left", xs: "left" },
-                                        backgroundColor: { xs: "#95CD41", lg: "white" },
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        justifyContent: "center",
-                                    }}
-                                >
+                        {/* desktop view */}
+                        {/* Reuse Section */}
+                        <Grid item xs={5} sm={6} lg={6}
+                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
+                            <Box ref={reuseRef}
+                                sx={{
+                                    width: { xs: "90%", lg: "350px" },
+                                    height: { xs: "340px", lg: "240px" },
+                                    textAlign: "left",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    margin: { xs: 1 }
+                                }}>
+                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                     <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>
+                                    <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: { xs: "100%", md: "100%" } }}>
+                                <Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
                                     <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
-                            <Box ref={reuseRef} >
-                                <Box
-                                    sx={{
-                                        width: { xs: "90%", lg: "350px" }, // Set fixed width
-                                        height: { xs: "241px", lg: "180px" }, // Set fixed height
-                                        paddingLeft: { xs: "10px", md: "10px" },
-                                        paddingRight: { xs: "2px" },
-                                        textAlign: { lg: "left", xs: "left" },
-                                        backgroundColor: { xs: "#95CD41", lg: "white" },
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        justifyContent: "center",
-                                    }}
-                                >
+
+                        {/* Repair Section */}
+                        <Grid item xs={5} sm={6} lg={6}
+                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
+                            <Box ref={reuseRef}
+                                sx={{
+                                    width: { xs: "90%", lg: "350px" },
+                                    height: { xs: "340px", lg: "240px" },
+                                    textAlign: "left",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    margin: { xs: 1 }
+                                }}>
+                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                     <Typography variant="h4">Repair</Typography>
                                     <Typography variant="body2">
                                         Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -284,28 +292,29 @@ const HomePage: React.FC = () => {
                                         reducing the need for new products.
                                     </Typography>
                                 </Box>
-
-                                <Box sx={{ width: { xs: "100%", md: "100%" } }}>
+                                <Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
                                     <img src={giffive} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-
                             </Box>
                         </Grid>
+
+
                         {/* newnewnwe */}
-                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
-                            <Box ref={disintegrateRef} sx={{
-                                height: { xs: "332px", lg: "115px" },
-                                width: { xs: "92%", lg: "250px" },
-                                zIndex: 1,
-                                display: "flex",
-                                flexDirection: { xs: "column", lg: "column" },
-                                justifyContent: "center",
-                                alignItems: "center",
-                                padding: "10px",
-                                textAlign: 'left',
-                                marginBottom: { xs: "20px", md: "0" },
-                                marginTop: { xs: "20px" },
-                            }}>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                            <Box ref={disintegrateRef}
+                                sx={{
+                                    height: { xs: "332px", lg: "115px" },
+                                    width: { xs: "92%", lg: "250px" },
+                                    zIndex: 1,
+                                    display: "flex",
+                                    flexDirection: { xs: "column", lg: "column" },
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    padding: "10px",
+                                    textAlign: 'left',
+                                    marginBottom: { xs: "20px", md: "0" },
+                                    marginTop: { xs: "20px" },
+                                }}>
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
@@ -317,7 +326,7 @@ const HomePage: React.FC = () => {
 
                             </Box>
                         </Grid>
-                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
+                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
                             <Box ref={remineRef} sx={{
                                 height: { xs: "332px", lg: "115px" },
                                 width: { xs: "92%", lg: "250px" },
@@ -342,6 +351,68 @@ const HomePage: React.FC = () => {
 
                             </Box>
                         </Grid>
+                        {/* mobile only */}
+                        <Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
+                            {/* Reuse */}
+                            <Grid item xs={6}>
+                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                        <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>
+                                </Box>
+                            </Grid>
+
+                            {/* Repair */}
+                            <Grid item xs={6}>
+                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                        <Typography variant="h4">Repair</Typography>
+                                        <Typography variant="body2">
+                                        Loop Sustainability steps in to repair damaged or outdated electronics.
+                                        Our repair services extend the life of devices, minimizing waste and
+                                        reducing the need for new products.
+                                    </Typography>
+                                    </Box>
+                                    <Box sx={{ width: "100%" }}>
+                                        <img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
+                                    </Box>
+                                </Box>
+                            </Grid>
+
+                            {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
+                            <Grid item xs={6} sx={{ mt: 2 }}>
+                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                    <Box sx={{ width: "100%" }}>
+                                        <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
+                                    </Box>
+                                    <Box sx={{ background: "#95CD41", p: 1 }}>
+                                    <Typography variant="h4" sx={{fontSize:"1.6rem"}}>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>
+
+                                    </Box>
+                                </Box>
+                            </Grid>
+
+                            {/* Remine */}
+                            <Grid item xs={6} sx={{ mt: 2 } }>
+                                <Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
+                                    <Box sx={{ width: "100%" }}>
+                                        <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
+                                    </Box>
+                                    <Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left'  }}>
+                                    <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>
+                                </Box>
+                            </Grid>
+                        </Grid>
+
                     </Grid>
 
                 </Box>
@@ -350,7 +421,7 @@ const HomePage: React.FC = () => {
                     xs={12}
 
                     sx={{
-                        height: "66 0px",
+                        height: "660px",
                         marginTop: { lg: 20, xs: 0 },
                         display: "flex",
                         justifyContent: "center",
@@ -368,8 +439,11 @@ const HomePage: React.FC = () => {
                         }}
                     />
                 </Grid>
+                <WhyChooseUs/>
                 <OurTeam />
+
                 <Footer />
+
             </Box>
         </ThemeProvider>
     );
diff --git a/src/components/whyus.tsx b/src/components/whyus.tsx
new file mode 100644
index 0000000..723b6d5
--- /dev/null
+++ b/src/components/whyus.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Grid, Typography } from "@mui/material";
+import { styled } from "@mui/system";
+
+const Circle = styled(Box)(({ theme }) => ({
+  width: 150, // Increased size
+  height: 150,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "5px solid",
+  transition: "0.3s",
+  [theme.breakpoints.down("sm")]: {
+    width: 120, // Adjusting for mobile
+    height: 120,
+  },
+}));
+
+const items = [
+  { text: "Partnerships", color: "#E3C34D" },
+  { text: "Technology", color: "#90B5D4" },
+  { text: "Professionalism", color: "#A2C08A" },
+  { text: "Transparency", color: "#EDEAE3" },
+];
+
+const WhyChooseUs: React.FC = () => {
+  return (
+    <Box sx={{ textAlign: "center", mt: 5 }}>
+      <Typography variant="h5" fontWeight="bold" mb={3}>
+        Why Choose Us?
+      </Typography>
+      <Grid
+        container
+        spacing={1} 
+        justifyContent="center"
+        alignItems="center"
+      >
+        {items.map((item, index) => (
+          <Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
+            <Circle sx={{ borderColor: item.color }}>
+              <Typography variant="body1" fontWeight="500">
+                {item.text}
+              </Typography>
+            </Circle>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default WhyChooseUs;

From 9442479f21e1c0ea409fed6cd40c343e89b5f296 Mon Sep 17 00:00:00 2001
From: hardik <hardik@navigolabs.com>
Date: Fri, 14 Feb 2025 00:08:17 +0530
Subject: [PATCH 2/2] removed margin

---
 src/components/homepage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 1cb26c8..9177f9b 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -68,7 +68,7 @@ const HomePage: React.FC = () => {
     return (
         <ThemeProvider theme={theme}>
             <Box>
-                <Grid container sx={{ position: "relative", marginTop: '119px' }}>
+                <Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}>
                     {/* Grid 1 */}
                     <Grid
                         item