mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
Add cards on homepage for summer events (#1563)
* add athena, highway, som, shipwrecked cards * modify style * change image
This commit is contained in:
Belle See
GitHub
parent
824ba442ae
commit
4f508a9bac
14 changed files with 413 additions and 8 deletions
90
components/index/cards/athena.js
Normal file
90
components/index/cards/athena.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Grid, Image, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Athena() {
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
background: 'linear-gradient(30deg,rgb(239, 204, 204), #D35648)',
|
||||
borderRadius: '24px',
|
||||
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
highlight="#FF8C37"
|
||||
visible={true}
|
||||
>
|
||||
<Grid
|
||||
columns={[1, 1, '1fr 1.5fr']}
|
||||
sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
|
||||
>
|
||||
<Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: '200px',
|
||||
width: '100%',
|
||||
display: ['none', 'none', 'block', 'block'],
|
||||
'@keyframes sway': {
|
||||
'0%': { transform: 'rotate(-2deg)' },
|
||||
'50%': { transform: 'rotate(2deg)' },
|
||||
'100%': { transform: 'rotate(-2deg)' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt="Prizes from Athena"
|
||||
src="/home/athena.webp"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: [null, null, '-100px', '-150px'],
|
||||
left: [null, null, '-50px', '-70px'],
|
||||
width: [null, null, '350px', '420px'],
|
||||
objectFit: 'cover',
|
||||
animation: 'sway 4s ease-in-out infinite',
|
||||
maxWidth: 'none',
|
||||
zIndex: 4
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box>
|
||||
<img
|
||||
src="/home/athena_award.svg"
|
||||
alt="The Athena Award"
|
||||
sx={{ width: '100%', marginTop: '-20px' }}
|
||||
/>
|
||||
|
||||
<Text
|
||||
variant="subtitle"
|
||||
sx={{
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
fontSize: ['16px', '18px'],
|
||||
lineHeight: 1.5,
|
||||
mb: 3,
|
||||
display: 'block'
|
||||
}}
|
||||
>
|
||||
Earn an <b>industry recognized technical certificate</b> for coding
|
||||
30 hours and building 3 personal projects. Win prizes as you code,
|
||||
and a chance to travel to NYC for 2025's largest high school
|
||||
hackathon for girls.
|
||||
</Text>
|
||||
|
||||
<Buttons
|
||||
id="athena"
|
||||
link="https://athena.hackclub.com"
|
||||
icon="bolt"
|
||||
primary="white"
|
||||
color="#D35648"
|
||||
>
|
||||
Join Athena
|
||||
</Buttons>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ const CardModel = ({
|
|||
delay,
|
||||
position,
|
||||
filter,
|
||||
visible=false,
|
||||
...props
|
||||
}) => (
|
||||
// <Zoom delay={delay}>
|
||||
|
|
@ -37,7 +38,8 @@ const CardModel = ({
|
|||
backgroundRepeat: 'no-repeat',
|
||||
'& p': {
|
||||
fontSize: ['18px', '20px', '22px']
|
||||
}
|
||||
},
|
||||
overflow: visible ? 'visible' : 'hidden'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
|||
80
components/index/cards/highway.js
Normal file
80
components/index/cards/highway.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Image, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import Balancer from 'react-wrap-balancer'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Highway() {
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontFamily: 'system-ui, sans-serif',
|
||||
minHeight: '350px',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#272239'
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage: 'url(/home/highway-bg.png)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
opacity: 1,
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
px: [3, 4]
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/home/highway-logo.png"
|
||||
alt="Highway logo"
|
||||
sx={{
|
||||
width: ['250px', '350px', '500px'],
|
||||
mb: 3
|
||||
}}
|
||||
/>
|
||||
<Balancer>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
color: 'white',
|
||||
fontSize: ['20px', '22px', '24px'],
|
||||
mb: 3
|
||||
}}
|
||||
>
|
||||
Design a hardware project. Get the parts for free.
|
||||
</Text>
|
||||
</Balancer>
|
||||
<Buttons
|
||||
href="https://highway.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
primary="#24479C"
|
||||
id="53"
|
||||
icon="bolt-circle"
|
||||
>
|
||||
Start building
|
||||
</Buttons>
|
||||
</Flex>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
110
components/index/cards/shipwrecked.js
Normal file
110
components/index/cards/shipwrecked.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Image, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import Balancer from 'react-wrap-balancer'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Shipwrecked() {
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontFamily: 'system-ui, sans-serif',
|
||||
minHeight: '300px',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#272239'
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
backgroundImage: 'url(/home/shipwrecked-bg.webp)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center 20%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
opacity: 1,
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: ['column', 'column', 'row'],
|
||||
justifyContent: ['center', 'center', 'space-between'],
|
||||
alignItems: ['center', 'center', 'stretch']
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
alignSelf: ['center', 'center', 'flex-start'],
|
||||
mt: [0, 0, 3]
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/home/shipwrecked-logo.svg"
|
||||
alt="Shipwrecked logo"
|
||||
sx={{
|
||||
width: ['250px', '250px', '300px'],
|
||||
mb: [3, 3, 5]
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
alignItems: ['center', 'center', 'flex-end'],
|
||||
justifyContent: ['center', 'center', 'flex-end'],
|
||||
textAlign: ['center', 'center', 'right'],
|
||||
mt: [0, 0, 'auto'],
|
||||
mb: [0, 0, 3],
|
||||
gap: 3
|
||||
}}
|
||||
>
|
||||
<Balancer>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
color: ['#7a433c', '#7a433c', 'white'],
|
||||
fontSize: ['20px', '22px', '24px'],
|
||||
backgroundColor: 'rgba(229, 226, 192, 0.02)',
|
||||
backdropFilter: 'blur(5px)',
|
||||
WebkitBackdropFilter: 'blur(5px)',
|
||||
maxWidth: '600px',
|
||||
px: 3,
|
||||
py: 2,
|
||||
borderRadius: '8px',
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
Attend a once in a lifetime, 4-day story-based hackathon on
|
||||
Cathleen Stone Island in the Boston Harbor. Aug 8-11, 2025.
|
||||
</Text>
|
||||
</Balancer>
|
||||
<Buttons
|
||||
href="https://shipwrecked.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
primary="#1e9185"
|
||||
id="53"
|
||||
icon="explore"
|
||||
>
|
||||
Get your invite
|
||||
</Buttons>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
119
components/index/cards/som.js
Normal file
119
components/index/cards/som.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Card, Flex, Grid, Heading, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import Image from 'next/image'
|
||||
import Icon from '@hackclub/icons'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function BreakdownBox({ icon, text, description, href }) {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
position: 'relative',
|
||||
background: 'linear-gradient(145deg, #f6dbba 0%, #e6d4be 100%)',
|
||||
borderRadius: 'clamp(6px, 1.5vw, 10px)',
|
||||
boxShadow:
|
||||
'0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 3px 0 5px rgba(0, 0, 0, 0.05)',
|
||||
transition: 'all 0.3s ease',
|
||||
border: '2px solid rgba(89, 47, 49, 0.3)',
|
||||
overflow: 'hidden',
|
||||
color: 'black',
|
||||
height: '100%',
|
||||
cursor: href ? 'pointer' : 'default',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 2,
|
||||
p: [3, 3, '24px'],
|
||||
marginLeft: ['20px', 0, 0],
|
||||
marginRight: ['20px', 0, 0]
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ alignItems: 'center', gap: '10px' }}>
|
||||
<Icon glyph={icon} size={32} color="#CC676D" />
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: ['16px', '16px', '24px', '26px']
|
||||
}}
|
||||
as="h4"
|
||||
>
|
||||
{text}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: ['14px !important', '16px !important', '18px !important'],
|
||||
lineHeight: 1.25,
|
||||
mt: [1, 2, 2]
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Som() {
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#D1B290'
|
||||
}}
|
||||
background="/home/som-bg.png"
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', null, 'row'],
|
||||
gap: [3, 4, 5],
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
flexWrap: 'nowrap'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: ['100%', '100%', '50%'],
|
||||
margin: ['auto', 'auto', 'initial']
|
||||
}}
|
||||
>
|
||||
<Image src="/home/som.png" width={300} height={180} alt="Summer of making logo" />
|
||||
<Box>
|
||||
<Buttons
|
||||
id="13"
|
||||
link="https://summer.hackclub.com/"
|
||||
icon="enter"
|
||||
primary="#592F31"
|
||||
sx={{ color: '#f6dbba' }}
|
||||
>
|
||||
Start building
|
||||
</Buttons>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: ['100%', '100%', '50%'],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 3,
|
||||
marginRight: [0, null, '20px']
|
||||
}}
|
||||
>
|
||||
<BreakdownBox
|
||||
icon="idea"
|
||||
text="Build Projects"
|
||||
description="Build websites, games, apps, or any other personal open-source coding projects to showcase your skills."
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="plus-fill"
|
||||
text="Get Stuff"
|
||||
description="Get awesome prizes like Raspberry Pis, Server hosting credits, 3D printers, and more to fuel your next creation."
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -40,9 +40,10 @@ import Photo from '../components/photo'
|
|||
import Comma from '../components/comma'
|
||||
import Haxidraw from '../components/index/cards/haxidraw'
|
||||
import Onboard from '../components/index/cards/onboard'
|
||||
import Trail from '../components/index/cards/trail'
|
||||
import Scrapyard from '../components/index/cards/scrapyard'
|
||||
import Neighborhood from '../components/index/cards/neighborhood'
|
||||
import Som from '../components/index/cards/som'
|
||||
import Athena from '../components/index/cards/athena'
|
||||
import Highway from '../components/index/cards/highway'
|
||||
import Shipwrecked from '../components/index/cards/shipwrecked'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Page({
|
||||
|
|
@ -690,11 +691,12 @@ function Page({
|
|||
and make things together!
|
||||
</Text>
|
||||
</Box>
|
||||
<Neighborhood />
|
||||
<Trail />
|
||||
<Pizza />
|
||||
<Scrapyard />
|
||||
<Som />
|
||||
<Athena />
|
||||
<Highway />
|
||||
<Shipwrecked />
|
||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||
<Pizza />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
|
|
|
|||
BIN
public/home/athena.webp
Normal file
BIN
public/home/athena.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
1
public/home/athena_award.svg
Normal file
1
public/home/athena_award.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 329 KiB |
BIN
public/home/highway-bg.png
Normal file
BIN
public/home/highway-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
public/home/highway-logo.png
Normal file
BIN
public/home/highway-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
public/home/shipwrecked-bg.webp
Normal file
BIN
public/home/shipwrecked-bg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
1
public/home/shipwrecked-logo.svg
Normal file
1
public/home/shipwrecked-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 118 KiB |
BIN
public/home/som-bg.png
Normal file
BIN
public/home/som-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
public/home/som.png
Normal file
BIN
public/home/som.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Loading…
Add table
Reference in a new issue