fix: add srcset for images on homepage

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

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}
     />
   );
 };