Merge pull request #504 from nwplus/nwhacks2025_desktop_dev

Nwhacks2025 website dev

src/components/FaqBox.jsx

@@ -11,10 +11,10 @@ const Container = styled.div`
   overflow:hidden;
   ${p => p.expanded
     ? `
-    border-color: #809CAA;
+    border-color: #4B1B1B;
   `
     : `
-    border-color: #809CAA;
+    border-color: #4B1B1B;
   `}
   
   &:not(:last-child) {
@@ -53,7 +53,7 @@ const AnswerBox = styled.div`
   overflow:hidden;
   transition:0.2s max-height cubic-bezier(.6,0,.4,1);
   border-radius: 0 0 5px 5px;
-  ${p => p.isOpen ? 'max-height:500px; background-color: #142E3D;' : 'max-height: 0;'}
+  ${p => p.isOpen ? 'max-height:500px; background-color: #883030;' : 'max-height: 0;'}
   ${p => p.theme.mediaQueries.mobile} {
     font-size: 0.9rem;
   }

src/components/Hero.jsx

@@ -364,7 +364,7 @@ const Hero = () => {
   }, [])
 
   return (
-    <>
+    <div id="home">
       <HeroContainer ref={heroRef}>
         <HeroBackgroundContainer>
           <HeroBackground />
@@ -425,7 +425,7 @@ const Hero = () => {
         </MobileSponsorButton>
       </HeroContainer>
       <DummySpacerDiv />
-    </>
+    </div>
   )
 }
 

src/components/NavigationBar.jsx

@@ -256,7 +256,9 @@ const MenuList = ({ isMobile, closeDropdown }) => (
   <>
     {isMobile && (
       <NwPlusLogoContainer>
-        <NwPlusLogo fill="#3A2F21" />
+        <a href="/#home">
+          <NwPlusLogo fill="#3A2F21" />
+        </a>
       </NwPlusLogoContainer>
     )}
     <MenuItem name="About" href="/#about" isAnchor isMobile={isMobile} closeDropdown={closeDropdown} />
@@ -265,7 +267,9 @@ const MenuList = ({ isMobile, closeDropdown }) => (
     <MenuItem name="Past Projects" href="/#past-projects" isAnchor isMobile={isMobile} closeDropdown={closeDropdown} />
     {!isMobile && (
       <NwPlusLogoContainer>
-        <NwPlusLogo fill="white" />
+        <a href="/#home">
+          <NwPlusLogo fill="white" />
+        </a>
       </NwPlusLogoContainer>
     )}
     <MenuItem name="Testimonials" href="/#testimonials" isAnchor isMobile={isMobile} closeDropdown={closeDropdown} />

src/sections/FAQ.jsx

@@ -6,10 +6,33 @@ import { Header3 } from '@components/Typography'
 
 const FaqContainer = styled.div`
   position: relative;
-  min-height: 50vh;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    aspect-ratio: 1280 / 886;
+    background-image: url('./assets/images/faq.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: top;
+    z-index: 0;
+  }
+
+  ${p => p.theme.mediaQueries.tablet} {
+    &::before {
+      background-image: url('./assets/images/faq_tablet.svg');
+      aspect-ratio: 834 / 1049;
+    }
+  }
 
   ${p => p.theme.mediaQueries.mobile} {
-    min-height: 0;
+    &::before {
+      aspect-ratio: 487 / 1060;
+      background-image: url('./assets/images/faq_mobile.svg');
+    }
   }
 `
 
@@ -22,32 +45,30 @@ const Wrapper = styled.div`
   z-index: 88;
   position: relative;
 
-  ${p => p.theme.mediaQueries.mobile} {
+  ${p => p.theme.mediaQueries.tablet} {
     grid-column: 2 / span 12;
     min-width: 0;
   }
 `
 
 // faq grid
 const FaqGrid = styled.div`
+  padding-top: calc(100vw * (50 / 1280));
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
   gap: 50px;
-  margin-top: 4rem;
-  ${p => p.theme.mediaQueries.mobile} {
+
+  ${p => p.theme.mediaQueries.tablet} {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: calc(100vw * (80 / 834));
     margin-top: 50px;
     padding-bottom: 4rem;
   }
 
-  & > div:nth-child(3) {
-    grid-column: 2; // move the column to the right
-    ${p => p.theme.mediaQueries.mobile} {
-      grid-column: 1;
-    }
+  ${p => p.theme.mediaQueries.mobile} {
+    gap: calc(100vw * (40 / 487));
   }
 `
 
@@ -76,14 +97,15 @@ const CollectionName = styled(Header3)`
   font-size: calc(100vw * (35 / 1280));
   font-weight: 700;
   padding-bottom: calc(100vw * (20 / 1280));
+  text-align: left;
 
   ${p => p.theme.mediaQueries.tablet} {
     font-size: calc(100vw * (35 / 834));
     padding-bottom: calc(100vw * (20 / 834));
   }
 
   ${p => p.theme.mediaQueries.mobile} {
-    font-size: calc(100vw * (35 / 487));
+    font-size: calc(100vw * (24 / 487));
     padding-bottom: calc(100vw * (20 / 487));
   }
 `
@@ -175,7 +197,7 @@ const Faq = () => {
             <FaqColumn>
               {faqData['Teams & Projects'] && (
                 <FaqCollection
-                  category="Teams & Projects"
+                  category="Projects"
                   faqs={faqData['Teams & Projects']}
                   expandedQuestion={expandedQuestion}
                   setExpandedQuestion={setExpandedQuestion}

src/sections/Footer.jsx

@@ -156,8 +156,8 @@ const ConfettiContainer = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  width: 3840px;
-  height: 2160px;
+  width: 200vw;
+  height: 200vh;
 
   canvas {
     width: 100% !important;
@@ -179,7 +179,7 @@ const Footer = () => {
         <ConfettiContainer>
           <Confetti
             mode="fall"
-            shapeSize={40}
+            shapeSize={20}
             colors={['#E261BB', '#61B5E2', '#E26161', '#E28A61', '#ED9823', '#FDC699']}
           />
         </ConfettiContainer>

src/sections/Gallery.jsx

@@ -12,7 +12,7 @@ const GalleryContainer = styled.div`
   width: 100vw;
   aspect-ratio: 1280 / 870;
   position: relative;
-  top: calc(100vw * (-525 / 1280));
+  top: calc(100vw * (-600 / 1280));
 
   ${p => p.theme.mediaQueries.tablet} {
     aspect-ratio: 834 / 893;
@@ -21,7 +21,7 @@ const GalleryContainer = styled.div`
 
   ${p => p.theme.mediaQueries.mobile} {
     aspect-ratio: 487 / 1086;
-    top: calc(100vw * (-400 / 487));
+    top: calc(100vw * (-450 / 487));
   }
 `