feat(og): add logo and dynamic faded background image to OG templates

components/OGImageTemplate.tsx

@@ -5,6 +5,7 @@ interface OGImageTemplateProps {
   description?: string;
   label?: string;
   image?: string;
+  logo?: string;
   mode?: 'dark' | 'light' | 'image';
 }
 
@@ -13,6 +14,7 @@ export function OGImageTemplate({
   description,
   label,
   image,
+  logo,
   mode = 'dark',
 }: OGImageTemplateProps) {
   const primaryBlue = '#001a4d';
@@ -152,21 +154,26 @@ export function OGImageTemplate({
             height: '6px',
             backgroundColor: accentGreen,
             borderRadius: '3px',
-            marginRight: '24px',
+            marginRight: '32px',
           }}
         />
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 700,
-            color: 'white',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
-            display: 'flex',
-          }}
-        >
-          KLZ Cables
-        </div>
+        {logo ? (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img src={logo} alt="KLZ Cables" height="40" style={{ objectFit: 'contain' }} />
+        ) : (
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 700,
+              color: 'white',
+              textTransform: 'uppercase',
+              letterSpacing: '0.15em',
+              display: 'flex',
+            }}
+          >
+            KLZ Cables
+          </div>
+        )}
       </div>
 
       {/* Saturated Blue Brand Strip */}