Merge pull request #11615 from ethereum/quizzes-hero

Update quizzes home hero, use new illustration

Author: corwintines

src/assets/heroes/quizzes-hub-hero.png

@@ -5,10 +5,10 @@ import { useTranslation } from "gatsby-plugin-react-i18next"
 import { FaGithub } from "react-icons/fa"
 
 import ButtonLink from "../components/Buttons/ButtonLink"
-import PageHero from "../components/PageHero"
 import PageMetadata from "../components/PageMetadata"
 import Translation from "../components/Translation"
 import FeedbackCard from "../components/FeedbackCard"
+import HubHero from "../components/Hero/HubHero"
 import QuizWidget from "../components/Quiz/QuizWidget"
 import QuizzesList from "../components/Quiz/QuizzesList"
 import QuizzesModal from "../components/Quiz/QuizzesModal"
@@ -65,14 +65,6 @@ const QuizzesHubPage = ({ data }: PageProps<Queries.QuizzesHubPageQuery>) => {
 
   const { t } = useTranslation()
 
-  const heroContent = {
-    title: <Translation id="quizzes-title" />,
-    header: <Translation id="test-your-knowledge" />,
-    subtitle: <Translation id="quizzes-subtitle" />,
-    image: getImage(data.doge)!,
-    alt: t("quizzes-title"),
-  }
-
   const contextState = {
     status: quizStatus,
     quizKey: currentQuiz,
@@ -90,9 +82,13 @@ const QuizzesHubPage = ({ data }: PageProps<Queries.QuizzesHubPageQuery>) => {
         title={t("quizzes-title")}
         description={t("quizzes-subtitle")}
       />
-      <Box w="100%" bg="layer2Gradient" pb={8}>
-        <PageHero content={heroContent} isReverse />
-      </Box>
+
+      <HubHero
+        heroImgSrc={getImage(data.heroImage)!}
+        header={t("test-your-knowledge")}
+        title={t("quizzes-title")}
+        description={t("quizzes-subtitle")}
+      />
 
       <QuizzesHubContext.Provider value={contextState}>
         <QuizzesModal isOpen={isOpen} onClose={onClose}>
@@ -223,14 +219,9 @@ export const query = graphql`
         }
       }
     }
-    doge: file(relativePath: { eq: "doge-computer.png" }) {
+    heroImage: file(relativePath: { eq: "heroes/quizzes-hub-hero.png" }) {
       childImageSharp {
-        gatsbyImageData(
-          width: 624
-          layout: CONSTRAINED
-          placeholder: BLURRED
-          quality: 100
-        )
+        gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
       }
     }
   }