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

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',
-          right: '-150px',
-          width: '600px',
-          height: '600px',
-          borderRadius: '300px',
-          backgroundColor: `${primaryGreen}15`,
+          top: '-300px',
+          right: '-200px',
+          width: '800px',
+          height: '1200px',
+          backgroundColor: `${primaryGreen}1A`,
+          transform: 'rotate(25deg)',
           display: 'flex',
         }}
       />
@@ -145,27 +146,39 @@ export function OGImageTemplate({
           alignItems: 'center',
         }}
       >
-        <div
-          style={{
-            width: '80px',
-            height: '6px',
-            backgroundColor: primaryGreen,
-            borderRadius: '3px',
-            marginRight: '24px',
-          }}
-        />
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 700,
-            color: 'white',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
-            display: 'flex',
-          }}
-        >
-          E-TIB GmbH
-        </div>
+        {logo ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={logo}
+            alt="E-TIB GmbH"
+            height="48"
+            style={{ marginRight: '24px', objectFit: 'contain' }}
+          />
+        ) : (
+          <div
+            style={{
+              width: '80px',
+              height: '6px',
+              backgroundColor: primaryGreen,
+              borderRadius: '3px',
+              marginRight: '24px',
+            }}
+          />
+        )}
+        {!logo && (
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 700,
+              color: 'white',
+              textTransform: 'uppercase',
+              letterSpacing: '0.15em',
+              display: 'flex',
+            }}
+          >
+            E-TIB GmbH
+          </div>
+        )}
       </div>
 
       {/* Primary Green Brand Strip */}