Adds a few sections to the home page

package.json

@@ -46,6 +46,7 @@
     "react-mailchimp-subscribe": "^2.1.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-youtube": "^10.1.0",
     "svgson": "^5.2.1",
     "typescript": "^4.4.3",
     "web-vitals": "^1.0.1"

src/content/components/announcement-banner.md

@@ -2,4 +2,4 @@
 template: announcement
 title: Announcement
 ---
-Maximize your BTC in DeFi by minting tBTC! <a href="https://blog.threshold.network/an-updated-timeline-for-the-launch-of-tbtc-v2/" target="_blank" rel="noopener noreferrer">Learn More</a>
+Maximize your BTC in DeFi by minting tBTC! <a href="https://blog.threshold.network/an-updated-timeline-for-the-launch-of-tbtc-v2/" target="_blank" rel="noopener noreferrer">Learn More</a>

src/content/pages/index.md

@@ -11,9 +11,33 @@ hero:
     - label: Pre Launch NFT
       url: https://galxe.com/Threshold/campaign/GCBKCUwT8Q
   image: /images/tbtc-dashboard.png
+whatIsThreshold:
+  title: What is Threshold?
+  description:
+    Threshold provides a suite of threshold cryptography products that
+    power user sovereignty on the public blockchain.
+  youtubeID: 8MzE_FG67Z8
+  buttons:
+    - label: Subscribe
+      url: https://www.youtube.com/@Threshold.Network
+      variant: EXTERNAL_OUTLINE
+tbtc:
+  rowReverse: false
+  title: Bridge BTC to Ethereum
+  description: tBTC is Threshold’s decentralized bridge to bring BTC to the
+    Ethereum network.
+  image: /images/tbtc-illustration.png
+  buttons:
+    - label: Stay Updated
+      url: https://twitter.com/TheTNetwork
+      variant: EXTERNAL_SOLID
+    - label: Learn More
+      url: /tbtc
+      variant: INTERNAL_OUTLINE
 stakerRole:
   title: Threshold Staking
-  description: Stakers escrow T tokens to run a node on the Threshold Network and
+  description:
+    Stakers escrow T tokens to run a node on the Threshold Network and
     earn rewards.
   image: /images/staking-threshold.png
   buttons:
@@ -89,7 +113,8 @@ harnessThePower:
         threshold cryptographic services without a central authority.
       image: /images/decentralized-icon.png
     - title: Secure
-      description: Splitting cryptographic operations across nodes increases security
+      description:
+        Splitting cryptographic operations across nodes increases security
         and availability and reduces trust assumptions. Threshold is
         [audited](/about#audits) by the best firms in the space.
       image: /images/secure-icon.png
@@ -113,7 +138,8 @@ joinTheCommunity:
   left:
     - label: Get involved
       title: Become a part of our community
-      description: Join our Discord server and our Telegram to get involved and stay
+      description:
+        Join our Discord server and our Telegram to get involved and stay
         up to date.
       buttons:
         - label: Discord
@@ -133,7 +159,8 @@ joinTheCommunity:
   right:
     - label: For Developers
       title: Learn more about the network
-      description: Learn more about the Threshold network by reading the documentation
+      description:
+        Learn more about the Threshold network by reading the documentation
         or visiting Github.
       buttons:
         - label: GitHub

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

@@ -0,0 +1,72 @@
+import React, { FC } from "react"
+import Youtube from "react-youtube"
+import {
+  PageSection,
+  ResponsiveStack,
+  SectionTextContainer,
+} from "../../../components/PageSection"
+import { BodyLg, H5 } from "../../../components"
+import { BoxProps, Stack } from "@chakra-ui/react"
+import useChakraBreakpoint from "../../../hooks/useChakraBreakpoint"
+import { FooterButton } from "../SectionTemplate"
+import {
+  ButtonType,
+  CmsButtonLink,
+} from "../../../components/Buttons/CmsButtonLink"
+
+export interface WhatIsThresholdProps extends BoxProps {
+  bgColor: string
+  title: string
+  description: string
+  youtubeID: string
+  buttons: FooterButton[]
+}
+
+const WhatIsThreshold: FC<WhatIsThresholdProps> = ({
+  title,
+  description,
+  youtubeID,
+  buttons,
+  ...props
+}) => {
+  const isMobile = useChakraBreakpoint("md")
+  const youtubeStyles = isMobile
+    ? {
+        margin: "20px auto",
+      }
+    : {}
+
+  return (
+    <PageSection {...props}>
+      <ResponsiveStack columnReverse spacing={16}>
+        <SectionTextContainer>
+          <H5>{title}</H5>
+          <BodyLg mt={10} color="gray.300">
+            {description}
+          </BodyLg>
+          <Stack mt={10} direction={{ base: "column", md: "row" }} spacing={8}>
+            {buttons.map((_: FooterButton, i) => (
+              <CmsButtonLink
+                key={_.label}
+                cmsVariant={_.variant as ButtonType}
+                url={_.url}
+              >
+                {_.label}
+              </CmsButtonLink>
+            ))}
+          </Stack>
+        </SectionTextContainer>
+        <Youtube
+          videoId={youtubeID}
+          style={youtubeStyles}
+          opts={{
+            width: 420,
+            height: 240,
+          }}
+        />
+      </ResponsiveStack>
+    </PageSection>
+  )
+}
+
+export default WhatIsThreshold

src/templates/home-page/index.tsx

@@ -7,10 +7,12 @@ import MigrationInfoSection from "./MigrationInfoSection"
 import HarnessThePower from "./HarnessThePower"
 import JoinTheCommunity from "./JoinTheCommunity"
 import ActiveCommunity from "./ActiveCommunity"
+import WhatIsThreshold from "./WhaIsThreshold"
 
 const SplashPageTemplate: FC<any> = ({ data }) => {
   const {
     hero,
+    whatIsThreshold,
     stakerRole,
     lpRole,
     btcRole,
@@ -22,13 +24,13 @@ const SplashPageTemplate: FC<any> = ({ data }) => {
   } = data.markdownRemark.frontmatter
   const proposals = data.allProposals
 
-
   return (
     <>
       <Hero {...hero} />
+      <WhatIsThreshold {...whatIsThreshold} bgColor="gray.900" />
+      <SectionTemplate {...btcRole} bgColor="#181D22" />
       <SectionTemplate {...stakerRole} bgColor="gray.900" />
       <SectionTemplate {...lpRole} bgColor="#181D22" />
-      <SectionTemplate {...btcRole} bgColor="#0A0C0F" />
       <SectionTemplate {...tokenHolderRole} bgColor="#161A1F" />
       <TakeTheQuiz topBgColor="#161A1F" bottomBgColor="#181D22" />
       <MigrationInfoSection {...migrationInfo} bgColor="#181D22" />
@@ -62,6 +64,16 @@ export const query = graphql`
             }
           }
         }
+        whatIsThreshold {
+          title
+          description
+          youtubeID
+          buttons {
+            label
+            url
+            variant
+          }
+        }
         stakerRole {
           rowReverse
           title

static/admin/config.yml

@@ -77,6 +77,66 @@ collections:
                       { label: URL, name: url, widget: string },
                     ],
                 }
+          - label: "What is Threshold"
+            name: "whatIsThreshold"
+            widget: "object"
+            collapsed: true
+            fields:
+              - {
+                  label: "Title",
+                  name: "title",
+                  widget: "string",
+                  minimal: true,
+                }
+              - {
+                  label: "Description",
+                  name: "description",
+                  widget: "string",
+                  required: false,
+                }
+              - {
+                  label: "Youtube ID",
+                  name: "youtubeID",
+                  widget: "string",
+                  required: true,
+                }
+              - {
+                  label: "Buttons",
+                  name: "buttons",
+                  widget: "list",
+                  allow_add: true,
+                  required: false,
+                  fields:
+                    [
+                      { label: Label, name: label, widget: string },
+                      { label: URL, name: url, widget: string },
+                      {
+                        label: Variant,
+                        name: variant,
+                        widget: select,
+                        required: true,
+                        options:
+                          [
+                            {
+                              label: "External Solid",
+                              value: "EXTERNAL_SOLID",
+                            },
+                            {
+                              label: "Internal Solid",
+                              value: "INTERNAL_SOLID",
+                            },
+                            {
+                              label: "External Outline",
+                              value: "EXTERNAL_OUTLINE",
+                            },
+                            {
+                              label: "Internal Outline",
+                              value: "INTERNAL_OUTLINE",
+                            },
+                          ],
+                      },
+                    ],
+                }
           - label: "Staker Role"
             name: "stakerRole"
             widget: "object"

yarn.lock

@@ -8631,7 +8631,7 @@ date-fns@^2.25.0:
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
-debug@2, [email protected], debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
+debug@2, [email protected], debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -10178,7 +10178,7 @@ [email protected], extract-files@^9.0.0:
   resolved "https://registry.npmjs.org/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
   integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -14041,6 +14041,11 @@ load-bmfont@^1.3.1, load-bmfont@^1.4.0:
     xhr "^2.0.1"
     xtend "^4.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -17673,7 +17678,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -18484,6 +18489,15 @@ react-window@^1.8.5:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
+react-youtube@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5"
+  integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.8.1"
+    youtube-player "5.5.2"
+
 react@^16.8.4:
   version "16.14.0"
   resolved "https://registry.npmjs.org/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -19631,6 +19645,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -22562,6 +22581,15 @@ yoga-layout-prebuilt@^1.10.0:
   dependencies:
     "@types/yoga-layout" "1.9.2"
 
+[email protected]:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"
+
 yurnalist@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/yurnalist/-/yurnalist-2.1.0.tgz#44cf7ea5a33a8fab4968cc8c2970489f93760902"