mirror of
https://github.com/SrIzan10/hc-site.git
synced 2026-05-01 10:45:23 +00:00
hackclub.com/bank/first (#585)
This commit is contained in:
Ella
421
components/bank/first/features.js
Normal file
421
components/bank/first/features.js
Normal file
@@ -0,0 +1,421 @@
|
||||
import { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'
|
||||
import Icon from '../../icon'
|
||||
import Masonry from 'react-masonry-css'
|
||||
import NextImage from 'next/image'
|
||||
|
||||
import Tilt from '../../tilt'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<Box sx={{ py: 5 }}>
|
||||
<Box as="a" href="#testimonials">
|
||||
<Image
|
||||
src="/bank/meet-teams-using-bank.svg"
|
||||
alt="yeah"
|
||||
width={200}
|
||||
height={100}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 2,
|
||||
mt: -36,
|
||||
display: ['none', 'none', 'none', 'block'],
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Container>
|
||||
<Text variant="heading" sx={{ fontSize: 50 }}>
|
||||
Everything you'll need.
|
||||
</Text>
|
||||
<br />
|
||||
<br />
|
||||
<Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
|
||||
Organize your team's finances in real time, receive grants, gain
|
||||
nonprofit status, & more.
|
||||
<br />
|
||||
Use features engineered by <i>FIRST</i> alumni to help you run a
|
||||
successful team.
|
||||
</Text>
|
||||
<br />
|
||||
<br />
|
||||
</Container>
|
||||
|
||||
<Container>
|
||||
<Masonry
|
||||
breakpointCols={{
|
||||
10000: 3,
|
||||
640: 2,
|
||||
480: 1,
|
||||
default: 1
|
||||
}}
|
||||
className="masonry-posts"
|
||||
columnClassName="masonry-posts-column"
|
||||
>
|
||||
<Module
|
||||
icon="bank-account"
|
||||
name="Nonprofit status"
|
||||
body="Become part of Hack Club's legal entity, getting the benefits of our 501(c)(3) tax status."
|
||||
/>
|
||||
|
||||
<ModuleDetails>
|
||||
<Link
|
||||
href="https://bank.hackclub.com/poseidon-robotics"
|
||||
target="_blank"
|
||||
>
|
||||
<NextImage
|
||||
src="/bank/poseidon-dashboard.png"
|
||||
alt="iPad"
|
||||
width={500}
|
||||
height={300}
|
||||
/>
|
||||
</Link>
|
||||
</ModuleDetails>
|
||||
|
||||
<Module
|
||||
icon="analytics"
|
||||
name="Balance & history"
|
||||
body="Keep everyone on your team and beyond up to date with real-time balance and transaction history."
|
||||
/>
|
||||
|
||||
<Module
|
||||
icon="card"
|
||||
name="Debit cards"
|
||||
body={<>Issue physical debit cards to all your teammates.</>}
|
||||
/>
|
||||
|
||||
<Module
|
||||
icon="payment"
|
||||
name="Grants & donations"
|
||||
body="Easily receive and deposit money from grants and donations into your account. You'll also get a customizable online donation form to share with friends and family."
|
||||
/>
|
||||
|
||||
<Module
|
||||
icon="payment-transfer"
|
||||
name="Reimbursement flow"
|
||||
body="Reimburse teammates for expenses with flexible money transfer options including ACH, PayPal, mailed checks, and more."
|
||||
/>
|
||||
<Fade bottom>
|
||||
<Tilt>
|
||||
<Card
|
||||
as="div"
|
||||
sx={{
|
||||
backgroundImage:
|
||||
'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
|
||||
height: '230px',
|
||||
backgroundSize: 'cover',
|
||||
boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)'
|
||||
}}
|
||||
/>
|
||||
</Tilt>
|
||||
</Fade>
|
||||
<Module
|
||||
icon="support"
|
||||
name="Support anytime"
|
||||
body="We’ll never leave you hanging with 24-hour response time on weekdays."
|
||||
/>
|
||||
{/* <Tilt>
|
||||
<Card
|
||||
as="div"
|
||||
sx={{
|
||||
borderRadius: 0,
|
||||
backgroundColor: '#193046',
|
||||
boxShadow:
|
||||
'0 0 2px 0 rgb(0 0 0 / 6%), 0 6px 12px 0 rgb(0 0 0 / 25%)',
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
content: '""',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
margin: '0.5rem',
|
||||
border: '1px dotted #8492a6'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ justifyContent: 'end' }}>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '10px',
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
Date
|
||||
</Text>
|
||||
<Text sx={{ fontFamily: 'cursive' }}>10-10-2020</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ width: '100%' }}>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '10px',
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
Pay to the <br />
|
||||
order of
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{ fontFamily: 'cursive', textAlign: 'left', ml: 2 }}
|
||||
>
|
||||
Hack Club
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
sx={{
|
||||
textAlign: 'right',
|
||||
ml: 'auto'
|
||||
}}
|
||||
>
|
||||
$
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
border: '1px solid rgba(255, 255, 255, 0.25)',
|
||||
fontFamily: 'cursive'
|
||||
}}
|
||||
>
|
||||
1000
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ justifyContent: 'space-between', alignItems: 'end' }}>
|
||||
<Text sx={{ fontFamily: 'cursive' }}>One thousand only</Text>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '10px',
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
Dollars
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
pb: 1
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '10px',
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
Memo
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
fontFamily: 'cursive',
|
||||
fontSize: '12px',
|
||||
textTransform: 'none'
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
Grant for Poseidon Robotics
|
||||
</Text>
|
||||
</Text>
|
||||
<Image
|
||||
src="/signatures/prophet_orpheus-light.png"
|
||||
alt="Prophet Orpheus signature"
|
||||
width={80}
|
||||
height={30}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Text
|
||||
sx={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '10px',
|
||||
lineHeight: 1,
|
||||
pt: 1,
|
||||
mb: -3
|
||||
}}
|
||||
>
|
||||
⑆ 00000000000 ⑆ 123456789 ⑆
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Tilt> */}
|
||||
<Module
|
||||
icon="rep"
|
||||
name="No start-up costs"
|
||||
body="All fees waived on your first $25k for the 2022-23 season. Then, just 7% of revenue. "
|
||||
/>
|
||||
</Masonry>
|
||||
</Container>
|
||||
<Container
|
||||
variant="narrow"
|
||||
sx={{
|
||||
pt: 3,
|
||||
borderColor: 'muted',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Text variant="caption" sx={{ color: 'muted' }}>
|
||||
Hack Club does not directly provide banking services. Banking services
|
||||
provided by Silicon Valley Bank, an FDIC-certified institution.
|
||||
</Text>
|
||||
</Container>
|
||||
|
||||
<style>{`
|
||||
.masonry-posts {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.masonry-posts-column {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 32em) {
|
||||
.post:nth-child(8) ~ .post {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 32em) {
|
||||
.masonry-posts {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.masonry-posts-column {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.post {
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.masonry-posts {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.masonry-posts-column {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
`}</style>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Module({ icon, name, body }) {
|
||||
return (
|
||||
<Fade bottom>
|
||||
<Card
|
||||
variant="primary"
|
||||
sx={{ display: 'flex', flexDirection: 'column', p: [4, null, 4] }}
|
||||
className="post"
|
||||
>
|
||||
<Box
|
||||
as="span"
|
||||
sx={{
|
||||
width: 'fit-content',
|
||||
bg: 'primary',
|
||||
borderRadius: 'default',
|
||||
lineHeight: 0,
|
||||
p: 1,
|
||||
mb: 1,
|
||||
display: 'inline-block',
|
||||
transform: ['scale(0.75)', 'none'],
|
||||
transformOrigin: 'bottom left',
|
||||
boxShadow:
|
||||
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<Icon glyph={icon} size={28} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading sx={{ color: 'snow', lineHeight: '1.5' }}>{name}</Heading>
|
||||
<Text sx={{ color: 'muted', lineHeight: '1.375', fontSize: 17 }}>
|
||||
{body}
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</Fade>
|
||||
)
|
||||
}
|
||||
|
||||
function ModuleDetails({ children }) {
|
||||
return (
|
||||
<Fade bottom>
|
||||
<Box
|
||||
sx={{
|
||||
bg: 'none',
|
||||
color: 'smoke',
|
||||
boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
|
||||
borderRadius: 'default',
|
||||
p: 0,
|
||||
mb: 3
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Fade>
|
||||
)
|
||||
}
|
||||
|
||||
function Document({ name, cost }) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Icon
|
||||
size={28}
|
||||
mr={1}
|
||||
glyph="payment"
|
||||
sx={{ flexShrink: 0, color: 'green' }}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Text fontSize={2}>{name}</Text>
|
||||
|
||||
{cost && (
|
||||
<Text fontSize={1} color="muted" style={{ lineHeight: '1.375' }}>
|
||||
{cost}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Laptop({ href, title, sx }) {
|
||||
return (
|
||||
<Link href={href} title={title} sx={sx}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minHeight: '16rem',
|
||||
backgroundSize: 'auto 115%',
|
||||
backgroundImage:
|
||||
"url('https://cloud-az94fzpyw-hack-club-bot.vercel.app/1poseidon.png')",
|
||||
backgroundPosition: 'center top',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
></Box>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
178
components/bank/first/form.js
Normal file
178
components/bank/first/form.js
Normal file
@@ -0,0 +1,178 @@
|
||||
import { Box, Input, Label, Button, Select, Text } from 'theme-ui'
|
||||
import { useState } from 'react'
|
||||
import theme from '@hackclub/theme'
|
||||
import Icon from '../../icon'
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
||||
const hideAnimation = keyframes({
|
||||
from: { display: 'flex' },
|
||||
to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
|
||||
})
|
||||
|
||||
function Base({ children, action, target, method, onSubmit, id }) {
|
||||
return (
|
||||
<Box
|
||||
as="form"
|
||||
sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
|
||||
id={id}
|
||||
action={action}
|
||||
target={target}
|
||||
method={method}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({
|
||||
placeholder,
|
||||
label,
|
||||
name,
|
||||
type,
|
||||
value,
|
||||
onChange,
|
||||
required = true
|
||||
}) {
|
||||
return (
|
||||
<Box sx={{ my: 2 }}>
|
||||
<Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
|
||||
{label}
|
||||
</Label>
|
||||
<Input
|
||||
id={name}
|
||||
placeholder={placeholder}
|
||||
name={name}
|
||||
type={type}
|
||||
sx={{
|
||||
bg: 'dark'
|
||||
}}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
required={required}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Signup() {
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const [values, setValues] = useState({
|
||||
locationState: '',
|
||||
locationCountry: '',
|
||||
teamName: '',
|
||||
teamType: '',
|
||||
teamNumber: '',
|
||||
userEmail: ''
|
||||
})
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
|
||||
await fetch('/api/bank/demo', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(values)
|
||||
})
|
||||
|
||||
setSubmitted(true)
|
||||
|
||||
// clear form
|
||||
setValues({
|
||||
locationState: '',
|
||||
locationCountry: '',
|
||||
eventName: '',
|
||||
teamType: '',
|
||||
teamNumber: '',
|
||||
userEmail: ''
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Base
|
||||
id="form"
|
||||
method="POST"
|
||||
action="/api/bank/demo"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Field
|
||||
label="Team Name"
|
||||
name="eventName"
|
||||
placeholder="Poseidon Robotics"
|
||||
value={values.eventName}
|
||||
onChange={e => setValues({ ...values, eventName: e.target.value })}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, w: '100%' }}>
|
||||
<Box sx={{ my: 2 }}>
|
||||
<Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
|
||||
Level
|
||||
<Select
|
||||
name="teamType"
|
||||
defaultValue="Select"
|
||||
sx={{ bg: 'dark' }}
|
||||
onChange={e =>
|
||||
setValues({ ...values, teamType: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="Select" selected disabled>
|
||||
Select
|
||||
</option>
|
||||
<option value="FLL">FLL</option>
|
||||
<option value="FTC">FTC</option>
|
||||
<option value="FRC">FRC</option>
|
||||
</Select>
|
||||
</Label>
|
||||
</Box>
|
||||
|
||||
<Field
|
||||
label="Team number (optional)"
|
||||
name="teamNumber"
|
||||
placeholder="12345"
|
||||
value={values.teamNumber}
|
||||
onChange={e => setValues({ ...values, teamNumber: e.target.value })}
|
||||
required={false}
|
||||
/>
|
||||
</Box>
|
||||
<Field
|
||||
label="Email address"
|
||||
name="userEmail"
|
||||
placeholder="fiona@hackclub.com"
|
||||
type="email"
|
||||
value={values.userEmail}
|
||||
onChange={e => setValues({ ...values, userEmail: e.target.value })}
|
||||
/>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundImage: theme.util.gx('orange', 'red'),
|
||||
mt: [2, 3],
|
||||
py: 2
|
||||
}}
|
||||
type="submit"
|
||||
>
|
||||
Create new account
|
||||
</Button>
|
||||
</Base>
|
||||
{submitted && (
|
||||
<Box
|
||||
sx={{
|
||||
mt: 2,
|
||||
px: 2,
|
||||
py: 2,
|
||||
borderRadius: 'default',
|
||||
color: 'white',
|
||||
bg: 'green',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'start',
|
||||
animation: `${hideAnimation} 0s ease-in 15s`,
|
||||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="send" size={24} />
|
||||
<Text>Submitted! Check your email for a sign in link.</Text>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
134
components/bank/first/steps.js
Normal file
134
components/bank/first/steps.js
Normal file
@@ -0,0 +1,134 @@
|
||||
import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
|
||||
import { Slide } from 'react-reveal'
|
||||
import Icon from '../../icon'
|
||||
|
||||
function Timeline({ children }) {
|
||||
return (
|
||||
<Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
|
||||
{children}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
function TimelineStep({ children }) {
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
marginX: 4,
|
||||
paddingY: 4,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
background: '#3c4858',
|
||||
height: '200px',
|
||||
width: '4px',
|
||||
marginLeft: 26,
|
||||
position: 'absolute',
|
||||
zIndex: -1
|
||||
},
|
||||
'&:first-of-type:before': {
|
||||
top: [0, null, 'auto'],
|
||||
width: [0, null, 0],
|
||||
left: [0, null, 0]
|
||||
},
|
||||
'&:last-of-type:before': {
|
||||
bottom: [0, null, 'auto'],
|
||||
left: [null, null, 0],
|
||||
width: [null, null, 0]
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
function Circle({ children }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 14,
|
||||
px: 18,
|
||||
background: 'red',
|
||||
color: 'white',
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse farthest-corner at top left, #ff8c37, #ec3750)',
|
||||
borderRadius: '100%',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
position: 'relative',
|
||||
zIndex: 999
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Step({ icon, name, duration, href }) {
|
||||
return (
|
||||
<TimelineStep sx={{ pb: 1 }}>
|
||||
{/* <Slide left> */}
|
||||
<Circle>
|
||||
{href ? (
|
||||
<Link href={href} sx={{ cursor: 'pointer' }}>
|
||||
<Icon glyph={icon} size={48} color="white" />
|
||||
</Link>
|
||||
) : (
|
||||
<Icon glyph={icon} size={48} />
|
||||
)}
|
||||
</Circle>
|
||||
<Container
|
||||
sx={{
|
||||
mt: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'left',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
bg: 'muted',
|
||||
color: 'darker',
|
||||
fontWeight: 'normal',
|
||||
textTransform: 'uppercase',
|
||||
width: 64,
|
||||
fontSize: 18,
|
||||
px: 2
|
||||
}}
|
||||
>
|
||||
{duration}
|
||||
</Badge>
|
||||
<Text sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}>
|
||||
{name}
|
||||
</Text>
|
||||
</Container>
|
||||
{/* </Slide> */}
|
||||
</TimelineStep>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RealTimeline() {
|
||||
return (
|
||||
<Timeline sx={{ px: 3 }}>
|
||||
<Step
|
||||
icon="send"
|
||||
name="Open a demo account & explore features"
|
||||
duration="Step 1"
|
||||
/>
|
||||
<Step
|
||||
icon="rep"
|
||||
name="Meet with the Bank team on a call"
|
||||
duration="Step 2"
|
||||
/>
|
||||
<Step
|
||||
icon="friend"
|
||||
name="Start acceping grants & issue debit cards"
|
||||
duration="Step 3"
|
||||
/>
|
||||
</Timeline>
|
||||
)
|
||||
}
|
||||
236
components/bank/first/testimonials.js
Normal file
236
components/bank/first/testimonials.js
Normal file
@@ -0,0 +1,236 @@
|
||||
import {
|
||||
Box,
|
||||
Image,
|
||||
Text,
|
||||
Heading,
|
||||
Container,
|
||||
Grid,
|
||||
Link,
|
||||
Avatar,
|
||||
Button
|
||||
} from 'theme-ui'
|
||||
import { Slide } from 'react-reveal'
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<>
|
||||
<Container
|
||||
variant="copy"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Heading variant="title">
|
||||
<i>FIRST</i> teams all over the country run on Bank.
|
||||
</Heading>
|
||||
<Text variant="lead" color="muted">
|
||||
Everywhere from San Jose to Boston to New York,
|
||||
Hack Club Bank powers teams of all sizes.
|
||||
</Text>
|
||||
</Container>
|
||||
<Container>
|
||||
<Grid
|
||||
gap={4}
|
||||
sx={{
|
||||
gridTemplateColumns: ['100%', null, null, '1fr 1fr']
|
||||
}}
|
||||
>
|
||||
<Organization
|
||||
logo="https://cloud-ga0lm1r8d-hack-club-bot.vercel.app/0image.png"
|
||||
name="Poseidon Robotics"
|
||||
teamNum="FTC Team #16898"
|
||||
teamLocation="San Jose, CA"
|
||||
budget="$1,000,000"
|
||||
budgetLabel="in grants"
|
||||
website="evposeidon.wixsite.com"
|
||||
url="https://evposeidon.wixsite.com/robo/home"
|
||||
imgSrc="https://cloud-qtng6088u-hack-club-bot.vercel.app/0image.png"
|
||||
quote="Overall, Hack Club Bank has opened more opportunities for Poseidon, allowing us to undertake larger projects, both on the playing field and in our community."
|
||||
hackerName="Ian Marwong"
|
||||
hackerRole="Team Lead"
|
||||
hackerAvatarUrl="/hackers/ian-marwong.jpg"
|
||||
transparency="poseidon-robotics"
|
||||
/>
|
||||
<Organization
|
||||
logo="https://cloud-ab81zjlm9-hack-club-bot.vercel.app/0image.png"
|
||||
name="Killabytez"
|
||||
teamNum="FTC Team #14663"
|
||||
teamLocation="Fremont, CA"
|
||||
budget="$1,000,000"
|
||||
budgetLabel="in grants"
|
||||
website="killabytez.club"
|
||||
url="http://www.killabytez.club/"
|
||||
hackerAvatarUrl="/hackers/brian-cisto.jpeg"
|
||||
hackerName="Brian Cisto"
|
||||
hackerRole="Team Captain & Software Lead"
|
||||
imgSrc="https://cloud-oelh6sp7b-hack-club-bot.vercel.app/0screen_shot_2022-11-06_at_8.45.37_pm.png"
|
||||
quote="Hack Club Bank has been essential to keeping track of our finances as well as giving us the opportunity to establish ourselves as a nonprofit."
|
||||
/>
|
||||
</Grid>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Organization({
|
||||
logo,
|
||||
name,
|
||||
website,
|
||||
teamNum,
|
||||
teamLocation,
|
||||
url,
|
||||
imgSrc,
|
||||
quote,
|
||||
hackerName,
|
||||
hackerAvatarUrl,
|
||||
hackerRole,
|
||||
transparency
|
||||
}) {
|
||||
return (
|
||||
<Slide bottom>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'darkless',
|
||||
color: 'smoke',
|
||||
borderRadius: 'extra',
|
||||
mx: 'auto'
|
||||
}}
|
||||
>
|
||||
<Container sx={{ padding: 0, margin: 0 }}>
|
||||
<Image
|
||||
src={imgSrc}
|
||||
alt="Robots team"
|
||||
width={800}
|
||||
height={450}
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
<Box p={[3, null, 4]}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Image
|
||||
src={logo}
|
||||
alt={`${name} logo`}
|
||||
sx={{
|
||||
height: '4rem',
|
||||
width: '4rem',
|
||||
objectFit: 'cover',
|
||||
borderRadius: 'default'
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ ml: 3 }}>
|
||||
<Text
|
||||
color="white"
|
||||
variant="headline"
|
||||
sx={{
|
||||
fontSize: [28, null, 38],
|
||||
lineHeight: 1,
|
||||
letterSpacing: -0.1
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<br />
|
||||
<Link
|
||||
href={url || `https://${website}`}
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
color: 'muted',
|
||||
'&:hover': { textDecoration: 'underline' }
|
||||
}}
|
||||
>
|
||||
{teamNum}
|
||||
</Link>{' '}
|
||||
• {teamLocation}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<br />
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: 2,
|
||||
color: 'snow',
|
||||
textIndent: '-.375em',
|
||||
lineHeight: 'caption',
|
||||
fontSize: 18
|
||||
}}
|
||||
>
|
||||
"{quote}"
|
||||
</Text>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: ['0px', 3]
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
mt: ['16px', '0px']
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src={hackerAvatarUrl}
|
||||
size={48}
|
||||
sx={{
|
||||
mr: 2,
|
||||
borderRadius: '100%'
|
||||
}}
|
||||
alt="Photo of ${hackerName}"
|
||||
/>
|
||||
<Text
|
||||
color="white"
|
||||
sx={{
|
||||
fontSize: 19,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Text sx={{ fontWeight: 'bold', lineHeight: 1.125 }}>
|
||||
{hackerName}
|
||||
</Text>
|
||||
<Text>{hackerRole}</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
{transparency && (
|
||||
<Link
|
||||
href={`https://bank.hackclub.com/${transparency}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{ mt: ['16px', '0px'] }}
|
||||
>
|
||||
<Button
|
||||
mt={[null, null, 4, 0]}
|
||||
ml={[0, 'auto']}
|
||||
sx={{ textTransform: 'none' }}
|
||||
variant="primary"
|
||||
title="🎶 take a look, it's in our books 🎵"
|
||||
>
|
||||
See Finances
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Slide>
|
||||
)
|
||||
}
|
||||
@@ -89,7 +89,7 @@ export default function BankApplyForm() {
|
||||
<Link href="/slack">Hack Club Slack</Link>!
|
||||
</Text>
|
||||
</Flex>
|
||||
<Base method="POST" action="/api/bank-apply">
|
||||
<Base method="POST" action="/api/bank/apply">
|
||||
<Text variant="headline" sx={{ color: 'primary' }}>
|
||||
Your Organization
|
||||
</Text>
|
||||
|
||||
@@ -53,6 +53,26 @@ const nextConfig = {
|
||||
destination: '/jobs/lead-hacker/',
|
||||
permanent: true
|
||||
},
|
||||
{
|
||||
source: '/first/',
|
||||
destination: '/bank/first/',
|
||||
permanent: false
|
||||
},
|
||||
{
|
||||
source: '/bank/frc/',
|
||||
destination: '/bank/first/',
|
||||
permanent: false
|
||||
},
|
||||
{
|
||||
source: '/bank/ftc/',
|
||||
destination: '/bank/first/',
|
||||
permanent: false
|
||||
},
|
||||
{
|
||||
source: '/bank/fll/',
|
||||
destination: '/bank/first/',
|
||||
permanent: false
|
||||
},
|
||||
{ source: '/workshops/slack/', destination: '/slack/', permanent: true },
|
||||
{ source: '/community/', destination: '/slack/', permanent: true },
|
||||
{ source: '/hack_camp/', destination: '/camp/', permanent: true },
|
||||
|
||||
48
pages/api/bank/demo.js
Normal file
48
pages/api/bank/demo.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// 1. create a demo account on Bank and invite them to it
|
||||
// 2. add this demo account info to the Applications Table
|
||||
|
||||
import AirtablePlus from 'airtable-plus'
|
||||
|
||||
const applicationsTable = new AirtablePlus({
|
||||
baseID: 'apppALh5FEOKkhjLR',
|
||||
apiKey: process.env.AIRTABLE_API_KEY,
|
||||
tableName: 'Events'
|
||||
})
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method === 'POST') {
|
||||
const data = JSON.parse(req.body)
|
||||
|
||||
await fetch('https://bank.hackclub.com/api/v1/events/create_demo', {
|
||||
body: JSON.stringify({
|
||||
email: data.userEmail,
|
||||
name: data.eventName
|
||||
}),
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
|
||||
}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(async r => {
|
||||
console.log(data)
|
||||
|
||||
await applicationsTable.create({
|
||||
'Email Address': data.userEmail,
|
||||
'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
|
||||
Status: 'Demo Account',
|
||||
'HCB account URL': `https://bank.hackclub.com/${r.slug}`
|
||||
})
|
||||
res
|
||||
.status(200)
|
||||
.json({ message: 'Success! Check your email for next steps.' })
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
res.json({ status: 'Something went wrong', error })
|
||||
})
|
||||
} else {
|
||||
res.status(405).json({ status: 'error', error: 'Must send POST request' })
|
||||
}
|
||||
}
|
||||
226
pages/bank/first.js
Normal file
226
pages/bank/first.js
Normal file
@@ -0,0 +1,226 @@
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
Container,
|
||||
Card,
|
||||
Text,
|
||||
Flex,
|
||||
Button,
|
||||
Badge
|
||||
} from 'theme-ui'
|
||||
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import ForceTheme from '../../components/force-theme'
|
||||
import Nav from '../../components/nav'
|
||||
import Footer from '../../components/footer'
|
||||
import Icon from '../../components/icon'
|
||||
import Features from '../../components/bank/first/features'
|
||||
|
||||
import Form from '../../components/bank/first/form'
|
||||
import Testimonials from '../../components/bank/first/testimonials'
|
||||
import Steps from '../../components/bank/first/steps'
|
||||
import theme from '@hackclub/theme'
|
||||
|
||||
export default function First() {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`*{
|
||||
scroll-behavior: smooth;
|
||||
}`}
|
||||
</style>
|
||||
<Meta as={Head}>
|
||||
<title>Financial Toolkit for FIRST Teams — Hack Club Bank</title>
|
||||
</Meta>
|
||||
|
||||
<Box as="main" key="main" sx={{ mb: 6 }}>
|
||||
<Nav dark />
|
||||
<ForceTheme theme="dark" />
|
||||
<Box
|
||||
sx={{
|
||||
pt: [5, null, null, null, 6],
|
||||
pb: [3, 4, 5, null, 6],
|
||||
minHeight: ['70vh', 'none'],
|
||||
textAlign: 'center',
|
||||
backgroundImage:
|
||||
"linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url('https://cloud-7chjcfuyw-hack-club-bot.vercel.app/0image.png')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
mx: 'auto',
|
||||
px: '16px',
|
||||
backdropFilter: 'blur(1.5px)'
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mt: [5, null, 6],
|
||||
textShadow: '0 0 16px rgba(0, 0, 0, 1)'
|
||||
}}
|
||||
as="h1"
|
||||
variant="ultratitle"
|
||||
>
|
||||
The ultimate financial tool for{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: theme => theme.colors.blue,
|
||||
WebkitTextStrokeWidth: '1px',
|
||||
WebkitTextFillColor: theme => theme.colors.white,
|
||||
textShadow: theme => `0 0 12px ${theme.colors.blue}`
|
||||
}}
|
||||
>
|
||||
FRC, FTC, and FLL teams
|
||||
</Text>
|
||||
.
|
||||
</Heading>
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
bg: 'rgba(132,146,166, 0.5)',
|
||||
color: 'white',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 2,
|
||||
mt: 3,
|
||||
mx: 'auto',
|
||||
borderRadius: ['default', null, 'extra']
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="div"
|
||||
sx={{
|
||||
display: ['grid', 'grid', 'flex'],
|
||||
flexDirection: [null, 'row', 'row'],
|
||||
gridTemplateColumns: ['1fr', '1fr 1fr']
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="span"
|
||||
sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
|
||||
>
|
||||
<Icon glyph="checkmark" size={28} color="#33d6A6" />
|
||||
<Text sx={{ ml: 1 }}>Nonprofit status</Text>
|
||||
</Box>
|
||||
<Box
|
||||
as="span"
|
||||
sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
|
||||
>
|
||||
<Icon glyph="checkmark" size={28} color="#33d6A6" />
|
||||
<Text sx={{ ml: 1 }}>Receive grants</Text>
|
||||
</Box>
|
||||
<Box
|
||||
as="span"
|
||||
sx={{ display: 'flex', flexDirection: 'row', mr: 4 }}
|
||||
>
|
||||
<Icon glyph="checkmark" size={28} color="#33d6A6" />
|
||||
<Text sx={{ ml: 1 }}>Debit cards</Text>
|
||||
</Box>
|
||||
<Box as="span" sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<Icon glyph="checkmark" size={28} color="#33d6A6" />
|
||||
<Text sx={{ ml: 1 }}>No start-up costs</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Badge>
|
||||
<Container
|
||||
sx={{
|
||||
fontSize: [2, 3, 3],
|
||||
textAlign: 'center',
|
||||
my: 4
|
||||
}}
|
||||
variant="copy"
|
||||
>
|
||||
Built by <i>FIRST</i> alumni for <i>FIRST</i> teams, Hack Club
|
||||
Bank is a comprehensive financial platform used by hundreds of
|
||||
clubs, teams and hackathons.
|
||||
</Container>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: ['column', null, 'row'],
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Button variant="ctaLg" as="a" href="#demo">
|
||||
Open an account
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
backgroundImage: theme.util.gx('cyan', 'blue'),
|
||||
ml: 2,
|
||||
display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
|
||||
}}
|
||||
variant="ctaLg"
|
||||
as="a"
|
||||
href="/bank/first/Hack_Club_Bank_for_FIRST_Teams.pdf"
|
||||
target="_blank"
|
||||
>
|
||||
Download this page
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Features />
|
||||
|
||||
<Box id="testimonials">
|
||||
<Testimonials />
|
||||
</Box>
|
||||
|
||||
<Container
|
||||
variant="container"
|
||||
id="demo"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
pt: 5
|
||||
}}
|
||||
>
|
||||
<Heading variant="title">Get started in a day.</Heading>
|
||||
<Text variant="lead" color="muted">
|
||||
We’ll help you get set up and running in no time.
|
||||
</Text>
|
||||
</Container>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', null, 'row'],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Steps />
|
||||
<Card
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'darkless',
|
||||
color: 'snow',
|
||||
width: ['100%', null, 356],
|
||||
float: [null, null, 'right'],
|
||||
height: 'fit-content'
|
||||
}}
|
||||
>
|
||||
<Text variant="heading" sx={{ fontSize: 24, lineHeight: 2 }}>
|
||||
Open a demo account
|
||||
</Text>
|
||||
<Form />
|
||||
</Card>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Footer dark key="footer" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
BIN
public/bank/first/Hack_Club_Bank_for_FIRST_Teams.pdf
Normal file
BIN
public/bank/first/Hack_Club_Bank_for_FIRST_Teams.pdf
Normal file
Binary file not shown.
4
public/bank/meet-teams-using-bank.svg
Normal file
4
public/bank/meet-teams-using-bank.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
BIN
public/bank/poseidon-dashboard.png
Normal file
BIN
public/bank/poseidon-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
19
public/bank/stripe-card--front.svg
Normal file
19
public/bank/stripe-card--front.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
BIN
public/hackers/brian-cisto.jpeg
Normal file
BIN
public/hackers/brian-cisto.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
public/hackers/ian-marwong.jpg
Normal file
BIN
public/hackers/ian-marwong.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/signatures/prophet_orpheus-light.png
Normal file
BIN
public/signatures/prophet_orpheus-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Reference in New Issue
Block a user