-
+
+
+
+
+
+
IECEP Cares
+
+ Going beyond academic walls, UP IECEP remains committed to promoting
+ intentional service and active community involvement. Since 2010,
+ IECEP Cares has served as the organization's charity
+ and outreach arm, driven by a shared cause, dedicated to uplifting
+ communities and welfare-oriented institutions through volunteerism
+ and sustainable action.
+
+
Learn More →
+
+
+
+
UP IECEP Day
@@ -33,7 +50,10 @@ import iecepDayPicture from '../../assets/images/projects_iecepday.jpg';
exciting activities and sharing fun moments between the organization's
members to tighten the bond shared as ECE students.
-
Learn More →
+ {/*
Learn More → */}
+
+
+
diff --git a/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss b/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
index b4c1a67..44a3bbb 100644
--- a/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
+++ b/src/components/ProjectsAndCampaigns/projects-and-campaigns.scss
@@ -6,6 +6,7 @@
grid-auto-flow: row;
place-items: center;
scroll-margin-top: 3rem;
+
h2 {
color: $primary;
font-weight: 900;
@@ -21,6 +22,7 @@
margin-bottom: 1rem;
}
+ /* 1. Get Licensed */
.get-licensed {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -63,14 +65,16 @@
}
}
}
- .iecep-day {
+
+ /* 2. IECEP Cares */
+ .iecep-cares {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row;
width: calc(100% - 2 * 12.81rem);
margin-top: 3.56rem;
gap: 3rem;
- .iecep-day-picture {
+ .iecep-cares-picture {
place-self: center start;
width: calc(10 / 12 * 100%);
height: auto;
@@ -81,10 +85,10 @@
height: 100%;
border-radius: 2.5rem;
box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
- object-fit: cover;
+ object-fit: cover;
}
}
- .iecep-day-text {
+ .iecep-cares-text {
place-self: center end;
display: grid;
grid-template-columns: 1fr;
@@ -105,8 +109,54 @@
}
}
}
+
+ /* 3. IECEP Day */
+ .iecep-day {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-auto-flow: row;
+ width: calc(100% - 2 * 12.81rem);
+ margin-top: 3.56rem;
+ gap: 3rem;
+ .iecep-day-text {
+ place-self: center start; /* Changed to start to match Get Licensed layout */
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+
+ p {
+ line-height: 1.6;
+ }
+
+ .learn-more {
+ border-radius: 1.5625rem;
+ background-color: $primary;
+ color: $text-light;
+ text-decoration: none;
+ width: fit-content;
+ padding-inline: 2.25rem;
+ padding-block: 0.81rem;
+ }
+ }
+ .iecep-day-picture {
+ place-self: center end; /* Changed to end to match Get Licensed layout */
+ width: calc(10 / 12 * 100%);
+ height: auto;
+ aspect-ratio: 25 / 16;
+ position: relative;
+ img {
+ width: 100%;
+ height: 100%;
+ border-radius: 2.5rem;
+ box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
+ object-fit: cover;
+ }
+ }
+ }
}
+/* MEDIA QUERIES */
+
@media screen and (max-width: 1024px) {
.projects-and-campaigns-section {
padding-block: 3rem;
@@ -122,6 +172,18 @@
width: 100%;
}
}
+ .iecep-cares {
+ width: calc(100% - 6rem);
+ gap: 2rem;
+ .iecep-cares-text {
+ h3 {
+ font-size: 2.5rem;
+ }
+ }
+ .iecep-cares-picture {
+ width: 100%;
+ }
+ }
.iecep-day {
width: calc(100% - 6rem);
gap: 2rem;
@@ -161,6 +223,24 @@
order: 1;
}
}
+
+ .iecep-cares {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 1rem;
+
+ .iecep-cares-text {
+ order: 2;
+ h3 {
+ margin-bottom: 0;
+ }
+ }
+
+ .iecep-cares-picture {
+ place-self: center;
+ order: 1;
+ }
+ }
+
.iecep-day {
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
@@ -189,6 +269,13 @@
}
}
}
+ .iecep-cares {
+ .iecep-cares-text {
+ h3 {
+ text-align: center;
+ }
+ }
+ }
.iecep-day {
.iecep-day-text {
h3 {
@@ -197,4 +284,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 1d17a43..749201b 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -28,14 +28,14 @@ const Slider = () => {