perf: optimize hero image for faster load times

- Resize image.png from 2816x1536 to 1400x764 (7.3MB → 1.9MB, -74%)
- Add image.webp version (201KB, -97% vs original)
- Update nginx.conf to auto-serve WebP via Accept header negotiation
- Update LandingPage.tsx to use <picture> with WebP source + lazy loading

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/nginx.conf

@@ -18,9 +18,24 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    # Cache static assets
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+    # Cache JS/CSS/fonts
+    location ~* \.(js|css|woff|woff2|ttf|eot)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
+
+    # Serve WebP automatically when browser supports it
+    location = /image.png {
+        expires 30d;
+        add_header Cache-Control "public";
+        add_header Vary Accept;
+        if ($http_accept ~* "webp") {
+            rewrite ^ /image.webp break;
+        }
+    }
+
+    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
+        expires 30d;
+        add_header Cache-Control "public";
+    }
 }

frontend/src/pages/LandingPage.tsx

@@ -509,7 +509,10 @@ export const LandingPage: React.FC = () => {
 
         </div>
         <div className="hero-right">
-          <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" />
+          <picture>
+            <source srcSet="/image.webp" type="image/webp" />
+            <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" loading="lazy" />
+          </picture>
         </div>
       </section>