feat(og): improve design with background image, logo and dynamic geometry

app/[locale]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,16 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
       title={t('title')}
       description={t('description')}
       label="Kabelnetzbau & Infrastruktur"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

components/OGImageTemplate.tsx

@@ -13,6 +13,7 @@ export function OGImageTemplate({
   description,
   label,
   image,
+  logo,
   mode = 'dark',
 }: OGImageTemplateProps) {
   const backgroundDark = '#1a1a1a';
@@ -64,7 +65,7 @@ export function OGImageTemplate({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'linear-gradient(to right, rgba(26,26,26,0.95), rgba(26,26,26,0.6))',
+              background: 'linear-gradient(135deg, rgba(26,26,26,0.98) 0%, rgba(26,26,26,0.85) 40%, rgba(14,122,92,0.4) 100%)',
             }}
           />
         </div>
@@ -74,12 +75,12 @@ export function OGImageTemplate({
       <div
         style={{
           position: 'absolute',
-          top: '-150px',
+          top: '-300px',
-          right: '-150px',
+          right: '-200px',
-          width: '600px',
+          width: '800px',
-          height: '600px',
+          height: '1200px',
-          borderRadius: '300px',
+          backgroundColor: `${primaryGreen}1A`,
-          backgroundColor: `${primaryGreen}15`,
+          transform: 'rotate(25deg)',
           display: 'flex',
         }}
       />
@@ -145,27 +146,39 @@ export function OGImageTemplate({
           alignItems: 'center',
         }}
       >
-        <div
+        {logo ? (
-          style={{
+          // eslint-disable-next-line @next/next/no-img-element
-            width: '80px',
+          <img
-            height: '6px',
+            src={logo}
-            backgroundColor: primaryGreen,
+            alt="E-TIB GmbH"
-            borderRadius: '3px',
+            height="48"
-            marginRight: '24px',
+            style={{ marginRight: '24px', objectFit: 'contain' }}
-          }}
+          />
-        />
+        ) : (
-        <div
+          <div
-          style={{
+            style={{
-            fontSize: '24px',
+              width: '80px',
-            fontWeight: 700,
+              height: '6px',
-            color: 'white',
+              backgroundColor: primaryGreen,
-            textTransform: 'uppercase',
+              borderRadius: '3px',
-            letterSpacing: '0.15em',
+              marginRight: '24px',
-            display: 'flex',
+            }}
-          }}
+          />
-        >
+        )}
-          E-TIB GmbH
+        {!logo && (
-        </div>
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 700,
+              color: 'white',
+              textTransform: 'uppercase',
+              letterSpacing: '0.15em',
+              display: 'flex',
+            }}
+          >
+            E-TIB GmbH
+          </div>
+        )}
       </div>
 
       {/* Primary Green Brand Strip */}

lib/og-helper.tsx

@@ -48,6 +48,28 @@ export async function getOgFonts() {
   }
 }
 
+export function getOgBackground() {
+  try {
+    const bgPath = join(process.cwd(), 'public/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg');
+    const bgBase64 = readFileSync(bgPath, 'base64');
+    return `data:image/jpeg;base64,${bgBase64}`;
+  } catch (err) {
+    console.error('[OG] Failed to load background', err);
+    return undefined;
+  }
+}
+
+export function getOgLogo() {
+  try {
+    const logoPath = join(process.cwd(), 'public/assets/logo-white.png');
+    const logoBase64 = readFileSync(logoPath, 'base64');
+    return `data:image/png;base64,${logoBase64}`;
+  } catch (err) {
+    console.error('[OG] Failed to load logo', err);
+    return undefined;
+  }
+}
+
 /**
  * Common configuration for OG images
  */