mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
Add /congressional-app-challenge landing page (#1361)
* Create congressional-app-challenge * Rename congressional-app-challenge to congressional-app-challenge.js let me be smart this time and add .js * Update congressional-app-challenge.js setting up the page and adding the first two containers! * Update congressional-app-challenge.js small edits * responsive styling responsive styling mainly with the images * did step 1 and 2 sections * added made with <3 note * minor ui updates * content updates * updates * added past winner cards to prep for carousel and ysws buttons * quick button ui update * refactor past winner cards for carousel * did grant section, organized code, added graphics * Made winners carousel * updated zoom card ui and tweaked carousel a bit * Added seamless scrolling to cac carousel * Fixed carousel so scrolling moves cards one by one * updates --------- Co-authored-by: Sophia E <sophialuvv2@gmail.com> Co-authored-by: phthallo <annabelquach13@gmail.com> Co-authored-by: Annabel Q <84078890+phthallo@users.noreply.github.com> Co-authored-by: Kyra Ezikeuzor <kyraezikeuzor@gmail.com>
This commit is contained in:
zach latta
GitHub
parent
942f26b77e
commit
ab363f1032
6 changed files with 20122 additions and 1800 deletions
21
components/congressional-app-challenge/carousel-cards.js
Normal file
21
components/congressional-app-challenge/carousel-cards.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Box, Text, Image, Link } from 'theme-ui'
|
||||
|
||||
export default function Carousel({
|
||||
title,
|
||||
user,
|
||||
description,
|
||||
link,
|
||||
img
|
||||
}){
|
||||
return (
|
||||
<Box id={user} sx={{width:['65%', '80%'], m:'3', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
|
||||
<Image src={img} sx={{ borderRadius: '10px 10px 0 0', width: '100%', height: ['12em', '15em']}}></Image>
|
||||
<Box sx={{alignItems:'left', textAlign:'left', display:'flex', flexDirection:'column', background:'white', color:'black', p:'2', borderRadius: '0 0 10px 10px', marginBottom: '2', padding: '3', height: '8em'}}>
|
||||
<Link href = {link} target="_blank" rel="noopener">
|
||||
<Text as="h3" sx={{}}>{title}</Text>
|
||||
</Link>
|
||||
<Text as="i" sx={{}}>{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
212
components/congressional-app-challenge/carousel.js
Normal file
212
components/congressional-app-challenge/carousel.js
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
import React, { useRef, useEffect } from 'react';
|
||||
import CarouselCards from './carousel-cards';
|
||||
|
||||
|
||||
const Carousel = ({ cards }) => {
|
||||
const scrollContainerRef = useRef(null);
|
||||
const cardsPerView = 1; // Number of cards that can be seen at once
|
||||
const cardWidth = 400; // Width of each card in pixels
|
||||
const scrollAmount = cardWidth; // Total scroll width for each move
|
||||
const totalCards = cards.length;
|
||||
|
||||
// Made another set of cards to do infinite scrolling
|
||||
const infiniteCards = [...cards, ...cards, ...cards]; // Repeat the cards 3x for non-choppy scrolling
|
||||
|
||||
// Fixes scroll position to the middle set the mount for non-choppy scrolling
|
||||
useEffect(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
const initialScroll = totalCards * cardWidth; // Scroll to the start of the second set of items
|
||||
scrollContainerRef.current.scrollLeft = initialScroll;
|
||||
}
|
||||
}, [totalCards, cardWidth]);
|
||||
|
||||
const moveCarousel = (direction) => {
|
||||
if (scrollContainerRef.current) {
|
||||
const scrollValue = direction * scrollAmount;
|
||||
scrollContainerRef.current.scrollBy({
|
||||
left: scrollValue,
|
||||
behavior: 'smooth', // Smooth scrolling effect
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (scrollContainerRef.current) {
|
||||
const { scrollLeft, scrollWidth } = scrollContainerRef.current;
|
||||
const maxScrollLeft = scrollWidth - scrollContainerRef.current.clientWidth;
|
||||
|
||||
// Reset to the middle set of cards if we've scrolled to either end
|
||||
if (scrollLeft === 0) {
|
||||
scrollContainerRef.current.scrollLeft = totalCards * cardWidth; // Reset to the end of the second set
|
||||
} else if (scrollLeft >= maxScrollLeft) {
|
||||
scrollContainerRef.current.scrollLeft = totalCards * cardWidth - scrollAmount; // Reset to the start of the second set
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden', // Hide overflow content
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => moveCarousel(-1)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '10px',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'white',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
❮
|
||||
</button>
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
onScroll={handleScroll}
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '70%',
|
||||
overflowX: 'hidden', // Hide overflow content
|
||||
}}
|
||||
>
|
||||
{infiniteCards.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: `${cardWidth}px`, // Set width for each card
|
||||
flex: '0 0 auto', // Prevent cards from shrinking
|
||||
marginRight: '2px', // Spacing between cards
|
||||
}}
|
||||
>
|
||||
<CarouselCards {...item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => moveCarousel(1)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'white',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
❯
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/*
|
||||
const Carousel = ({ cards }) => {
|
||||
const scrollContainerRef = useRef(null);
|
||||
const cardsPerView = 1; // Number of cards visible at once
|
||||
const cardWidth = 400; // Width of each card in pixels
|
||||
const scrollAmount = cardsPerView * cardWidth; // Total scroll width for each move
|
||||
|
||||
const moveCarousel = (direction) => {
|
||||
if (scrollContainerRef.current) {
|
||||
const scrollValue = direction * scrollAmount;
|
||||
scrollContainerRef.current.scrollBy({
|
||||
left: scrollValue,
|
||||
behavior: 'smooth', // Smooth scrolling effect
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden', // Hide overflow content
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => moveCarousel(-1)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '10px',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'white',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
❮
|
||||
</button>
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
style={{
|
||||
display: 'flex',
|
||||
margin: '0',
|
||||
width: '70%',
|
||||
overflowX: 'hidden', // Hide overflow content
|
||||
}}
|
||||
>
|
||||
{cards.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: `${cardWidth}px`, // Set width for each card
|
||||
flex: '0 0 auto', // Prevent cards from shrinking
|
||||
marginRight: '2px', // Spacing between cards
|
||||
}}
|
||||
>
|
||||
<CarouselCards {...item} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => moveCarousel(1)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'white',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
❯
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
*/
|
||||
export default Carousel;
|
||||
|
||||
|
||||
|
||||
/*export default function Carousel({ cards }) {
|
||||
return (
|
||||
<Grid id="winners" gap={2} columns={[1, null, 3]} sx={{m:'2', justifyContent:'center', alignItems:'center', justifyItems:'center'}}>
|
||||
{cards.map((card, idx) => (
|
||||
<CarouselCards key={idx} {...card} />
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}*/
|
||||
51
lib/congressional-carousel.json
Normal file
51
lib/congressional-carousel.json
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
[
|
||||
{
|
||||
"title": "Starfly (Andrea, 16)",
|
||||
"user": "Andrea",
|
||||
"description": "Starfly bridges the gap between gender and racial profiles in astronomy and STEM.",
|
||||
"link": "https://www.congressionalappchallenge.us/23-CA38/",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/3starfly.png"
|
||||
},
|
||||
{
|
||||
"title": "Lexiscan (Clay, 16)",
|
||||
"user": "Clay",
|
||||
"description": "Lexiscan is an app that helps people with dyslexia to read by reading text out loud.",
|
||||
"link": "https://www.congressionalappchallenge.us/23-VT00/",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/2lexiscan.png"
|
||||
},
|
||||
{
|
||||
"title": "DriveSmart (Sahiti, 17)",
|
||||
"user": "Sahiti",
|
||||
"description": "Drivesmart helps teen drivers be safe on the roads through ML and moderation.",
|
||||
"link": "https://www.congressionalappchallenge.us/23-GA06/",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/1drivesmart.png"
|
||||
},
|
||||
{
|
||||
"title": "TrailUS (Alex, 15)",
|
||||
"user": "Alex",
|
||||
"description": "TrailUS encourages healthier lifestyles and makes it easy for people to enjoy local trails.",
|
||||
"link": "https://www.congressionalappchallenge.us/22-TX22/",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/5trailus.png"
|
||||
},
|
||||
{
|
||||
"title": "Dreamer (Samay, 17)",
|
||||
"user": "Samay",
|
||||
"description": "Dreamer makes learning more interesting for students with learning disorders.",
|
||||
"link": "https://www.congressionalappchallenge.us/23-SC05/",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/0dreamer.png"
|
||||
},
|
||||
{
|
||||
"title": "Moment-ly (Zoya, 17)",
|
||||
"user": "Zoya",
|
||||
"description": "Moment-ly motivates a female demographic with tools, while promoting wellness.",
|
||||
"link": "#",
|
||||
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/4momently.png"
|
||||
},
|
||||
{
|
||||
"title": "Progress in Congress (Anish)",
|
||||
"user": "Anish",
|
||||
"description": "Helps people stay informed about politics in their area",
|
||||
"link": "https://www.congressionalappchallenge.us/22-NY18/",
|
||||
"img": "https://cloud-454mt4dys-hack-club-bot.vercel.app/0image.png"
|
||||
}
|
||||
]
|
||||
17463
package-lock.json
generated
Normal file
17463
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
609
pages/congressional-app-challenge.js
Normal file
609
pages/congressional-app-challenge.js
Normal file
|
|
@ -0,0 +1,609 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import NextLink from 'next/link'
|
||||
import Nav from '../components/nav'
|
||||
import SlideDown from '../components/slide-down'
|
||||
import FadeIn from '../components/fade-in'
|
||||
import Icon from '../components/icon'
|
||||
import Footer from '../components/footer'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import Carousel from '../components/congressional-app-challenge/carousel'
|
||||
|
||||
const color = '#000000'
|
||||
|
||||
function Page({
|
||||
carouselCards
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Congressional App Challenge x Hack Club"
|
||||
description="Landing page about how Hack Club can help students apply to the Congressional App Challenge"
|
||||
image="https://cloud-r4rrjh2z8-hack-club-bot.vercel.app/52020-07-25_52g0nw40p2b00dh39mt93xq5ubku6yaj.jpeg"
|
||||
/>
|
||||
<Nav color={color} light />
|
||||
<Box id="main">
|
||||
<Box id="header"
|
||||
as="header"
|
||||
sx={{
|
||||
color: 'text',
|
||||
pt: [5, null, null, null, 6],
|
||||
pb: [1, 2, 3, null, 4],
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="title"
|
||||
sx={{
|
||||
color: 'black',
|
||||
textShadow: 'text',
|
||||
width: '90%',
|
||||
my: [3, 4],
|
||||
mx: 'auto',
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
>
|
||||
Build a cool project for the{' '}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
color: '#C70000',
|
||||
}}
|
||||
>
|
||||
Congressional App Challenge
|
||||
</Text>
|
||||
</Heading>
|
||||
<Box
|
||||
id="lines"
|
||||
sx={{
|
||||
my: 5,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="hr"
|
||||
sx={{
|
||||
border: 'none',
|
||||
borderTop: '20px solid',
|
||||
borderColor: '#C70000',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
as="hr"
|
||||
sx={{
|
||||
border: 'none',
|
||||
borderTop: '20px solid',
|
||||
borderColor: '#001D85',
|
||||
width: '100%',
|
||||
my: 3,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Container
|
||||
id="about-hack-club"
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
width: '90%',
|
||||
display: 'flex',
|
||||
flexDirection: ['column', 'row']}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems:['center', 'flex-start'],
|
||||
width: ['100%', '60%']
|
||||
}}
|
||||
>
|
||||
<Text variant="headline" as="h1" >What is Hack Club?</Text>
|
||||
<Text variant="subtitle" as="p" sx={{ textAlign: ['center', 'left']}}>
|
||||
Hack Club is a community of thousands of Hack Clubbers who gather online and in person to make things with code.
|
||||
Whether you’re a beginner programmer or have years of experience, there’s a place for you at Hack Club.
|
||||
At Hack Club, you can meet other Hack Clubbers in your community at one of the 400+ Hack Clubs and high school
|
||||
hackathons or build open-source games and tools together.
|
||||
</Text>
|
||||
<a target="_blank" href="https://forms.hackclub.com/t/eLhFehpKG6us">
|
||||
<Button
|
||||
sx={{
|
||||
background:'#001D85',
|
||||
color:'white',
|
||||
borderRadius:'10px',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
fontSize:'23px',
|
||||
margin: '10px 0 10px 0',
|
||||
fontWeight:'bold'}}>
|
||||
Get Free Stickers!
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
<Image src="/home/flagship_4.jpg"
|
||||
sx={{
|
||||
width: ['80%', '60%', '40%'],
|
||||
marginTop: ['10px', 'null'],
|
||||
borderRadius:'10px',
|
||||
border: '5px solid',
|
||||
borderColor: '#C70000',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
marginLeft: '10px'}}>
|
||||
</Image>
|
||||
|
||||
</Container>
|
||||
<Container
|
||||
id="about-congressional"
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
width: '90%',
|
||||
display: 'flex',
|
||||
marginTop: '4',
|
||||
flexDirection: ['column', 'row']}}>
|
||||
<Image src="https://www.congressionalappchallenge.us/wp-content/uploads/2018/08/Congressional-App-Challenge-Coalition-Vertical-2.png"
|
||||
sx={{
|
||||
width: ['80%', '60%', '40%'],
|
||||
marginBottom: ['10px', 'null'],
|
||||
borderRadius:'10px',
|
||||
border: '5px solid',
|
||||
borderColor: '#C70000',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
marginRight: '10px',
|
||||
order: [1,0],
|
||||
marginTop: ['10px', 'null']}}>
|
||||
</Image>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems:['center', 'flex-end'],
|
||||
width: ['100%', '60%']
|
||||
}}
|
||||
>
|
||||
<Text variant="headline" as="h1" sx={{textAlign: ['center', 'right']}}>What is the Congressional App Challenge?</Text>
|
||||
<Text variant="subtitle" as="p" sx={{textAlign: ['center', 'right']}}>
|
||||
The Congressional App Challenge is a contest where students create their own app,
|
||||
regardless of their coding experience. In 2022, 35% of participants were beginners.
|
||||
You’ll learn coding skills, showcase your ideas, and access various opportunities.
|
||||
</Text>
|
||||
<a target="_blank" href="https://www.congressionalappchallenge.us/">
|
||||
<Button
|
||||
sx={{
|
||||
background:'#001D85',
|
||||
color:'white',
|
||||
borderRadius:'10px',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
fontSize:'23px',
|
||||
margin: '10px 0 10px 0',
|
||||
fontWeight:'bold'}}>
|
||||
Learn more here
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
</Container>
|
||||
<Container id="steps" sx={{alignItems:'center', textAlign:'center', marginTop: '4',width: '90%'}}>
|
||||
<Text variant="headline" as="h1">
|
||||
<Text as="span">
|
||||
How can Hack Club help you make an{' '}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
color: '#C70000',
|
||||
}}
|
||||
>
|
||||
AMAZING{' '}
|
||||
</Text>
|
||||
<Text>Project?</Text>
|
||||
</Text>
|
||||
<Container id="step1" sx={{alignContent:'center'}}>
|
||||
<Text as="h2" sx={{color:'#C70000', fontSize:'30px', mt:'2'}}>STEP 1</Text>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
marginTop: '2',
|
||||
flexDirection: ['column', 'row'],
|
||||
justifyContent:'center'
|
||||
}}>
|
||||
<Text as="p" sx={{width:['100%', '50%'], fontSize:'23px', textAlign:['center','left']}}>Join the Hack Club Slack to get advice from past winners, help with your project, and to join a community of over 35K+ teen coders.</Text>
|
||||
<a target="_blank" href="https://hackclub.com/slack/">
|
||||
<Button
|
||||
sx={{
|
||||
background:'#001D85',
|
||||
color:'white',
|
||||
borderRadius:'10px',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
fontSize:'25px',
|
||||
marginTop:'5px',
|
||||
fontWeight:'bold',
|
||||
ml:'2'}}>
|
||||
#congressional-app-challenge
|
||||
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
</Container>
|
||||
<Container id="step2"
|
||||
sx={{
|
||||
background:'#001D85',
|
||||
width:'100%',
|
||||
borderRadius: '20px',
|
||||
color:'white',
|
||||
p:'2', mt:'5',
|
||||
alignItems:'center',
|
||||
display:'flex',
|
||||
flexDirection:'column'
|
||||
}}>
|
||||
<Text as="h2" sx={{fontSize:'30px', mt:'3', color:'#C70000'}}>STEP 2</Text>
|
||||
<Text as="p" sx={{width: ['90%', '70%'], fontSize:'23px'}}>Join Zoom calls with past Hack Club winners to learn about their projects and to get advice on where to start.</Text>
|
||||
<Box
|
||||
sx={{
|
||||
display:'flex',
|
||||
flexDirection:['column', 'row'],
|
||||
m:'2'}}>
|
||||
<Box
|
||||
sx={{
|
||||
display:'flex',
|
||||
flexDirection:'column'}}>
|
||||
<Image
|
||||
src="/home/flagship_4.jpg"
|
||||
sx={{ borderRadius: '10px', m:'3', wdith:['100%', '50%']}}>
|
||||
</Image>
|
||||
<Text as='p' sx={{fontSize:'23px'}}>Clay, 16</Text>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display:'flex',
|
||||
flexDirection:'column'}}>
|
||||
<Image
|
||||
src="/home/flagship_4.jpg"
|
||||
sx={{ borderRadius: '10px', m:'3', wdith:['100%', '50%']}}>
|
||||
</Image>
|
||||
<Text as='p' sx={{fontSize:'23px'}}>Sahiti, 17</Text>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display:'flex',
|
||||
flexDirection:'column'}}>
|
||||
<Image
|
||||
src="/home/flagship_4.jpg"
|
||||
sx={{ borderRadius: '10px', m:'3', wdith:['100%', '50%']}}>
|
||||
</Image>
|
||||
<Text as='p' sx={{fontSize:'23px'}}>Name, Age</Text>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display:'flex',
|
||||
flexDirection:'column'}}>
|
||||
<Image
|
||||
src="/home/flagship_4.jpg"
|
||||
sx={{ borderRadius: '10px', m:'3', wdith:['100%', '50%']}}>
|
||||
</Image>
|
||||
<Text as='p' sx={{fontSize:'23px'}}>Name, Age</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Grid
|
||||
id="zoom-cards"
|
||||
gap={2}
|
||||
columns={[1, null, 3]}
|
||||
sx={{
|
||||
m:'2',
|
||||
justifyContent:'center',
|
||||
alignItems:'center',
|
||||
justifyItems:'center'}}
|
||||
>
|
||||
<Box id="zoom-card" sx={{width:['90%'], m:'3'}}>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems:'center',
|
||||
textAlign:'center',
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
background:'white',
|
||||
color:'black',
|
||||
p:'2',
|
||||
borderRadius: '10px',
|
||||
marginBottom: '2',
|
||||
padding: '3'}}
|
||||
>
|
||||
<Text as="h3" sx={{}}>September 10th, 7 PM EST</Text>
|
||||
<a>
|
||||
<Button sx={{background:'#001D85', color:'#white', mt:'2', borderRadius:'10px'}}>Add to Calendar</Button>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box id="zoom-card" sx={{width:['90%'], m:'3'}}>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems:'center',
|
||||
textAlign:'center',
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
background:'white',
|
||||
color:'black',
|
||||
p:'2',
|
||||
borderRadius: '10px',
|
||||
marginBottom: '2',
|
||||
padding: '3'}}
|
||||
>
|
||||
<Text as="h3" sx={{}}>September 19th, 8 PM EST</Text>
|
||||
<a>
|
||||
<Button sx={{background:'#001D85', color:'#white', mt:'2', borderRadius:'10px'}}>Add to Calendar</Button>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box id="zoom-card" sx={{width:['90%'], m:'3'}}>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems:'center',
|
||||
textAlign:'center',
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
background:'white',
|
||||
color:'black',
|
||||
p:'2',
|
||||
borderRadius: '10px',
|
||||
marginBottom: '2',
|
||||
padding: '3'}}
|
||||
>
|
||||
<Text as="h3" sx={{}}>October 2nd, 7 PM EST</Text>
|
||||
<a>
|
||||
<Button sx={{background:'#001D85', color:'#white', mt:'2', borderRadius:'10px'}}>Add to Calendar</Button>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
</Container>
|
||||
<Container id='step3'
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
marginTop: '2',
|
||||
flexDirection: 'column',
|
||||
justifyContent:'center'
|
||||
}}>
|
||||
<Text as="h2" sx={{color:'#C70000', fontSize:'30px', mt:'3'}}>STEP 3</Text>
|
||||
<Text as="p" sx={{width: ['90%', '70%'], fontSize:'23px'}}>Submit your project for a grant!</Text>
|
||||
<Grid
|
||||
id="grant-drig"
|
||||
gap={4}
|
||||
columns={[1, 2]}
|
||||
gridAutoRows={'1fr'}
|
||||
sx={{
|
||||
m:'2',
|
||||
justifyContent:'center',
|
||||
alignItems:'center'
|
||||
}}>
|
||||
<Box bg="#e9e9e9" sx={{borderRadius:'30px', p:'3', border: '3px solid', borderColor: '#C70000', height:'100%'}}>
|
||||
<Image
|
||||
sx={{
|
||||
width:['100%', '55%']}}
|
||||
src='https://cloud-d1apz790h-hack-club-bot.vercel.app/0orpheuslaptop.png'
|
||||
>
|
||||
</Image>
|
||||
<Text as='h4' sx={{fontSize:'20px'}}>1. First, Come up with a project idea for the Congressional App Challenge, see project guidelines </Text>
|
||||
<a href='https://www.congressionalappchallenge.us/students/rules/'>
|
||||
<Text sx={{fontSize:'20px'}}as='h4'>here.</Text>
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
bg="#e9e9e9"
|
||||
sx={{
|
||||
borderRadius:'30px',
|
||||
p:'3', width:'100%',
|
||||
border: '3px solid',
|
||||
borderColor: '#C70000',
|
||||
height:'100%',
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
justifyContent:'center',
|
||||
alignItems:'center'}}
|
||||
>
|
||||
<Box sx={{display:'flex', flexDirection:'column'}}>
|
||||
<Box sx={{display:'flex', m:'2', justifyContent:'center', alignItems:'center', textAlign:'center'}}>
|
||||
<a href='https://sprig.hackclub.com/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
borderRadius:'10px', mr:'2'}}
|
||||
>Sprig
|
||||
</Button>
|
||||
</a>
|
||||
<Text as='p' sx={{width:'100%'}}>Build a JS game, play it on your own console</Text>
|
||||
</Box>
|
||||
<Box sx={{display:'flex', m:'2', justifyContent:'center', alignItems:'center', textAlign:'center'}}>
|
||||
<a href='https://hackclub.com/bin/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
width:'100%', borderRadius:'10px', mr:'2'}}
|
||||
>The Bin
|
||||
</Button>
|
||||
</a>
|
||||
<Text as='p' sx={{width:'100%'}}>Build an online circuit, get the parts for free!</Text>
|
||||
</Box>
|
||||
<Box sx={{display:'flex', m:'2', justifyContent:'center', alignItems:'center', textAlign:'center'}}>
|
||||
<a href='https://hackclub.com/onboard/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
borderRadius:'10px', mr:'2'}}
|
||||
>OnBoard
|
||||
</Button>
|
||||
</a>
|
||||
<Text as='p' sx={{width:'100%'}}>Design a PCB, get a $100 gran</Text>
|
||||
</Box>
|
||||
<Box sx={{display:'flex', m:'2', justifyContent:'center', alignItems:'center', textAlign:'center'}}>
|
||||
<a href='https://blot.hackclub.com/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
borderRadius:'10px', mr:'2'}}
|
||||
>Blot
|
||||
</Button>
|
||||
</a>
|
||||
<Text as='p' sx={{width:'100%'}}>Write code. Make art. Get a drawing machine.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text as='h4' sx={{mt:'2', fontSize:'20px'}}>2. Submit your project to one of Hack Club's Hardware You Ship, We Ship.</Text>
|
||||
</Box>
|
||||
<Box
|
||||
bg="#e9e9e9"
|
||||
sx={{
|
||||
borderRadius:'30px',
|
||||
p:'3',
|
||||
border: '3px solid',
|
||||
borderColor: '#C70000',
|
||||
height:'100%'}}
|
||||
>
|
||||
<Image
|
||||
sx={{
|
||||
width:['100%', '60%']}}
|
||||
src='https://cloud-he1w40eua-hack-club-bot.vercel.app/0hardware.png'
|
||||
>
|
||||
</Image>
|
||||
<Text as='h4' sx={{fontSize:'20px'}}>3. Receive hardware that helps you complete your project.</Text>
|
||||
</Box>
|
||||
<Box
|
||||
bg="#e9e9e9"
|
||||
sx={{
|
||||
borderRadius:'30px',
|
||||
p:'3',
|
||||
border: '3px solid',
|
||||
borderColor: '#C70000',
|
||||
height:'100%'}}
|
||||
>
|
||||
<Image
|
||||
sx={{
|
||||
width:['100%', '60%']}}
|
||||
src='https://cloud-9e2cjx37b-hack-club-bot.vercel.app/0laptop.png'
|
||||
>
|
||||
</Image>
|
||||
<Text as='h4' sx={{fontSize:'20px'}}>4. Submit your project to the Congressional App Challenge.</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Text as="p" sx={{width: ['90%', '70%'], fontSize:'23px', mt:'4'}}>Explore other Hack Club You Ship, We Ship for additional grants</Text>
|
||||
<Grid
|
||||
id="ysws"
|
||||
gap={2}
|
||||
columns={[1, 3]}
|
||||
sx={{
|
||||
justifyContent:'center',
|
||||
alignItems:'center',
|
||||
fontSize:'14px',
|
||||
mt:'3'}}
|
||||
>
|
||||
<a href='https://boba.hackclub.com/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
width:'100%', borderRadius:'10px'}}
|
||||
>Boba Drops
|
||||
</Button>
|
||||
</a>
|
||||
<a href='https://fraps.hackclub.com/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
width:'100%',
|
||||
borderRadius:'10px'}}
|
||||
>Hackaccino
|
||||
</Button>
|
||||
</a>
|
||||
<a href='https://cider.hackclub.com/' target="_blank">
|
||||
<Button
|
||||
sx={{
|
||||
color:'#001D85',
|
||||
background:'white',
|
||||
border: '3px solid',
|
||||
borderColor: '#001D85',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
width:'100%',
|
||||
borderRadius:'10px'}}
|
||||
>Cider
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
</Grid>
|
||||
</Container>
|
||||
</Container>
|
||||
|
||||
<Container id="past-winners"
|
||||
sx={{
|
||||
background:'#001D85',
|
||||
width:'90%',
|
||||
borderRadius: '20px',
|
||||
color:'white',
|
||||
p:'2', mt:'5',
|
||||
alignItems:'center',
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
textAlign:'center'
|
||||
}}>
|
||||
<Text as="h2" sx={{fontSize:'30px', mt:'3', color:'white'}}>Past Hack Club Winners</Text>
|
||||
<Carousel cards = {carouselCards} />
|
||||
</Container>
|
||||
<Container id="madeby" sx={{mt:'4', mb:'4', textAlign:'center', alignItems:'center'}}>
|
||||
<Text as="h2" sx={{fontSize:'25px'}}>Made with <3 by Hack Clubbers</Text>
|
||||
</Container>
|
||||
|
||||
</Box>
|
||||
<Footer light />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
const carouselCards = require('../lib/congressional-carousel.json')
|
||||
return {
|
||||
props: {
|
||||
carouselCards
|
||||
},
|
||||
revalidate: 60
|
||||
}
|
||||
}
|
||||
|
||||
export default Page
|
||||
Loading…
Add table
Reference in a new issue