feat(og): adapt OG images to E-TIB branding and fix ArrayBuffer font parsing

app/[locale]/opengraph-image.tsx

@@ -16,7 +16,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
     <OGImageTemplate
       title={t('title')}
       description={t('description')}
-      label="Reliable Energy Infrastructure"
+      label="Kabelnetzbau & Infrastruktur"
     />,
     {
       ...OG_IMAGE_SIZE,

components/OGImageTemplate.tsx

@@ -15,9 +15,8 @@ export function OGImageTemplate({
   image,
   mode = 'dark',
 }: OGImageTemplateProps) {
-  const primaryBlue = '#001a4d';
-  const accentGreen = '#10a379';
-  const saturatedBlue = '#011dff';
+  const backgroundDark = '#1a1a1a';
+  const primaryGreen = '#0e7a5c';
 
   const containerStyle: React.CSSProperties = {
     height: '100%',
@@ -26,7 +25,7 @@ export function OGImageTemplate({
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
     padding: '80px',
     position: 'relative',
     fontFamily: 'Inter',
@@ -65,7 +64,7 @@ export function OGImageTemplate({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
+              background: 'linear-gradient(to right, rgba(26,26,26,0.95), rgba(26,26,26,0.6))',
             }}
           />
         </div>
@@ -80,7 +79,7 @@ export function OGImageTemplate({
           width: '600px',
           height: '600px',
           borderRadius: '300px',
-          backgroundColor: `${accentGreen}15`,
+          backgroundColor: `${primaryGreen}15`,
           display: 'flex',
         }}
       />
@@ -92,7 +91,7 @@ export function OGImageTemplate({
             style={{
               fontSize: '24px',
               fontWeight: 700,
-              color: accentGreen,
+              color: primaryGreen,
               textTransform: 'uppercase',
               letterSpacing: '0.3em',
               marginBottom: '32px',
@@ -150,7 +149,7 @@ export function OGImageTemplate({
           style={{
             width: '80px',
             height: '6px',
-            backgroundColor: accentGreen,
+            backgroundColor: primaryGreen,
             borderRadius: '3px',
             marginRight: '24px',
           }}
@@ -165,11 +164,11 @@ export function OGImageTemplate({
             display: 'flex',
           }}
         >
-          KLZ Cables
+          E-TIB GmbH
         </div>
       </div>
 
-      {/* Saturated Blue Brand Strip */}
+      {/* Primary Green Brand Strip */}
       <div
         style={{
           position: 'absolute',
@@ -177,7 +176,7 @@ export function OGImageTemplate({
           right: 0,
           width: '12px',
           height: '100%',
-          backgroundColor: saturatedBlue,
+          backgroundColor: primaryGreen,
         }}
       />
     </div>

lib/og-helper.tsx

@@ -11,10 +11,21 @@ export async function getOgFonts() {
 
   try {
     console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
-    const boldFont = readFileSync(boldFontPath);
-    const regularFont = readFileSync(regularFontPath);
+    const boldFontBuffer = readFileSync(boldFontPath);
+    const regularFontBuffer = readFileSync(regularFontPath);
+    
+    // Satori strictly requires an ArrayBuffer.
+    const boldFont = boldFontBuffer.buffer.slice(
+      boldFontBuffer.byteOffset,
+      boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
+    );
+    const regularFont = regularFontBuffer.buffer.slice(
+      regularFontBuffer.byteOffset,
+      regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
+    );
+
     console.log(
-      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+      `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
     return [