add campfire flagship (#1775)

components/index/cards/campfire-flagship.js

@@ -0,0 +1,87 @@
+import CardModel from './card-model'
+import { Box, Text, Image } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function CampfireFlagship() {
+  return (
+    <Box sx={{ position: 'relative', my: [4, 4] }}>
+
+      <CardModel
+        color="white"
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '358.2px',
+          overflow: 'hidden',
+          textAlign: 'center',
+          backgroundImage: [
+            "url(https://hc-cdn.hel1.your-objectstorage.com/s/v3/145056833a228762_bg-tall.png)",
+            "url(https://hc-cdn.hel1.your-objectstorage.com/s/v3/145056833a228762_bg-tall.png)",
+            "url(https://hc-cdn.hel1.your-objectstorage.com/s/v3/e909b5fc4f714382_bg-wide.png)"
+          ],
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          borderRadius: 'extra'
+        }}
+        position={[null, 'bottom', 'bottom']}
+      >
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            zIndex: 1,
+            position: 'absolute',
+            left: ['6%', '6%', '4%'],
+            bottom: '1%',
+            width: '100%',
+            height: '100%',
+          }}
+        >
+
+          <Box sx={{ mt: 240, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', width: ['92%', '92%', '94%'] }}>
+
+            <Text
+              as="p"
+              sx={{
+                fontSize: ['20px', '22px', '24px'],
+                fontWeight: '600',
+                color: 'white',
+                textAlign: 'left',
+                textShadow: '0 0 5px rgba(0,0,0,0.8)',
+                mb: 0
+              }}
+            >
+              Make games, earn a <br /> ticket to a game jam with <br /> your favorite YouTubers!
+            </Text>
+
+            <Buttons
+              id="campfire-flagship-join"
+              icon="enter"
+              link="https://flagship.campfire.hackclub.com"
+              target="_blank"
+              rel="noopener"
+              sx={{
+                background: 'rgba(255,255,255,0.06)',
+                color: 'white',
+                border: '1px solid rgba(255,255,255,0.9)',
+                borderRadius: '100px',
+                px: 3,
+                py: '10px',
+                fontFamily: 'system-ui, sans-serif',
+                fontWeight: '600',
+              }}
+            >
+              Get Started
+            </Buttons>
+          </Box>
+        </Box>
+
+      </CardModel>
+    </Box>
+  )
+}

lib/cta.json

@@ -21,6 +21,16 @@
         "buttonText": "JOIN NOW",
         "buttonColor": "rgb(50, 70, 110)",
         "link": "https://blueprint.hackclub.com/?utm_source=cta"
+    },
+    {
+        "title": "Campfire Flagship",
+        "logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/542f4bf6aa9cd5cc_logo-w-info-v2.png",
+        "background": "#000015",
+        "stickerImage": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/a02495e0d090461b_smore-smaller.png",
+        "description": "Code with your favorite YouTubers at a Game Jam this February!",
+        "descriptionColor": "white",
+        "buttonText": "JOIN NOW",
+        "buttonColor": "#2b2b59",
+        "link": "https://flagship.campfire.hackclub.com"
     }
-   
 ]

pages/index.js

@@ -40,12 +40,10 @@ import Comma from '../components/comma'
 import Haxidraw from '../components/index/cards/haxidraw'
 import Onboard from '../components/index/cards/onboard'
 import Blueprint from '../components/index/cards/blueprint'
-import Moonshot from '../components/index/cards/moonshot'
+import CampfireFlagship from '../components/index/cards/campfire-flagship'
 import Milkyway from '../components/index/cards/milkyway'
 import Flavortown from '../components/index/cards/flavortown'
 import Aces from '../components/index/cards/aces'
-import Highway from '../components/index/cards/highway'
-import Shipwrecked from '../components/index/cards/shipwrecked'
 import CTAS from '../components/index/ctas'
 /** @jsxImportSource theme-ui */
 
@@ -58,6 +56,14 @@ const ANNOUNCEMENTS = [
     href: 'https://blueprint.hackclub.com/?utm_source=site-announcement',
     imgSrc: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/db8d0fd43bb664a8b07431b0262a7ca13c1602c7_blueprint_logo__img_.png'
   },
+  {
+    id: 'campfire-flagship',
+    expiresAt: new Date('2026-02-20'),
+    copy: 'Code with your favorite YouTubers at a Game Jam!',
+    caption: 'Spend up to 60 hours building games, earn a ticket to attend. Join us in LA this February!',
+    href: 'https://flagship.campfire.hackclub.com',
+    imgSrc: 'https://hc-cdn.hel1.your-objectstorage.com/s/v3/533c527e1ab6a77f_smore.png'
+  },
   {
     id: 'flavortown',
     expiresAt: new Date('2026-12-31'),
@@ -852,6 +858,7 @@ function Page({
               blueprintData={blueprintData}
               stars={stars.onboard.stargazerCount}
             />
+            <CampfireFlagship />
             <Milkyway />
             <Aces />