mirror of
https://github.com/System-End/site.git
synced 2026-04-19 20:55:09 +00:00
Design Tweaks (#697)
* Design updates! * Update Image * Crop Image * Update pages/index.js * Update hackathons.js * Update pages/index.js * Update slack.js * Update components/index/cards/slack.js * Update components/index/cards/slack.js * Update pages/index.js
This commit is contained in:
Sam Poder
GitHub
parent
25e986061d
commit
8d36bc951a
10 changed files with 200 additions and 263 deletions
|
|
@ -2,6 +2,7 @@ import CardModel from './card-model'
|
|||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Heading,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Fade } from 'react-reveal'
|
||||
|
|
@ -18,18 +19,17 @@ export default function Bank({ data }) {
|
|||
backgroundColor: 'dark',
|
||||
minHeight: ['300px', '400px', '380px'],
|
||||
backgroundColor: 'darkless',
|
||||
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x302F33/glyph:bank-account.svg')`,
|
||||
backgroundSize: '40px 40px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundPosition: '10% 10%',
|
||||
color: 'snow'
|
||||
backgroundImage: `linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('/home/hackathons-bg.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: '40%',
|
||||
color: 'snow',
|
||||
}}
|
||||
badge
|
||||
text={data[0]}
|
||||
>
|
||||
<Text variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5] }}>
|
||||
<Heading variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5], mt: [0, 3]}}>
|
||||
Hack Club Bank
|
||||
</Text>
|
||||
</Heading>
|
||||
<Grid columns={[1, '1.3fr 1fr', 2]}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
|
|
@ -44,7 +44,7 @@ export default function Bank({ data }) {
|
|||
icon="bank-account"
|
||||
link="/bank"
|
||||
primary="red"
|
||||
sx={{ mt: [0, 3, 4] }}
|
||||
sx={{ mt: [0, 2, 3] }}
|
||||
>
|
||||
Start banking!
|
||||
</Buttons>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function Buttons({
|
|||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
px: '3',
|
||||
py: primary != null ? '5px' : 1,
|
||||
py: primary != null ? '12px' : 2,
|
||||
width: 'fit-content',
|
||||
textTransform: 'none',
|
||||
fontWeight: '400',
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const CardModel = ({
|
|||
position: 'relative',
|
||||
width: '100%',
|
||||
color: color,
|
||||
my: [4, 5],
|
||||
my: [4, 4],
|
||||
p: '24px',
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `url(${background})` || '',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const Cover = () => (
|
|||
left: 0,
|
||||
right: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5))',
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))',
|
||||
opacity: 0.8,
|
||||
zIndex: 1
|
||||
}}
|
||||
|
|
@ -40,7 +40,8 @@ export default function Clubs() {
|
|||
}}
|
||||
>
|
||||
<Image
|
||||
src="/home/clubs-bg.webp"
|
||||
src="https://dl.airtable.com/.attachmentThumbnails/904cf56ceac6b0921eceae02958dcd29/5851864a"
|
||||
alt="Summer Creek Hack Club meeting, February 2020"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
|
|
@ -60,15 +61,13 @@ export default function Clubs() {
|
|||
px: 2,
|
||||
mx: [-2, 0],
|
||||
whiteSpace: [null, 'nowrap', 'nowrap'],
|
||||
color: ['white', 'red', 'red'],
|
||||
bg: ['transparent', 'white', 'white'],
|
||||
fontSize: ['36px', 4, 5],
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
width: 'fit-content'
|
||||
}}
|
||||
>
|
||||
Network of 400+ coding clubs
|
||||
A Network of 400+ Coding Clubs
|
||||
</Text>
|
||||
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Box>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Cover = () => (
|
|||
left: 0,
|
||||
right: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))',
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6))',
|
||||
opacity: 0.8,
|
||||
zIndex: 1
|
||||
}}
|
||||
|
|
@ -42,7 +42,7 @@ export default function Hackathons({ data, stars }) {
|
|||
highlight="blue"
|
||||
>
|
||||
<Image
|
||||
src="/home/hackathons-bg.webp"
|
||||
src="https://cloud-issl87d62-hack-club-bot.vercel.app/0bmc_1823.jpg"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
|
|
@ -59,7 +59,7 @@ export default function Hackathons({ data, stars }) {
|
|||
as="h3"
|
||||
sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
|
||||
>
|
||||
High school hackathons
|
||||
High School Hackathons
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[1, 1, 2]}
|
||||
|
|
@ -78,7 +78,7 @@ export default function Hackathons({ data, stars }) {
|
|||
link="https://hackathons.hackclub.com"
|
||||
primary="blue"
|
||||
>
|
||||
Browse hackathons
|
||||
Attend a hackathon
|
||||
</Buttons>
|
||||
<Buttons
|
||||
// content="learn more about available resources"
|
||||
|
|
@ -86,7 +86,7 @@ export default function Hackathons({ data, stars }) {
|
|||
icon="bolt"
|
||||
link="/hackathons"
|
||||
>
|
||||
Organizer? Learn more
|
||||
Organizer? Learn more.
|
||||
</Buttons>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
|
@ -102,8 +102,8 @@ export default function Hackathons({ data, stars }) {
|
|||
}}
|
||||
>
|
||||
<Box sx={{ width: 'fit-content', float: 'right' }}>
|
||||
<Text as="h4" sx={{ fontSize: 'small', width: 'fit-content' }}>
|
||||
<Dot /> Upcoming hackathons
|
||||
<Text as="h4" sx={{ fontSize: 'small', width: '100%', textAlign: 'center' }}>
|
||||
<Dot /> Upcoming Hackathons
|
||||
</Text>
|
||||
{data.slice(0, 5).map(data => (
|
||||
<Box
|
||||
|
|
@ -190,7 +190,7 @@ export default function Hackathons({ data, stars }) {
|
|||
display: ['block', 'block', 'none']
|
||||
}}
|
||||
>
|
||||
<Text sx={{ fontSize: 'small' }}>Upcoming hackathons:</Text>
|
||||
<Text sx={{ fontSize: 'small', color: 'white' }}>Upcoming Hackathons:</Text>
|
||||
<Flex sx={{gap: '10px'}}>
|
||||
{data.slice(0, 2).map(data => (
|
||||
<Box
|
||||
|
|
|
|||
|
|
@ -1,151 +1,131 @@
|
|||
import Icon from '@hackclub/icons'
|
||||
import { useRef, useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Label,
|
||||
Input,
|
||||
Button,
|
||||
Text,
|
||||
Alert,
|
||||
Card,
|
||||
Flex,
|
||||
Grid
|
||||
} from 'theme-ui'
|
||||
import CardModel from './card-model'
|
||||
import Icon from '@hackclub/icons';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Box, Label, Input, Button, Text, Alert, Card, Flex, Grid } from 'theme-ui';
|
||||
import CardModel from './card-model';
|
||||
import BGImg from '../../background-image';
|
||||
import FooterImgFile from '../../../public/home/footer.png';
|
||||
|
||||
const Loading = () => (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
border: '2px solid #f3f3f3',
|
||||
borderTop: '2px solid #ec3750',
|
||||
borderRadius: '50%',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' }
|
||||
}
|
||||
}}
|
||||
></Box>
|
||||
)
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
border: '2px solid #f3f3f3',
|
||||
borderTop: '2px solid #ec3750',
|
||||
borderRadius: '50%',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
}}
|
||||
></Box>
|
||||
);
|
||||
|
||||
const MailingList = () => {
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const formRef = useRef(null)
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const formRef = useRef(null);
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
|
||||
let res = await fetch('/api/mailing-list', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: e.target.name.value,
|
||||
email: e.target.email.value
|
||||
})
|
||||
})
|
||||
let res = await fetch('/api/mailing-list', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: e.target.name.value,
|
||||
email: e.target.email.value,
|
||||
}),
|
||||
});
|
||||
|
||||
formRef.current.reset()
|
||||
formRef.current.reset();
|
||||
|
||||
if (res.ok) {
|
||||
setSubmitted(true)
|
||||
}
|
||||
setSubmitting(false)
|
||||
}
|
||||
if (res.ok) {
|
||||
setSubmitted(true);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
// maxWidth: 'narrowPlus',
|
||||
mx: 'auto',
|
||||
// mt: [3, 4],
|
||||
background: 'rgb(255,255,255, 0.45)',
|
||||
backdropFilter: 'blur(8px)'
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
alignItems: ['left', 'left', 'center'],
|
||||
flexDirection: ['column', 'column', 'row'],
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text variant="title" sx={{ fontSize: [4, '36px', '42px', 5], zIndex: 2 }}>
|
||||
Stay in touch
|
||||
</Text>
|
||||
<Text sx={{ color: 'muted', mt: 2, maxWidth: ['40ch', '40ch', '28ch', '40ch'] }} as="p">
|
||||
We’ll send you an email no more than once a month, when we work on
|
||||
something cool for you.
|
||||
</Text>
|
||||
</Box>
|
||||
<Grid
|
||||
as="form"
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
gap={[2, 3]}
|
||||
sx={{
|
||||
mt: [null, 3],
|
||||
gridTemplateColumns: [null, '1fr 1fr auto'],
|
||||
textAlign: 'left',
|
||||
alignItems: 'end',
|
||||
input: { bg: 'sunken' }
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Label htmlFor="location">Name</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Fiona Hackworth"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="fiona@hackclub.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" sx={{ mt: [2, 0] }}>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loading />
|
||||
Subscribe
|
||||
</>
|
||||
) : (
|
||||
'Subscribe'
|
||||
)}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Flex>
|
||||
return (
|
||||
<Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 'narrowPlus',
|
||||
mx: 'auto',
|
||||
// mt: [3, 4],
|
||||
background: 'rgb(255,255,255, 0.45)',
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
backdropFilter: 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
alignItems: ['left', 'left', 'center'],
|
||||
flexDirection: ['column', 'column', 'column'],
|
||||
gap: '10px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text variant="title" sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}>
|
||||
Stay in Touch
|
||||
</Text>
|
||||
<Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
|
||||
We’ll send you an email no more than once a month, when we work on something cool for you.
|
||||
</Text>
|
||||
</Box>
|
||||
<Grid
|
||||
as="form"
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
gap={[2, 3]}
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
alignItems: 'end',
|
||||
input: { bg: 'sunken' },
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Input autofillBackgroundColor="highlight" type="text" name="name" id="name" placeholder="Your Name" required sx={{ width: '100%', textAlign: 'center', fontSize: 2 }} />
|
||||
</Box>
|
||||
<div>
|
||||
<Input autofillBackgroundColor="highlight" type="email" name="email" id="email" placeholder="Your Email" required sx={{ width: '100%', textAlign: 'center', fontSize: 2 }} />
|
||||
</div>
|
||||
<Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loading />
|
||||
Subscribe
|
||||
</>
|
||||
) : (
|
||||
'Subscribe'
|
||||
)}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Flex>
|
||||
|
||||
{submitted && (
|
||||
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
|
||||
<Icon glyph="send" />
|
||||
<Text sx={{ ml: 2 }}>You're on the list!</Text>
|
||||
</Alert>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
{submitted && (
|
||||
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
|
||||
<Icon glyph="send" />
|
||||
<Text sx={{ ml: 2 }}>You're on the list!</Text>
|
||||
</Alert>
|
||||
)}
|
||||
</Card>
|
||||
<BGImg gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))" src={FooterImgFile} placeholder="blur" alt="Globe with hundreds of Hack Clubs" />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MailingList
|
||||
export default MailingList;
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ const Cover = () => (
|
|||
left: 0,
|
||||
right: 0,
|
||||
backgroundImage:
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.85))',
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95))',
|
||||
opacity: 0.8,
|
||||
zIndex: 1
|
||||
}}
|
||||
/>
|
||||
)
|
||||
const Stats = ({ data, subheading }) => (
|
||||
<Box>
|
||||
const Stats = ({ data, subheading, nonMobile = false }) => (
|
||||
<Box sx={{ display: nonMobile ? ['none', 'block'] : 'block' }}>
|
||||
<Heading
|
||||
variant="headline"
|
||||
as="h4"
|
||||
|
|
@ -50,7 +50,8 @@ export default function Slack({ data, slackKey, events }) {
|
|||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: t => t.util.gx('cyan', 'purple'),
|
||||
minHeight: ['300px', '400px', '500px']
|
||||
minHeight: ['500px', '400px'],
|
||||
py: [3, 3, 4]
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
|
|
@ -75,7 +76,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
maxWidth: [null, null, '70%', null]
|
||||
}}
|
||||
>
|
||||
Our online community
|
||||
Our Online Community
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid columns={[1, 1, '1.6fr 1fr', '1.6fr 1fr']} sx={{ zIndex: 2 }}>
|
||||
|
|
@ -85,9 +86,9 @@ export default function Slack({ data, slackKey, events }) {
|
|||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
variant="subtitle"
|
||||
sx={{ fontSize: [1, '16px', '24px'] }}
|
||||
>
|
||||
Coding doesn’t have to be a solidary activity. At Hack Club, we
|
||||
make things together and in our Slack, you’ll find awesome people to
|
||||
|
|
@ -95,7 +96,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
just hang out.
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
We also invite someone we really want to speak to (like
|
||||
Occasionally we invite someone we really want to speak to (like
|
||||
Sal Khan, George Hotz, and Lady Ada) and host an{' '}
|
||||
<Link
|
||||
href="/amas"
|
||||
|
|
@ -115,7 +116,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
<Box
|
||||
sx={{
|
||||
background: 'rgb(0,0,0,0.6)',
|
||||
height: ['200px', '170px', '170px', '100%'],
|
||||
height: ['130px', '170px', '170px', '100%'],
|
||||
position: ['relative', 'relative', 'absolute'],
|
||||
zIndex: 3,
|
||||
width: ['120%', '120%', '260px'],
|
||||
|
|
@ -125,39 +126,30 @@ export default function Slack({ data, slackKey, events }) {
|
|||
ml: ['-10%', '-10%', '-5%'],
|
||||
mb: ['-10%', '-10%', '-5%'],
|
||||
p: 4,
|
||||
pt: [3, 3, 4]
|
||||
py: [3, 3, 2]
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', 'row', 'row', 'column'],
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
|
||||
<Dot />
|
||||
Live from Slack
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['row', 'row', 'column'],
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap'
|
||||
flexWrap: 'wrap',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Stats data={data.readers_count_1d} subheading="Online" />
|
||||
<Stats data={data.readers_count_1d} subheading="Currently Online" />
|
||||
<Stats
|
||||
data={data.chats_channels_count_1d}
|
||||
subheading="Total channels"
|
||||
subheading="Total Channels"
|
||||
nonMobile={true}
|
||||
/>
|
||||
<Stats
|
||||
data={data.messages_count_1d}
|
||||
subheading="Daily messages"
|
||||
subheading="Daily Messages"
|
||||
/>
|
||||
<Stats
|
||||
data={data.total_members_count}
|
||||
subheading="Total members"
|
||||
subheading="Total Members"
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default function Winter() {
|
|||
badge
|
||||
>
|
||||
<Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Winter hardware wonderland
|
||||
Winter Hardware Wonderland
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
|
||||
Get $250 to build your own electronics projects alongside hundreds of
|
||||
|
|
@ -112,12 +112,12 @@ export default function Winter() {
|
|||
</Grid>
|
||||
<Buttons
|
||||
id="13"
|
||||
link="/winter"
|
||||
link="https://github.com/hackclub/winter"
|
||||
icon="freeze"
|
||||
primary="white"
|
||||
sx={{ color: 'blue' }}
|
||||
>
|
||||
RSVP
|
||||
View The Projects
|
||||
</Buttons>
|
||||
</Box>
|
||||
</CardModel>
|
||||
|
|
|
|||
108
pages/index.js
108
pages/index.js
|
|
@ -16,7 +16,6 @@ import Nav from '../components/nav'
|
|||
import BGImg from '../components/background-image'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import Footer from '../components/footer'
|
||||
import FooterImgFile from '../public/home/footer.png'
|
||||
import Stage from '../components/stage'
|
||||
import Carousel from '../components/index/carousel'
|
||||
import Sprig from '../components/index/cards/sprig'
|
||||
|
|
@ -73,11 +72,9 @@ function Page({
|
|||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('hi')
|
||||
console.log('Why, hello there!')
|
||||
if (reveal && !hover) {
|
||||
setTimeout(() => {
|
||||
console.log(reveal)
|
||||
console.log(hover)
|
||||
setReveal(false)
|
||||
}, 2000)
|
||||
}
|
||||
|
|
@ -109,18 +106,6 @@ function Page({
|
|||
}
|
||||
}, [count])
|
||||
|
||||
// const styles = `
|
||||
// ::selection {
|
||||
// background-color: #e42d42;
|
||||
// color: #ffffff;
|
||||
// text-shadow: none;
|
||||
// -webkit-background-clip: inherit;
|
||||
// -webkit-text-fill-color: initial;
|
||||
// },
|
||||
// input:-webkit-autofill {
|
||||
// -webkit-text-fill-color: white;
|
||||
// }
|
||||
// `
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
|
|
@ -145,7 +130,6 @@ function Page({
|
|||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{/* <style>{styles}</style> */}
|
||||
<Secret
|
||||
reveal={reveal}
|
||||
onMouseEnter={() => {
|
||||
|
|
@ -160,6 +144,7 @@ function Page({
|
|||
<Konami action={easterEgg} code={[38, 38, 40, 40]}>
|
||||
{"Hey, I'm an Easter Egg! Look at me!"}
|
||||
</Konami>
|
||||
|
||||
<Box
|
||||
as="header"
|
||||
sx={{
|
||||
|
|
@ -183,7 +168,7 @@ function Page({
|
|||
maxWidth: [null, 'layout'],
|
||||
position: 'relative',
|
||||
mx: 'auto',
|
||||
py: [4, 4, 5],
|
||||
py: [4, 4, 4],
|
||||
textShadow: 'text'
|
||||
}}
|
||||
>
|
||||
|
|
@ -264,7 +249,7 @@ function Page({
|
|||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: ['flex-start', 'flext-start', 'flex-end'],
|
||||
justifyContent: ['flex-start', 'flex-start', 'flex-end'],
|
||||
marginRight: 2,
|
||||
mt: [4, 3, 1]
|
||||
}}
|
||||
|
|
@ -301,13 +286,6 @@ function Page({
|
|||
margin: 'auto'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="h4"
|
||||
sx={{ fontSize: ['22px', 2, 3], mt: 4 }}
|
||||
>
|
||||
The rundown
|
||||
</Text>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h1"
|
||||
|
|
@ -328,7 +306,7 @@ function Page({
|
|||
}}
|
||||
>
|
||||
joy of code
|
||||
</Text>
|
||||
</Text>, together.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
|
|
@ -611,7 +589,7 @@ function Page({
|
|||
<Text
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{ fontSize: ['36px', '48px', '56px'], width: '18ch' }}
|
||||
sx={{ fontSize: ['36px', '48px', '72px'], width: '18ch', textAlign: 'center', margin: 'auto' }}
|
||||
>
|
||||
Connect with{' '}
|
||||
<Text
|
||||
|
|
@ -625,15 +603,15 @@ function Page({
|
|||
>
|
||||
builders
|
||||
</Text>{' '}
|
||||
from around the world
|
||||
</Text>
|
||||
from around the world.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
|
||||
sx={{ fontSize: ['18px', '24px', '32px'], width: ['95vw','66vw'],margin: 'auto', pt: 2, pb: [1, 0, 0], textAlign: 'center' }}
|
||||
>
|
||||
We gather both online and in-person to share our love of code
|
||||
and make things together!
|
||||
and make things together.
|
||||
</Text>
|
||||
</Box>
|
||||
<Winter />
|
||||
|
|
@ -650,9 +628,6 @@ function Page({
|
|||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{/* <Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
|
||||
Hack Clubbers
|
||||
</Text> */}
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', 'column', 'column', 'row'],
|
||||
|
|
@ -810,36 +785,33 @@ function Page({
|
|||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{ fontSize: ['36px', '48px', '56px'] }}
|
||||
>
|
||||
Find your{' '}
|
||||
<Box>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'yellow'
|
||||
}}
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{ fontSize: ['36px', '48px', '72px'], width: '18ch', textAlign: 'center', margin: 'auto' }}
|
||||
>
|
||||
IRL community
|
||||
Find your{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'orange'
|
||||
}}
|
||||
>
|
||||
IRL community.
|
||||
</Text>
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: ['18px', '24px', '32px'], width: ['100%', '66vw'],margin: 'auto', pt: 2, textAlign: 'center' }}
|
||||
>
|
||||
Thousands of Hack Clubbers organize and participate in hackathons and after school coding clubs.
|
||||
</Text>
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: ['18px', '20px', '22px'],
|
||||
pb: [3, 0, 0],
|
||||
maxWidth: '40ch'
|
||||
}}
|
||||
>
|
||||
Thousands of Hack Clubbers organize and participate in
|
||||
hackathons and after school coding clubs.
|
||||
</Text>
|
||||
</Box>
|
||||
<Clubs />
|
||||
<Hackathons
|
||||
delay={400}
|
||||
|
|
@ -1066,10 +1038,11 @@ function Page({
|
|||
/>
|
||||
</Card>
|
||||
</Grid>
|
||||
<MailingList />
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<MailingList />
|
||||
<Footer
|
||||
dark
|
||||
sx={{
|
||||
|
|
@ -1085,14 +1058,7 @@ function Page({
|
|||
}
|
||||
}}
|
||||
>
|
||||
<BGImg
|
||||
width={2544}
|
||||
height={2048}
|
||||
gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
|
||||
src={FooterImgFile}
|
||||
placeholder="blur"
|
||||
alt="Globe with hundreds of Hack Clubs"
|
||||
/>
|
||||
|
||||
<style>
|
||||
{`a{
|
||||
color: #338eda
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 657 KiB After Width: | Height: | Size: 2.2 MiB |
Loading…
Add table
Reference in a new issue