[HCB] Add Robotics Flipper Zero Raffle (#1531)

components/announcement.js

@@ -16,6 +16,7 @@ const Announcement = ({
   imgSrc,
   imgAlt,
   color = 'accent',
+  textColor = 'secondary',
   sx = {},
   width,
   ...props
@@ -61,12 +62,12 @@ const Announcement = ({
       as="p"
       sx={{
         flex: '1 1 auto',
-        strong: { display: ['inline', 'block'], color: 'secondary' }
+        strong: { display: ['inline', 'block'], color: textColor }
       }}
     >
       <strong>{copy}</strong>
       {caption && (
-        <Text as="span" variant="caption" color="secondary">
+        <Text as="span" variant="caption" color={textColor}>
           {' '}
           {caption}
         </Text>

pages/fiscal-sponsorship/first.js

@@ -14,6 +14,7 @@ import theme from '@hackclub/theme'
 import { Balancer } from 'react-wrap-balancer'
 import { setCookie } from 'cookies-next'
 import { useEffect } from 'react'
+import Announcement from '../../components/announcement'
 
 export default function First({ stats }) {
   useEffect(() => {
@@ -73,6 +74,21 @@ export default function First({ stats }) {
               backdropFilter: 'blur(1.5px)'
             }}
           >
+            <a
+              href="https://hcb.hackclub.com/referrals/ArGHqN"
+              style={{ textDecoration: 'none' }}
+              target="_blank"
+            >
+              <Announcement
+                copy="Win a Flipper Zero!"
+                caption="We’re giving away a Flipper Zero to a lucky teenager! Join the Raffle by June 30th, 2025."
+                imgSrc="/fiscal-sponsorship/first/flipper-zero.png"
+                imgAlt="Flipper Zero"
+                color="primary"
+                textColor="slate"
+              />
+            </a>
+
             <Heading
               as="h1"
               variant="ultratitle"