perf(images): convert remaining <img> tags to next/image project-wide

Clears every remaining @next/next/no-img-element warning — automatic
responsive srcset, lazy-loading, and format optimization instead of
always loading the original file at full size. Fixed-size icons got
explicit width/height; dynamic-aspect photos got fill inside a
relative wrapper.

app/newsletter/components/HowItWorks.tsx

@@ -1,24 +1,36 @@
 import { Fragment } from "react";
+import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
 
+// Each icon's own real pixel dimensions (not uniformly square) — needed so
+// the `h-16 w-auto` sizing below infers the correct aspect ratio instead of
+// stretching/squashing to a guessed one.
 const steps = [
   {
     icon: "/icon-weekly-step-1.png",
+    width: 177,
+    height: 177,
     title: "1. Anmelden",
     desc: "Trage dich mit deiner E-Mail-Adresse ein und bestätige kurz.",
   },
   {
     icon: "/icon-weekly-step-2.png",
+    width: 225,
+    height: 177,
     title: "2. E-Mail erhalten",
     desc: "Jeden Mittwoch bekommst du deinen neuen Impuls direkt in dein Postfach.",
   },
   {
     icon: "/icon-weekly-step-3.png",
+    width: 198,
+    height: 198,
     title: "3. Lesen & umsetzen",
     desc: "Lies in wenigen Minuten und setze die Tipps direkt in deinem Alltag um.",
   },
   {
     icon: "/icon-weekly-step-4.png",
+    width: 180,
+    height: 177,
     title: "4. Dranbleiben",
     desc: "Kleine Schritte, jede Woche – für mehr Klarheit, Fokus und Leichtigkeit.",
   },
@@ -48,9 +60,11 @@ export function HowItWorks() {
         {steps.map((step, i) => (
           <Fragment key={step.title}>
             <RevealItem className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs md:max-w-none">
-              <img
+              <Image
                 src={step.icon}
                 alt=""
+                width={step.width}
+                height={step.height}
                 className="h-16 w-auto object-contain transition-transform duration-300 group-hover:scale-110"
               />
               <p className="font-semibold text-body text-text-primary">{step.title}</p>
@@ -62,9 +76,11 @@ export function HowItWorks() {
               // technique as Challenge's step connector and todo-cards'
               // identical HowItWorks, not just the same icon asset.
               <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
-                <img
+                <Image
                   alt=""
                   src="/icon-arrow-connector.svg"
+                  width={24}
+                  height={24}
                   className="w-6 h-6 rotate-90 md:w-10 md:h-3 md:rotate-0"
                 />
               </div>

app/newsletter/components/WeeklyBenefits.tsx

@@ -31,7 +31,7 @@ export function WeeklyBenefits() {
         <ul className="flex flex-col gap-4 items-start w-full">
           {benefits.map((b) => (
             <li key={b.title} className="flex gap-[0.625rem] items-start w-full">
-              <img alt="" src="/icon-check.svg" className="size-5 shrink-0 mt-0.5" />
+              <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0 mt-0.5" />
               <div className="flex flex-col gap-0.5 items-start flex-1 min-w-0">
                 <p className="font-semibold text-body text-text-primary">{b.title}</p>
                 <p className="text-body-sm text-text-muted">{b.desc}</p>