mirror of
https://github.com/System-End/site.git
synced 2026-04-19 23:22:49 +00:00
FS: Add contact banner
This commit is contained in:
Lachlan Campbell
parent
905b846661
commit
1c93022fd1
4 changed files with 71 additions and 42 deletions
36
components/fiscal-sponsorship/contact.js
Normal file
36
components/fiscal-sponsorship/contact.js
Normal file
|
|
@ -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 call <Link href={`tel:${phoneNumberUri}`}>{phoneNumber}</Link>
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 minimum balance.</Balancer>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<HcbFooter />
|
||||
<ContactBanner sx={{ justifyContent: 'center' }} />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue