Refine Fiscal Sponsorship page (#1090)

Co-authored-by: Dylan Wahbe <153225786+dwahbe@users.noreply.github.com>

components/fiscal-sponsorship/features.js

@@ -1,15 +1,17 @@
-import { Flex, Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
+import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
 import Icon from '../icon'
-import Balancer from 'react-wrap-balancer'
+import { Balancer } from 'react-wrap-balancer'
+import Image from 'next/image'
+import imgLaptop from '../../public/fiscal-sponsorship/laptop.png'
 
 export default function Features() {
   return (
     <Box sx={{ pt: 5, pb: [5, 6], bg: 'snow' }}>
       <Container>
-        <Heading as="h2" variant="title" sx={{ mb: 3 }}>
-          Financial tools for your nonprofit,
-          <br />
-          built by a nonprofit.
+        <Heading as="h2" variant="title" sx={{ mb: 3, maxWidth: 'copyUltra' }}>
+          <Balancer>
+            Powerful financial tools built by our nonprofit, for yours.
+          </Balancer>
         </Heading>
         <Text as="p" variant="lead" sx={{ color: 'slate', maxWidth: '52ch' }}>
           Unlike other fiscal sponsors, we don’t license software from
@@ -26,7 +28,7 @@ export default function Features() {
           <Module
             icon="card"
             name="Issue physical & virtual debit cards"
-            body="to all your teammates."
+            body="for your team, with  Pay support."
           />
           <Module
             icon="web"
@@ -43,20 +45,20 @@ export default function Features() {
             name="Make your finances transparent"
             body="to your team and optionally, public."
           />
-          <Module
-            icon="admin"
-            name="Pay team members"
-            body="with built-in payroll."
-          />
           <Module
             icon="docs"
             name="We file all your taxes"
             body="automatically, including form 990."
           />
+          <Module
+            icon="admin"
+            name="Pay team members"
+            body="with built-in payroll."
+          />
           <Module
             icon="support"
-            name="Embed a custom donation form"
-            body="on your website."
+            name="Accept donations of any size"
+            body="with a custom, embeddable online form."
           />
           <Module
             icon="leader"
@@ -69,7 +71,6 @@ export default function Features() {
         <Laptop
           href="https://hcb.hackclub.com/reboot"
           title="See Reboot’s finances in public"
-          sx={{}}
         />
       </Container>
     </Box>
@@ -94,10 +95,12 @@ function Module({ icon, name, body }) {
           m: 0
         }}
       >
-        <Text as="strong" color="slate">
-          {name}
-        </Text>{' '}
-        {body}
+        <Balancer>
+          <Text as="strong" color="slate">
+            {name}
+          </Text>{' '}
+          {body}
+        </Balancer>
       </Text>
     </Box>
   )
@@ -105,14 +108,16 @@ function Module({ icon, name, body }) {
 
 function Laptop({ href, title, sx }) {
   return (
-    <Link href={href} title={title} sx={sx}>
-      <img
-        src="/fiscal-sponsorship/laptop.png"
+    <Link href={href} title={title} sx={{ textAlign: 'center' }}>
+      <Image
+        src={imgLaptop}
         alt="Laptop"
-        width={1140}
-        height={691}
         style={{ width: '100%', height: 'auto' }}
+        unoptimized
       />
+      <Text variant="caption" as="p" sx={{ color: 'primary', mt: 2 }}>
+        See <i>Reboot</i>’s finances in Transparency Mode
+      </Text>
     </Link>
   )
 }

components/nav.js

@@ -33,8 +33,8 @@ const fixed = props =>
     border-bottom: 1px solid rgba(48, 48, 48, 0.125);
     @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
       background-color: ${props.transparent
-      ? 'transparent'
-      : rgbaBgColor(props, 0.75)};
+        ? 'transparent'
+        : rgbaBgColor(props, 0.75)};
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px);
       /* {bg}; to support dark mode later */
@@ -52,18 +52,12 @@ const Root = styled(Box)`
   }
 `
 
-export const Content = styled(Box)`
+export const Content = styled(Container)`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 1024px;
-  margin: auto;
   position: relative;
   z-index: 2;
-  padding-left: ${theme.space[3]}px;
-  @media (min-width: ${theme.breakpoints[2]}em) {
-    padding: 0 ${theme.space[4]}px;
-  }
 `
 
 const hoverColor = name =>
@@ -74,7 +68,7 @@ const hoverColor = name =>
     slate: 'black',
     black: 'slate',
     primary: 'error'
-  })[name] || 'black'
+  }[name] || 'black')
 
 const slide = keyframes({
   from: { transform: 'translateY(-25%)', opacity: 0 },
@@ -99,7 +93,6 @@ const layout = props =>
           font-weight: bold;
           font-size: ${theme.fontSizes[2]}px;
           width: 100vw;
-          max-width: 18rem;
           &:not(:last-child) {
             border-bottom: 1px solid rgba(48, 48, 48, 0.125);
           }
@@ -114,8 +107,7 @@ const layout = props =>
           justify-content: flex-end;
         }
         a {
-          font-size: ${theme.fontSizes[1]}px;
-          text-transform: uppercase;
+          font-size: 18px;
           &:hover {
             color: ${theme.colors[hoverColor(props.color)]};
           }
@@ -125,7 +117,7 @@ const NavBar = styled(Box)`
   display: none;
   ${layout};
   a {
-    margin-left: ${theme.space[3]}px;
+    margin-left: ${theme.space[1]}px;
     padding: ${theme.space[3]}px;
     text-decoration: none;
     @media (min-width: 56em) {
@@ -135,6 +127,7 @@ const NavBar = styled(Box)`
 `
 
 const Navigation = props => (
+  // REMINDER: This should be no more than 7 links :)
   <NavBar role="navigation" {...props}>
     <NextLink href="/clubs" passHref>
       <Link>Clubs</Link>
@@ -205,13 +198,13 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
   const baseColor = dark
     ? color || 'white'
     : color === 'white' && scrolled
-      ? 'black'
-      : color
+    ? 'black'
+    : color
   const toggleColor = dark
     ? color || 'snow'
     : toggled || (color === 'white' && scrolled)
-      ? 'slate'
-      : color
+    ? 'slate'
+    : color
 
   return (
     <Root

pages/fiscal-sponsorship/index.js

@@ -15,6 +15,7 @@ import Head from 'next/head'
 import ForceTheme from '../../components/force-theme'
 import Nav from '../../components/nav'
 import Footer from '../../components/footer'
+import Stat from '../../components/stat'
 import Tilt from '../../components/tilt'
 import Photo from '../../components/photo'
 import Image from 'next/image'
@@ -153,9 +154,10 @@ export default function Page() {
             backgroundSize: '48px 48px',
             backgroundImage: `linear-gradient(to right,  #fcc8bf 1px, transparent 1px),
                               linear-gradient(to bottom, #fcc8bf 1px, transparent 1px)`,
-            backgroundPosition: 'top left',
-            maskImage: `linear-gradient(180deg, transparent 0%, white 3%)`,
-            opacity: 0.1
+            backgroundPosition: 'top center',
+            maskImage:
+              'linear-gradient(to bottom, transparent 0%, hsl(0deg 0% 100% / 50%) 10%, white 100%)',
+            opacity: 0.18
           }}
         />
         <Container
@@ -167,8 +169,8 @@ export default function Page() {
               position: 'absolute',
               right: [3, 0],
               bottom: 0,
-              width: [128, 300],
-              height: [128, 300],
+              width: [128, 200, 300],
+              height: [128, 200, 300],
               opacity: 0.5
             }
           }}
@@ -202,6 +204,9 @@ export default function Page() {
             variant="title"
             sx={{
               fontSize: [5, 6, null, 7],
+              // magic number to align with the grid
+              mt: [null, null, -3],
+              lineHeight: [null, null, 1.03],
               span: {
                 WebkitTextStroke: 'currentColor',
                 WebkitTextStrokeWidth: ['2px', '3px'],
@@ -220,32 +225,41 @@ export default function Page() {
               best-in-class app.
             </Balancer>
           </Text>
-          <Link href="/fiscal-sponsorship/apply" passHref legacyBehavior>
+          <Flex sx={{ mt: [3, 4], gap: [3, 4], alignItems: 'center' }}>
+            <Link href="/fiscal-sponsorship/apply" passHref legacyBehavior>
+              <Button
+                as="a"
+                variant="lg"
+                sx={{
+                  bg: 'blue',
+                  backgroundImage: theme => theme.util.gx('cyan', 'blue'),
+                  lineHeight: 0.9
+                }}
+              >
+                Apply now
+              </Button>
+            </Link>
             <Button
               as="a"
-              variant="lg"
-              sx={{
-                mt: 3,
-                bg: 'white',
-                color: '#ec555c',
-                textTransform: 'none',
-                fontSize: [3, 4],
-                lineHeight: 0.9
-              }}
+              href="https://hcb.hackclub.com/users/auth"
+              variant="outline"
+              sx={{ color: 'white' }}
             >
-              Apply now
+              Sign in
             </Button>
-          </Link>
+          </Flex>
         </Container>
       </Box>
       <Box id="organizations" as="section" sx={{ py: 5 }}>
         <Container sx={{}}>
-          <Text variant="headline" sx={{ fontWeight: 400 }}>
-            <Balancer>
-              The home of hackathons, mutual aid groups, climate and social
-              justice organizations, and more.
-            </Balancer>
-          </Text>
+          {/* <Text as="p" variant="headline" sx={{ mt: 0 }}>
+            Powering nonprofits at every scale
+          </Text> */}
+          <Flex wrap sx={{ alignItems: 'end', gap: [4, 5], mb: 4 }}>
+            <Stat value="$20M+" label="processed transactions" reversed />
+            <Stat value="1500+" label="projects" reversed />
+            <Stat value="2018" label="serving nonprofits since" reversed />
+          </Flex>
           <Grid columns={[1, 2]} gap={[3, 4]} sx={{ mt: 4 }}>
             {organizations
               // .map(org => new Organization(org))
@@ -264,7 +278,7 @@ export default function Page() {
                       minHeight: 128,
                       color: 'white',
                       cursor: 'pointer',
-                      textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+                      textShadow: '0 1px 4px rgba(0, 0, 0, 0.5)',
                       textDecoration: 'none',
                       backgroundColor: 'black',
                       backgroundSize: 'cover',
@@ -281,7 +295,7 @@ export default function Page() {
                       rowGap: 2
                     }}
                     style={{
-                      backgroundImage: `linear-gradient(rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 75%), url('${organization.background_image}')`
+                      backgroundImage: `linear-gradient(rgba(0,0,0,0.375) 0%, rgba(0,0,0,0.5) 75%), url('${organization.background_image}')`
                     }}
                   >
                     <Image
@@ -297,8 +311,7 @@ export default function Page() {
                     />
                     <div>
                       <Heading
-                        as={'h3'}
-                        itemProp="name"
+                        as="h3"
                         sx={{
                           fontSize: [3, 4],
                           m: 0,
@@ -376,14 +389,14 @@ export default function Page() {
             >
               No legal fees.
               <br />
+              No startup fees.
+              <br />
               No transaction fees.
               <br />
               No card issuing fees.
               <br />
               No subscription fees.
               <br />
-              No minimum balance.
-              <br />
               No check deposit fees.
               <br />
               No credit card processing fees.
@@ -422,6 +435,7 @@ export default function Page() {
                     src={`/fiscal-sponsorship/${file}`}
                     width={128}
                     height={128}
+                    loading="lazy"
                     alt={file.split('.')[0].toUpperCase()}
                   />
                 ))}
@@ -552,9 +566,7 @@ export default function Page() {
             </Button>
           </Link>
           <Text as="p" variant="lead" sx={{ color: 'white' }}>
-            <Balancer>
-              1,500+ organizations on HCB have processed over $20,000,000.
-            </Balancer>
+            <Balancer>No startup fees, no minimum balance.</Balancer>
           </Text>
         </Flex>
       </Box>