Merge pull request #191 from ethereum/page-hero-action-card

PageHero & ActionCard image refactors

Author: corwintines

src/components/ActionCard.tsx

@@ -1,3 +1,4 @@
+import { StaticImageData } from "next/image"
 import type { ReactNode } from "react"
 import {
   Box,
@@ -10,7 +11,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import { Image, type ImageProps } from "@/components/Image"
+import { Image } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
@@ -30,7 +31,8 @@ export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
   children?: ReactNode
   to: string
   alt?: string
-  image: ImageProps["src"]
+  image: StaticImageData
+  imageWidth?: number
   title: ReactNode
   description?: ReactNode
   className?: string
@@ -42,6 +44,7 @@ const ActionCard = ({
   to,
   alt,
   image,
+  imageWidth = 220,
   title,
   description,
   children,
@@ -76,7 +79,8 @@ const ActionCard = ({
       >
         <Image
           src={image}
-          width={220}
+          width={imageWidth}
+          maxH="full"
           alt={alt || ""}
           style={{ objectFit: "cover" }}
         />

src/components/Hero/HomeHero/index.tsx

@@ -17,6 +17,7 @@ const HomeHero = ({ heroImg }: HomeHeroProps) => {
         <Image
           src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
+          sizes="100vw"
           w="full"
           h="full"
           priority

src/components/PageHero.tsx

@@ -155,7 +155,7 @@ const PageHero = ({
       >
         <Image
           src={image}
-          sizes="100%"
+          sizes="(max-width: 992px) 100vw, 50vw"
           style={{
             width: "100%",
             height: "auto",

src/pages/community.tsx

@@ -304,6 +304,7 @@ const CommunityPage = () => {
                 description={card.description}
                 to={card.to}
                 image={card.image}
+                imageWidth={320}
                 alt={card.alt}
               />
             ))}

src/pages/index.tsx

@@ -364,6 +364,7 @@ const HomePage = ({
                 alt={card.alt}
                 to={card.to}
                 image={card.image}
+                imageWidth={320}
               />
             ))}
           </CardContainer>
@@ -572,6 +573,7 @@ const HomePage = ({
                 alt={tout.alt}
                 to={tout.to}
                 image={tout.image}
+                imageWidth={320}
                 boxShadow={cardBoxShadow}
               />
             )