world-class hero image + 85% image optimization + sharp

HERO IMAGE:
- Generated 3 concepts with gemini-3-pro-image-preview, picked #1
- Phone showing 'Payment Received' notification at a charity gala dinner
- Warm tungsten bokeh chandeliers against dark bg-gray-950
- Directly visualizes the headline: 'money in the bank'
- Candid documentary angle, not looking at camera, brand compliant

IMAGE OPTIMIZATION (85% total reduction):
- All 21 images resized: landscape max 1200px, portrait max 1000px
- Compressed JPEG quality 80, progressive encoding, EXIF stripped
- Total: 13.6MB -> 2.1MB (saved 11.5MB)
- Individual savings: 81-90% per image

NEXT.JS IMAGE PIPELINE:
- Added sharp (10x faster than squoosh for image processing)
- next.config.mjs: WebP format, proper device/image sizes, 1yr cache TTL
- Dockerfile: libc6-compat + NEXT_SHARP_PATH for Alpine sharp support
- First request: ~3s (processing), cached: <1s

WebP served sizes: hero 52KB, cards 32-40KB (vs original 500-800KB JPEGs)

pledge-now-pay-later/src/app/page.tsx

@@ -101,8 +101,8 @@ export default function HomePage() {
             <div className="md:col-span-5" style={{ opacity: 0, animation: "fadeUp 0.5s ease-out 0.25s forwards" }}>
               <div className="aspect-[3/4] md:aspect-[4/5] w-full relative overflow-hidden">
                 <Image
-                  src="/images/landing/02-main-charity-manager-card.jpg"
-                  alt="Charity manager tracking pledges at a fundraising gala"
+                  src="/images/landing/00-hero.jpg"
+                  alt="Payment received notification on phone at a charity gala dinner"
                   fill
                   className="object-cover"
                   sizes="(max-width: 768px) 100vw, 40vw"