Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material UI #7

Merged
merged 5 commits into from
Mar 4, 2025
Merged

Material UI #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0536909
update mobile
kubil-ismail Feb 21, 2025
9618fee
update
kubil-ismail Feb 22, 2025
7fc146f
update
kubil-ismail Feb 23, 2025
d298b64
update
kubil-ismail Feb 25, 2025
7802782
update
kubil-ismail Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
Expand Down
Binary file added public/images/bg-collabowritting.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg-food-security-and-sustainability-center.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg-food-security.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/bg-initiatives-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/image-1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/image-2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/image-3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 49 additions & 38 deletions src/components/_pages/About_Us/_about_us.content_1.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,59 @@
import { Container, Grid2 as Grid, Box } from "@mui/material";
import React from "react";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import MobileView from "./mobile/_about_us.content_1";

function _about_us_content_1() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));

return (
<Box
mb="150px"
sx={{
backgroundImage: "url('/images/bg-grid.png')",
paddingBottom: "50px",
zIndex: -2,
}}
>
<Container>
<Grid container justifyContent="center">
<Grid item size={{ md: 9 }}>
<Box position="relative">
<Box
component="img"
src="/icons/play-error.svg"
position="absolute"
top="50%"
left="50%"
sx={{ transform: "translate(-50%, -50%)", cursor: "pointer" }}
zIndex={2}
/>
<Box
height="580px"
bgcolor={(props) => props.palette.warning.main}
></Box>
<>
<Box
mb="150px"
sx={{
backgroundImage: "url('/images/bg-grid.png')",
paddingBottom: "50px",
zIndex: -2,
}}
display={isMobile ? "none" : "block"}
>
<Container>
<Grid container justifyContent="center">
<Grid item size={{ md: 9 }}>
<Box position="relative">
<Box
component="img"
src="/icons/play-error.svg"
position="absolute"
top="50%"
left="50%"
sx={{ transform: "translate(-50%, -50%)", cursor: "pointer" }}
zIndex={2}
/>
<Box
height="580px"
bgcolor={(props) => props.palette.warning.main}
></Box>

<Box
height="580px"
width="100%"
bgcolor="lightgray"
position="absolute"
bottom={20}
right={20}
// zIndex={-1}
></Box>
</Box>
<Box
height="580px"
width="100%"
bgcolor="lightgray"
position="absolute"
bottom={20}
right={20}
// zIndex={-1}
></Box>
</Box>
</Grid>
</Grid>
</Grid>
</Container>
</Box>
</Container>
</Box>

{isMobile ? <MobileView /> : null}
</>
);
}

Expand Down
179 changes: 94 additions & 85 deletions src/components/_pages/About_Us/_about_us.headmaster.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,105 @@
import {
Container,
Grid2 as Grid,
Box,
Typography,
Button,
} from "@mui/material";
import { Container, Grid2 as Grid, Box, Typography } from "@mui/material";
import React from "react";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import MobileView from "./mobile/_about_us.headmaster";

function _about_us_headmaster() {
return (
<Box minHeight="150vh" paddingTop="8vh" position="relative">
<Container>
<Grid container>
<Grid
item
size={{ md: 6 }}
display="flex"
alignItems="center"
sx={{ minHeight: "95vh" }}
>
<Box maxWidth="70%" mt="10vh">
<Typography variant="h1" color="primary" gutterBottom>
WHO WE ARE?
</Typography>
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));

<Typography>
Tay Juhana Foundation (TJF) is a nonprofit organization
dedicated to promote the advocacy of cultivation of suboptimal
lands into productive lands, through the most environmentally,
economically, and socially sustainable manner. <br />
<br /> Our work is based on the prevalence of food insecurity
and undernourishment regionally and globally. It is largely
exacerbated by climate-related shocks, social conflict and
violence, and other challenges caused by economic slowdowns.
<br />
<br />
Legally established in 2013 and actively operated since 2017,
TJF is now ready to be an agent of change for the mentioned
causes. We welcome any collaboration from both local and
international communities. Together, we can contribute more
through various research, technology, and community development
projects within he area of sustainable agriculture in suboptimal
lands. Our aspiration is to improve food security while
combatting the adverse effects of climate change and building
self-sufficient communities.
<br />
<br /> Our approach is adaptive and philanthropic while being
critical and constructive. We are willing to provide all
resources we have for the greater good and are dedicated to
utilize all available tools for the greatest possible impact. We
work with a sense of urgency and commit to see problems from
multiple perspectives. These values motivate us to produce
high-quality result and encourage everyone to do the same in
their own capacity.
</Typography>
</Box>
</Grid>
<Grid item size={{ md: 6 }}>
<Box
sx={{
backgroundColor: "lightgray",
height: "103vh",
position: "absolute",
width: "50vw",
marginTop: "-8vh",
backgroundImage: `url('/images/bg-aboutUs.jpg')`,
}}
/>
return (
<>
<Box
minHeight="150vh"
paddingTop="8vh"
position="relative"
display={isMobile ? "none" : "block"}
>
<Container>
<Grid container>
<Grid
item
size={{ md: 6 }}
display="flex"
alignItems="center"
sx={{ minHeight: "95vh" }}
>
<Box maxWidth="70%" mt="10vh">
<Typography variant="h1" color="primary" gutterBottom>
WHO WE ARE?
</Typography>

<Box marginTop="104vh" position="relative">
<Typography>
Tay Juhana Foundation (TJF) is a nonprofit organization
dedicated to promote the advocacy of cultivation of suboptimal
lands into productive lands, through the most environmentally,
economically, and socially sustainable manner. <br />
<br /> Our work is based on the prevalence of food insecurity
and undernourishment regionally and globally. It is largely
exacerbated by climate-related shocks, social conflict and
violence, and other challenges caused by economic slowdowns.
<br />
<br />
Legally established in 2013 and actively operated since 2017,
TJF is now ready to be an agent of change for the mentioned
causes. We welcome any collaboration from both local and
international communities. Together, we can contribute more
through various research, technology, and community
development projects within he area of sustainable agriculture
in suboptimal lands. Our aspiration is to improve food
security while combatting the adverse effects of climate
change and building self-sufficient communities.
<br />
<br /> Our approach is adaptive and philanthropic while being
critical and constructive. We are willing to provide all
resources we have for the greater good and are dedicated to
utilize all available tools for the greatest possible
impact. We work with a sense of urgency and commit to see
problems from multiple perspectives. These values motivate us
to produce high-quality result and encourage everyone to do
the same in their own capacity.
</Typography>
</Box>
</Grid>
<Grid item size={{ md: 6 }}>
<Box
component="img"
src="/icons/comma-top-success.svg"
position="absolute"
top="-50px"
left={0}
sx={{
backgroundColor: "lightgray",
height: "103vh",
position: "absolute",
width: "50vw",
marginTop: "-8vh",
backgroundImage: `url('/images/bg-aboutUs.jpg')`,
}}
/>
<Typography
textAlign="right"
variant="h3"
color="success"
lineHeight="63px"
>
Providing Food for Humanity <br /> through Sustainable
Suboptimal
<br /> Land Cultivation
</Typography>
</Box>

<Box marginTop="104vh" position="relative">
<Box
component="img"
src="/icons/comma-top-success.svg"
position="absolute"
top="-50px"
left={0}
/>
<Typography
textAlign="right"
variant="h3"
color="success"
lineHeight="63px"
>
Providing Food for Humanity <br /> through Sustainable
Suboptimal
<br /> Land Cultivation
</Typography>
</Box>
</Grid>
</Grid>
</Grid>
</Container>
</Box>
</Container>
</Box>

{isMobile ? <MobileView /> : null}
</>
);
}

Expand Down
49 changes: 49 additions & 0 deletions src/components/_pages/About_Us/mobile/_about_us.content_1.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Container, Grid2 as Grid, Box } from "@mui/material";
import React from "react";

function _about_us_content_1() {
return (
<Box
mb="150px"
sx={{
backgroundImage: "url('/images/bg-grid.png')",
paddingBottom: "50px",
zIndex: -2,
}}
>
<Container>
<Grid container justifyContent="center">
<Grid item size={{ md: 9 }}>
<Box position="relative">
<Box
component="img"
src="/icons/play-error.svg"
position="absolute"
top="50%"
left="50%"
sx={{ transform: "translate(-50%, -50%)", cursor: "pointer" }}
zIndex={2}
/>
<Box
height="580px"
bgcolor={(props) => props.palette.warning.main}
></Box>

<Box
height="580px"
width="100%"
bgcolor="lightgray"
position="absolute"
bottom={20}
right={20}
// zIndex={-1}
></Box>
</Box>
</Grid>
</Grid>
</Container>
</Box>
);
}

export default _about_us_content_1;
Loading