From d306e2eb1e60415b85cb3ca3ef748a777f72531d Mon Sep 17 00:00:00 2001
From: Manitej Boorgu <68567672+techpixel@users.noreply.github.com>
Date: Mon, 20 Oct 2025 00:02:00 -0400
Subject: [PATCH] swap from buttons to cards (#1680)

* switch to cards instead of buttons on main page

* add key prop
---
 components/index/ctas.js | 138 +++++++++++++++++++++++++++++++++++++++
 lib/cta.json             |  44 +++++++++++++
 pages/index.js           |  65 +++++++++++++++---
 3 files changed, 239 insertions(+), 8 deletions(-)
 create mode 100644 components/index/ctas.js
 create mode 100644 lib/cta.json

diff --git a/components/index/ctas.js b/components/index/ctas.js
new file mode 100644
index 00000000..48193a64
--- /dev/null
+++ b/components/index/ctas.js
@@ -0,0 +1,138 @@
+import { Box, Link, Text, Image, Card, Button } from 'theme-ui'
+import Icon from '../icon'
+import CarouselCards from './carousel-cards'
+import { keyframes } from '@emotion/react'
+import React, { useEffect, useState } from 'react'
+import Ticker from 'react-ticker'
+import PageVisibility from 'react-page-visibility'
+import { Fade } from 'react-reveal'
+/** @jsxImportSource theme-ui */
+
+export default function CTAS({ cards }) {
+  const [pageIsVisible, setPageIsVisible] = useState(true)
+
+  const handleVisibilityChange = isVisible => {
+    setPageIsVisible(isVisible)
+  }
+
+  return (
+    <PageVisibility onChange={handleVisibilityChange}>
+      {pageIsVisible && (
+        <Box
+          as="div"
+          sx={{
+            //1 row flexbox of cards
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+
+            gap: [3, 4, 4],
+
+            justifyContent: ['center', 'center', 'flex-start'],
+
+            mt: 1,
+            py: [3, 3, 3]
+          }}>
+          {cards.slice(cards.length - 3).reverse().map((card, idx) => {
+            const {
+              background,
+              backgroundImage,
+              backgroundSize,
+
+              description,
+              descriptionColor,
+
+              title,
+              logo,
+
+              buttonText,
+              buttonColor,
+              link
+            } = card;
+
+            return (
+              <Box
+                key={idx}
+                sx={{
+                  position: 'relative',
+                  display: 'inline-block',
+                  width: ['100%', '100%', 'auto'],
+                  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.125)',
+                  transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+                  '&:hover': { transform: 'scale(1.0625)' },
+                  '.icon': {
+                    transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
+                  },
+                  ':hover,:focus': {
+                    '.icon': {
+                      transform: 'translateX(28px) translateY(-28px)',
+                      opacity: 0
+                    }
+                  }
+                }}
+              >
+                <Card
+                  // variant="interactive"
+                  sx={{
+                    background,
+                    backgroundImage,
+                    backgroundSize,
+                    position: 'relative',
+                    color: 'white',
+                    width: ['100%', '100%', '300px'],
+                    minWidth: ['100%', '100%', 'initial'],
+                    padding: ['12px !important', '16px !important', '20px !important'],
+                    paddingTop: [
+                      '14px !important',
+                      '20px !important',
+                      '24px !important'
+                    ],
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                    '&:hover': { cursor: 'pointer' },
+                    '&:hover svg': { opacity: 0.5 }
+                  }}
+                >
+                  <Image
+                    src={logo}
+                    alt={title}
+                    sx={{
+                      zIndex: 2,
+                      height: ['42px', '50px', '58px'],
+                    }}
+                  />
+                  <Text
+                    as="p"
+                    sx={{
+                      color: descriptionColor, 
+                      fontSize: [1, '16px', '20px'],
+                      my: 2
+                    }}
+                  >
+                    {description}
+                  </Text>
+                  <Button
+                    sx={{
+                      backgroundColor: buttonColor,
+                      color: 'white',
+                      mt: 'auto'
+                    }}
+                    as="a"
+                    href={link}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {buttonText}
+                  </Button>
+                </Card>
+              </Box>
+            )
+          })}
+          
+        </Box>
+      )}
+    </PageVisibility>
+  )
+}
diff --git a/lib/cta.json b/lib/cta.json
new file mode 100644
index 00000000..ae7b07a0
--- /dev/null
+++ b/lib/cta.json
@@ -0,0 +1,44 @@
+[
+    {
+        "title": "Blueprint",
+        "logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/c06427309a3db7299065c0a41f1e8cc70531f0a9_blueprint.png",
+
+        "background": "#0e305b",
+
+        "description": "Design a Hardware project and get up to $400 to make it real!",
+        "descriptionColor": "white",
+
+        "buttonText": "JOIN",   
+        "buttonColor": "rgb(50, 70, 110)",
+
+        "link": "https://hack.club/boba"
+    },
+    {
+        "title": "Moonshot",
+        "logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/bb539d76681c26f45247d69cdab86d9d863a1a95_image_105.png",
+
+        "background": "#4d5c85",
+
+        "description": "4-day hackathon in Orlando, Florida w/ a FREE visit to NASA and Universal Studios!",
+        "descriptionColor": "white",
+
+        "buttonText": "JOIN",   
+        "buttonColor": "rgb(50, 70, 110)",
+
+        "link": "https://hack.club/boba"
+    },
+    {
+        "title": "Midnight",
+        "logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/b2f4135894a031a645b0079c66c8a54069c472ed_image.png",
+
+        "background": "#453B61",
+
+        "description": "Spend 70 hours building projects, earn a trip to Vienna for a murder mystery hackathon.",
+        "descriptionColor": "white",
+
+        "buttonText": "RSVP",
+        "buttonColor": "#F24B4B",
+
+        "link": "https://midnight.hackclub.com"
+    }
+]
diff --git a/pages/index.js b/pages/index.js
index b21906fa..31d818d3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -47,6 +47,7 @@ import Milkyway from '../components/index/cards/milkyway'
 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 */
 
 function Page({
@@ -64,7 +65,8 @@ function Page({
   events,
   carouselCards,
   blueprintData,
-  context
+  context,
+  ctaCards
 }) {
   let [gameImage, setGameImage] = useState('')
   let [gameImage1, setGameImage1] = useState('')
@@ -315,12 +317,12 @@ function Page({
               <Box
                 sx={{
                   display: 'flex',
-                  flexWrap: 'wrap',
+                  flexWrap: 'nowrap',
                   flexDirection: 'row',
                   rowGap: 3
                 }}
               >
-                {ctaVariant === 'blueprint' ? (
+                {/* {ctaVariant === 'blueprint' ? (
                   <Button
                     variant="ctaLg"
                     as="a"
@@ -390,8 +392,7 @@ function Page({
                       }
                     `}</style>
                   </>
-                )}
-
+                )} */}
                 <Button
                   variant="ctaLg"
                   as="a"
@@ -402,7 +403,53 @@ function Page({
                 >
                   Join Slack
                 </Button>
+                <Text
+                  variant="eyebrow"
+                  as="h4"
+                  sx={{
+                    fontSize: ['16px', 2, 3],
+                    maxWidth: 'layout',
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
+                    alignSelf: 'center',
+                    color: 'white',
+                    textShadow: 'rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 0.5) 0 0 10px'
+                  }}
+                >
+                  Or, check out our programs:
+                </Text>
               </Box>
+              <CTAS cards={ctaCards} />
+              <Button
+                sx={{
+                  background: 'rgb(255, 255, 255, 0.3)',
+                  color: 'white',
+
+                  borderRadius: '100px',
+                  border: 'none',
+                  display: 'flex',
+                  alignItems: 'center',
+                  px: '3',
+                  py: 2,
+                  width: 'fit-content',
+                  textTransform: 'none',
+                  fontWeight: '400',
+                  fontSize: [1, '16px', '18px'],
+                  backdropFilter: 'blur(2px)',
+                  fontWeight: 'normal',
+                  zIndex: 999,
+                }}
+                as="a"
+                href="#spotlight"
+              >
+                <Icon
+                  glyph={'rep'}
+                  sx={{ color: 'inherit', marginRight: 2 }}
+                  size={24}
+                  mr={2}
+                />
+                Check out more programs
+              </Button>
             </Heading>
           </Box>
           <Box
@@ -1334,6 +1381,7 @@ const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
 export async function getStaticProps() {
   const carouselCards = require('../lib/carousel.json')
+  const ctaCards = require('../lib/cta.json')
 
   // HCB: get total raised
   let bankData = []
@@ -1360,9 +1408,9 @@ export async function getStaticProps() {
   // preventing the site from deploying
 
   const { fetchGitHub } = require('./api/github')
-  let gitHubData = await fetchGitHub()
+  // let gitHubData = await fetchGitHub()
 
-  //   let gitHubData = null
+    let gitHubData = null
 
   // GitHub: get latest GitHub stars
   const { fetchStars } = require('./api/stars')
@@ -1421,7 +1469,8 @@ export async function getStaticProps() {
       stars,
       events,
       carouselCards,
-      blueprintData
+      blueprintData,
+      ctaCards
     },
     revalidate: 60
   }