(yeah)

copy pass
2026-04-20 00:25:19 +00:00 · 2022-11-07 15:06:17 -05:00 · 2022-11-07 15:06:17 -05:00 · 6097c1cc93
commit 6097c1cc93
parent c4be7c0771
5 changed files with 81 additions and 89 deletions
--- a/components/bank/first/features.js
+++ b/components/bank/first/features.js
@ -15,11 +15,11 @@ export default function Features() {
        <br />
        <br />
        <Text sx={{ color: 'muted', maxWidth: '48', fontSize: 28 }}>
-          Receive grants, track your team's finances in real time, nonprofit
-          status, more.
+          Organize your team's finances in real time, receive grants, gain
+          nonprofit status, & more.
          <br />
-          Features engineered by FIRST alumuni to help you run a successful
-          team.
+          Use features engineered by <i>FIRST</i> alumni to help you run a
+          successful team.
        </Text>
        <br />
        <br />
--- a/components/bank/first/form.js
+++ b/components/bank/first/form.js
@ -41,7 +41,6 @@ function Field({ placeholder, label, name, type, value, onChange }) {
        }}
        onChange={onChange}
        value={value}
-        required
      />
    </Box>
  )
@ -79,15 +78,15 @@ export default function Signup() {
  return (
    <>
      <Base method="POST" action="/api/bank/demo">
-        {/* TODO: get their team name from the FIRST API, using their team number */}
        <Field
          label="Team Name"
          name="eventName"
          placeholder="Poseidon Robotics"
          value={values.eventName}
          onChange={e => setValues({ ...values, eventName: e.target.value })}
+          required
        />
-        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, w: '100%' }}>
          <Box sx={{ my: 2 }}>
            <Label htmlFor="teamType" sx={{ color: 'muted', fontSize: 18 }}>
              Level
@ -110,7 +109,7 @@ export default function Signup() {
          </Box>

          <Field
-            label="Team number"
+            label="Team number (optional)"
            name="teamNumber"
            placeholder="12345"
            value={values.teamNumber}
@ -124,6 +123,7 @@ export default function Signup() {
          type="email"
          value={values.userEmail}
          onChange={e => setValues({ ...values, userEmail: e.target.value })}
+          required
        />
        <Button
          sx={{
@ -148,7 +148,7 @@ export default function Signup() {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'start',
-            animation: `${hideAnimation} 0s ease-in 5s`,
+            animation: `${hideAnimation} 0s ease-in 15s`,
            animationFillMode: 'forwards'
          }}
        >
--- a/components/bank/first/steps.js
+++ b/components/bank/first/steps.js
@ -68,67 +68,65 @@ function Circle({ children }) {
 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
+      {/* <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={{
-            mt: 0,
-            display: 'flex',
-            justifyContent: 'left',
-            flexDirection: 'column',
-            textAlign: 'left'
+            bg: 'muted',
+            color: 'darker',
+            fontWeight: 'normal',
+            textTransform: 'uppercase',
+            width: 64,
+            fontSize: 18,
+            px: 2
          }}
        >
-          <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>
+          {duration}
+        </Badge>
+        <Text sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}>
+          {name}
+        </Text>
+      </Container>
+      {/* </Slide> */}
    </TimelineStep>
  )
 }

 export default function RealTimeline() {
  return (
-    <Timeline px={3}>
+    <Timeline sx={{ px: 3 }}>
      <Step
        icon="send"
-        name="Open a demo account &amp; explore"
-        duration="Day 1"
+        name="Open a demo account &amp; explore features"
+        duration="Step 1"
      />
      <Step
-        icon="post"
-        name="Sign the contract &amp; unlock full access"
-        duration="Day 2"
+        icon="rep"
+        name="Meet with the Bank team on a call"
+        duration="Step 2"
      />
      <Step
        icon="friend"
-        name="Start accepting grants &amp; order debit cards"
-        duration="Day 3"
+        name="Start acceping grants &amp; issue debit cards"
+        duration="Step 3"
        mb={0}
      />
    </Timeline>
--- a/pages/api/bank/demo.js
+++ b/pages/api/bank/demo.js
@ -29,7 +29,9 @@ export default async function handler(req, res) {
        console.log(r)
        applicationsTable.create({
          'Email Address': data.userEmail,
-          'Event Name': `${data.eventName} (${data.teamType} ${data.teamNumber})`,
+          'Event Name': `${data.eventName} ${
+            data.teamType && `(${data.teamType} ${data.teamNumber})`
+          }`,
          Status: 'Demo Account',
          'HCB account URL': `https://bank.hackclub.com/${r.slug}`
        })
--- a/pages/bank/first.js
+++ b/pages/bank/first.js
@ -32,7 +32,7 @@ export default function First() {
      <Meta as={Head}>
        <title>Hack Club Bank — Toolkit for FIRST Teams</title>
      </Meta>
-      <Box as="main" key="main">
+      <Box as="main" key="main" sx={{ mb: 6 }}>
        <Nav dark />
        <ForceTheme theme="dark" />
        <Box
@ -89,16 +89,24 @@ export default function First() {
                fontWeight: 'normal',
                fontSize: 2,
                mt: 3,
-                mx: 'auto'
+                mx: 'auto',
+                borderRadius: ['default', null, 'extra']
              }}
            >
-              <Box as="div" sx={{ display: 'flex' }}>
+              <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 }}>Get nonprofit status</Text>
+                  <Text sx={{ ml: 1 }}>Nonprofit status</Text>
                </Box>
                <Box
                  as="span"
@ -107,9 +115,16 @@ export default function First() {
                  <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 }}>Issue debit cards</Text>
+                  <Text sx={{ ml: 1 }}>Free to use</Text>
                </Box>
              </Box>
            </Badge>
@ -122,26 +137,27 @@ export default function First() {
              variant="copy"
            >
              Built by <i>FIRST</i> alumni for <i>FIRST</i> teams, Hack Club
-              Bank is a fiscal sponsor and super-powered financial toolkit used
-              by hundreds of hackathons, clubs, nonprofits, and <i>FIRST</i>{' '}
-              teams worldwide.
+              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">
-                Sign up
+                Open an account
              </Button>

              <Button
                sx={{
                  backgroundImage: theme.util.gx('cyan', 'blue'),
-                  ml: 2
+                  ml: 2,
+                  display: ['none', null, 'inline-block'] // hide on mobile because viewing pdfs on mobile is a pain anyways
                }}
                variant="ctaLg"
                as="a"
@ -199,30 +215,6 @@ export default function First() {
            <Form />
          </Card>
        </Flex>
-        {/* <Container
-          variant="narrow"
-          sx={{
-            pt: 3,
-            pb: 6,
-            borderColor: 'muted',
-            textAlign: 'center'
-          }}
-        >
-          <Button
-            sx={{
-              backgroundImage: theme.util.gx('cyan', 'blue'),
-              fontSize: 2,
-              textTransform: 'none',
-              mt: 3
-            }}
-            as="a"
-            href="/bank/first/Hack_Club_Bank_for_FIRST_Teams.pdf"
-            target="_blank"
-          >
-            <Icon glyph="download" size={36} />
-            Download this page as a PDF
-          </Button>
-        </Container> */}
      </Box>
      <Footer dark key="footer" />
    </>