diff --git a/public/favicon.ico b/public/favicon.ico index e50887b..5ce69c0 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/thaili-circle.png b/public/thaili-circle.png new file mode 100644 index 0000000..66e413d Binary files /dev/null and b/public/thaili-circle.png differ diff --git a/src/App.js b/src/App.js index a5cc3a7..43e1548 100644 --- 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 ( } /> + } /> } /> } /> } /> diff --git a/src/component/ContactUs.js b/src/component/ContactUs.js new file mode 100644 index 0000000..642c846 --- /dev/null +++ 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 ( + + + + + Contact Us + + + 🌱 #EcoThaili #BeatPlasticWithUs #SustainabilityJourney + We'd love to hear from you + Reach out to us + + + + + ); +} diff --git a/src/component/Footer.js b/src/component/Footer.js index d94b4f0..b1c7d5c 100644 --- 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 ( - {"Copyright © "} - EcoThaili  - {new Date().getFullYear()} + {"© " + + new Date().getFullYear() + + " EcoThaili. All Rights Reserved. Website by "} + Team Inventrix ); @@ -203,6 +204,9 @@ export default function Footer() { About us Careers (no page yet) + + Contact + Privacy - - Contact - -
- - Privacy Policy - - -  â€¢  - - - Terms of Service - -
- - - {/* - - Back to Top - - */} - + + + +
+ + Privacy Policy + + +  â€¢  + + + Terms of Service + +
+ + {/* + + Back to Top + + */} ); diff --git a/src/component/MaterialComposition.js b/src/component/MaterialComposition.js index ea845cb..300dc0b 100644 --- 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 new file mode 100644 index 0000000..4d083bf --- /dev/null +++ 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 ( + <> +
+ +