chore: fix linting errors and ts bugs.

src/spa/pages/About.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { Link } from '@/spa/router';
 import { Star, ChevronRight } from 'lucide-react';
 import TestimonialsSection from '@/spa/components/TestimonialsSection';
-import { Button } from '@/spa/components/ui/button';
 import { WINNERS } from '@/spa/data/winners';
 import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
 import { useIsMobile } from '@/spa/hooks/useIsMobile';
+import Image from '@/spa/components/ui/UnoptimizedImage'
 
 const FF = '"IBM Plex Sans", sans-serif';
 const FB = '"Inter", sans-serif';
@@ -23,7 +23,7 @@ const About: React.FC = () => {
 
       {/* ── 1. HERO ─────────────────────────────────────────────────────────── */}
       <section style={{ position: 'relative', minHeight: '72vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: '#060C14' }}>
-        <img
+        <Image unoptimized
           src="/images/saal-leer-atmosphaere.jpg"
           alt="BMP Gala"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
@@ -120,7 +120,7 @@ const About: React.FC = () => {
 
           {/* Right – full-bleed image (+ heading on mobile) */}
           <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined, order: isMobile ? 1 : 0 }}>
-            <img
+            <Image unoptimized
               src="/images/preistraeger-gruppe.jpg"
               alt="BMP Gala Preisverleihung"
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
@@ -154,7 +154,7 @@ const About: React.FC = () => {
 
           {/* Left – full-bleed image (+ heading on mobile) */}
           <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined }}>
-            <img
+            <Image unoptimized
               src="/images/networking-innenhof.jpg"
               alt="Bayerischer Mittelstand"
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
@@ -422,7 +422,7 @@ function HighlightCard({ winner }: { winner: import('@/spa/data/winners').Winner
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <img
+      <Image unoptimized
         src={winner.img}
         alt={winner.name}
         style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s ease', transform: hovered ? 'scale(1.07)' : 'scale(1)', filter: 'grayscale(15%)' }}