mirror of
https://github.com/System-End/site.git
synced 2026-04-20 00:25:19 +00:00
Create Partner view for Bank page (#310)
* ☹️
* Make filtered view for Bank partners
* help_desk instead of help_center
* Remove donation page from parnter features
* Update Percentage Competent
To Work Better with 2 Digits
* Bring Updated Percentage To PartnerEverything
* Update PartnerEverything.js
* Update Everything to Work for Partners
* Update Everything.js
* Use combined Everything
* Adapt Features to Work for Partners
* Switch to use Features
* Delete PartnerEverything.js
* Delete PartnerFeatures.js
* Rename isGivebutter -> isPartner
Co-authored-by: Sam Poder <39828164+sampoder@users.noreply.github.com>
This commit is contained in:
Ella
GitHub
parent
fbed448db6
commit
8d105320fc
4 changed files with 88 additions and 56 deletions
|
|
@ -3,7 +3,7 @@ import Run from './Run'
|
|||
import { Fade } from 'react-reveal'
|
||||
import Icon from '../icon'
|
||||
|
||||
export default function Everything() {
|
||||
export default function Everything({ fee, partner = false }) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
|
|
@ -42,24 +42,19 @@ export default function Everything() {
|
|||
'Physical check sending & voiding': '',
|
||||
'Online direct deposit & ACH transfers': '',
|
||||
'Generate attendee legal waivers': '',
|
||||
'Instant Google Workspace & email addresses': '',
|
||||
'Virtual debit cards (with Apple & Google Pay)': '',
|
||||
'Debit card transaction paper trail': '',
|
||||
'Self-serve signup': '',
|
||||
'Transparency Mode (optional)': '',
|
||||
'Online, embeddable donation form': ''
|
||||
}).map(([item, date]) => (
|
||||
<ListItem
|
||||
key={item}
|
||||
icon={
|
||||
item.startsWith('Instant') || item.includes('signup')
|
||||
item.includes('signup')
|
||||
? 'bolt'
|
||||
: item.includes('card')
|
||||
? 'card'
|
||||
: item.includes('Transparency')
|
||||
? 'explore'
|
||||
: item.includes('form')
|
||||
? 'link'
|
||||
: item.includes('Physical')
|
||||
? 'email'
|
||||
: 'enter'
|
||||
|
|
@ -68,6 +63,23 @@ export default function Everything() {
|
|||
{item}
|
||||
</ListItem>
|
||||
))}
|
||||
{!partner ? Object.entries({
|
||||
'Instant Google Workspace & email addresses': '',
|
||||
'Online, embeddable donation form': ''
|
||||
}).map(([item, date]) => (
|
||||
<ListItem
|
||||
key={item}
|
||||
icon={
|
||||
item.startsWith('Instant')
|
||||
? 'bolt'
|
||||
: item.includes('form')
|
||||
? 'link'
|
||||
: 'enter'
|
||||
}
|
||||
>
|
||||
{item}
|
||||
</ListItem>
|
||||
)) : ""}
|
||||
</List>
|
||||
</Container>
|
||||
<Run />
|
||||
|
|
@ -82,7 +94,7 @@ export default function Everything() {
|
|||
}}
|
||||
>
|
||||
<Text sx={{ fontSize: 32, mr: 2 }}>You pay just</Text>
|
||||
<Percentage>7</Percentage>
|
||||
<Percentage fee={fee} />
|
||||
<Text sx={{ fontSize: 32, ml: 2 }}>
|
||||
of revenue. No upfront costs.
|
||||
</Text>
|
||||
|
|
@ -163,32 +175,32 @@ function ListItem({ icon = 'enter', start, ...props }) {
|
|||
)
|
||||
}
|
||||
|
||||
function Percentage({ children }) {
|
||||
function Percentage({ fee }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
bg: 'slate',
|
||||
color: 'green',
|
||||
width: [64, 128],
|
||||
height: [64, 128],
|
||||
width: [fee.length == 1 ? 70 : 80, fee.length == 1 ? 128 : 138],
|
||||
height: [fee.length == 1 ? 70 : 80, fee.length == 1 ? 128 : 138],
|
||||
borderRadius: 'circle',
|
||||
fontWeight: 'bold',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 8px 32px rgba(255, 255, 255, 0.125)',
|
||||
fontSize: [48, 96],
|
||||
fontSize: [48, 84],
|
||||
'&:after': {
|
||||
content: '"%"',
|
||||
mt: [3, 4],
|
||||
fontSize: [24, 40],
|
||||
fontWeight: 'normal',
|
||||
marginRight: -3,
|
||||
marginLeft: [null, 2],
|
||||
marginRight: fee.length == 1 ? -2 : 0,
|
||||
marginLeft: [null, fee.length == 1 ? 2 : 0],
|
||||
color: 'muted'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{fee}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'
|
||||
import Icon from '../icon'
|
||||
|
||||
export default function Features() {
|
||||
export default function Features({partner = false}) {
|
||||
return (
|
||||
<Box sx={{ py: 6 }}>
|
||||
<Container>
|
||||
|
|
@ -71,7 +71,7 @@ export default function Features() {
|
|||
<Module
|
||||
icon="payment"
|
||||
name="Built-in invoicing"
|
||||
body="Accept sponsor payments with fee-free invoicing, powered by Stripe."
|
||||
body="Accept sponsor payments with instant invoicing, powered by Stripe."
|
||||
/>
|
||||
<Module
|
||||
icon="docs"
|
||||
|
|
@ -83,11 +83,13 @@ export default function Features() {
|
|||
name="Transparency Mode"
|
||||
body="If you’d like, show your finances on public pages for full transparency."
|
||||
/>
|
||||
<Module
|
||||
icon="google"
|
||||
name="Google Workspace"
|
||||
body="Get instant, free accounts for your team (like joy@hackpenn.com)."
|
||||
/>
|
||||
{!partner &&
|
||||
<Module
|
||||
icon="google"
|
||||
name="Google Workspace"
|
||||
body="Get instant, free accounts for your team (like joy@hackpenn.com)."
|
||||
/>
|
||||
}
|
||||
<Module
|
||||
icon="email"
|
||||
name="Postal"
|
||||
|
|
@ -106,11 +108,13 @@ export default function Features() {
|
|||
</>
|
||||
}
|
||||
/>
|
||||
<Module
|
||||
icon="friend"
|
||||
name="Donation Page"
|
||||
body="Receive donations through a custom, online embeddable form."
|
||||
/>
|
||||
{!partner &&
|
||||
<Module
|
||||
icon="friend"
|
||||
name="Donation Page"
|
||||
body="Receive donations through a custom, online embeddable form."
|
||||
/>
|
||||
}
|
||||
<Module
|
||||
icon="flag"
|
||||
name="PVSA Awards"
|
||||
|
|
@ -129,21 +133,25 @@ export default function Features() {
|
|||
</>
|
||||
}
|
||||
/>
|
||||
<Module
|
||||
icon="web"
|
||||
name="Free Domains"
|
||||
body="We'll pay for your organization's domain name for 1 year."
|
||||
/>
|
||||
{!partner &&
|
||||
<Module
|
||||
icon="web"
|
||||
name="Free Domains"
|
||||
body="We'll pay for your organization's domain name for 1 year."
|
||||
/>
|
||||
}
|
||||
<Module
|
||||
icon="sticker"
|
||||
name="Sticker Mule"
|
||||
body="Get up to $400 in Sticker Mule credit for custom swag."
|
||||
/>
|
||||
<Module
|
||||
icon="slack"
|
||||
name="Founder's Community"
|
||||
body="A space on the Slack for nonprofit founders and event organizers."
|
||||
/>
|
||||
{!partner &&
|
||||
<Module
|
||||
icon="slack"
|
||||
name="Founder's Community"
|
||||
body="A space on the Slack for nonprofit founders and event organizers."
|
||||
/>
|
||||
}
|
||||
<Module
|
||||
icon="support"
|
||||
name="Support anytime"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Box, Button, Heading, Link, Text, Container, Badge } from 'theme-ui'
|
|||
import Fade from 'react-reveal/Fade'
|
||||
import ScrollHint from './ScrollHint'
|
||||
|
||||
export default function Landing() {
|
||||
export default function Landing({ showButton }) {
|
||||
return (
|
||||
<>
|
||||
<Slide>
|
||||
|
|
@ -87,14 +87,16 @@ export default function Landing() {
|
|||
marginBottom: 3
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlineLg"
|
||||
as="a"
|
||||
href="#apply"
|
||||
style={{ zIndex: '100' }}
|
||||
>
|
||||
Apply Now
|
||||
</Button>
|
||||
{showButton && (
|
||||
<Button
|
||||
variant="outlineLg"
|
||||
as="a"
|
||||
href="#apply"
|
||||
style={{ zIndex: '100' }}
|
||||
>
|
||||
Apply Now
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
<ScrollHint />
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import Testimonials from '../components/bank/Testimonials'
|
|||
import Everything from '../components/bank/Everything'
|
||||
import Start from '../components/bank/Start'
|
||||
import Nonprofits from '../components/bank/Nonprofits'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const styles = `
|
||||
::selection {
|
||||
|
|
@ -17,13 +18,14 @@ const styles = `
|
|||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
-webkit-text-fill-color: white;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-text-fill-color: white;
|
||||
}
|
||||
`
|
||||
|
||||
export default function Bank() {
|
||||
const { ref } = useRouter().query
|
||||
const isPartner = ref === 'gb_help_desk'
|
||||
return (
|
||||
<>
|
||||
<Box as="main" key="main">
|
||||
|
|
@ -35,14 +37,22 @@ export default function Bank() {
|
|||
description="Hack Club Bank provides a 501(c)(3) status-backed fund optimized for high school hackathons including invoicing, debit cards, check sending, pre-written legal forms, automated tax filing, and transparent finances. Get fiscal sponsorship designed to help you run a great organization."
|
||||
image="https://cloud-og86rfngo-hack-club-bot.vercel.app/0og_image-2.png"
|
||||
/>
|
||||
<style>{ styles }</style>
|
||||
<style>{styles}</style>
|
||||
<Box>
|
||||
<Landing />
|
||||
<Features />
|
||||
{isPartner ? <Landing /> : <Landing showButton />}
|
||||
{isPartner ? (
|
||||
<Features partner={true} />
|
||||
) : (
|
||||
<Features partner={false} />
|
||||
)}
|
||||
<Testimonials />
|
||||
<Nonprofits />
|
||||
<Everything />
|
||||
<Start />
|
||||
{isPartner ? (
|
||||
<Everything fee="10" partner={true} />
|
||||
) : (
|
||||
<Everything fee="7" partner={false} />
|
||||
)}
|
||||
{!isPartner && <Start />}
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer dark key="footer" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue