Add ecosystem programs and events section

src/components/Navbar/types.ts

@@ -13,6 +13,7 @@ export interface SocialLink {
 }
 
 export enum ExternalLinkHref {
+  BOND_PROGRAM = "https://blog.threshold.network/unlocking-liquidity-threshold-launches-bond-program-with-bond-protocol/",
   BTC_ROLE_LEARN_MORE = "BTC_ROLE_LEARN_MORE",
   DAPP = "https://dashboard.threshold.network",
   DUNE_DASHBOARD_TBTC = "https://dune.com/threshold/tbtc",
@@ -21,11 +22,13 @@ export enum ExternalLinkHref {
   MINT_TBC = "MINT_TBC",
   STAKER_ROLE_LEARN_MORE = "STAKER_ROLE_LEARN_MORE",
   TELEGRAM = "TELEGRAM",
+  TBTC_WRAPPED_TOUR = "https://blog.threshold.network/stop-three-on-tbtcs-wrapped-tour-kicks-off-with-an-arbitrum-integration-and-a-new-galxe-oat/",
   THRESHOLD_BLOG = "https://blog.threshold.network/",
   THRESHOLD_DISCORD = "https://discord.gg/Threshold",
   THRESHOLD_GITHUB = "https://github.com/threshold-network",
   THRESHOLD_TOKEN = "https://curve.fi/teth",
   THRESHOLD_TWITTER = "https://twitter.com/TheTNetwork",
   THRESHOLD_YOUTUBE_SUBSCRIBE = "https://www.youtube.com/@Threshold.Network?sub_confirmation=1",
   TOKEN_HOLDER_ROLE_LEARN_MORE = "TOKEN_HOLDER_ROLE_LEARN_MORE",
+  WORMHOLE_HAKATON = "https://www.encode.club/wormhole-hackathon",
 }

src/content/pages/ecosystem/index.md

@@ -23,4 +23,22 @@ integrations:
     title: Arbitrum
   - image: /images/logo-polygon.svg
     title: Polygon
+programsAndEventsInfo:
+  preTitle: Get Involved
+  title: Community Programs & Events
+  description: "Stay well-informed about the most recent community programs and events."
+  rowReverse: false
+programsAndEvents:
+  - image: /images/wormhole-hackaton.png
+    title: Wormhole Encode Hackaton
+    description: 4 days packed with learning, networking and building with Wormhole at the Encode Club Hacker House.
+    url: https://www.encode.club/wormhole-hackathon
+  - image: /images/bond-program.png
+    title: T Bond Bootstrap Program
+    description: Threshold Bond Program is here to help the Threshold Treasury Guild continue to grow tBTC liquidity.
+    url: https://blog.threshold.network/unlocking-liquidity-threshold-launches-bond-program-with-bond-protocol/
+  - image: /images/tbtc-wrapper.png
+    title: tBTC Wrapped Tour
+    description: Mint tBTC during Tour Stop 3 to claim this exclusive tBTC Wrapped Tour Arbitrum OAT!
+    url: https://blog.threshold.network/stop-three-on-tbtcs-wrapped-tour-kicks-off-with-an-arbitrum-integration-and-a-new-galxe-oat/
 ---

src/templates/ecosystem-page/ProgramsAndEvents.tsx

@@ -0,0 +1,78 @@
+import { FC } from "react"
+import { SimpleGrid, Stack } from "@chakra-ui/react"
+import Card from "../../components/Card"
+import ExternalButtonLink from "../../components/Buttons/ExternalButtonLink"
+import { ExternalLinkHref } from "../../components/Navbar/types"
+import { Image, ImageProps } from "../../components"
+
+export interface ProgramsAndEventsCardProps {
+  image: ImageProps
+  title: string
+  description: string
+  url: string
+}
+
+const ProgramsAndEventsCard: FC<ProgramsAndEventsCardProps> = ({
+  image,
+  title,
+  description,
+  url,
+}) => {
+  return (
+    <Stack spacing={3}>
+      <Card
+        m="0"
+        p="0"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+        borderBottomRadius={0}
+        w="100%"
+        overflow="hidden"
+      >
+        <Image left={0} top={0} {...image} />
+      </Card>
+      <Card
+        m="auto"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+        borderTopRadius={0}
+        w="100%"
+      >
+        <Stack spacing={6}>
+          <Card.Title noOfLines={2}>{title}</Card.Title>
+          <Card.Body as="div" color="gray.400" noOfLines={3}>
+            {description}
+          </Card.Body>
+        </Stack>
+        <ExternalButtonLink
+          mt={6}
+          href={url as ExternalLinkHref}
+          variant="link"
+        >
+          See More
+        </ExternalButtonLink>
+      </Card>
+    </Stack>
+  )
+}
+
+export interface ProgramsAndEventsProps {
+  title: string
+  subTitle: string
+}
+
+const ProgramsAndEvents: FC<{ cards: ProgramsAndEventsCardProps[] }> = ({
+  cards,
+}) => {
+  return (
+    <SimpleGrid columns={{ base: 1, md: 3 }} spacing={5} mt={8}>
+      {cards.slice(0, 3).map((program: any, i) => (
+        <ProgramsAndEventsCard key={i} {...program} />
+      ))}
+    </SimpleGrid>
+  )
+}
+
+export default ProgramsAndEvents

src/templates/ecosystem-page/index.tsx

@@ -3,9 +3,15 @@ import { graphql } from "gatsby"
 import SectionTemplate from "../home-page/SectionTemplate"
 import { Box } from "@chakra-ui/react"
 import { IntegrationsCardGroup } from "../../components/IntegrationCard"
+import ProgramsAndEvents from "./ProgramsAndEvents"
 
 const EcosystemPageTemplate: FC = ({ data }: any) => {
-  const { ecosystemInfo, integrations } = data.markdownRemark.frontmatter
+  const {
+    ecosystemInfo,
+    integrations,
+    programsAndEventsInfo,
+    programsAndEvents,
+  } = data.markdownRemark.frontmatter
 
   return (
     <Box>
@@ -19,6 +25,9 @@ const EcosystemPageTemplate: FC = ({ data }: any) => {
         isImageBackground
       />
       <IntegrationsCardGroup cards={integrations} />
+      <SectionTemplate {...programsAndEventsInfo} bgColor="gray.900">
+        <ProgramsAndEvents cards={programsAndEvents} />
+      </SectionTemplate>
     </Box>
   )
 }
@@ -59,6 +68,27 @@ export const query = graphql`
           }
           title
         }
+        programsAndEventsInfo {
+          rowReverse
+          preTitle
+          title
+          description
+        }
+        programsAndEvents {
+          image {
+            id
+            relativePath
+            internal {
+              mediaType
+            }
+            childImageSharp {
+              gatsbyImageData(width: 200)
+            }
+          }
+          title
+          description
+          url
+        }
       }
     }
   }

static/admin/config.yml

@@ -2079,6 +2079,62 @@ collections:
                   },
                 ],
             }
+          - {
+              label: "Programs and Events Section",
+              name: "programsAndEventsInfo",
+              widget: "object",
+              collapsed: true,
+              fields:
+                [
+                  {
+                    label: "Row Reverse",
+                    name: "rowReverse",
+                    widget: boolean,
+                    required: false,
+                    default: false,
+                  },
+                  {
+                    label: "Pre Title",
+                    name: "preTitle",
+                    widget: "string",
+                    minimal: true,
+                  },
+                  {
+                    label: "Title",
+                    name: "title",
+                    widget: "string",
+                    minimal: true,
+                  },
+                  {
+                    label: "Description",
+                    name: "description",
+                    widget: "string",
+                    required: false,
+                  },
+                ],
+            }
+          - {
+              label: "Programs and Events Card",
+              name: "programsAndEvents",
+              widget: "list",
+              allow_add: true,
+              fields:
+                [
+                  {
+                    label: "Image",
+                    name: "image",
+                    widget: file,
+                    media_library: { config: { multiple: false } },
+                  },
+                  { label: "Title", name: "title", widget: "string" },
+                  {
+                    label: "Description",
+                    name: "description",
+                    widget: "string",
+                  },
+                  { label: "URL", name: "url", widget: "string" },
+                ],
+            }
       # Governance Page
       - file: "src/content/pages/governance/index.md"
         name: "governancePage"