Skip to content

Commit 52c4001

Browse files
CopilotYodaLightsabr
Copilot
and
YodaLightsabr
committed
Create 9 new fiscal sponsorship feature pages
Co-authored-by: YodaLightsabr <76178582+YodaLightsabr@users.noreply.github.com>
1 parent fb35abe commit 52c4001

File tree

9 files changed

+2763
-0
lines changed

9 files changed

+2763
-0
lines changed

‎pages/fiscal-sponsorship/cards.js‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import Meta from '@hackclub/meta'
2+
import Head from 'next/head'
3+
import Link from 'next/link'
4+
import { Balancer } from 'react-wrap-balancer'
5+
import {
6+
Box,
7+
Button,
8+
Card,
9+
Container,
10+
Flex,
11+
Grid,
12+
Heading,
13+
Text
14+
} from 'theme-ui'
15+
import ForceTheme from '../../components/force-theme'
16+
import Nav from '../../components/nav'
17+
import Footer from '../../components/footer'
18+
import Icon from '../../components/icon'
19+
20+
export default function CardsPage() {
21+
return (
22+
<>
23+
<Meta
24+
as={Head}
25+
title="Issue Physical & Virtual Debit Cards – Fiscal Sponsorship"
26+
description="Instantly issue physical and virtual debit cards to your team with receipt tracking and Apple Pay integration."
27+
image="/fiscal-sponsorship/og-image.png"
28+
/>
29+
<ForceTheme theme="light" />
30+
<Nav />
31+
32+
<Box
33+
as="header"
34+
sx={{
35+
position: 'relative',
36+
pt: 6,
37+
pb: [5, 6],
38+
bg: 'red',
39+
backgroundImage: theme => theme.util.gx('red', 'orange'),
40+
color: 'white'
41+
}}
42+
>
43+
<Container>
44+
<Heading
45+
as="h1"
46+
variant="ultratitle"
47+
sx={{
48+
fontSize: [5, 6, 7],
49+
lineHeight: 1.1,
50+
mb: 3
51+
}}
52+
>
53+
Issue cards your <br/>team will love
54+
</Heading>
55+
<Text as="p" variant="lead" sx={{ maxWidth: '52ch', mb: 4 }}>
56+
Physical & virtual debit cards with receipt tracking, Apple Pay, and instant controls.
57+
Give your team the tools they need to spend responsibly.
58+
</Text>
59+
<Flex sx={{ gap: 3, flexWrap: 'wrap' }}>
60+
<Link href="/fiscal-sponsorship/apply" passHref legacyBehavior>
61+
<Button
62+
as="a"
63+
variant="lg"
64+
sx={{
65+
bg: 'white',
66+
color: 'red'
67+
}}
68+
>
69+
Get started
70+
</Button>
71+
</Link>
72+
</Flex>
73+
</Container>
74+
</Box>
75+
76+
<Box as="section" sx={{ py: [4, 5], bg: 'snow' }}>
77+
<Container>
78+
<Grid columns={[1, null, 2]} gap={4}>
79+
<Card
80+
sx={{
81+
bg: 'white',
82+
p: 4,
83+
borderRadius: 'extra',
84+
border: '1px solid',
85+
borderColor: 'smoke'
86+
}}
87+
>
88+
<Icon glyph="card" size={56} sx={{ color: 'red', mb: 3 }} />
89+
<Heading as="h3" variant="headline" sx={{ mb: 2 }}>
90+
Physical cards
91+
</Heading>
92+
<Text sx={{ color: 'slate', mb: 3 }}>
93+
Beautiful custom-designed cards shipped to your team. Use anywhere
94+
Visa is accepted, with the Hack Club flag proudly displayed.
95+
</Text>
96+
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
97+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
98+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
99+
<Text>Free shipping worldwide</Text>
100+
</Flex>
101+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
102+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
103+
<Text>Contactless payments</Text>
104+
</Flex>
105+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
106+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
107+
<Text>Works with Apple & Google Pay</Text>
108+
</Flex>
109+
</Flex>
110+
</Card>
111+
<Card
112+
sx={{
113+
bg: 'white',
114+
p: 4,
115+
borderRadius: 'extra',
116+
border: '1px solid',
117+
borderColor: 'smoke'
118+
}}
119+
>
120+
<Icon glyph="bolt-circle" size={56} sx={{ color: 'orange', mb: 3 }} />
121+
<Heading as="h3" variant="headline" sx={{ mb: 2 }}>
122+
Virtual cards
123+
</Heading>
124+
<Text sx={{ color: 'slate', mb: 3 }}>
125+
Create instant virtual cards for online purchases. Perfect for
126+
subscriptions, software, and one-time expenses.
127+
</Text>
128+
<Flex sx={{ flexDirection: 'column', gap: 2 }}>
129+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
130+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
131+
<Text>Instant generation</Text>
132+
</Flex>
133+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
134+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
135+
<Text>Set spending limits</Text>
136+
</Flex>
137+
<Flex sx={{ alignItems: 'center', gap: 2 }}>
138+
<Icon glyph="checkmark" size={24} sx={{ color: 'green' }} />
139+
<Text>Lock/unlock anytime</Text>
140+
</Flex>
141+
</Flex>
142+
</Card>
143+
</Grid>
144+
</Container>
145+
</Box>
146+
147+
<Box as="section" sx={{ py: [4, 5] }}>
148+
<Container>
149+
<Heading as="h2" variant="title" sx={{ mb: 4, textAlign: 'center' }}>
150+
Built-in controls & transparency
151+
</Heading>
152+
<Grid columns={[1, 2]} gap={4}>
153+
<Box>
154+
<Heading as="h3" variant="headline" sx={{ mb: 2, color: 'red' }}>
155+
<Icon glyph="photo" size={32} sx={{ mr: 2 }} />
156+
Receipt tracking
157+
</Heading>
158+
<Text sx={{ color: 'slate', fontSize: 2 }}>
159+
Every card transaction requires a receipt. Team members can snap a photo
160+
from our mobile app or upload from desktop. No more chasing receipts!
161+
</Text>
162+
</Box>
163+
<Box>
164+
<Heading as="h3" variant="headline" sx={{ mb: 2, color: 'orange' }}>
165+
<Icon glyph="analytics" size={32} sx={{ mr: 2 }} />
166+
Real-time monitoring
167+
</Heading>
168+
<Text sx={{ color: 'slate', fontSize: 2 }}>
169+
See every transaction as it happens. Get instant notifications and
170+
review spending patterns to keep your budget on track.
171+
</Text>
172+
</Box>
173+
<Box>
174+
<Heading as="h3" variant="headline" sx={{ mb: 2, color: 'blue' }}>
175+
<Icon glyph="lock" size={32} sx={{ mr: 2 }} />
176+
Spending limits
177+
</Heading>
178+
<Text sx={{ color: 'slate', fontSize: 2 }}>
179+
Set custom limits for each card. Control daily, weekly, or monthly
180+
spending to prevent overages and stay within budget.
181+
</Text>
182+
</Box>
183+
<Box>
184+
<Heading as="h3" variant="headline" sx={{ mb: 2, color: 'cyan' }}>
185+
<Icon glyph="admin" size={32} sx={{ mr: 2 }} />
186+
Team management
187+
</Heading>
188+
<Text sx={{ color: 'slate', fontSize: 2 }}>
189+
Assign cards to specific team members. Freeze, unfreeze, or cancel
190+
cards instantly if someone leaves or a card is lost.
191+
</Text>
192+
</Box>
193+
</Grid>
194+
</Container>
195+
</Box>
196+
197+
<Box
198+
as="section"
199+
sx={{
200+
py: [5, 6],
201+
bg: 'dark',
202+
color: 'white',
203+
backgroundImage: theme => theme.util.gx('dark', 'darker')
204+
}}
205+
>
206+
<Container sx={{ textAlign: 'center' }}>
207+
<Icon glyph="card" size={72} sx={{ mb: 3, color: 'red' }} />
208+
<Heading as="h2" variant="title" sx={{ mb: 3, color: 'white' }}>
209+
No hidden fees. Ever.
210+
</Heading>
211+
<Text variant="lead" sx={{ maxWidth: '52ch', mx: 'auto', mb: 4 }}>
212+
Unlike traditional banks, we don't charge card issuing fees, transaction fees,
213+
or monthly fees. Issue as many cards as you need, whenever you need them.
214+
</Text>
215+
<Link href="/fiscal-sponsorship/apply" passHref legacyBehavior>
216+
<Button
217+
as="a"
218+
variant="lg"
219+
sx={{
220+
bg: 'red',
221+
backgroundImage: theme => theme.util.gx('red', 'orange')
222+
}}
223+
>
224+
Apply now
225+
</Button>
226+
</Link>
227+
</Container>
228+
</Box>
229+
230+
<Footer />
231+
</>
232+
)
233+
}

0 commit comments

Comments
 (0)