Merge pull request #15 from Team-Inventrix/dev

Dev
Team-Inventrix · Feb 12, 2024 · fccac85 · fccac85
2 parents 6570da6 + 5dd741c
commit fccac85
Show file tree

Hide file tree

Showing 15 changed files with 743 additions and 259 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.9.0",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/style.css b/public/style.css
@@ -13,6 +13,10 @@
   --primary-white: #eaeaea;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--primary-green-background-light);
   font-family: "Inter", sans-serif;

diff --git a/src/App.js b/src/App.js
@@ -1,3 +1,4 @@
+import React, { useEffect, useState } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import Header from "./component/Header";
 import FAQ from "./component/FAQ";

diff --git a/src/component/About.js b/src/component/About.js
@@ -1,30 +1,63 @@
 import * as React from "react";
-
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
+import { styled } from "@mui/system";
+import ourTeam from "../image/OurTeam.png";
+
+const StyledContainer = styled(Container)({
+  padding: "0",
+  height: "100vh",
+  width: "100%",
+  background: "#EFEEEF",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "flex-end",
+  '@media (min-width:600px)': {
+    padding: "0",
+    height: "100vh",
+    textAlign: "center"
+  },
+});
+
+const Title = styled(Typography)({
+  color: "#2B2B60",
+  textAlign: "center",
+  fontWeight: 700,
+  fontSize: "clamp(2rem, 4vw, 4rem)",
+  margin: "3rem 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
+});
 
 export default function OurStory() {
   return (
-    <Container id="a" sx={{ py: { xs: 8, sm: 16 } }}>
-      <Grid container spacing={6}>
-        <Grid item xs={12} md={12}>
-          <div>
-            <Typography component="h2" variant="h4" color="text.primary">
-              About
-            </Typography>
-            <Typography variant="body1" color="text.secondary">
-              BioThaili, our eco-friendly plastic, is a story of change. Made
-              from banana fibers, it's more than just a bag – it's a promise to
-              be kind to our planet. Every use is a small step towards a
-              cleaner, greener future. Join us in this journey, where simple
-              choices make a big impact. BioThaili is not just plastic; it's a
-              way to care for our Earth. Together, let's make a difference.
-              <br /> 🌿 #BioThaili #EcoFriendly #Sustainability"
-            </Typography>
-          </div>
+    <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>
-    </Container>
+    </StyledContainer>
   );
 }