UI: The user interface has been changed with some new informations

Team-Inventrix · Feb 17, 2024 · d9314a2 · d9314a2
1 parent 3faa5d3
commit d9314a2
Show file tree

Hide file tree

Showing 22 changed files with 343 additions and 269 deletions.
diff --git a/src/component/About.js b/src/component/About.js
@@ -9,12 +9,11 @@ const StyledContainer = styled(Container)({
   padding: "0",
   height: "auto",
   width: "100vw",
-  // background: "#EFEEEF",
   display: "flex",
   justifyContent: "center",
   alignItems: "flex-end",
   "@media (min-width:600px)": {
-    padding: "0",
+    padding: "5vw 0 0 0",
     height: "auto",
     width: "100%",
     textAlign: "center",
@@ -28,38 +27,30 @@ const Title = styled(Typography)({
   fontSize: "clamp(2rem, 4vw, 4rem)",
   margin: "1rem 0",
   "@media (min-width:600px)": {
-    margin: "3rem 0",
+    margin: "0 0 5vw 0",
   },
 });
 
 const Body = styled(Typography)({
-  // Use this when text is added
-  // color: "#2B2B60",
-  // textAlign: "justify",
-  // fontSize: "clamp(1rem, 2vw, 1.5rem)",
-  // lineHeight: "1.5",
-  // '@media (min-width:600px)': {
-  //   textAlign: "center"
-  // }
+
 });
 
 const StyledImage = styled("img")({
   width: "100%",
   height: "auto",
-  marginBottom: "-.4rem", // To hide the small space below the image
+  marginBottom: "-.4rem",
 });
 
 export default function OurStory() {
   return (
-    <StyledContainer id="a" maxWidth={false}>
+    <StyledContainer id="a" maxWidth={false} >
       <Grid container spacing={6} padding={0}>
         <Grid item xs={12} md={12} paddingLeft={0} paddingTop={0}>
           <Title component="h2" variant="h4">
             About Our Team
           </Title>
           <Body variant="body1">
             <StyledImage src={ourTeam} alt=" We Inventrix " />{" "}
-            {/* Use StyledImage here */}
           </Body>
         </Grid>
       </Grid>

diff --git a/src/component/ContactUs.js b/src/component/ContactUs.js
@@ -14,7 +14,6 @@ const StyledContainer = styled(Container)({
   alignItems: "center",
   '@media (min-width:600px)': {
     padding: "0",
-    // height: "auto",
     width:"100%",
     textAlign: "center"
   },
@@ -43,14 +42,9 @@ const SubTitle = styled(Typography)({
   });
 
 const Body = styled(Typography)({
-//   Use this when text is added
   color: "#2B2B60",
-//   textAlign: "justify",
   fontSize: "clamp(1rem, 2vw, 1.5rem)",
   lineHeight: "1.5",
-  '@media (min-width:600px)': {
-    // textAlign: "center"
-  }
 });
 
 const HasTags = styled(Typography)({
@@ -64,7 +58,7 @@ const HasTags = styled(Typography)({
 const StyledImage = styled('img')({
   width: '100%',
   height: 'auto',
-  marginBottom:'-.4rem' // To hide the small space below the image
+  marginBottom:'-.4rem'
 });
 
 export default function ContactUs() {

diff --git a/src/component/FAQ.js b/src/component/FAQ.js
@@ -11,15 +11,13 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const StyledContainer = styled(Container)({
   padding: "5rem 1.5rem",
-  minheight: "100vh",
   width: "100%",
   background: "#226a49",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  // zIndex:"-1",
   "@media (min-width:600px)": {
-    padding: "10rem",
+    padding: "10rem 5vw",
     textAlign: "center",
   },
 });
@@ -28,8 +26,8 @@ const Title = styled(Typography)({
   color: "#EFEEEF",
   textAlign: "center",
   fontWeight: 700,
-  fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here
-  margin: "0 0 3rem 0",
+  fontSize: "clamp(2rem, 4vw, 4rem)",
+  margin: "0 0 5vw 0",
 });
 
 const StyleAccordion = styled(Accordion)({
@@ -39,7 +37,7 @@ const StyleAccordion = styled(Accordion)({
 const Body = styled(Typography)({
   color: "#EFEEEF",
   textAlign: "left",
-  fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here
+  fontSize: "clamp(1rem, 2vw, 1.5rem)",
   lineHeight: "1.5",
   "@media (min-width:600px)": {
     textAlign: "left",
@@ -50,7 +48,7 @@ const Question = styled(Typography)({
   color: "#2B2B60",
   textAlign: "left",
   fontWeight: "600",
-  fontSize: "clamp(1rem, 2vw, 1.3rem)", // And here
+  fontSize: "clamp(1rem, 2vw, 1.3rem)",
   lineHeight: "1.5",
   "@media (min-width:600px)": {
     textAlign: "left",
@@ -61,7 +59,7 @@ const Answer = styled(Typography)({
   color: "#2B2B60",
   textAlign: "left",
   fontWeight: "400",
-  fontSize: "clamp(1rem, 2vw, 1.2rem)", // And here
+  fontSize: "clamp(1rem, 2vw, 1.2rem)",
   lineHeight: "1.5",
   margin: "0 .5rem ",
   "@media (min-width:600px)": {
@@ -78,13 +76,17 @@ export default function FAQ() {
   };
 
   return (
-    <StyledContainer id="faq" maxWidth={false}>
+    <StyledContainer
+      id="faq"
+      maxWidth={false}
+      sx={{ minHeight: { sm: "100%", md: "100vh" } }}
+    >
       <Grid container spacing={6}>
         <Grid item xs={12} md={12}>
           <Title component="h2" variant="h4">
             Frequently asked questions
           </Title>
-          <Body>
+          <Body sx={{ width: { sm: "90vw" } }}>
             <StyleAccordion
               expanded={expanded === "panel1"}
               onChange={handleChange("panel1")}

diff --git a/src/component/Footer.js b/src/component/Footer.js
@@ -30,7 +30,7 @@ const StyledContainer = styled(Container)({
   width: "100%",
   "@media (min-width:600px)": {
     gap: "0.5rem",
-    padding: "5rem 5rem .7rem 5rem",
+    padding: "2.5vw 5vw",
     textAlign: "left",
   },
 });
@@ -58,10 +58,15 @@ const LogoSide = styled(Box)({
 const LowerFooter = styled(Box)({
   display: "flex",
   justifyContent: "space-between",
+  flexDirection:"column",
+  alignItems: "center",
   paddingTop: "1rem",
   marginTop: "1rem",
   width: "100%",
   borderTop: "1px solid #226a49",
+  "@media (min-width:600px)": {
+    flexDirection:"row",
+  },
 });
 
 const FooterTitle = styled(Typography)({
@@ -94,7 +99,7 @@ const FooterLink = styled(Link)({
 
 function Copyright() {
   return (
-    <Typography variant="body2" color="text.secondary" mt={1}>
+    <Typography variant="body2" color="text.secondary" sx={{order:{xs:"3", sm:"3"}}}>
       <FooterBody>
         {"© " +
           new Date().getFullYear() +
@@ -237,6 +242,7 @@ export default function Footer() {
           useFlexGap
           sx={{
             color: "text.secondary",
+            order:{xs:"1",sm:"1"}
           }}
         >
           <IconButton
@@ -280,9 +286,9 @@ export default function Footer() {
           </IconButton>
         </Stack>
 
-        <Copyright />
+        <Copyright/>
 
-        <div>
+        <Box sx={{order:{xs:"2", sm:"2"}}}>
           <FooterLink color="text.secondary" href="/privacy">
             Privacy Policy
           </FooterLink>
@@ -292,13 +298,7 @@ export default function Footer() {
           <FooterLink color="text.secondary" href="/terms">
             Terms of Service
           </FooterLink>
-        </div>
-
-        {/* <ScrollLink to="os" smooth={true} duration={2000}>
-          <Typography variant="body2" sx={footerLinkStyle}>
-            Back to Top
-          </Typography>
-        </ScrollLink> */}
+        </Box>
       </LowerFooter>
     </StyledContainer>
   );

diff --git a/src/component/Header.js b/src/component/Header.js
@@ -62,9 +62,7 @@ function Header() {
           width: "100%",
         }}
       >
-        <Container maxWidth="xl" sx={{
-          // zIndex: '5'
-        }}>
+        <Container maxWidth="xl">
           <Toolbar
             variant="regular"
             sx={(theme) => ({
@@ -105,63 +103,63 @@ function Header() {
                   onClick={() => scrollToSection("os")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Our Story
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("pwas")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Problem We are Solving
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("mc")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Material Composition
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("mp")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Manufacturing Process
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("oi")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Our Impact
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("p")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Product
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("faq")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     FAQ
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("a")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
+                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     About
                   </Typography>
                 </MenuItem>

diff --git a/src/component/MainSlider.js b/src/component/MainSlider.js
@@ -93,8 +93,6 @@ function MainSlider() {
           <div>
             <Box
               sx={{
-                // maxWidth: "100vw",
-                // minHeight: "70vh",
                 position: "relative",
               }}
               id="ms"
@@ -109,7 +107,6 @@ function MainSlider() {
                   <div
                     key={step.label}
                     style={{
-                      // aspectRatio: "16/9",
                       height: "100%",
                       overflow: "hidden",
                     }}
@@ -122,7 +119,6 @@ function MainSlider() {
                           width: "100%",
                           display: "block",
                           overflow: "hidden",
-                          // minWidth: "100%",
                           margin: "auto",
                           objectFit: "fill",
                           objectPosition: "center",

diff --git a/src/component/ManufacturingProcess.js b/src/component/ManufacturingProcess.js
@@ -8,12 +8,11 @@ import ManufacturingProcessChart from "../image/designedImages/manufacturing.png
 const StyledContainer = styled(Container)({
   padding: "5rem 1.5rem",
   width: "100%",
-  // background: "#226a49",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   "@media (min-width:600px)": {
-    padding: "5rem 15rem 9rem 15rem",
+    padding: "5vw 5vw",
     textAlign: "center",
     minHeight: "100vh",
   },
@@ -24,10 +23,7 @@ const Title = styled(Typography)({
   textAlign: "center",
   fontWeight: 700,
   fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here
-  // margin: "3rem 0",
-  "@media (min-width:600px)": {
-    marginBottom: "6rem"
-  },
+  margin: "0 0 5vw 0",
 });
 
 const Body = styled(Typography)({
@@ -58,7 +54,7 @@ const ImageName = styled(Typography)({
 
 export default function ManufacturingProcess() {
   return (
-    <StyledContainer id="mp" maxWidth={false}>
+    <StyledContainer id="mp" maxWidth={false} sx={{minHeight: { sm: "100%", md: "100vh" }}}>
       <Grid container spacing={6}>
         <Grid item xs={12} md={12}>
           <Title component="h2" variant="h4">
@@ -68,6 +64,7 @@ export default function ManufacturingProcess() {
               <StyledImage
                 alt="Manufacturing Composition"
                 src={ManufacturingProcessChart}
+                sx={{minWidth:{sm:"calc(100% )",md:"calc(100% )"}}}
               />
           </Body>
         </Grid>