Skip to content

Commit c14022c

Browse files
neilbrianpadorneilbrianpador
authored
Merge pull request protobi#18 from Planning-and-Development-BULSU/carousel3
Final Carousel3 for PR
2 parents 4e1fa08 + 220cef5 commit c14022c

File tree

1 file changed

+185
-13
lines changed

1 file changed

+185
-13
lines changed

‎src/sections/homePageSection/Components/carousel3.js‎

Lines changed: 185 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,194 @@
1-
import React from 'react';
1+
import React from "react";
2+
import SearchIcon from "@mui/icons-material/Search";
3+
import { Typography } from "@mui/material";
4+
import AdsClickIcon from "@mui/icons-material/AdsClick";
5+
import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
6+
import LanguageIcon from "@mui/icons-material/Language";
7+
import LaptopIcon from "@mui/icons-material/Laptop";
8+
// import { textAlign } from "@mui/system";
9+
// import { WrapText } from "@material-ui/icons";
210

311
const Carousel3 = () => {
4-
const styles = {
5-
backgroundColor: 'yellow',
6-
width: '100%',
7-
height: '100%',
8-
display: 'flex',
9-
justifyContent: 'center',
10-
alignItems: 'center',
11-
color: 'black',
12-
fontSize: '24px',
12+
const logo = {
13+
height: "100%",
14+
maxWidth: "100%",
15+
maxHeight: "120px",
16+
marginRight: "20px",
17+
justifyContent: "center",
18+
alignItems: "center",
1319
};
1420

21+
const header = {
22+
display: "flex",
23+
backgroundColor: "#25408f",
24+
color: "white",
25+
alignItems: "center",
26+
justifyContent: "center",
27+
fontStyle: "italic",
28+
marginBottom: "20px",
29+
};
30+
31+
const body = {
32+
display: "flex",
33+
justifyContent: "center",
34+
alignItems: "center",
35+
textAlign: "justify",
36+
flexDirection: "column",
37+
width: "100%",
38+
padding: "20px",
39+
};
40+
41+
const body1 = {
42+
fontWeight: "bold",
43+
};
44+
45+
const targetsContainer = {
46+
display: "flex",
47+
flexDirection: "row",
48+
justifyContent: "space-between",
49+
};
50+
51+
const targetBox = {
52+
display: "flex",
53+
flexDirection: "column",
54+
flexwrap: "wrap",
55+
color: "#25408f",
56+
width: "100%",
57+
textAlign: "justify",
58+
padding: "10px",
59+
};
60+
61+
const footer = {
62+
display: "flex",
63+
justifyContent: "space-between",
64+
alignItems: "center",
65+
backgroundColor: "#95060c",
66+
color: "white",
67+
fontSize: "18px",
68+
fontWeight: "bold",
69+
padding: "10px",
70+
};
71+
72+
const alignTitle = {
73+
display: "flex",
74+
flexDirection: "row",
75+
}
76+
1577
return (
16-
<div style={styles}>
17-
Carousel 3
78+
<div>
79+
<div style={header}>
80+
<div>
81+
<img src="./logo192.png" alt="BulSU Logo" style={logo} />
82+
</div>
83+
<div>
84+
<Typography variant="h5" style={{ fontWeight: "bold" }}>
85+
<span style={{ color: "#ffc001" }}>BulSU PIPs </span>101
86+
</Typography>
87+
<Typography variant="h2" style={{ fontWeight: "bold" }}>
88+
OBJECTIVES
89+
</Typography>
90+
</div>
91+
<div>
92+
<SearchIcon
93+
sx={{ fontSize: "8rem", marginLeft: "20px", color: "white" }}
94+
/>
95+
</div>
96+
</div>
97+
98+
<div style={body}>
99+
<div>
100+
<Typography variant="h6">
101+
<span style={{ color: "#000000", fontWeight: "bold" }}>
102+
The BulSU Investment Program (BulSU-IP) aims to contribute in
103+
achieving targets set in the 2021-2025 Strategic Plan through:
104+
</span>
105+
</Typography>
106+
</div>
107+
108+
{/* Container for three target sections */}
109+
<div style={targetsContainer}>
110+
{/* First Section */}
111+
<div style={targetBox}>
112+
<div>
113+
<div style={alignTitle}>
114+
<AdsClickIcon sx={{ fontSize: "48px", color: "#95060c" }} />
115+
<Typography
116+
variant="h6"
117+
style={{
118+
fontWeight: "bold",
119+
color: "#95060c",
120+
textAlign: "left",
121+
}}
122+
>
123+
Identifying
124+
</Typography>
125+
</div>
126+
<Typography variant="h6" style={{fontWeight: "bold"}} gutterBottom>
127+
the proposed priority PAPs to be implemented for funding through
128+
the General Appropriations Act (GAA), Income Fund, or through a
129+
Public-Private Partnership (PPP) or Joint Ventures (JV);
130+
</Typography>
131+
</div>
132+
</div>
133+
134+
{/* Second Section & Second Inner Body Div */}
135+
<div style={targetBox}>
136+
<div>
137+
<div style={alignTitle}>
138+
<CalendarMonthIcon sx={{ fontSize: "48px", color: "#95060c" }} />
139+
<Typography
140+
variant="h6"
141+
style={{
142+
fontWeight: "bold",
143+
color: "#95060c",
144+
textAlign: "left",
145+
}}
146+
>
147+
Scheduling
148+
</Typography>
149+
</div>
150+
<Typography variant="h6" style={{fontWeight: "bold"}} gutterBottom >
151+
and Providing ranking priorities of the PAPs considering the
152+
limited fiscal space; and
153+
</Typography>
154+
</div>
155+
156+
{/* Third Section */}
157+
<div style={alignTitle}>
158+
<LaptopIcon sx={{ fontSize: "48px", color: "#95060c" }} />
159+
<Typography
160+
variant="h6"
161+
style={{
162+
fontWeight: "bold",
163+
color: "#95060c",
164+
textAlign: "left",
165+
}}
166+
>
167+
Monitoring
168+
</Typography>
169+
</div>
170+
<Typography variant="h6" style={{fontWeight: "bold"}} gutterBottom>
171+
the identified PAPs until its completion.
172+
</Typography>
173+
</div>
174+
</div>
175+
</div>
176+
177+
{/* Footer */}
178+
<div style={footer}>
179+
<Typography variant="body1" style={body1}>
180+
@BulSUPlanningandDevelopmentOffice
181+
</Typography>
182+
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
183+
<LanguageIcon fontSize="medium" />
184+
<Typography variant="body1" style={body1}>
185+
www.bulsu.edu.ph
186+
</Typography>
187+
</div>
188+
</div>
18189
</div>
190+
19191
);
20192
};
21193

22-
export default Carousel3;
194+
export default Carousel3;

0 commit comments

Comments
 (0)