diff --git a/components/HackathonCard.js b/components/HackathonCard.js index f05b118..bacec55 100644 --- a/components/HackathonCard.js +++ b/components/HackathonCard.js @@ -1,6 +1,11 @@ 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; @@ -8,17 +13,14 @@ const CardContainer = styled.div` 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 ( - + @@ -73,7 +75,7 @@ const HackathonCard = ({ registrationOpen, link, dateString, imageLink }) => { - + ) } diff --git a/components/Hackathons.js b/components/Hackathons.js new file mode 100644 index 0000000..61ae613 --- /dev/null +++ b/components/Hackathons.js @@ -0,0 +1,67 @@ +import { useState } from 'react' +import styled 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!'; + +const HackathonsContainer = styled.div` + display: flex; + justify-content: center; + margin-top: 2em; + + ${(p) => p.theme.mediaQueries.mobile} { + flex-direction: column; + align-items: center; + } +`; + +export default function Hackathons() { + const [showModal, setShowModal] = useState(false); + + return ( + <> + + + + + + setShowModal(true)}>Subscribe {subscribeCTAText} + setShowModal(false)} + /> + + ) +} \ No newline at end of file diff --git a/components/Modal.js b/components/Modal.js index 3717363..5eaf819 100644 --- a/components/Modal.js +++ b/components/Modal.js @@ -4,62 +4,62 @@ */ -import React, { useContext } from 'react' -import styled, { ThemeContext } from 'styled-components' +import React from 'react' +import styled from 'styled-components' -export default function Modal({ children, show, onClose }) { - const themeContext = useContext(ThemeContext); +const ModalBackground = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.25); + display: flex; + align-items: center; + justify-content: center; + z-index: 99; +`; - const ModalBackground = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.25); - display: flex; - align-items: center; - justify-content: center; - z-index: 99; - `; +const ModalContainer = styled.div` + position: fixed; + width: 884px; + max-height: 525px; + background: url(/assets/modal_bg.svg); + border-radius: 42px; + padding: 48px; - const ModalContainer = styled.div` - position: fixed; - width: 884px; - max-height: 525px; - background: url(/assets/modal_bg.svg); - border-radius: 42px; - padding: 48px; - ${themeContext.mediaQueries.mobile} { - width: 304px; - max-height: 432px; - background: url(/assets/mobile_modal_bg.svg); - padding: 48px 16px; - } - `; + ${(p) => p.theme.mediaQueries.mobile} { + width: 304px; + max-height: 432px; + background: url(/assets/mobile_modal_bg.svg); + padding: 48px 16px; + } +`; - // Use a button element for accessibility - const CloseButton = styled.button` - position: absolute; +// Use a button element for accessibility +const CloseButton = styled.button` + position: absolute; + top: 48px; + right: 48px; + border: none; + background: none; + + ${(p) => p.theme.mediaQueries.mobile} { top: 48px; - right: 48px; - border: none; - background: none; - ${themeContext.mediaQueries.mobile} { - top: 48px; - right: 16px; + right: 16px; - img { - width: 16px; - height: 16px; - } + img { + width: 16px; + height: 16px; } + } - &:hover { - cursor: pointer; - } - `; + &:hover { + cursor: pointer; + } +`; +export default function Modal({ children, show, onClose }) { return ( <> {show && diff --git a/components/NewsletterModal.js b/components/NewsletterModal.js index 5da065a..73a69cf 100644 --- a/components/NewsletterModal.js +++ b/components/NewsletterModal.js @@ -5,62 +5,62 @@ import Button from './Button' import Modal from './Modal' import { Body, Title2 } from './Typography' -export default function NewsletterModal({ show, onClose }) { - const themeContext = useContext(ThemeContext); - const [inputMessage, setInputMessage] = useState(''); - - const ComboButton = styled(Button)` - margin-top: -41px; - margin-left: calc(100% - 200px); +const ComboButton = styled(Button)` + margin-top: -41px; + margin-left: calc(100% - 200px); + + ${(p) => p.theme.mediaQueries.mobile} { + height: 36px; + width: 90px; + margin-top: -36px; + margin-left: calc(100% - 90px); + } - ${themeContext.mediaQueries.mobile} { - height: 36px; - width: 90px; - margin-top: -36px; - margin-left: calc(100% - 90px); - } + &:hover { + cursor: pointer; + } +`; - &:hover { - cursor: pointer; - } - `; +const Content = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +`; - const Content = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - `; +const Description = styled.div` + width: 50%; - const Description = styled.div` - width: 50%; + ${(p) => p.theme.mediaQueries.mobile} { + width: 75%; + } +`; - ${themeContext.mediaQueries.mobile} { - width: 75%; - } - `; +const Logo = styled.img` +${(p) => p.theme.mediaQueries.mobile} { + width: 60px; + } +`; + +const StyledInput = styled.input` + border: 2px solid ${(p) => p.theme.colors.primary}; + border-radius: 8px; + padding: 8px 12px; + background: transparent; + color: white; + font-weight: normal; + font-size: 18px; + width: 100%; + + ${(p) => p.theme.mediaQueries.mobile} { + padding: 4px 8px; + font-size: 14px; + line-height: 24px; + } +`; - const Logo = styled.img` - ${themeContext.mediaQueries.mobile} { - width: 60px; - } - `; - - const StyledInput = styled.input` - border: 2px solid ${themeContext.colors.primary}; - border-radius: 8px; - padding: 8px 12px; - background: transparent; - color: white; - font-weight: normal; - font-size: 18px; - width: 100%; - - ${themeContext.mediaQueries.mobile} { - padding: 4px 8px; - font-size: 14px; - line-height: 24px; - } - `; +export default function NewsletterModal({ show, onClose }) { + const themeContext = useContext(ThemeContext); + const [inputMessage, setInputMessage] = useState(''); const emailInput = React.createRef(); function addToMailingList() { @@ -125,9 +125,7 @@ export default function NewsletterModal({ show, onClose }) { - + nwPlus Newsletter Sign-up Subscribe to our newsletter to stay up to date and for upcoming events! diff --git a/components/ResourceContainer.js b/components/ResourceContainer.js index 978e8c5..a559f26 100644 --- 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() { {RESOURCES_TITLE} - - {RESOURCES_BODY} + + {RESOURCES_BODY} {RESOURCES_LINK_TEXT} - + diff --git a/components/Typography.js b/components/Typography.js index a9e53b5..9339460 100644 --- 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 index 48684fb..671fd3a 100644 --- 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 index 700a3c1..9f2966c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,15 +1,14 @@ import Head from 'next/head' -import styled from 'styled-components' +import styled, { ThemeContext } from 'styled-components' import { useContext, useState } from 'react'; -import { ThemeContext } from 'styled-components'; import NavBar from '../components/NavBar'; // Components 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, @@ -17,35 +16,34 @@ import { Body, } from '../components/Typography'; -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; + align-items: center; + gap: 52px; + margin-bottom: 64px; - const AboutHeader = styled.div` - display: flex; - align-items: center; - gap: 52px; - margin-bottom: 64px; + ${(p) => p.theme.mediaQueries.mobile} { + justify-content: center; + gap: 40px; + margin-bottom: 44px; + } +`; - ${themeContext.mediaQueries.mobile} { - justify-content: center; - gap: 40px; - margin-bottom: 44px; - } - `; +const AboutSection = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 128px; - const AboutSection = styled.div` - display: flex; - flex-direction: row; - align-items: center; - gap: 128px; + ${(p) => p.theme.mediaQueries.mobile} { + flex-direction: column; + gap: 32px; + } +`; - ${themeContext.mediaQueries.mobile} { - flex-direction: column; - gap: 32px; - } - `; +export default function Home() { + const themeContext = useContext(ThemeContext); + const [activeTab, setActiveTab] = useState('Who We Are'); return ( <> @@ -95,10 +93,12 @@ export default function Home() { This second part still needs to be done } - setShowModal(false)} - /> + + + Hackathons + + +