diff --git a/public/map.svg b/public/map.svg
new file mode 100644
index 0000000..0d625b8
--- /dev/null
+++ b/public/map.svg
@@ -0,0 +1,245 @@
+
diff --git a/src/app/components/During.tsx b/src/app/components/During.tsx
index b448a3d..ff4f6be 100644
--- a/src/app/components/During.tsx
+++ b/src/app/components/During.tsx
@@ -1,7 +1,11 @@
import styled from "styled-components";
import { Section } from "@/app/genericComponents/General";
import { Body, SectionTitle } from "@/app/genericComponents/Typography";
-import { SpacingM, SpacingS } from "@/app/genericComponents/tokens";
+import {
+ MobileBreakpoint,
+ SpacingM,
+ SpacingS,
+} from "@/app/genericComponents/tokens";
import { lora } from "@/app/genericComponents/fonts";
const DuringContainer = styled(Section)`
@@ -33,11 +37,6 @@ const StyledTitle = styled.div`
margin-right: 0;
`;
-const HackUPCColored = styled(StyledTitle)`
- color: #00ffe0;
- margin-left: 0;
-`;
-
const TheMission = styled.div`
display: flex;
flex-direction: column;
@@ -45,6 +44,21 @@ const TheMission = styled.div`
text-align: center;
`;
+const MapImage = styled.img`
+ display: block;
+ margin: 0 auto ${SpacingM};
+ max-width: 100%;
+ height: auto;
+
+ @media (max-width: ${MobileBreakpoint}) {
+ position: relative;
+ width: 100vw;
+ max-width: 100vw;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+`;
+
export default function During() {
return (
@@ -53,10 +67,13 @@ export default function During() {
Coding is the main part of HackUPC, but we have many more activities!
+
+
- THE MISSION:
- HACKUPC
+
+ THE MISSION: HACKUPC
+
Get ready for your weekend mission! This year, we aim for HackUPC to