Add open source text and link for HCB website (#1483)

* Add open source text and link for HCB website

* Update announcement.js

* Update index.js

* Refactor OpenSourceAlert component for improved layout and styling

* Refactor OpenSourceAlert component for responsive padding and layout adjustments

components/announcement.js

@@ -3,7 +3,7 @@ import Image from 'next/image'
 import { Box, Card, Text } from 'theme-ui'
 import Icon from './icon'
 
-const unfold = keyframes({
+export const unfold = keyframes({
   from: { transform: 'scaleY(0)' },
   to: { transform: 'scaleY(100%)' }
 })

components/fiscal-sponsorship/features.js

@@ -13,9 +13,9 @@ export default function Features() {
             Powerful financial tools built by our nonprofit, for yours.
           </Balancer>
         </Heading>
-        <Text as="p" variant="lead" sx={{ color: 'slate', maxWidth: '52ch' }}>
+        <Text as="p" variant="lead" sx={{ color: 'slate', maxWidth: '55ch' }}>
           Since day one, we’ve built beautiful, self-serve software to empower
-          you to raise and spend money without administrative hassle.
+          you to raise and spend money without administrative hassle. We’re also open&nbsp;source!
         </Text>
         <Grid columns={[null, 2, 3]} sx={{ mt: 4, rowGap: 3, columnGap: 4 }}>
           <Module
@@ -77,6 +77,11 @@ export default function Features() {
           href="https://hcb.hackclub.com/reboot"
           title="See Reboot’s finances in public"
         />
+        <Link href="https://github.com/hackclub/hcb" title="Open Source" sx={{ textAlign: 'center' }}>
+          <Text variant="caption" as="p" sx={{ color: 'primary', mt: 2 }}>
+            See our open source on GitHub
+          </Text>
+        </Link>
       </Container>
     </Box>
   )

pages/fiscal-sponsorship/index.js

@@ -23,6 +23,8 @@ import Features from '../../components/fiscal-sponsorship/features'
 import OuternetImgFile from '../../public/home/outernet-110.jpg'
 import SignIn from '../../components/fiscal-sponsorship/sign-in'
 import OrganizationSpotlight from '../../components/fiscal-sponsorship/organization-spotlight'
+import { unfold } from '../../components/announcement'
+import Icon from '@hackclub/icons'
 
 const organizations = [
   {
@@ -72,6 +74,55 @@ const organizations = [
   }
 ]
 
+
+function OpenSourceAlert() {
+  return (
+    <Container
+      sx={{
+        position: 'relative',
+      }}
+    >
+      <Box sx={{
+        py: ['25px', 3],
+        px: 4,
+        background: [
+          "rgba(200, 200, 200, 0.3)",
+          "linear-gradient(rgba(255,255,255,0.4), rgba(200,200,200,.3))"
+        ],
+        backdropFilter: "blur(20px)",
+        borderRadius: 20,
+        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        display: "flex",
+        alignItems: 'center',
+        gap: 10,
+        mt: [20, -50],
+        transform: "scaleY(0)",
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${unfold} 0.5s ease-out forwards`,
+          animationDelay: "0.5s"
+        },
+        flexDirection: ["column", "row"]
+      }}>
+        <span style={{ fontSize: 20 }}>
+          <strong style={{ fontSize: 23 }}>HCB is now open source! </strong><br />
+          Join us in building the infrastructure powering student-led organizations
+        </span>
+
+        <Box sx={{ gap: 2, display: "flex", width: ["100%", "auto"], alignItems: ["stretch", "center"], flexShrink: 0, ml: [undefined, "auto"], flexDirection: ["column-reverse", "row"] }}>
+          <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://github.com/hackclub/hcb" target="_blank">
+            Read our blog post
+            <Icon glyph="view-forward" />
+          </Button>
+        </Box>
+      </Box>
+    </Container >
+  )
+}
+
 export default function Page() {
   return (
     <>
@@ -88,7 +139,7 @@ export default function Page() {
         sx={{
           position: 'relative',
           pt: 6,
-          pb: [4, 5],
+          pb: [4, "90px"],
           bg: 'rgb(104, 41, 205)',
           backgroundImage:
             'radial-gradient(ellipse at 5% 5%, #ec555c 0%, rgba(236,85,92,0) 75%),radial-gradient(ellipse at 95% 5%, #dc71a1 0%, rgba(220,113,161,0) 75%),radial-gradient(ellipse at 95% 95%, #fcc8bf 0%, rgba(252,200,191,0) 75%),radial-gradient(ellipse at 5% 95%, #ffce33 0%, rgba(255,206,51,0) 75%)'
@@ -198,7 +249,8 @@ export default function Page() {
             <SignIn />
           </Flex>
         </Container>
-      </Box>
+      </Box >
+      <OpenSourceAlert />
       <Box id="organizations" as="section" sx={{ py: [4, 5] }}>
         <Container sx={{}}>
           {/* <Text as="p" variant="headline" sx={{ mt: 0 }}>
@@ -291,10 +343,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 }}
             >