Skip to content

Commit 7755a62

Browse files
ChampiieeChampiiee
authored
Merge pull request securedeveloper#5 from Planning-and-Development-BULSU/carousel4
Carousel4 - to be continue
2 parents 58f4f83 + 1d2e29a commit 7755a62

File tree

2 files changed

+318
-18
lines changed

2 files changed

+318
-18
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import Carousel6 from './carousel6';
1010
import Carousel7 from './carousel7';
1111

1212
const items = [
13-
{ component: <Carousel1 />, alt: 'Carousel 1' },
14-
{ component: <Carousel2 />, alt: 'Carousel 2' },
15-
{ component: <Carousel3 />, alt: 'Carousel 3' },
13+
// { component: <Carousel1 />, alt: 'Carousel 1' },
14+
// { component: <Carousel2 />, alt: 'Carousel 2' },
15+
// { component: <Carousel3 />, alt: 'Carousel 3' },
1616
{ component: <Carousel4 />, alt: 'Carousel 4' },
17-
{ component: <Carousel5 />, alt: 'Carousel 5' },
18-
{ component: <Carousel6 />, alt: 'Carousel 6' },
19-
{ component: <Carousel7 />, alt: 'Carousel 7' },
17+
// { component: <Carousel5 />, alt: 'Carousel 5' },
18+
// { component: <Carousel6 />, alt: 'Carousel 6' },
19+
// { component: <Carousel7 />, alt: 'Carousel 7' },
2020
];
2121

2222
const BulsuPips101 = () => {

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

Lines changed: 312 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,322 @@
1-
import React from 'react';
1+
import { Typography } from "@mui/material";
2+
import { display, margin, textAlign } from "@mui/system";
3+
import React from "react";
4+
import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
5+
import { Directions } from "@material-ui/icons";
6+
import GroupsOutlinedIcon from "@mui/icons-material/GroupsOutlined";
7+
import ClassOutlinedIcon from "@mui/icons-material/ClassOutlined";
8+
import ApiOutlinedIcon from "@mui/icons-material/ApiOutlined";
9+
import { Api } from "@mui/icons-material";
10+
import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
11+
import TipsAndUpdatesOutlinedIcon from "@mui/icons-material/TipsAndUpdatesOutlined";
12+
import LanguageIcon from "@mui/icons-material/Language";
13+
import TaskOutlinedIcon from "@mui/icons-material/TaskOutlined";
14+
import FactCheckOutlinedIcon from "@mui/icons-material/FactCheckOutlined";
15+
import FindInPageOutlinedIcon from "@mui/icons-material/FindInPageOutlined";
16+
import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
17+
import CoPresentOutlinedIcon from "@mui/icons-material/CoPresentOutlined";
18+
import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined';
19+
import MonetizationOnOutlinedIcon from '@mui/icons-material/MonetizationOnOutlined';
220

321
const Carousel4 = () => {
422
const styles = {
5-
backgroundColor: 'green',
6-
width: '100%',
7-
height: '100%',
8-
display: 'flex',
9-
justifyContent: 'center',
10-
alignItems: 'center',
11-
color: 'white',
12-
fontSize: '24px',
23+
backgroundColor: "green",
24+
width: "100%",
25+
height: "100%",
26+
display: "flex",
27+
justifyContent: "center",
28+
alignItems: "center",
29+
color: "white",
30+
fontSize: "24px",
31+
};
32+
const logo = {
33+
height: "100%",
34+
maxWidth: "100%",
35+
maxHeight: "120px",
36+
justifyContent: "center",
37+
alignItems: "center",
38+
};
39+
const header4 = {
40+
display: "flex",
41+
justifyContent: "center",
42+
alignItems: "center",
43+
backgroundColor: "#ffc001",
44+
color: "white", // Bold text
45+
fontStyle: "italic",
46+
};
47+
48+
const typo= {
49+
display:"flex",
50+
};
51+
const icon = {
52+
display: "flex",
53+
height: "40px",
54+
width: "40px",
55+
margin: "10px 20px 20px 0",
56+
};
57+
const span = {
58+
marginLeft: "10px",
59+
};
60+
const footer = {
61+
display: "flex",
62+
justifyContent: "space-between",
63+
alignItems: "center",
64+
backgroundColor: "#800000",
65+
color: "white",
66+
fontWeight: "bold",
1367
};
1468

1569
return (
16-
<div style={styles}>
17-
Carousel 4
70+
<div>
71+
<div style={header4}>
72+
<div>
73+
<img
74+
src="./logo192.png"
75+
style={{ ...logo, marginRight: "50px", marginLeft: "50px" }}
76+
alt="logo"
77+
/>
78+
</div>
79+
<div>
80+
<Typography
81+
variant="h5"
82+
style={{
83+
fontWeight: "bold",
84+
marginBottom: "0",
85+
}}
86+
>
87+
<span style={{ color: "#25408f" }}>BulSUPIPs </span>101
88+
</Typography>
89+
<Typography
90+
variant="h2"
91+
style={{
92+
fontWeight: "bold",
93+
color: "#25408f",
94+
marginTop: "0",
95+
}}
96+
>
97+
ROLES
98+
</Typography>
99+
</div>
100+
<div>
101+
<ManageAccountsIcon
102+
sx={{
103+
width: "152px",
104+
height: "152px",
105+
marginRight: "50px",
106+
marginLeft: "50px",
107+
}}
108+
/>
109+
</div>
110+
</div>
111+
112+
<div
113+
style={{
114+
display: "flex",
115+
gap: "20px",
116+
height:"550px",
117+
width: "100%",
118+
alignItems: "stretch",
119+
}}
120+
>
121+
{/* Focal Person */}
122+
<div
123+
style={{
124+
flex: 1,
125+
display: "flex",
126+
flexDirection: "column",
127+
height:"350px",
128+
margin: "125px 0 125px 25px",
129+
borderRight: "5px solid #95060c", // Divider between sections
130+
}}
131+
>
132+
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
133+
<Typography variant="h5" style={{ margin: 0, color: "#25408f" , fontWeight:"bold" }}gutterBottom>
134+
Focal Person</Typography>
135+
</div>
136+
137+
<div
138+
style={{
139+
display: "grid",
140+
gridTemplateColumns: "repeat(2, 1fr)",
141+
textAlign: "justify",
142+
}}
143+
>
144+
<div style={{ display: "flex", marginRight: "20px" }}>
145+
<GroupsOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
146+
<Typography>
147+
<span style={{ fontWeight: "bold" }}>Participate</span> in the
148+
annual local workshop for Investment Programming.
149+
</Typography>
150+
</div>
151+
<div style={{ display: "flex" ,marginRight:"20px"}}>
152+
<TipsAndUpdatesOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
153+
<Typography>
154+
<span style={{ fontWeight: "bold" }}>Update</span> PAPs in the
155+
IP on an annual basis or as necessary.
156+
</Typography>
157+
</div>
158+
<div style={{ display: "flex", marginRight: "20px" }}>
159+
<ApiOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
160+
<Typography>
161+
<span style={{ fontWeight: "bold" }}>Collect</span> PAPS of
162+
their respective office and create their own IP.
163+
</Typography>
164+
</div>
165+
<div style={{ display: "flex", marginRight:"20px" }}>
166+
<PhoneForwardedOutlinedIcon sx={{ ...icon, marginTop:"20px", color: "#25408f" }} />
167+
<Typography>
168+
<span style={{ fontWeight: "bold" }}>Answer</span> queries or
169+
comply with the additional requirements requested by the
170+
Planning and Development Office (PDO) for the evaluation of the
171+
project.
172+
</Typography>
173+
</div>
174+
<div style={{ display: "flex", marginRight: "20px" }}>
175+
<ClassOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
176+
<Typography>
177+
<span style={{ fontWeight: "bold" }}>Submit</span> the
178+
College/Office IP to the Planning and Development Office on or
179+
before the set deadline of submission
180+
</Typography>
181+
</div>
182+
</div>
183+
</div>
184+
185+
{/* Planning & Development Office */}
186+
<div
187+
style={{
188+
flex: 1,
189+
display: "flex",
190+
flexDirection: "column",
191+
margin: "125px 0 125px 0",
192+
height:"350px",
193+
borderRight: "5px solid #95060c", // Divider between sections
194+
}}
195+
>
196+
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
197+
<Typography variant="h5" style={{ margin: 0, textAlign: "left", color: "#95060c" , fontWeight:"bold" }} gutterBottom>
198+
Planning & Development Office
199+
</Typography>
200+
</div>
201+
202+
<div
203+
style={{
204+
display: "grid",
205+
gridTemplateColumns: "repeat(2, 1fr)",
206+
textAlign: "justify",
207+
}}
208+
>
209+
<div style={{ display: "flex", marginRight: "20px" }}>
210+
<TaskOutlinedIcon sx={{ ...icon, color: "#95060c" }} />
211+
<Typography>
212+
<span style={{ fontWeight: "bold" }}>Validate</span> the
213+
completeness of the submitted IP of the colleges and offices.
214+
</Typography>
215+
</div>
216+
<div style={{ display: "flex",marginRight:"20px" }}>
217+
<CampaignOutlinedIcon sx={{ ...icon, color: "#95060c" }} />
218+
<Typography>
219+
<span style={{ fontWeight: "bold" }}>Give Feedback</span> to the
220+
College/Office Focal Person on the status of their submission.
221+
</Typography>
222+
</div>
223+
<div style={{ display: "flex", marginRight: "20px" }}>
224+
<FactCheckOutlinedIcon sx={{ ...icon, color: "#95060c" }} />
225+
<Typography>
226+
<span style={{ fontWeight: "bold" }}>Evaluate</span> the
227+
proposed PAPs and create the University’s own Investment
228+
Program.
229+
</Typography>
230+
</div>
231+
<div style={{ display: "flex",marginRight:"20px" }}>
232+
<CoPresentOutlinedIcon sx={{ ...icon, color: "#95060c" }} />
233+
<Typography>
234+
<span style={{ fontWeight: "bold" }}>Conduct</span> annual
235+
training/seminar regarding the IP updating.
236+
</Typography>
237+
</div>
238+
<div style={{ display: "flex", marginRight: "20px" }}>
239+
<FindInPageOutlinedIcon sx={{ ...icon, color: "#95060c" }} />
240+
<Typography>
241+
<span style={{ fontWeight: "bold" }}>Seek</span> the approval of
242+
the 5-year IP and the annual IP of the University from the
243+
Governing Board.
244+
</Typography>
245+
</div>
246+
</div>
247+
</div>
248+
249+
{/* Vice President for Administration & Finance */}
250+
<div
251+
style={{
252+
display: "flex",
253+
flexDirection: "column",
254+
height:"350px",
255+
width:"400px",
256+
margin: "125px 25px 125px 0px",
257+
}}
258+
>
259+
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
260+
<Typography variant="h5" style={{ margin: 0, textAlign: "left", color: "#25408f", fontWeight:"bold"}}gutterBottom>
261+
Vice President for <br />
262+
Administration & Finance
263+
</Typography>
264+
</div>
265+
266+
<div
267+
style={{
268+
display: "flex",
269+
flexDirection: "column",
270+
flex: 1,
271+
marginBottom:"20px",
272+
textAlign: "justify",
273+
}}
274+
>
275+
<div
276+
style={{
277+
display: "flex",
278+
alignItems: "center",
279+
marginBottom: "0",
280+
}}
281+
>
282+
<MonetizationOnOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
283+
<Typography>
284+
<span style={{ fontWeight: "bold" }}>Include</span> the IP in
285+
the Financial Sustainability Plan of the University through the
286+
Office of Financial.
287+
</Typography>
288+
</div>
289+
290+
<div
291+
style={{
292+
display: "flex",
293+
alignItems: "center",
294+
marginBottom: "0",
295+
}}
296+
>
297+
<ShieldOutlinedIcon sx={{ ...icon, color: "#25408f" }} />
298+
<Typography>
299+
<span style={{ fontWeight: "bold" }}>Ensure</span> that only the
300+
priority PAPs included in the IP are funded/awarded by the
301+
University.
302+
</Typography>
303+
</div>
304+
</div>
305+
</div>
306+
</div>
307+
308+
{/* footer */}
309+
<div style={footer}>
310+
<span style={{margin:"20px"}}>@BulSUPlanningandDevelopmentOffice</span>
311+
312+
{/* Wrap the website & icon in a flex container */}
313+
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
314+
<LanguageIcon fontSize="medium" />
315+
<span style={{margin:"20px"}}>www.bulsu.edu.ph</span>
316+
</div>
317+
</div>
18318
</div>
19319
);
20320
};
21321

22-
export default Carousel4;
322+
export default Carousel4;

0 commit comments

Comments
 (0)