fix hero images

Author: pettinarip

src/components/Image.tsx

@@ -26,6 +26,7 @@ const imageProps: (keyof NextImageProps)[] = [
   "referrerPolicy",
   "sizes",
   "src",
+  "style",
   "useMap",
 ]
 

src/layouts/Roadmap.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Center,
   Flex,
   Show,
   SimpleGrid,
@@ -50,7 +51,7 @@ const HeroContainer = (props: ChildOnlyProp) => (
 )
 
 const TitleCard = (props: ChildOnlyProp) => (
-  <Flex w="full" p={8} direction="column" justify="flex-start" {...props} />
+  <Flex p={8} direction="column" justify="flex-start" {...props} />
 )
 
 // Roadmap layout components
@@ -130,10 +131,15 @@ export const RoadmapLayout: React.FC<IProps> = ({
   return (
     <Box position="relative">
       <HeroContainer>
-        <Flex w="100%" flexDirection={{ base: "column", md: "row" }}>
+        <Flex
+          w="full"
+          flexDirection={{ base: "column", lg: "row" }}
+          justify="space-between"
+        >
           <TitleCard>
             {/* TODO: Double check this slug works */}
-            <Breadcrumbs slug={slug} /> <Title>{frontmatter.title}</Title>
+            <Breadcrumbs slug={slug} mb="8" />
+            <Title>{frontmatter.title}</Title>
             <OldText>{frontmatter.description}</OldText>
             {frontmatter?.buttons && (
               // FIXME: remove the `ul` override once removed the corresponding
@@ -166,26 +172,16 @@ export const RoadmapLayout: React.FC<IProps> = ({
               isMobile
             />
           </TitleCard>
-          <Image
-            src={frontmatter.image}
-            alt={frontmatter.alt ?? ""}
-            style={{ objectFit: "contain" }}
-            alignSelf={{
-              base: "center",
-              lg: "normal",
-            }}
-            bgRepeat="no-repeat"
-            flex="1 1 100%"
-            right={0}
-            bottom={0}
-            width={600}
-            height={336}
-            overflow="initial"
-            maxW={{
-              base: "538px",
-              lg: "full",
-            }}
-          />
+          <Center>
+            <Image
+              src={frontmatter.image}
+              alt={frontmatter.alt ?? ""}
+              style={{ objectFit: "contain" }}
+              width={700}
+              height={345}
+              quality="100"
+            />
+          </Center>
         </Flex>
       </HeroContainer>
       <Page dir={isRightToLeft ? "rtl" : "ltr"}>

src/layouts/Staking.tsx

@@ -272,22 +272,12 @@ export const StakingLayout: React.FC<IProps> = ({
           />
         </Flex>
         <Image
-          flex="1 1 100%"
-          bgRepeat="no-repeat"
-          right={0}
-          bottom={0}
-          maxW={{ base: "min(400px, 98%)", lg: "400px" }}
-          width={400}
-          height={340}
-          maxH={{ base: "340px", lg: "none" }}
-          boxSize={{ base: "full", lg: "auto" }}
-          overflow={{ base: "initial", lg: "visible" }}
-          alignSelf={{ base: "center", lg: "auto" }}
           src={frontmatter.image}
           alt={frontmatter.alt || ""}
-          style={{
-            objectFit: "contain",
-          }}
+          style={{ objectFit: "contain" }}
+          width={400}
+          height={340}
+          quality="100"
         />
       </HeroContainer>
       <Page dir={isRightToLeft ? "rtl" : "ltr"}>

src/layouts/Upgrade.tsx

@@ -11,6 +11,7 @@ import {
   Show,
   Text,
   useToken,
+  Center,
 } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, Lang } from "@/lib/types"
@@ -193,17 +194,14 @@ export const UpgradeLayout: React.FC<IProps> = ({
         </TitleCard>
         {frontmatter.image && (
           <Image
-            flex="1 1 100%"
-            maxW="min(100%, 816px)"
-            style={{ objectFit: "cover" }}
-            alignSelf="center"
-            right={0}
-            bottom={0}
-            width={600}
-            height={600}
-            overflow="initial"
             src={frontmatter.image}
             alt={frontmatter.alt}
+            width={816}
+            height={525}
+            style={{ objectFit: "cover" }}
+            quality="100"
+            flex={{ base: "1 1 100%", md: "none" }}
+            alignSelf={{ base: "center", md: "flex-end" }}
           />
         )}
       </HeroContainer>

src/layouts/UseCases.tsx

@@ -38,12 +38,11 @@ const HeroContainer = (props: ChildOnlyProp) => (
   <Flex
     bg="cardGradient"
     boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-    direction={{ base: "column-reverse", lg: "row" }}
-    justify="end"
-    minHeight={{ base: "800px", lg: "608px" }}
+    flexDirection={{ base: "column-reverse", lg: "row" }}
+    justifyContent="flex-end"
+    minHeight="608px"
     maxHeight={{ base: "full", lg: "608px" }}
     width="full"
-    position="relative"
     {...props}
   />
 )
@@ -60,9 +59,10 @@ const TitleCard = (props: ChildOnlyProp) => {
       boxShadow={{ lg: boxShadow }}
       flexDirection="column"
       maxWidth={{ base: "full", lg: "container.sm" }}
+      mt={{ base: 0, lg: 12 }}
       zIndex="docked"
       p={8}
-      position="absolute"
+      position={{ base: "relative", lg: "absolute" }}
       top={{ base: "unset", lg: 24 }}
       left={{ base: 0, lg: 24 }}
       bottom={{ base: 0, lg: "unset" }}
@@ -209,15 +209,20 @@ export const UseCasesLayout: React.FC<IProps> = ({
           </Box>
         </TitleCard>
         <Image
-          position="absolute"
-          alignSelf={{ base: "center", lg: "normal" }}
-          top={0}
-          bottom={0}
-          style={{ objectFit: "cover" }}
-          width={1000}
-          height={610}
           src={frontmatter.image}
           alt={frontmatter.alt || ""}
+          width={1200}
+          height={610}
+          style={{ objectFit: "cover" }}
+          quality="100"
+          alignSelf={{
+            base: "center",
+            lg: "normal",
+          }}
+          maxH={{
+            base: "340px",
+            lg: "full",
+          }}
           maxW={{
             base: useCase === "defi" ? "full" : "min(405px, 98%)",
             lg: