mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Replace scrapyard with neighborhood on home page (#1509)
replace scrapyard with neighborhood
This commit is contained in:
Finbar
GitHub
parent
16ccb9eeab
commit
1280e591aa
3 changed files with 164 additions and 184 deletions
162
components/index/cards/neighborhood.js
Normal file
162
components/index/cards/neighborhood.js
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Grid, Image, Text, Heading, Video } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import { css, Global } from '@emotion/react'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Neighborhood() {
|
||||
return (
|
||||
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#90A8E1',
|
||||
fontFamily: "M PLUS Rounded 1c",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
|
||||
>
|
||||
<video
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
zIndex: 1,
|
||||
margin: "-32px -32px -32px"
|
||||
}}
|
||||
src="https://neighborhood.hackclub.com/background.mp4"
|
||||
/>
|
||||
<Global
|
||||
styles={[
|
||||
css`
|
||||
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');
|
||||
`
|
||||
]}
|
||||
/>
|
||||
<Grid columns={[1, 1, 1]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="https://neighborhood.hackclub.com/neighborhoodLogo.png"
|
||||
sx={{
|
||||
width: ['400px', '450px', '500px'],
|
||||
mt: ['30px', '40px', '45px'],
|
||||
mb: ['30px', '30px', '30px'],
|
||||
position: 'relative',
|
||||
zIndex: 3,
|
||||
ml: '0px',
|
||||
mr: '0px',
|
||||
fontSize: ['48px', 4, 5],
|
||||
color: 'white',
|
||||
// mx: 'auto'
|
||||
}}
|
||||
alt="Scrapyard"
|
||||
/>
|
||||
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['row', 'row', 'column'],
|
||||
justifyContent: 'space-between'
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#FFF9E6",
|
||||
borderRadius: "105px 105px 70px 60px",
|
||||
backgroundSize: 'cover',
|
||||
display: 'block',
|
||||
width: 'min(430px, calc(100vw - 200px))',
|
||||
filter: 'drop-shadow(5px 5px 5px #000000AA)',
|
||||
position: 'relative',
|
||||
zIndex: 20
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
sx={{
|
||||
fontFamily: '"M PLUS Rounded 1c"',
|
||||
fontWeight: "600",
|
||||
textAlign: 'center',
|
||||
margin: '8%',
|
||||
fontSize: '20px',
|
||||
color: '#786A50'
|
||||
}}
|
||||
>
|
||||
Spend 100 hours on one project, spend this summer in San Francisco.
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: 1,
|
||||
width: 'max-content',
|
||||
backgroundSize: '100% 100%',
|
||||
width: '75%',
|
||||
position: 'relative',
|
||||
zIndex: 30,
|
||||
top: '-23%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
// pt: '3%',
|
||||
}}
|
||||
>
|
||||
<Buttons
|
||||
href="https://neighborhood.hackclub.com/"
|
||||
target="_blank"
|
||||
|
||||
rel="noopener"
|
||||
primary="#fde778"
|
||||
icon = "door-leave"
|
||||
zIndex={999}
|
||||
sx = {{
|
||||
marginTop: "12px",
|
||||
padding: "12px 24px",
|
||||
backgroundColor: "#F7D359",
|
||||
color: "#786A50",
|
||||
border: "2px solid #786A50",
|
||||
borderRadius: 100,
|
||||
fontSize: "14px",
|
||||
fontWeight: 800,
|
||||
fontFamily: "'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
||||
cursor: "pointer",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
Join Us
|
||||
</Buttons>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
|
||||
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
import CardModel from './card-model'
|
||||
import { Box, Flex, Grid, Image, Text, Heading } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import { Global } from '@emotion/react'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Scrapyard() {
|
||||
return (
|
||||
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#90A8E1',
|
||||
fontFamily: "p22stanyan",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
|
||||
>
|
||||
<Global
|
||||
styles={`
|
||||
@font-face {
|
||||
font-family: 'p22stanyan';
|
||||
src: url('https://use.typekit.net/af/444506/00000000000000007735b3cd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'moonblossom';
|
||||
src: url('https://use.typekit.net/af/bf03be/00000000000000007735fbe5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
<Grid columns={[1, 1, 1]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="https://cloud-4fnsp2wse-hack-club-bot.vercel.app/0scrapyard.png"
|
||||
sx={{
|
||||
width: ['400px', '450px', '500px'],
|
||||
mt: ['30px', '40px', '45px'],
|
||||
mb: ['30px', '30px', '30px'],
|
||||
position: 'relative',
|
||||
zIndex: 3,
|
||||
ml: '0px',
|
||||
mr: '0px',
|
||||
fontSize: ['48px', 4, 5],
|
||||
color: 'white',
|
||||
// mx: 'auto'
|
||||
}}
|
||||
alt="Scrapyard"
|
||||
/>
|
||||
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['row', 'row', 'column'],
|
||||
justifyContent: 'space-between'
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: "url('https://scrapyard.hackclub.com/elements/ripped-paper.png')",
|
||||
backgroundSize: 'cover',
|
||||
display: 'block',
|
||||
width: 'min(500px, calc(100vw - 30px))',
|
||||
filter: 'drop-shadow(5px 5px 5px #000000AA)',
|
||||
position: 'relative',
|
||||
zIndex: 20
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
sx={{
|
||||
fontFamily: 'moonblossom',
|
||||
textAlign: 'center',
|
||||
margin: '8%',
|
||||
fontSize: '22px',
|
||||
color: '#1f2d3d'
|
||||
}}
|
||||
>
|
||||
Build stupid stuff, get stupid prizes.
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: 1,
|
||||
width: 'max-content',
|
||||
backgroundImage: "url('https://scrapyard.hackclub.com/elements/yellow-strip@stretch.svg')",
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 100%',
|
||||
width: '75%',
|
||||
position: 'relative',
|
||||
zIndex: 30,
|
||||
top: '-15%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
// pt: '3%',
|
||||
filter: 'drop-shadow(5px 5px 5px #00000099)'
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
as="h2"
|
||||
sx={{
|
||||
fontFamily: 'p22stanyan',
|
||||
mx: '8%',
|
||||
my: '3%',
|
||||
p: 0,
|
||||
wordBreak: 'keep-all',
|
||||
whiteSpace: 'nowrap',
|
||||
width: 'min-content',
|
||||
fontSize: ['1.2em', '1.4em'],
|
||||
color: '#1f2d3d'
|
||||
}}
|
||||
>
|
||||
100+ Cities worldwide – March 15-16
|
||||
</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Buttons
|
||||
href="https://scrapyard.hackclub.com/"
|
||||
target="_blank"
|
||||
|
||||
rel="noopener"
|
||||
primary="#fde778"
|
||||
icon = "door-enter"
|
||||
id="43"
|
||||
zIndex={999}
|
||||
sx = {{zIndex: 9999999, left: ["50%", "50%", "0%"], color: '#1f2d3d'}}
|
||||
>
|
||||
|
||||
Learn More
|
||||
</Buttons>
|
||||
|
||||
|
||||
</Grid>
|
||||
<Image
|
||||
src="https://cloud-hqnbfdg3v-hack-club-bot.vercel.app/0image__14_.png"
|
||||
sx={{
|
||||
width: ['100%', '100%', '100%'],
|
||||
mb: ['0px', '0px', '0px'],
|
||||
mr: ['0px', '0px', '0px'],
|
||||
ml: ['0px', '0px', '0px'],
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white',
|
||||
objectFit: 'cover',
|
||||
height: '100%',
|
||||
mx: 0
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ 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'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Page({
|
||||
|
|
@ -681,7 +681,7 @@ function Page({
|
|||
and make things together!
|
||||
</Text>
|
||||
</Box>
|
||||
<Scrapyard />
|
||||
<Neighborhood />
|
||||
<Trail />
|
||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||
</Box>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue