Merge pull request #8805 from ethereum/staking-survery-banner

Adds staking survey banner to staking pages [Closes #8654]

Author: corwintines

src/components/Staking/StakingSurveyBanner.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import BannerNotification from "../BannerNotification"
+import Link from "../Link"
+import { Text } from "@chakra-ui/react"
+
+const StakingSurveyBanner: React.FC = () => (
+  <BannerNotification shouldShow>
+    <Text m={0} textAlign="center">
+      Researchers with EthStaker and the Ethereum Foundation are looking for
+      anonymous feedback from stakers.{" "}
+      <Link to="https://stakingsurvey.paperform.co/">
+        Take a quick survey here
+      </Link>
+    </Text>
+  </BannerNotification>
+)
+
+export default StakingSurveyBanner

src/pages/staking/index.tsx

@@ -20,6 +20,7 @@ import {
 import FeedbackCard from "../../components/FeedbackCard"
 import ExpandableCard from "../../components/ExpandableCard"
 import StakingStatsBox from "../../components/Staking/StakingStatsBox"
+import StakingSurveyBanner from "../../components/Staking/StakingSurveyBanner"
 import StakingHierarchy from "../../components/Staking/StakingHierarchy"
 import StakingHomeTableOfContents from "../../components/Staking/StakingHomeTableOfContents"
 import StakingCommunityCallout from "../../components/Staking/StakingCommunityCallout"
@@ -344,6 +345,7 @@ const StakingPage = ({
         description={translateMessageId("page-staking-meta-description", intl)}
       />
       <HeroStatsWrapper>
+        <StakingSurveyBanner />
         <PageHero content={heroContent} />
         <StakingStatsBox />
       </HeroStatsWrapper>

src/templates/staking.tsx

@@ -46,6 +46,7 @@ import StakingHowSoloWorks from "../components/Staking/StakingHowSoloWorks"
 import StakingConsiderations from "../components/Staking/StakingConsiderations"
 import StakingCommunityCallout from "../components/Staking/StakingCommunityCallout"
 import StakingGuides from "../components/Staking/StakingGuides"
+import StakingSurveyBanner from "../components/Staking/StakingSurveyBanner"
 
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
 import { Context } from "../types"
@@ -403,6 +404,7 @@ const StakingPage = ({
 
   return (
     <Container>
+      <StakingSurveyBanner />
       <HeroContainer>
         <TitleCard>
           <Breadcrumbs slug={location.pathname} />