From 62b887c2a3af387f14d582de1de794b755f88db7 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 29 Jan 2026 15:54:54 +0100
Subject: [PATCH] og image

---
 app/layout.tsx          |  10 +--
 app/opengraph-image.tsx | 175 ++++++++++++++++++++++++++++++++++++++++
 app/twitter-image.tsx   | 175 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 351 insertions(+), 9 deletions(-)
 create mode 100644 app/opengraph-image.tsx
 create mode 100644 app/twitter-image.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 824c1a2..94ce133 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,6 +10,7 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://www.mb-grid-solutions.com"),
   title: {
     default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     template: "%s | MB Grid Solutions"
@@ -31,20 +32,11 @@ export const metadata: Metadata = {
     siteName: "MB Grid Solutions",
     title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
-    images: [
-      {
-        url: "/assets/logo.png",
-        width: 800,
-        height: 600,
-        alt: "MB Grid Solutions Logo",
-      },
-    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
     description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
-    images: ["/assets/logo.png"],
   },
   robots: {
     index: true,
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
new file mode 100644
index 0000000..ca37ae9
--- /dev/null
+++ b/app/opengraph-image.tsx
@@ -0,0 +1,175 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#ffffff',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        {/* Grid Pattern Background - matching .grid-pattern in globals.css */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
+            backgroundSize: '40px 40px',
+            zIndex: 0,
+          }}
+        />
+        
+        {/* Content Container - matching .card-modern / .glass-panel style */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            padding: '60px 80px',
+            borderRadius: '48px',
+            border: '1px solid #e2e8f0',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
+            zIndex: 1,
+            position: 'relative',
+          }}
+        >
+          {/* Engineering Excellence Badge */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              padding: '8px 20px',
+              backgroundColor: 'rgba(16, 185, 129, 0.1)',
+              borderRadius: '100px',
+              marginBottom: '32px',
+            }}
+          >
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                backgroundColor: '#10b981',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#10b981',
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              Engineering Excellence
+            </div>
+          </div>
+
+          {/* Brand Mark */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100px',
+              height: '100px',
+              backgroundColor: '#0f172a',
+              borderRadius: '24px',
+              marginBottom: '32px',
+              boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '48px',
+                fontWeight: 'bold',
+                color: '#10b981',
+              }}
+            >
+              MB
+            </div>
+          </div>
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: '900',
+              color: '#0f172a',
+              marginBottom: '16px',
+              textAlign: 'center',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
+          </div>
+
+          {/* Subtitle */}
+          <div
+            style={{
+              fontSize: '32px',
+              fontWeight: '500',
+              color: '#64748b',
+              textAlign: 'center',
+              maxWidth: '800px',
+              lineHeight: 1.4,
+            }}
+          >
+            Energiekabelprojekte & Technische Beratung
+            <br />
+            bis 110 kV
+          </div>
+        </div>
+
+        {/* Tech Lines - matching .tech-line style */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '10%',
+            left: 0,
+            width: '200px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '15%',
+            right: 0,
+            width: '300px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}
diff --git a/app/twitter-image.tsx b/app/twitter-image.tsx
new file mode 100644
index 0000000..c3c2342
--- /dev/null
+++ b/app/twitter-image.tsx
@@ -0,0 +1,175 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#ffffff',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        {/* Grid Pattern Background */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
+            backgroundSize: '40px 40px',
+            zIndex: 0,
+          }}
+        />
+        
+        {/* Content Container */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            padding: '60px 80px',
+            borderRadius: '48px',
+            border: '1px solid #e2e8f0',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
+            zIndex: 1,
+            position: 'relative',
+          }}
+        >
+          {/* Engineering Excellence Badge */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              padding: '8px 20px',
+              backgroundColor: 'rgba(16, 185, 129, 0.1)',
+              borderRadius: '100px',
+              marginBottom: '32px',
+            }}
+          >
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                backgroundColor: '#10b981',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#10b981',
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              Engineering Excellence
+            </div>
+          </div>
+
+          {/* Brand Mark */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '100px',
+              height: '100px',
+              backgroundColor: '#0f172a',
+              borderRadius: '24px',
+              marginBottom: '32px',
+              boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
+            }}
+          >
+            <div
+              style={{
+                fontSize: '48px',
+                fontWeight: 'bold',
+                color: '#10b981',
+              }}
+            >
+              MB
+            </div>
+          </div>
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: '900',
+              color: '#0f172a',
+              marginBottom: '16px',
+              textAlign: 'center',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
+          </div>
+
+          {/* Subtitle */}
+          <div
+            style={{
+              fontSize: '32px',
+              fontWeight: '500',
+              color: '#64748b',
+              textAlign: 'center',
+              maxWidth: '800px',
+              lineHeight: 1.4,
+            }}
+          >
+            Energiekabelprojekte & Technische Beratung
+            <br />
+            bis 110 kV
+          </div>
+        </div>
+
+        {/* Tech Lines */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '10%',
+            left: 0,
+            width: '200px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '15%',
+            right: 0,
+            width: '300px',
+            height: '1px',
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+          }}
+        />
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}