Ecosystem section

src/components/FilterMenu.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Button, Stack } from "@chakra-ui/react"
+
+interface FilterMenuProps {
+  options: string[]
+  activeFilter: string | null
+  setActiveFilter: React.Dispatch<React.SetStateAction<string | null>>
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+}
+
+const FilterMenu: React.FC<FilterMenuProps> = ({
+  options,
+  activeFilter,
+  setActiveFilter,
+  setCurrentPage,
+}) => {
+  return (
+    <Stack direction="row" flexWrap="wrap" spacing={{ md: 3 }}>
+      {options.map((option, index) => (
+        <Button
+          key={index}
+          color={activeFilter === option ? "white" : "gray.500"}
+          onClick={() => {
+            setCurrentPage(1)
+            setActiveFilter(option)
+          }}
+          textTransform="capitalize"
+          variant="ghost"
+        >
+          {option}
+        </Button>
+      ))}
+    </Stack>
+  )
+}
+
+export default FilterMenu

src/components/HighlightWord.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from "react"
+import { RoleTemplateProps } from "../templates/home-page/SectionTemplate"
+import { BoxProps, Text } from "@chakra-ui/react"
+
+export interface HighlightWordProps extends BoxProps {
+  title: string
+  highlightedWord: string
+}
+
+export const HighlightWord: FC<HighlightWordProps> = ({
+  title,
+  highlightedWord,
+  ...highlightedWordProps
+}) => {
+  const titleSplittedByHighlightedWord = title.split(highlightedWord!)
+  return (
+    <>
+      {titleSplittedByHighlightedWord.map((item, index) => (
+        <React.Fragment key={`text-${index}`}>
+          {item}
+          {index !== titleSplittedByHighlightedWord.length - 1 && (
+            <Text as="span" bgClip="text" key={index} {...highlightedWordProps}>
+              {highlightedWord}
+            </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

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/IntegrationCard.tsx

@@ -0,0 +1,115 @@
+import { FC, useEffect, useState, useRef } from "react"
+import { Image, ImageProps } from "./Image"
+import Card from "./Card"
+import { LabelSm } from "./Typography"
+import { Box, Stack } from "@chakra-ui/react"
+
+interface IntegrationCardProps {
+  image: ImageProps
+  title: string
+}
+
+const IntegrationCard: FC<IntegrationCardProps> = ({
+  image,
+  title,
+  ...props
+}) => {
+  return (
+    <Card
+      boxShadow={"0px 0px 100px 5px rgba(153, 116, 255, 0.08)"}
+      minW="170px"
+      borderRadius={35}
+      py={3}
+      px={4}
+      {...props}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Image left={0} top={0} boxSize="40px" h="40px" w="40px" {...image} />
+        <Box display="flex" justifyContent="center" w="100%">
+          <LabelSm>{title}</LabelSm>
+        </Box>
+      </Stack>
+    </Card>
+  )
+}
+
+export const IntegrationsCardGroup: FC<{ cards: IntegrationCardProps[] }> = ({
+  cards,
+}) => {
+  const [cardSet, setCardSet] = useState<IntegrationCardProps[]>([])
+  const scrollContainer = useRef<HTMLDivElement>(null)
+
+  const cardWidth = 170
+  const cardSpacing = 5
+
+  useEffect(() => {
+    const numberOfCards = window.innerWidth / (cardWidth + cardSpacing)
+    const roundedNumberOfCards = Math.floor(numberOfCards)
+    let newCardSet: IntegrationCardProps[] = []
+
+    // Create a new array by duplicating the original cards until we reach the
+    // calculated size
+    for (let i = 0; i < roundedNumberOfCards; i++) {
+      newCardSet = [...newCardSet, ...cards]
+    }
+    setCardSet(newCardSet)
+  }, [cardWidth, cardSpacing, cards])
+
+  useEffect(() => {
+    let animationFrame: number
+
+    const scrollCards = () => {
+      if (scrollContainer.current) {
+        const scrollElem = scrollContainer.current
+        scrollElem.scrollLeft += 1.5
+
+        // Reset to the start when reaching the end
+        if (
+          scrollElem.scrollLeft >=
+          scrollElem.scrollWidth - scrollElem.offsetWidth
+        ) {
+          scrollElem.scrollLeft = 0
+        }
+      }
+      animationFrame = requestAnimationFrame(scrollCards)
+    }
+    animationFrame = requestAnimationFrame(scrollCards)
+
+    return () => {
+      cancelAnimationFrame(animationFrame)
+    }
+  }, [cardSet])
+
+  return (
+    <Box position="relative">
+      <Box
+        position="absolute"
+        top="0"
+        bottom="0"
+        left="0"
+        right="0"
+        boxShadow={`inset 80px 0 30px -30px rgba(29, 34, 41, 1), 
+        inset -80px 0 30px -30px rgba(29, 34, 41, 1)`}
+        pointerEvents="none"
+        zIndex="1"
+      />
+      <Stack
+        ref={scrollContainer}
+        id="card-container"
+        backgroundColor="gray.900"
+        direction="row"
+        spacing={cardSpacing}
+        overflowX="hidden"
+        py={20}
+        mb={-28}
+        position="relative"
+      >
+        {cardSet.map((card: IntegrationCardProps, i) => (
+          <IntegrationCard key={i} {...card} />
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+export default IntegrationCard

src/components/Navbar/index.tsx

@@ -91,7 +91,7 @@ export const Navbar: FC = () => {
         as="header"
       >
         <Container
-          maxW="1072px"
+          maxW="1140px"
           h="100%"
           display="flex"
           justifyContent="space-between"

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/components/PageSection.tsx

@@ -4,14 +4,23 @@ import { Image } from "../components/Image"
 import useChakraBreakpoint from "../hooks/useChakraBreakpoint"
 import { ImageProps } from "./Image"
 
-export const PageSection: FC<BoxProps & { withSmallPadding?: boolean }> = ({
-  withSmallPadding,
-  children,
-  ...props
-}) => {
+export interface SectionImageProps {
+  imageProps: ImageProps
+  isImageBackground?: boolean
+}
+
+export const PageSection: FC<
+  BoxProps & { withSmallPadding?: boolean; withMediumPadding?: boolean }
+> = ({ withSmallPadding, withMediumPadding, children, ...props }) => {
   return (
     <Box
-      py={withSmallPadding ? { base: 8, md: 16 } : { base: 20, md: 40 }}
+      py={
+        withSmallPadding
+          ? { base: 8, md: 16 }
+          : withMediumPadding
+          ? { base: 14, md: 28 }
+          : { base: 20, md: 40 }
+      }
       as="section"
       {...props}
     >
@@ -45,12 +54,25 @@ 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={isImageBackground ? { base: "none", md: "flex" } : "flex"}
+      justifyContent="center"
+      maxW="415px"
+      maxH="300px"
+      overflowX="hidden"
+      mx={mdSize ? "auto !important" : undefined}
+    >
+      <Image
+        position={isImageBackground ? "absolute" : undefined}
+        {...imageProps}
+      />
     </Box>
   )
 }

src/components/Pagination.tsx

@@ -0,0 +1,63 @@
+import { FC } from "react"
+import { Stack, Text, Box } from "@chakra-ui/react"
+import { ChevronRightIcon } from "@chakra-ui/icons"
+
+interface PaginationProps {
+  totalPages: number
+  currentPage: number
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+}
+
+const Pagination: FC<PaginationProps> = ({
+  totalPages,
+  currentPage,
+  setCurrentPage,
+}) => {
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1)
+    }
+  }
+
+  const goToLastPage = () => {
+    setCurrentPage(totalPages)
+  }
+  return (
+    <Stack direction="row" spacing={4} align="center">
+      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+        <Text
+          key={page}
+          color={currentPage === page ? "white" : "gray.500"}
+          borderBottom={currentPage === page ? "1px solid white" : "none"}
+          cursor="pointer"
+          onClick={() => setCurrentPage(page)}
+        >
+          {page}
+        </Text>
+      ))}
+      <Box
+        h={2}
+        w={3}
+        display="flex"
+        alignItems="center"
+        as="button"
+        onClick={goToNextPage}
+      >
+        <ChevronRightIcon />
+      </Box>
+      <Box
+        h={2}
+        w={3}
+        display="flex"
+        alignItems="center"
+        borderRight="1px solid"
+        as="button"
+        onClick={goToLastPage}
+      >
+        <ChevronRightIcon />
+      </Box>
+    </Stack>
+  )
+}
+
+export default Pagination