Merge pull request #11549 from ethereum/communityHero

add new community hub image and hero

Author: pettinarip

src/assets/heroes/community-hero.png

@@ -17,9 +17,9 @@ import Card from "../components/Card"
 import ButtonLink, {
   IProps as IButtonLinkProps,
 } from "../components/Buttons/ButtonLink"
+import { HubHero, type HubHeroProps } from "../components/Hero"
 import PageMetadata from "../components/PageMetadata"
 import Translation from "../components/Translation"
-import PageHero from "../components/PageHero"
 import FeedbackCard from "../components/FeedbackCard"
 
 import GatsbyImage from "../components/GatsbyImage"
@@ -143,17 +143,9 @@ interface IGetInvolvedCard {
 
 const CommunityPage = ({
   data,
-  location,
 }: PageProps<Queries.CommunityPageQuery, Context>) => {
   const { t } = useTranslation()
   const theme = useTheme()
-  const heroContent = {
-    title: t("page-community-hero-title"),
-    header: t("page-community-hero-header"),
-    subtitle: t("page-community-hero-subtitle"),
-    image: getImage(data.enterprise)!,
-    alt: t("page-community-hero-alt"),
-  }
 
   const cards: Array<ICard> = [
     {
@@ -204,13 +196,20 @@ const CommunityPage = ({
     },
   ]
 
+  const heroContent: HubHeroProps = {
+    title: t("page-community-hero-title"),
+    header: t("page-community-hero-header"),
+    description: t("page-community-hero-subtitle"),
+    heroImgSrc: getImage(data.heroImage)!,
+  }
+
   return (
     <Page>
       <PageMetadata
         title={t("page-community-meta-title")}
         description={t("page-community-meta-description")}
       />
-      <PageHero isReverse content={heroContent} />
+      <HubHero {...heroContent} />
       <Divider />
       <Flex
         bg="homeBoxTurquoise"
@@ -491,10 +490,10 @@ export const query = graphql`
         }
       }
     }
-    enterprise: file(relativePath: { eq: "enterprise-eth.png" }) {
+    heroImage: file(relativePath: { eq: "heroes/community-hero.png" }) {
       childImageSharp {
         gatsbyImageData(
-          width: 624
+          width: 1504
           layout: CONSTRAINED
           placeholder: BLURRED
           quality: 100