diff --git a/components/bank/first/features.js b/components/bank/first/features.js new file mode 100644 index 00000000..c7e14b53 --- /dev/null +++ b/components/bank/first/features.js @@ -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 ( + + + yeah + + + + Everything you'll need. + +
+
+ + Organize your team's finances in real time, receive grants, gain + nonprofit status, & more. +
+ Use features engineered by FIRST alumni to help you run a + successful team. + +
+
+ + + + + + + + + + + + + + + Issue physical debit cards to all your teammates.} + /> + + + + + + + + + + + {/* + + + + Date + + 10-10-2020 + + + + Pay to the
+ order of + + + Hack Club + + + + $ + + 1000 + + + + + One thousand only + + Dollars + + + + + + Memo + + {' '} + Grant for Poseidon Robotics + + + Prophet Orpheus signature + + + + ⑆ 00000000000 ⑆ 123456789 ⑆ + + + + */} + + + + + + Hack Club does not directly provide banking services. Banking services + provided by Silicon Valley Bank, an FDIC-certified institution. + + + + + + ) +} + +function Module({ icon, name, body }) { + return ( + + + + + + + {name} + + {body} + + + + + ) +} + +function ModuleDetails({ children }) { + return ( + + + {children} + + + ) +} + +function Document({ name, cost }) { + return ( + + + + {name} + + {cost && ( + + {cost} + + )} + + + ) +} + +function Laptop({ href, title, sx }) { + return ( + + + + ) +} diff --git a/components/bank/first/form.js b/components/bank/first/form.js new file mode 100644 index 00000000..e6b94623 --- /dev/null +++ b/components/bank/first/form.js @@ -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 ( + + {children} + + ) +} + +function Field({ + placeholder, + label, + name, + type, + value, + onChange, + required = true +}) { + return ( + + + + + ) +} + +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 ( + <> + + setValues({ ...values, eventName: e.target.value })} + /> + + + + + + setValues({ ...values, teamNumber: e.target.value })} + required={false} + /> + + setValues({ ...values, userEmail: e.target.value })} + /> + + + {submitted && ( + + + Submitted! Check your email for a sign in link. + + )} + + ) +} diff --git a/components/bank/first/steps.js b/components/bank/first/steps.js new file mode 100644 index 00000000..82f25def --- /dev/null +++ b/components/bank/first/steps.js @@ -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 ( + + {children} + + ) +} + +function TimelineStep({ children }) { + return ( + + {children} + + ) +} + +function Circle({ children }) { + return ( + + {children} + + ) +} + +function Step({ icon, name, duration, href }) { + return ( + + {/* */} + + {href ? ( + + + + ) : ( + + )} + + + + {duration} + + + {name} + + + {/* */} + + ) +} + +export default function RealTimeline() { + return ( + + + + + + ) +} diff --git a/components/bank/first/testimonials.js b/components/bank/first/testimonials.js new file mode 100644 index 00000000..8c0998c7 --- /dev/null +++ b/components/bank/first/testimonials.js @@ -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 ( + <> + + + FIRST teams all over the country run on Bank. + + + Everywhere from San Jose to Boston to New York, + Hack Club Bank powers teams of all sizes. + + + + + + + + + + ) +} + +function Organization({ + logo, + name, + website, + teamNum, + teamLocation, + url, + imgSrc, + quote, + hackerName, + hackerAvatarUrl, + hackerRole, + transparency +}) { + return ( + + + + Robots team + + + + {`${name} + + + {name} + +
+ + {teamNum} + {' '} + • {teamLocation} + + + + +
+ + "{quote}" + + + + + + + + {hackerName} + + {hackerRole} + + + {transparency && ( + + + + )} + + + + + + ) +} diff --git a/components/bank/form.js b/components/bank/form.js index e75859e7..67483b92 100644 --- a/components/bank/form.js +++ b/components/bank/form.js @@ -89,7 +89,7 @@ export default function BankApplyForm() { Hack Club Slack! - + Your Organization diff --git a/next.config.js b/next.config.js index 3d0aad10..3aefd7b3 100755 --- a/next.config.js +++ b/next.config.js @@ -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 }, diff --git a/pages/api/bank-apply.js b/pages/api/bank/apply.js similarity index 100% rename from pages/api/bank-apply.js rename to pages/api/bank/apply.js diff --git a/pages/api/bank/demo.js b/pages/api/bank/demo.js new file mode 100644 index 00000000..42cb2454 --- /dev/null +++ b/pages/api/bank/demo.js @@ -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' }) + } +} diff --git a/pages/bank/first.js b/pages/bank/first.js new file mode 100644 index 00000000..0d4878da --- /dev/null +++ b/pages/bank/first.js @@ -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 ( + <> + + + Financial Toolkit for FIRST Teams — Hack Club Bank + + + +