From 1c93022fd1afc7d9420c05e25b73a52ae7df0971 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 14 Mar 2024 23:28:56 -0400
Subject: [PATCH 1/7] FS: Add contact banner

---
 components/fiscal-sponsorship/contact.js | 36 ++++++++++++++++
 components/fiscal-sponsorship/footer.js  | 13 ------
 pages/fiscal-sponsorship/apply/index.js  | 11 ++---
 pages/fiscal-sponsorship/index.js        | 53 +++++++++++++-----------
 4 files changed, 71 insertions(+), 42 deletions(-)
 create mode 100644 components/fiscal-sponsorship/contact.js
 delete mode 100644 components/fiscal-sponsorship/footer.js

diff --git a/components/fiscal-sponsorship/contact.js b/components/fiscal-sponsorship/contact.js
new file mode 100644
index 000000000..6e1a1da54
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/fiscal-sponsorship/footer.js b/components/fiscal-sponsorship/footer.js
deleted file mode 100644
index 888ab7932..000000000
--- a/components/fiscal-sponsorship/footer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Footer from '../footer'
-
-// Footer with default props for HCB-specific contact information
-const HcbFooter = props => (
-  <Footer
-    phoneNumber="+1 (844) 237 2290"
-    phoneNumberUri="+1-844-237-2290"
-    email="hcb@hackclub.com"
-    {...props}
-  />
-)
-
-export default HcbFooter
diff --git a/pages/fiscal-sponsorship/apply/index.js b/pages/fiscal-sponsorship/apply/index.js
index f645d7533..e97c5bdf0 100644
--- a/pages/fiscal-sponsorship/apply/index.js
+++ b/pages/fiscal-sponsorship/apply/index.js
@@ -6,8 +6,9 @@ import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
 import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
-import FormContainer from '../../../components/fiscal-sponsorship/apply/form-container'
 import HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
+import ContactBanner from '../../../components/fiscal-sponsorship/contact'
+import FormContainer from '../../../components/fiscal-sponsorship/apply/form-container'
 import OrganizationInfoForm from '../../../components/fiscal-sponsorship/apply/org-form'
 import PersonalInfoForm from '../../../components/fiscal-sponsorship/apply/personal-form'
 import Icon from '@hackclub/icons'
@@ -47,10 +48,9 @@ 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,
@@ -58,7 +58,7 @@ export default function Apply() {
           }}
         >
           {/* 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: 'extra', bg: 'snow' }} />
         </Flex>
         <FormContainer
           ref={formContainer}
diff --git a/pages/fiscal-sponsorship/index.js b/pages/fiscal-sponsorship/index.js
index a322e2421..da3c41e24 100644
--- a/pages/fiscal-sponsorship/index.js
+++ b/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 }}
             >
@@ -514,10 +518,10 @@ 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>
           </div>
         </Grid>
@@ -576,12 +580,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 />
     </>
   )
 }

From 4b9f17eb2afbefddf1d1084e27d32595e7166bd0 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 14 Mar 2024 23:42:32 -0400
Subject: [PATCH 2/7] FS: Add climate commitment

---
 pages/fiscal-sponsorship/index.js | 40 ++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/pages/fiscal-sponsorship/index.js b/pages/fiscal-sponsorship/index.js
index da3c41e24..3fae48e81 100644
--- a/pages/fiscal-sponsorship/index.js
+++ b/pages/fiscal-sponsorship/index.js
@@ -502,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>
@@ -523,6 +524,43 @@ export default function Page() {
               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',
+                // borderColor: 'green',
+                // border: '1px solid',
+                // bg: 'snow',
+                color: 'slate',
+                borderRadius: 'default',
+                lineHeight: 'caption',
+                // p: 3,
+                gap: 3,
+                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>

From 74eb17a5ed5dac4d131066643dbaf28b99415e0c Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 14 Mar 2024 23:42:58 -0400
Subject: [PATCH 3/7] Drop radius on apply page

---
 pages/fiscal-sponsorship/apply/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/fiscal-sponsorship/apply/index.js b/pages/fiscal-sponsorship/apply/index.js
index e97c5bdf0..79c06e584 100644
--- a/pages/fiscal-sponsorship/apply/index.js
+++ b/pages/fiscal-sponsorship/apply/index.js
@@ -101,7 +101,7 @@ export default function Apply() {
             </Heading>
           </Box>
           <HCBInfo />
-          <ContactBanner sx={{ borderRadius: 'extra', bg: 'snow' }} />
+          <ContactBanner sx={{ borderRadius: 'default', bg: 'snow' }} />
         </Flex>
         <FormContainer
           ref={formContainer}

From fbb47b2edf8cd3a92c80c12de58581dc002198d3 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 14 Mar 2024 23:46:14 -0400
Subject: [PATCH 4/7] Drop comments

---
 pages/fiscal-sponsorship/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/pages/fiscal-sponsorship/index.js b/pages/fiscal-sponsorship/index.js
index 3fae48e81..d4dfa72ad 100644
--- a/pages/fiscal-sponsorship/index.js
+++ b/pages/fiscal-sponsorship/index.js
@@ -528,14 +528,10 @@ export default function Page() {
               as="footer"
               sx={{
                 alignItems: 'center',
-                // borderColor: 'green',
-                // border: '1px solid',
-                // bg: 'snow',
+                gap: 3,
                 color: 'slate',
                 borderRadius: 'default',
                 lineHeight: 'caption',
-                // p: 3,
-                gap: 3,
                 textWrap: 'balance',
                 svg: { flexShrink: 0, fill: 'blue' }
               }}

From 35c6767b38fbe9a650d4a67f65a149fa82a1dde0 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 14 Mar 2024 23:54:23 -0400
Subject: [PATCH 5/7] Fix imports

---
 pages/fiscal-sponsorship/about.js         |  8 ++++----
 pages/fiscal-sponsorship/apply/index.js   | 18 +++++++++---------
 pages/fiscal-sponsorship/apply/success.js |  3 +--
 pages/fiscal-sponsorship/climate/index.js |  9 +++------
 pages/fiscal-sponsorship/first.js         | 15 +++------------
 5 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/pages/fiscal-sponsorship/about.js b/pages/fiscal-sponsorship/about.js
index a6bcf4c42..8ae59a946 100644
--- a/pages/fiscal-sponsorship/about.js
+++ b/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>
   )
 }
diff --git a/pages/fiscal-sponsorship/apply/index.js b/pages/fiscal-sponsorship/apply/index.js
index 79c06e584..5936cbda1 100644
--- a/pages/fiscal-sponsorship/apply/index.js
+++ b/pages/fiscal-sponsorship/apply/index.js
@@ -1,18 +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 HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
-import ContactBanner from '../../../components/fiscal-sponsorship/contact'
+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()
diff --git a/pages/fiscal-sponsorship/apply/success.js b/pages/fiscal-sponsorship/apply/success.js
index c52d1d419..0ab78a648 100644
--- a/pages/fiscal-sponsorship/apply/success.js
+++ b/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() {
diff --git a/pages/fiscal-sponsorship/climate/index.js b/pages/fiscal-sponsorship/climate/index.js
index 0fe932779..69fc7d308 100644
--- a/pages/fiscal-sponsorship/climate/index.js
+++ b/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>
   )
 }
diff --git a/pages/fiscal-sponsorship/first.js b/pages/fiscal-sponsorship/first.js
index 3725b66e7..7960860c1 100644
--- a/pages/fiscal-sponsorship/first.js
+++ b/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 />
     </>
   )
 }

From 4ea2a631f1dd4ee91c8dd8eab3947f4b3d37c3e3 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Tue, 19 Mar 2024 14:17:52 -0400
Subject: [PATCH 6/7] Add width: fit-content on Apply

Co-authored-by: Gary Tou <gary@garytou.com>
---
 pages/fiscal-sponsorship/apply/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/fiscal-sponsorship/apply/index.js b/pages/fiscal-sponsorship/apply/index.js
index 5936cbda1..b6023368f 100644
--- a/pages/fiscal-sponsorship/apply/index.js
+++ b/pages/fiscal-sponsorship/apply/index.js
@@ -101,7 +101,7 @@ export default function Apply() {
             </Heading>
           </Box>
           <HCBInfo />
-          <ContactBanner sx={{ borderRadius: 'default', bg: 'snow' }} />
+          <ContactBanner sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }} />
         </Flex>
         <FormContainer
           ref={formContainer}

From c0b4833113acae66a343f12858d58d72d1124ab8 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Tue, 19 Mar 2024 14:19:34 -0400
Subject: [PATCH 7/7] Drop footer props

---
 components/footer.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/footer.js b/components/footer.js
index 60ce40a1e..76afb92a8 100644
--- a/components/footer.js
+++ b/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)