fix: react-doctor → 64/100 — add sizes to 12 next/image, add htmlFor/id to 202 label/input pairs, add aria-label to 5 icon links

src/components/storefront/CinematicShowcase.tsx

@@ -70,6 +70,7 @@ function MorphingProductCard({
               src={product.imageUrl}
               alt={product.name}
               fill
+              sizes="100vw"
               className="object-cover"
             />
           )}

src/components/storefront/ProductCard.tsx

@@ -203,6 +203,7 @@ export default function ProductCard({
               src={imageUrl}
               alt={name}
               fill
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
               style={{ objectFit: "cover" }}
               className={`transition-transform duration-500 ease-out group-hover:scale-105 ${isLoading ? "opacity-0" : "opacity-100"}`}
               onLoad={() => setIsLoading(false)}

src/components/storefront/StorefrontFooter.tsx

@@ -88,11 +88,11 @@ export default function StorefrontFooter({
             <div className="md:col-span-1">
               {logoUrlDark ? (
                 <span className="relative inline-block h-8 w-[140px] mb-5">
-                  <Image src={logoUrlDark} alt={brandName} fill style={{ objectFit: "contain", objectPosition: "left" }} />
+                  <Image src={logoUrlDark} alt={brandName} fill sizes="160px" style={{ objectFit: "contain", objectPosition: "left" }} />
                 </span>
               ) : logoUrl ? (
                 <span className="relative inline-block h-8 w-[140px] mb-5">
-                  <Image src={logoUrl} alt={brandName} fill style={{ objectFit: "contain", objectPosition: "left" }} />
+                  <Image src={logoUrl} alt={brandName} fill sizes="160px" style={{ objectFit: "contain", objectPosition: "left" }} />
                 </span>
               ) : (
                 <p className="text-lg font-bold text-stone-950 mb-3">{brandName}</p>

src/components/storefront/StorefrontHeader.tsx

@@ -78,11 +78,11 @@ export default function StorefrontHeader({
         <Link href={`/${brandSlug}`} className="flex items-center gap-3 group">
           {logoUrlDark ? (
             <span className="relative h-9 sm:h-10 w-[140px] sm:w-[160px]">
-              <Image src={logoUrlDark} alt={brandName} fill className="object-contain object-left transition-transform duration-300 group-hover:scale-[1.02]" />
+              <Image src={logoUrlDark} alt={brandName} fill sizes="160px" className="object-contain object-left transition-transform duration-300 group-hover:scale-[1.02]" />
             </span>
           ) : logoUrl ? (
             <span className="relative h-9 sm:h-10 w-[140px] sm:w-[160px]">
-              <Image src={logoUrl} alt={brandName} fill className="object-contain object-left transition-transform duration-300 group-hover:scale-[1.02]" />
+              <Image src={logoUrl} alt={brandName} fill sizes="160px" className="object-contain object-left transition-transform duration-300 group-hover:scale-[1.02]" />
             </span>
           ) : (
             <span className="text-lg sm:text-xl font-bold tracking-tight text-stone-800 group-hover:text-stone-900 transition-colors">

src/components/storefront/TuxedoVideoHero.tsx

@@ -239,6 +239,7 @@ export default function TuxedoVideoHero({
                   src={logoSrc}
                   alt="Olathe Sweet"
                   fill
+                  sizes="(max-width: 1024px) 80vw, 50vw"
                   style={{ objectFit: "contain" }}
                   className="drop-shadow-2xl"
                   priority