Add ecosystem hero section

src/components/Image.tsx

@@ -75,7 +75,7 @@ export const Image: FC<ImageProps & IconProps & { childImageSharp?: any }> = ({
   childImageSharp,
   ...restProps
 }) => {
-  if (internal.mediaType === "image/svg+xml" && svg) {
+  if (internal?.mediaType === "image/svg+xml" && svg) {
     const IconComponent = buildIcon(id, svg)
     return <IconComponent {...restProps} />
   } else if (gatsbyImageData) {

src/components/PageSection.tsx

@@ -4,6 +4,11 @@ import { Image } from "../components/Image"
 import useChakraBreakpoint from "../hooks/useChakraBreakpoint"
 import { ImageProps } from "./Image"
 
+export interface SectionImageProps {
+  imageProps: ImageProps
+  isImageBackground?: boolean
+}
+
 export const PageSection: FC<BoxProps & { withSmallPadding?: boolean }> = ({
   withSmallPadding,
   children,
@@ -45,12 +50,24 @@ export const ResponsiveStack: FC<
   )
 }
 
-export const SectionImage: FC<ImageProps> = (imageProps) => {
+export const SectionImage: FC<SectionImageProps> = ({
+  imageProps,
+  isImageBackground,
+}) => {
   const mdSize = useChakraBreakpoint("md")
 
   return (
-    <Box maxW="415px" maxH="300px" mx={mdSize ? "auto !important" : undefined}>
-      <Image {...imageProps} />
+    <Box
+      display="flex"
+      justifyContent="center"
+      maxW="415px"
+      maxH="300px"
+      mx={mdSize ? "auto !important" : undefined}
+    >
+      <Image
+        position={isImageBackground ? "absolute" : undefined}
+        {...imageProps}
+      />
     </Box>
   )
 }

src/content/pages/ecosystem/index.md

@@ -0,0 +1,13 @@
+---
+template: ecosystem-page
+path: /ecosystem
+title: Ecosystem Page
+seoTitle: Threshold Ecosystem
+ecosystemInfo:
+  title: We Are Building Our Ecosystem Together
+  highlightedWord: "Ecosystem"
+  description: "The Threshold ecosystem is built around a vibrant community of 
+  users, developers, designers, and educators."
+  image: /images/ecosystem-grid.svg
+  rowReverse: false
+---

src/templates/home-page/SectionTemplate.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { BoxProps, Stack } from "@chakra-ui/react"
+import { BoxProps, Stack, Text } from "@chakra-ui/react"
 import {
   ButtonType,
   CmsButtonLink,
@@ -26,21 +26,57 @@ export interface RoleTemplateProps extends BoxProps {
   title: string
   description: string
   buttons: FooterButton[]
+  highlightedWord?: string
   image?: ImageProps
   rowReverse?: boolean
   isSmallSize?: boolean
+  isImageBackground?: boolean
   columnReverse?: boolean
   preTitle?: string
 }
 
+const SectionTitleTemplate: FC<Partial<RoleTemplateProps>> = ({
+  title,
+  highlightedWord,
+}) => {
+  return (
+    <H2 mt={3} color="brand.50">
+      {title!
+        .split(" ")
+        .map((word, index, arr) => {
+          return word === highlightedWord ? (
+            <Text
+              as="span"
+              bgGradient="linear-gradient(120.19deg, #BD30FF 3.32%, #7D00FF 95.02%)"
+              bgClip="text"
+              fontWeight="bold"
+              key={index}
+            >
+              {word}
+            </Text>
+          ) : (
+            <Text as="span" color="brand.50" key={index}>
+              {word}
+            </Text>
+          )
+        })
+        .reduce((acc, curr, index, arr) => {
+          return index !== arr.length - 1 ? [...acc, curr, " "] : [...acc, curr]
+        }, [] as React.ReactNode[])}
+    </H2>
+  )
+}
+
 const SectionTemplate: FC<RoleTemplateProps> = ({
   title,
+  highlightedWord,
   description,
   buttons = [],
   image,
   rowReverse,
   columnReverse,
   isSmallSize,
+  isImageBackground,
   preTitle = "Get Started",
   children,
   ...boxProps
@@ -56,9 +92,10 @@ const SectionTemplate: FC<RoleTemplateProps> = ({
           <LabelMd textTransform="uppercase" color="gray.500">
             {preTitle}
           </LabelMd>
-          <H2 mt={3} color="gray.50">
-            {title}
-          </H2>
+          <SectionTitleTemplate
+            title={title}
+            highlightedWord={highlightedWord}
+          />
           {isSmallSize ? (
             <BodyLg mt={10} color="gray.300">
               {description}
@@ -84,7 +121,12 @@ const SectionTemplate: FC<RoleTemplateProps> = ({
             })}
           </Stack>
         </SectionTextContainer>
-        {image && <SectionImage {...image} />}
+        {image && (
+          <SectionImage
+            imageProps={image}
+            isImageBackground={isImageBackground}
+          />
+        )}
       </ResponsiveStack>
       {children}
     </PageSection>