Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refine Fiscal Sponsorship page #1090

Merged
merged 2 commits into from Mar 2, 2024
Merged

Refine Fiscal Sponsorship page #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3b356a
Refine Fiscal Sponsorship page
lachlanjc Mar 2, 2024
6c44cd7
Improve perf on landing page
lachlanjc Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
53 changes: 29 additions & 24 deletions components/fiscal-sponsorship/features.js
View file
Open in desktop
@@ -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
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -94,25 +95,29 @@ 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>
)
}

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>
)
}
29 changes: 11 additions & 18 deletions components/nav.js
View file
Open in desktop
Expand Up @@ -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 */
Expand All @@ -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 =>
Expand All @@ -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 },
Expand All @@ -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);
}
Expand All @@ -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)]};
}
Expand All @@ -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) {
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down
76 changes: 44 additions & 32 deletions pages/fiscal-sponsorship/index.js
View file
Open in desktop
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand All @@ -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
}
}}
Expand Down Expand Up @@ -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'],
Expand All @@ -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))
Expand All @@ -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',
Expand All @@ -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
Expand All @@ -297,8 +311,7 @@ export default function Page() {
/>
<div>
<Heading
as={'h3'}
itemProp="name"
as="h3"
sx={{
fontSize: [3, 4],
m: 0,
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -422,6 +435,7 @@ export default function Page() {
src={`/fiscal-sponsorship/${file}`}
width={128}
height={128}
loading="lazy"
alt={file.split('.')[0].toUpperCase()}
/>
))}
Expand Down Expand Up @@ -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>
Expand Down
Binary file modified public/fiscal-sponsorship/128.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 24 additions & 24 deletions public/fiscal-sponsorship/apply/party-orpheus.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/fiscal-sponsorship/fff-uganda.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/fiscal-sponsorship/first.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/fiscal-sponsorship/laptop.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/fiscal-sponsorship/og-image.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.