Merge pull request #1402 from hackclub/garyhtou/hcb-application-adults

[HCB] Add teenager mission callout on application form

components/fiscal-sponsorship/apply/callout.js

@@ -0,0 +1,29 @@
+import { Box, Text } from 'theme-ui'
+
+export default function Callout() {
+  return (
+    <Box
+      sx={{
+        borderLeft: '3px solid',
+        borderLeftColor: 'blue',
+        paddingLeft: 2,
+        color: 'blue',
+        fontSize: 1,
+        textWrap: 'pretty',
+        lineHeight: 1.375
+      }}
+    >
+      <Text as="p" sx={{ fontWeight: 'bold' }}>
+        HCB is a fiscal sponsor primaily for teenage-led organization
+      </Text>
+      <Text as="p" sx={{ mt: 1, textWrap: 'balance' }}>
+        Although we would love to be able to support organizations across all
+        ages and missions, we are currently prioritizing applications from
+        teenagers.
+      </Text>
+      <Text as="p" sx={{ mt: 1, textWrap: 'balance' }}>
+        We are accepting adult-led organizations on a case-by-case basis.
+      </Text>
+    </Box>
+  )
+}

pages/fiscal-sponsorship/apply/index.js

@@ -13,6 +13,7 @@ import PersonalInfoForm from '../../../components/fiscal-sponsorship/apply/perso
 import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
 import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
 import ContactBanner from '../../../components/fiscal-sponsorship/contact'
+import Callout from '../../../components/fiscal-sponsorship/apply/callout'
 
 export default function Apply() {
   const router = useRouter()
@@ -105,7 +106,9 @@ export default function Apply() {
             </Heading>
           </Box>
           <HCBInfo />
-          <ContactBanner sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }} />
+          <ContactBanner
+            sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }}
+          />
         </Flex>
         <FormContainer
           ref={formContainer}
@@ -121,6 +124,8 @@ export default function Apply() {
             })
           }
         >
+          <Callout />
+
           <Heading as="h2" variant="headline" sx={{ mb: -2 }}>
             Your organization
           </Heading>