Done: Web Component has been updated

Team-Inventrix · Feb 12, 2024 · 6a65fb0 · 6a65fb0
1 parent bdef767
commit 6a65fb0
Show file tree

Hide file tree

Showing 31 changed files with 713 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "react-scroll": "^1.9.0",
+    "react-swipeable-views-react-18": "^0.14.7",
+    "react-swipeable-views-utils": "^0.14.0",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/OurTeam.png b/public/OurTeam.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,16 +7,32 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="EcoThaili - Revolutionizing eco-friendly bags made from banana fiber."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="stylesheet" href="style.css">
+    <meta
+      name="keywords"
+      content="EcoThaili, banana fiber, eco-friendly, sustainable, plastic alternative"
+    />
+    <meta name="author" content="Team Inventrix" />
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow" />
+    <meta property="og:title" content="EcoThaili - Sustainable Banana Fiber Bags" />
+    <meta property="og:description" content="Revolutionizing eco-friendly bags made from banana fiber. Join us in our mission to reduce plastic waste." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://team-inventrix.vercel.app/" />
+    <meta property="og:image" content="%PUBLIC_URL%/OurTeam.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:locale" content="ne_NP" />
+    <meta property="og:site_name" content="EcoThaili" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/team-inventrix-circle-prifile-picture.PNG" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>EcoThaili</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <!-- <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/team-inventrix-circle-profile-picture.PNG b/public/team-inventrix-circle-profile-picture.PNG
diff --git a/src/App.js b/src/App.js
@@ -9,10 +9,13 @@ import MaterialComposition from "./component/MaterialComposition";
 import OurImpact from "./component/OurImpact";
 import About from "./component/About";
 import Product from "./component/Product";
+import MainSlider from "./component/MainSlider";
+
 
 function App() {
   return (
     <Router>
+      <MainSlider />
       <Header active_item="Our Story" />
       <OurStory active_item="Our Story" />
       <ProblemWeAreSolving active_item="Our Story" />

diff --git a/src/component/FAQ.js b/src/component/FAQ.js
@@ -11,16 +11,15 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const StyledContainer = styled(Container)({
   padding: "5rem 1.5rem",
-  height: "100%",
+  minheight: "100vh",
   width: "100%",
   background: "#2B2B60",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   // zIndex:"-1",
   "@media (min-width:600px)": {
-    padding: "15rem",
-    height: "120vh",
+    padding: "10rem",
     textAlign: "center",
   },
 });
@@ -30,7 +29,7 @@ const Title = styled(Typography)({
   textAlign: "center",
   fontWeight: 700,
   fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here
-  margin: "3rem 0",
+  margin: "0 0 3rem 0",
 });
 
 const StyleAccordion = styled(Accordion)({

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",
+    padding: "5rem 5rem .7rem 5rem",
     textAlign: "left",
   },
 });
@@ -135,7 +135,7 @@ export default function Footer() {
               <Button
                 variant="contained"
                 color="primary"
-                sx={{ flexShrink: 0 }}
+                sx={{ flexShrink: 0, bgcolor:"#2B2B60" }}
               >
                 Subscribe
               </Button>
@@ -216,9 +216,9 @@ export default function Footer() {
           <FooterLink color="text.secondary" href="#">
             Terms of Service
           </FooterLink>
-          <Copyright />
         </div>
 
+        <Copyright />
         {/* <ScrollLink to="os" smooth={true} duration={2000}>
           <Typography variant="body2" sx={footerLinkStyle}>
             Back to Top

diff --git a/src/component/Header.js b/src/component/Header.js
@@ -61,7 +61,7 @@ function Header() {
               alignItems: "center",
               justifyContent: "space-between",
               flexShrink: 0,
-              borderRadius: "999px",
+              borderRadius: ".5rem",
               bgcolor:
                 theme.palette.mode === "light"
                   ? "rgba(255, 255, 255, 0.4)"
@@ -94,55 +94,55 @@ function Header() {
                   onClick={() => scrollToSection("os")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Our Story
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("pwas")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" 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="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Material Composition
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("oi")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Our Impact
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("p")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     Product
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("faq")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     FAQ
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   onClick={() => scrollToSection("a")}
                   sx={{ py: "6px", px: "12px" }}
                 >
-                  <Typography variant="body2" color="text.primary">
+                  <Typography variant="body2" color="#2B2B60" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
                     About
                   </Typography>
                 </MenuItem>