Skip to content

Commit 220cef5

Browse files
driancrzdriancrz
committed
Updated carousel 6 for PR
1 parent 06f6ce0 commit 220cef5

File tree

1 file changed

+108
-86
lines changed

1 file changed

+108
-86
lines changed

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

Lines changed: 108 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import SearchIcon from "@mui/icons-material/Search";
33
import { Typography } from "@mui/material";
44
import AdsClickIcon from "@mui/icons-material/AdsClick";
55
import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
6-
import LanguageIcon from '@mui/icons-material/Language';
7-
import LaptopIcon from '@mui/icons-material/Laptop';
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";
810

911
const Carousel3 = () => {
1012
const logo = {
@@ -23,6 +25,7 @@ const Carousel3 = () => {
2325
alignItems: "center",
2426
justifyContent: "center",
2527
fontStyle: "italic",
28+
marginBottom: "20px",
2629
};
2730

2831
const body = {
@@ -31,142 +34,161 @@ const Carousel3 = () => {
3134
alignItems: "center",
3235
textAlign: "justify",
3336
flexDirection: "column",
34-
marginTop: "30px",
37+
width: "100%",
38+
padding: "20px",
3539
};
3640

37-
const body1={
41+
const body1 = {
3842
fontWeight: "bold",
39-
}
43+
};
4044

4145
const targetsContainer = {
4246
display: "flex",
43-
flexWrap: "wrap",
44-
justifyContent: "center",
45-
gap: "10px",
46-
width:"100%",
47-
width: "80%",
48-
margin: "0 auto",
49-
marginTop: "40px",
50-
};
51-
52-
const targetBox = {
53-
display: "flex",
54-
alignItems: "flex-start",
55-
gap: "15px",
5647
flexDirection: "row",
57-
justifyContent: "center",
58-
width: "30%",
59-
maxWidth: "500px",
60-
minWidth: "300px",
48+
justifyContent: "space-between",
6149
};
6250

63-
const typographyStyle = {
64-
fontWeight: "bold",
51+
const targetBox = {
52+
display: "flex",
53+
flexDirection: "column",
54+
flexwrap: "wrap",
6555
color: "#25408f",
56+
width: "100%",
6657
textAlign: "justify",
67-
maxWidth: "100%",
58+
padding: "10px",
6859
};
69-
60+
7061
const footer = {
7162
display: "flex",
72-
justifyContent: "space-between",
63+
justifyContent: "space-between",
7364
alignItems: "center",
7465
backgroundColor: "#95060c",
7566
color: "white",
7667
fontSize: "18px",
7768
fontWeight: "bold",
7869
padding: "10px",
79-
marginTop: "50px",
8070
};
81-
82-
71+
72+
const alignTitle = {
73+
display: "flex",
74+
flexDirection: "row",
75+
}
76+
8377
return (
8478
<div>
8579
<div style={header}>
8680
<div>
87-
<img
88-
src="./logo192.png"
89-
alt="BulSU Logo"
90-
style={logo}
91-
/>
81+
<img src="./logo192.png" alt="BulSU Logo" style={logo} />
9282
</div>
9383
<div>
94-
<Typography variant="h5" style={{ fontWeight: "bold"}}>
84+
<Typography variant="h5" style={{ fontWeight: "bold" }}>
9585
<span style={{ color: "#ffc001" }}>BulSU PIPs </span>101
9686
</Typography>
97-
<Typography variant="h2" style={{ fontWeight: "bold"}}>
87+
<Typography variant="h2" style={{ fontWeight: "bold" }}>
9888
OBJECTIVES
9989
</Typography>
10090
</div>
10191
<div>
102-
<SearchIcon sx={{ fontSize: "8rem", marginLeft: "20px", color: "white" }} />
92+
<SearchIcon
93+
sx={{ fontSize: "8rem", marginLeft: "20px", color: "white" }}
94+
/>
10395
</div>
10496
</div>
10597

10698
<div style={body}>
107-
<Typography variant="h6">
108-
<span style={{ color: "#000000", fontWeight: "bold"}}>
109-
The BulSU Investment Program (BulSU-IP) aims to contribute in achieving targets set in
110-
the 2021-2025 Strategic Plan through:
111-
</span>
112-
</Typography>
113-
114-
115-
{/* Container for three target sections */}
116-
<div style={targetsContainer}>
117-
{/* First Section */}
118-
<div style={{...targetBox, marginRight:"10px"}}>
119-
<AdsClickIcon sx={{ fontSize: "48px", color: "#95060c"}} />
120-
<div>
121-
<Typography variant="h6" style={{ fontWeight: "bold", color: "#95060c", textAlign: "left" }}>
122-
Identifying
123-
</Typography>
124-
<Typography variant="h6" style={typographyStyle}>
125-
the proposed priority PAPs to be implemented for funding through the General
126-
Appropriations Act (GAA), Income Fund, or through a Public-Private Partnership (PPP) or
127-
Joint Ventures (JV);
128-
</Typography>
129-
</div>
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>
130106
</div>
131107

132-
{/* Second Section */}
133-
<div style={targetBox}>
134-
<CalendarMonthIcon sx={{ fontSize: "48px", color: "#95060c"}} />
108+
{/* Container for three target sections */}
109+
<div style={targetsContainer}>
110+
{/* First Section */}
111+
<div style={targetBox}>
135112
<div>
136-
<Typography variant="h6" style={{ fontWeight: "bold", color: "#95060c", textAlign: "left" }}>
137-
Scheduling
138-
</Typography>
139-
<Typography variant="h6" style={typographyStyle}>
140-
and Providing ranking priorities of the PAPs considering the limited fiscal space; and
141-
</Typography>
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>
142132
</div>
143-
</div>
144133

145-
{/* Third Section */}
146-
<div style={targetBox}>
147-
<LaptopIcon sx={{ fontSize: "48px", color: "#95060c" }} />
148-
<div>
149-
<Typography variant="h6" style={{ fontWeight: "bold", color: "#95060c", textAlign: "left" }}>
150-
Monitoring
151-
</Typography>
152-
<Typography variant="h6" style={typographyStyle}>
153-
the identified PAPs until its completion.
154-
</Typography>
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>
155174
</div>
156175
</div>
157-
</div>
158-
</div>
159176

160177
{/* Footer */}
161178
<div style={footer}>
162-
<Typography variant="body1" style={body1}>@BulSUPlanningandDevelopmentOffice</Typography>
179+
<Typography variant="body1" style={body1}>
180+
@BulSUPlanningandDevelopmentOffice
181+
</Typography>
163182
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
164183
<LanguageIcon fontSize="medium" />
165-
<Typography variant="body1" style={body1}>www.bulsu.edu.ph</Typography>
184+
<Typography variant="body1" style={body1}>
185+
www.bulsu.edu.ph
186+
</Typography>
166187
</div>
167188
</div>
168189
</div>
190+
169191
);
170192
};
171193

172-
export default Carousel3;
194+
export default Carousel3;

0 commit comments

Comments
 (0)