Feat/mobile design

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "mchacks12",
+  "name": "mchacks13",
   "private": true,
   "description": "McHacks website",
   "version": "1.0.0",

src/components/About/About.jsx

@@ -8,17 +8,18 @@ const About = ({ scrollRef }) => (
   <Container ref={scrollRef} style={{}}>
     <Content>
       <Text>
-        <h1>Dream, develop, deploy!</h1>
+        <h1>Code That Casts Spells</h1>
         <p>
-          For 24 hours, over 500 of the boldest young minds come 
-          together at McGill University for a jam-packed weekend 
-          of beginner-to-pro workshops, networking, and epic hacking.
+          For 24 enchanting hours, McGill transforms into 
+          a realm of imagination and innovation. Over 500 
+          curious minds will gather under one roof, casting 
+          spells of creativity through code, design, and daring ideas. 
         </p>
         <p>
-          Whether you're writing your first line of code, playing around
-          with APIs, or building the next blockchain, McHacks is the place 
-          for you. We'll see you this January at the 12th annual rendition 
-          of Canada's original collegiate hackathon!
+          Whether you're summoning your first "Hello, World!", brewing APIs in your cauldron, 
+          or crafting the next big tech potion, McHacks is your very own playground.
+          Join us for the 13th edition of Canada’s most magical hackathon – and bring 
+          your ideas to life, one line of code at a time.
         </p>
       </Text>
     </Content>

src/components/About/Container.jsx

@@ -1,4 +1,5 @@
 import styled from "styled-components"
+import * as styleVars from "../variable"
 
 export const Container = styled.section`
   position: relative;
@@ -17,6 +18,16 @@ export const Container = styled.section`
     margin-top: 50px;
   }
 
+  @media screen and (max-width: ${styleVars.xsUp}) {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    justify-self: center;
+    margin-top: 20px;
+    width: 80%;
+    right: 0px;
+  }
+
 `
 
 export default Container

src/components/About/Content.jsx

@@ -28,4 +28,9 @@ export const Content = styled.div`
   @media only screen and (max-width: ${styleVars.smUp}) {
     padding: 0;
   }
+
+  @media only screen and (max-width: ${styleVars.xsUp}) {
+    padding: 10px;
+    gap: 30px;
+  }
 `

src/components/About/Text.jsx

@@ -33,7 +33,22 @@ export const Text = styled.div`
   }
 
   @media only screen and (max-width: ${styleVars.xsUp}) {
-    padding: 20px;
+    padding: 0px;
+
+    h1 {
+      font-size: 17px;
+      font-style: italic;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: -0.85px;
+    }
+    p {
+      padding: 0px;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
   }
 `
 

src/components/FAQ/Container.jsx

@@ -69,6 +69,7 @@ const Container = styled.section`
       .question {
         color: ${styleVars.m12DarkestTeal};
       }
+    }
   }
 
   @media only screen and (max-width: 1000px) {
@@ -80,6 +81,13 @@ const Container = styled.section`
     height: 200px;
   }
 
+  @media screen and (max-width: ${styleVars.xsUp}) {
+    margin-top: 20px !important;
+    right: 0px !important;
+    height: auto;
+
+  }
+
   &.hidden {
     display: none !important;
   }

src/components/FAQ/FAQ.jsx

@@ -14,32 +14,32 @@ const FAQ = ({ scrollRef }) => (
         <div className="questions">
           <QuestionGroup>
             <Question question="What is a hackathon?">
-              A hackathon is a social coding event where programmers, designers,
-              and developers collaborate to solve a problem.
+              A hackathon is a 24-hour adrenaline rush where creativity meets code! It’s a social coding 
+              event where programmers, designers, and developers team up to solve real-world challenges.
+              At McHacks, you’ll gain valuable insights from industry professionals, receive guidance 
+              from experienced mentors, and network with sponsors and fellow innovators – all while 
+              enjoying free food, great vibes, and maybe even walking away with an awesome prize (or an internship 👀).
+
             </Question>
 
             <Question question="When is McHacks?">
-              This year, we'll be running McHacks for 24 hours! It will be on
-              the weekend of January 25-26.
+              McHacks takes place on January 17th–18th at the downtown McGill University campus.
             </Question>
 
             <Question question="How can I participate in McHacks?">
-              This year McHacks is taking place in person at the University
-              Centre Building on the McGill University campus. We’ll provide
-              more details on the specifics as we get closer to McHacks, but
-              right now all you need to do is apply.
+              Simply apply through our website! Once accepted, bring your laptop 
+              and your ideas – we’ll provide the rest (snacks, mentors, and unlimited coffee refills included).
             </Question>
 
             <Question question="Who can participate? ">
-              Students from all backgrounds and skill levels are welcome at
-              McHacks.
+              Anyone and everyone! Whether you’re a designer or a developer, 
+              from Montreal or New York, in university or CEGEP – McHacks welcomes hackers of all kinds.
             </Question>
 
             <Question question="What skills do I need to participate?">
-              We welcome students with a variety of skill sets! While experience
-              coding and programming is a plus, we offer beginner friendly
-              workshops and mentorship to get you started. Teams will also need
-              people with strong presentation skills and brilliant ideas.
+              Whatever you know right now! McHacks is all about learning, experimenting, 
+              and creating. Whether you’re writing your first “Hello, World!”, designing your 
+              first prototype, or refining your machine learning model, we’ll have mentors and workshops to help you grow.
             </Question>
 
             <Question question="Do I need a team?">

src/components/FAQ/WindowStyles.jsx

@@ -32,5 +32,25 @@ export const WindowStyles = styled.div`
     font-size: 16px;
     color: ${styleVars.m12White};
   }
+
+  @media only screen and (max-width: ${styleVars.xsUp}) {
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    justify-self: center;
+    width: 80%;
+    padding: 20px;
+
+
+    h2 {
+      font-size: 17px;
+      font-style: italic;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: -0.85px;
+    }
+  }
+  }
 `
 export default WindowStyles

src/components/Footer/Container.jsx

@@ -2,17 +2,16 @@ import styled from "styled-components"
 import * as styleVars from "../variable"
 
 export const Container = styled.footer`
-  background: ${() =>
-    typeof window !== "undefined" &&
-    !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-      ? "rgba(170, 170, 170, 0.3)"
-      : styleVars.hackWhite};
-
-  border-top: ${() =>
-    typeof window !== "undefined" &&
-    !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-      ? "1px solid rgba(255, 255, 255, 0.5)"
-      : `1px solid ${styleVars.m13Red}`};
+
+  ${props => props.$isHomePage ? `
+    background: rgba(170, 170, 170, 0.3);
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+  ` : `
+    background: ${styleVars.hackWhite};
+    border-top: 1px solid ${styleVars.m13Red};
+  `}
+
+
 
   display: flex;
   width: 100%;

src/components/Footer/Footer.jsx

@@ -11,44 +11,60 @@ import {
 import Container from "./Container"
 import Links from "./Links"
 import PageLink from "./PageLink"
+import {Location } from "@reach/router"
 import SocialLink from "./SocialLink"
 
-const Footer = () => (
-  <Container>
-    <Links>
-      <PageLink href="/code-of-conduct">Code of Conduct</PageLink>
-      <PageLink href="/privacy">Privacy Policy</PageLink>
-      <PageLink href="/discord-guide">Discord Guide</PageLink>
-      <PageLink href="https://hackp.ac/coc" target="_blank">MLH Code of Conduct</PageLink>
-      {/* TODO uhhhh is this supposed to be todo for 2025???!!!!
-        <PageLink>
-          Press Kit
-      </PageLink> */}
-    </Links>
-
-    <Links className="footer__social-links">
-      <SocialLink
-        href="mailto:[email protected]?Subject=Hello!"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FontAwesomeIcon icon={faEnvelope}/>
-      </SocialLink>
+const pageLinks = [
+  { href: "/code-of-conduct", text: "Code of Conduct" },
+  { href: "/privacy", text: "Privacy Policy" },
+  { href: "/discord-guide", text: "Discord Guide" },
+  { href: "https://hackp.ac/coc", text: "MLH Code of Conduct", external: true },
+  // TODO uhhhh is this supposed to be todo for 2025???!!!!
+  // { href: "/press-kit", text: "Press Kit" },
+]
 
-      <SocialLink href="https://fb.com/mcgillhacks" target="_blank">
-        <FontAwesomeIcon icon={faFacebookSquare} />
-      </SocialLink>
+const socialLinks = [
+  { href: "mailto:[email protected]?Subject=Hello!", icon: faEnvelope },
+  { href: "https://fb.com/mcgillhacks", icon: faFacebookSquare },
+  { href: "https://instagram.com/mcgillhacks", icon: faInstagram },
+  { href: "https://twitter.com/mcgillhacks", icon: faXTwitter },
+]
 
-      <SocialLink href="https://instagram.com/mcgillhacks" target="_blank">
-        <FontAwesomeIcon icon={faInstagram} />
-      </SocialLink>
-
-      <SocialLink href="https://twitter.com/mcgillhacks" target="_blank">
-        <FontAwesomeIcon icon={faXTwitter} />
-      </SocialLink>
-
-    </Links>
-  </Container>
+const Footer = () => (
+  <Location>
+    {({ location }) => {
+      const isHomePage = !location.pathname.includes('/discord-guide/') && !location.pathname.includes('/privacy') && !location.pathname.includes('/code-of-conduct/');
+      return (
+        <Container $isHomePage={isHomePage}>
+          <Links>
+            {pageLinks.map(({ href, text, external }) => (
+              <PageLink
+                key={text}
+                $isHomePage={isHomePage}
+                href={href}
+                target={external ? "_blank" : undefined}
+              >
+                {text}
+              </PageLink>
+            ))}
+          </Links>
+          <Links className="footer__social-links">
+            {socialLinks.map(({ href, icon }) => (
+              <SocialLink
+                key={href}
+                $isHomePage={isHomePage}
+                href={href}
+                target="_blank"
+                rel={icon === faEnvelope ? undefined : "noopener noreferrer"}
+                >
+                <FontAwesomeIcon icon={icon} />
+                </SocialLink>
+            ))}
+          </Links>
+        </Container>
+      )
+    }}
+  </Location>
 )
 
-export default Footer
+export default Footer

src/components/Footer/PageLink.jsx

@@ -3,25 +3,25 @@ import * as styleVars from "../variable"
 
 
 export const PageLink = styled.a`
-  color: ${() =>
-    typeof window !== "undefined" &&
-    !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-      ? styleVars.hackWhite
-      : styleVars.m13Red};
+  ${props => props.$isHomePage ? `
+    color: ${styleVars.hackWhite};
+    &:focus,
+    &:hover {
+      color: ${styleVars.colorHackRed};
+    }
+  ` : `
+    color: ${styleVars.m13Red};
+    &:focus,
+    &:hover {
+      color: ${styleVars.m12Maroon};
+    } 
+  `}  
+
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;
   letter-spacing: 1px;
   word-spacing: 3px;
-
-  &:focus,
-  &:hover {
-    color: ${() =>
-      typeof window !== "undefined" &&
-      !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-        ? styleVars.colorHackRed
-        : styleVars.m12Maroon};
-  }
 `
 
 export default PageLink

src/components/Footer/SocialLink.jsx

@@ -2,23 +2,22 @@ import styled from "styled-components"
 import * as styleVars from "../variable"
 
 export const SocialLink = styled.a`
-  color: ${() =>
-    typeof window !== "undefined" &&
-    !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-      ? styleVars.hackWhite
-      : styleVars.m13Red};
+  ${props => props.$isHomePage ? `
+    color: ${styleVars.hackWhite};
+    &:focus,
+    &:hover {
+      color: ${styleVars.colorHackRed};
+    }
+  ` : `
+    color: ${styleVars.m13Red};
+    &:focus,
+    &:hover {
+      color: ${styleVars.m12Maroon};
+    } 
+  `}
   cursor: pointer;
   text-decoration: none;
   font-size: 16px;
-
-  &:focus,
-  &:hover {
-    color: ${() =>
-      typeof window !== "undefined" &&
-      !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname)
-        ? styleVars.colorHackRed
-        : styleVars.m12Maroon};
-  }
 `;
 
 export default SocialLink;