chore: integrate local imgproxy sidecar and unify list components

- Added imgproxy service to docker-compose.dev.yml with URL mapping
- Implemented robust Base64 encoding for imgproxy source URLs
- Synchronized NEXT_PUBLIC_IMGPROXY_URL and NEXT_PUBLIC_BASE_URL
- Refactored About page to use existing marc-mintel.png asset
- Created shared IconList component and unified list styles project-wide
- Fixed vertical alignment issues in IconList items
- Updated dev script with aggressive port 3000 and lock file cleanup

apps/web/app/about/page.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../src/components/Typography";
 import { BackgroundGrid, Card, Container } from "../../src/components/Layout";
 import { Button } from "../../src/components/Button";
+import { IconList, IconListItem } from "../../src/components/IconList";
 
 export default function AboutPage() {
   return (
@@ -51,11 +52,10 @@ export default function AboutPage() {
                 <div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
                     <Image
-                      src="https://img.infra.mintel.me/unsafe/rs:fill:800:800/plain/https://picsum.photos/seed/marc/800/800"
+                      src="/marc-mintel.png"
                       alt="Marc Mintel"
                       fill
                       className="object-cover grayscale transition-all duration-1000 ease-in-out scale-110 group-hover:scale-100 group-hover:grayscale-0"
-                      unoptimized
                     />
                   </div>
                 </div>
@@ -116,18 +116,17 @@ export default function AboutPage() {
                     Ergebnisse, nicht Prozesse.
                   </span>
                 </LeadText>
-                <ul className="space-y-4">
+                <IconList className="space-y-4">
                   {[
                     "Komplexe Systeme vereinfacht",
                     "Performance-Probleme gelöst",
                     "Nachhaltige Software-Architekturen gebaut",
                   ].map((item, i) => (
-                    <li key={i} className="flex items-center gap-4 group">
-                      <div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
+                    <IconListItem key={i} bullet>
                       <BodyText className="text-lg">{item}</BodyText>
-                    </li>
+                    </IconListItem>
                   ))}
-                </ul>
+                </IconList>
               </div>
             </Reveal>
             <Reveal delay={0.2}>
@@ -307,8 +306,8 @@ export default function AboutPage() {
             </div>
             <div className="space-y-8">
               <div className="space-y-6">
-                <Label className="text-slate-900">Sondern:</Label>
-                <div className="space-y-8">
+                <Label className="text-slate-900">Sondern (fix):</Label>
+                <IconList className="space-y-8">
                   {[
                     {
                       label: "Direkte Kommunikation",
@@ -323,21 +322,16 @@ export default function AboutPage() {
                       desc: "Code, der hält, was er verspricht.",
                     },
                   ].map((item, i) => (
-                    <Reveal key={i} delay={0.2 + i * 0.1}>
-                      <div className="flex gap-6 items-start group">
-                        <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1 group-hover:scale-110 transition-transform">
-                          <Check className="w-4 h-4 text-white" />
-                        </div>
-                        <div className="space-y-1">
-                          <H4 className="text-xl">{item.label}</H4>
-                          <BodyText className="text-base text-slate-400">
-                            {item.desc}
-                          </BodyText>
-                        </div>
+                    <IconListItem key={i} check>
+                      <div className="space-y-1">
+                        <H4 className="text-xl leading-none">{item.label}</H4>
+                        <BodyText className="text-base text-slate-400">
+                          {item.desc}
+                        </BodyText>
                       </div>
-                    </Reveal>
+                    </IconListItem>
                   ))}
-                </div>
+                </IconList>
               </div>
             </div>
           </div>

apps/web/app/page.tsx

@@ -24,6 +24,7 @@ import {
 } from "../src/components/Typography";
 import { BackgroundGrid, Card, Container } from "../src/components/Layout";
 import { Button } from "../src/components/Button";
+import { IconList, IconListItem } from "../src/components/IconList";
 
 export default function LandingPage() {
   return (
@@ -94,7 +95,7 @@ export default function LandingPage() {
                 <div className="flex items-center gap-4">
                   <Label className="text-slate-900">Was ich biete</Label>
                 </div>
-                <ul className="space-y-6">
+                <IconList className="space-y-6">
                   {[
                     {
                       text: "Direkte Kommunikation ohne Umwege",
@@ -113,14 +114,15 @@ export default function LandingPage() {
                       icon: <ConceptPrice className="w-12 h-12" />,
                     },
                   ].map((item, i) => (
-                    <li key={i} className="flex items-center gap-6 group">
-                      <div className="shrink-0 transition-transform duration-500 group-hover:scale-110">
-                        {item.icon}
-                      </div>
+                    <IconListItem
+                      key={i}
+                      icon={item.icon}
+                      iconContainerClassName="mt-0"
+                    >
                       <LeadText className="text-xl">{item.text}</LeadText>
-                    </li>
+                    </IconListItem>
                   ))}
-                </ul>
+                </IconList>
               </div>
             </Reveal>
 
@@ -129,24 +131,25 @@ export default function LandingPage() {
                 <div className="flex items-center gap-4">
                   <Label>Was ich nicht mache</Label>
                 </div>
-                <ul className="space-y-4">
+                <IconList className="space-y-4">
                   {[
                     "Endlose Workshops ohne Ergebnis",
                     "PowerPoint-Schlachten",
                     "Outsourcing an Billig-Anbieter",
                     "Wartungsverträge mit versteckten Kosten",
                   ].map((item, i) => (
-                    <li
+                    <IconListItem
                       key={i}
-                      className="flex items-start gap-3 decoration-slate-200 line-through"
+                      bullet
+                      className="line-through decoration-slate-200"
+                      iconClassName="opacity-20"
                     >
-                      <span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
                       <LeadText className="text-slate-400 text-lg">
                         {item}
                       </LeadText>
-                    </li>
+                    </IconListItem>
                   ))}
-                </ul>
+                </IconList>
               </div>
             </Reveal>
           </div>

apps/web/app/websites/page.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { PageHeader } from '../../src/components/PageHeader';
-import { Reveal } from '../../src/components/Reveal';
-import { Section } from '../../src/components/Section';
-import { 
+import { PageHeader } from "../../src/components/PageHeader";
+import { Reveal } from "../../src/components/Reveal";
+import { Section } from "../../src/components/Section";
+import {
   SystemArchitecture,
   SpeedPerformance,
   SolidFoundation,
@@ -15,29 +15,41 @@ import {
   ConceptCommunication,
   ConceptPrototyping,
   ConceptSystem,
-  ConceptTarget
-} from '../../src/components/Landing';
-import { Check } from 'lucide-react';
-import { H2, H3, H4, LeadText, BodyText, Label } from '../../src/components/Typography';
-import { BackgroundGrid, Card } from '../../src/components/Layout';
-import { MotionButton } from '../../src/components/Button';
+  ConceptTarget,
+} from "../../src/components/Landing";
+import { Check } from "lucide-react";
+import {
+  H2,
+  H3,
+  H4,
+  LeadText,
+  BodyText,
+  Label,
+} from "../../src/components/Typography";
+import { BackgroundGrid, Card } from "../../src/components/Layout";
+import { MotionButton } from "../../src/components/Button";
+import { IconList, IconListItem } from "../../src/components/IconList";
 
 export default function WebsitesPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      
       <BackgroundGrid />
 
-      <PageHeader 
-        title={<>Websites, die <br /><span className="text-slate-200">einfach funktionieren.</span></>}
+      <PageHeader
+        title={
+          <>
+            Websites, die <br />
+            <span className="text-slate-200">einfach funktionieren.</span>
+          </>
+        }
         description="Keine Baukästen, keine Plugins, kein Overhead. Nur sauberer Code und maximale Performance."
-        backLink={{ href: '/', label: 'Zurück' }}
+        backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="W"
       />
 
       {/* Intro / Problem */}
-      <Section 
-        number="01" 
+      <Section
+        number="01"
         title="Der Ansatz"
         borderTop
         illustration={<SystemArchitecture className="w-24 h-24" />}
@@ -51,17 +63,18 @@ export default function WebsitesPage() {
           </Reveal>
           <Reveal delay={0.2}>
             <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
-              Eine Website ist kein Flyer. Sie ist ein <span className="text-slate-900">Werkzeug</span>, das jeden Tag arbeitet. 
-              Deshalb baue ich sie stabil, schnell und wartungsfrei.
+              Eine Website ist kein Flyer. Sie ist ein{" "}
+              <span className="text-slate-900">Werkzeug</span>, das jeden Tag
+              arbeitet. Deshalb baue ich sie stabil, schnell und wartungsfrei.
             </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
               {[
-                { label: 'Stabil', icon: ConceptSystem },
-                { label: 'Schnell', icon: ConceptAutomation },
-                { label: 'Wartungsfrei', icon: ConceptCode },
-                { label: 'Sicher', icon: ConceptTarget },
+                { label: "Stabil", icon: ConceptSystem },
+                { label: "Schnell", icon: ConceptAutomation },
+                { label: "Wartungsfrei", icon: ConceptCode },
+                { label: "Sicher", icon: ConceptTarget },
               ].map((item, i) => (
                 <div key={i} className="flex flex-col gap-3 group">
                   <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:scale-110 transition-transform duration-500">
@@ -76,8 +89,8 @@ export default function WebsitesPage() {
       </Section>
 
       {/* Speed */}
-      <Section 
-        number="02" 
+      <Section
+        number="02"
         title="Performance"
         borderTop
         variant="gray"
@@ -87,36 +100,46 @@ export default function WebsitesPage() {
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Geschwindigkeit ist <br />
-              <span className="text-slate-200">kein Extra. Sie ist Standard.</span>
+              <span className="text-slate-200">
+                kein Extra. Sie ist Standard.
+              </span>
             </H3>
           </Reveal>
           <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
             <div className="md:col-span-7 space-y-8">
               <Reveal delay={0.2}>
                 <LeadText className="text-xl text-slate-400">
-                  Viele Websites sind langsam, weil sie zusammengeklickt sind. Meine sind schnell, weil sie <span className="text-slate-900">von Grund auf</span> entwickelt wurden.
+                  Viele Websites sind langsam, weil sie zusammengeklickt sind.
+                  Meine sind schnell, weil sie{" "}
+                  <span className="text-slate-900">von Grund auf</span>{" "}
+                  entwickelt wurden.
                 </LeadText>
               </Reveal>
               <Reveal delay={0.4}>
-                <ul className="space-y-4">
+                <IconList className="space-y-4">
                   {[
-                    'Seiten laden ohne Verzögerung',
-                    'Optimiert für Suchmaschinen (SEO)',
-                    'Bessere Nutzererfahrung',
-                    'Höhere Conversion-Rates',
+                    "Seiten laden ohne Verzögerung",
+                    "Optimiert für Suchmaschinen (SEO)",
+                    "Bessere Nutzererfahrung",
+                    "Höhere Conversion-Rates",
                   ].map((item, i) => (
-                    <li key={i} className="flex items-center gap-4 group">
-                      <div className="w-1.5 h-1.5 bg-slate-900 rounded-full group-hover:scale-150 transition-transform" />
+                    <IconListItem key={i} bullet>
                       <LeadText className="text-lg md:text-xl">{item}</LeadText>
-                    </li>
+                    </IconListItem>
                   ))}
-                </ul>
+                </IconList>
               </Reveal>
             </div>
             <div className="md:col-span-5">
               <Reveal delay={0.6}>
-                <Card variant="white" padding="normal" className="text-center group">
-                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">90+</div>
+                <Card
+                  variant="white"
+                  padding="normal"
+                  className="text-center group"
+                >
+                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
+                    90+
+                  </div>
                   <Label className="mt-4">Pagespeed Score</Label>
                 </Card>
               </Reveal>
@@ -126,8 +149,8 @@ export default function WebsitesPage() {
       </Section>
 
       {/* No Maintenance */}
-      <Section 
-        number="03" 
+      <Section
+        number="03"
         title="Technik"
         borderTop
         illustration={<SolidFoundation className="w-24 h-24" />}
@@ -141,8 +164,9 @@ export default function WebsitesPage() {
           </Reveal>
           <Reveal delay={0.2}>
             <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
-              Ich nutze keine Baukästen, die sich selbst zerstören. 
-              Ihre Website besteht aus <span className="text-slate-900">sauberem Code</span>, der Ihnen gehört.
+              Ich nutze keine Baukästen, die sich selbst zerstören. Ihre Website
+              besteht aus <span className="text-slate-900">sauberem Code</span>,
+              der Ihnen gehört.
             </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
@@ -151,14 +175,20 @@ export default function WebsitesPage() {
                 <div className="space-y-4">
                   <Label className="text-slate-900 mb-2">Code Qualität</Label>
                   <H4 className="text-2xl">Langlebigkeit</H4>
-                  <BodyText>Modernste Web-Technologien für maximale Performance und Wartbarkeit.</BodyText>
+                  <BodyText>
+                    Modernste Web-Technologien für maximale Performance und
+                    Wartbarkeit.
+                  </BodyText>
                 </div>
               </Card>
               <Card variant="white" padding="normal" className="group">
                 <div className="space-y-4">
                   <Label className="text-slate-900 mb-2">Sicherheit</Label>
                   <H4 className="text-2xl">Resilienz</H4>
-                  <BodyText>Minimale Angriffsfläche durch Verzicht auf unnötige Drittanbieter-Software.</BodyText>
+                  <BodyText>
+                    Minimale Angriffsfläche durch Verzicht auf unnötige
+                    Drittanbieter-Software.
+                  </BodyText>
                 </div>
               </Card>
             </div>
@@ -167,8 +197,8 @@ export default function WebsitesPage() {
       </Section>
 
       {/* Content/Tech Separation */}
-      <Section 
-        number="04" 
+      <Section
+        number="04"
         title="Inhalte"
         borderTop
         variant="gray"
@@ -185,8 +215,10 @@ export default function WebsitesPage() {
             <div className="md:col-span-7">
               <Reveal delay={0.2}>
                 <LeadText className="text-xl md:text-2xl text-slate-400">
-                  Sie können Texte und Bilder selbst anpassen, ohne das Design oder die Technik zu gefährden. 
-                  Ein <span className="text-slate-900">intuitives System</span> sorgt dafür, dass alles an seinem Platz bleibt.
+                  Sie können Texte und Bilder selbst anpassen, ohne das Design
+                  oder die Technik zu gefährden. Ein{" "}
+                  <span className="text-slate-900">intuitives System</span>{" "}
+                  sorgt dafür, dass alles an seinem Platz bleibt.
                 </LeadText>
               </Reveal>
             </div>
@@ -205,8 +237,12 @@ export default function WebsitesPage() {
                   <div className="space-y-4 opacity-30">
                     <Label>Mein Schutz</Label>
                     <div className="space-y-2">
-                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Design-Chaos</div>
-                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">Technische Fehler</div>
+                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
+                        Design-Chaos
+                      </div>
+                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
+                        Technische Fehler
+                      </div>
                     </div>
                   </div>
                 </Card>
@@ -217,8 +253,8 @@ export default function WebsitesPage() {
       </Section>
 
       {/* Simple Changes */}
-      <Section 
-        number="05" 
+      <Section
+        number="05"
         title="Service"
         borderTop
         illustration={<DirectService className="w-24 h-24" />}
@@ -233,23 +269,37 @@ export default function WebsitesPage() {
           <Reveal delay={0.2}>
             <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
               Ihr Business entwickelt sich weiter, Ihre Website auch. <br />
-              Keine komplizierten Prozesse, sondern <span className="text-slate-900">direkte Umsetzung</span> Ihrer Ideen.
+              Keine komplizierten Prozesse, sondern{" "}
+              <span className="text-slate-900">direkte Umsetzung</span> Ihrer
+              Ideen.
             </LeadText>
           </Reveal>
           <Reveal delay={0.4}>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-              <Card variant="white" padding="normal" className="group hover:border-slate-900">
+              <Card
+                variant="white"
+                padding="normal"
+                className="group hover:border-slate-900"
+              >
                 <ConceptCommunication className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
                 <div className="space-y-2">
                   <H4 className="text-2xl">Direkter Draht</H4>
-                  <BodyText>Sie sprechen direkt mit dem Entwickler. Keine Stille Post.</BodyText>
+                  <BodyText>
+                    Sie sprechen direkt mit dem Entwickler. Keine Stille Post.
+                  </BodyText>
                 </div>
               </Card>
-              <Card variant="white" padding="normal" className="group hover:border-slate-900">
+              <Card
+                variant="white"
+                padding="normal"
+                className="group hover:border-slate-900"
+              >
                 <ConceptPrototyping className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
                 <div className="space-y-2">
                   <H4 className="text-2xl">Agile Anpassung</H4>
-                  <BodyText>Schnelle Iterationen statt langer Wartezeiten.</BodyText>
+                  <BodyText>
+                    Schnelle Iterationen statt langer Wartezeiten.
+                  </BodyText>
                 </div>
               </Card>
             </div>
@@ -258,8 +308,8 @@ export default function WebsitesPage() {
       </Section>
 
       {/* Result */}
-      <Section 
-        number="06" 
+      <Section
+        number="06"
         title="Ergebnis"
         borderTop
         variant="gray"
@@ -275,15 +325,26 @@ export default function WebsitesPage() {
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
             {[
-              { title: 'Kein Overhead', desc: 'Fokus auf das, was Ihre Kunden wirklich brauchen.' },
-              { title: 'Volle Kontrolle', desc: 'Der Code gehört Ihnen, ohne Vendor Lock-in.' },
-              { title: 'Echte Performance', desc: 'Messbare Geschwindigkeit für bessere Ergebnisse.' },
+              {
+                title: "Kein Overhead",
+                desc: "Fokus auf das, was Ihre Kunden wirklich brauchen.",
+              },
+              {
+                title: "Volle Kontrolle",
+                desc: "Der Code gehört Ihnen, ohne Vendor Lock-in.",
+              },
+              {
+                title: "Echte Performance",
+                desc: "Messbare Geschwindigkeit für bessere Ergebnisse.",
+              },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
                 <div className="space-y-4 group">
                   <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
                   <H4 className="text-2xl">{item.title}</H4>
-                  <LeadText className="text-lg text-slate-400">{item.desc}</LeadText>
+                  <LeadText className="text-lg text-slate-400">
+                    {item.desc}
+                  </LeadText>
                 </div>
               </Reveal>
             ))}
@@ -297,9 +358,7 @@ export default function WebsitesPage() {
                   Lassen Sie uns über Ihr nächstes Projekt sprechen.
                 </LeadText>
               </div>
-              <MotionButton href="/contact">
-                Projekt anfragen
-              </MotionButton>
+              <MotionButton href="/contact">Projekt anfragen</MotionButton>
             </div>
           </Reveal>
         </div>

apps/web/next.config.mjs

@@ -4,6 +4,10 @@ import withMintelConfig from "@mintel/next-config";
 const nextConfig = {
   reactStrictMode: true,
   output: 'standalone',
+  images: {
+    loader: 'custom',
+    loaderFile: './src/utils/imgproxy-loader.ts',
+  },
   async rewrites() {
     const umamiUrl =
       process.env.UMAMI_API_ENDPOINT ||

apps/web/src/components/IconList.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Check } from "lucide-react";
+
+interface IconListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface IconListItemProps {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  bullet?: boolean;
+  check?: boolean;
+  className?: string;
+  iconClassName?: string;
+  iconContainerClassName?: string;
+}
+
+export const IconList: React.FC<IconListProps> = ({
+  children,
+  className = "",
+}) => <ul className={`space-y-4 ${className}`}>{children}</ul>;
+
+export const IconListItem: React.FC<IconListItemProps> = ({
+  children,
+  icon,
+  bullet,
+  check,
+  className = "",
+  iconClassName = "",
+  iconContainerClassName = "",
+}) => {
+  let renderIcon = icon;
+
+  if (bullet) {
+    renderIcon = <div className="w-1.5 h-1.5 bg-slate-900 rounded-full" />;
+  } else if (check) {
+    renderIcon = (
+      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
+        <Check className="w-4 h-4 text-white" />
+      </div>
+    );
+  }
+
+  return (
+    <li className={`flex items-start gap-4 group ${className}`}>
+      {renderIcon && (
+        <div
+          className={`shrink-0 flex items-center justify-center transition-transform duration-500 ${iconContainerClassName || "mt-1.5"} ${iconClassName}`}
+        >
+          {renderIcon}
+        </div>
+      )}
+      <div className="flex-1">{children}</div>
+    </li>
+  );
+};

apps/web/src/utils/imgproxy-loader.ts

@@ -0,0 +1,26 @@
+import { getImgproxyUrl } from "./imgproxy";
+
+/**
+ * Next.js Image Loader for imgproxy
+ *
+ * @param {Object} props - properties from Next.js Image component
+ * @param {string} props.src - The source image URL
+ * @param {number} props.width - The desired image width
+ * @param {number} props.quality - The desired image quality (ignored for now as imgproxy handles it)
+ */
+export default function imgproxyLoader({
+  src,
+  width,
+  quality,
+}: {
+  src: string;
+  width: number;
+  quality?: number;
+}) {
+  // We use the width provided by Next.js for responsive images
+  // Height is set to 0 to maintain aspect ratio
+  return getImgproxyUrl(src, {
+    width,
+    resizing_type: "fit",
+  });
+}

apps/web/src/utils/imgproxy.ts

@@ -0,0 +1,79 @@
+/**
+ * Generates an imgproxy URL for a given source image and options.
+ *
+ * Documentation: https://docs.imgproxy.net/usage/processing
+ */
+
+interface ImgproxyOptions {
+  width?: number;
+  height?: number;
+  resizing_type?: "fit" | "fill" | "fill-down" | "force" | "auto";
+  gravity?: string;
+  enlarge?: boolean;
+  extension?: string;
+}
+
+/**
+ * Encodes a string to Base64 (URL-safe)
+ */
+function encodeBase64(str: string): string {
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str)
+      .toString("base64")
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+  } else {
+    // Fallback for browser environment if Buffer is not available
+    return window
+      .btoa(str)
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+  }
+}
+
+export function getImgproxyUrl(
+  src: string,
+  options: ImgproxyOptions = {},
+): string {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_IMGPROXY_URL || "https://img.infra.mintel.me";
+
+  // If no imgproxy URL is configured, return the source as is
+  if (!baseUrl) return src;
+
+  // Handle local paths or relative URLs
+  let absoluteSrc = src;
+  if (src.startsWith("/")) {
+    const baseUrl =
+      process.env.NEXT_PUBLIC_BASE_URL ||
+      (typeof window !== "undefined" ? window.location.origin : "");
+    if (baseUrl) {
+      absoluteSrc = `${baseUrl}${src}`;
+    }
+  }
+
+  const {
+    width = 0,
+    height = 0,
+    resizing_type = "fit",
+    gravity = "sm",
+    enlarge = false,
+    extension = "",
+  } = options;
+
+  // Processing options
+  // Format: /rs:<type>:<width>:<height>:<enlarge>/g:<gravity>
+  const processingOptions = [
+    `rs:${resizing_type}:${width}:${height}:${enlarge ? 1 : 0}`,
+    `g:${gravity}`,
+  ].join("/");
+
+  // Using /unsafe/ for now as we don't handle signatures yet
+  // Format: <base_url>/unsafe/<options>/<base64_url>
+  const suffix = extension ? `@${extension}` : "";
+  const encodedSrc = encodeBase64(absoluteSrc + suffix);
+
+  return `${baseUrl}/unsafe/${processingOptions}/${encodedSrc}`;
+}

apps/web/src/utils/imgproxy.verify.ts

@@ -0,0 +1,62 @@
+import { getImgproxyUrl } from "./imgproxy";
+
+/**
+ * Verification script for imgproxy URL generation
+ */
+
+function testImgproxyUrl() {
+  const testCases = [
+    {
+      src: "https://picsum.photos/800/800",
+      options: { width: 400, height: 300, resizing_type: "fill" as const },
+      description: "Remote URL with fill resizing",
+    },
+    {
+      src: "/images/avatar.jpg",
+      options: { width: 100, extension: "webp" },
+      description: "Local path with extension conversion",
+    },
+    {
+      src: "https://example.com/image.png",
+      options: { gravity: "no" },
+      description: "Remote URL with custom gravity",
+    },
+  ];
+
+  console.log("🧪 Testing imgproxy URL generation...\n");
+
+  testCases.forEach((tc, i) => {
+    const url = getImgproxyUrl(tc.src, tc.options);
+    console.log(`Test Case ${i + 1}: ${tc.description}`);
+    console.log(`Source: ${tc.src}`);
+    console.log(`Result: ${url}`);
+
+    // Basic validation
+    if (url.startsWith("https://img.infra.mintel.me/unsafe/")) {
+      console.log("✅ Base URL and unsafe path correct");
+    } else {
+      console.log("❌ Base URL or unsafe path mismatch");
+    }
+
+    if (
+      tc.options.width &&
+      url.includes(
+        `rs:${tc.options.resizing_type || "fit"}:${tc.options.width}`,
+      )
+    ) {
+      console.log("✅ Resizing options present");
+    }
+
+    console.log("-------------------\n");
+  });
+}
+
+// Mock environment for testing if not set
+if (!process.env.NEXT_PUBLIC_IMGPROXY_URL) {
+  process.env.NEXT_PUBLIC_IMGPROXY_URL = "https://img.infra.mintel.me";
+}
+if (!process.env.NEXT_PUBLIC_BASE_URL) {
+  process.env.NEXT_PUBLIC_BASE_URL = "http://mintel.localhost";
+}
+
+testImgproxyUrl();

docker-compose.dev.yml

@@ -21,7 +21,6 @@ services:
   gatekeeper:
     profiles: ["gatekeeper"]
     image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
-    container_name: ${PROJECT_NAME:-mintel-me}-gatekeeper
     restart: always
     networks:
       infra:
@@ -80,6 +79,28 @@ services:
     volumes:
       - directus-db-data:/var/lib/postgresql/data
 
+  imgproxy:
+    image: darthsim/imgproxy:latest
+    restart: always
+    networks:
+      - default
+      - infra
+    extra_hosts:
+      - "mintel.localhost:host-gateway"
+      - "cms.mintel.localhost:host-gateway"
+      - "host.docker.internal:host-gateway"
+    environment:
+      IMGPROXY_USE_ETAG: "true"
+      IMGPROXY_MAX_SRC_RESOLUTION: 20
+      IMGPROXY_ALLOWED_NETWORKS: "10.0.0.0/8,172.16.0.0/12,192.168.0.0/16"
+      IMGPROXY_URL_MAPPING: "http://mintel.localhost/:http://app:3000/,http://cms.mintel.localhost/:http://directus:8055/"
+    labels:
+      - "traefik.enable=true"
+      - 'traefik.http.routers.${PROJECT_NAME:-mintel-me}-imgproxy.rule=Host("${IMGPROXY_HOST:-img.mintel.localhost}")'
+      - "traefik.http.routers.${PROJECT_NAME:-mintel-me}-imgproxy.entrypoints=web"
+      - "traefik.http.services.${PROJECT_NAME:-mintel-me}-imgproxy.loadbalancer.server.port=8080"
+      - "traefik.docker.network=infra"
+
 networks:
   default:
     name: ${PROJECT_NAME:-mintel-me}-internal

docker-compose.yml

@@ -145,6 +145,7 @@ services:
 networks:
   default:
     name: ${PROJECT_NAME:-mintel-me}-internal
+    external: true
   infra:
     external: true
 

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "packageManager": "pnpm@10.18.3",
   "scripts": {
-    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://mintel.localhost\\n🗄️  CMS:      http://cms.mintel.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n' && docker-compose -f docker-compose.dev.yml down --remove-orphans && (docker-compose -f docker-compose.dev.yml up app directus directus-db gatekeeper & pnpm -r dev)",
+    "dev": "docker network create infra 2>/dev/null || true && echo \"\n🚀 Development Environment Starting...\n\n📱 App:      http://mintel.localhost\n🗄️  CMS:      http://cms.mintel.localhost/admin\n🖼️  Imgproxy: http://img.mintel.localhost\n🚦 Traefik:  http://localhost:8080\n\" && lsof -ti:3000 | xargs kill -9 2>/dev/null || true && rm -f apps/web/.next/dev/lock 2>/dev/null || true && docker rm -f mintel-me-gatekeeper 2>/dev/null || true && COMPOSE_PROJECT_NAME=mintel-me docker-compose -f docker-compose.dev.yml down --remove-orphans && COMPOSE_PROJECT_NAME=mintel-me docker-compose -f docker-compose.dev.yml up -d app directus directus-db gatekeeper imgproxy && pnpm -r dev",
     "dev:local": "pnpm -r dev",
     "build": "pnpm -r build",
     "start": "pnpm -r start",