fix: add srcset for images on homepage

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -23,7 +23,7 @@ export default async function HomePage() {
   return (
     <>
       <Hero />
-      <div className="mt-3">
+      <div className="my-3">
         <Suspense>
           <HomePageContent />
         </Suspense>

components/hero.tsx

@@ -56,10 +56,11 @@ const Hero = () => {
             <Image
               src="/hero-image.jpeg"
               alt="Hero Image"
-              width={1247}
+              width={1103}
               height={626}
               priority
               className="h-full w-full object-cover object-center"
+              sizes="100vw"
             />
           </div>
           <div aria-hidden="true" className="absolute inset-0 bg-gray-900 opacity-60" />

components/page/category-preview.tsx

@@ -40,6 +40,7 @@ const CategoryPreview = async ({ block }: { block: Metaobject }) => {
                     title={block.title || 'Image Preview'}
                     fileId={contentBlock.preview_image as string}
                     className="h-full w-full object-cover object-center"
+                    sizes="(min-width: 1024px) 33vw, 100vw"
                   />
                 </Suspense>
               </div>

components/page/image-display.tsx

@@ -5,12 +5,13 @@ import { twMerge } from 'tailwind-merge';
 const ImageDisplay = async ({
   fileId,
   title,
-  className
+  className,
+  ...props
 }: {
   fileId: string;
   title: string;
   className?: string;
-}) => {
+} & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'>) => {
   const image = await getImage(fileId);
   return (
     <Image
@@ -19,6 +20,7 @@ const ImageDisplay = async ({
       width={image.width}
       height={image.height}
       className={twMerge('h-full w-full object-contain', className)}
+      {...props}
     />
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@9.1.2",
   "engines": {
     "node": ">=18",
     "pnpm": ">=7"