Skip to content

Commit

Permalink
Build: New Pages created and Some Component got updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ningsang-Jabegu
Ningsang-Jabegu committed Feb 13, 2024
1 parent 6a65fb0 commit 4f9338c
Show file tree
Hide file tree
Showing 14 changed files with 696 additions and 67 deletions.
39 changes: 14 additions & 25 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,20 @@
import React, { useEffect, useState } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Header from "./component/Header";
import FAQ from "./component/FAQ";
import Footer from "./component/Footer";
import OurStory from "./component/OurStory";
import ProblemWeAreSolving from "./component/ProblemWeAreSolving";
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";

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./page/HomePage";
import ErrorPage from "./page/ErrorPage";
import TermsPage from "./page/TermsPage";
import PrivacyPage from "./page/PrivacyPage";

function App() {
return (
<Router>
<MainSlider />
<Header active_item="Our Story" />
<OurStory active_item="Our Story" />
<ProblemWeAreSolving active_item="Our Story" />
<MaterialComposition active_item="Our Story" />
<OurImpact active_item="Our Story" />
<Product active_item="Our Story" />
<FAQ active_item="Our Story" />
<About active_item="Our Story" />
<Footer active_item="Our Story" />
</Router>
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage/>} />
<Route path="/privacy" element={<PrivacyPage/>} />
<Route path="/terms" element={<TermsPage />} />
<Route path="/*" element={<ErrorPage/>} />
</Routes>
</BrowserRouter>
);
}

Expand Down
44 changes: 34 additions & 10 deletions src/component/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const FooterLink = styled(Link)({
marginBottom: ".5rem",
color:"#2B2B60",
opacity: ".7",
cursor: "pointer",
textDecoration: "none",
'&:hover': {
opacity: "1"
Expand All @@ -104,6 +105,29 @@ function Copyright() {
}

export default function Footer() {

const [open, setOpen] = React.useState(false);

const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};

const scrollToSection = (sectionId) => {
const sectionElement = document.getElementById(sectionId);
const offset = 128;
if (globalThis.location.pathname === '/') {
const targetScroll = sectionElement.offsetTop - offset;
sectionElement.scrollIntoView({ behavior: "smooth" });
globalThis.scrollTo({
top: targetScroll,
behavior: "smooth",
});
setOpen(false);
} else {
globalThis.location.href = '/#' + sectionId;
}
};

return (
<StyledContainer maxWidth={false}>
<UpperFooter>
Expand Down Expand Up @@ -152,20 +176,20 @@ export default function Footer() {
<FooterTitle>
EcoThaili
</FooterTitle>
<FooterLink href="#os">
<FooterLink onClick={() => scrollToSection("os")}>
Our Story
</FooterLink>
<FooterLink href="#pwas">
<FooterLink onClick={() => scrollToSection("pwas")}>
Problem We are Solving
</FooterLink>
<FooterLink href="#mc">
<FooterLink onClick={() => scrollToSection("mc")}>
Material Composition
</FooterLink>
<FooterLink href="#oi">
<FooterLink onClick={() => scrollToSection("oi")}>
Our Impact
</FooterLink>

<FooterLink href="#faq">
<FooterLink onClick={() => scrollToSection("faq")}>
FAQs
</FooterLink>
</Box>
Expand All @@ -179,7 +203,7 @@ export default function Footer() {
<FooterTitle variant="body2" fontWeight={600}>
Company
</FooterTitle>
<FooterLink color="text.secondary" href="#a">
<FooterLink color="text.secondary" onClick={() => scrollToSection("a")}>
About us
</FooterLink>
<FooterLink color="text.secondary">Careers (no page yet)</FooterLink>
Expand All @@ -194,10 +218,10 @@ export default function Footer() {
<FooterTitle>
Legal
</FooterTitle>
<FooterLink color="text.secondary" href="#">
<FooterLink color="text.secondary" href="/terms">
Terms
</FooterLink>
<FooterLink color="text.secondary" href="#">
<FooterLink color="text.secondary" href="/privacy">
Privacy
</FooterLink>
<FooterLink color="text.secondary" href="#">
Expand All @@ -207,13 +231,13 @@ export default function Footer() {
</UpperFooter>
<LowerFooter>
<div>
<FooterLink color="text.secondary" href="#">
<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="#">
<FooterLink color="text.secondary" href="/terms">
Terms of Service
</FooterLink>
</div>
Expand Down
29 changes: 20 additions & 9 deletions src/component/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,27 @@ function Header() {
const scrollToSection = (sectionId) => {
const sectionElement = document.getElementById(sectionId);
const offset = 128;
if (sectionElement) {
const targetScroll = sectionElement.offsetTop - offset;
sectionElement.scrollIntoView({ behavior: "smooth" });
window.scrollTo({
top: targetScroll,
behavior: "smooth",
});
setOpen(false);
if (globalThis.location.pathname === '/') {
if (sectionId === '') {
globalThis.location.href = '/';
} else if (sectionElement) {
const targetScroll = sectionElement.offsetTop - offset;
sectionElement.scrollIntoView({ behavior: "smooth" });
globalThis.scrollTo({
top: targetScroll,
behavior: "smooth",
});
setOpen(false);
}
} else {
if (sectionId === ' ') {
globalThis.location.href = '/';
} else {
globalThis.location.href = '/#' + sectionId;
}
}
};


return (
<div>
Expand Down Expand Up @@ -86,7 +97,7 @@ function Header() {
px: 0,
}}
>
<img src={LogoImg} style={logoStyle} alt="EcoThaili" />
<img src={LogoImg} style={logoStyle} alt="EcoThaili" onClick={() => scrollToSection("ms")} />
<Box
sx={{ display: { xs: "none", md: "flex", margin: "100px" } }}
>
Expand Down
2 changes: 1 addition & 1 deletion src/component/MainSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ function MainSlider() {
};

return (
<Box sx={{ maxWidth: "100vw", minHeight: "100vh", position:"relative"}}>
<Box sx={{ maxWidth: "100vw", minHeight: "100vh", position:"relative"}} id="ms">

<AutoPlaySwipeableViews
axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
Expand Down
61 changes: 39 additions & 22 deletions src/component/MaterialComposition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/system";
// import ManufacturingProcessChart from "../image/designedImages/manufacturing.png";
import ManufacturingProcessChart from "../image/designedImages/manufacturing.png";
import MaterialCompositionChart from "../image/designedImages/composition.png";

const StyledContainer = styled(Container)({
padding: "5rem 1.5rem",
height: "100%",
// padding: "5rem 1.5rem",
minHeight: "100vh",
width: "100%",
background: "#EFEEEF",
display: "flex",
justifyContent: "center",
alignItems: "center",
"@media (min-width:600px)": {
padding: "15rem",
height: "100vh",
// padding: "15rem",
textAlign: "center",
},
});
Expand All @@ -25,26 +25,43 @@ const Title = styled(Typography)({
textAlign: "center",
fontWeight: 700,
fontSize: "clamp(2rem, 4vw, 4rem)", // Use clamp() here
margin: "3rem 0",
margin: "3rem 0 0 0",
});

const Body = styled(Typography)({
color: "#2B2B60",
textAlign: "justify",
fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here
lineHeight: "1.5",

"@media (min-width:600px)": {
textAlign: "center",
},
});

const ImageContainer = styled("figure")({
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "1rem",
margin: "5rem auto",
"@media (min-width:600px)": {
maxWidth:"1050px"
},
});

const StyledImage = styled("img")({
width: "100%",
height: "auto",
height: "100%",
background: "#EFEEEF",
// border: "2px solid red",
// marginBottom:'-.4rem' // To hide the small space below the image
});

const ImageName = styled(Typography)({
fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here
lineHeight: "1.5",
})

export default function OurStory() {
return (
<StyledContainer id="mc" maxWidth={false}>
Expand All @@ -54,21 +71,21 @@ export default function OurStory() {
Material Composition
</Title>
<Body variant="body1">
<div style={{background:"#2B2B60", height:"max-content", width:"100%", color:"#EFEEEF",padding:"1rem .5rem"}}>
{/* <StyledImage
alt="Manufacturing Process"
src={ManufacturingProcessChart}
/> */}
[Manufacturing Process Flow chart will be updated soon]
</div>
<br></br>
<div style={{background:"#2B2B60", height:"max-content", width:"100%", color:"#EFEEEF",padding:"1rem .5rem"}}>
{/* <StyledImage
<ImageContainer>
<StyledImage
alt="Manufacturing Process"
src={ManufacturingProcessChart}
/> */}
[Composition Flow chart will be updated soon]
</div>
/>
<ImageName>Manufacturing Process</ImageName>
</ImageContainer>

<ImageContainer>
<StyledImage
alt="Material Composition"
src={MaterialCompositionChart}
/>
<ImageName>Material Composition</ImageName>
</ImageContainer>
</Body>
</Grid>
</Grid>
Expand Down
71 changes: 71 additions & 0 deletions src/component/PageNotFound.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
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 ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import Button from '@mui/material/Button';

const StyledContainer = styled(Container)({
padding: "5rem 1.5rem",
minHeight: "100vh",
width: "100%",
background: "#2B2B60",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
'@media (min-width:600px)': {
textAlign: "center",
},
});

const Title = styled(Typography)({
color: "#EFEEEF",
textAlign: "center",
fontWeight: 700,
fontSize: "clamp(2rem, 3vw, 3rem)",
margin: "0 0 3rem 0",
position: "relative",
'&::after': {
content: '""',
display: "block",
margin: "0 auto",
minWidth: "50%",
maxWidth: "70%",
paddingTop: "0.5rem",
borderBottom: ".5px solid #EFEEEF",
}
});

const Body = styled(Typography)({
color: "#EFEEEF",
textAlign: "justify",
fontSize: "clamp(1rem, 2vw, 1.5rem)", // And here
lineHeight: "1.7",
'@media (min-width:600px)': {
textAlign: "center"
}
});

export default function PageNotFound() {
return (
<StyledContainer maxWidth={false}>
<Grid container spacing={6}>
<Grid item xs={12} md={12}>
<ErrorOutlineIcon style={{ fontSize: 100, color: "#EFEEEF" }} />
<Title component="h2" variant="h4">
404 Page Not Found
</Title>
<Body variant="body1">
Despite our expertise in creating web pages, we regret to inform you that the specific page you’re searching for does not exist on our website. We apologize for any inconvenience this may cause.
</Body>
<br/>
<Button variant="contained" color="secondary" onClick={() => globalThis.location.href='/'}>
Return to Homepage
</Button>
</Grid>
</Grid>
</StyledContainer>
);
}
Loading

0 comments on commit 4f9338c

Please sign in to comment.