Merge pull request #106 from threshold-network/taco-section

Add Taco section in home page

## Description

Add Taco Section to the website home page.

- Add taco section in home page
 - 0f0ac42

Figma's design prototype: 
https://www.figma.com/file/AFYQHD8qWxJwNjryGvelVC/Taco-Section?type=design&node-id=61-1235&mode=design&t=H8cV1TsjluQLWo1j-0

## 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

gatsby-node.ts

@@ -100,6 +100,7 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
     }
     type Frontmatter {
       harnessThePower: Subitems
+      tacoRole: Subitems
     }
     type ProposalContent {
       html: String

src/components/InfoColumnsStack.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react"
+import { HStack, Stack, Square, StackDivider } from "@chakra-ui/react"
+import { BodyMd, LabelMd } from "./Typography"
+import { Image } from "."
+import { SubItem } from "../templates/home-page/InfoColumnsSection"
+import { ResponsiveStack } from "./PageSection"
+import useChakraBreakpoint from "../hooks/useChakraBreakpoint"
+
+const InfoColumnsStack: FC<{
+  subitems: SubItem[]
+}> = ({ subitems }) => {
+  const isMobile = useChakraBreakpoint("md")
+
+  return (
+    <ResponsiveStack
+      spacing="32px !important"
+      mt={32}
+      divider={isMobile ? <StackDivider bg="gray.700" /> : undefined}
+    >
+      {subitems.slice(0, 3).map((_: SubItem) => (
+        <Stack
+          maxW={{ base: "100%", md: "300px" }}
+          w="full"
+          direction={{
+            base: "row",
+            md: "column",
+          }}
+          spacing={8}
+        >
+          <Image w="128px" h="128px" {..._.image} />
+          <Stack direction="column">
+            <HStack>
+              <Square bg="brand.500" w="20px" h="20px" />
+              <LabelMd textTransform="uppercase">{_.title}</LabelMd>
+            </HStack>
+            <BodyMd
+              mt="1rem"
+              as="div"
+              dangerouslySetInnerHTML={{ __html: _.description }}
+            />
+          </Stack>
+        </Stack>
+      ))}
+    </ResponsiveStack>
+  )
+}
+
+export default InfoColumnsStack

src/content/pages/index.md

@@ -91,6 +91,27 @@ migrationInfo:
       variant: EXTERNAL_OUTLINE
   bgColor: "#141414"
   rowReverse: false
+tacoRole:
+  title: Build uncensorable e2ee into your dapp
+  description: TACo is the only end-to-end encryption plugin that is end-to-end decentralized
+  image: /images/taco-section-image.svg
+  buttons:
+    - label: Read the docs
+      url: https://docs.threshold.network/applications/threshold-access-control
+      variant: EXTERNAL_SOLID
+    - label: Quickstart
+      url: https://docs.threshold.network/app-development/threshold-access-control-tac/quickstart-testnet
+      variant: EXTERNAL_OUTLINE
+  subitems:
+    - title: Easy to integrate
+      description: TACo makes access control easy with an intuitive API, flexible architecture, and a free-to-use Testnet. All you need is a use case that involves private data, and where trusting an intermediary won't fly.
+      image: /images/decentralized-icon.png
+    - title: Day One Decentralized
+      description: Access to data encrypted via TACo is managed by groups of independent Threshold nodes, from the very first byte. There's no 'temporary phase' where you trust the developers not to decrypt sensitive data.
+      image: /images/secure-icon.png
+    - title: Secure & redundant
+      description: Access control groups are sampled from a live, battle-tested & well-collateralized network. TACo is being integrated into apps handling hyper-sensitive payloads like seed phrases & health data.
+      image: /images/private-icon.png
 harnessThePower:
   title: Harness the power of Threshold
   description: Threshold leverages threshold cryptography to protect digital

src/templates/home-page/InfoColumnsSection.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react"
+import { BoxProps } from "@chakra-ui/react"
+import { ImageProps } from "../../components"
+import SectionTemplate from "./SectionTemplate"
+import InfoColumnsStack from "../../components/InfoColumnsStack"
+
+export interface SubItem {
+  description: string
+  image: ImageProps
+  title: string
+}
+
+interface ButtonInfo {
+  label: string
+  url: string
+  variant: string
+}
+
+interface InfoColumnsSectionProps extends BoxProps {
+  buttons: ButtonInfo[]
+  description: string
+  subitems: SubItem[]
+  title: string
+  bgColor: string
+  image?: ImageProps
+}
+
+const InfoColumnsSection: FC<InfoColumnsSectionProps> = ({
+  title,
+  description,
+  subitems,
+  buttons,
+  image,
+  bgColor,
+  ...boxProps
+}) => {
+  return (
+    <SectionTemplate
+      title={title}
+      description={description}
+      image={image}
+      buttons={buttons}
+      bgColor={bgColor}
+      {...boxProps}
+    >
+      <InfoColumnsStack subitems={subitems} />
+    </SectionTemplate>
+  )
+}
+
+export default InfoColumnsSection

src/templates/home-page/index.tsx

@@ -3,13 +3,14 @@ import { graphql } from "gatsby"
 import Hero from "./Hero"
 import SectionTemplate from "./SectionTemplate"
 import MigrationInfoSection from "./MigrationInfoSection"
-import HarnessThePower from "./HarnessThePower"
 import JoinTheCommunity from "./JoinTheCommunity"
 import ActiveCommunity from "./ActiveCommunity"
+import InfoColumnsSection from "./InfoColumnsSection"
 
 const SplashPageTemplate: FC<any> = ({ data }) => {
   const {
     hero,
+    tacoRole,
     bugBounty,
     stakerRole,
     lpRole,
@@ -24,12 +25,13 @@ const SplashPageTemplate: FC<any> = ({ data }) => {
   return (
     <>
       <Hero {...hero} />
+      <InfoColumnsSection {...tacoRole} bgColor="#161A1F" />
       <SectionTemplate {...bugBounty} />
       <SectionTemplate {...stakerRole} bgColor="gray.900" />
       <SectionTemplate {...lpRole} bgColor="#181D22" />
       <SectionTemplate {...tokenHolderRole} bgColor="#161A1F" />
       <MigrationInfoSection {...migrationInfo} bgColor="#181D22" />
-      <HarnessThePower {...harnessThePower} />
+      <InfoColumnsSection {...harnessThePower} bgColor="gray.800" />
       <ActiveCommunity {...activeCommunity} proposals={proposals} />
       <JoinTheCommunity {...joinTheCommunity} />
     </>
@@ -162,6 +164,39 @@ export const query = graphql`
             variant
           }
         }
+        tacoRole {
+          title
+          subitems {
+            description(from: "description")
+            title
+            image {
+              id
+              relativePath
+              internal {
+                mediaType
+              }
+              childImageSharp {
+                gatsbyImageData(width: 200)
+              }
+            }
+          }
+          description
+          image {
+            id
+            relativePath
+            internal {
+              mediaType
+            }
+            childImageSharp {
+              gatsbyImageData(width: 200)
+            }
+          }
+          buttons {
+            label
+            url
+            variant
+          }
+        }
         harnessThePower {
           title
           subitems {