Merge pull request #205 from nwplus/dev

nwplus · Oct 2, 2024 · 56c4381 · 56c4381
2 parents 8ed8941 + 5fa199c
commit 56c4381
Show file tree

Hide file tree

Showing 9 changed files with 5,896 additions and 6,786 deletions.
diff --git a/components/Button.js b/components/Button.js
@@ -12,9 +12,15 @@ const StyledButton = styled.a`
     margin: 1em ${p => p.noMargin ? '0em' : '0.5em'};
     padding: ${p => p.padding ? p.padding : '0'};
     border: ${p => p.hollow && `2px solid ${p.theme.colors.primary}`};
-    color: ${p => p.hollow && p.theme.colors.primary}
+    color: ${p => p.hollow && p.theme.colors.primary};
+    transition: 0.3s;
+
+    &:hover {
+      cursor: pointer;
+      background: linear-gradient(45deg, #19CBCB 0%, #78FF96 100%);
+    }
 `
 
 const Button = ({ link, ...props }) => <StyledButton href={link} {...props} />
 
-export default Button
+export default Button;
diff --git a/components/Faq.js b/components/Faq.js
@@ -28,6 +28,29 @@ const FlexContainer = styled.div`
     }
 `
 
+const NuggetImgContainer = styled.img`
+  animation: floatNugget 5s ease-in-out infinite;
+  position: relative;
+  top: 100px;
+  float: right;
+
+  @keyframes floatNugget {
+    0% {
+      transform: translateY(0) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-20px) rotate(-10deg);
+    }
+    100% {
+      transform: translateY(0) rotate(0deg);
+    }
+  }
+
+    ${p => p.theme.mediaQueries.mobile} {
+        display: none;
+    }
+`
+
 export default function Faq({ faqs }) {
     // Bucket each FAQ into a dictionary where the key is the category
     var categories = {};
@@ -39,14 +62,17 @@ export default function Faq({ faqs }) {
     });
 
     return (
-        <FaqContainer>
-            <FlexContainer>
-                {categories['Hackers'] && <FaqSection category={'Hackers'} faqs={categories['Hackers']}/>}
-                {categories['Sponsors'] && <FaqSection category={'Sponsors'} faqs={categories['Sponsors']}/>}
-            </FlexContainer>
-            <FlexContainer>
-                {categories['General'] &&<FaqSection category={'General'} faqs={categories['General']}/>}
-            </FlexContainer>    
-        </FaqContainer>
+        <>
+            <FaqContainer>
+                <FlexContainer>
+                    {categories['Hackers'] && <FaqSection category={'Hackers'} faqs={categories['Hackers']}/>}
+                    {categories['Sponsors'] && <FaqSection category={'Sponsors'} faqs={categories['Sponsors']}/>}
+                </FlexContainer>
+                <FlexContainer>
+                    {categories['General'] &&<FaqSection category={'General'} faqs={categories['General']}/>}
+                </FlexContainer>    
+            </FaqContainer>
+            <NuggetImgContainer src="assets/space-nugget.svg"/>
+        </>
     )
 }
diff --git a/components/FaqBox.js b/components/FaqBox.js
@@ -55,7 +55,7 @@ const Answer = styled.p`
   transition: 1s linear;
   background: #4b406d;
   color: white;
-  font-size: 13.5px;
+  font-size: 16px;
   border: 2px solid #20FFAF;
   border-radius: 0 0 4px 4px;
   > * {

diff --git a/components/Hackathons.js b/components/Hackathons.js
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 // import { Body, Title2 } from './Typography';
 // import Button from './Button';
 import SpaceDeer from '../public/assets/space-deer.svg'
-import PurpleTexture from '../public/assets/purple-texture.svg'
 // nwHacks
 import nwHacksPlanet from '../public/assets/nwHacksPlanet.png'
 import nwMoonOneImg from '../public/assets/nwmoon-1.svg'
@@ -30,7 +29,7 @@ const HackCampData = {
   link: 'https://hackcamp.nwplus.io',
   date: 'Nov 9 - 10',
   registrationOpenDate: "Oct 6",
-  open: false,
+  open: true,
 };
 const nwHacksData = {
   imgSrc: nwHacksPlanet,
@@ -205,6 +204,11 @@ const HackathonButton = styled.a`
   padding: 7px 14px;
   border-radius: 7.76px;
   font-weight: bold;
+
+  &:hover {
+    cursor: pointer;
+    background: linear-gradient(45deg, #19CBCB 0%, #78FF96 100%);
+  }
 `
 
 const MobileHackathonDetails = styled.div`
@@ -237,31 +241,20 @@ const MobileHackathonDate = styled.span`
   float: right;
 `
 
-const PurpleTextureImg = styled.img`
-  position: absolute;
-  left: -20px;
-  margin-top: -60px;
-  float: left;
-
-  ${(p) => p.theme.mediaQueries.mobile} {
-
-  }
-`;
-
 const SpaceDeerImg = styled.img`
   position: absolute;
   float: right;
   margin-top: -60px;
   right: 20px;
 
-  animation: float 5s ease-in-out infinite;
+  animation: floatDeer 5s ease-in-out infinite;
 
-  @keyframes float {
+  @keyframes floatDeer {
     0% {
       transform: translateY(0);
     }
     50% {
-      transform: translateY(-20px);
+      transform: translateY(-20px) rotate(20deg);
     }
     100% {
       transform: translateY(0);
@@ -322,7 +315,7 @@ export default function Hackathons() {
             <HackathonTitle>HackCamp {HackCampData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
             <HackathonDescriptions>Canada’s largest beginner hackathon, focused on learning.</HackathonDescriptions>
             <HackathonDate>{HackCampData.date}</HackathonDate>
-            <HackathonButton href={HackCampData.link} target="_blank">Visit website</HackathonButton>
+            <HackathonButton href={HackCampData.link} target="_blank">Apply</HackathonButton>
           </HackathonDetails>
 
           <DashedConnector open={HackCampData.open} style={{ top: "0px", left: "10px", transform: "rotate(30deg)" }}></DashedConnector>
@@ -388,7 +381,7 @@ export default function Hackathons() {
         </HackathonPlanet>
 
         {/* cmd-f */}
-        <HackathonPlanet>
+        <HackathonPlanet style={{ position: "relative", left: "100px" }}>
           <HackathonDetails open={cmdfData.open} style={{ top: "50px", left: "-10px" }}>
             <HackathonTitle>cmd-f {cmdfData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
             <HackathonDescriptions>Hackathon celebrating underrepresented genders in tech.</HackathonDescriptions>
@@ -540,7 +533,6 @@ export default function Hackathons() {
 
       </MobileHackathonsContainer>
 
-      <PurpleTextureImg src={PurpleTexture} />
       <SpaceDeerImg src={SpaceDeer} />
     </>
   );

diff --git a/components/Hero.js b/components/Hero.js
@@ -26,7 +26,7 @@ const HeroContainer = styled.div`
 `;
 
 const HeroTextContainer = styled.div`
-  padding-top: 28%;
+  padding-top: 32%;
   ${(div) => div.theme.mediaQueries.mobile} {
     padding-top: 55%;
   }
@@ -65,10 +65,6 @@ const ComboButton = styled(Button)`
     font-size: 0.8em;
     border-radius: 6px;
   }
-
-  &:hover {
-    cursor: pointer;
-  }
 `;
 
 const StyledInput = styled.input`
@@ -93,9 +89,11 @@ const StyledInput = styled.input`
 `;
 
 const SponsorshipCTA = styled.p`
-  color: #78FF96; // turn into gradient later
+  background: linear-gradient(92.58deg, #0DEFE1 0%, #78FF96 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   font-size: 1em;
-`
+`;
 
 const ScrollContainer = styled.div`
   float: left;

diff --git a/pages/_app.js b/pages/_app.js
@@ -15,7 +15,7 @@ export const SCREEN_BREAKPOINTS = {
 const theme = {
   colors: {
     primary: '#20FFAF',
-    primaryGradient: 'linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%)',
+    primaryGradient: 'linear-gradient(90deg, #00DBCE 0%, #00D88A 100%)',
     shadedGradient:
       'linear-gradient(180deg, rgba(0, 0, 0, 0) 47.69%, rgba(0, 0, 0, 0.8) 100%)',
     secondary: '#fff',

diff --git a/pages/index.js b/pages/index.js
@@ -23,6 +23,8 @@ import teamSocial3 from '../public/assets/images/team_social_3.jpg';
 import teamSocial4 from '../public/assets/images/team_social_4.jpg';
 import teamSocial2 from '../public/assets/images/team_social_2.jpg';
 
+import PurpleTexture from '../public/assets/purple-texture.svg'
+
 const SECTION_MARGIN = '8em auto';
 
 const AboutHeaderContainer = styled.div`
@@ -99,8 +101,8 @@ const ResourcesSection = styled.div`
     position: absolute;
     bottom: -150px;
     left: 0;
-    background: url('assets/resources-mascot.svg'),
-      url('assets/resources-planet.svg');
+    // background: url('assets/resources-mascot.svg'),
+    //   url('assets/resources-planet.svg');
     background-position: bottom -10% left, bottom right;
     background-repeat: no-repeat;
     width: 100%;
@@ -125,6 +127,48 @@ const FaqSection = styled.div`
   min-height: 600px;
 `;
 
+const PurpleTextureImg = styled.img`
+  position: absolute;
+  left: -20px;
+  margin-top: -100px;
+  float: left;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+
+  }
+`;
+
+const BearImgContainer = styled.img`
+  animation: floatBear 5s ease-in-out infinite;
+  margin-bottom: -50px;
+
+  @keyframes floatBear {
+    0% {
+      transform: translateY(0) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-20px) rotate(20deg);
+    }
+    100% {
+      transform: translateY(0) rotate(0deg);
+    }
+  }
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    display: none;
+  }
+`
+
+const GreenPlanetImgContainer = styled.img`
+  float: right;
+  margin-top: 0px;
+
+  ${(p) => p.theme.mediaQueries.mobile} {
+    width: 160px;
+    height: auto;
+  }
+`
+
 export default function Home() {
   const themeContext = useContext(ThemeContext);
   const [faqs, setFaqs] = useState(null);
@@ -215,13 +259,13 @@ export default function Home() {
                 {
                   value: 110230,
                   type: 'moneysign',
-                  description: 'in prizes awarded in 2021',
+                  description: 'in prizes awarded since 2021',
                 },
                 { value: 50, type: 'text', description: 'workshops organized' },
                 {
                   value: 5075,
                   type: 'moneysign',
-                  description: 'donations to charity in 2021',
+                  description: 'donations to charity since 2021',
                 },
               ]}
             />
@@ -233,9 +277,12 @@ export default function Home() {
           </Title1>
           <Hackathons />
         </ContentContainer>
+        <PurpleTextureImg src={PurpleTexture} />
         <ContentContainer id='resources' margin={SECTION_MARGIN}>
           <ResourcesSection>
             <ResourceContainer />
+            <BearImgContainer src="assets/resources-mascot.svg"/>
+            <GreenPlanetImgContainer src="assets/resources-planet.svg" />
           </ResourcesSection>
         </ContentContainer>
         {faqs && (