Fiscal Sponsorship: Add contact info & climate commitment

components/fiscal-sponsorship/contact.js

@@ -0,0 +1,36 @@
+import Icon from '../icon'
+import { Flex, Link, Text } from 'theme-ui'
+
+const phoneNumber = '+1 (844) 237-2290'
+const phoneNumberUri = '+1-844-237-2290'
+const email = 'hcb@hackclub.com'
+
+export default function ContactBanner({ sx }) {
+  return (
+    <Flex
+      sx={{
+        bg: 'sunken',
+        color: 'slate',
+        alignItems: 'center',
+        p: 3,
+        gap: [3, 2],
+        ...sx
+      }}
+    >
+      <Icon
+        glyph="message"
+        sx={{ color: 'inherit', flexShrink: 0, my: -1 }}
+        aria-hidden
+      />
+      <Text
+        sx={{
+          textWrap: 'balance',
+          a: { color: 'inherit', mx: '0.125em', whiteSpace: 'nowrap' }
+        }}
+      >
+        Questions? Email <Link href={`mailto:${email}`}>{email}</Link>{' '}
+        or&nbsp;call <Link href={`tel:${phoneNumberUri}`}>{phoneNumber}</Link>
+      </Text>
+    </Flex>
+  )
+}

components/footer.js

@@ -52,8 +52,6 @@ const Service = ({ href, icon, name = '', ...props }) => (
 const Footer = ({
   dark = false,
   email = 'team@hackclub.com',
-  phoneNumber = '1-855-625-HACK',
-  phoneNumberUri = '1-855-625-HACK',
   children,
   ...props
 }) => (
@@ -181,7 +179,7 @@ const Footer = ({
             <Service href={`mailto:${email}`} icon="email-fill" />
           </Grid>
           <Text my={2}>
-          <Link href={`tel:${phoneNumberUri}`}>{phoneNumber}</Link>
+            <Link href="tel:1-855-625-HACK">1-855-625-HACK</Link>
             <br />
             <Text as="span" color="muted">
               (call toll-free)

pages/fiscal-sponsorship/about.js

@@ -1,12 +1,12 @@
-import { Box, Card, Container, Flex, Link, Text } from 'theme-ui'
-import { useEffect, useRef, useState } from 'react'
+import { Box, Container, Flex, Link, Text } from 'theme-ui'
+import { useEffect, useRef } from 'react'
 import { keyframes } from '@emotion/react'
 import FlexCol from '../../components/flex-col'
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
 import ForceTheme from '../../components/force-theme'
 import Nav from '../../components/nav'
-import HcbFooter from '../../components/fiscal-sponsorship/footer'
+import Footer from '../../components/footer'
 import Icon from '../../components/icon'
 import Tilt from '../../components/tilt'
 
@@ -487,7 +487,7 @@ export default function FiscalSponsorship() {
           }
         }}
       />
-      <HcbFooter dark />
+      <Footer dark />
     </Box>
   )
 }

pages/fiscal-sponsorship/apply/index.js

@@ -1,17 +1,18 @@
-import { useState, useRef } from 'react'
 import { useRouter } from 'next/router'
-import { Box, Text, Flex, Heading, Grid, Alert, Button } from 'theme-ui'
-import ForceTheme from '../../../components/force-theme'
+import { useRef, useState } from 'react'
+import { Alert, Box, Button, Flex, Grid, Heading, Text } from 'theme-ui'
 import Head from 'next/head'
+import Link from 'next/link'
+import Icon from '@hackclub/icons'
 import Meta from '@hackclub/meta'
-import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
-import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
+import ForceTheme from '../../../components/force-theme'
 import FormContainer from '../../../components/fiscal-sponsorship/apply/form-container'
 import HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
 import OrganizationInfoForm from '../../../components/fiscal-sponsorship/apply/org-form'
 import PersonalInfoForm from '../../../components/fiscal-sponsorship/apply/personal-form'
-import Icon from '@hackclub/icons'
-import Link from 'next/link'
+import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
+import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
+import ContactBanner from '../../../components/fiscal-sponsorship/contact'
 
 export default function Apply() {
   const router = useRouter()
@@ -47,18 +48,17 @@ export default function Apply() {
         <Flex
           sx={{
             flexDirection: 'column',
-            justifyContent: 'space-between',
             px: [3, 5],
-            py: 5,
-            gap: [4, 5],
+            py: 4,
+            gap: 4,
             height: [null, '100svh'],
             position: [null, null, 'sticky'],
             top: 0,
             overflowY: [null, null, 'auto']
           }}
         >
           {/* vertically align h1 to top of form */}
-          <Box as="header" sx={{ mt: [null, null, -24] }}>
+          <Box as="header" sx={{ mt: [null, 3], mb: 'auto' }}>
             <Link href="/fiscal-sponsorship" passHref legacyBehavior>
               <Text
                 as="a"
@@ -101,6 +101,7 @@ export default function Apply() {
             </Heading>
           </Box>
           <HCBInfo />
+          <ContactBanner sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }} />
         </Flex>
         <FormContainer
           ref={formContainer}

pages/fiscal-sponsorship/apply/success.js

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
-import { Box, Container, Text, Link, Flex, Image } from 'theme-ui'
+import { Container, Text, Link, Image } from 'theme-ui'
 import JSConfetti from 'js-confetti'
-import Icon from '../../../components/icon'
 import { Balancer } from 'react-wrap-balancer'
 
 function fireConfetti() {

pages/fiscal-sponsorship/climate/index.js

@@ -5,23 +5,20 @@ import {
   Flex,
   Grid,
   Heading,
-  Input,
-  Select
+  Input
 } 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 HcbFooter from '../../../components/fiscal-sponsorship/footer'
+import Footer from '../../../components/footer'
 import MSparkles from '../../../components/sparkles/money'
 import { Text, Button, Card } from 'theme-ui'
 import Icon from '@hackclub/icons'
 import OrganizationCard, {
   Badge
 } from '../../../components/fiscal-sponsorship/directory/card'
-import Zoom from 'react-reveal/Zoom'
 import fuzzysort from 'fuzzysort'
-import ScrollHint from '../../../components/scroll-hint'
 import { useEffect, useState } from 'react'
 /** @jsxImportSource theme-ui */
 import NextLink from 'next/link'
@@ -1214,7 +1211,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
           </Box>
         </Box>
       </Box>
-      <HcbFooter light key="footer" />
+      <Footer />
     </div>
   )
 }

pages/fiscal-sponsorship/first.js

@@ -1,19 +1,10 @@
-import {
-  Box,
-  Heading,
-  Container,
-  Card,
-  Text,
-  Flex,
-  Button,
-  Badge
-} from 'theme-ui'
+import { Box, Heading, Container, Text, 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 HcbFooter from '../../components/fiscal-sponsorship/footer'
+import Footer from '../../components/footer'
 import Icon from '../../components/icon'
 import Features from '../../components/fiscal-sponsorship/first/features'
 
@@ -186,7 +177,7 @@ export default function First({ stats }) {
           <Start stats={stats} />
         </Box>
       </Box>
-      <HcbFooter dark key="footer" />
+      <Footer dark />
     </>
   )
 }

pages/fiscal-sponsorship/index.js

@@ -1,28 +1,29 @@
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Balancer } from 'react-wrap-balancer'
 import {
   Box,
+  Button,
   Card,
   Container,
   Flex,
-  Link as UILink,
-  Heading,
-  Text,
   Grid,
-  Button
+  Heading,
+  Link as UILink,
+  Text
 } from 'theme-ui'
-import { Balancer } from 'react-wrap-balancer'
-import Meta from '@hackclub/meta'
-import Head from 'next/head'
 import ForceTheme from '../../components/force-theme'
 import Nav from '../../components/nav'
-import HcbFooter from '../../components/fiscal-sponsorship/footer'
+import Footer from '../../components/footer'
+import Photo from '../../components/photo'
 import Stat from '../../components/stat'
 import Tilt from '../../components/tilt'
-import Photo from '../../components/photo'
-import Image from 'next/image'
-import Link from 'next/link'
 
-import OuternetImgFile from '../../public/home/outernet-110.jpg'
+import ContactBanner from '../../components/fiscal-sponsorship/contact'
 import Features from '../../components/fiscal-sponsorship/features'
+import OuternetImgFile from '../../public/home/outernet-110.jpg'
 
 const organizations = [
   {
@@ -375,8 +376,11 @@ export default function Page() {
                 color="slate"
                 sx={{ maxWidth: '52ch' }}
               >
-                This fee goes directly to Hack Club's operations staff, including teen interns working under mentors. This allows us to deliver
-                best-in-class software and support, grow sustainably, while also providing paid career training for young people from diverse backgrounds.
+                This fee goes directly to Hack Club's operations staff,
+                including teen interns working under mentors. This allows us to
+                deliver best-in-class software and support, grow sustainably,
+                while also providing paid career training for young people from
+                diverse backgrounds.
               </Text>
             </div>
             <Text
@@ -393,10 +397,10 @@ export default function Page() {
                     'linear-gradient(to right, #f06844 0%, #ee4c54 25%, #d45e95 50%, #9c6ca6 75%, #6583c1 100%) !important'
                 },
                 '@supports (-webkit-background-clip: text) and (background: linear-gradient(to right in oklch, white, black)':
-                {
-                  backgroundImage:
-                    'linear-gradient(to right in oklch, #f06844 0%, #ee4c54 25%, #d45e95 50%, #9c6ca6 75%, #6583c1 100%) !important'
-                }
+                  {
+                    backgroundImage:
+                      'linear-gradient(to right in oklch, #f06844 0%, #ee4c54 25%, #d45e95 50%, #9c6ca6 75%, #6583c1 100%) !important'
+                  }
               }}
               style={{ margin: 0 }}
             >
@@ -498,10 +502,11 @@ export default function Page() {
               src={OuternetImgFile}
               alt="Each year, 1000s of teenagers attend Hack Club events like this"
               showAlt
+              sx={{ height: '100%' }}
             />
           </Link>
           <div>
-            <Heading as="h2" variant="headline">
+            <Heading as="h2" variant="headline" sx={{ mt: [0, 0] }}>
               Built by Hack Club
             </Heading>
             <p>
@@ -514,11 +519,44 @@ export default function Page() {
               clubs around the world.
             </p>
             <p>
-              We started HCB in 2018 to support teen-led clubs and hackathons. After
-              showing it to our educational partners, we knew we had tapped into
-              something much larger. Today, HCB removes financial and
-              legal barriers for thousands doing good in their community.
+              We started HCB in 2018 to support teen-led clubs and hackathons.
+              After showing it to our educational partners, we knew we had
+              tapped into something much larger. Today, HCB removes financial
+              and legal barriers for thousands doing good in their community.
             </p>
+            <Flex
+              as="footer"
+              sx={{
+                alignItems: 'center',
+                gap: 3,
+                color: 'slate',
+                borderRadius: 'default',
+                lineHeight: 'caption',
+                textWrap: 'balance',
+                svg: { flexShrink: 0, fill: 'blue' }
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={32}
+                height={32}
+                viewBox="0 0 16 16"
+                aria-hidden
+              >
+                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z" />
+              </svg>
+              <span>
+                As part of our commitment to climate justice, funding for HCB’s
+                operations&nbsp;and staff will never come from the{' '}
+                <UILink
+                  href="https://www.ffisolutions.com/the-carbon-underground-200-500/"
+                  color="blue"
+                >
+                  fossil fuel industry
+                </UILink>
+                .
+              </span>
+            </Flex>
           </div>
         </Grid>
       </Container>
@@ -576,12 +614,13 @@ export default function Page() {
               Apply now
             </Button>
           </Link>
-          <Text as="p" variant="lead" sx={{ color: 'white' }}>
+          <Text as="p" variant="lead" sx={{ color: 'white', mb: [0, 0] }}>
             <Balancer>No startup fees, no&nbsp;minimum balance.</Balancer>
           </Text>
         </Flex>
       </Box>
-      <HcbFooter />
+      <ContactBanner sx={{ justifyContent: 'center' }} />
+      <Footer />
     </>
   )
 }