Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

QA Fixes #205

Merged
merged 10 commits into from
Oct 2, 2024
Merged

QA Fixes #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9205b5b
QA fixes
DonaldKLee Sep 28, 2024
3f90287
Merge branch 'www-enhancement' into www-enhancements
DonaldKLee Sep 28, 2024
2ca2969
Merge branch 'dev' into www-enhancements
DonaldKLee Sep 29, 2024
fc8b6e6
animations
DonaldKLee Oct 1, 2024
bff61b0
updated yarn
DonaldKLee Oct 1, 2024
32fc7a7
pushed hero down
DonaldKLee Oct 1, 2024
352793e
QA fixes
DonaldKLee Oct 1, 2024
9734152
Merge pull request #204 from nwplus/www-enhancements
DonaldKLee Oct 1, 2024
2e45940
opened apps
DonaldKLee Oct 2, 2024
5fa199c
Merge pull request #206 from nwplus/www-enhancements
DonaldKLee Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions components/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
44 changes: 35 additions & 9 deletions components/Faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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"/>
</>
)
}
2 changes: 1 addition & 1 deletion components/FaqBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
> * {
Expand Down
30 changes: 11 additions & 19 deletions components/Hackathons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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,
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -540,7 +533,6 @@ export default function Hackathons() {

</MobileHackathonsContainer>

<PurpleTextureImg src={PurpleTexture} />
<SpaceDeerImg src={SpaceDeer} />
</>
);
Expand Down
12 changes: 5 additions & 7 deletions components/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down Expand Up @@ -65,10 +65,6 @@ const ComboButton = styled(Button)`
font-size: 0.8em;
border-radius: 6px;
}

&:hover {
cursor: pointer;
}
`;

const StyledInput = styled.input`
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
55 changes: 51 additions & 4 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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%;
Expand All @@ -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);
Expand Down Expand Up @@ -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',
},
]}
/>
Expand All @@ -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 && (
Expand Down
Loading
Loading