Add tbtc sdk template and content

.gitignore

@@ -4,7 +4,7 @@
 .eslintcache
 
 # Generated
-build/
+/build/
 dist/
 
 # Yarn

src/components/Card/index.tsx

@@ -10,6 +10,7 @@ import { FC } from "react"
 import { BodyLg, BodySm, LabelSm } from "../Typography"
 
 type CardComponent<P> = FC<P> & {
+  PreTitle: FC<TextProps>
   Title: FC<TextProps>
   SubTitle: FC<TextProps>
   Divider: FC<DividerProps>
@@ -21,6 +22,12 @@ const Card: CardComponent<BoxProps> = (props) => {
   return <Box __css={styles} {...props} />
 }
 
+const PreTitle: FC = ({ children, ...textProps }) => (
+  <LabelSm as="span" bgClip="text" textTransform="uppercase" {...textProps}>
+    {children}
+  </LabelSm>
+)
+
 const Title: FC = ({ children, ...textProps }) => (
   <BodyLg {...textProps}>{children}</BodyLg>
 )
@@ -39,6 +46,7 @@ const Divider = ({ ...dividerProps }) => {
   return <ChakraDivider bg="gray.700" {...dividerProps} />
 }
 
+Card.PreTitle = PreTitle
 Card.Title = Title
 Card.SubTitle = SubTitle
 Card.Body = Body

src/components/HighlightWord.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react"
-import { RoleTemplateProps } from "../templates/home-page/SectionTemplate"
-import { BoxProps, Text } from "@chakra-ui/react"
+import { Box, BoxProps, Text } from "@chakra-ui/react"
 
 export interface HighlightWordProps extends BoxProps {
   title: string

src/content/pages/build/index.md

@@ -0,0 +1,5 @@
+---
+template: build-page
+path: /build
+title: Build
+---

src/content/pages/build/tbtc-sdk.md

@@ -0,0 +1,73 @@
+---
+template: build-page/tbtc-sdk
+path: build-page/tbtc-sdk
+title: SDK Page
+seo: 
+  - title: tBTC SDK
+sdkInfo:
+  title: "tBTC SDK: Supercharge Your Project with Bitcoin"
+  highlightedWord: "tBTC SDK:"
+  description: "Unlock the power of blockchain – The ultimate toolkit for harnessing Bitcoin's potential."
+  image: /images/tbtc-sdk.svg
+  buttons:
+    - label: Go To Docs
+      url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk
+      variant: EXTERNAL_OUTLINE
+  rowReverse: false
+useCasesInfo:
+  preTitle: Explore
+  title: Use Cases
+  description: "How tBTC SDK Unlocks Bitcoin’s Versatility in Blockchain Projects."
+  rowReverse: false
+useCases:
+  - image: /images/decentralized-finance.svg
+    preTitle: Explore
+    title: Decentralized Finance
+    description: Make your DeFi application Bitcoin-compatible to boost liquidity and market options.
+    buttons:
+      - label: Learn More
+        url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk/
+        variant: EXTERNAL_OUTLINE
+  - image: /images/cross-chain-applications.svg
+    preTitle: Explore
+    title: Cross-Chain Applications
+    description: Build apps that use Bitcoin's power across different blockchains, offering more flexibility and reach.
+    buttons:
+      - label: Learn More
+        url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk/
+        variant: EXTERNAL_OUTLINE
+  - image: /images/payment-solutions.svg
+    preTitle: Explore
+    title: Payment Solutions
+    description: Add Bitcoin to your blockchain platforms for wider payment options and to attract more users.
+    buttons:
+      - label: Learn More
+        url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk/
+        variant: EXTERNAL_OUTLINE
+featuresInfo:
+  preTitle: Features
+  title: Key Features
+  description: "Explore tBTC SDK's core features for seamless Bitcoin integration."
+  image: /images/ecosystem-grid.svg
+  buttons:
+    - label: Learn More
+      url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk/architecture
+      variant: EXTERNAL_OUTLINE
+  rowReverse: false
+  icon: /images/gradient-box-icon.svg
+features:
+  - title: Seamless Integration
+    description: TypeScript library enables the inclusion of Bitcoin into a range of blockchain environments.
+  - title: Streamlined Features
+    description: Simplifies Bitcoin deposits, mints, redemptions, focusing on innovation, not complexity.
+  - title: Adaptable Architecture
+    description: With shared libraries, the SDK smooth interactions between Bitcoin and multiple chains.
+callToActionInfo:
+  title: Get Started Today
+  description: "Join our community and explore the endless possibilities with tBTC SDK."
+  rowReverse: false
+  buttons:
+  - label: Learn More
+    url: https://docs.threshold.network/app-development/tbtc-v2/tbtc-sdk/
+    variant: EXTERNAL_OUTLINE
+---

src/templates/build-page/index.tsx

@@ -0,0 +1,7 @@
+import { FC } from "react"
+
+const BuildPageTemplate: FC<any> = () => {
+  return <></>
+}
+
+export default BuildPageTemplate

src/templates/build-page/tbtc-sdk/FeaturesSection.tsx

@@ -0,0 +1,60 @@
+import { FC } from "react"
+import { SimpleGrid, Stack } from "@chakra-ui/react"
+import Card from "../../../components/Card"
+import { BodyMd, H6, Image, ImageProps } from "../../../components"
+
+export interface FeaturesSectionProps {
+  cards: FeatureCardProps[]
+  icon: ImageProps
+}
+
+export interface FeatureCardProps {
+  title: string
+  description: string
+  isBigSize?: boolean
+}
+
+const FeatureCard: FC<FeatureCardProps & FeaturesSectionProps> = ({
+  icon,
+  title,
+  description,
+}) => {
+  return (
+    <Card
+      boxShadow={"0px 4px 90px 0px rgba(153, 116, 255, 0.06)"}
+      m="auto"
+      display="flex"
+      flexDirection="column"
+      w="100%"
+      p={10}
+    >
+      <Stack spacing={6}>
+        <Stack direction="row" alignItems="center" gap={2}>
+          <Image h="10px" w="10px" {...icon} />
+          <H6>{title}</H6>
+        </Stack>
+
+        <BodyMd as="div" lineHeight="28px" color="gray.400" noOfLines={3}>
+          {description}
+        </BodyMd>
+      </Stack>
+    </Card>
+  )
+}
+
+const FeaturesSection: FC<FeaturesSectionProps> = ({
+  cards,
+  icon,
+}: FeaturesSectionProps) => {
+  return (
+    <>
+      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={4} mt={20}>
+        {cards.map((resource: any, i) => (
+          <FeatureCard key={i} icon={icon} {...resource} />
+        ))}
+      </SimpleGrid>
+    </>
+  )
+}
+
+export default FeaturesSection

src/templates/build-page/tbtc-sdk/UseCases.tsx

@@ -0,0 +1,113 @@
+import { FC, useRef, useState } from "react"
+import { Box, Button, SimpleGrid, Stack, Flex } 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 CardButton {
+  label: string
+  url: string
+  variant: string
+}
+
+export interface CardCategory {
+  label: string
+}
+
+export interface UseCasesCardProps {
+  image: ImageProps
+  preTitle: string
+  title: string
+  description: string
+  categories: CardCategory[]
+  timestamp: number
+  buttons: CardButton[]
+}
+
+const UseCasesCard: FC<UseCasesCardProps> = ({
+  image,
+  preTitle,
+  title,
+  description,
+  buttons,
+}) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const cardRef = useRef(null)
+
+  return (
+    <Stack spacing={6}>
+      <Box
+        ref={cardRef}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        rounded="2xl"
+        p="2px"
+        bgGradient={
+          isHovered
+            ? "linear-gradient(180deg, rgba(189,48,255,0) 0%, rgba(125,0,255,1) 100%)"
+            : "none"
+        }
+      >
+        <Card
+          m="auto"
+          display="flex"
+          flexDirection="column"
+          justifyContent="space-between"
+          w="100%"
+          borderColor="transparent"
+          bg="gray.900"
+        >
+          <Stack spacing={6} mb="0.5rem">
+            <Card.PreTitle
+              bgGradient="linear-gradient(180deg, #BD30FF 3.32%, #7D00FF 95.02%)"
+              fontWeight="bold"
+            >
+              {preTitle}
+            </Card.PreTitle>
+            <Stack direction="row" alignItems="center" gap={4}>
+              <Image h="40px" w="40px" {...image} />
+              <Card.Title noOfLines={2} maxWidth="130px" fontWeight="bold">
+                {title}
+              </Card.Title>
+            </Stack>
+            <Card.Body
+              as="div"
+              color="gray.400"
+              lineHeight="24px"
+              noOfLines={3}
+            >
+              {description}
+            </Card.Body>
+            <SimpleGrid columns={2}>
+              {buttons.map((button: CardButton, i) => (
+                <ExternalButtonLink
+                  key={i}
+                  href={button.url as ExternalLinkHref}
+                  variant="link"
+                  size="md"
+                  width="100%"
+                  ml="-0.5rem"
+                >
+                  {button.label}
+                </ExternalButtonLink>
+              ))}
+            </SimpleGrid>
+          </Stack>
+        </Card>
+      </Box>
+    </Stack>
+  )
+}
+
+const UseCases: FC<{ cards: UseCasesCardProps[] }> = ({ cards }) => {
+  return (
+    <SimpleGrid columns={{ md: 3 }} spacing={3} mt={8} mb={-12}>
+      {cards.map((card: any, i) => (
+        <UseCasesCard key={i} {...card} />
+      ))}
+    </SimpleGrid>
+  )
+}
+
+export default UseCases