nwplus · kevin-zou · Aug 30, 2021 · Aug 29, 2021 · Aug 29, 2021 · Aug 29, 2021
diff --git a/components/HackathonCard.js b/components/HackathonCard.js
@@ -1,24 +1,26 @@
 import styled from "styled-components"
 import Button from "./Button"
 
+const BackgroundImageContainer = styled.div`
+    width: 100%;
+    height: 100%;
+`
+
 const CardContainer = styled.div`
     width: 380px;
     height: 500px;
     overflow: hidden;
     border-radius: 12px;
     margin: 2em;
     position: relative;
-`
 
-const BackgroundImageContainer = styled.div`
-    background: ${p => p.theme.colors.shadedGradient}, url(${p => p.imageLink}) center;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
+    & > ${BackgroundImageContainer} {
+        background: ${p => p.theme.colors.shadedGradient}, url(${p => p.imageLink}) center;
+        background-size: cover;
+    }
 
-    ${CardContainer}:hover & {
+    &:hover > ${BackgroundImageContainer} {
         background: url(${p => p.imageLink}) center;
-        background-size: cover;
         transform: scale(1.1);
     }
 `
@@ -59,7 +61,7 @@ const EventDateString = styled.div`
 
 const HackathonCard = ({ registrationOpen, link, dateString, imageLink }) => {
     return (
-        <CardContainer>
+        <CardContainer imageLink={imageLink}>
             <OverlayContainer>
                 <OverLayFooterContainer>
                     <EventDataContainer>
@@ -73,7 +75,7 @@ const HackathonCard = ({ registrationOpen, link, dateString, imageLink }) => {
                     </Button>
                 </OverLayFooterContainer>
             </OverlayContainer>
-            <BackgroundImageContainer imageLink={imageLink}/>
+            <BackgroundImageContainer/>
         </CardContainer>
     )
 }

diff --git a/components/Hackathons.js b/components/Hackathons.js
@@ -0,0 +1,68 @@
+import { useContext, useState } from 'react'
+import styled, { ThemeContext } from 'styled-components'
+import HackathonCard from './HackathonCard'
+import NewsletterModal from './NewsletterModal'
+import { Body, LinkBody } from './Typography';
+
+const HackCampData = {
+  imgSrc: '/assets/HackCamp2021.png',
+  link: 'https://hackcamp.nwplus.io',
+  date: 'TBA',
+}
+const nwHacksData = {
+  imgSrc: '/assets/nwHacks2021.png',
+  link: 'https://nwhacks.io',
+  date: 'TBA',
+}
+const cmdfData = {
+  imgSrc: '/assets/cmd-f2021.png',
+  link: 'https://cmd-f.nwplus.io',
+  date: 'TBA',
+}
+const subscribeCTAText = 'to our newsletter to stay up to date on our hackathons!';
+
+export default function Hackathons() {
+  const themeContext = useContext(ThemeContext);
+  const [showModal, setShowModal] = useState(false);
+
+  const HackathonsContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: 2em;
+
+    ${themeContext.mediaQueries.mobile} {
+      flex-direction: column;
+      align-items: center;
+    }
+  `;
+
+  return (
+    <>
+      <HackathonsContainer>
+        <HackathonCard
+          registrationOpen={false}
+          link={HackCampData.link}
+          dateString={HackCampData.date}
+          imageLink={HackCampData.imgSrc}
+        />
+        <HackathonCard
+          registrationOpen={false}
+          link={nwHacksData.link}
+          dateString={nwHacksData.date}
+          imageLink={nwHacksData.imgSrc}
+        />
+        <HackathonCard
+          registrationOpen={false}
+          link={cmdfData.link}
+          dateString={cmdfData.date}
+          imageLink={cmdfData.imgSrc}
+        />
+      </HackathonsContainer>
+      <Body align="center"><LinkBody onClick={() => setShowModal(true)}>Subscribe</LinkBody> {subscribeCTAText}</Body>
+      <NewsletterModal
+        show={showModal}
+        onClose={() => setShowModal(false)}
+      />
+    </>
+  )
+}
diff --git a/components/ResourceContainer.js b/components/ResourceContainer.js
@@ -17,15 +17,6 @@ const HeaderContainer = styled.div`
   margin-bottom: 30px;
 `
 
-const BodyContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  ${(p) => p.theme.mediaQueries.mobile} {
-    display: inline;
-    text-align: center;
-  }
-`
-
 const CardContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -56,7 +47,7 @@ const FilterCardContainer = styled.div`
   }
 `
 const RESOURCES_TITLE = 'Resources';
-const RESOURCES_BODY = 'If you are looking to get started in Computer Science, check out our \u00a0';
+const RESOURCES_BODY = 'If you are looking to get started in Computer Science, check out our ';
 const RESOURCES_LINK = 'https://resources.nwplus.io/';
 const RESOURCES_LINK_TEXT = 'Self-Learning Resources Wiki!';
 
@@ -177,12 +168,12 @@ export default function ResourceContainer() {
     <Container>
       <HeaderContainer>
         <Title1 withGradient>{RESOURCES_TITLE}</Title1>
-        <BodyContainer>
-          <Body>{RESOURCES_BODY}</Body>
+        <Body>
+          {RESOURCES_BODY}
           <a href={RESOURCES_LINK} target='_blank' rel="noreferrer">
             <LinkBody>{RESOURCES_LINK_TEXT}</LinkBody>
           </a>
-        </BodyContainer>
+        </Body>
       </HeaderContainer>
       <CardContainer>      
         <FilterContainer>

diff --git a/components/Typography.js b/components/Typography.js
@@ -61,6 +61,7 @@ export const Title1 = styled.h1.attrs((p) => ({
       color: ${p.theme.colors.primary}
     }`
   }
+  ${(p) => p.align ? `text-align: ${p.align}` : ''};
 `;
 
 export const Title2 = styled.h2.attrs((p) => ({
@@ -125,6 +126,7 @@ export const Body = styled.p.attrs((p) => ({
     `background: -webkit-linear-gradient(92deg, #19cbcb 1.55%, #78ff96 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;`}
+  ${(p) => p.align ? `text-align: ${p.align};` : ''}
   ${(p) => p.theme.mediaQueries.mobile} {
     font-size: 14px;
     line-height: 24px;
@@ -142,6 +144,7 @@ export const MixedTextParagraph = styled.div`
 export const LinkBody = styled.p.attrs((p) => ({
   color: p.color || p.theme.colors.typography.body,
 }))`
+  display: inline;
   font-style: normal;
   font-weight: bold;
   font-size: 18px;

diff --git a/pages/_app.js b/pages/_app.js
@@ -13,7 +13,7 @@ const theme = {
   colors: {
     primary: '#20FFAF',
     primaryGradient: 'linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%)',
-    shadedGradient: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) )',
+    shadedGradient: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 47.69%, rgba(0, 0, 0, 0.8) 100%)',
     secondary: '#fff',
     tertiary: '#E2D6FF',
     metadata: '#BDBAC3',

diff --git a/pages/index.js b/pages/index.js
@@ -8,8 +8,8 @@ import { Background } from '../components/Background'
 import { ContentContainer } from '../components/ContentContainer';
 import Carousel from '../components/Carousel'
 import Footer from '../components/Footer'
+import Hackathons from '../components/Hackathons'
 import Hero from '../components/Hero'
-import NewsletterModal from '../components/NewsletterModal';
 // Typography
 import {
   Title1,
@@ -20,7 +20,6 @@ import {
 export default function Home() {
   const themeContext = useContext(ThemeContext);
   const [activeTab, setActiveTab] = useState('Who We Are');
-  const [showModal, setShowModal] = useState(true);
 
   const AboutHeader = styled.div`
     display: flex;
@@ -95,10 +94,12 @@ export default function Home() {
             <Body>This second part still needs to be done</Body>
           }
         </ContentContainer>
-        <NewsletterModal
-          show={showModal}
-          onClose={() => setShowModal(false)}
-        />
+        <ContentContainer>
+          <Title1 withGradient align="center">
+            Hackathons
+          </Title1>
+          <Hackathons />
+        </ContentContainer>
         <Footer />
       </Background>
     </>

diff --git a/public/assets/HackCamp2021.png b/public/assets/HackCamp2021.png
diff --git a/public/assets/cmd-f2021.png b/public/assets/cmd-f2021.png
diff --git a/public/assets/nwHacks2021.png b/public/assets/nwHacks2021.png