Add ecosystem resources section

src/components/PageSection.tsx

@@ -66,6 +66,7 @@ export const SectionImage: FC<SectionImageProps> = ({
       justifyContent="center"
       maxW="415px"
       maxH="300px"
+      overflowX="hidden"
       mx={mdSize ? "auto !important" : undefined}
     >
       <Image

src/content/pages/ecosystem/index.md

@@ -51,7 +51,7 @@ projectsAndTools:
     title: tBTC
     description: tBTC is a Bitcoin-backed token pegged to the price of bitcoin. It allows holders to use bitcoin on DeFi.
     categories:
-      - label: Project
+      - label: project
     timestamp: 1675199559
     buttons:
     - label: Learn More
@@ -146,4 +146,32 @@ projectsAndTools:
     - label: Go to App
       url: https://101.xyz/course/claqymc0v067108kyden9aehq
       variant: EXTERNAL_SOLID
+resourcesInfo:
+  preTitle: Resources
+  title: Ecosystem Resources
+  description: "A mission-aligned coalition of organizations shaping the future of web3."
+  rowReverse: false
+resources:
+  - image: /images/github-resources.svg
+    title: Github
+    description: Explore the repositories and contribute to the Threshold ecosystem.
+    buttons:
+    - label: Explore our Github
+      url: https://github.com/threshold-network/
+      variant: EXTERNAL_OUTLINE
+  - image: /images/discourse-resources.svg
+    title: Governance Forum
+    description: Get involved in the discussions that are shaping the future of cryptography in the web3.
+    buttons:
+    - label: Learn More
+      url: https://forum.threshold.network/
+      variant: EXTERNAL_OUTLINE
+  - image: /images/threshold-resources.svg
+    isBigSize: true
+    title: Explore the Threshold Community Blog
+    description: Read all the articles from across the Threshold ecosystem, easily accessible through our Blog.
+    buttons:
+    - label: Read Our Blog
+      url: https://blog.threshold.network/
+      variant: EXTERNAL_OUTLINE
 ---

src/templates/ecosystem-page/ProjectsAndToolsCard.tsx

@@ -66,7 +66,7 @@ export const ProjectsAndToolsCard: FC<ProjectsAndToolsCardProps> = ({
         >
           <Stack spacing={7}>
             <Stack direction="row" alignItems="center" gap={4}>
-              <Image h={"60px"} w={"60px"} {...image} />
+              <Image h="60px" w="60px" {...image} />
               <Card.Title noOfLines={2} maxWidth="120px" fontWeight="medium">
                 {title}
               </Card.Title>

src/templates/ecosystem-page/Resources.tsx

@@ -0,0 +1,121 @@
+import { FC } from "react"
+import { Flex, GridItem, SimpleGrid, Stack } from "@chakra-ui/react"
+import Card from "../../components/Card"
+import ExternalButtonLink from "../../components/Buttons/ExternalButtonLink"
+import { ExternalLinkHref } from "../../components/Navbar/types"
+import { BodyLg, H3, H5, Image, ImageProps } from "../../components"
+import { CardButton } from "./ProjectsAndToolsCard"
+import backgroundResources from "../../static/images/background-resources.svg"
+
+export interface ResourcesCardProps {
+  image: ImageProps
+  title: string
+  description: string
+  buttons: CardButton[]
+  isBigSize?: boolean
+}
+
+const ResourcesCard: FC<ResourcesCardProps> = ({
+  image,
+  title,
+  description,
+  buttons,
+}) => {
+  return (
+    <Card m="auto" display="flex" flexDirection="column" w="100%" p={10}>
+      <Stack spacing={6}>
+        <Stack direction="row" alignItems="center" gap={4}>
+          <Image h="42px" w="42px" {...image} />
+          <H5 noOfLines={2}>{title}</H5>
+        </Stack>
+
+        <BodyLg as="div" color="gray.400" noOfLines={2}>
+          {description}
+        </BodyLg>
+        {buttons.map((button: CardButton, i) => (
+          <ExternalButtonLink
+            key={i}
+            mt={6}
+            href={button.url as ExternalLinkHref}
+            size="lg"
+            variant="outline"
+          >
+            {button.label}
+          </ExternalButtonLink>
+        ))}
+      </Stack>
+    </Card>
+  )
+}
+
+const ResourcesExtendedCard: FC<ResourcesCardProps> = ({
+  image,
+  title,
+  description,
+  buttons,
+}) => {
+  return (
+    <GridItem
+      m="auto"
+      display="flex"
+      flexDirection="column"
+      w="100%"
+      colSpan={{ base: 1, md: 2 }}
+    >
+      <Card p={0} m={0}>
+        <SimpleGrid columns={{ base: 1, md: 2 }}>
+          <Flex
+            flexDirection="row"
+            alignItems="center"
+            gap={6}
+            px={{ base: 8, md: 20 }}
+            py={20}
+            backgroundImage={backgroundResources}
+          >
+            <Image h="132px" w="132px" {...image} />
+            <H3 fontWeight="semibold" noOfLines={2}>
+              Threshold Blog
+            </H3>
+          </Flex>
+          <Stack spacing={7} pl={16} pr={20} py={10}>
+            <H5 noOfLines={2}>{title}</H5>
+            <BodyLg as="div" color="gray.400" noOfLines={3}>
+              {description}
+            </BodyLg>
+            {buttons.map((button: CardButton, i) => (
+              <ExternalButtonLink
+                key={i}
+                mt={6}
+                href={button.url as ExternalLinkHref}
+                size="lg"
+                variant="outline"
+              >
+                {button.label}
+              </ExternalButtonLink>
+            ))}
+          </Stack>
+        </SimpleGrid>
+      </Card>
+    </GridItem>
+  )
+}
+
+const Resources: FC<{ cards: ResourcesCardProps[] }> = ({ cards }) => {
+  return (
+    <>
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5} mt={8}>
+        {cards
+          .slice(0, 3)
+          .map((resource: any, i) =>
+            resource.isBigSize ? (
+              <ResourcesExtendedCard key={i} {...resource} />
+            ) : (
+              <ResourcesCard key={i} {...resource} />
+            )
+          )}
+      </SimpleGrid>
+    </>
+  )
+}
+
+export default Resources

src/templates/ecosystem-page/index.tsx

@@ -5,6 +5,7 @@ import { Box } from "@chakra-ui/react"
 import { IntegrationsCardGroup } from "../../components/IntegrationCard"
 import ProgramsAndEvents from "./ProgramsAndEvents"
 import ProjectsAndTools from "./ProjectsAndTools"
+import Resources from "./Resources"
 
 const EcosystemPageTemplate: FC = ({ data }: any) => {
   const {
@@ -14,30 +15,41 @@ const EcosystemPageTemplate: FC = ({ data }: any) => {
     programsAndEvents,
     projectsAndToolsInfo,
     projectsAndTools,
+    resourcesInfo,
+    resources,
   } = data.markdownRemark.frontmatter
 
   return (
-    <Box>
+    <Box bgColor="gray.900">
       <SectionTemplate
         {...ecosystemInfo}
         image={{ ...ecosystemInfo.image, mr: "28rem", mt: "-3rem", w: "52rem" }}
         preTitle={null}
         columnReverse
-        bgColor="gray.900"
         isSmallSize
         isImageBackground
       />
       <IntegrationsCardGroup cards={integrations} />
-      <SectionTemplate
-        {...programsAndEventsInfo}
-        isMediumSize
-        bgColor="gray.900"
-      >
+      <SectionTemplate {...programsAndEventsInfo} isMediumSize>
         <ProgramsAndEvents cards={programsAndEvents} />
       </SectionTemplate>
       <SectionTemplate {...projectsAndToolsInfo} isMediumSize bgColor="#161A1F">
         <ProjectsAndTools cards={projectsAndTools} />
       </SectionTemplate>
+      <SectionTemplate
+        {...resourcesInfo}
+        image={{
+          ...ecosystemInfo.image,
+          left: 0,
+          ml: "4rem",
+          mt: "-6rem",
+          w: "52rem",
+        }}
+        isMediumSize
+        isImageBackground
+      >
+        <Resources cards={resources} />
+      </SectionTemplate>
     </Box>
   )
 }
@@ -128,6 +140,32 @@ export const query = graphql`
             variant
           }
         }
+        resourcesInfo {
+          rowReverse
+          preTitle
+          title
+          description
+        }
+        resources {
+          image {
+            id
+            relativePath
+            internal {
+              mediaType
+            }
+            childImageSharp {
+              gatsbyImageData(width: 200)
+            }
+          }
+          isBigSize
+          title
+          description
+          buttons {
+            label
+            url
+            variant
+          }
+        }
       }
     }
   }

static/admin/config.yml

@@ -2241,6 +2241,105 @@ collections:
                   },
                 ],
             }
+          - {
+              label: "Resources Section",
+              name: "resourcesInfo",
+              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: "Resources Card",
+              name: "resources",
+              widget: "list",
+              allow_add: true,
+              fields:
+                [
+                  {
+                    label: "Image",
+                    name: "image",
+                    widget: file,
+                    media_library: { config: { multiple: false } },
+                  },
+                  { label: "Title", name: "title", widget: "string" },
+                  {
+                    label: "Is Big Size",
+                    name: "isBigSize",
+                    widget: "boolean",
+                    required: false,
+                    default: false,
+                  },
+                  {
+                    label: "Description",
+                    name: "description",
+                    widget: "string",
+                  },
+                  {
+                    label: "Buttons",
+                    name: "buttons",
+                    widget: "list",
+                    allow_add: true,
+                    required: false,
+                    fields:
+                      [
+                        { label: Label, name: label, widget: string },
+                        { label: URL, name: url, widget: string },
+                        {
+                          label: Variant,
+                          name: variant,
+                          widget: select,
+                          required: true,
+                          options:
+                            [
+                              {
+                                label: "External Solid",
+                                value: "EXTERNAL_SOLID",
+                              },
+                              {
+                                label: "Internal Solid",
+                                value: "INTERNAL_SOLID",
+                              },
+                              {
+                                label: "External Outline",
+                                value: "EXTERNAL_OUTLINE",
+                              },
+                              {
+                                label: "Internal Outline",
+                                value: "INTERNAL_OUTLINE",
+                              },
+                            ],
+                        },
+                      ],
+                  },
+                ],
+            }
       # Governance Page
       - file: "src/content/pages/governance/index.md"
         name: "governancePage"