diff --git a/public/maons_mobile.svg b/public/maons_mobile.svg
index 9f21ae3e..a06b7dc8 100644
--- a/public/maons_mobile.svg
+++ b/public/maons_mobile.svg
@@ -17,7 +17,7 @@
-
+
@@ -33,7 +33,7 @@
-
+
@@ -49,7 +49,7 @@
-
+
@@ -65,7 +65,7 @@
-
+
@@ -81,7 +81,7 @@
-
+
@@ -96,7 +96,7 @@
-
+
@@ -112,7 +112,7 @@
-
+
@@ -128,7 +128,7 @@
-
+
@@ -144,7 +144,7 @@
-
+
@@ -160,7 +160,7 @@
-
+
@@ -176,7 +176,7 @@
-
+
@@ -192,7 +192,7 @@
-
+
@@ -209,871 +209,871 @@
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1087,7 +1087,7 @@
-
+
@@ -1103,7 +1103,7 @@
-
+
@@ -1119,7 +1119,7 @@
-
+
@@ -1134,7 +1134,7 @@
-
+
@@ -1150,7 +1150,7 @@
-
+
@@ -1166,7 +1166,7 @@
-
+
@@ -1182,7 +1182,7 @@
-
+
@@ -1197,7 +1197,7 @@
-
+
@@ -1213,7 +1213,7 @@
-
+
@@ -1229,7 +1229,7 @@
-
+
@@ -1244,7 +1244,7 @@
-
+
@@ -1260,7 +1260,7 @@
-
+
@@ -1275,7 +1275,7 @@
-
+
@@ -1291,7 +1291,7 @@
-
+
@@ -1299,7 +1299,6 @@
-
@@ -1307,7 +1306,7 @@
-
+
@@ -1323,7 +1322,7 @@
-
+
@@ -1338,7 +1337,7 @@
-
+
@@ -1353,7 +1352,7 @@
-
+
@@ -1369,7 +1368,7 @@
-
+
@@ -1385,7 +1384,7 @@
-
+
@@ -1401,7 +1400,7 @@
-
+
@@ -1417,7 +1416,7 @@
-
+
@@ -1432,7 +1431,7 @@
-
+
@@ -1448,7 +1447,7 @@
-
+
@@ -1464,7 +1463,7 @@
-
+
@@ -1480,7 +1479,7 @@
-
+
@@ -1496,7 +1495,7 @@
-
+
@@ -1512,7 +1511,7 @@
-
+
@@ -1527,7 +1526,7 @@
-
+
@@ -1543,7 +1542,7 @@
-
+
@@ -1559,7 +1558,7 @@
-
+
@@ -1575,7 +1574,7 @@
-
+
@@ -1591,7 +1590,7 @@
-
+
@@ -1606,7 +1605,7 @@
-
+
@@ -1622,7 +1621,7 @@
-
+
@@ -1638,7 +1637,7 @@
-
+
@@ -1654,7 +1653,7 @@
-
+
@@ -1669,7 +1668,7 @@
-
+
@@ -1685,7 +1684,7 @@
-
+
@@ -1701,7 +1700,7 @@
-
+
@@ -1717,7 +1716,7 @@
-
+
@@ -1733,7 +1732,7 @@
-
+
@@ -1749,7 +1748,7 @@
-
+
@@ -1765,7 +1764,7 @@
-
+
@@ -1781,7 +1780,7 @@
-
+
@@ -1797,7 +1796,7 @@
-
+
@@ -1813,7 +1812,7 @@
-
+
@@ -1829,7 +1828,7 @@
-
+
@@ -1845,7 +1844,7 @@
-
+
@@ -1861,7 +1860,7 @@
-
+
@@ -1876,7 +1875,7 @@
-
+
@@ -1892,7 +1891,7 @@
-
+
@@ -1908,7 +1907,7 @@
-
+
@@ -1924,7 +1923,7 @@
-
+
@@ -1940,7 +1939,7 @@
-
+
@@ -1956,7 +1955,7 @@
-
+
@@ -1972,7 +1971,7 @@
-
+
@@ -1988,7 +1987,7 @@
-
+
@@ -2003,7 +2002,7 @@
-
+
@@ -2019,7 +2018,7 @@
-
+
@@ -2035,7 +2034,7 @@
-
+
@@ -2051,7 +2050,7 @@
-
+
@@ -2067,7 +2066,7 @@
-
+
@@ -2083,7 +2082,7 @@
-
+
@@ -2099,7 +2098,7 @@
-
+
@@ -2114,7 +2113,7 @@
-
+
@@ -2130,7 +2129,7 @@
-
+
@@ -2146,7 +2145,7 @@
-
+
@@ -2162,7 +2161,7 @@
-
+
@@ -2178,7 +2177,7 @@
-
+
@@ -2194,7 +2193,7 @@
-
+
@@ -2210,7 +2209,7 @@
-
+
@@ -2226,7 +2225,7 @@
-
+
@@ -2242,7 +2241,7 @@
-
+
@@ -2258,7 +2257,7 @@
-
+
@@ -2289,7 +2288,7 @@
-
+
@@ -2305,7 +2304,7 @@
-
+
@@ -2321,7 +2320,7 @@
-
+
@@ -2346,6 +2345,7 @@
+
diff --git a/src/app/components/During.tsx b/src/app/components/During.tsx
index 96714523..5a52ba3b 100644
--- a/src/app/components/During.tsx
+++ b/src/app/components/During.tsx
@@ -14,6 +14,10 @@ const DuringContainer = styled(Section)`
z-index: 1;
`;
+const StyledSectionTitle = styled(SectionTitle)`
+ margin-bottom: 0px;
+`;
+
const StyledBody = styled(Body)`
display: flex;
flex-direction: column;
@@ -61,6 +65,12 @@ const MobileMapImage = styled(MapImageBase)`
@media (min-width: ${MobileBreakpoint}) {
display: none;
}
+
+ @media (max-width: ${MobileBreakpoint}) {
+ width: 100vw;
+ margin-left: calc(50% - 50vw);
+ margin-right: calc(50% - 50vw);
+ }
`;
const DesktopMapImage = styled(MapImageBase)`
@@ -72,7 +82,9 @@ const DesktopMapImage = styled(MapImageBase)`
export default function During() {
return (
- DURING THE EVENT
+
+ DURING THE EVENT
+
Coding is the main part of HackUPC, but we have many more activities!
diff --git a/src/app/components/FAQs.tsx b/src/app/components/FAQs.tsx
index 373a19d6..105a8c03 100644
--- a/src/app/components/FAQs.tsx
+++ b/src/app/components/FAQs.tsx
@@ -76,6 +76,7 @@ const ColumnsQuestions = styled.div`
@media (max-width: ${MobileBreakpoint}) {
width: 100%;
+ gap: 0px;
}
`;
@@ -86,6 +87,12 @@ const QuestionsBlock = styled.div`
gap: ${SpacingS};
`;
+const ApplicationQuestionsBlock = styled(QuestionsBlock)`
+ @media (max-width: ${MobileBreakpoint}) {
+ padding-top: 0px;
+ }
+`;
+
const Question = styled.div`
display: flex;
flex-direction: column;
@@ -404,10 +411,10 @@ export default function FAQs() {
-
+
Applications
{applications_faqs.map(renderFaq)}
-
+
Teams
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 02d5100b..d435274d 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -22,8 +22,9 @@ import {
} from "@fortawesome/free-brands-svg-icons";
const FooterWrapper = styled.div`
- width: 100vw;
+ width: 100%;
background-color: #65936d;
+ margin-top: -1px;
`;
const SocialsAndOthers = styled.div`
diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index 4a3d2291..ac87153b 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -174,18 +174,27 @@ const CharactersSection = styled.div`
const RibbonContainer = styled.div`
position: absolute;
- top: -120px;
+ top: -130px;
left: 50%;
transform: translateX(-50%);
width: 100%;
display: flex;
justify-content: center;
+
+ @media (max-width: ${MobileBreakpoint}) {
+ top: -70px;
+ }
`;
const RibbonImageWrapper = styled.div`
position: relative;
width: clamp(320px, 95vw, 620px);
aspect-ratio: 45 / 8;
+
+ @media (max-width: ${MobileBreakpoint}) {
+ width: clamp(360px, 100vw, 620px);
+ aspect-ratio: 45 / 6;
+ }
`;
const CharacterGrid = styled.div`
@@ -195,7 +204,7 @@ const CharacterGrid = styled.div`
justify-content: center;
@media (max-width: ${MobileBreakpoint}) {
- gap: 70px;
+ gap: 40px;
margin-top: 220px;
}
`;
@@ -218,8 +227,8 @@ const CharacterCard = styled.div`
}
@media (max-width: ${MobileBreakpoint}) {
- width: 42%;
- max-width: 150px;
+ width: 150px;
+ flex: 0 0 150px;
}
`;
@@ -252,12 +261,22 @@ const ComingSoon = styled.div`
25% 0%,
10% 12%
);
+
+ @media (max-width: ${MobileBreakpoint}) {
+ inset: auto 0 0 0;
+ height: 85%;
+ border-top-left-radius: 60px;
+ border-top-right-radius: 60px;
+ letter-spacing: 1px;
+ font-size: 14px;
+ }
`;
const StackedImages = styled.div`
position: relative;
width: 100%;
height: 230px;
+ flex-shrink: 0;
display: flex;
justify-content: center;
align-items: flex-end;
@@ -275,6 +294,7 @@ const CharacterImg = styled(Image)`
position: relative;
z-index: 2;
width: 70%;
+ height: auto;
margin-bottom: 30px;
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
`;
diff --git a/src/app/components/ThroughTheYears.tsx b/src/app/components/ThroughTheYears.tsx
index cdbc186d..f4d93806 100644
--- a/src/app/components/ThroughTheYears.tsx
+++ b/src/app/components/ThroughTheYears.tsx
@@ -422,10 +422,10 @@ export default function ThroughTheYears() {
-
+
diff --git a/src/app/genericComponents/EmblaCarousel.tsx b/src/app/genericComponents/EmblaCarousel.tsx
index 3c665745..3c814a84 100644
--- a/src/app/genericComponents/EmblaCarousel.tsx
+++ b/src/app/genericComponents/EmblaCarousel.tsx
@@ -9,6 +9,7 @@ import styled from "styled-components";
import Image from "next/image";
import Link from "next/link";
import useEmblaCarousel from "embla-carousel-react";
+import { MaxScreenSize } from "./tokens";
type Edition = {
url: string;
@@ -23,8 +24,9 @@ type PropType = {
const Embla = styled.div`
position: relative;
display: flex;
- max-width: 100%;
- margin: 0 auto;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
padding-top: 20px;
background-color: #65936d;
--slide-spacing: 1rem;
@@ -37,6 +39,8 @@ const Embla = styled.div`
const EmblaViewport = styled.div`
overflow: hidden;
+ max-width: ${MaxScreenSize};
+ width: 100%;
`;
const EmblaContainer = styled.div`
@@ -80,6 +84,16 @@ const ArrowButton = styled.button`
justify-content: center;
`;
+const RightArrowButton = styled(ArrowButton)`
+ margin-left: 10px;
+ margin-right: 20px;
+`;
+
+const LeftArrowButton = styled(ArrowButton)`
+ margin-left: 20px;
+ margin-right: 10px;
+`;
+
const EmblaCarousel: React.FC = ({ slides, options }) => {
const [emblaRef, emblaApi] = useEmblaCarousel(options, []);
@@ -112,14 +126,14 @@ const EmblaCarousel: React.FC = ({ slides, options }) => {
return (
-
+
-
+
{slides.map((edition, index) => (
@@ -147,14 +161,14 @@ const EmblaCarousel: React.FC = ({ slides, options }) => {
))}
-
+
-
+
);
};
diff --git a/src/app/genericComponents/General.tsx b/src/app/genericComponents/General.tsx
index 87909591..152ae811 100644
--- a/src/app/genericComponents/General.tsx
+++ b/src/app/genericComponents/General.tsx
@@ -5,6 +5,7 @@ import {
MobileBreakpoint,
SpacingL,
SpacingM,
+ SpacingS,
} from "@/app/genericComponents/tokens";
interface SectionProps {
@@ -22,7 +23,7 @@ export const SectionBackground = styled.div`
`;
export const Section = styled.div`
- padding: ${SpacingL};
+ padding: ${SpacingM};
display: flex;
flex-direction: column;
align-items: center;
@@ -39,7 +40,7 @@ export const Section = styled.div`
export const WhiteContainer = styled.div`
background-color: rgba(255, 255, 255, 0.51);
border-radius: 10px;
- padding: ${SpacingM};
+ padding: ${SpacingS};
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;