Merge pull request #126 from threshold-network/add-cta-notice-in-hero…

…-section

Add cta notice in hero section

gatsby-config.ts

@@ -66,7 +66,7 @@ const plugins: Array<PluginRef> = [
   {
     resolve: "gatsby-plugin-netlify-cms",
     options: {
-      modulePath: path.resolve("/src/cms/cms.ts"),
+      modulePath: path.resolve("src/cms/cms.ts"),
     },
   },
 ]

src/components/CTANotice.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { Box, Link, Text } from "@chakra-ui/react"
+import Card from "./Card"
+
+interface CTANoticeProps {
+  label: string
+  url: string
+  description: string
+}
+
+const CTANotice: React.FC<CTANoticeProps> = ({ label, url, description }) => {
+  return (
+    <Card
+      display="flex"
+      alignItems="center"
+      gap="12px"
+      borderRadius="28px"
+      w="fit-content"
+      py="7px"
+      px="15px"
+      _hover={{
+        cursor: "pointer",
+        bg: "blackAlpha.400",
+        textDecoration: "none",
+      }}
+      as={Link}
+      href={url}
+      target="_blank"
+    >
+      <Box
+        fontSize="15px"
+        px="12px"
+        py="1px"
+        borderRadius="28px"
+        background="linear-gradient(to bottom left, #BD30FF 0%, #7D00FF 100%)"
+      >
+        {label}
+      </Box>
+      <Text fontSize="15px" lineHeight="20px">
+        {description}
+      </Text>
+    </Card>
+  )
+}
+
+export default CTANotice

src/content/components/announcement-banner.md

@@ -3,4 +3,4 @@ template: announcement
 title: Announcement
 ---
 
-Maximize your BTC in DeFi. <a href="https://dashboard.threshold.network/tBTC/mint" target="_blank" rel="noopener noreferrer">Mint tBTC now</a> and use tBTC as collateral for <a href="https://thresholdusd.org/" target="_blank" rel="noopener noreferrer">thUSD stablecoin</a>
+Maximize your BTC in DeFi. <a href="https://dashboard.threshold.network/tBTC/mint" target="_blank" rel="noopener noreferrer">Mint tBTC now</a> and use tBTC as collateral for <a href="https://thresholdusd.org/" target="_blank" rel="noopener noreferrer">thUSD stablecoin</a>

src/content/pages/index.md

@@ -5,6 +5,10 @@ seoTitle: Threshold Network
 hero:
   title: Bridge your Bitcoin and start earning.
   body: Deposit and redeem BTC in DeFi without intermediaries using Threshold's tBTC.
+  ctaNotice:
+    label: New!
+    url: https://app.aave.com/reserve-overview/?underlyingAsset=0x18084fba666a33d37592fa2633fd49a74dd93a88&marketName=proto_mainnet_v3
+    description: tBTC is live on Aave. Another opportunity to put your tBTC to work now! 
   ctaButtons:
     - label: Mint tBTC
       url: https://dashboard.threshold.network/tBTC

src/templates/home-page/Hero/index.tsx

@@ -14,6 +14,13 @@ import {
 import useQuery from "../../../hooks/useQuery"
 import { exchangeAPI, formatUnits } from "../../../utils"
 import { useTTokenPrice } from "../../../contexts/TokenPriceContext"
+import CTANotice from "../../../components/CTANotice"
+
+export interface CTANotice {
+  label: string
+  url: string
+  description: string
+}
 
 const heroButtonProps = {
   h: "auto",
@@ -25,9 +32,10 @@ const heroButtonProps = {
 const Hero: FC<{
   title: string
   body: string
+  ctaNotice: CTANotice
   ctaButtons: any
   image: ImageProps
-}> = ({ title, body, ctaButtons, image }) => {
+}> = ({ title, body, ctaNotice, ctaButtons, image }) => {
   const {
     isFetching: isTotalStakedFetching,
     data: totalStakedData,
@@ -88,6 +96,7 @@ const Hero: FC<{
         <Box display="flex" flexDirection={{ base: "column", lg: "row" }}>
           <Box>
             <Stack spacing={8}>
+              <CTANotice {...ctaNotice} />
               <H1 maxW="720px" pr={20}>
                 {title}
               </H1>

src/templates/home-page/index.tsx

@@ -46,6 +46,11 @@ export const query = graphql`
         hero {
           title
           body
+          ctaNotice {
+            label
+            url
+            description
+          }
           ctaButtons {
             label
             url

static/admin/config.yml

@@ -65,6 +65,17 @@ collections:
                   widget: file,
                   media_library: { config: { multiple: false } },
                 }
+              - {
+                  label: "CTA Notice",
+                  name: "ctaNotice",
+                  widget: "object",
+                  fields:
+                    [
+                      { label: Label, name: label, widget: string },
+                      { label: URL, name: url, widget: string },
+                      { label: Description, name: description, widget: string },
+                    ],
+                }
               - {
                   label: "CTA Buttons",
                   name: "ctaButtons",