Merge pull request #105 from threshold-network/tbtc-sdk-page

Add tBTC SDK Page ## Description Add the tBTC SDK landing page to the website with multiple sections - Updated navbar to accommodate a new category for the upcoming Threshold products, starting with the tBTC SDK (thUSD and TACo). - [Add tbtc sdk landing page](b03599a) - [Fix integration component margin](5a7ff4c) - [Refactor nav bar menu content](d681d1e) Figma's design prototype: https://www.figma.com/file/5eN3hPMkCVOpXb5YQw6CtB/tBTC-SDK?type=design&node-id=1264%3A185&mode=design&t=btHMRHkFwM2x8nJN-1 ## Notice - [x] Have you checked to ensure there aren't other open [Pull Requests](https://github.com/shapeshift/web/pulls) for the same update/change? ## Pull Request Type - [x] New Feature (Breaking/Non-breaking Change) ## Issue (if applicable) Closes issue #90 ## Testing Please outline all testing steps 1. Clone the repo - git clone https://github.com/threshold-network/website.git 2. Install dependencies - yarn install 3. Run the app - yarn start ## Screenshots (if applicable) ![image](https://github.com/threshold-network/website/assets/60587527/62fb9d92-ef50-4fc1-9669-bde0452a70b1) ![image](https://github.com/threshold-network/website/assets/60587527/12e640d1-51ac-4432-bf9e-295bf7515bbe) ![image](https://github.com/threshold-network/website/assets/60587527/c9bc4848-56c5-4654-983d-8b7f140c057f) For mobile: ![image](https://github.com/threshold-network/website/assets/60587527/07d8ad35-7e7b-492b-a47c-1ea681f38789)
threshold-network · Dec 22, 2023 · 1197d5d · 1197d5d
2 parents d0006cf + 8b7e3bf
commit 1197d5d
Show file tree

Hide file tree

Showing 28 changed files with 1,058 additions and 104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@
 .eslintcache
 
 # Generated
-build/
+/build/
 dist/
 
 # Yarn

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -9,7 +9,18 @@ import {
 import { FC } from "react"
 import { BodyLg, BodySm, LabelSm } from "../Typography"
 
+export interface CardButton {
+  label: string
+  url: string
+  variant: string
+}
+
+export interface CardCategory {
+  label: string
+}
+
 type CardComponent<P> = FC<P> & {
+  PreTitle: FC<TextProps>
   Title: FC<TextProps>
   SubTitle: FC<TextProps>
   Divider: FC<DividerProps>
@@ -21,6 +32,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 +56,7 @@ const Divider = ({ ...dividerProps }) => {
   return <ChakraDivider bg="gray.700" {...dividerProps} />
 }
 
+Card.PreTitle = PreTitle
 Card.Title = Title
 Card.SubTitle = SubTitle
 Card.Body = Body

diff --git a/src/components/HighlightWord.tsx b/src/components/HighlightWord.tsx
@@ -1,24 +1,23 @@
 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
+  highlightedWord?: string
 }
 
 export const HighlightWord: FC<HighlightWordProps> = ({
   title,
   highlightedWord,
   ...highlightedWordProps
 }) => {
-  const titleSplittedByHighlightedWord = title.split(highlightedWord!)
+  const splittedTitle = title.split(highlightedWord || "")
   return (
     <>
-      {titleSplittedByHighlightedWord.map((item, index) => (
+      {splittedTitle.map((item, index) => (
         <React.Fragment key={`text-${index}`}>
           {item}
-          {index !== titleSplittedByHighlightedWord.length - 1 && (
+          {index !== splittedTitle.length - 1 && highlightedWord && (
             <Text as="span" bgClip="text" key={index} {...highlightedWordProps}>
               {highlightedWord}
             </Text>

diff --git a/src/components/IntegrationCard.tsx b/src/components/IntegrationCard.tsx
@@ -101,7 +101,6 @@ export const IntegrationsCardGroup: FC<{ cards: IntegrationCardProps[] }> = ({
         spacing={cardSpacing}
         overflowX="hidden"
         py={20}
-        mb={-28}
         position="relative"
       >
         {cardSet.map((card: IntegrationCardProps, i) => (

diff --git a/src/components/Navbar/DesktopNav/DesktopNavLinks.tsx b/src/components/Navbar/DesktopNav/DesktopNavLinks.tsx
@@ -3,8 +3,18 @@ import { HStack } from "@chakra-ui/react"
 import DropdownLabelLink from "./DropdownMenu"
 import NavLink from "./NavLink"
 import { LinkInfo } from "../types"
+import NavCTAButtons from "../NavCTAButtons"
+import { CardButton } from "../../Card"
 
-const DesktopNavLinks: FC<{ navLinks: LinkInfo[] }> = ({ navLinks }) => {
+interface DesktopNavLinksProps {
+  navLinks: LinkInfo[]
+  menuButtons: CardButton[]
+}
+
+const DesktopNavLinks: FC<DesktopNavLinksProps> = ({
+  navLinks,
+  menuButtons,
+}) => {
   return (
     <HStack
       w="100%"
@@ -13,7 +23,8 @@ const DesktopNavLinks: FC<{ navLinks: LinkInfo[] }> = ({ navLinks }) => {
       borderColor="gray.700"
       px={8}
       spacing={4}
-      display={{ base: "none", lg: "inherit" }}
+      display={{ base: "none", md: "inherit" }}
+      justifyContent={{ base: "end", lg: "start" }}
       as="nav"
     >
       {navLinks.map(({ subitems, label, url }) => {
@@ -29,6 +40,7 @@ const DesktopNavLinks: FC<{ navLinks: LinkInfo[] }> = ({ navLinks }) => {
           </NavLink>
         )
       })}
+      <NavCTAButtons menuButtons={menuButtons} px={5} />
     </HStack>
   )
 }

diff --git a/src/components/Navbar/DesktopNav/DropdownMenu.tsx b/src/components/Navbar/DesktopNav/DropdownMenu.tsx
@@ -35,6 +35,7 @@ const DropdownMenu: FC<{ dropdown: LinkInfo[]; text: string }> = ({
               px={2}
               color="gray.300"
               _hover={hoverStyles}
+              display={{ base: "none", lg: "inherit" }}
               {...openStyles}
             >
               <HStack>

diff --git a/src/components/Navbar/DesktopNav/NavLink.tsx b/src/components/Navbar/DesktopNav/NavLink.tsx
@@ -10,7 +10,7 @@ const NavLink: FC<{ href: string }> = ({ href, children }) => {
       px={2}
       to={href}
       color="gray.300"
-      display="flex"
+      display={{ base: "none", lg: "flex" }}
       _hover={{
         textDecoration: "none",
         color: "white",

diff --git a/src/components/Navbar/MobileNav/MobileDrawer.tsx b/src/components/Navbar/MobileNav/MobileDrawer.tsx
@@ -18,13 +18,24 @@ import { LinkInfo, SocialLink } from "../types"
 import SocialMediaLinks from "../SocialMediaLinks"
 import { FaChevronLeft } from "react-icons/all"
 import { BodySm, H5 } from "../../Typography"
+import { CardButton } from "../../Card"
+import NavCTAButtons from "../NavCTAButtons"
 
-const MobileDrawer: FC<{
+interface MobileDrawerProps {
   onClose: () => void
   isOpen: boolean
   navLinks: LinkInfo[]
   socialLinks: SocialLink[]
-}> = ({ onClose, isOpen, navLinks, socialLinks }) => {
+  menuButtons: CardButton[]
+}
+
+const MobileDrawer: FC<MobileDrawerProps> = ({
+  onClose,
+  isOpen,
+  navLinks,
+  socialLinks,
+  menuButtons,
+}) => {
   const isMobileDevice = useChakraBreakpoint("lg")
 
   const [navLinksToRender, setNavLinksToRender] = useState(navLinks)
@@ -64,6 +75,14 @@ const MobileDrawer: FC<{
           justifyContent="space-between"
           pb={20}
         >
+          <NavCTAButtons
+            menuButtons={menuButtons}
+            display={{ base: "flex", md: "none" }}
+            w="100%"
+            fontSize="18px"
+            height={14}
+            mb={6}
+          />
           <Stack divider={<StackDivider borderColor="gray.700" />}>
             {navLinksToRender.map(({ url, label, subitems }) => (
               <MobileNavLink

diff --git a/src/components/Navbar/NavCTAButtons.tsx b/src/components/Navbar/NavCTAButtons.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react"
+import { CardButton } from "../Card"
+import { ButtonProps, Stack } from "@chakra-ui/react"
+import ExternalButtonLink from "../Buttons/ExternalButtonLink"
+import { ExternalLinkHref } from "./types"
+
+interface NavCTAButtonsProps extends ButtonProps {
+  menuButtons: CardButton[]
+}
+
+const NavCTAButtons: FC<NavCTAButtonsProps> = ({ menuButtons, ...props }) => {
+  return (
+    <Stack direction={{ base: "column", sm: "row" }} spacing={8}>
+      {menuButtons.map((_: CardButton) => {
+        return (
+          <ExternalButtonLink
+            variant="special"
+            href={_.url as ExternalLinkHref}
+            key={_.label}
+            {...props}
+          >
+            {_.label}
+          </ExternalButtonLink>
+        )
+      })}
+    </Stack>
+  )
+}
+
+export default NavCTAButtons
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -8,6 +8,59 @@ import { LinkInfo } from "./types"
 import WhatsNextBanner from "./WhatsNextBanner"
 import MobileDrawer from "./MobileNav/MobileDrawer"
 import DesktopNavLinks from "./DesktopNav/DesktopNavLinks"
+import { CardButton } from "../Card"
+import NavCTAButtons from "./NavCTAButtons"
+
+export const Navbar: FC = () => {
+  const {
+    isOpen: isDrawerOpen,
+    onOpen: onDrawOpen,
+    onClose: onDrawerClose,
+  } = useDisclosure()
+
+  const { isOpen: showBanner, onClose: closeBanner } = useDisclosure({
+    defaultIsOpen: true,
+  })
+  const data = useStaticQuery(query)
+  const socialLinks =
+    data.allMarkdownRemark.edges[0].node.frontmatter.social_links
+  const navLinks = data.allMarkdownRemark.edges[0].node.frontmatter
+    .nav_items as LinkInfo[]
+  const menuButtons = data.allMarkdownRemark.edges[0].node.frontmatter
+    .menu_buttons as CardButton[]
+
+  return (
+    <>
+      {showBanner && <WhatsNextBanner onClose={closeBanner} />}
+      <HStack
+        bg="gray.900"
+        h="90px"
+        borderBottom="1px solid"
+        borderColor="gray.700"
+        as="header"
+      >
+        <Container
+          maxW="1140px"
+          h="100%"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <ThresholdBrand />
+          <MobileDrawer
+            isOpen={isDrawerOpen}
+            onClose={onDrawerClose}
+            navLinks={navLinks}
+            socialLinks={socialLinks}
+            menuButtons={menuButtons}
+          />
+          <DesktopNavLinks navLinks={navLinks} menuButtons={menuButtons} />
+          <SocialMediaLinks links={socialLinks} pl={8} />
+          <HamburgerButton openDrawer={onDrawOpen} />
+        </Container>
+      </HStack>
+    </>
+  )
+}
 
 const query = graphql`
   query Navbar {
@@ -27,6 +80,10 @@ const query = graphql`
                 isExternal
               }
             }
+            menu_buttons {
+              label
+              url
+            }
             social_links {
               label
               url
@@ -63,51 +120,3 @@ const query = graphql`
     }
   }
 `
-
-export const Navbar: FC = () => {
-  const {
-    isOpen: isDrawerOpen,
-    onOpen: onDrawOpen,
-    onClose: onDrawerClose,
-  } = useDisclosure()
-
-  const { isOpen: showBanner, onClose: closeBanner } = useDisclosure({
-    defaultIsOpen: true,
-  })
-  const data = useStaticQuery(query)
-  const socialLinks =
-    data.allMarkdownRemark.edges[0].node.frontmatter.social_links
-  const navLinks = data.allMarkdownRemark.edges[0].node.frontmatter
-    .nav_items as LinkInfo[]
-
-  return (
-    <>
-      {showBanner && <WhatsNextBanner onClose={closeBanner} />}
-      <HStack
-        bg="gray.900"
-        h="90px"
-        borderBottom="1px solid"
-        borderColor="gray.700"
-        as="header"
-      >
-        <Container
-          maxW="1140px"
-          h="100%"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <ThresholdBrand />
-          <MobileDrawer
-            isOpen={isDrawerOpen}
-            onClose={onDrawerClose}
-            navLinks={navLinks}
-            socialLinks={socialLinks}
-          />
-          <DesktopNavLinks navLinks={navLinks} />
-          <SocialMediaLinks links={socialLinks} pl={8} />
-          <HamburgerButton openDrawer={onDrawOpen} />
-        </Container>
-      </HStack>
-    </>
-  )
-}
diff --git a/src/content/components/nav-bar.md b/src/content/components/nav-bar.md
@@ -12,22 +12,25 @@ nav_items:
         url: /earn/btc
       - label: Token Holder
         url: /earn/token-holder
+  - label: Build
+    isExternal: false
+    subitems:
+      - label: tBTC SDK
+        url: /build/tbtc-sdk
+      - label: Docs
+        url: https://docs.threshold.network/
+        isExternal: true
   - label: Governance
     url: /governance
   - label: Ecosystem
     url: /ecosystem
-  - label: News
+  - label: About
     subitems:
       - label: Press
         url: /press
       - label: Blog
         url: https://blog.threshold.network/
         isExternal: true
-  - label: About
-    subitems:
-      - label: Docs
-        url: https://docs.threshold.network/
-        isExternal: true
       - label: Contributors
         url: /about#contributors
       - label: FAQ
@@ -38,6 +41,9 @@ nav_items:
       - label: Brand Assets
         url: https://bit.ly/threshold-brand-assets
         isExternal: true
+menu_buttons:
+  - label: tBTC dApp
+    url: https://dashboard.threshold.network/tBTC
 social_links:
   - label: Twitter
     url: https://twitter.com/TheTNetwork
@@ -54,11 +60,6 @@ social_links:
     icon:
       image: /images/discord.svg
       alt: Threshold Discord
-  - label: Discourse
-    url: https://forum.threshold.network
-    icon:
-      image: /images/discourse-resources.svg
-      alt: Threshold Forum
   - label: GitHub
     url: https://github.com/threshold-network
     icon:

diff --git a/src/content/pages/build/index.md b/src/content/pages/build/index.md
@@ -0,0 +1,5 @@
+---
+template: build-page
+path: /build
+title: Build
+---