diff --git a/src/app/components/During.tsx b/src/app/components/During.tsx
index 5a52ba3b..c82a341c 100644
--- a/src/app/components/During.tsx
+++ b/src/app/components/During.tsx
@@ -31,7 +31,7 @@ const TextWrapper = styled.div`
justify-content: center;
gap: ${SpacingS};
display: inline-flex;
- margin-top: ${SpacingM};
+ margin-top: ${SpacingS};
margin-bottom: ${SpacingS};
`;
@@ -46,6 +46,15 @@ const TheMission = styled.div`
flex-direction: column;
position: relative;
text-align: center;
+ padding: 0 150px 0 150px;
+
+ @media (min-width: ${MobileBreakpoint}) and (max-width: 1000px) {
+ padding: 0 15% 0 15%;
+ }
+
+ @media (max-width: ${MobileBreakpoint}) {
+ padding: 0;
+ }
`;
const MapImageBase = styled.img`
@@ -79,6 +88,76 @@ const DesktopMapImage = styled(MapImageBase)`
}
`;
+export const RibbonTitle = styled(SectionTitle)`
+ position: relative;
+ color: #000000;
+ width: fit-content;
+ margin: 0 auto 45px auto;
+ padding: 8px 32px 24px 32px;
+ font-size: 32px;
+ background-color: rgba(238, 228, 194, 1);
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+
+ /* Left */
+ &::before {
+ content: "";
+ position: absolute;
+ bottom: -20px;
+ left: -100px;
+ width: 40%;
+ height: 80%;
+ background-color: #a19673ff;
+ z-index: -1;
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20% 50%);
+ }
+
+ /* Right */
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: -20px;
+ right: -100px;
+ width: 40%;
+ height: 80%;
+ background-color: #a19673ff;
+ z-index: -1;
+ clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%);
+ }
+
+ @media (max-width: 1000px and min-width: ${MobileBreakpoint}) {
+ &::before {
+ left: -100px;
+ width: 50%;
+ height: 50%;
+ }
+
+ /* Right */
+ &::after {
+ right: -100px;
+ width: 50%;
+ height: 50%;
+ }
+ }
+ @media (max-width: ${MobileBreakpoint}) {
+ &::before {
+ display: none;
+ left: -75px;
+ width: 50%;
+ height: 60%;
+ }
+
+ /* Right */
+ &::after {
+ display: none;
+ right: -75px;
+ width: 50%;
+ height: 60%;
+ }
+ }
+`;
+
export default function During() {
return (
@@ -93,17 +172,19 @@ export default function During() {
-
-
- THE MISSION: HACKUPC
-
-
-
- Your weekend quest awaits! This year, HackUPC becomes a medieval
- adventure filled with challenges to conquer. Forge your own path by
- overcoming mighty trials, and see if you can rise as a true hero. Will
- your legend be told in generations?
-
+
+
+
+ THE MISSION: HACKUPC
+
+
+
+ Your weekend quest awaits! This year, HackUPC becomes a medieval
+ adventure filled with challenges to conquer. Forge your own path by
+ overcoming mighty trials, and see if you can rise as a true hero.
+ Will your legend be told in generations?
+
+
);
diff --git a/src/app/components/SponsorsAndPartners.tsx b/src/app/components/SponsorsAndPartners.tsx
index d538bb9a..77487b42 100644
--- a/src/app/components/SponsorsAndPartners.tsx
+++ b/src/app/components/SponsorsAndPartners.tsx
@@ -191,24 +191,12 @@ export default function SponsorsAndPartners() {
/>
-
+
-
+