Merge pull request #359 from nwplus/hackcamp2023_dev

merge Hackcamp2023 dev to main

src/components/Button.jsx

@@ -13,13 +13,14 @@ const StyledButton = styled.a`
   border-radius: ${p => p.borderRadius};
   display: flex;
   justify-content: center;
-  font-size: 1.12rem;
+  font-size: ${p => p.fontSize ? p.fontSize : '1.12rem'};
   align-items: center;
   text-decoration: none;
+
   &:hover {
-    cursor: pointer;
+    cursor: ${p => p.disabled ? 'not-allowed' : 'pointer'};
     text-decoration: none;
-    filter: brightness(0.9);
+    filter: ${p => p.disabled ? '' : 'brightness(0.9)'};
     color: ${p => p.textColor};
   }
   transition: filter 0.13s ease-in;
@@ -49,7 +50,8 @@ export default function Button({
   secondary = false,
   isHover = false,
   isGradientText = false,
-  isOutline = false
+  isOutline = false,
+  disabled = false
 }) {
   return (
     <StyledButton
@@ -64,7 +66,9 @@ export default function Button({
       secondary={secondary}
       isHover={isHover}
       isGradientText={isGradientText}
-      isOutline={isOutline}>
+      isOutline={isOutline}
+      disabled={disabled}
+    >
       {children}
     </StyledButton>
   )

src/components/Footer.jsx

@@ -40,9 +40,11 @@ const CaveTop = styled.div`
   }
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    background: url('assets/mobile/footer/foreground.svg');
+    background: url('assets/mobile/footer/background.svg') #150C27;
+    background-size: 100vw;
     background-repeat: no-repeat;
-    aspect-ratio: 428/377;
+    background-position: center center;
+    aspect-ratio: 412/506;
   }
 
 `
@@ -63,9 +65,9 @@ const CaveBottom = styled.div`
   aspect-ratio: 1440/1390;
   
   ${(p) => p.theme.mediaQueries.mobile} {
-    background: url('assets/mobile/footer/background.svg');
+    background: url('assets/mobile/footer/background.svg'), linear-gradient(to bottom, #220639, #AC306C);
     background-repeat: no-repeat;
-    aspect-ratio: 428/1237;
+    aspect-ratio: 412/506;
   }
   
 `
@@ -82,6 +84,7 @@ const SocialMediaIcons = styled.div`
   
   ${(p) => p.theme.mediaQueries.mobile} {
     a {
+      color: #E2D6FF;
       width: 25px;
     }
     gap: 1rem;

src/sections/Count.jsx

@@ -164,7 +164,7 @@ const useCountdown = (targetDate) => {
 export { useCountdown }
 
 const Count = () => {
-  const countDownDate = new Date('Oct 28, 2023 00:00:00').getTime()
+  const countDownDate = new Date('Oct 6, 2023 00:00:00').getTime()
   const [days, hours, minutes] = useCountdown(countDownDate)
 
   const twoify = (num) => {
@@ -194,7 +194,7 @@ const Count = () => {
     <InfoContainer>
       <BgScroll />
       <TextContainer>
-        <StyledTitle>Registration closes in:</StyledTitle>
+        <StyledTitle>Registration opens in:</StyledTitle>
         <DaysTextContainer>
           <ShadowText text={`${count.days[0]}${count.days[1]} Days`}>
             {`${count.days[0]}${count.days[1]} Days`}

src/sections/Faq.jsx

@@ -21,9 +21,11 @@ const BgSectionContainer = styled(SectionContainer)`
   background: #150C27;
   
   ${p => p.theme.mediaQueries.mobile} {
-    background: url('assets/mobile/faq/background.svg') #8C5050;
-    aspect-ratio: auto;
+    background: url('assets/mobile/faq/background.svg') #150C27;
+    aspect-ratio: 412/1359;
+    background-size: 100vw;
     background-repeat: no-repeat;
+    background-position: center center;
   }
 `
 
@@ -43,7 +45,7 @@ const BgScroll = styled(SectionContainer)`
   
   ${p => p.theme.mediaQueries.mobile} {
     background: none;
-    aspect-ratio: 482/1344;
+    aspect-ratio: 412/1359;
   }
 `
 

src/sections/Learn.jsx

@@ -9,17 +9,17 @@ const InfoContainer = styled.div`
 
   width: 100%;
   aspect-ratio: 1440/989;
-  z-index: 99;
+  z-index: 98;
   overflow: hidden;
   
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    background: url('assets/mobile/events/bg.svg');
+    background: url('assets/mobile/events/background.svg');
     background-size: 100vw;
     background-repeat: no-repeat;
     background-position: center center;
     
-    aspect-ratio: 428/1280;
+    aspect-ratio: 412/1154;
   }
 `
 const BgScroll = styled(SectionContainer)`
@@ -56,12 +56,12 @@ const TextContainer = styled.div`
 
 const StyledTitle = styled(Header2)`
   text-align: center;
-  color: #002F4D;
+  color: #F0EEF2;
   font-size: 3rem;
-  padding-top: 5rem;
+  padding-top: 1rem;
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    font-size: 2em;
+    font-size: 2.8em;
   }
 `
 
@@ -139,10 +139,13 @@ const CardContent = styled.p`
 `
 
 const Learn = () => {
-
   return (
     <InfoContainer id="events">
-      <BgScroll/>
+      <BgScroll>
+      <StyledTitle>
+        Our Events
+      </StyledTitle>
+      </BgScroll>
     </InfoContainer>
   )
 }

src/sections/Register.jsx

@@ -195,11 +195,14 @@ export default function Register() {
               // href="https://forms.gle/GQ3k8ZbtfULfVYxq6"
               width='205px'
               height='50px'
+              fontSize='0.75rem'
               borderRadius='6px'
               textColor='#2C2543'
               backgroundColor="#00DBCE"
-              isHover>
-              Apply Now
+              isHover
+              disabled
+            >
+              Applications Open October 6th!
             </Button>
             <Button
               isOutline
@@ -208,12 +211,15 @@ export default function Register() {
               // href="https://docs.google.com/forms/d/e/1FAIpQLScA2RtmikDSTaeLqi7vadLDq4Wom4N9N1wDVZu0rpZ5Xk2sow/viewform"
               width='205px'
               height='50px'
+              fontSize='0.75rem'
               borderRadius='6px'
               borderColor="#00DBCE"
               textColor="#00DBCE"
               backgroundColor="transparent"
-              isHover>
-              Become a Mentor
+              isHover
+              disabled
+            >
+              Applications Open October 6th!
             </Button>
           </ButtonContainer>
         </MediaContainer>

src/sections/Sponsor.jsx

@@ -17,9 +17,11 @@ const BgSectionContainer = styled(SectionContainer)`
   z-index: 99;
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    background: url('assets/mobile/sponsors/background.svg') #8C5050;
+    background: url('assets/mobile/sponsors/background.svg') #150C27;
+    background-size: 100vw;
     background-repeat: no-repeat;
-    aspect-ratio: auto;
+    background-position: center center;
+    aspect-ratio: 412/632;
   }
 `
 
@@ -28,11 +30,10 @@ const StyledTitle = styled(Header2)`
   color: #FFF;
   font-size: 3rem;
   padding-top: 33rem;
-  padding-right: 3rem;
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    font-size: 3em;
-    padding-top: 10rem;
+    font-size: 2em;
+    padding-top: 12rem;
   }
 `
 
@@ -43,7 +44,6 @@ const PushinP = styled.p`
   min-width: 500px;
   margin: 0 auto;
   padding-top: 2rem;
-  padding-right: 3rem;
   max-width: 800px;
   
   ${(p) => p.theme.mediaQueries.mobile} {
@@ -54,7 +54,6 @@ const PushinP = styled.p`
 const ButtonContainer = styled.p`
   display: flex;
   justify-content: center;
-  padding-right: 3rem;
 `
 
 const Skip = styled.div`