Skip to content

Commit ac9b038

Browse files
nmreyesnmreyes
committed
About Page components
1 parent 3bde5cd commit ac9b038

File tree

4 files changed

+253
-0
lines changed

4 files changed

+253
-0
lines changed

‎src/shared/components/AboutPage.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react";
2+
import { Container, Box } from "@mui/material";
3+
import AboutPageHeader from "./AboutPage/AboutPageHeader";
4+
import AboutPageBody from "./AboutPage/AboutPageBody";
5+
import AboutPageFooter from "./AboutPage/AboutPageFooter";
6+
7+
const AboutPage = () => {
8+
return (
9+
<Box
10+
sx={{
11+
backgroundImage: `url('/BULSU.jpg')`,
12+
backgroundSize: "cover",
13+
backgroundPosition: "center",
14+
minHeight: "100vh",
15+
padding: "20px 0",
16+
}}
17+
>
18+
<Box
19+
sx={{
20+
position: "absolute",
21+
top: 0,
22+
left: 0,
23+
width: "100%",
24+
height: "100%",
25+
backgroundColor: "rgba(0, 0, 0, 0.5)", // Black overlay with 50% opacity
26+
zIndex: 1,
27+
}}
28+
/>
29+
<Container
30+
sx={{
31+
position: "relative",
32+
zIndex: 2,
33+
backgroundColor: "transparent", // Ensure container background is transparent
34+
}}
35+
>
36+
<AboutPageHeader />
37+
<AboutPageBody />
38+
<AboutPageFooter />
39+
</Container>
40+
</Box>
41+
);
42+
};
43+
44+
export default AboutPage;

‎src/shared/components/AboutPage/AboutPageBody.js‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React from "react";
2+
import { Box, Typography, Paper, Divider, Grid } from "@mui/material";
3+
4+
// Images (ensure these paths are correct)
5+
// import publicInvestmentProgramImg from './path/to/public-investment-program.png';
6+
// import philippineDevelopmentPlanImg from './path/to/philippine-development-plan.png';
7+
8+
const AboutPageBody = () => {
9+
return (
10+
<Paper
11+
elevation={3}
12+
sx={{
13+
padding: "20px",
14+
marginTop: "20px",
15+
backgroundColor: "transparent",
16+
color: "#fff",
17+
boxShadow: "none",
18+
}}
19+
>
20+
<Box mb={4}>
21+
<Typography variant="h4" component="h1">
22+
Bulacan State University
23+
</Typography>
24+
<Typography variant="h5" component="h2">
25+
Planning and Development Office
26+
</Typography>
27+
<Typography variant="h6" component="h3">
28+
Investment Program System
29+
</Typography>
30+
</Box>
31+
<Typography variant="body1" mb={5}>
32+
BuLSUPIPs is an innovative web application designed to streamline and
33+
enhance the investment programming process within Bulacan State
34+
University. Our platform serves as a centralized hub where colleges and
35+
offices across the university can propose, evaluate, and manage projects
36+
efficiently.
37+
</Typography>
38+
39+
<Divider sx={{ margin: "20px 0", borderColor: "white" }} />
40+
41+
<Box>
42+
<Typography variant="h5" component="h4" mb={5} mt={5}>
43+
Our Mission
44+
</Typography>
45+
<Typography variant="body1" mb={5}>
46+
Our mission is to foster a collaborative and transparent environment
47+
for project planning and implementation, ensuring that all proposed
48+
initiatives align with the university’s Medium-Term Development Plan
49+
(MTDP) and contribute to the overall goals of Bulacan State
50+
University.
51+
</Typography>
52+
</Box>
53+
<Divider sx={{ margin: "20px 0", borderColor: "white" }} />
54+
<Box>
55+
<Typography variant="h5" component="h4" mb={5} mt={5}>
56+
What We Do
57+
</Typography>
58+
<Typography variant="body1" mb={2}>
59+
<strong>Centralized Project Management:</strong> BuLSUPIPs provides a
60+
unified platform where all project proposals from various colleges and
61+
offices are submitted, reviewed, and managed. This centralization
62+
helps in avoiding redundancy and ensures optimal allocation of
63+
resources.
64+
</Typography>
65+
<Typography variant="body1" mb={2}>
66+
<strong>Project Evaluation and Ranking:</strong> Our system includes
67+
robust evaluation tools that allow for the assessment and ranking of
68+
projects based on their scores. This ensures that the most impactful
69+
and strategically aligned projects are prioritized for implementation.
70+
</Typography>
71+
<Typography variant="body1" mb={2}>
72+
<strong>Project Monitoring and Transparency:</strong> By consolidating
73+
project information in one place, we promote transparency and
74+
accountability. Stakeholders can track the progress of each project,
75+
ensuring that all initiatives are executed as planned and deliver
76+
their intended benefits.
77+
</Typography>
78+
<Typography variant="body1" mb={2}>
79+
<strong>Data-Driven Decision Making:</strong> Our platform integrates
80+
data from multiple sources, enabling comprehensive analysis and
81+
informed decision-making. This ensures that every project undertaken
82+
is backed by accurate and up-to-date information.
83+
</Typography>
84+
<Typography variant="body1" mb={5}>
85+
<strong>Collaborative Environment:</strong> BuLSUPIPs fosters a
86+
collaborative environment where different departments and units, along
87+
with the Planning and Development Office (PDO), can work together
88+
seamlessly. This collaboration is crucial for the successful
89+
implementation of projects that span multiple disciplines and require
90+
diverse expertise.
91+
</Typography>
92+
</Box>
93+
<Divider sx={{ margin: "20px 0", borderColor: "white" }} />
94+
<Box>
95+
<Typography variant="h5" component="h4" mb={5} mt={5}>
96+
Priority Projects
97+
</Typography>
98+
<Typography variant="body1">
99+
BuLSUPIPs identifies priority projects for the upcoming fiscal year
100+
based on their alignment with Bulacan State University’s MTDP. These
101+
projects undergo rigorous evaluation and ranking processes to ensure
102+
they meet established criteria and are ready for implementation.
103+
</Typography>
104+
<Typography variant="body1">
105+
Top-ranking projects, based on their evaluation scores and approval by
106+
the University President, are identified through BuLSUPIPs as
107+
candidates for General Appropriations Act (GAA) funding. These
108+
projects are subsequently endorsed to the Public Investment Program
109+
Online (PIPOL) system, operated by the National Economic and
110+
Development Authority (NEDA). PIPOL ensures selected projects receive
111+
the necessary support and resources to proceed to implementation and
112+
contribute significantly to national development goals.
113+
</Typography>
114+
<Typography variant="body1" mb={5}>
115+
BuLSUPIPs is created by the Data Analytics, Intelligence, and
116+
Connectivity Unit and the Project Development and Investment
117+
Programming Unit of the Planning and Development Office at Bulacan
118+
State University. We are committed to leveraging advanced technology
119+
and data-driven insights to support the university’s growth and
120+
development.
121+
</Typography>
122+
</Box>
123+
<Divider sx={{ margin: "20px 0", borderColor: "white" }} />
124+
<Grid container spacing={2} sx={{ marginTop: "20px" }}>
125+
<Grid item xs={6}>
126+
<Box sx={{ textAlign: "center" }}>
127+
<img
128+
// src={publicInvestmentProgramImg}
129+
alt="Public Investment Program 2023-2028"
130+
style={{ maxWidth: "100%" }}
131+
/>
132+
<Typography variant="body1">
133+
Public Investment Program 2023-2028
134+
</Typography>
135+
</Box>
136+
</Grid>
137+
<Grid item xs={6}>
138+
<Box sx={{ textAlign: "center" }}>
139+
<img
140+
// src={philippineDevelopmentPlanImg}
141+
alt="Philippine Development Plan 2023-2028"
142+
style={{ maxWidth: "100%" }}
143+
/>
144+
<Typography variant="body1">
145+
Philippine Development Plan 2023-2028
146+
</Typography>
147+
</Box>
148+
</Grid>
149+
</Grid>
150+
</Paper>
151+
);
152+
};
153+
154+
export default AboutPageBody;

‎src/shared/components/AboutPage/AboutPageFooter.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { Box, Typography } from "@mui/material";
3+
4+
const AboutPageFooter = () => {
5+
return (
6+
<Box
7+
sx={{
8+
textAlign: "center",
9+
backgroundColor: "transparent",
10+
color: "#fff",
11+
padding: "10px 0",
12+
marginTop: "20px",
13+
}}
14+
>
15+
<Typography variant="body2" component="p">
16+
{/* © {new Date().getFullYear()} Bulacan State University. All rights reserved. */}
17+
SHEEEEEEEEEEEEEEEEEEEEESH
18+
</Typography>
19+
</Box>
20+
);
21+
};
22+
23+
export default AboutPageFooter;

‎src/shared/components/AboutPage/AboutPageHeader.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import { Box, Typography } from "@mui/material";
3+
4+
const AboutPageHeader = () => {
5+
return (
6+
<Box
7+
sx={{
8+
position: "relative",
9+
textAlign: "center",
10+
backgroundColor: "transparent",
11+
color: "#fff",
12+
padding: "20px 0",
13+
}}
14+
>
15+
<Typography
16+
variant="body2"
17+
sx={{
18+
position: "absolute",
19+
top: "10px",
20+
left: "10px",
21+
fontSize: "12px",
22+
fontWeight: "bold",
23+
marginBottom: "40px",
24+
}}
25+
>
26+
BulSUPIPs v1
27+
</Typography>
28+
</Box>
29+
);
30+
};
31+
32+
export default AboutPageHeader;

0 commit comments

Comments
 (0)