[HCB] Get ready for mobile app launch! (#1720)

Co-authored-by: Luke Oldenburg <87272260+Luke-Oldenburg@users.noreply.github.com>
Co-authored-by: Mohamad Mortada <mmortada685@gmail.com>
Co-authored-by: Gary Tou <gary@garytou.com>
Co-authored-by: polypixeldev <me@sfernandez.dev>

components/announcements/hcb-mobile.mdx

@@ -0,0 +1,40 @@
+I’m Mohamad, a 17-year-old from the SF Bay Area, and I just shipped the official mobile app for HCB.
+
+If you haven't heard of it, HCB is the financial backbone for over **6,500 teenager-led nonprofits**, clubs, and hackathons. We provide **501(c)(3) nonprofit** status, access to a bank account, a donation collection platform, and debit cards for thousands of young people trying to do good in their communities.
+
+HCB is currently processing an average of **$6 million per month** (over $80M in its lifetime).[^1] For the last year, I’ve led the project to build the first-ever mobile app for this entire community.
+
+*The entire project is open source on [GitHub](https://github.com/hackclub/hcb-mobile) (we'd love a ⭐️!).*
+
+## Why build this?
+
+These teenagers are running run robotics teams, hackathons, and nonprofit projects that improve their community. They need a way to manage their organization's finances from their pocket.
+With HCB Mobile, they'll be able to:
+
+- Track their **organization's balance** and transactions on the go.
+- Accept in-person **tap-to-pay donations**, perfect for an in-person fundraiser or event! No extra hardware required. Just tap any credit/debit card against your phone.
+- **Issue new debit cards**, add them to **Apple / Google Wallet**, and freeze or cancel them directly from their phone.
+- **Upload receipts** directly from their device or match existing receipts in Receipt Bin to transactions with a tap.
+
+## The Technical Stuff
+
+When I started working on this app, I wanted to build in native code like **SwiftUI** for iOS and **Kotlin/Jetpack Compose** for Android. However, I realized that it would be a pain for me, a **full-time student** with classes, to handle two codebases. I'd have to duplicate every feature I created for one OS to the other and deal with all the integration issues along the way. Then, I discovered **Expo** (a React Native framework) which allowed me to write one app that worked on multiple devices. Working with Expo, I learned about creating my own Expo Modules (to bridge native code features to Typescript) and optimization methods like memoization and component recycling.
+
+The non-code side of this app was *no joke*, either. I had to work with the Apple and Google app review teams to obtain **restricted entitlements** for features like mobile **tap-to-pay terminal provisioning** (made possible by Stripe) and **push provisioning** (which allows users to add cards to their payment wallet directly from HCB Mobile). It took several months and many back-and-forth email chains to finally get the entitlements we needed.
+
+After over 250 hours of development work, I can say that I'm incredibly proud of HCB Mobile because it's **built by teenagers** to make it easier for teenagers like me to run nonprofit organizations and projects with HCB. Beyond teenagers, HCB also supports hundreds of adult-ran organizations such as mutual aid groups, open source projects, and community spaces.
+
+<br />
+
+## Download the app!
+
+<br />
+<a href="https://apps.apple.com/us/app/hcb-by-hack-club/id6465424810">
+  <img src="/fiscal-sponsorship/apple-web-badge.svg" alt="Download on the App Store" height="40" />
+</a>
+&nbsp;&nbsp;&nbsp;
+<a href="https://play.google.com/store/apps/details?id=com.hackclub.hcb">
+  <img src="/fiscal-sponsorship/google-play-web-badge.png" alt="Get it on Google Play" height="40" />
+</a>
+
+[^1] *This amount is excluding HQ (our own) [finances](https://hcb.hackclub.com/hq).*

components/announcements/hcb_cta.js

@@ -0,0 +1,44 @@
+import { Box, Button, Grid, Heading, Text } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import NextLink from 'next/link'
+
+export default function HCBCTA() {
+  return (
+    <Box
+      as="section"
+      sx={{
+        bg: 'orange',
+        backgroundImage: t => t.util.gx('yellow', 'orange'),
+        color: 'white',
+        py: [4, 5]
+      }}
+    >
+      <Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
+        <Icon glyph="bank-account" size={72} />
+        <Box>
+          <Heading as="h2" variant="headline" mt={0}>
+            Looking to start a nonprofit?
+          </Heading>
+          <Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
+            We're accepting applications! No startup fees, no minimum balance, and no long wait time.
+          </Text>
+          <br />
+          <br />
+          <NextLink href="/fiscal-sponsorship" passHref>
+            <Button bg="cyan" as="a">
+              Learn more
+            </Button>
+          </NextLink>
+
+          &nbsp;&nbsp;&nbsp;
+
+          <NextLink href="https://nonprofit.new" passHref>
+            <Button bg="orange" as="a">
+              Apply now
+            </Button>
+          </NextLink>
+        </Box>
+      </Grid>
+    </Box>
+  )
+}

components/announcements/holder.js

@@ -13,6 +13,11 @@ export default function AnnouncementHolder({ children }) {
           color: 'cyan',
           my: 4,
           a: { color: 'inherit' }
+        },
+        'a[href^="#fn-"], a[href^="#fnref-"]': {
+          textDecoration: 'none',
+          color: 'inherit',
+          pointerEvents: 'none',
         }
       }}
     >

components/fiscal-sponsorship/features.js

@@ -6,7 +6,7 @@ import imgLaptop from '../../public/fiscal-sponsorship/laptop.png'
 
 export default function Features() {
   return (
-    <Box sx={{ pt: 5, pb: [5, 6], bg: 'snow' }}>
+    <Box sx={{ pt: 5, pb: [5, 6] }}>
       <Container>
         <Heading as="h2" variant="title" sx={{ mb: 3, maxWidth: 'copyUltra' }}>
           <Balancer>

components/fiscal-sponsorship/open-source.js

@@ -0,0 +1,52 @@
+import { Box, Heading, Button, Text, Container, Grid, Flex } from 'theme-ui'
+import Icon from '../icon'
+import Photo from '../photo'
+import HCBGource from '../../public/fiscal-sponsorship/hcb-gource.gif'
+
+export default function OpenSource() {
+  return (
+    <Box as="section" sx={{ py: [4, 5], bg: "snow" }}>
+        <Container>
+          <Grid columns={[1, 2]} gap={[4, 5]} sx={{ alignItems: 'center' }}>
+            <div>
+              <Heading as="h2" variant="headline" sx={{ mb: 3 }}>
+                Open source infrastructure for fiscally sponsored organizations.
+              </Heading>
+              <Text as="p" sx={{ mb: 3 }}>
+                HCB is open source and built in public, like many other Hack
+                Club projects. Join us in building the infrastructure powering
+                fiscally sponsored organizations around the world.
+              </Text>
+              <Flex
+                sx={{
+                  flexWrap: 'wrap',
+                  gap: 3
+                }}
+              >
+                <Button
+                  as="a"
+                  sx={{ flexShrink: 0, gap: 14, paddingLeft: 25 }}
+                  variant="outline"
+                  target="_blank"
+                  href="https://github.com/hackclub/hcb"
+                >
+                  Star on GitHub
+                  <Icon glyph="github" />
+                </Button>
+                <Button
+                  as="a"
+                  sx={{ flexShrink: 0, gap: 1, paddingLeft: 25, paddingRight: '5px' }}
+                  href="https://hackclub.com/hcb/open-source"
+                  target="_blank"
+                >
+                  Read our blog post
+                  <Icon glyph="view-forward" />
+                </Button>
+              </Flex>
+            </div>
+            <Photo src={HCBGource} width={888} height={500} sx={{ maxWidth: '100%', width: 'auto !important', height: '500 !important', boxShadow: 'elevated' }} alt="Since open-sourcing, we've merged over 1,800 pull requests from contributors!" showAlt />
+          </Grid>
+        </Container>
+      </Box>
+  )
+}

pages/fiscal-sponsorship/index.js

@@ -26,8 +26,11 @@ import OrganizationSpotlight from '../../components/fiscal-sponsorship/organizat
 import { setCookie, getCookie } from 'cookies-next'
 import { useEffect, useState } from 'react'
 import { unfold } from '../../components/announcement'
-import Icon from '@hackclub/icons'
 import Announcement from '../../components/announcement'
+import OpenSource from '../../components/fiscal-sponsorship/open-source'
+import 'react-responsive-carousel/lib/styles/carousel.min.css'
+import Sparkles from '../../components/sparkles'
+import Icon from '../../components/icon'
 
 const organizations = [
   {
@@ -69,11 +72,13 @@ const organizations = [
   }
 ]
 
-function OpenSourceAlert() {
+function MobileAppAlert() {
   return (
     <Container sx={{ position: 'relative' }}>
       <Box
         sx={{
+          position: 'relative',
+          overflow: 'hidden',
           py: ['25px', 3],
           px: 4,
           background: [
@@ -96,11 +101,29 @@ function OpenSourceAlert() {
           flexDirection: ['column', 'row']
         }}
       >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 15,
+            right: -30,
+            bg: 'red',
+            color: 'white',
+            transform: 'rotate(45deg)',
+            width: 120,
+            textAlign: 'center',
+            py: 1,
+            fontSize: 1,
+            zIndex: 40,
+            fontWeight: 'bold',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+          }}
+        >
+          New!
+        </Box>
         <span style={{ fontSize: 20 }}>
-          <strong style={{ fontSize: 23 }}>HCB is open source! </strong>
+          <strong style={{ fontSize: 23 }}>HCB Mobile is here!</strong>
           <br />
-          Join us in building the infrastructure powering student-led
-          organizations
+          Manage your HCB organizations on the go. Issue cards, view transactions, and more!
         </span>
 
         <Box
@@ -111,28 +134,35 @@ function OpenSourceAlert() {
             alignItems: ['stretch', 'center'],
             flexShrink: 0,
             ml: [undefined, 'auto'],
-            flexDirection: ['column-reverse', 'row']
+            flexDirection: ['column', 'row'],
+            flexWrap: 'wrap',
+            alignItems: 'center',
           }}
         >
-          <Button
-            as="a"
-            sx={{ flexShrink: 0, gap: 14, paddingLeft: 25 }}
-            variant="outline"
+          <a
+            href="https://apps.apple.com/us/app/hcb-by-hack-club/id6465424810"
             target="_blank"
-            href="https://github.com/hackclub/hcb"
+            rel="noreferrer"
+            style={{ padding: 0, margin: 0, height: 40 }}
           >
-            Star on GitHub
-            <Icon glyph="github" />
-          </Button>
-          <Button
-            as="a"
-            sx={{ flexShrink: 0, gap: 1, paddingLeft: 25, paddingRight: '5px' }}
-            href="https://hackclub.com/hcb/open-source"
+            <img
+              src="apple-web-badge.svg"
+              alt="Download on the App Store"
+              style={{ height: 40 }}
+            />
+          </a>
+          <a
+            href="https://play.google.com/store/apps/details?id=com.hackclub.hcb"
             target="_blank"
+            rel="noreferrer"
+            style={{ padding: 0, margin: 0, height: 40 }}
           >
-            Read our blog post
-            <Icon glyph="view-forward" />
-          </Button>
+            <img
+              src="google-play-web-badge.png"
+              alt="Get it on Google Play"
+              style={{ height: 40 }}
+            />
+          </a>
         </Box>
       </Box>
     </Container>
@@ -331,14 +361,75 @@ export default function Page() {
           </Flex>
         </Container>
       </Box>
-      <OpenSourceAlert />
-      <Box id="organizations" as="section" sx={{ py: [4, 5] }}>
+      <MobileAppAlert />
+      <Box as="section" sx={{ py: [4, 5], alignItems: 'center' }}>
+        <Container sx={{ alignItems: 'center' }}>
+          <Grid gap={[4, 5]} columns={[null, null, 2]} sx={{ alignItems: 'center'}}>
+            <Box>
+              <Heading as="h2" variant="title" sx={{ mb: 3, maxWidth: 'copyUltra' }}>
+                HCB in your <Sparkles sx={{ color: 'red'}}>pocket</Sparkles>
+              </Heading>
+              <Text as="p" variant="lead" sx={{ mb: 3 }}>
+                The official mobile app lets you manage your
+                organization&apos;s finances, issue cards, and more!
+              </Text>
+              <Grid columns={[1, 2]} gap={3}>
+                <Card variant="sunken" sx={{ p: '1.5rem !important', bg: 'snow', borderRadius: 'default' }}>
+                  <Text as="strong" color="slate" sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1, justifyContent: 'space-between' }}>
+                    <span style={{ maxWidth: 'calc(100% - 36px)' }}>See your organization's spending</span><Icon glyph="view" size={36} sx={{ color: 'red', flexShrink: 0 }} />
+                  </Text>
+                  <Text>
+                    Stay up to date on your organization's balance and transactions.
+                  </Text>
+                </Card>
+                <Card variant="sunken" sx={{ p: '1.5rem !important', bg: 'snow', borderRadius: 'default' }}>
+                  <Text as="strong" color="slate" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mb: 1 }}>
+                    <span style={{ maxWidth: 'calc(100% - 32px)' }}>Accept Tap to Pay donations</span><Icon glyph="bolt-circle" size={32} sx={{ color: 'red', flexShrink: 0 }} />
+                  </Text>
+                  <Text>
+                    No extra hardware required! Tap any card against your phone. Great for in-person fundraisers.
+                  </Text>
+                </Card>
+                <Card variant="sunken" sx={{ p: '1.5rem !important', bg: 'snow', borderRadius: 'default' }}>
+                  <Text as="strong" color="slate" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mb: 1 }}>
+                    <span style={{ maxWidth: 'calc(100% - 32px)' }}>Issue, manage, and<br />add cards</span><Icon glyph="card" size={32} sx={{ color: 'red', flexShrink: 0 }} />
+                  </Text>
+                  <Text>
+                    You can directly add cards to Apple&nbsp;Wallet and Google&nbsp;Wallet. No more forgetting your card!
+                  </Text>
+                </Card>
+                <Card variant="sunken" sx={{ p: '1.5rem !important', bg: 'snow', borderRadius: 'default' }}>
+                  <Text as="strong" color="slate" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mb: 1 }}>
+                    <span style={{ maxWidth: 'calc(100% - 32px)' }}>Upload receipts the easy way</span><Icon glyph="docs" size={32} sx={{ color: 'red', flexShrink: 0 }} />
+                  </Text>
+                  <Text>Quickly snap a photo or upload a file!</Text>
+                </Card>
+              </Grid>
+              <Button
+                  as="a"
+                  sx={{ flexShrink: 0, gap: 1, paddingLeft: 25, paddingRight: '5px', marginTop: '20px' }}
+                  href="/hcb/mobile"
+                  target="_blank"
+                >
+                  Read our story
+                  <Icon glyph="view-forward" />
+              </Button>
+            </Box>
+            <Card sx={{ backgroundImage: 'linear-gradient(to right, #fcc8bf, #ffce33)', px: [5, 5], py: '0 !important', height: 'fit-content', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
+              <Box as="img" src="mobile-mockup.png" sx={{ display: 'block', width: '100%', height: 'auto' }} />
+            </Card>
+          </Grid>
+        </Container>
+      </Box>
+      <Box id="organizations" as="section" sx={{ py: [4, 5], bg: 'snow' }}>
         <Container sx={{}}>
-          {/* <Text as="p" variant="headline" sx={{ mt: 0 }}>
-            Powering nonprofits at every scale
-          </Text> */}
+          <Heading as="h2" variant="title" sx={{ mt: 0, mb: 3, maxWidth: 'copyUltra' }}>
+            <Balancer>
+              Powering nonprofits at every scale
+            </Balancer>
+          </Heading>
           <Flex sx={{ flexWrap: 'wrap', rowGap: 3, columnGap: [4, 5], mb: 4 }}>
-            <Stat value="$67M+" label="processed transactions" reversed />
+            <Stat value="$80M+" label="processed transactions" reversed />
             <Stat value="6500+" label="projects" reversed />
             <Stat value="2018" label="serving nonprofits since" reversed />
           </Flex>
@@ -377,8 +468,7 @@ export default function Page() {
         </Container>
       </Box>
       <Features />
-
-      <Box id="fees" as="section" sx={{ position: 'relative', py: 5 }}>
+      <Box id="fees" as="section" sx={{ position: 'relative', py: 5, bg: 'snow' }}>
         <Container>
           <Grid columns={[null, null, 2]} gap={[4, 5]}>
             <div>
@@ -565,7 +655,7 @@ export default function Page() {
                 <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z" />
               </svg>
               <span>
-                As part of our commitment to the environment, funding for HCB’s
+                As part of our commitment to the environment, funding for HCB&apos;s
                 operations&nbsp;and staff will never come from the{' '}
                 <UILink
                   href="https://www.ffisolutions.com/the-carbon-underground-200-500/"
@@ -579,7 +669,7 @@ export default function Page() {
           </div>
         </Grid>
       </Container>
-
+      <OpenSource />
       <Box
         as="section"
         id="apply"

pages/fiscal-sponsorship/mobile/index.js

@@ -0,0 +1,102 @@
+import { Box, Container, Heading } from 'theme-ui'
+import {
+  PillHolder,
+  AuthorPill,
+  DatePill
+} from '../../../components/announcements/pills'
+import Head from 'next/head'
+import NextLink from 'next/link'
+import styled from '@emotion/styled'
+import theme from '../../../lib/theme'
+import Meta from '@hackclub/meta'
+import Nav from '../../../components/nav'
+import ForceTheme from '../../../components/force-theme'
+import Footer from '../../../components/footer'
+import Copy from '../../../components/announcements/hcb-mobile.mdx'
+import HCBCTA from '../../../components/announcements/hcb_cta'
+import AnnouncementHolder from '../../../components/announcements/holder'
+import Balancer from 'react-wrap-balancer'
+
+const StyledLink = styled.a`
+  text-decoration: underline;
+  color: ${theme.colors.white};
+`
+
+const Link = props => {
+  const { href } = props
+  return (
+    <NextLink href={href} passHref>
+      <StyledLink>{props.children}</StyledLink>
+    </NextLink>
+  )
+}
+
+const MobilePage = () => (
+  <>
+    <Meta
+      as={Head}
+      title="HCB Mobile is here!"
+      description="Manage your HCB organizations on the go. Issue cards, view transactions, and more!"
+      image="https://hc-cdn.hel1.your-objectstorage.com/s/v3/9fc32ee8cbc1a6a1ce93609b9822d6bae394dc7a_opengraph.png"
+    />
+    <ForceTheme theme="light" />
+    <Nav />
+    <Box
+      as="section"
+      sx={{
+        pt: [5, 6],
+        pb: [4, 5],
+        bg: 'rgb(104, 41, 205)',
+        backgroundImage: theme => theme.util.gx('purple', 'orange')
+      }}
+    >
+      <Container sx={{ textAlign: 'center', color: 'white' }}>
+        <Heading
+          as="h1"
+          variant="title"
+          sx={{
+            fontSize: [5, 6, null, 7],
+            span: {
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }
+          }}
+        >
+          <Link href="/fiscal-sponsorship">HCB Mobile</Link> is here!
+        </Heading>
+        <Balancer>
+          <Heading
+            as="h2"
+            variant="title"
+            sx={{
+              fontSize: [3, 4, 4, 4],
+              fontWeight: 400,
+              marginTop: '24px',
+              maxWidth: '900px',
+              mx: 'auto'
+            }}
+          >
+            Manage your HCB organizations on the go. Issue cards, view
+            transactions, and more!
+          </Heading>
+        </Balancer>
+      </Container>
+    </Box>
+    <AnnouncementHolder>
+      <PillHolder>
+        <AuthorPill
+          firstName="Mohamad"
+          tag="Mohamad Mortada"
+          image="https://github.com/thedev132.png"
+        />
+        <DatePill tag="Dec 2, 2025" />
+      </PillHolder>
+      <Copy />
+    </AnnouncementHolder>
+    <HCBCTA />
+    <Footer />
+  </>
+)
+
+export default MobilePage

public/fiscal-sponsorship/apple-web-badge.svg

@@ -0,0 +1,46 @@
+<svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
+  <title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
+  <g>
+    <g>
+      <g>
+        <path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
+        <path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
+      </g>
+      <g id="_Group_" data-name="&lt;Group&gt;">
+        <g id="_Group_2" data-name="&lt;Group&gt;">
+          <g id="_Group_3" data-name="&lt;Group&gt;">
+            <path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
+            <path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
+          </g>
+        </g>
+        <g>
+          <path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
+          <path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
+          <path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
+          <path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
+          <path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
+          <path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
+          <path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
+          <path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
+        </g>
+      </g>
+    </g>
+    <g id="_Group_4" data-name="&lt;Group&gt;">
+      <g>
+        <path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
+        <path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
+        <path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
+        <path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
+        <path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
+        <path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
+        <path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
+        <path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
+        <path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
+        <path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
+        <path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
+      </g>
+    </g>
+  </g>
+</svg>