mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
feat: overlapping screens
- add: user profiles for cac winners - add: exclamation sticker but actually on the button this time
This commit is contained in:
phthallo
parent
c110181d74
commit
b9c71c0ac8
5 changed files with 88 additions and 23 deletions
|
|
@ -4,7 +4,8 @@ export default function CustomButton({
|
|||
link,
|
||||
color,
|
||||
textColor, // 🤓
|
||||
sxProps
|
||||
sxProps,
|
||||
children
|
||||
}){ return (
|
||||
<Box sx= {sxProps}>
|
||||
<Button as="a" className="gaegu" href={link} sx = {{
|
||||
|
|
@ -23,7 +24,10 @@ export default function CustomButton({
|
|||
borderColor: "#000"
|
||||
}}>
|
||||
{text}
|
||||
|
||||
<Box sx = {{position: "absolute", right: -12, top: -3 }}>{children}</Box>
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
|
||||
)}
|
||||
|
|
@ -8,7 +8,7 @@ export default function Polaroid({
|
|||
return (
|
||||
<Box sx = {sxProps}>
|
||||
<Box sx = {{margin: 2, backgroundColor: "#fff", border: "2px", width: 200, boxShadow: "1px 1px 1px 1px #9E9E9E"}}>
|
||||
<Image src = {image} sx= {{paddingX: 3, paddingTop: 3}}/>
|
||||
<Image src = {image} sx= {{paddingX: 3, paddingTop: 3, objectFit: "cover"}}/>
|
||||
<Box variant = "caption" sx={{width: "100%", textAlign: "center", paddingBottom: 4, marginBottom: 3}}>{caption}</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import { Box, Text, Image, Link } from 'theme-ui'
|
||||
|
||||
const Screen = ({ backgroundImage }) => {
|
||||
const Screen = ({ backgroundImage, title, sxProps, children, expand }) => {
|
||||
let color = backgroundImage ? "" : "#fff"
|
||||
let expan = expand ? ["100%", null, null, '58vh'] : "58vh"
|
||||
let props = Object.assign({},{display: "flex", flexDirection: "column", width: ["100%", null, null, "55%"]}, sxProps )
|
||||
return (
|
||||
<Box sx = {{display: "flex", flexDirection: "column", width: ["100%", null, null, "55%"]}}>
|
||||
<Box sx = {props}>
|
||||
<Box sx = {{
|
||||
width: ['100%'],
|
||||
width: "100%",
|
||||
borderColor: "black",
|
||||
border: "2px solid",
|
||||
borderRadius: "6px 6px 0 0",
|
||||
|
|
@ -28,7 +30,7 @@ const Screen = ({ backgroundImage }) => {
|
|||
paddingX: 2,
|
||||
height: "80%"
|
||||
}}>
|
||||
<Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>Hack Club - Congressional App Challenge</Text></Box>
|
||||
<Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>{title}</Text></Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx = {{
|
||||
|
|
@ -39,9 +41,12 @@ const Screen = ({ backgroundImage }) => {
|
|||
borderLeft: "2px solid",
|
||||
borderRight: "2px solid",
|
||||
borderRadius: "0 0 6px 6px",
|
||||
height:'58vh',
|
||||
padding: 3,
|
||||
height: expan,
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
backgroundSize: "cover"}}/>
|
||||
backgroundSize: "cover"}}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
19
components/congressional-app-challenge/userProfile.js
Normal file
19
components/congressional-app-challenge/userProfile.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { Box, Image, Text } from 'theme-ui'
|
||||
|
||||
export default function UserProfile({
|
||||
image,
|
||||
name,
|
||||
age,
|
||||
state,
|
||||
description
|
||||
}){
|
||||
return (
|
||||
<Box sx = {{display: "flex", flexDirection: "column", padding: 2, width: 200}}>
|
||||
<Image src = {image} sx = {{objectFit: "cover", borderRadius: 6}}/>
|
||||
<Box sx={{display: "flex", flexDirection: "column", width: "100%", textAlign: "left", paddingBottom: 1, marginBottom: 1}}>
|
||||
<Text variant = "subtitle" className="gaegu">{name} ({age}, {state})</Text>
|
||||
<Text variant = "text" className="gaegu">{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@ import Footer from '../components/footer'
|
|||
import Screen from '../components/congressional-app-challenge/screen'
|
||||
import CustomButton from '../components/congressional-app-challenge/customButton'
|
||||
import Polaroid from '../components/congressional-app-challenge/polaroid'
|
||||
import UserProfile from '../components/congressional-app-challenge/userProfile'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
|
||||
const styled = `
|
||||
|
|
@ -104,9 +105,9 @@ function Page({
|
|||
display: "flex", flexDirection: ["column", null, null, "row"],
|
||||
justifyContent: "center",
|
||||
alignItems: "space-between",
|
||||
mx: "5",
|
||||
mx: ["4", null, "5"],
|
||||
}}>
|
||||
<Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg"/>
|
||||
<Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg" sxProps={{height: ["40vh", null, null, "100%"]}}/>
|
||||
<Box sx = {{display: "flex", flexDirection: "column", width: ["100%", null, null, "45%"], textAlign: ["center", null, null, "right"], alignItems: ['center', null, null, 'flex-end'], marginLeft: [null, null, null, 5], marginTop: [5, null, null, 0], justifyContent: "flex-end"}}>
|
||||
<Box sx = {{display: "flex", flexDirection: "row", alignContent: "space-between"}}>
|
||||
<Image src = "https://assets.hackclub.com/icon-rounded.svg" sx = {{height: 54, px: 1}}/>
|
||||
|
|
@ -116,8 +117,9 @@ function Page({
|
|||
<Heading className="gaegu" variant="subtitle">Hack Club presents the</Heading>
|
||||
<Heading as="h1" variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6"}}>Congressional App Challenge</Heading>
|
||||
<Box sx = {{width: "100%", marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 3, columnGap: 3}}>
|
||||
<CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"], position: 'relative'}}/>
|
||||
<Image src = "/congressional-app-challenge/notify.svg" sx = {{position: "absolute"}}/>
|
||||
<CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"], position: 'relative'}}>
|
||||
<Image src = "/congressional-app-challenge/notify.svg" sx = {{zIndex: "1"}}/>
|
||||
</CustomButton>
|
||||
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
|
||||
</Box>
|
||||
|
|
@ -127,7 +129,7 @@ function Page({
|
|||
|
||||
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['yellow']}}>
|
||||
<Box sx = {{
|
||||
marginX: 5,
|
||||
marginX: [3, 4, 4, 5],
|
||||
padding: 4,
|
||||
backgroundColor: "#fff",
|
||||
border: "1px solid black"}}>
|
||||
|
|
@ -138,9 +140,6 @@ function Page({
|
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</Text>
|
||||
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0]}}>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
|
@ -150,11 +149,11 @@ function Page({
|
|||
<Polaroid
|
||||
image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"
|
||||
caption="sdfjds"
|
||||
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: -3, left: [4, 80, 300, 20]}}/>
|
||||
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: -3, left: [4, 160, 300, 20]}}/>
|
||||
<Polaroid
|
||||
image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"
|
||||
caption="sdfjds"
|
||||
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: -3, left: [4, 60, 220, 6]}}/>
|
||||
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: -3, left: [4,30, 220, 6]}}/>
|
||||
</Box>
|
||||
<Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right", paddingTop: [3, 4, 4, 0]}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
|
|
@ -162,20 +161,58 @@ function Page({
|
|||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box id="winners" sx={{backgroundColor: palette["cream"], padding: 5}}>
|
||||
<Box sx = {{paddingX: 4}}>
|
||||
<Box id="winners" sx={{backgroundColor: palette["cream"], padding: [3, 4, 4, 5]}}>
|
||||
<Box sx = {{padding: 4, height: ["100%", null, null, "90vh"]}}>
|
||||
<Heading as="h1" sx={{pb: 4}}>Meet <span class = "pink">past winners</span></Heading>
|
||||
<Image src = "https://cloud-plfhs012c-hack-club-bot.vercel.app/0windows.png"/>
|
||||
<Box sx = {{position: "relative"}}>
|
||||
<Screen
|
||||
expand
|
||||
title = "Hack Club - Challenge Winners v2 FINAL THIS ONE"
|
||||
sxProps = {{
|
||||
position: ["relative", null, null, "absolute"],
|
||||
top: [0, 0, 0, 40],
|
||||
marginBottom: [2, 2, 2, 0],
|
||||
zIndex: 1
|
||||
}}>
|
||||
<Box sx = {{
|
||||
display: "flex",
|
||||
flexDirection: ["column", "row", "row", "row"],
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
|
||||
<UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
|
||||
</Box>
|
||||
</Screen>
|
||||
|
||||
<Screen
|
||||
expand
|
||||
title = "Hack Club - Challenge Winners (draft)"
|
||||
sxProps = {{
|
||||
position: ["relative", null, null, "absolute"],
|
||||
right: [0, 0, 0, 10],
|
||||
top: [0, 0, 0, -10],
|
||||
zIndex: 0}}>
|
||||
<Box sx = {{
|
||||
display: "flex",
|
||||
flexDirection: ["column", "row", "row", "row"],
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
|
||||
</Box>
|
||||
</Screen>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['blurple']}}>
|
||||
<Box sx = {{
|
||||
marginX: 5,
|
||||
marginX: [3, 4, 4, 5],
|
||||
padding: 4,
|
||||
backgroundColor: "#fff",
|
||||
border: "1px solid black"}}>
|
||||
<Text as="h1" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge close</Text>
|
||||
<Text as="h2" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge close</Text>
|
||||
<Heading variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6", textAlign: 'center'}}>What are you waiting for?</Heading>
|
||||
<Box sx = {{marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 2, columnGap: 2, alignContent: 'space-around', width: "100%"}}>
|
||||
<CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue