fix(homepage): fix homepage link issues + improve component scaling

next/src/components/aboutus/AboutUs-Styled.tsx

@@ -5,11 +5,11 @@ import { sphereProps } from "./Sphere-Styled";
 export const AboutUsPage = styled.div`
     position: relative;
     top: -50px;
-    height: 100vh;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 22vh;
+    margin-top: 50vmin;
 `
 
 export const AboutUsContent = styled.div`
@@ -24,33 +24,23 @@ export const AboutUsContent = styled.div`
 export const AboutUsText = styled.div`
     color: var(--accent-darker-purple);
     font-family: 'Raleway';
-    font-weight: 810;
-
-    font-size: 40px;
-    @media ${device.tablet} {
-        font-size: 3.5vw;
-        line-height: 1.9vw;
-        text-align: right;
-    }
-
+    font-weight: 800;
+    font-size: min(5vmin, 40px);
+    line-height: min(2vmin, 20px);
+    text-align: right;
 `
 
 export const MainText = styled.div`
     max-width: 58vw;
     background: #A09FE3;
     border-radius: 1vw;
     color: #FFFFFF;
-    font-weight: 400;
-    font-size: 18px;
-    padding: 20px;
-    line-height: 20px;
-    @media ${device.tablet} {
-        font-size: 2vw;
-        text-align: center;
-        padding: 1.4vw 2vw;
-        margin-top: 2.8vw;
-        line-height: 2.5vw;
-    }
+    font-weight: 500;
+    font-size: min(3vmin, 32px);
+    line-height: min(3.5vmin, 45px);
+    text-align: center;
+    padding: min(2.5vmin, 25px) min(2vmin, 20px);
+    margin-top: min(2.8vmin, 25px);
 `;
 
 export const BlueText = styled.span`
@@ -61,15 +51,12 @@ export const MoreInfoText = styled.div<sphereProps>`
     transform: rotate(${props => props.rotation ? -props.rotation : 0}deg);
     color: #FFFFFF;
     font-weight: 700;
-    line-height: 58px;
-    font-size: 3.6vw;
-
+    font-size: min(3vmin, 32px);
+    line-height: min(3.5vmin, 40px);
+    text-align: center;
+
     &:hover { 
       cursor: pointer;
       transform: rotate(${props => props.rotation ? -props.rotation : 0}deg) scale(1.1);
     }
-
-    @media ${device.tablet} {
-      font-size: 2.3vw;
-    }
 `;

next/src/components/aboutus/Sphere-Styled.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { device } from "../../styles/device";
 
 export type sphereProps = {
-  left? : number;
+  left?: number;
   top?: number;
   leftMobile?: number;
   topMobile?: number;
@@ -22,8 +22,8 @@ export const StyledSphere = styled.div<sphereProps>`
   z-index: 0;
   left: ${props => props.leftMobile}%;
   top: ${props => props.topMobile}%;
-  width: ${props => props.sizeMobile}vw;
-  height: ${props => props.sizeMobile}vw;
+  width: ${props => props.sizeMobile}vmin;
+  height: ${props => props.sizeMobile}vmin;
   background: linear-gradient(
     ${props => props.angle}deg, 
     ${props => props.colourMain} ${props => props.startMainPoint}%, 
@@ -37,11 +37,13 @@ export const StyledSphere = styled.div<sphereProps>`
   align-items: center;
   border-radius: 50%;
 
-  @media ${device.tablet} {
+  max-width: 400px;
+  max-height: 400px;
+  @media ${device.laptop} {
     left: ${props => props.left}%;
     top: ${props => props.top}%;
-    width: ${props => props.size}vw;
-    height: ${props => props.size}vw;
+    width: ${props => props.size}vmin;
+    height: ${props => props.size}vmin;
   }
 `;
 

next/src/components/eventspage/ClearLayeredGlassContainer-Styled.tsx

@@ -12,9 +12,9 @@ export type positionProps = {
 export const GlassContainer = styled.div<positionProps>`
     position: ${(props) => props.position};
 
-    display: ${(props) => props.center ? "flex": ""};
-    justify-content: ${(props) => props.center ? "center": ""};
-    align-items: ${(props) => props.center ? "center": ""};
+    display: ${(props) => props.center ? "flex" : ""};
+    justify-content: ${(props) => props.center ? "center" : ""};
+    align-items: ${(props) => props.center ? "center" : ""};
 
     top: ${(props) => props.top}vw;
     left: ${(props) => props.left}vw;
@@ -23,24 +23,14 @@ export const GlassContainer = styled.div<positionProps>`
     border-width: 0.15vw;
     border-style: solid;
     border-color: #FAFCFF;
-    width: 80vw;
-    height: 50vw;
-    @media ${device.laptop} {
-        width: 36.7vw;
-        height: 20vw;
-    }
+    width: min(70vmin, 700px);
+    height: min(40vmin, 400px);
 `;
 
 export const ImgContainer = styled.div`
     position: relative;
-    width: 77vw;
-    height: 60vw;
-    top: -4.15vw;
-    left: 1.5vw;
-    @media ${device.laptop} {
-        width: 36vw;
-        height: 17.8vw;
-        top: 2.15vw;
-        left: 1.5vw;
-    }
+    width: 77vmin;
+    height: 60vmin;
+    top: -4.15vmin;
+    left: 1.5vmin;
 `

next/src/components/eventspage/ClearLayeredGlassContainer.tsx

@@ -6,10 +6,9 @@ export default function ClearLayeredGlass() {
   return (
     <div>
       <GlassContainer position="relative">
-        <GlassContainer position="absolute" top={1} left={1} />
-        <ImgContainer>
-          <Image src="/assets/CSESocEventsCP.png" layout="fill" objectFit="contain" />
-        </ImgContainer>
+        <GlassContainer position="relative" top={1} left={1} >
+          <Image onClick={() => { window.open("https://www.facebook.com/events/507207411493903", '_blank') }} alt="Events" src="/assets/Oweek.png" layout="fill" objectFit="contain" />
+        </GlassContainer>
       </GlassContainer>
     </div>
   );

next/src/components/footer/Footer.tsx

@@ -19,40 +19,49 @@ export const ImagesContainer = styled.div`
   display: flex;
   justify-content: space-between;
   @media ${device.tablet} {
-    width: 55%;
+    width: 75%;
     float: right;
   }
 `
 
 
 const FooterComponent = styled.footer`
   background-color: #A09FE3;
+  width: 100vw;
   padding: 2rem;
   display: flex;
   flex-direction: column;
-
+  position: static;
+  bottom: 0;
   @media ${device.tablet} {
     flex-direction: row;
   }
 `;
 
 const Logo = styled.div`
-  width: 100%;
+  width: 50%;
   display: flex;
+  padding-bottom: 5vmin;
 
   @media ${device.tablet} {
+    padding-bottom: 0vmin;
+
     width: 75%;
+    padding-left: 10vmin;
   }
 `;
 
 const Details = styled.div`
   width: 100%;
   text-align: left;
   color: white;
+  font-size: min(3vmin, 32px);
+  line-height: min(3.5vmin, 45px);
 
   @media ${device.tablet} {
-    width: 25%;
+    width: 40%;
     text-align: right;
+    padding-right: 10vmin;
   }
 `;
 
@@ -63,11 +72,11 @@ const Footer: React.FC<{}> = () => {
         <Image src={CSESocLogo} alt="CSESoc" />
       </Logo>
       <Details>
-        <p>
+        <div>
           B03 CSE Building K17, UNSW
           <br />
           [email protected]
-          <br/><br/>
+          <br /><br />
           <ImagesContainer>
             <Link href="https://discord.gg/AM4GB5zuB6">
               <Image src={DiscordLogo} alt="CSESoc Discord" />
@@ -87,7 +96,7 @@ const Footer: React.FC<{}> = () => {
           </ImagesContainer>
           <br /><br />
           © 2022 — CSESoc UNSW
-        </p>
+        </div>
       </Details>
     </FooterComponent>
   );

next/src/components/navbar/HamburgerMenu.tsx

@@ -24,12 +24,12 @@ const HamburgerMenu = (props: HamburgerMenuProps) => {
           </MenuHeader>
         ) : <></>}
         <MenuItemWrapper>
-          <MenuItem>Future Students</MenuItem>
-          <MenuItem>About Us</MenuItem>
-          <MenuItem>Contact</MenuItem>
-          <MenuItem>Events</MenuItem>
-          <MenuItem>Resources</MenuItem>
-          <MenuItem>Sponsors</MenuItem>
+          <MenuItem as="a" href="/Start">Future Students</MenuItem>
+          <MenuItem as="a" href="/AboutUs">About Us</MenuItem>
+          <MenuItem as="a" href="/ExecDescription">History</MenuItem>
+          <MenuItem as="a" href="#events">Events</MenuItem>
+          <MenuItem as="a" href="#resources">Resources</MenuItem>
+          <MenuItem as="a" href="/Sponsors">Sponsors</MenuItem>
         </MenuItemWrapper>
       </MenuContainer>
     </MenuOverlay>

next/src/components/resources/Carousel.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { wrap } from "popmotion";
 import images from "./image-data";
+import { device } from "../../styles/device";
 
 const variants = {
   enter: (direction: number) => {
@@ -57,7 +58,7 @@ const Example = () => {
             x: { type: "spring", stiffness: 300, damping: 30 },
             opacity: { duration: 0.2 }
           }}
-          style={{ width: "30%", position: "absolute", cursor: "pointer"}}
+          style={{ width: "25%", position: "absolute", cursor: "pointer" }}
         />
       </AnimatePresence>
     </>

next/src/components/resources/image-data.tsx

@@ -1,21 +1,31 @@
-import degree_planner from "../../svgs/degree_planner.svg"
-import jobs_board from "../../svgs/jobs_board.svg"
-import notangles from "../../svgs/notangles.svg"
+import circles from "../../svgs/Circles.png"
+import jobsboard from "../../svgs/Jobsboard.png"
+import notangles from "../../svgs/Notangles.png"
+import structs from "../../svgs/Structs.png"
+import cselectives from "../../svgs/Cselectives.png"
+
 
 const images = [
     {
-        url: degree_planner.src,
-        link: "https://circles.csesoc.app/degree-wizard"
+        url: circles.src,
+        link: "https://circles.csesoc.app/"
     },
     {
-        url: jobs_board.src,
+        url: jobsboard.src,
         link: "https://jobsboard.csesoc.unsw.edu.au/"
     },
     {
         url: notangles.src,
         link: "https://notangles.csesoc.app/"
-    }
-
+    },
+    {
+        url: structs.src,
+        link: "https://structs.sh/"
+    },
+    {
+        url: cselectives.src,
+        link: "https://cselectives.csesoc.app/"
+    },
 ];
 
 export default images;