mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
feat: polaroid section
fix: desktop screens, kind of fix: buttons, kind of
This commit is contained in:
phthallo
parent
85c48d6f38
commit
c110181d74
5 changed files with 112 additions and 38 deletions
|
|
@ -1,24 +1,29 @@
|
|||
import { Button } from 'theme-ui';
|
||||
import { Button, Box, Text} from 'theme-ui';
|
||||
export default function CustomButton({
|
||||
text,
|
||||
link,
|
||||
color,
|
||||
textColor // 🤓
|
||||
textColor, // 🤓
|
||||
sxProps
|
||||
}){ return (
|
||||
<Box sx= {sxProps}>
|
||||
<Button as="a" className="gaegu" href={link} sx = {{
|
||||
marginTop: 2,
|
||||
padding: 2,
|
||||
padding: 1,
|
||||
height: 60,
|
||||
width: "100%",
|
||||
color: textColor,
|
||||
fontSize: "40",
|
||||
fontSize: "150",
|
||||
borderRadius: 0,
|
||||
textAlign: "center",
|
||||
itemsAlign: "center",
|
||||
alignContent: "center",
|
||||
backgroundColor: color,
|
||||
border: "1px solid",
|
||||
borderColor: "#000"
|
||||
}}>
|
||||
{text}
|
||||
{text}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
)}
|
||||
16
components/congressional-app-challenge/polaroid.js
Normal file
16
components/congressional-app-challenge/polaroid.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Box, Text, Image } from 'theme-ui';
|
||||
|
||||
export default function Polaroid({
|
||||
image,
|
||||
caption,
|
||||
sxProps
|
||||
}){
|
||||
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}}/>
|
||||
<Box variant = "caption" sx={{width: "100%", textAlign: "center", paddingBottom: 4, marginBottom: 3}}>{caption}</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -10,11 +10,25 @@ const Screen = ({ backgroundImage }) => {
|
|||
border: "2px solid",
|
||||
borderRadius: "6px 6px 0 0",
|
||||
height:'7vh',
|
||||
backgroundColor: "white"}}>
|
||||
<Box sx = {{margin: "2", display: "flex", flexDirection: "row"}}>
|
||||
<Box className="circle" sx = {{backgroundColor: "red"}}/>
|
||||
<Box className="circle" sx = {{backgroundColor: "yellow"}}/>
|
||||
<Box className="circle" sx = {{backgroundColor: "green"}}/>
|
||||
backgroundColor: "white",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
flexDirection: "row"}}>
|
||||
<Box sx = {{display: "flex", flexDirection: "row", width: "100%", }}>
|
||||
<Box sx = {{display: "flex", flexDirection: "row", justifyContent: 'center', alignItems: 'center', marginTop: 2, marginBottom: 2, marginLeft: 2}}>
|
||||
<Box className="circle" sx = {{backgroundColor: "red"}}/>
|
||||
<Box className="circle" sx = {{backgroundColor: "yellow"}}/>
|
||||
<Box className="circle" sx = {{backgroundColor: "green"}}/>
|
||||
</Box>
|
||||
<Box className = "hidden" sx = {{
|
||||
borderRadius: "10px",
|
||||
border: "1px solid",
|
||||
marginX: "auto",
|
||||
marginY: "auto",
|
||||
paddingX: 2,
|
||||
height: "80%"
|
||||
}}>
|
||||
<Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>Hack Club - Congressional App Challenge</Text></Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx = {{
|
||||
|
|
|
|||
|
|
@ -12,23 +12,12 @@ import Meta from '@hackclub/meta'
|
|||
import Head from 'next/head'
|
||||
import Nav from '../components/nav'
|
||||
import Footer from '../components/footer'
|
||||
import Carousel from '../components/congressional-app-challenge/carousel'
|
||||
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 ForceTheme from '../components/force-theme'
|
||||
|
||||
const color = '#000'
|
||||
|
||||
const palette = {
|
||||
"cream": "#fffbf1",
|
||||
"pink": "#e15ba6",
|
||||
"blurple": "#413cf2",
|
||||
"yellow": "#facb2d",
|
||||
"black": "#000",
|
||||
"white": "#fff"
|
||||
}
|
||||
|
||||
const style = `
|
||||
const styled = `
|
||||
@import url("https://fonts.googleapis.com/css2?family=Gaegu&display=swap");
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
|
|
@ -43,7 +32,6 @@ const style = `
|
|||
|
||||
.gridlines {
|
||||
background-image: url('/congressional-app-challenge/pattern.svg');
|
||||
background-color: #ebc935
|
||||
}
|
||||
|
||||
.blurple {
|
||||
|
|
@ -72,8 +60,27 @@ const style = `
|
|||
background-image:
|
||||
linear-gradient(45deg, transparent 65%,rgb(225, 91, 166) 80%, transparent 90%), linear-gradient(135deg, transparent 5%,rgb(225, 91, 166) 15%, transparent 25%), linear-gradient(135deg, transparent 45%,rgb(225, 91, 166) 55%, transparent 65%), linear-gradient(45deg, transparent 25%,rgb(225, 91, 166) 35%, transparent 50%);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const color = '#000'
|
||||
const palette = {
|
||||
"cream": "#fffbf1",
|
||||
"pink": "#e15ba6",
|
||||
"blurple": "#413cf2",
|
||||
"yellow": "#facb2d",
|
||||
"black": "#000",
|
||||
"white": "#fff"
|
||||
}
|
||||
|
||||
//const Timer = () => {
|
||||
// const [timer, setTimer] = useState("00:00:00")
|
||||
//}
|
||||
|
||||
function Page({
|
||||
carouselCards
|
||||
|
|
@ -99,24 +106,26 @@ function Page({
|
|||
alignItems: "space-between",
|
||||
mx: "5",
|
||||
}}>
|
||||
<Screen backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg"/>
|
||||
<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]}}>
|
||||
<Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg"/>
|
||||
<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}}/>
|
||||
<Image src = "https://upload.wikimedia.org/wikipedia/commons/9/9e/Plus_symbol.svg" sx = {{height: 54, px: 1}}/>
|
||||
<Image src = "https://www.congressionalappchallenge.us/wp-content/uploads/2018/08/CAClogo-dome-only-color.png" sx= {{height: 54, display: "inline"}}/>
|
||||
</Box>
|
||||
<Heading className="gaegu" variant="subtitle">Hack Club presents the</Heading>
|
||||
<Heading as="h1" variant="title" >Congressional App Challenge</Heading>
|
||||
<Box sx = {{width: "100%", marginTop: 4}}>
|
||||
<CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="https://google.com"/>
|
||||
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="https://google.com"/>
|
||||
<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="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box id="info" className = "gridlines">
|
||||
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['yellow']}}>
|
||||
<Box sx = {{
|
||||
marginX: 5,
|
||||
padding: 4,
|
||||
|
|
@ -128,13 +137,26 @@ function Page({
|
|||
<Text sx = {{width: ["100%", null, null, "50%"], marginRight: [0, 0, 0, 3]}}>
|
||||
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]}}>sfdkldsjfl</Box>
|
||||
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0]}}>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Heading as="h1" sx={{paddingY: 3, textAlign: "right"}}>Join a <span class = "yellow">community</span> of teen hackers</Heading>
|
||||
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"]}}>
|
||||
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0]}}>sfdkldsjfl</Box>
|
||||
<Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right"}}>
|
||||
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"], position: 'relative'}}>
|
||||
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0], paddingBottom: 6, marginBottom: 6, position: 'relative'}}>
|
||||
<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]}}/>
|
||||
<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]}}/>
|
||||
</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.
|
||||
</Text>
|
||||
</Box>
|
||||
|
|
@ -142,13 +164,26 @@ function Page({
|
|||
</Box>
|
||||
<Box id="winners" sx={{backgroundColor: palette["cream"], padding: 5}}>
|
||||
<Box sx = {{paddingX: 4}}>
|
||||
<Heading as="h1" sx={{pb: 4}}>Meet past <span class = "pink">winners</span></Heading>
|
||||
<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>
|
||||
</Box>
|
||||
|
||||
<style>{style}</style>
|
||||
|
||||
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['blurple']}}>
|
||||
<Box sx = {{
|
||||
marginX: 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>
|
||||
<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%"]}}/>
|
||||
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<style>{styled}</style>
|
||||
<Footer light />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
4
public/congressional-app-challenge/notify.svg
Normal file
4
public/congressional-app-challenge/notify.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.99763 27.7058L9.84963 27.1822L8.99764 27.7058L12.1331 32.8083L7.28366 36.3225C6.18177 37.121 6.18177 38.7629 7.28366 39.5614L12.1331 43.0757L8.99764 48.1782C8.28519 49.3376 8.91354 50.8545 10.2371 51.1706L16.0623 52.5615L15.1181 58.4755C14.9036 59.8193 16.0646 60.9803 17.4084 60.7658L23.3224 59.8216L24.7133 65.6468C25.0294 66.9703 26.5463 67.5987 27.7057 66.8862L32.8082 63.7508L36.3225 68.6002C37.121 69.7021 38.7629 69.7021 39.5614 68.6002L43.0756 63.7508L48.1781 66.8862C49.3375 67.5987 50.8545 66.9703 51.1705 65.6468L52.5615 59.8216L58.4755 60.7658C59.8192 60.9803 60.9803 59.8193 60.7657 58.4755L59.8216 52.5615L65.6467 51.1706C66.9703 50.8545 67.5987 49.3376 66.8862 48.1782L63.7508 43.0757L68.6002 39.5614C69.7021 38.7629 69.7021 37.121 68.6002 36.3225L63.7508 32.8083L66.8862 27.7058C67.5987 26.5464 66.9703 25.0294 65.6467 24.7133L59.8216 23.3224L60.7657 17.4084C60.9803 16.0646 59.8192 14.9036 58.4755 15.1181L52.5615 16.0623L51.1705 10.2372C50.8545 8.91357 49.3375 8.28522 48.1781 8.99767L43.0756 12.1331L39.5614 7.28369C38.7629 6.1818 37.121 6.1818 36.3225 7.28369L32.8082 12.1331L27.7057 8.99767C26.5463 8.28522 25.0294 8.91357 24.7133 10.2372L23.3224 16.0623L17.4084 15.1181C16.0646 14.9036 14.9036 16.0646 15.1181 17.4084L16.0623 23.3224L10.2371 24.7133C8.91354 25.0294 8.28519 26.5464 8.99763 27.7058Z" fill="#0907EA" stroke="black" stroke-width="2"/>
|
||||
<path d="M36.0872 47.4421L34.6857 24.8632L34.6631 16.5552H40.6931L40.7157 24.8632L39.4372 47.4421H36.0872ZM37.8618 59.435C35.4498 59.435 33.4349 57.626 33.4278 55.013C33.4203 52.2661 35.4257 50.5911 37.8377 50.5911C40.2497 50.5911 42.2643 52.2661 42.2718 55.013C42.2789 57.626 40.2738 59.435 37.8618 59.435Z" fill="#EFCA45"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Add table
Reference in a new issue