login and signup

Team-Inventrix · Feb 16, 2024 · 9259344 · 9259344
2 parents e0a2c64 + 97205e8
commit 9259344
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 29 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/thaili-circle.png b/public/thaili-circle.png
diff --git a/src/App.js b/src/App.js
@@ -4,14 +4,14 @@ import HomePage from "./page/HomePage";
 import ErrorPage from "./page/ErrorPage";
 import TermsPage from "./page/TermsPage";
 import PrivacyPage from "./page/PrivacyPage";
-import Login from "./component/login";
-import SignUp from "./component/Sign_Up";
+import ContactPage from "./page/ContactPage";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/contact" element={<ContactPage />} />
         <Route path="/privacy" element={<PrivacyPage />} />
         <Route path="/terms" element={<TermsPage />} />
         <Route path="/*" element={<ErrorPage />} />

diff --git a/src/component/ContactUs.js b/src/component/ContactUs.js
@@ -0,0 +1,87 @@
+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)({
+  minHeight: "100vh",
+  width: "100vw",
+  background: "#1A3306",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  '@media (min-width:600px)': {
+    padding: "0",
+    // height: "auto",
+    width:"100%",
+    textAlign: "center"
+  },
+});
+
+const Title = styled(Typography)({
+  color: "#FFFFFF",
+  textAlign: "center",
+  fontWeight: 700,
+  fontSize: "clamp(2rem, 4vw, 4rem)",
+  margin: "1rem 0",
+  '@media (min-width:600px)': {
+    margin: "3rem 0",
+  },
+});
+
+const SubTitle = styled(Typography)({
+    color: "#FFFFFF",
+    textAlign: "center",
+    fontWeight: 500,
+    fontSize: "clamp(1rem, 3vw, 3rem)",
+    margin: "rem 0",
+    '@media (min-width:600px)': {
+      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 HasTags = styled(Typography)({
+    color:"#fff",
+    opacity:".8",
+    fontSize:"clamp(.7rem, 2vw, 1.5rem)",
+    textAlign:"center",
+    lineHeight:"1.8"
+})
+
+const StyledImage = styled('img')({
+  width: '100%',
+  height: 'auto',
+  marginBottom:'-.4rem' // To hide the small space below the image
+});
+
+export default function ContactUs() {
+  return (
+    <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">
+            Contact Us
+          </Title>
+          <Body variant="body1">
+            <HasTags>🌱 #EcoThaili #BeatPlasticWithUs #SustainabilityJourney</HasTags>
+            <SubTitle>We'd love to hear from you</SubTitle>
+            <HasTags>Reach out to us</HasTags>
+          </Body>
+        </Grid>
+      </Grid>
+    </StyledContainer>
+  );
+}
diff --git a/src/component/Footer.js b/src/component/Footer.js
@@ -84,7 +84,7 @@ const FooterLink = styled(Link)({
   fontWeight: "400",
   marginBottom: ".5rem",
   color: "#2B2B60",
-  opacity: ".7",
+  opacity: ".8",
   cursor: "pointer",
   textDecoration: "none",
   "&:hover": {
@@ -96,9 +96,10 @@ function Copyright() {
   return (
     <Typography variant="body2" color="text.secondary" mt={1}>
       <FooterBody>
-        {"Copyright © "}
-        <FooterLink href="/">EcoThaili&nbsp;</FooterLink>
-        {new Date().getFullYear()}
+        {"© " +
+          new Date().getFullYear() +
+          " EcoThaili. All Rights Reserved. Website by "}
+        <FooterLink> Team Inventrix </FooterLink>
       </FooterBody>
     </Typography>
   );
@@ -203,6 +204,9 @@ export default function Footer() {
             About us
           </FooterLink>
           <FooterLink color="text.secondary">Careers (no page yet)</FooterLink>
+          <FooterLink color="text.secondary" href="/contact">
+            Contact
+          </FooterLink>
         </Box>
         <Box
           sx={{
@@ -218,31 +222,9 @@ export default function Footer() {
           <FooterLink color="text.secondary" href="/privacy">
             Privacy
           </FooterLink>
-          <FooterLink color="text.secondary" href="#">
-            Contact
-          </FooterLink>
         </Box>
       </UpperFooter>
       <LowerFooter>
-        <div>
-          <FooterLink color="text.secondary" href="/privacy">
-            Privacy Policy
-          </FooterLink>
-          <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>
-            &nbsp;•&nbsp;
-          </Typography>
-          <FooterLink color="text.secondary" href="/terms">
-            Terms of Service
-          </FooterLink>
-        </div>
-
-        <Copyright />
-        {/* <ScrollLink to="os" smooth={true} duration={2000}>
-          <Typography variant="body2" sx={footerLinkStyle}>
-            Back to Top
-          </Typography>
-        </ScrollLink> */}
-
         <Stack
           direction="row"
           justifyContent="left"
@@ -292,6 +274,26 @@ export default function Footer() {
             <FacebookIcon />
           </IconButton>
         </Stack>
+
+        <Copyright />
+
+        <div>
+          <FooterLink color="text.secondary" href="/privacy">
+            Privacy Policy
+          </FooterLink>
+          <Typography display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>
+            &nbsp;•&nbsp;
+          </Typography>
+          <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> */}
       </LowerFooter>
     </StyledContainer>
   );

diff --git a/src/component/MaterialComposition.js b/src/component/MaterialComposition.js
@@ -8,7 +8,7 @@ import MaterialCompositionChart from "../image/designedImages/composition.png";
 
 const StyledContainer = styled(Container)({
   // padding: "5rem 1.5rem",
-  minHeight: "100vh",
+  // minHeight: "100vh",
   width: "100%",
   background: "#EFEEEF",
   display: "flex",
@@ -38,6 +38,8 @@ const Body = styled(Typography)({
 });
 
 const ImageContainer = styled("figure")({
+  minHeight: "100%",
+  maxWidth: "100vw",
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
@@ -46,6 +48,8 @@ const ImageContainer = styled("figure")({
   margin: "5rem auto",
   "@media (min-width:600px)": {
     maxWidth: "1050px",
+    minHeight: "100vh",
+    maxWidth: "90vw",
   },
 });
 

diff --git a/src/page/ContactPage.js b/src/page/ContactPage.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Header from "../component/Header";
+import Footer from "../component/Footer";
+import ContactUs from "../component/ContactUs";
+
+export default function ContactPage() {
+  return (
+    <>
+      <Header />
+      <ContactUs />
+      <Footer />
+    </>
+  );
+}