components/artists-section.tsx

@@ -108,24 +108,20 @@ export function ArtistsSection() {
                   <div className={`relative w-full ${aspectFor(i)} overflow-hidden rounded-md border border-white/10 bg-black`}>
                     {/* Imagery */}
                     <div className="absolute inset-0 artist-image">
-                      <Image
+                      <img
                         src={artist.workImages?.[0] || "/placeholder.svg"}
                         alt={`${artist.name} tattoo work`}
-                        fill
-                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                        className="object-cover"
+                        className="w-full h-full object-cover"
                         loading="lazy"
                       />
-                      <div className="absolute inset-0 bg-black/30 z-10"></div>
+                      <div className="absolute inset-0 bg-black/30"></div>
 
                       {/* Portrait with feathered mask */}
-                      <div className="absolute left-0 top-0 w-3/5 h-full pointer-events-none z-20">
-                        <Image
+                      <div className="absolute left-0 top-0 w-3/5 h-full pointer-events-none">
+                        <img
                           src={artist.faceImage || "/placeholder.svg"}
                           alt={`${artist.name} portrait`}
-                          fill
-                          sizes="(max-width: 640px) 60vw, (max-width: 1024px) 30vw, 20vw"
-                          className="object-cover"
+                          className="w-full h-full object-cover"
                           style={{
                             maskImage: "linear-gradient(to right, black 0%, black 70%, transparent 100%)",
                             WebkitMaskImage: "linear-gradient(to right, black 0%, black 70%, transparent 100%)",

components/hero-section.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Image from "next/image"
 
 import { useFeatureFlag } from "@/components/feature-flags-provider"
 import { Button } from "@/components/ui/button"
@@ -30,20 +29,13 @@ export function HeroSection() {
       {/* Background Layer - Slowest parallax */}
       <div
         ref={parallax.background.ref}
-        className="absolute inset-0 will-change-transform"
-        style={parallax.background.style}
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat will-change-transform"
+        style={{
+          backgroundImage: "url(/united-logo-full.jpg)",
+          ...parallax.background.style,
+        }}
         aria-hidden="true"
-      >
-        <Image
-          src="/united-logo-full.jpg"
-          alt=""
-          fill
-          priority
-          quality={90}
-          sizes="100vw"
-          className="object-cover object-center"
-        />
-      </div>
+      />
       
       {/* Midground Layer - Overlay with subtle parallax */}
       <div

next.config.mjs

@@ -7,18 +7,9 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   images: {
-    unoptimized: false,
-    formats: ['image/avif', 'image/webp'],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    minimumCacheTTL: 60,
-    domains: [],
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: '**',
-      },
-    ],
+    // Must be unoptimized for Cloudflare Workers compatibility
+    // Next.js Image component requires Node.js APIs not available in Workers runtime
+    unoptimized: true,
   },
   output: "standalone",
 }